@charset "utf-8";
/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  font-size: 1.6rem;
  font-weight: 400;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.05em;
  line-height: 1.67;
}
html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100vw;
  overflow-x: hidden; /* 横スクロール隠す */
}
*, *::before, *::after {
  box-sizing: inherit;
}
h1, h2, h3, h4, h5 {
  font-weight: normal;
}
a {
  color: #070707;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.fadein {
  opacity: 0;
  transform: translateY(10px); /* 下から少し浮き上がる */
  transition: opacity 0.7s cubic-bezier(.6, .2, .2, 1), transform 0.7s cubic-bezier(.6, .2, .2, 1);
  will-change: opacity, transform;
}
.fadein.is-inview {
  opacity: 1;
  transform: translateY(0);
}
/* ── メインビジュアル ── */
.main-visual {
  position: relative;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100 - 80px);  /* ← タイトルバー分だけ短く */
  top: 0;
  margin-bottom: 0;
  z-index: 1;
  background: #eee; 
  overflow: hidden;
}

/* スクロール後は操作無効化 */
body.scrolled .main-visual {
  pointer-events: none;
}


/* ── ヘッダー（背景スライド上） ── */
.mv-header {
  position: fixed;
  inset: 0;               /* top:0; right:0; bottom:0; left:0; と同義 */
  z-index: 10;
  pointer-events: none;   /* 背景スライドには反応させない */
}

/* ヘッダー内の操作可能要素 */
.mv-header .catch,
.mv-header .logo,
.mv-header .buttons .btn {
  pointer-events: auto;
}


/* ── キャッチ画像（.mv-header内）── */
/* 位置調整はそのままに、高さ90%相当になるようサイズ指定 */
.mv-header .catch {
  position: absolute;
  top: 46%;
  left: 40px;
  transform: translateY(-50%);
}

