@charset "utf-8";

main {
  font-size: 16px;
  line-height: 1.8;
  overflow-x: hidden;
  background-color:#FFF;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "メイリオ", sans-serif;
}
main a{
  transition-duration: 0.3s;
}
main a:hover{
  opacity:0.7;
}
.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.inner {
  width: 960px;
  margin: 0 auto;
}

.sp_display {
  display: none;
}
.fadein {
  opacity: 0;
  transition : all 0.5s;
  position:relative;
  top:2em;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
  top:0em;
}

h2 img{
  width:100%;
}

nav{
  padding:2em 0;
}
nav ul.flex{
  justify-content: center;
}
nav ul.flex li{
  margin:0 1.5em;
}

#message{
  padding:5em 0 3em;
  text-align: center;
  background:url("../img/message_bg.jpg") center top/cover no-repeat;
}
#message h3 + p{
  text-align: center;
  margin:2em 0 1.5em;
}
#message .img{
  position:relative;
}
#message .img span{
  font-size:20px;
  display:block;
  position:absolute;
  width:100%;
  left:0px;
  top:52%;
  text-align: center;
}
main .secret{
  text-align: center;
  padding:4em 0;
}

#movie{
  background-color:#f5f5f0;
  padding:7em 0;
}
#movie h3{
  text-align: center;
}
#movie h3 + p{
  text-align: center;
  margin-top: 2em;
}
#movie h4{
  text-align: center;
}
#movie h4 span{
  display:inline-block;
  font-size:24px;
  margin:3em 0em 1em;
  position:relative;
}
#movie h4 span:before{
  content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.5em;
    left: -1.5em;
    width: 1em;
    height: 1em;
    border-top: 0.07em solid #333333;
    border-right: 0.07em solid #333333;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
#movie h4 span:after{
  content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.5em;
    right: -1.5em;
    width: 1em;
    height: 1em;
    border-top: 0.07em solid #333333;
    border-right: 0.07em solid #333333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#movie dl{
  background-color:#FFF;
  border-top:2px solid #979694;
  border-bottom:2px solid #979694;
  margin-top:2em;
}
#movie dl dt{
  font-size:20px;
  padding:1.5em 0;
  padding-left:2em;
  position:relative;
  cursor: pointer;
}
#movie dl dt:after{
  content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.5em;
    right: 1.5em;
    width: 0.5em;
    height: 0.5em;
    border-top: 0.07em solid #333333;
    border-right: 0.07em solid #333333;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
#movie dl dt.btn_on:after{
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  margin-top: -0.2em;
}
#movie dl dd{
  display:none;
}
#movie dl dd ul{
  width:85%;
  margin: 0 auto 2em;
}
#movie dl dd ul li{
  margin-bottom:2em;
}
#movie dl dd ul li p{
  text-align: center;
  margin-bottom:0.3em;
  height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
}
#movie dl dd ul li p > span{
  color:#c8a063;
  font-size:17px;
  position:relative;
}
#movie dl dd ul li p > span:before {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.6em;
    left: -1.3em;
    width: 1em;
    height: 1em;
    border-top: 0.07em solid #c8a063;
    border-right: 0.07em solid #c8a063;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
#movie dl dd ul li p > span:after {
    content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.6em;
    right: -1.3em;
    width: 1em;
    height: 1em;
    border-top: 0.07em solid #c8a063;
    border-right: 0.07em solid #c8a063;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#movie dl dd ul li p > span span{
  font-size:1.5em;
}
#movie dl dd ul li p > span span.finish{
  font-size:1.3em;
}

#recipe{
  padding-top:5em;
}
#recipe h3{
  text-align: center;
}
#recipe h4{
  text-align: center;
  margin-top:5em;
  margin-bottom:2em;
}
#recipe .bg{
  background: url("../img/coldrecipe_bg.jpg") center top/cover no-repeat;
  padding-top:5em;
  padding-bottom:1px;
}
#recipe ul li{
  justify-content: flex-start;
  margin-bottom:5em;
}

#recipe ul li > div{
  background-color:#FFF;
  box-sizing: border-box;
  display:flex;
  justify-content: center;
  align-items: center;
  width:440px;
  padding:0 6%;
}
#recipe ul li > div div h5{
  font-size:20px;
  border-bottom:1px solid #9abedc;
  padding-bottom:0.5em;
  margin-bottom:0.5em;
}
#recipe ul li > div div h5.hot{
  border-bottom:1px solid #cc9696;
}
#recipe ul li > div div a{
  display:block;
  border-radius: 0.5em;
  background-color:#595757;
  text-align: center;
  color:#FFF;
  font-size:18px;
  position:relative;
  padding:1em 0;
  text-decoration: none;
  margin-top:1.5em;
}
#recipe ul li > div div a:after{ 
    content: "";
    vertical-align: middle;
    position: absolute;
    top: 50%;
    margin-top: -0.3em;
    right: 1.5em;
    width: 0.5em;
    height: 0.5em;
    border-top: 0.07em solid #FFF;
    border-right: 0.07em solid #FFF;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
