/* * { 
    margin: 0px; 
    padding: 0px; 
} */
html {
    font-size: 62.5%;
}
body {
    margin: 1rem;
    /* font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif; */
    font-family: serif;
    background-color: white;
    /* background-color: #fef7e5; */
    /* background-color: #f7fcfe; */
}
h1 {
    font-size: 5rem;
    word-break: break-all;
}

h2 {
    font-size: 4rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    border-bottom: solid;
}

.how2use {
    text-align: center;
    font-size: 2rem;
    word-break: break-all;
}

.disply_pc {
    display: none;
}

.disply_smapho {
    display: block;
}

model-viewer {
    width: 100%;
    height: 250px;
    background-color: white;
}

/*-----------------------------------------*/
.panel {
    border: 1px solid #000000;
    border-left: none;
    border-right:none;
    background-color: white;
    /* padding: 20px 0px 20px; */
    display: none;
    z-index: 1;
}

.box {
    background-color: #eee;
    display: block;
    display: inline-block;
    width: 15%; /*10%*/
    border: 1px solid #000000;
    position: fixed;
    right: 5%; /*3%*/
    z-index: 1;
}
.btn{
    display: block;
    flex-grow: 1;
    width: 100%;
    /* padding: 20px; */
    background-color: inherit;
    outline: none;
    border: none;
    cursor: pointer;
    text-align: center;
    z-index: 1;
}
.btn:hover {
    background-color: #ddd;
    z-index: 1;
}
.fas {
    float: right;
    z-index: 1;
}
/*-----------------------------------------*/

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}
  
.card {
    margin: 0rem auto 9rem;
    display: flex;
    flex-direction: column;
    width: 250px;
    background-color: rgb(75, 75, 75);
    border-radius: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    border-color: white;
    border-style: solid;
    border-width: 5px;
}

.attribution {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 1em;
}

.attribution_discription{
    font-size: 1.6rem;
    color: white;
    margin: 1rem auto 0.25em auto;
}

.donmono_lazy_load_poster {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("imeges/Logo_donburi.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}

.curry_lazy_load_poster {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("imeges/Logo_curry.png");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

.ramen_lazy_load_poster {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("imeges/Logo_ramen.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}

.soba_udon_lazy_load_poster {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url("imeges/Logo_soba_udon.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}

.tanpin_lazy_load_poster {
    position: absolute;
    left: 0;
    right: 5%;
    top: 0;
    bottom: 0;
    background-image: url("imeges/Logo_tanpin.png");
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
}
  
.button_load {
    background-image: url("imeges/Logo_load_white.svg");
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 6% 50%;
    background-color: #000000;
    color: white;
    border-color: white;
    border-style: solid;
    border-width: 3px;
    cursor: pointer;
    border-radius: 6px;
    display: inline-block;
    padding: 10px 10px 10px 40px;
    font-weight: 500;
    font-size: 13px;
    box-shadow: 0 0 8px rgba(0,0,0,.2), 0 0 4px rgba(0,0,0,.25);
    position: absolute;
    left: 50%;
    bottom: 26%;
    transform: translate3d(-50%, -50%, 0);
}
@media screen and (min-width:480px) and ( max-width:600px){
    /*　画面サイズが480pxから600pxまではここを読み込む　*/
}
@media screen and (min-width:600px) and ( max-width:1050px) {
   /*　画面サイズが600pxから1050pxまではここを読み込む　*/
   model-viewer {
       height: 400px;
   }
   .card {
       width: 400px;  
   }
}
@media screen and (min-width:1050px) {
   /*　画面サイズが1050pxからはここを読み込む　*/
   model-viewer {
       height: 600px;
   }
   .card {
       width: 600px;
   }
   .box {
       display: none;
   }
   .disply_pc {
       display: block;
   }
   .disply_smapho {
       display: none;
   }
}