.mv-header .catch img {
  /* ビューポート全体の高さからタイトルバー100pxを引いた残り領域の90%を上限に */
  max-height: calc((100vh - 100px) * 0.95);
  
  /* アスペクト比維持 */
  width: auto;
  
  /* 幅のはみ出しを防ぐ */
  max-width: 100%;
  display: block;
}
/* ロゴ */
.mv-header .logo {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mv-header .logo img {
  height: 160px;
  width: auto;
}
.catch, .logo {
  transition: opacity 0.2s ease-out !important;
}
.is-hide {
  opacity: 0;
  pointer-events: none;
}
/* ボタン共通 */
.buttons-fixed .btn {
  position: absolute;
  width: auto;
}
/* オンラインショップ */
.buttons-fixed .btn.shop {
  top: 0%;
  right: 30px;
  transform: translateY(-50%);
}
.buttons-fixed .btn.shop img {
  height: 300px;
  max-width: 50px;
  width: auto;
}
/* インスタボタン */
.buttons-fixed .btn.insta {
  top: calc(45% + 150px + 30px); /* ショップ(高さ300/2=150)下30px */
  right: 25px;
}
.buttons-fixed .btn.insta img {
  height: 30px;
  width: auto;
}
.buttons-fixed {
  position: fixed;
  top: 40%;
  right: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px; /* ボタン間の余白 */
  z-index: 10; /* title-barより前面 */
}
@media (max-width: 900px) {
  .buttons-fixed {
    display: none;
  }
}
.swiper.slideshow {
  position: absolute;
  top: 0;           /* ←上下とも0 */
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.swiper-slide {
  position: relative;
}
.slide-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  transition: transform 0.7s cubic-bezier(.4, 0, .2, 1);
}
/* ステータスクラスで状態管理 */
/* 状態管理のみでOK。アニメはJSでクラスを切替して発動 */
.zoomed {
  transform: scale(1.13);
}
.zoomInit {
  transform: scale(1);
}
.zoomOutInit {
  transform: scale(1.13);
}
.zoomOutEnd {
  transform: scale(1);
}
.slideRightInit {
  transform: scale(1.5) translateX(0);
}
.slideRightEnd {
  transform: scale(1.5) translateX(-33vw);
}
.slideUpInit {
  transform: scale(1.1) translateY(0);
}
.slideUpEnd {
  transform: scale(1.1) translateY(-8vh);
}
/* 画像URL（Unsplashを利用） */
.slide1 {
  background-image: url('../image/slide1.png');
}
.slide2 {
  background-image: url('../image/slide2.png');
}
.slide3 {
  background-image: url('../image/slide3.png');
  /* 既存で background-size: cover; 等を指定している場合も維持 */
  position: absolute;
  width: 100vw;
  height: 80vh;
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  /* 1.5倍に拡大しつつ、初期位置は左端 */
  transform: scale(1.5) translateX(0);
  transition: transform 0.5s; /* 解除時にパッと戻る用 */
}
.slide4 {
  background-image: url('../image/slide4.png');
}
/* --- アニメーション --- */
/* 1枚目：ズームイン */
.zoomIn {
  animation: zoomIn 8s linear forwards;
}
@keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.13);
  }
}
/* 2枚目：ズームアウト（開始時はズームインと同じ拡大） */
.zoomOut {
  animation: zoomOut 8s linear forwards;
}
@keyframes zoomOut {
  from {
    transform: scale(1.13);
  }
  to {
    transform: scale(1);
  }
}
/* 右へゆっくりスライド（画像切れ防止＝左に寄せて右端まで） */
.slideRight {
  animation: imgSlideRight 30s linear forwards;
}
@keyframes imgSlideRight {
  from {
    transform: scale(1.5) translateX(0);
  }
  to {
    transform: scale(1.5) translateX(-33vw);
  }
  /* -33vwは「1.5倍画像が右端まで見える」目安。微調整OK */
}
/* 上へゆっくりスライド（画像切れ防止＝下に寄せて上端まで） */
.slideUp {
  animation: slideUp 15s linear forwards;
}
@keyframes slideUp {
  from {
    background-position: center bottom;
  }
  to {
    background-position: center top;
  }
}
/* タイトルバー */
.title-bar {
  position: absolute;
  width: 100%;
  height: 80px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  z-index: 10;
  transition: height 0.4s, top 0.3s;

}
.title-bar.fixed {
  position: fixed;
  top: 0;
  z-index: 100;
  height: 50px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* 左側: ロゴとニュースを上下中央に */
.title-bar .left {
  display: flex;
  align-items: center;
  gap: 30px; /* ロゴとニュースの間隔、お好みで */
  height: 100%; /* 親の高さに合わせる */
}

/* ミニロゴ */
.mini-logo {
  display: block;
  height: 50px;
  flex-shrink: 0;
  transition: height 0.4s;
}
.title-bar.fixed .mini-logo {
  height: 32px;
}

/* ニュース部分：縦並びかつ中央寄せ */
.news {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;  /* ←子要素を左寄せ */
  height: auto;            /* 念のため明示しておく */
}

.title-bar .news {
  opacity: 1;
  transition: opacity 0.4s;
  pointer-events: auto;
}
.title-bar.fixed .news {
  opacity: 0;
  pointer-events: none;
}

/* 日付・テキストのスタイル */
.news-date {
  font-size: 14px;
  color: #555;
  letter-spacing: 2px;
	 margin-bottom: 4px;
}
.news-text {
  font-size: 14px;
  color: #222;
}
/* ホバーで展開 */
.hamburger-container {
  position: relative;
  right: 10px
}
.hamburger-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 0;
  background: rgba(71, 55, 44, 0.9); /* 背景透過 */
  overflow: hidden;
  transition: width .4s ease;
  z-index: 2000 !important;
}
/* ハンバーガー */
.hamburger {
  position: relative;
  cursor: pointer;
  z-index: 9999 !important;
}
.hamburger span {
  display: block;
  width: 35px;
  height: 2px;
  background: #464646;
  margin: 8px 0;
  transition: background .3s ease;
}
.hamburger.open span {
  background: #fff;
}
/* 閉じるボタン */
.menu-close {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 50px;
  color: #fff;
  cursor: pointer;
}
.menu-close:hover {
  color: #ccc;
}
.hamburger-menu a:hover, .hamburger-menu a:focus {
  /* 必要に応じて、hover時の色も白に */
  color: #fff;
  text-decoration: none;
}
/* メニューリスト */
.hamburger-menu ul {
  margin: 80px 20px;
  list-style: none;
  padding: 0;
  text-align: center;
  width: 100%;
}
.hamburger-menu .btn-shop {
  display: inline-block; /* ボタンも中央揃え */
}
.hamburger-menu a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
}
.hamburger-menu.open {
  width: 30vw; /* または20vwや任意 */
}
.hamburger-menu.open li {
  opacity: 1;
  transform: translateX(0);
}
.menu-title {
  font-size: 16px;
  display: block;
  color: #fff;
  line-height: 1.8; /* 1 or 1.1が最も狭い自然な行間 */
  margin-bottom: 0; /* 余白をなくす */
}
.menu-sub {
  font-size: 12px;
  font-weight: normal;
  display: block;
  color: #fff;
  margin-bottom: 20px; /* 下余白はここで調整 */
  margin-top: 0;
  line-height: 1.8; /* 上余白もゼロに */
  letter-spacing: 0.2;
}
.menu-sub.prodact {
  position: relative;
  margin-bottom: 5px; /* 下線との隙間調整 */
}
.prodact-underline {
  display: block;
  width: 30%;
  height: 0.2px;
  background: #fff;
  margin: 10px auto; /* 中央揃え+下余白 */
  border-radius: 1px;
}
.hamburger-menu li {
  margin-bottom: 15px;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .4s ease, transform .4s ease;
  width: 100%;
  display: block;
}
.hamburger-menu li:nth-child(1) {
  transition-delay: .1s;
}
.hamburger-menu li:nth-child(2) {
  transition-delay: .2s;
}
.hamburger-menu li:nth-child(3) {
  transition-delay: .3s;
}
.hamburger-menu li:nth-child(4) {
  transition-delay: .4s;
}
.hamburger-menu li:nth-child(5) {
  transition-delay: .5s;
}
.hamburger-menu li:nth-child(6) {
  transition-delay: .6s;
}
.hamburger-menu li:nth-child(7) {
  transition-delay: .7s;
}
.hamburger-menu li:nth-child(8) {
  transition-delay: .8s;
}
/* オンラインショップボタン */
.btn-shop {
  display: inline-block;
  color: #fff;
  border: 1px solid #fff;
  padding: 10px 20px;
  text-align: center;
  transition: background .3s, color .3s;
	font-size: 14px;
}
.btn-shop:hover {
  background: #fff;
  color: #47372c !important;
}
/* 画像サイズ調整 */
.menu-logo {
  height: 120px;
  display: block;
  margin: 50px auto 50px;
}
.menu-insta {
  height: 20px;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 50px
}
.container {
  background: #fff;
  width: 100%;
  max-width: 100%; /* サイト全体の最大幅を指定 */
  margin: 0 auto; /* 横中央寄せ */
  position: relative; /* 必要なら（z-index効かせるため） */
  padding: 0 24px; /* スマホ・PC両対応の左右余白を確保 */
  box-sizing: border-box;
  z-index: 5;
}
/* section1 */
.section-two-col {
  width: 1000px;
  max-width: 96vw;
  margin: 0 auto; /* ← 100px → 0に修正 */
  margin-top: 0; /* main-visualの下から始まる！ */
  display: flex;
  justify-content: center;
  padding: 150px 0; /* ←追加 */
}
.two-col-inner {
  display: flex;
  width: 100%;
  gap: 0;
}
.col {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.col-left {
  width: 70%;
}
.col-right {
  width: 30%;
}
	
	
/* 画像アニメ（初期は透明） */
.fadeimg {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 1.2s, transform 1.2s;
}
.fadeimg.active {
  opacity: 1;
  transform: none;
}
.img-right.active {
  transition-delay: 0s;
}
.img-left.active {
  transition-delay: 0.4s;
}
.col-left img, .col-right img {
  height: 300px;
  width: auto;
  object-fit: contain;
  display: block;
}


.section2 {
  width: 100%;
  background: #fff;
  padding: 120px 0 80px 0;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
}
.section2-inner {
  display: flex;
  align-items: stretch; /* ← これがポイント！ */
  max-width: 100%;
  margin: 0 auto;
  height: 100%; /* 高さは子に依存 */
}
.section2-left, .section2-right {
  /* どちらも */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40%; /* left */
  /* width: 60%; right; */
  min-height: 100%; /* これでOK */
}
.left-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0; /* ← ここ重要！ */
  width: 100%;
  height: 100%; /* ← 高さ100%でOK！ */
  background: #47372c;
  opacity: 0;
  transition: opacity 1s;
  z-index: 1;
}
.left-bg.active {
  opacity: 1;
}
.left-img {
  position: relative;
  width: 30%;
  height: auto;
  object-fit: cover;
  opacity: 1 !important; /* ←仮で1に固定！ */
  transition: none !important;
  z-index: 2; /* 枠で強調！ */
}
.section2-right {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
  width: 100%;
  max-width: 100%;
}
.grid-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s 0s;
}
.grid-img.active {
  opacity: 1;
  transform: none;
}
.grid-img.is-active {
  opacity: 1;
}
.section3 {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 80px 0;
  background: #fff;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
}
.section3-inner, .section3-vertical {
  opacity: 0;
  transition: opacity 0.7s 0s;
}
.section3-inner.is-active, .section3-vertical.is-active {
  opacity: 1;
}
.section3-inner {
  width: 850px;
  max-width: 95vw;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: 1px;
}
.section3-logo {
  width: 220px; /* 必要に応じて調整 */
  height: auto;
  margin-bottom: 50px;
}
.section3-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}
.section3-subtitle {
  font-size: 16px;
  margin-bottom: 50px;
}
.section3-text {
  font-size: 14px;
  line-height: 2.2; /* 180% */
  margin: 0;
  text-align: center;
  width: fit-content;
  max-width: fit-content; /* 行が長くなりすぎないように */
}
.section3-vertical {
  position: absolute;
  top: 80px;
  right: calc(50% - 425px - 60px);
  z-index: 10;
  /* サイズや装飾はお好みで */
  padding: 10px 6px;
  /* ここで左右中央配置を強制 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* widthは不要（子で決める） */
  width: 2.6em;
}
.section3-vertical img {
  width: 24px;
}
.vertical-center {
  display: flex;
  flex-direction: column;
  align-items: center; /* これが肝心：必ず中央線に！ */
}
.vertical-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.2;
  margin-bottom: 30px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-right: 5px;
}
.vertical-date {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.25em;
  line-height: 1.2;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
/* スマホ対応（縦書き非表示 or 下部に移動）*/
@media (max-width: 900px) {
  .section3-inner {
    width: 100%;
    padding: 0 3vw;
  }
  .section3-vertical {
    display: none;
    /* もしくは下部に移動したい場合は、absolute→static＋margin-top等 */
  }
}
.section4 {
  width: 100%;
  background: #fff;
  padding: 80px 0;
  position: relative;
  z-index: 5;
}
.section4-inner {
  width: 1000px;
  max-width: content-fit;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px 15px;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .section4-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;
    padding: 0 2vw;
  }
}
/* 商品カード */
.product-card {
  background: #fff;
  padding: 20px 18px 18px 30px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 320px;
}
/* 商品画像エリア */
.product-image-area {
  position: relative;
  width: 100%;
  margin-bottom: 18px;
}
.product-image-area img {
  width: 110%;
  display: block;
  position: relative;
  left: -20px;
}
.product-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s, transform 0.6s;
}
.product-card.is-active {
  opacity: 1;
  transform: translateY(0);
}
/* 商品名・サブタイトル・ロゴエリア */
.product-title-area {
  display: flex;
  align-items: flex-start; /* 上揃え */
  justify-content: space-between;
  gap: 10px;
}
.product-title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左揃え（中央揃えたいならcenter） */
  flex: 1; /* 右端のロゴを押し出しやすくする */
  min-width: 0;
}
.product-title {
  font-size: 16px;
  line-height: 1;
  margin-bottom: 2px;
}
.product-subtitle {
  font-size: 11px;
}
.product-subtitle .short {
  letter-spacing: 0.7px;
}
.product-logo {
  width: 38px;
  height: auto;
  object-fit: contain;
  margin-left: 10px;
}
/* 商品テキスト */
.product-text {
  font-size: 14px;
  line-height: 1.7;
}
.product-subdesc {
  font-size: 11px;
  line-height: 1.5;
  margin-top: 3px;
}
.section5 {
  width: 1100px;
  max-width: 100%;
  background: #47372c;
  margin: 50px auto;
  padding: 50px 30px;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
}
.section5-inner {
  display: flex;
  width: 100%;
  height: 250px;
  align-items: stretch;
}
.section5 .col {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
.section5 .col1, .section5 .col2, .section5 .col3, .section5 .col4 {
  padding: 10px;
}
/* col1: 5%, 上揃え・左揃え・高さ250px */
.section5 .col1 {
  width: 5%;
  justify-content: flex-start; /* 上揃え */
  align-items: flex-start; /* 左揃え */
  height: 250px;
}
/* インスタアイコン＋アカウント（縦書き） */
.insta-icon {
  height: 25px;
  width: auto;
  margin-bottom: 10px;
}
.insta-account {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.1em;
  padding-left: 0px;
}
/* col2: 25%, 画像中央寄せ */
.section5 .col2 {
  width: 20%;
  justify-content: center;
  align-items: center;
}
.side-image {
  height: 250px;
  width: auto;
  max-height: 100%;
}
/* col3: 25%, テキスト左上揃え */
.section5 .col3 {
  width: 22%;
  justify-content: flex-start;
  align-items: flex-start;
}
.col3-text {
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  max-height: 100%;
  text-align: justify;
}
/* col4: 20%, タイトル＋サブタイトルを2行、縦書き、上揃え */
.section5 .col4 {
  width: 20%;
  display: block; /* ←flexやめる！ */
  padding: 10px;
}
.col4-title, .col4-sub {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #fff;
  line-height: 1.2;
  display: inline-block; /* ←縦書きでblock化 */
  margin-bottom: 8px;
  letter-spacing: 0.1em;
  vertical-align: top;
}
.col4-title {
  font-size: 25px;
}
.col4-title img {
  height: 180px;
}
.col4-sub {
  font-weight: normal;
  margin-bottom: 0;
  font-size: 14px;
}
.section5 .col5 {
  width: auto;
  flex: 1 1 0%;
  justify-content: flex-start; /* ←上揃えに変更！ */
  align-items: flex-end; /* 右揃えのまま */
  padding: 10px 30px 10px;
}
.col5-bigtitle {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.2em;
  text-align: right;
}
.col5-bigtitle img {
  width: 30px
}
.section5 {
  opacity: 0;
  transition: opacity 0.9s;
}
.section5.is-bg-active {
  opacity: 1;
}
.section5-inner {
  opacity: 0;
  transition: opacity 0.8s 0.3s; /* 0.3秒ディレイ */
}
.section5-inner.is-inner-active {
  opacity: 1;
}
@media (max-width: 900px) {
  .section5 {
    width: 100%;
    padding: 12px 3vw;
  }
  .section5-inner {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .section5 .col, .section5 .col1, .section5 .col2, .section5 .col3, .section5 .col4, .section5 .col5 {
    width: 100% !important;
    min-width: 0;
    height: auto;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px 0;
  }
  .col5-bigtitle, .col4-title, .col4-sub, .insta-account {
    writing-mode: horizontal-tb;
    font-size: 24px;
  }
}
.section6 {
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background: none; /* 必要に応じて */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 200px;
}
.section6 img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* or cover、画像比率に応じて調整 */
}
.section6 {
  opacity: 0;
  transition: opacity 0.9s;
}
.section6.is-active {
  opacity: 1;
}
.section7 {
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
  padding: 150px 0 0px;
}
.section7-title-img {
  display: block;
  margin: 0 auto 30px;
  width: auto; /* ← 幅210pxに固定 */
  height: 80px; /* 高さは元画像比率を維持 */
}
.section7-divider {
  width: 1100px;
  max-width: 100%;
  border: 0;
  border-top: 1px solid #000;
  margin: 0 auto 150px;
}
.section7-heading {
  text-align: center;
  margin-bottom: 50px;
}
.section7-title {
  font-size: 24px;
  letter-spacing: 0.2em;
  margin-bottom: 30px;
}
.section7-title img {
  width: 22%;
}
.section7-subtitle {
  font-size: 20px;
  margin: 0;
}
.section7-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 0 auto;
  max-width: 1100px;
}
/* 商品カード */
.product-card {
  display: flex;
  align-items: flex-start; /* 上揃え */
  gap: 20px;
  background: #fff;
  padding: 20px;
}
.gift-col {
  flex: 0 0 100px; /* 固定幅 */
  display: inline-block;
}
/* 左カラム */
.gift-col img {
  width: 40%;
  height: auto;
}
/* 中央カラム */
.main-col {
  flex: 1 1 auto;
  min-width: 0; /* ← 追加 */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.main-col img {
  width: 100%;
  height: auto;
}
.slider {
  position: relative;
  overflow: hidden;
  max-height: 250px;
}
.slides {
  display: flex;
  transition: transform .5s ease;
  min-width: 0;
}
.slides img {
  flex-shrink: 0;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: contain;
}
.slide-prev, .slide-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
}
.slide-prev {
  left: 10px;
}
.slide-next {
  right: 10px;
}
.thumbnails {
  display: flex;
  gap: 5px;
  margin: 10px 0;
}
.thumbnails img {
  width: 60px;
  cursor: pointer;
  opacity: 0.6;
}
.thumbnails img.active {
  opacity: 1;
  border: 2px solid #000;
}
.product-name {
  font-size: 20px;
  margin: 10px 0 5px;
}
.product-desc, .product-subdesc, .product-price {
  margin: 2px 0;
}
/* 右カラム */
.info-col {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  flex-direction: column;
  align-items: center;
  display: inline-block;
}
.info-icon {
  font-size: 24px;
  margin-bottom: 8px;
}
.info-text {
  font-size: 16px;
}
@media(max-width:900px) {
  .section7-products {
    display: block;
  }
}
.section8 {
  width: 1100px;
  max-width: 100%;
  margin: 100px auto;
  padding: 60px 15px;
  box-sizing: border-box;
}
.section8-title {
  display: block;
  margin: 0 auto 30px;
  width: auto;
  height: 80px;
}
.section8-spacer {
  border: 0;
  border-top: 1px solid #000;
  margin-bottom: 150px;
}
.section8-row {
  display: flex;
  margin-bottom: 40px;
  align-items: flex-start;
}
.section8-col {
  flex: 1;
}
.section8-col.left {
  flex: 0 0 30%; /* 左カラムを30%の固定幅に */
  padding-right: 20px;
  font-size: 20px;
  font-weight: 200;
}
.section8-col.right {
  flex: 0 0 70%; /* 右カラムを70%の固定幅に */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 30px;
  padding-bottom: 50px;
}
.shop-link {
  display: inline-block;
  width: 100%;
  padding: 30px;
  text-align: center;
  font-size: 20px;
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.shop-link:hover {
  background-color: #000;
  color: #fff;
  text-decoration: none;
}
.cards-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.store-card {
  padding: 0px;
  width: 45%;
  margin-right: 20px;
  font-size: 14px;
}
.store-card h4 {
  margin-top: 0;
  font-size: 16px;
}
.store-card p {
  margin: 10px 0;
  line-height: 1.8;
}
.store-web {
  display: inline-block;
  padding: 3px 30px;
  border: 1px solid #000;
  text-decoration: none;
  color: #000;
  margin-top: 10px;
  background-color: #fff; /* 初期背景（白）を明示 */
  transition: background-color 0.3s, color 0.3s; /* 滑らかな反転 */
}
.store-web:hover {
  background-color: #000; /* 背景を黒に */
  color: #fff; /* 文字色を白に */
}
.section9 {
  width: 100vw; /* ビューポート幅いっぱい */
  margin-left: 50%;
  transform: translateX(-50%);
  max-width: none; /* 上書き */
  padding: 60px 0 0 0; /* 左右paddingを外す */
  text-align: center;
  box-sizing: border-box;
}
.section9-slider {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  height: 650px;
  overflow: hidden;
  position: relative;
}
.section9 p {
  font-size: 14px;
  margin-bottom: 30px;
}
.section9-title {
  display: block;
  margin: 0 auto 100px;
  width: auto;
	height: 80px;
}
.section9-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity 1s ease-in-out;
}
.section9-slider .slide.active {
  opacity: 1;
}
.store-info {
  margin: 40px 0;
}
.store-logo {
  display: inline-block;
  margin-bottom: 10px;
  width: 20%;
}
.store-address {
  font-size: 18px;
  line-height: 1.8;
}
.mail-toggle {
  display: inline-block;
  padding: 8px 30px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  margin-bottom: 30px;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.mail-toggle:hover {
  background: #000;
  color: #fff;
}
.mail-form {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out, opacity 0.5s;
  opacity: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 600px;
}
.mail-form.active {
  max-height: 500px; /* フォームの高さに応じて調整 */
  opacity: 1;
  margin-top: 20px;
}
.mail-form input, .mail-form textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
  box-sizing: border-box;
}
.mail-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 32px 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mail-form input, .mail-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1em;
  background: #fafbfc;
  resize: vertical;
  outline: none;
  transition: border 0.2s;
  font-family: 'Hina Mincho', serif;
}
.mail-form input:focus, .mail-form textarea:focus {
  border-color: #89baff;
  background: #fff;
}
.mail-form button {
  padding: 12px 0;
  border: none;
  border-radius: 6px;
  background: #000;
  color: #fff;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
	font-family: "Noto Serif JP", serif; 
}
.mail-form button:hover {
  background: #4b4b4b;
}
.social {
  margin-top: 30px;
}
.social img {
  width: 30px;
  height: auto;
}
.section9 p {
  margin-bottom: 30px;
}
.store-message {
  width: 900px;
  text-align: left;
  margin: 50px auto 200px;
}
.site-footer {
  max-width: 100%;
  margin: 0 auto;
  padding: 40px 15px;
  position: relative;
}
.footer-inner {
  position: relative;
  left: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 1100px;
  margin: 100px auto 0px;
}
.footer-inner img {
  width: 100%;
	margin-bottom: 60px;
}
.footer-inner p {
  font-size: 11px;
  margin: auto;
}
.gift-list-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
  background: #faf7f4;
}
.gift-card {
  width: 1100px;
  display: flex;
  margin-bottom: 40px;
  overflow: hidden;
  align-items: flex-start;
}
.gift-card-left, .gift-card-center {
  /* ここはalign-items: flex-start不要 */
  display: flex;
  justify-content: center;
}
.gift-card-left {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gift-box-img {
  width: 65%; /* お好みで調整 */
  height: auto;
}
.gift-card-center {
  width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 80px;
}
.gift-center-inner {
  width: 400px;
  text-align: center;
  position: relative;
}
.gift-product-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin: 80px auto 50px auto;
  display: block;
}
.gift-product-name {
  font-size: 22px;
  margin-bottom: 10px;
  letter-spacing: 0.2em;
}
.gift-product-seisan {
  font-size: 12px;
  margin-bottom: 20px;
  line-height: 1.8;
}
.gift-product-desc {
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.8;
}
.gift-product-subdesc {
  font-size: 12px;
  margin-bottom: 25px;
}
.gift-product-price {
  font-size: 20px;
  margin-top: 12px;
}
.gift-product-price small {
  font-size: 12px;
  font-weight: normal;
  margin-left: 5px;
}
.gift-card-right {
  width: 200px;
  min-height: 300px;
  display: flex;
  align-items: flex-start;
  justify-content: left;
}
.gift-icon-alphabet {
  writing-mode: vertical-rl;
  white-space: nowrap;
  min-height: 500px;
  position: relative;
  top: 50px;
}
.gift-icon {
  display: block;
  margin-bottom: 8px;
}
.gift-icon img {
  width: 50px;
  height: 50px;
  display: block;
  margin: 50px 100px 0 0;
  padding-bottom: 30px;
}
.gift-alphabet {
  font-size: 30px;
  display: block;
  margin: 0 auto;
}
.gift-alphabet img {
  width: 50px;
  margin: 0 25px 20px 0;
}
.gift-product-gallery {
  width: 400px;
  margin: 80px auto 50px;
  overflow: visible
}
.swiper-slide {
  position: relative;
}
.gift-main-swiper {
  width: 400px;
  height: auto;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.gift-main-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gift-thumb-swiper {
  width: 400px;
  height: 70px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.gift-thumb-swiper .swiper-slide {
  width: 93px !important;
  height: auto;
  opacity: 0.6;
  overflow: hidden;
  margin-right: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  box-sizing: border-box;
}
.gift-thumb-swiper .swiper-slide-thumb-active {
  opacity: 1;
  border: 1px solid #756865;
}
.gift-thumb-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ▼ SVGアイコン自体も小さく細く */
.gift-main-swiper .swiper-button-next, .gift-main-swiper .swiper-button-prev {
  width: 28px;
  height: 28px;
  top: 60%;
  transform: translateY(-50%);
  z-index: 1000;
}
.gift-main-swiper .swiper-button-next:after, .gift-main-swiper .swiper-button-prev:after {
  font-size: 18px;
  color: #4E3637;
  font-weight: 100;
}
.kara {
  background: #FF0004;
  z-index: 99999;
  position: relative;
}
.gift-pref-label {
  position: absolute;
  top: 30px;
  left: -20px;
  z-index: 1000;
  padding: 20px 0px;
  letter-spacing: 0.2em;
  color: #fff;
  font-size: 20px;
  writing-mode: vertical-rl;
  pointer-events: none;
}
.gift-pref-label img {
  height: 120px;
}
/* 画像のz-indexが高い場合、リセット推奨 */
.gift-main-swiper img {
  position: relative;
  z-index: 1;
}
.gift-pref-label-2 {
  background: #a8a977;
}
.gift-pref-label-3 {
  background: #d1b877;
}
.gift-center-inner-cols {
  display: flex;
  align-items: center;
}
.gift-arrow-col {
  width: 36px;
  text-align: center;
}
.custom-arrow-prev, .custom-arrow-next {
  width: 28px;
  height: 28px;
  font-size: 20px;
  color: #4E3637;
  background: none;
  border: none;
  cursor: pointer;
}
.gift-center-inner {
  /* 必要なら幅指定 */
  width: 400px;
  position: relative;
}
.scroll-top-btn {
  position: fixed;
  right: 24px;
  bottom: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #4c4234;
  color: #fff;
  font-size: 2em;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.scroll-top-btn.show {
  opacity: 0.85;
  pointer-events: auto;
}
.scroll-top-btn:hover {
  opacity: 1;
}
/* --- whats-NEWS --- */
.whats-news-main {
  max-width: 1100px;
  margin: 50px auto 0;
  background: #fff;
  padding: 60px 24px 80px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border-radius: 16px;
}
.breadcrumb {
  font-size: 0.62em;
  color: #888;
  margin-bottom: 1.5em;
  text-align: left;
}
.whats-news-header-section {
  text-align: center;
  margin-bottom: 2.2em;
}
.whats-news-title {
  font-family: 'Hina Mincho', serif;
  font-size: 2.2em;
  font-weight: bold;
  margin-bottom: 0.2em;
  letter-spacing: 0.15em;
}
.whats-news-border {
  border: none;
  border-top: 2px solid #000;
  width: 90px;
  margin: 0 auto 0.7em;
}
.whats-news-subtitle {
  color: #888;
  font-size: 1.08em;
  letter-spacing: 0.12em;
  margin-bottom: 80px;
}
.whats-news-article-title, ..whats-news-list-item h2 {
  font-size: 1.28em;
  margin-bottom: 0.3em;
  font-family: 'Hina Mincho', serif;
}
.whats-news-date, ..whats-news-list-date {
  font-size: 0.96em;
  color: #2E2E2E;
  margin-bottom: 1.4em;
}
.whats-news-content {
  font-size: 1.02em;
  line-height: 2;
  color: #222;
}
.whats-news-navigation {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin: 120px 0 32px;
}
.whats-news-navigation a {
  text-decoration: none;
  color: #474747;
  ;
  padding: 7px 22px;
}
.whats-news-navigation a:hover {
  color: #000000;
}
.whats-news-insta {
  text-align: center;
  margin-top: 80px;
}
.whats-news-insta img {
  width: 25px;
  opacity: 0.5;
}
.whats-news-list {
  margin-top: 2em;
}
.whats-news-list-item {
  border-bottom: 1px solid #e1ded7;
  padding: 24px 0 16px 0;
}
.whats-news-list-item:last-child {
  border-bottom: none;
}
.whats-news-list-item h2 {
  margin-bottom: 0.2em;
}
.whats-news-list-item a {
  text-decoration: none;
  color: #332211;
  display: block;
  transition: color 0.2s;
}
.whats-news-list-item a:hover h2 {
  color: #ba9c5b;
}
@media (max-width: 900px) {
  .whats-news-main {
    max-width: 98vw;
    padding: 32px 3vw 36px 3vw;
  }
}
/* 通常（LP）用：スクロール時に.fixed付与などアニメ */
.is-lp .title-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  transition: height 0.4s, top 0.3s;
}
.is-lp .title-bar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  /* LPのスクロール時縮小はJS付与 */
}
/* 新着ページだけ最初から上部固定＆縮小 */
.is-news .title-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1000;
  height: 56px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: height 0.4s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}