#recipe ul li:nth-of-type(even){
  justify-content: flex-end;
}
#recipe ul li:nth-of-type(even) picture{
  order:2;
}
#recipe ul li:nth-of-type(even) > div{
  order:1;
}
#que{
  background-color:#f5f5f0;
  padding-top: 5em;
  padding-bottom:5em;
}
#que h3{
  text-align: center;
  margin-bottom:4em;
}
#que dl > div{
  width:48.5%;
  margin-bottom:1.5em;
  background-color: #FFF;
}
#que dt{
  font-size:20px;
  display:flex;
  align-items: center;
  padding-left:4em;
  background-color:#595757;
  height: 5em;
  color:#FFF;
  line-height: 1.7;
  position:relative;
}
#que dt:before{
  content:"Q";
  color:#FFF;
  position:absolute;
  font-size:1.5em;
  left:1em;
  top:50%;
  margin-top:-0.8em;
}
#que dt:after{
  content:"";
  border-top: 1.2em solid #595757;
  border-right: 0.7em solid transparent;
  border-left: 0.7em solid transparent;
  position:absolute;
  bottom:-1em;
  left:50%;
  margin-left:-0.5em;
}
#que dd{
  padding:2em;
  line-height: 1.6;
  padding-left: 4.5em;
  position:relative;
}
#que dd:before{
      content: "A";
    position: absolute;
    font-size: 2em;
    left: 1em;
    top: 0.7em;
}
#que dd .img{
  text-align: center;
  margin-top:2em;
}
#que dd .caption{
  font-size:0.8em;
  padding-left:1em;
  text-indent: -1em;
}
#que .lineup{
  margin-top:3em;
}
#shop{
  background-color:#595757;
  text-align: center;
  padding:4em 0;
}
#shop h3{
  text-align: center;
  margin-bottom:2em;
}



@media screen and (max-width: 800px) {
  html,
  main {
    font-size: 3.5vw;
    overflow-x: hidden;
  }
  .sp_display {
    display: block;
  }
  .pc_display {
    display: none;
  }
  img {
    max-width: 100%;
  }
  .inner{
    width:100%;
  }
  nav {
    padding: 0;
}
  nav ul.flex li {
    margin: 0;
    width:50%;
}
  h3 img{
    height: 14vw;
    width:auto;
  }
  #message h3 + p {
    margin: 1.5em 0 2em;
}
  #message .img span {
    font-size: 3.5vw;
    position: relative;
    left: auto;
    top: auto;
    margin-top:3em;
    display:block;
}
  main .secret{
    padding-left:1em;
    padding-right:1em;
    box-sizing: border-box;
  }
  #movie {
    padding: 4em 0;
}
  #movie .inner{
    width:90%;
    margin:0 auto;
  }
  #movie iframe{
    width:90vw;
    height: 50.625vw;
  }
#movie h4 span {
    font-size: 4vw;
    margin: 3em 0em 1em;
}
  
  #movie dl dt{
    font-size:3.5vw;
    padding: 1em 1em;
  }
  #movie dl dd ul li p > span {
    font-size: 4vw;
}
  #movie dl dd ul li p > span span {
    font-size: 1em;
}
  #movie dl dd ul li p > span span.finish {
    font-size: 1em;
}
  #movie dl dd ul li p > span:before {
    margin-top: -0.4em;
    left: -0.8em;
    width: 0.6em;
    height: 0.6em;
}
  #movie dl dd ul li p > span:after {
    margin-top: -0.4em;
    right: -0.8em;
    width: 0.6em;
    height: 0.6em;
}
  #recipe h3 img {
    height: 19vw;
}
  #recipe h4 img {
    height: 15vw;
    width: auto;
}
  #recipe ul li:nth-of-type(even) picture {
    order: 1;
}
  #recipe .bg{
    padding-left:10%;
    padding-top: 3em;
    padding-right:10%;
  }
  #recipe ul li {
    margin-bottom: 3em;
}
  #recipe ul li img{
    width:70%;
    margin:0 auto;
    display:block;
  }
  #recipe ul li > div {
    display: block;
    width: 100%;
    padding: 10%;
    box-sizing: border-box;
}
  #recipe ul li > div div h5{
    font-size:4vw;
    text-align: center;
  }
  #recipe ul li > div div a{
    font-size:3.5vw;
    width:80%;
    margin-left:10%;
  }
  
  #que dl{
    width:90%;
    margin:0 auto;
  }
  #que dl > div {
    width: 100%;
}
  #que dt {
    font-size: 4vw;
  }
  #que .lineup {
    width:90%;
    margin-left:5%;
}
  
  #shop h3 img {
    height: 4.5vw;
}
  #shop ul{
    display:block;
    width:59%;
    margin:0 auto;
  }
  #shop ul li{
    margin-bottom:5vw;
  }
  #shop ul li:last-child{
    margin-bottom:0vw;
  }
  
  
}