@charset "utf-8";

/* .video-wrapper 
================================================== */
.video-wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  z-index:0;
}

.video-pc {
  display:block;
}

.video-sp {
  display:none;
}

@media screen and (max-width: 820px) {
.video-pc {
  display:none;
}

.video-sp {
  display:block;
}
}

.block {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

#vdo {
  width: auto;
  min-width:100%;
  height: auto;
}

.video-wrapper::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(9, 2, 108, 0);
}

.video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 568px) {
.video-wrapper {
  aspect-ratio: 1 / 1;
  min-height: initial;
}
#vdo {
  width: auto;
  height: 100%;
}
}

/* .top-content
================================================== */
.top-content{
  width: 100%;
  margin:0 auto;
  padding:3% 0;
}

.top_photo{
  width:55%;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  position: relative;
}

.top_photo_pc{
  width:55%;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  position: relative;
}

@media screen and (max-width: 568px) {
.top_photo{
  width:100%;
  display: block;
  margin:2% auto;
}
.top_photo_pc{
  display: none;
}
}

.top_photo img,.top_photo_pc img{
  width:100%;
  height:auto;
}

#main_photo{
  position: absolute;
  top: 17%;
  left: 21%;
  width:57%;
  background:#FFF;
  padding:7px;
  box-sizing: border-box;
  -moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
}

.top_text{
  width:45%;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  color:#401f0f;
}

@media screen and (max-width: 568px) {
.top_text{
  width:100%;
  display: block;
  padding:3% 7%;
  box-sizing: border-box;
}
}

.top_text h2{
  font-size:2.4em;
  font-weight:600;
  line-height:1.3;
  margin-bottom:4%;
  font-family: 'Shippori Mincho', sans-serif;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 1280px) {
.top_text h2{
  font-size:2em;
  margin-bottom:2%;
}
}

@media screen and (max-width: 820px) {
.top_text h2{
  font-size:1.8em;
  margin-bottom:2%;
}
}

@media screen and (max-width: 750px) {
.top_text h2{
  font-size:1.6em;
}
}

@media screen and (max-width: 400px) {
.top_text h2{
  font-size:1.4em;
}
}

.top_text p{
  font-size:1.2em;
  line-height:1.8;
}

@media screen and (max-width: 1280px) {
.top_text p{
  font-size:1.05em;
  line-height:1.7;
}
}

@media screen and (max-width: 820px) {
.top_text p{
  font-size:1em;
}
}

#pdl5{
  padding-top:3%;
  padding-left:3%;
  box-sizing: border-box;
}

@media screen and (max-width: 568px) {
#pdl5{
  padding:3% 7%;
}
}


/* .food-contents
================================================== */
.food-contents {
  width: 100%;
  margin:2% auto;
}

#fdcontainer{
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

.food-bg {
  width: 100%;
  max-width:940px;
  margin:0 auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/bg-food.jpg);
}

.food-bg .overlay {
  width:100%;
  padding:3% 4%;
  box-sizing: border-box;
  background: rgba(38, 24, 11, 0.5);
}

@media screen and (max-width: 568px) {
.food-bg .overlay {
  padding:10px;
}
}