.is-news .mini-logo {
  height: 32px;
  transition: height 0.4s;
}
/* ハンバーガー縮小 */
.is-news .hamburger {
  height: 32px;
  width: 32px;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.is-news .hamburger span {
  width: 24px;
  height: 2px;
  margin: 2px 0;
  transition: all 0.3s;
}
/* 新着ページのメインコンテンツにバー高さ分だけ上余白 */
.is-news .news-main {
  margin-top: 56px; /* タイトルバーの高さ分 */
}
/* パンくずリスト装飾 */
.is-news .breadcrumb {
  margin-top: 0; /* タイトルバー直下にぴったり */
  margin-bottom: 80px; /* ページタイトルとの間を40pxだけ空ける */
  font-size: 0.8em;
  color: #161616;
  text-align: left;
}
.is-news .breadcrumb a {
  color: #474747;
  text-decoration: none;
}
.is-news .breadcrumb a:hover {
  color: #464646;
  text-underline-offset: 5px;
  text-decoration-thickness: 0.5px;
  transition: color 0.2s;
  text-decoration: underline;
}
.is-news .footer-inner img {
  width: 80%;
}
/* 新着ページのフッターは固定せず、ページ最下部に自然配置 */
.is-news .site-footer {
  position: static;
  left: auto;
  bottom: auto;
  width: 100vw;
  z-index: 1;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
}
.is-news .news-list-wrapper {
  width: 90%;
  max-width: 96vw;
  margin: 0 auto 80px auto;
  padding: 0;
}
.is-news .news-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 30px;
}
.is-news .news-list-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 18px 8px;
}
.is-news .news-list-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.13);
}
.is-news .news-thumb img {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 4/3;
  object-fit: cover;
  margin-bottom: 18px;
  background: #eee;
}
.is-news .news-date {
  font-size: 14px;
  color: #131313;
  margin-bottom: 30px;
  letter-spacing: 1px;
}
.is-news .news-title {
  font-size: 1.5em;
  color: #222;
  text-align: center;
  font-weight: bold;
  line-height: 1.6;
  margin-bottom: 4px;
}
.is-news .news-title-a {
  font-size: 1em;
  color: #222;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 4px;
}
.is-news .news-date-a {
  font-size: 14px;
  color: #131313;
  margin-bottom: 5px;
  letter-spacing: 1px;
}
@media (max-width: 900px) {
  .is-news .news-list-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 14px;
  }
}
@media (max-width: 600px) {
  .is-news .news-list-grid {
    grid-template-columns: 1fr;
    gap: 16px 0;
  }
  .is-news .news-list-wrapper {
    width: 98vw;
    max-width: 100vw;
    padding: 0 2vw;
  }
}