@charset "utf-8";
/* CSS Document */

*{box-sizing: border-box;}
body{padding: 0;margin: 0;font-family: 'Noto Serif JP', sans-serif;line-height: 1.8em; font-size: 18px;/*font-weight: 700;*/overflow-x: hidden;/*background-image: url("../images/bg_mainimage.jpg");*/ background-image: url("../common/bk_image_basic.jpg");background-size: auto;  min-height: 100vh; display: flex; flex-direction: column;color: #333;}

.container{max-width: 1480px;width: 100%; margin: auto;font-size: 1.2rem;flex: 1;}
.Container{max-width: 1480px;width: 100%; margin: auto;font-size: 1.2rem;flex: 1;}
header{width: 100%;margin: 0;padding: 1em;display: flex;justify-content: space-between; position: fixed;z-index: 10;}
header h1{padding: 0;margin: 0;z-index: 12;}
header .menu{padding: 0;margin: 0;}
section{margin: 0;padding: 0;}
a{text-decoration: none;color: #333;}
a:hover{color: rgba(51,51,51,.60);}
a img:hover{opacity: .6;}
@media screen and (max-width: 820px) {
header h1{max-width: 314px;width: 65%; padding: 0;margin: 0;}
header h1 a{padding: 0;margin: 0;display: block;}
header h1 a img{width: 100%;}
}

/* GTranslate */
.lang-switcher select {
  font-size: 0.8rem;
  padding: 2px 4px;
}
.lang-switcher img {
  width: 18px !important;
}
/* GTranslate ドロップダウンを小さめにする */
.gtranslate_wrapper select {
  font-size: 0.85rem;   /* フォントサイズ */
  padding: 2px 6px;     /* 内側の余白 */
  height: auto;         /* 高さを自動 */
}

/* 国旗のサイズ調整 */
.gtranslate_wrapper img {
  width: 20px !important;
  height: auto !important;
}

/* メインセクション：中央に配置 */
section.mainimage {background-image: url("../common/bk_image_basic.jpg");/*background-image: url("../images/bg_mainimage.jpg");*/display: flex;justify-content: center;align-items: center;height: 100vh;position: relative;}
/* テキストと画像の共通コンテナ */
section.mainimage .image-container {position: relative;height: 400px;overflow: visible;}
/* テキストスタイル */
section.mainimage .image-container .item {position: absolute;top: 40%;left: 50%;transform: translate(-50%, -70%);opacity: 0;font-size:clamp(1.125rem, 0.08rem + 5.23vw, 4rem);font-weight: bold;color: #333;white-space: nowrap;}
/* テキスト1・2のアニメーション */
@keyframes bounceFade {
  0% {
    transform: translate(-50%, 120px);
    opacity: 0;
  }
  20% {
    transform: translate(-50%, -40px);
    opacity: 1;
  }
  40% {
    transform: translate(-50%, 0);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    /* blurは削除 */
  }
}
.bounce-fade {animation: bounceFade 3s ease-out forwards;}

/* 画像3の初期状態・中央固定 */
section.mainimage .image-container .img3 {top: 60%;left: 50%;position: absolute;transform: translate(-50%, -50%) scale(1);transform-origin: center;opacity: 1;width: 25vw;}
/* 非表示状態 */
section.mainimage .image-container .img3.hidden {opacity: 0;transform: translate(-50%, -50%) scale(0.5);}

.img4,.img5 {  position: absolute;  width: 20vw;  opacity: 0;  z-index: 5;  display: block;}

/* 個別に transform を指定して中央揃えから解除 */
.img4 {  top: 40%;  left: 20%;}
.img5 {  top: 30%;  right: 0%;}

/* アニメーション */
.img4.zoom-in, .img5.zoom-in {  animation: zoom 1.5s ease-out forwards;  opacity: 1;}
.img4.float{  animation: floatY 3.5s ease-in-out infinite;}
.img5.float{  animation: floatY 2.8s ease-in-out infinite;}

/* 非表示初期状態 */
.hidden {  display: none;  opacity: 0;  transform: scale(0.5);  transition: opacity 0.5s ease, transform 0.5s ease;}

/* SNSアイコンボックス（右下固定・横並び） */
.sns-fixed-box {  position: absolute;  bottom: 20px;  right: 20px;  display: flex;  flex-direction: row;   /* 横並び */  gap: 15px;/* アイコン間の余白 */}
/* 初期状態：非表示＆下にズレてる */
.sns-fixed-box {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none; /* 透明中はクリック無効 */
}
/* 表示状態：元の位置に戻す */
.sns-fixed-box.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* SNSリンクの親（aタグ）はブロック要素に */
.sns-fixed-box a {  display: block;}
/* 各SNS画像に個別サイズを指定（aではなくimgに） */
.img6 img { width: 150px; height: auto;margin: 0 18px 0 0; }    /* Instagram */
.img7 img { width: 150px; height: auto; }    /* TikTok */
.img8 img { width: 150px; height: auto; }    /* YouTube */

/* スマホ対応 */
@media screen and (max-width: 820px) {
/* テキストと画像の共通コンテナ */
section.mainimage .image-container {position: relative;height: 400px;overflow: visible;}
/* テキストスタイル */
section.mainimage .image-container .item {position: absolute;top: 40%;left: 50%;transform: translate(-50%, -70%);opacity: 0;/*font-size: 40px;*/font-weight: bold;color: #333;white-space: nowrap;}
section.mainimage .image-container .img3 {top: 80%;left: 50%;position: absolute;transform: translate(-50%, -50%) scale(1);transform-origin: center;opacity: 1;width: 50vw;}
.img4 {  top: 35%;  left: 20%; width: 40vw;}
.img5 {  top: 30%;  right: -20%; width: 40vw;}
.sns-fixed-box {right: 0;  bottom: 0;gap: 5vw;padding: 1em;width: 100%; display: flex;justify-content: flex-end;}
.sns-fixed-box .img6, .sns-fixed-box .img7, .sns-fixed-box .img8 {height: 80px; width: auto;max-width: none; }
.sns-fixed-box .img6 img, .sns-fixed-box .img7 img, .sns-fixed-box .img8 img {width: auto; height:100%;margin: 0; }
}
@media screen and (max-width: 820px) and (orientation: landscape) {
/* 画像3の初期状態・中央固定 */
section.mainimage .image-container .img3 {top: 60%;left: 50%;position: absolute;transform: translate(-50%, -50%) scale(1);transform-origin: center;opacity: 1;width: 25vw;}
/* 非表示状態 */
section.mainimage .image-container .img3.hidden {opacity: 0;transform: translate(-50%, -50%) scale(0.5);}
.img4,.img5 {  position: absolute;  width: 20vw;  opacity: 0;  z-index: 5;  display: block;}

/* 個別に transform を指定して中央揃えから解除 */
.img4 {  top: 40%;  left: 20%;}
.img5 {  top: 30%;  right: 0%;}
}
@media screen and (max-width: 414px){
section.mainimage .image-container .img3 {top: 70%;left: 50%;position: absolute;transform: translate(-50%, -50%) scale(1);transform-origin: center;opacity: 1;width: 65vw;}
.sns-fixed-box .img6, .sns-fixed-box .img7, .sns-fixed-box .img8 {height: 80px; width: auto;max-width: none; }
	}
@media screen and (max-width: 375px){
section.mainimage .image-container .img3 {top: 60%;left: 50%;position: absolute;transform: translate(-50%, -50%) scale(1);transform-origin: center;opacity: 1;width: 60vw;}
	}
    /* ズームアニメーション */
    @keyframes zoom {
      0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }
    }

    .zoom-in {
      animation: zoom 1.5s ease-out forwards;
    }

    /* ふわふわアニメーション（上下） */
    @keyframes floatY {
      0%, 100% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -60%) scale(1);
      }
    }

    .float {
      animation: floatY 3s ease-in-out infinite;
    }

/* スクロールで動くアニメーション */
/*.fade-in-up {  opacity: 0;  transform: translateY(30px);}
.fade-in-up.animate__animated.animate__fadeInUp {  opacity: 1;  transform: translateY(0);}
.fade-in-right {  opacity: 0;  transform: translateX(30px);  transition: all 0.8s ease-out;}
.fade-in-right.animate__animated.animate__fadeInRight {  opacity: 1;  transform: translateX(0);}*/

.fade-in-up,
.fade-in-right,
.fade-in-left,
.fade-in-down,
.fade-in-slow {
  opacity: 0;
  transform: translateY(30px); /* デフォルト値（上書き可） */
  transition: all 1s ease-out;
}

/* アニメ後それぞれ */
.fade-in-up.animate__animated.animate__fadeInUp {
  opacity: 1;
  transform: translateY(0);
}
.fade-in-right.animate__animated.animate__fadeInRight {
  opacity: 1;
  transform: translateX(0);
}
.fade-in-left {
  transform: translateX(-30px);
}
.fade-in-left.animate__animated.animate__fadeInLeft {
  opacity: 1;
  transform: translateX(0);
}
.fade-in-down {
  transform: translateY(-30px);
}
.fade-in-down.animate__animated.animate__fadeInDown {
  opacity: 1;
  transform: translateY(0);
}
.fade-in-slow.animate__animated.animate__fadeIn {
  opacity: 1;
}


section.about{background-image: url("../common/bk_image_basic.jpg");/*background-image: url("../images/bg_note.jpg");*/position: relative;}
section.about .container{max-width: 1480px;width: 100%; margin: auto;font-size: 1.2rem;flex: 1;margin-inline: auto;}
section.about .head {padding: 180px 0 100px 50px;width: 100%; display: flex;justify-content: space-between;position: relative;flex:0 0 100%;}
section.about .head h2{font-size: clamp(1.6rem, 1.32rem + 1.4vw, 3rem);padding: 0;}
section.about .head img {width: 15%;position: absolute;right: 0;bottom: 0;}
@media screen and (max-width: 820px) {
section.about .head {padding: 60px 0 30px 6%;}
section.about .head h2{padding: 0 0 1em;}
}
@media screen and (max-width: 600px) {
section.about .head {padding: 50px 0 30px 1em;}
section.about .head h2{padding: 0;}
}

section.about figure.image{ position: relative; inline-size: min(100%, 1480px); height: 50vh;margin: 0 auto;overflow: hidden;}
section.about figure.image > img{ display: block; width: 100%; object-fit: cover;object-position: 50% 80%;height: 50vh; /*必要なら固定比率: aspect-ratio: 16/9; */}
section.about figcaption.image-caption{  position: absolute;  left: clamp(12px, 3vw, 28px);  bottom: clamp(12px, 3vw, 28px);  max-width: clamp(65%, 50vw, 560px);  padding: clamp(10px, 2.4vw, 18px) clamp(12px, 2.8vw, 22px);  background: rgb(0 0 0 / 55%); /* 背景 */  color: #fff;  /*font-size: clamp(1rem, 0.905rem + 0.48vw, 1.5rem);*/font-size:clamp(1.2rem, 1.152rem + 0.24vw, 1.45rem);  line-height: 1.9;  letter-spacing: .02em;  border-radius: 10px;  text-shadow: 0 1px 2px rgb(0 0 0 / 60%);}
section.about figcaption.image-caption .pc-br{ display:inline; }
@media screen and (max-width: 746px){
section.about figure.image{ display: flex;flex-direction: column;height:auto;}
section.about figure.image > img{ display: block; width: 100%; object-fit: cover;object-position: 50% 80%;height: 40vh; /*必要なら固定比率: aspect-ratio: 16/9; */}
section.about figcaption.image-caption .pc-br{ display:none; }

section.about figcaption.image-caption{ position: static;display: block; background: none;color: #222;text-shadow: none;margin: clamp(8px, 4vw, 16px);padding: 0;max-width: none;}
section.about figure.image::after{ background: none; }
}



section.about .top{height: auto; padding: 0; width: 100%;overflow: hidden;position: relative;}
section.about .top .container{max-width:inherit;width: 100%; padding: 0;margin: auto;display: flex;justify-content: flex-start;}
section.about .top .photo_main {position: relative;padding: 7vh 0 7vh 4%;max-width: 39%;width: 100%;  margin: 0;}
section.about .top .photo_main .left_img {width: 100%;}
section.about .top .description{width: 41%;position: relative; padding: 10vh 5vw; margin: 0 20% 0 0;}
section.about .top .description h2{/*font-size: 2.2vw;*/font-size: clamp(1.6rem, 1.32rem + 1.4vw, 3rem);position: relative;margin: 1em auto 1.5em;padding: 0;width: fit-content;}
section.about .top .description h2::before{content: "";position: absolute;width: 5vw;height:3em;top: -1em;left: -2em;margin-right: 0;background-size: contain;background-image: url("../images/curious.png");background-repeat: no-repeat;}
/*section.about .top .description h2 span{color: #c39c62;}*/
section.about .top .description h2 span.small{color: #000;font-size: 1.5vw;}
section.about .top .description .text{max-width: 620px;width: 100%; margin: auto; padding: 0;font-size: 1.2vw;font-weight: 500;line-height: 1.5em;}
section.about .top .goma_img{position: absolute;right: -3%;bottom: 0;max-width: 20%;width: 100%;}
section.about .bottom{height: 50vh;width: 100%;}
section.about .bottom .photoscroll {position: relative;overflow: hidden;width: 100%;background: #fff;margin: 0;padding: 0;font-size: 0; line-height: 0;}
section.about .bottom .photo-marquee {white-space: nowrap;overflow: hidden;}
section.about .bottom .track {display: flex;  animation: marquee 30s linear infinite;vertical-align: middle;margin: 0;padding: 0;height: 50vh;}
section.about .bottom .track img {width: 20vw;aspect-ratio: 2 / 3; height: auto; display: block;vertical-align: bottom;object-fit: cover;}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
section.about .bottom .logoBox {background-color: #fff;height:50vh; width: 16%;padding:0; position: absolute;  top: 0;bottom: 0; left: 50%;  transform: translateX(-50%);   z-index: 10;  pointer-events: none;display: flex;  justify-content: center;  align-items: center; }
section.about .bottom .logoBox img {width: auto;height: clamp(200px, 50%, 300px);}

@media screen and (max-width: 820px) {
section.about .top .container{max-width:inherit;width: 100%; padding: 0;margin: auto;display: flex;flex-direction: column;flex-direction: column-reverse;justify-content: flex-start;}
section.about .top .photo_main {position: relative;padding: 1em;max-width: 70%;width: auto;  margin: 1em auto 1em 1em;}
section.about .top .description{width: 95%;position: relative; padding: 1em; margin: 1em auto;}
section.about .top .description h2{/*font-size: 5vw;*/position: relative;margin: 1em auto;padding: 0;width: fit-content;}
section.about .top .description h2::before{content: "";position: absolute;width: 7vw;height:4em;top: -.5em;left: -1em;margin-right: 0;background-size: contain;background-image: url("../images/curious.png");background-repeat: no-repeat;}
section.about .top .description h2 span.small{color: #000;font-size: 5vw;}
section.about .top .description .text{max-width:initial;width: 100%; margin: auto; padding: 0;font-size: 1rem;font-weight: 500;line-height: 1.5em;}
section.about .top .goma_img{position: absolute;right: -3%;bottom: 0;max-width: 40%;width: 100%;}
section.about .bottom .logoBox {background-color: #fff;height:50vh; width: 16%;padding:0; position: absolute;  top: 0;bottom: 0; left: 50%;  transform: translateX(-50%);   z-index: 10;  pointer-events: none;display: flex;  justify-content: center;  align-items: center; }
}
@media screen and (max-width: 414px) {
section.about .top .photo_main {position: relative;padding: 1em;max-width: 70%;width: auto;  margin: 1em auto 1em 0;}
}

@media screen and (max-width: 820px) {
  section.about .bottom {    height: 40vh;  }
  section.about .bottom .track {    height: 40vh;  }
  section.about .bottom .track img {    width: 40vw; /* スマホでは大きめに表示 */  }
  section.about .bottom .logoBox {    width: 30%;    height: 40vh;  }
  section.about .bottom .logoBox img {    height: 60%;  }
}
/* さらに小さいデバイス用 */
@media screen and (max-width: 480px) {
  section.about .bottom {    height: 35vh;  }
  section.about .bottom .track {    height: 35vh;  }
  section.about .bottom .track img {    width: 60vw;  }
  section.about .bottom .logoBox {    width: 40%;    height: 35vh;  }
  section.about .bottom .logoBox img {    height: 70%;  }
}

/* vertical movie */
.textmovie {  overflow: hidden;  /*height: 100vh; */ position: relative;  margin: 0;  padding: 0;}
.textmovie .element {  position: absolute;  top: 100%; /* 下からスタート */  left: 0;  width: 100%;  text-align: left;  font-size: 24px;  display: flex;  flex-direction: column;  align-items: flex-start; /* ← これを追加 */  animation: slide-up 12s linear infinite;  animation-timing-function: linear;pointer-events: none;}

@keyframes slide-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-200%);
  }
}
/* モバイル用アニメーション */
@keyframes slide-up-mobile {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-700%);
  }
}
.textmovie .element img {
  width: auto;
  object-fit: contain;
}
@media screen and (max-width: 820px) {
.textmovie {  overflow: hidden;position: relative;  margin: 0;  padding: 0;}
.textmovie .element {animation-name: slide-up-mobile;}
.textmovie .element img {  width: 10%;  object-fit: contain;}
}


section.exp_sushi{background-image: url("../common/bk_image_basic.jpg");/*background-image: url("../images/bg_koushi.jpg");*/padding: 2em 0;}
section.exp_sushi .container{display: flex;justify-content: flex-start; padding: 2em 0;}
section.exp_sushi .desc_exp{width: 65%;margin: auto;}
section.exp_sushi .desc_exp h2{/*font-size: 2.5vw;font-size:48px;*/font-size:clamp(1.6rem, 1.32rem + 1.4vw, 3rem);text-align: center;}
section.exp_sushi .desc_exp h2 span{/*color: #fff;*/}
section.exp_sushi .desc_exp h3{font-size: clamp(1.2rem, 1.152rem + 0.24vw, 1.45rem);font-weight: 400;margin: 2em auto 1em;}
section.exp_sushi .desc_exp .textbox{width: 100%;font-size:clamp(1.2rem, 1.152rem + 0.24vw, 1.45rem);font-weight: 400;line-height:clamp(1.3em, 1.205em + 0.48vw, 1.8em);;}
section.exp_sushi .desc_exp .textbox span.point{display: block;margin: .7em 0;/*font-weight: 900;*/}
section.exp_sushi .desc_exp .btn{text-align: center;padding: 2em; margin: auto;}
section.exp_sushi .desc_exp .btn a{max-width: 400px;display: block;margin: auto;}
section.exp_sushi .desc_exp .btn a img{width: 100%;}
section.exp_sushi .exp_image{width: 30%;}
@media screen and (max-width: 1280px) {
section.exp_sushi .container{display: flex;padding: 2em 0;max-width: 1100px;width: 100%; margin: auto 0 auto auto;}
}
@media screen and (max-width: 820px) {
section.exp_sushi .container{display: flex;flex-direction: column; padding: 2em 0;}
section.exp_sushi .desc_exp{width: 100%;margin: auto;}
section.exp_sushi .desc_exp h2{/*font-size: 5vw;*/text-align: center;}
section.exp_sushi .desc_exp h3{font-weight: 400;margin: 1.5em auto .5em 5%;}
section.exp_sushi .desc_exp .textbox{width: 90%;font-weight: 400;line-height: 1.8;margin: auto auto auto 5%;}
section.exp_sushi .desc_exp .textbox span{display: block;}
section.exp_sushi .desc_exp .btn a{width: auto;display: block;margin: auto;}
section.exp_sushi .exp_image{width: 90%;margin: auto;}
}

section.exp_sushi .exp_image .vertical-carousel {  display: flex;  flex-direction: column;  align-items: center;  width: 100%; /* 調整可 */  margin: 0 auto;}
section.exp_sushi .exp_image .image-container {  width: 100%;  aspect-ratio: 1 / 1;  overflow: hidden;  position: relative;	margin: 1em 0;}
section.exp_sushi .exp_image .carousel-image {  position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%); aspect-ratio: 1 / 1;width: 100%;object-fit: cover;  display: none;  transition: opacity 0.5s ease;}
section.exp_sushi .exp_image .carousel-image.show {  display: block;}
section.exp_sushi .exp_image button.up, button.down {  font-size: 1.5rem;  background: none;  border: none;  cursor: pointer;}
section.exp_sushi .exp_image button.arrow {  width: 0;  height: 0;  border-left: 30px solid transparent;  border-right: 30px solid transparent;  background: none;  border-top: 0;  border-bottom: 0;  cursor: pointer;  padding: 0;  border-style: solid;}
/* 上向き三角 ▲ */
section.exp_sushi .exp_image button.arrow.up {  border-bottom: 30px solid #603814; /* 三角の色 */}
/* 下向き三角 ▼（もし必要なら） */
section.exp_sushi .exp_image button.arrow.down {  border-top: 30px solid #603814;}
@media screen and (max-width: 1280px) {
section.exp_sushi .exp_image .image-container {  width: 70%;  aspect-ratio: 1 / 1;  overflow: hidden;  position: relative;	margin: 1em 0;}
}
@media screen and (max-width: 820px) {
section.exp_sushi .exp_image .image-container {  width: 90%;  aspect-ratio: 1 / 1;  overflow: hidden;  position: relative;	margin: 1em 0;}
}
@media screen and (max-width: 1280px) and (orientation: landscape) {
section.exp_sushi .container{display: flex;justify-content: flex-start; padding: 2em 0;width: 95%;margin: auto;}
section.exp_sushi .exp_image .image-container {  width: 100%;  aspect-ratio: 1 / 1;  overflow: hidden;  position: relative;	margin: 1em 0;}
}


section.menu{background-image: url("../common/bk_image_basic.jpg");/*background-image: url("../images/bg_note.jpg");*/padding: 3em 0;}
section.menu h2{/*font-size: 2.5vw;*/font-size: clamp(1.6rem, 1.32rem + 1.4vw, 3rem);text-align: center;}
/*section.menu h2 span{color: #c39c62;}*/
section.menu .disc_text{padding: clamp(2rem, 1.6rem + 2vw, 4rem) 0;text-align: center;font-weight: 400;font-size: clamp(1.2rem, 1.152rem + 0.24vw, 1.45rem);}
section.menu .menu_photo{display: flex;justify-content: space-between;width: 80%;margin:auto;}
section.menu .menu_photo img{width: 30%;object-fit: cover;}
section.menu .btn{text-align: center;padding: 3em 0;margin: auto; z-index: 11;}
section.menu .btn a{max-width: 400px;display: block;margin: auto;}
section.menu .btn a img{width: 100%;}
@media screen and (max-width: 1280px) {
section.menu .container{max-width: 1200px;width: 100%; margin: auto 0 auto auto;}
}
@media screen and (max-width: 820px) {
section.menu h2{/*font-size: 5vw;*/text-align: center;}
section.menu .disc_text{padding: 2em 0;width: 80%;margin-left: 10%;text-align: center;font-weight: 400;}
section.menu .btn{width: 80%;margin: auto;}
section.menu .btn a{width: auto;display: block;margin: auto;}
section.menu .menu_photo{display: flex;flex-direction: column; justify-content: space-between;width: 85%;margin:auto auto auto 10%;}
section.menu .menu_photo img{width: 100%;margin-bottom: 1em;}
}

section.goods{height:auto;padding: 7em 0;}
section.goods h2{font-size: clamp(1.6rem, 1.32rem + 1.4vw, 3rem);text-align: center;color: #000;}
section.goods h2 span{color: #000;}
section.goods .disc_text{padding: clamp(2rem, 1.6rem + 2vw, 4rem) 0;text-align: center;font-weight: 400;}
section.goods .item_photo{display: flex;justify-content: space-evenly;width: 80%;margin:auto;}
section.goods .item_photo a{width: 18%;}
section.goods .item_photo a img{width: 100%;border-radius:200px 200px 0 0;object-fit: cover;height: 300px;}
section.goods .btn_shop{width: 100%;text-align: center;padding: 2em 0;}
section.goods .btn_shop a{width: 25%;display: inline-block;border-radius: 50px;padding: 1em 3em;background-color: #603814;color: #fff;}
section.goods .btn_shop a:hover{width: 25%;display: inline-block;border-radius: 50px;padding: 1em 3em;background-color: #fff;color: #603814;cursor: pointer;}
@media screen and (max-width: 820px) {
section.goods{height:auto;padding: 4em 0;}
section.goods h2{/*font-size: 5vw;*/text-align: center;color: #000;}
section.goods .disc_text{padding: 2em 0;width: 85%;margin: auto; text-align: center;font-weight: 400;}
section.goods .item_photo{display: flex;flex-wrap: wrap;justify-content: space-between;width: 90%;margin:auto;}
section.goods .item_photo a{width: 45%;margin-bottom: 1em;}
section.goods .item_photo a img{height: clamp(10rem, 0.4rem + 48vw, 25rem);}
section.goods .btn_shop a{width: auto;display: inline-block;border-radius: 50px;padding: 1em 3em;background-color: #603814;color: #fff;}
section.goods .btn_shop a:hover{width: auto;display: inline-block;border-radius: 50px;padding: 1em 3em;background-color: #fff;color: #603814;cursor: pointer;}
	}
	
section.access{padding: 7em 0;/*background-image: url("../images/bg_note.jpg");*/}
section.access h2{padding:0 0 1em 0; /*font-size: 2.5vw;*/font-size: clamp(1.6rem, 1.32rem + 1.4vw, 3rem);text-align: center;}
/*section.access h2 span{color: #c39c62;}*/
section.access .mapbox {max-width: 1480px;width: 100%; margin: auto;display: flex;padding: 4em 0;}
section.access .gmap {position: relative;padding-bottom: 35%;height: 0;overflow: hidden;width: 50%;}
section.access .gmap iframe {position: absolute;top: 0;left: 0;width: 100% !important;height: 100% !important;}
section.access .discarea {display: flex;padding: 0 4em;width: 50%;}
section.access .discarea address {width: 100%;}
section.access .discarea address dl{display: flex;vertical-align: top;font-style: normal;padding-bottom: .8em;}
section.access .discarea address dt{width: 5em;white-space: nowrap;font-weight: 700;}
section.access .discarea address dd{margin-left: 2em;}
section.access .discarea address dd span{display: block;}
section.access .discarea .acc_image {width: 50%;padding: 2em 0 0;}
section.access .discarea .acc_image .floating {position: relative;transition: transform 2s ease-in-out;will-change: transform;}
@media screen and (max-width: 820px) {
section.access{padding: 4em 0;/*background-image: url("../images/bg_note.jpg");*/}
section.access .mapbox {width: 100%; margin: auto;display: flex;padding: 2em 0;flex-direction: column;}
section.access h2{padding:0 0 1em 0; /*font-size: 5vw;*/text-align: center;}
section.access .gmap {position: relative;width: 100%;padding-bottom: 100%;height: 0;overflow: hidden;}
section.access .discarea {display: flex;flex-direction: column; padding: 4em 0 0;width: 90%;margin: auto;}
section.access .discarea address {width: 100%;margin: auto;padding-bottom: 3em;}
section.access address dl{display: flex;flex-direction: column; vertical-align: top;font-style: normal;padding: 0 0 1em 0;width: 100%;}
section.access address dt{width: 5em;}
section.access address dd{font-weight: 400;line-height: 1.3em;}
section.access address dd span{display: block; }
section.access .discarea .acc_image {width: 90%;padding: 2em 0 0;margin: auto;}
section.access .discarea .acc_image .floating {position: relative;transition: transform 2s ease-in-out;will-change: transform;width: 100%;}
	}
@media screen and (max-width: 1249px) and (orientation: landscape) {
section.access .mapbox {width: 100%; margin: auto;display: flex;padding: 2em 0;flex-direction: column;}
section.access .gmap {position: relative;width: 100%;padding-bottom: 50%;height: 0;overflow: hidden;}
section.access .discarea {display: flex;flex-direction: column; padding: 4em 0 0;width: 90%;margin: auto;}
section.access .discarea address {width: 100%;margin: auto;padding-bottom: 3em;}

}
	
section.welcome{background-image: url("../images/bg_welcome.jpg");background-repeat: no-repeat;background-position: left top;background-size: cover; padding: 0;line-height: 0;overflow: hidden;}
section.welcome .container{max-width: 910px;width: auto; margin: 0 auto;display: flex;align-items: flex-end;position: relative;}
section.welcome .container .goma_sushi{max-width: 275px;width:auto;margin: 5% auto 0 0;}
section.welcome .container .massage{max-width: 490px;width:auto;margin: auto auto 8% 0;}
section.welcome .container .goma_sushiimg, section.welcome .container .massage img{width: auto;height: 100%;}
@media screen and (max-width: 820px) {
section.welcome .container{max-width: auto;width: 100%; margin: 0 auto;display: flex;align-items: flex-end;position: relative;}
section.welcome .container .goma_sushi{max-width: 30%;width:auto;margin: 5% auto 0;}
section.welcome .container .massage{max-width: 50%;width:auto;margin: auto auto 15% 0;}
section.welcome .container .goma_sushi img, section.welcome .container .massage img { width: 100%;height: auto;}
}

section.instagram{padding: 3em 0;/*background-image: url("../images/bg_note.jpg");*/}
section.instagram h2{padding:1em 0 3em; /*font-size: 2.5vw;*/font-size: clamp(1.6rem, 1.32rem + 1.4vw, 3rem);text-align: center;}
/*section.instagram h2 span{color: #c39c62;}*/
section.instagram .container{width:clamp(90%, 90%, 910px);margin: 0 auto;}
@media screen and (max-width: 820px) {
section.instagram h2{padding:1em 0 3em;/* font-size: 5vw;*/text-align: center;}
	}

footer{background-image: url("../images/bg_koushi.jpg");text-align: center;padding: 5em 0;}
@media screen and (max-width: 820px) {
footer{padding: 3em 0;font-size: .9rem;}
}
@media screen and (max-width: 414px) {
footer{padding: 2em 0;font-size: .7rem;}
}

/* page */
.contents main{display: flex;flex-wrap:wrap;}
/*.contents main .head {padding: 180px 0 100px 50px;width: 100%; display: flex;justify-content: space-between;position: relative;flex:0 0 100%;}*/
.contents main .head h2{font-size: clamp(1.6rem, 1.32rem + 1.4vw, 3rem);padding: 0;}
.contents main .head img {width: 18%;position: absolute;right: 0;bottom: 0;}
.contents main article{width: 100%;}
.page, .single, .cate, .arch, .error {padding: 120px 0;}
.page .contents, .single .contents, .cate .contents, .arch .contents, .error .contents{max-width: 1300px;width: 100%; margin: 0 auto;}
.page .contents main, .single .contents main, .cate .contents main, .arch .contents main, .error .contents main {width: 90%; margin: 0 auto;}
.izakaya img.maintop{width: 100%;}

/*.textarea{width: 80%;padding: 5%;}*/
@media screen and (max-width: 1100px) {
.contents main .head {padding: 10% 0 10% 6%;}
}
@media screen and (max-width: 820px) {
.contents main .head {padding: 60px 0 30px 6%;}
.contents main .head h2{padding: 0 0 1em;}
.page {padding: 120px 0;}
}
@media screen and (max-width: 600px) {
.contents main .head {padding: 50px 0 40px;}
.contents main .head h2{padding: 0;}
.page {padding: 120px 0;}
}
@media screen and (max-width: 414px) {
.contents main .head {padding: 30px 0 20px;}
.page {padding: 100px 0;}
}


/* ===== Fluid base ===== */
:root{
  --container-max: 1300px;
}

/* page */
.contents main{
  display:flex;
  flex-wrap:wrap;
}

/* 見出し行 */
.contents main .head{
  /* top | right | bottom | left */
  padding: clamp(30px, 14vw, 180px) 0 clamp(20px, 8vw, 100px) clamp(16px, 5vw, 50px);
  width:100%;
  display:flex;
  justify-content:space-between;
  position:relative;
  flex:0 0 100%;
  gap: clamp(8px, 2vw, 24px);
}

.contents main .head h2{
  font-size: clamp(1.6rem, 2vw + 1rem, 3rem); /* 414pxで約1.6rem、PCで3rem */
  padding:0;
  line-height:1.2;
}
.contents main .head img{
  /*width: clamp(120px, 18vw, 200px);  画像は幅を流体に */
  position:absolute;
  right:0;
  bottom:0;
}

/* 本文領域 */
.contents main article{width:100%;}

/* ページ上下余白（SPでも間伸びしすぎない） */
.page, .single, .cate, .arch, .error{
  padding-block: clamp(100px, 12vw, 120px);
}

/* コンテナ幅：広がりすぎ防止 */
.page .contents, .single .contents, .cate .contents, .arch .contents, .error .contents{
  max-width: var(--container-max);
  width: min(100%, var(--container-max));
  margin: 0 auto;
}

/* 内側の左右余白を流体に */
.page .contents main, .single .contents main,
.cate .contents main, .arch .contents main, .error .contents main{
  width: clamp(88%, 90vw, 95%);
  margin: 0 auto;
}

						
/* .izakaya */
.izakaya .image{ position: relative; inline-size: min(100%, 1920px); margin: 0 auto;overflow: hidden;}

/* 画像はブロック化＋フル幅 */
.izakaya .image > img{ display: block; width: 100%; height: auto;object-fit: cover; /*必要なら固定比率: aspect-ratio: 16/9; */}

/* 右下オーバーレイのキャプション */
.izakaya .image-caption{  position: absolute;  left: clamp(12px, 3vw, 28px);  bottom: clamp(12px, 3vw, 28px);  max-width: clamp(240px, 36vw, 560px);  padding: clamp(10px, 2.4vw, 18px) clamp(12px, 2.8vw, 22px);  background: rgb(0 0 0 / 55%); /* 背景 */  color: #fff;  font-size:clamp(1rem, 0.905rem + 0.48vw, 1.5rem);  line-height: 1.9;  letter-spacing: .02em;  border-radius: 10px;  text-shadow: 0 1px 2px rgb(0 0 0 / 60%);}

/* PCは意図した改行を維持、SPは自然改行に */
.izakaya .pc-br{ display:inline; }
@media (max-width: 640px){
.izakaya .pc-br{ display:none; }
}

/* ▼オプション：SPで“オーバーレイだと読みにくい”時は下に回す */
@media (max-width: 599px){
/* 下に回す */
.izakaya .image-caption{ position: static;display: block; background: none;color: #222;text-shadow: none;margin: clamp(8px, 4vw, 16px);padding: 0;max-width: none;}
.izakaya .image::after{ background: none; }
}
.izakaya > main > article li {list-style: none;}
.izakaya > main > article > ul {display:flex;flex-wrap: wrap;gap: 2.5rem;padding:clamp(1rem, 0.273rem + 3.64vw, 3rem);margin: auto;}
.izakaya > main > article > ul >li {flex: 0 1 48%;}
.izakaya > main > article > ul >li a img {width:100%;}
.izakaya > main > article > .disc{padding-left: 1em;}
.izakaya > main > article > .disc {list-style: none;font-size: clamp(14px, 1.1vw + .55rem, 20px); padding: clamp(10px, 2.4vw, 18px) clamp(12px, 2.8vw, 22px);line-height: 1.3;margin: auto;width: fit-content;}
.izakaya > main > article > .disc::before{content: "\f044";font-family: "Font Awesome 6 Free";font-weight: 900;margin-right: .5em;}
@media (max-width: 820px){
.izakaya > main > article > ul {display:flex;flex-wrap: wrap;gap: 1rem;}
}
@media (max-width: 600px){
.izakaya > main > article > ul {display:flex;flex-wrap: wrap;gap: 1rem;}
.izakaya > main > article > ul >li {flex: 0 0 90%;margin: auto;}
}

.modal {  position: fixed;  inset: 0;  background: rgba(0,0,0,0.7);  display: flex;  align-items: center;  justify-content: center;  opacity: 0;  pointer-events: none;  transition: opacity 0.3s ease;  z-index: 999;}
.modal.active {  opacity: 1;  pointer-events: auto;}
.modal img {  max-width: 90%;  max-height: 90%;  border-radius: 8px;  transform: scale(0.8);  transition: transform 0.3s ease;}
.modal.active img {  transform: scale(1);}

/* taiken */
.taiken{}
.taiken > main > article > section{padding: 2em 0;}
.taiken > main > article > section > h3{padding: 2em 0;text-align: center;font-size: clamp(1.4rem, 1.182rem + 1.09vw, 2rem);}
.taiken section{margin: 0 0 4em;}
.taiken section.info > div{/*background-color: #fff9f1;*/padding: clamp(1rem, 0.619rem + 1.9vw, 3rem); }
.taiken section.info .image{display: flex;justify-content: space-around;background-color: #fff9f1;padding: clamp(1rem, 0.619rem + 1.9vw, 3rem);border: groove #c2b281 10px; }
.taiken section.info .image > div{width: 33%;}
.taiken section.info .image > div > h4{text-align: center;padding: 1em 0;}
.taiken section.flow > .image{display: flex;justify-content: space-around;background-color: #fff9f1;padding: clamp(1rem, 0.619rem + 1.9vw, 3rem);border: groove #c2b281 10px; }
.taiken section.flow > .image > div{width: 18%;}
.taiken section.flow > .image > div > h4{text-align: center;padding: 1em 0;}
/*.taiken section.flow > .image > div > img{width: 100%;object-fit: cover;}*/
.taiken section.flow > .image > div > a > img{width: 100%;object-fit: cover;}

.taiken section.flow .image div::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -2em;               /* 矢印の位置調整 */
  width: 20px;               /* 矢印の横線の長さ */
  height: 2px;               /* 横線の太さ */
  background: #333;          /* 矢印の色 */
  transform: translateY(-50%);
}

/* 矢印の先端（三角部分） */
.taiken section.flow .image div::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -2em;
  border: solid #333;
  border-width: 6px 0 6px 10px;  /* 三角形を作る */
  transform: translateY(-50%);
}

/* 最後の要素には矢印を出さない */
.taiken section.flow .image div:last-child::after,
.taiken section.flow .image div:last-child::before {
  content: none;
}

.taiken section.price > div{display: flex;flex-direction: column;background-color: #fff9f1;padding: clamp(1rem, 0.619rem + 1.9vw, 3rem);border: groove #c2b281 10px;}
.taiken section.price > div > dl{padding: 1em;display: flex;}
.taiken section.price > div > dl > dt{font-weight: bold;width: 10em;}

.taiken section.lunch > div{display: flex;flex-direction:row-reverse;justify-content: space-between;align-items: center; background-color: #fff9f1;padding: clamp(1rem, 0.619rem + 1.9vw, 3rem);border: groove #c2b281 10px;}
.taiken section.lunch > div > img{object-fit: cover;width: 40%;}
.taiken section.lunch > div > div{display: flex;flex-direction: column;}
.taiken section.lunch > div > div > ul{padding: 1em 0 1em 2em;}

.taiken section.drinks > div{display: flex;flex-direction:row-reverse;justify-content: space-between;align-items: center;background-color: #fff9f1;padding: clamp(1rem, 0.619rem + 1.9vw, 3rem);border: groove #c2b281 10px;}
.taiken section.drinks > div > img{object-fit: cover;width: 40%;}
.taiken section.drinks > div > div{width: 50%;}

.taiken section.faq > div{display: flex;flex-direction: column;background-color: #fff9f1;padding: clamp(1rem, 0.619rem + 1.9vw, 3rem);border: groove #c2b281 10px;}
.taiken section.faq > div > dl{padding: 1em 0;}
.taiken section.faq > div > dl > dt{font-weight: bold;}
.taiken section.faq > div > dl > dd{padding-left: 1em;}

.taiken section.reserve > div{display: flex;flex-direction: column;background-color: #fff9f1;padding: clamp(1rem, 0.619rem + 1.9vw, 3rem);border: groove #c2b281 10px;}
.taiken section.reserve >  h3 {font-size: clamp(1.4rem, 1.2rem + 0.6vw, 2rem);  margin-bottom: 1em;  font-weight: 600;}
.taiken section.reserve > div > p {font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);  line-height: 1.8;  margin-bottom: 1.8em;}
.taiken section.reserve > div > a {display: inline-block;  background-color: #cfa968;  color: #fff; font-size: 1.1rem; padding: 0.8em 2em; border-radius: 2em; text-decoration: none; transition: background-color 0.3s ease;text-align: center;}
.taiken section.reserve > div > a:hover {background-color: #b88d4a;text-align: center;}

@media (max-width: 820px){
.taiken section.info .image{display: flex;flex-flow: column;}
.taiken section.info .image > div{width: 100%;margin-bottom:3em;}
.taiken section.info .image > div:last-child{width: 100%;margin-bottom: 1em;}
.taiken section.flow > .image{display: flex;flex-flow: column;}
.taiken section.flow > .image > div{width: 100%;margin-bottom:3em;align-items: center;}
.taiken section.flow > .image > div:last-child{width: 100%;margin-bottom: 1em;align-items: center;}
.taiken section.flow > .image > div > a{width: 90%;object-fit: cover;display: block;margin: auto auto 1em;}
.taiken section.price > div > dl{padding: 1em;display: flex;flex-flow: column;}
.taiken section.price > div > dl > dt{font-weight: bold;width: 10em;}
.taiken section.lunch > div{display: flex;flex-direction:column;}
.taiken section.lunch > div > img{object-fit: cover;width: 90%;display: block;margin-bottom: 1em;}
.taiken section.drinks > div{flex-direction:column;}
.taiken section.drinks > div > img{object-fit: cover;width: 90%;display: block;margin-bottom: 1em;}
.taiken section.drinks > div > div{width:100%;}
}

/* sidebar */
.sidearea{width: 20%;padding: clamp(12px, 2.2vw, 24px);padding-top: 0;}
.sidearea aside li{list-style: none;padding: .5em 0 ;}
.sidearea aside li > a:hover::after{list-style: none;padding: .5em 0 .5em .5em;content: "\f178";font-family: "Font Awesome 6 Free";}
.wp-block-categories > li, .wp-block-archives > li{border-bottom: 1px dashed #333;}
.sidearea .widget_recent_entries ul{padding-top: .5em;}
.sidearea .widget_recent_entries ul li{list-style: none;padding: 0 0 0 1em;line-height: 1.2em;}
.sidearea .widget_recent_entries ul li::before{content: "-";margin-right: .5em;}
.sidearea .widget_recent_entries li > a{list-style: none;padding: 0;text-decoration: none;}
.sidearea .widget_recent_entries li > a:hover{list-style: none;padding: 0;text-decoration: none;}
.sidearea .widget_recent_entries li > a:hover::after{content: "\f178";font-family: "Font Awesome 6 Free";}
.searchbox{border: none;padding-top: 2em;}
.searchbox p{font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);line-height: 1em;padding-bottom: .5em;}
.searchbox input{padding: .2em .5em;width: 100%;display: block;margin: auto;cursor: pointer;}
.searchbox input#s{padding: .5em;width: 100%;display: block;margin-bottom: .5em;cursor: auto;}

/* textarea */
.textarea{ width: 80%;padding: clamp(16px, 5vw, 60px);padding-top: 0;}
.textarea .cateBox {width: 100%;margin: auto auto 2em;}
.textarea .cateBox h3 {font-size: clamp(1.25rem, 1.125rem + 0.63vw, 1.875rem);display: flex;justify-content: space-between;}
.textarea .cateBox h3 > span {font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);}
.textarea .cateBox dl {padding: 2em 0;}
.textarea .cateBox dd {font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);}
.textarea .cateBox dd > p {font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);display: block;text-align: right;}
.textarea h3{font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2.75rem);padding-bottom: 1em;border-bottom: 1px solid #000;}
.textarea > .date{text-align: right;font-weight: normal;font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);}
.textarea article{padding: 1.5em 0;}
.textarea > .backcategory{text-align: right;font-weight: normal;font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem);}
.textarea > .backcategory > a:hover::before{text-decoration: none;color: rgba(51,51,51,.60);content: "\f101";font-family: "Font Awesome 6 Free";font-weight: 900;}
.textarea .count{padding: 1em 0;font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);}
.textarea > .search dt{padding: 1em 0;display: block;text-align: right;}
.textarea > .search dd{padding: 3em 0;display: block;}


/* ===== 構造が変わる所だけメディアクエリ ===== */
@media (max-width: 820px){
  /* 2カラム → 1カラム */
  .sidearea, .textarea{ width:100%; }
  /* ヒーロー余白を少し詰める */
  .contents main .head{
    padding: clamp(24px, 8vw, 60px) 0 clamp(16px, 6vw, 40px);
  }
}

/* contact */
.contact section{width: clamp(37.5rem, 35.119rem + 11.9vw, 50rem);margin:auto;background-color: #fff9f1;padding: clamp(1.5rem, 1.214rem + 1.43vw, 3rem);}
.contact section > dl{display: flex;justify-content: flex-start;width: 100%;margin:1em auto;}
.contact section > dl > dt{width: 30%;}
.contact section > dl > dd{width: 70%;}
.contact section > dl > dt > p{display: inline;margin: 0;}
.contact section > dl > dt > p > span{margin-left: 1em; font-size: .8rem;font-weight: bold;color: rgba(213,0,3,1.00);}
.contact section > dl > dd > p > span > input{padding: 1em;background-color: #eee;border: 1px solid #ccc;width: 100%;}
.contact section > dl > dd > p > span > textarea{padding: 1em;background-color: #eee;border: 1px solid #ccc;width: 100%;}
.contact section > div{margin: clamp(1rem, 0.81rem + 0.95vw, 2rem) auto auto;}
.contact section > div > p{width: 50%;display: block; margin: auto;padding: 0;border: 0;background-color: none;}
.contact section > div > p > input{padding: 1em 1em;border: 1px solid #ccc;width: 100%;display: block; margin: 0 auto;cursor: pointer;font-size: 1em;}
.contact section > div > p > input:hover{background-color: rgba(255,255,255,1);padding: 1em;border: 1px solid rgba(204,204,204,.5);width: 100%;display: block; margin: 0 auto;cursor: pointer;font-size: 1em;}
@media (max-width: 820px){
.contact section{width: clamp(17.5rem, -0.5rem + 90vw, 45.625rem);margin:auto;background-color: #fff9f1;padding: clamp(1.5rem, 1.214rem + 1.43vw, 3rem);}
.contact section > dl > dt{width: 100%;}
.contact section > dl > dd{width: 100%;}
.contact section > dl{display: flex;flex-direction: column;justify-content: flex-start;width: 100%;margin:1em auto;}
.contact section > dl > dd > p > span > input{padding: 1em;background-color: #eee;border: 1px solid #ccc;width: 100%!important;}
.contact section > dl > dd > p > span > textarea{padding: 1em;background-color: #eee;border: 1px solid #ccc;width: 100%!important;}
.contact section > div > p > input{width: calc(100% - ((100vw - 320px) / 10));padding: clamp(0.5rem, 0.18rem + 1.6vw, 1rem) 1em;}
.contact section > div > p > input:hover{width: calc(100% - ((100vw - 320px) / 10));padding: clamp(0.5rem, 0.18rem + 1.6vw, 1rem) 1em;}
}