.food-ov {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width:100%;
  height:100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.food-block {
  display:block;
  position: relative;
}

.food-title {
  position: absolute;
  top:12%;
  left: 10%;
  width:170px;
}

@media screen and (max-width: 1280px) {
.food-title {
  top:10%;
  width:160px;
}
}

@media screen and (max-width: 820px) {
.food-title {
  top:8%;
  left: 7%;
}
}

.food-title img{
  height:auto;
  width:100%;
}

.food-syousai {
  position: relative;
  width: 100%;
  height:auto;
  min-height:447px;
  margin:0 auto;
  border:0.02em solid #c3b3a1;
  padding:25px;
  box-sizing: border-box;
  text-align: center;
}

.food-syousai h3 {
  font-size:2.5em;
  font-weight:500;
  line-height:1.4;
  margin-bottom:2.5%;
  color: #fff;
}

@media screen and (max-width: 568px) {
.food-syousai h3 {
  font-size:1.8em;
}
}

@media screen and (max-width: 400px) {
.food-syousai h3 {
  font-size:1.6em;
}
}

.food-syousai .fdtx {
  font-size:1.1em;
  font-weight:400;
  line-height:1.6;
  color: #fff;
}

@media screen and (max-width: 568px) {
.food-syousai .fdtx {
  font-size:1.05em;
}
}

@media screen and (max-width: 400px) {
.food-syousai .fdtx {
  font-size:0.951em;
}
}

.food-syousai .about-buttons{
  margin-top:6%;
  text-align: center;
  font-weight:400;
  font-size:1.4em;
}

@media screen and (max-width: 820px) {
.food-syousai .about-buttons{
  text-align:center;
  margin-left:auto;
}
}

@media screen and (max-width: 568px) {
.food-syousai .about-buttons{
  font-size:1.1em;
}
}

.food-syousai .about-button{border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.food-syousai .about-button.c-button--ghost{display:inline-table;padding:10px 15%;border:1px solid #f2dec5;color:#f2dec5;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;-webkit-transition-duration:0.2s;transition-duration:0.2s}
.food-syousai .about-button.c-button--ghost:hover{border:1px solid #f2dec5;}
.food-syousai .about-buttons a{text-decoration:none;}
.food-syousai .about-buttons a:hover{text-decoration:none;display:inline-table;background-color:#f2dec5;color:#401f0f;text-shadow:none;}

/* .shop-contents
================================================== */
.shop-contents {
  width: 100%;
  margin:80px auto 5%;
  text-align: center;
}

#pdt10{padding-top:60px;position: relative;}

.shop-titles{
  position: absolute;
  top:-8%;
  left: 38%;
  width:350px;
  margin-left:-175px;
}

@media screen and (max-width: 1280px) {
.shop-titles{
  left: 32%;
}
}

@media screen and (max-width: 820px) {
.shop-contents {
  margin:70px auto 5%;
}

#pdt10{padding-top:50px;}

.shop-titles{
  left: 5%;
  top:-70px;
  margin-left:0px;
}
}

@media screen and (max-width: 568px) {
.shop-contents {
  margin:60px auto 3%;
}
#pdt10{padding-top:40px;}

.shop-titles{
  width:240px;
  left: 0%;
  top:-60px;
  margin-left:0px;
}
}

.shop-titles img{
  height:auto;
  width:100%;
}

.shop-contents h3{
  font-size:2.35em;
  font-weight:600;
  font-family: 'Hina Mincho', sans-serif;
  letter-spacing: 0.05em;
  line-height:1.4;
  color:#401f0f;
  margin-bottom:2%;
}

@media screen and (max-width: 820px) {
.shop-contents h3{
  font-size:2em;
}
}

@media screen and (max-width: 568px) {
.shop-contents h3{
  font-size:1.45em;
  margin-bottom:3%;
}
}

.shop-contents h4{
  font-size:2.35em;
  font-weight:600;
  font-family: 'Hina Mincho', sans-serif;
  letter-spacing: 0.05em;
  line-height:1.4;
  color:#401f0f;
  margin-bottom:2%;
}

@media screen and (max-width: 820px) {
.shop-contents h4{
  font-size:2em;
}
}

@media screen and (max-width: 568px) {
.shop-contents h4{
  font-size:1.8em;
  margin-bottom:3%;
}
}

.shop-catch{
  font-size:1.15em;
  line-height:1.8;
  margin-bottom:4%;
  color:#401f0f;
}

@media screen and (max-width: 820px) {
.shop-catch{
  font-size:1.1em;
}
}

@media screen and (max-width: 568px) {
.shop-catch{
  font-size:1em;
  line-height:1.6;
  margin-bottom:2%;
}
}

.shop-contents .about-buttons{
  text-align: center;
  font-weight:400;
  margin-top:4%;
  font-size:1.5em;
}

@media screen and (max-width: 568px) {
.shop-contents .about-buttons{
  font-size:1.2em;
}
}

.shop-contents .about-button{border:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.shop-contents .about-button.c-button--ghost{display:inline-table;padding:10px 5%;border:1px solid #401f0f;color:#401f0f;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;-webkit-transition-duration:0.2s;transition-duration:0.2s}
.shop-contents .about-button.c-button--ghost:hover{border:1px solid #401f0f;}
.shop-contents .about-buttons a{text-decoration:none;}
.shop-contents .about-buttons a:hover{text-decoration:none;display:inline-table;background-color:#401f0f;color:#f2dec5;text-shadow:none;}

@media screen and (max-width: 568px) {
.shop-contents .about-button.c-button--ghost{padding:10px 30px;}
}

.scene-list{
  width:100%;
  max-width:1100px;
  margin:0 auto 5%;
}

.scene-list #w30{
  width:33.3333%;
  box-sizing: border-box;
  position: relative;
  display:inline-block;
  vertical-align:top;
  padding:0 1.5%;
}

@media screen and (max-width: 1280px) {
.scene-list #w30{
  padding:0 1%
}
}

@media screen and (max-width: 820px) {
.scene-list #w30{
  width:46%;
  margin: 3% 2%;
}
}

@media screen and (max-width: 768px) {
.scene-list #w30{
  width:48%;
  margin: 3% 1%;
}
}


@media screen and (max-width: 568px) {
.scene-list #w30{
  width:94%;
  display:block;
  margin: 8% auto 2%;
}
}

.scene-list .photo_circle{margin-bottom:5px;}

.scene-list img.img-circle{border-radius:50%}

.scene-list img.img-circle.cir-img {
  width: 94%;
  height: auto;
  box-sizing: border-box;
  border: 0.02em solid #938052;
  padding:5px;
  margin:0 3%;
}

@media screen and (max-width: 568px) {
.scene-list img.img-circle.cir-img {
  width: 70%;
  margin:0 auto 5px;
}
}

.scene-ttl {
  width:100%;
  max-width:237px;
  margin:0 auto 20px;
}

@media screen and (max-width: 568px) {
.scene-ttl {
  margin:0 auto;
}
}

.scene-ttl img{
  width:100%;
  height:auto;
}

.redtx{
  margin:0 auto;
  color:#961e20;
  font-size:1.1em;
  text-align: left;
}

@media screen and (max-width: 820px) {
.redtx{
  font-size:1.05em;
}
}

#h10{
  margin-top:45px;
  width:85%;
}

#h5{
  margin-top:20px;
  width:70%;
}

@media screen and (max-width: 1280px) {
#h10{
  margin-top:35px;
  width:85%;
}

#h5{
  margin-top:15px;
  width:85%;
}
}

