@charset "UTF-8";

/*-------------------------
__common_style
-------------------------*/

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}
body {
  font-family: Meiryo,'Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif;
  font-size: 62.5%;
  line-height: 1;
  text-align: center;
  -webkit-text-size-adjust: 100%;
}
fieldset,
table,
img,
a img {
  border: 0;
}
address,
em {
  font-style: normal;
}
strong,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
th {
  font-weight: normal;
}
ul,
ol {
  list-style: none;
}
input::-ms-clear {
  visibility: hidden;
  display: none;
}

/*.smt_on {
  display: none!important;
}
@media only screen and (max-width: 767px) {
  .smt_on {
    display: block!important;
  }
  .smt_off {
    display: none!important;
  }
}
*/
/*-------------------------
__contents
-------------------------*/
#contents {
  display: block;
  max-width: 1056px;
  margin: 0 auto;
}
#contents {
  font-size: 1px;
  line-height: 0;
}
#contents img {
  height: auto;
  width: 100%;
}
#contents .content_body_row {
  display: flex;
  flex-wrap: wrap;
}
#contents .content_body_row picture{
  width: 50%;
}
#contents .content_body_row img {
  width: 100%;
}
#contents .content_body_row .content_body_txt {
  font-size: 2.8409vw;
  line-height: 3.8825vw;
  text-align: left;
  padding: 2.817vw 3.849vw 4.953vw ;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  background-position: center top;
}
#contents .content_body_row.smt_off .content_body_txt {
  background-image: url("../images/img_1031_pc_13.webp");
  -webkit-background-size: cover;
  background-size: cover;
}
#contents .content_body_row.smt_on .content_body_txt {
  background-image: url("../images/img_1031_sp_13.webp");
}
#contents .content_fix_header{
  max-width: 1056px;
  width: 100%;
  transform: translateY(-100%);
  transition: all .5s;
  position: fixed;
  top: 0;
}
#contents .content_fix_header.fixed{
  transform: translateY(0);
}
#contents .content_body img{ vertical-align: bottom;}
@media only screen and (max-width: 767px) {
    #contents .content_body_row.smt_on{
      display: flex!important;
    }
    #contents .content_body_row picture{
      width: 100%;
    }
}

.steam_img{ position:absolute; left:50%; transform:translate(-50%);}
.steam_img.clt-option{opacity:0;}
#logo_annimation1,#logo_annimation2,#logo_annimation3,#steam_move1,#steam_move2,#steam_move3{ will-change:animation,transform,width,top,opacity; opacity:0;}
#logo_annimation1{animation:2s cubic-bezier(.65,0,.78,0) forwards;}
#logo_annimation2{animation:.3s cubic-bezier(.5,1,.89,1) 2s;}
#logo_annimation3{animation:.8s cubic-bezier(.5,1,.89,1) 2.1s;}
#steam_move1{animation:3s cubic-bezier(.32,1,.67,1) 2s infinite;}
#steam_move2{animation:3s cubic-bezier(.36,0,.62,1) 2.6s infinite;}
#steam_move3{animation:3s cubic-bezier(.60,1,.87,1) 4.3s infinite;}
@media screen and (min-width:768px){
.steam_img{ bottom:0; width:100%;}
#logo_annimation1{ animation-name:logo_pc1;}
#logo_annimation2,#logo_annimation3{ animation-name:logo_pc2;}
#steam_move1{ animation-name:steam_pc1;}
#steam_move2{ animation-name:steam_pc2;}
#steam_move3{ animation-name:steam_pc3;}
}
@media screen and (max-width:767px){
.steam_img{ top:0; width:100%;}
#logo_annimation1{ animation-name:logo_sp1;}
#logo_annimation2,#logo_annimation3{ animation-name:logo_sp2;}
#steam_move1{ animation-name:steam_sp1;}
#steam_move2{ animation-name:steam_sp2;}
#steam_move3{ animation-name:steam_sp3;}
}
@media screen and (min-width:1232px){
#logo_annimation1{animation-name:logo_ex1;}
#logo_annimation2,#logo_annimation3{animation-name:logo_ex2;}}@keyframes logo_sp1{0%{width:266%;top:-75%;opacity:0}99%{width:88.66%;top:-11.5%;opacity:1}100%{width:44.33%;top:5.5%;opacity:1}}@keyframes logo_sp2{0%{width:44.33%;top:5.5%;opacity:.5}100%{width:80%;top:-7%;opacity:0}}@keyframes steam_sp1{0%{top:0;opacity:0}20%{opacity:.8}100%{top:-18%;opacity:0}}@keyframes steam_sp2{0%{top:0;opacity:0}30%{opacity:.7}100%{top:-17%;opacity:0}}@keyframes steam_sp3{0%{top:0;opacity:0}30%{opacity:.8}60%{opacity:0}100%{top:-20%;opacity:0}}@keyframes logo_pc1{0%{width:148.56%;top:-102%;opacity:0}99%{width:49.52%;top:-18.5%;opacity:1}100%{width:24.76%;top:4.5%;opacity:1}}@keyframes logo_pc2{0%{width:24.76%;top:4.5%;opacity:.5}100%{width:44.56%;top:-14.5%;opacity:0}}@keyframes steam_pc1{0%{opacity:0;bottom:-25%}20%{opacity:.6}100%{opacity:0;bottom:0}}@keyframes steam_pc2{0%{opacity:0;bottom:-25%}30%{opacity:.5}100%{opacity:0;bottom:0}}@keyframes steam_pc3{0%{opacity:0;bottom:-30%}30%{opacity:.6}60%{opacity:0}100%{opacity:0;bottom:0}}@keyframes logo_ex1{0%{width:1830px;top:-612px;opacity:0}99%{width:610px;top:-111px;opacity:1}100%{width:305px;top:27px;opacity:1}}@keyframes logo_ex2{0%{width:305px;top:27px;opacity:.5}100%{width:550px;top:-87px;opacity:0}
}
.steam_box{ width: 100%; height: 100%; position:absolute; bottom: 0; left:50%; transform:translate(-50%); padding-bottom: 50%; box-sizing: border-box;}
.steam_box ul{ position: relative; width: 100%; height: 100%;}
.steam_dish_img,.clt-gbox{ box-sizing:border-box; width:100%; height:auto; margin:0 auto; display:block;}
.steam_dish_img>img,.steam_dish_img>picture,.steam_dish_img>picture>img{ width:100%; height:auto; display:block;}
.main_v{ height: 100%; position:relative; overflow:hidden;}
.dish_img{ position:absolute; top:0; left:50%; transform:translateX(-50%);}
@media screen and (max-width:767px){
.steam_box{ width: 100%; top: 0; bottom: auto; height: 100%;}

}