@media screen and (max-width: 820px) {
#h10{
  margin:5px auto 0;
  width:250px;
}

#h5{
  margin:5px auto 0;
  width:250px;
}
}

.redtx dt{
  display:inline-block;
  vertical-align:top;
}

.redtx dd{
  display:inline-block;
  vertical-align:top;
}

/* news-box
--------------------------------------- */
.news-box{
  width:100%;
  max-width:1100px;
  margin:2% auto 5%;
  position: relative;
}

@media screen and (max-width: 820px) {
.news-box{
  width:94%;
}
}

.news-top{
  width:100%;
  margin:0 auto;
  position: relative;
  z-index:1;
}

.news-btm{
  width:100%;
  margin:0 auto;
  position: relative;
  z-index:1;
}

.news-top img,.news-btm img{
  height:auto;
  width:100%;
}

.news-list{
  width:100%;
  box-sizing: border-box;
  padding:0 5% 3%;
  background-position:center center;
  background-repeat:repeat-y;
  background-size:100% auto;
  background-image:url(../images/top/bg-news.png);
  margin:0 auto -1px;
  position: relative;
  z-index:2;
}

@media screen and (max-width: 820px) {
.news-list{
  margin:0px auto -10px;
  padding:5x 30px 30px;
}
}

@media screen and (max-width: 568px) {
.news-list{
  margin:-5px auto -10px;
  padding:15px 20px 30px;
}
}

.news-ttl{
  font-size:2em;
  font-weight:400;
  line-height:1.4;
  margin-bottom:1.5%;
  text-align: center;
}

@media screen and (max-width: 820px) {
.news-ttl{
  font-size:1.6em;
  margin-bottom:2%;
}
}

@media screen and (max-width: 568px) {
.news-ttl{
  font-size:1.5em;
  margin-bottom:2%;
}
}

.news-list dl{
  width:100%;
  box-sizing: border-box;
  padding:2% 1% 5px;
  border-bottom:1px solid #462513;
  color:#462513;
  font-size:1.25em;
}

@media screen and (max-width: 820px) {
.news-list dl{
  font-size:1.1em;
  padding:20px 1% 5px;
}
}

@media screen and (max-width: 568px) {
.news-list dl{
  padding:15px 1% 5px;
  margin-bottom:5px;
}
}

.news-list dt{
  width:15%;
  display:inline-block;
  vertical-align:top;
  box-sizing: border-box;
  padding:0 5px;
}

.news-list dd{
  width:85%;
  display:inline-block;
  vertical-align:top;
  box-sizing: border-box;
  padding:0 0 0 2%;
  font-size:1.1em;
}

@media screen and (max-width: 820px) {
.news-list dt{
  width:100%;
  display:block;
  padding:0 8px;
  line-height:1;
  font-size:0.95em;
}

.news-list dd{
  width:100%;
  display:block;
  padding:5px;
  font-size:1em;
  line-height:1.5;
}
}

.news-list dd a{color:#462513;text-decoration:none;}
.news-list dd a:hover{color:#462513;text-decoration:underline;}