/* ============================================================
   スマホ版：茶園の物語
   写真 → 文章タブ → 古文書カード の順にする
============================================================ */
@media screen and (max-width: 760px) {

  .story {
    display: block !important;
    grid-template-columns: none !important;
    min-height: auto !important;
  }

  /* 親の写真背景を実質的に消す */
  .story .story-photo {
    position: relative !important;
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;

    background-size: 0 0 !important;
    background-repeat: no-repeat !important;
    background-color: var(--kinari) !important;

    padding: 0 !important;
  }

  /* 写真だけを上部に独立表示 */


  /* 文章タブを写真の下へ */
  .story-photo-copy {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    transform: none !important;

    width: calc(100% - 36px) !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;

    margin: 28px auto 34px !important;
    padding: 26px 22px !important;

    background: rgba(245, 239, 227, 0.94) !important;
    backdrop-filter: blur(3px) !important;
    border: 1px solid rgba(180, 154, 91, 0.35) !important;
    box-shadow: 0 12px 32px rgba(17, 18, 15, 0.14) !important;
  }

  .story-photo-copy .eyebrow {
    font-size: 10px !important;
    line-height: 1.6 !important;
    letter-spacing: .28em !important;
  }

  .story-photo-copy .section-title {
    font-size: 28px !important;
    line-height: 1.45 !important;
    margin-top: 16px !important;
  }

  .story-photo-copy .gold-rule {
    margin: 14px 0 16px !important;
  }

  .story-photo-copy p {
    font-size: 13px !important;
    line-height: 1.95 !important;
    letter-spacing: .04em !important;
  }

  .story-photo-copy p + p {
    margin-top: 10px !important;
  }

  /* 製茶之図・古文書カードを下に縦並び */
  .story .story-aside {
    display: flex !important;
    flex-direction: column !important;
    padding: 32px 18px !important;
    gap: 24px !important;
  }

  .story .kobunsho {
    width: 100% !important;
  }
}
/* ============================================================
   スマホ版：茶園の物語
   写真 → 文章タブ → 古文書カード
   写真の二重表示を防ぐ版
============================================================ */
@media screen and (max-width: 760px) {

  .story {
    display: block !important;
    grid-template-columns: none !important;
    min-height: auto !important;
  }

  .story .story-photo {
    position: relative !important;
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;

    /* 写真は上部だけに表示 */
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 100% 62vw !important;
    background-color: var(--kinari) !important;

    /* 上の余白＝写真の高さ */
    padding: 62vw 18px 34px !important;
  }

  .story-photo-copy {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    inset: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;

    margin: 0 auto !important;
    padding: 26px 22px !important;

    background: rgba(245, 239, 227, 0.94) !important;
    backdrop-filter: blur(3px) !important;
    border: 1px solid rgba(180, 154, 91, 0.35) !important;
    box-shadow: 0 12px 32px rgba(17, 18, 15, 0.14) !important;
  }

  .story-photo-copy .eyebrow {
    font-size: 10px !important;
    line-height: 1.6 !important;
    letter-spacing: .28em !important;
  }

  .story-photo-copy .section-title {
    font-size: 28px !important;
    line-height: 1.45 !important;
    margin-top: 16px !important;
  }

  .story-photo-copy .gold-rule {
    margin: 14px 0 16px !important;
  }

  .story-photo-copy p {
    font-size: 13px !important;
    line-height: 1.95 !important;
    letter-spacing: .04em !important;
  }

  .story-photo-copy p + p {
    margin-top: 10px !important;
  }

  .story .story-aside {
    display: flex !important;
    flex-direction: column !important;
    padding: 32px 18px !important;
    gap: 24px !important;
  }

  .story .kobunsho {
    width: 100% !important;
  }
}

/* 茶園を守る取り組み：写真を元データ比率 3:2 で表示 */
.torikumi-photo {
  aspect-ratio: 3 / 2 !important;
  width: 100% !important;
  max-width: 1180px !important;
  margin: 64px auto 0 !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* 茶園を守る取り組み：右側にサークル図を表示 */
.torikumi-circle-design {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.torikumi-circle-design img {
  display: block;
  width: min(100%, 520px);
  height: auto;
  object-fit: contain;
}

/* 茶園を守る取り組み：右側にサークル図をカード風に表示 */
.torikumi-circle-design {
  width: 100%;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.torikumi-circle-design img {
  display: block;
  width: min(100%, 500px);
  height: auto;
  object-fit: contain;
  background: #fff;
  padding: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
}
/* 茶園を守る取り組み：透過サークル図 */
.torikumi-circle-design {
  width: 100%;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.torikumi-circle-design img {
  display: block;
  width: min(100%, 540px);
  height: auto;
  object-fit: contain;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ============================================================
   なぜ今、宇治茶なのか：ウェルネス説明カード
============================================================ */
.market-wellness-card {
  margin-top: 34px;
  padding: 30px 34px;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(180, 154, 91, 0.32);
  box-shadow: 0 18px 45px rgba(17, 18, 15, 0.06);
}

.market-wellness-card .wellness-label {
  font-family: var(--font-utility);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .34em;
  color: var(--kin);
  line-height: 1.6;
  margin-bottom: 12px;
}

.market-wellness-card h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.8;
  color: var(--sumi);
  margin-bottom: 18px;
}

.market-wellness-card p {
  font-size: 13.5px;
  line-height: 2.25;
  color: #3c3a33;
}

.market-wellness-card p + p {
  margin-top: 10px;
}

.wellness-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.wellness-keywords span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border: 1px solid rgba(180, 154, 91, 0.42);
  border-radius: 999px;
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: .16em;
  color: #5d573f;
  background: rgba(245, 239, 227, 0.56);
}

/* スマホ調整 */
@media (max-width: 760px) {
  .market-wellness-card {
    margin-top: 28px;
    padding: 24px 20px;
  }

  .market-wellness-card p {
    font-size: 13px;
    line-height: 2.05;
  }

  .wellness-keywords {
    gap: 8px;
  }

  .wellness-keywords span {
    font-size: 10.5px;
    padding: 6px 11px;
  }
}

/* ============================================================
   なぜ今、宇治茶なのか：上段カード＋下段2カラム構成
============================================================ */

.market-sec-balanced {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: clamp(36px, 5vw, 76px) !important;
  align-items: center !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: var(--space-section) clamp(24px, 5vw, 72px) !important;
}

.market-sec-balanced .market-head {
  align-self: center !important;
}

.market-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr) !important;
  grid-template-rows: auto auto !important;
  gap: 30px 36px !important;
  align-items: stretch !important;
}

/* 上段：MATCHA & WELLNESSカード */
.market-sec-balanced .market-wellness-card {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 32px 38px !important;
  background: rgba(255, 255, 255, 0.34) !important;
  border: 1px solid rgba(180, 154, 91, 0.32) !important;
  box-shadow: 0 18px 45px rgba(17, 18, 15, 0.06) !important;
}

/* 下段左：グラフ */
.market-chart-block {
  grid-column: 1 !important;
  background: rgba(245, 239, 227, 0.38) !important;
  border: 1px solid rgba(17, 18, 15, 0.08) !important;
  padding: 28px 30px 30px !important;
  min-height: 100% !important;
}

/* グラフの高さを少し整える */
.market-chart-block .bars {
  height: 260px !important;
}

.market-chart-block .market-note {
  margin-top: 26px !important;
  font-size: 13px !important;
  line-height: 2.15 !important;
}

/* 下段右：画像 */
.market-sec-balanced .market-photo {
  grid-column: 2 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 430px !important;
  aspect-ratio: auto !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* ウェルネスカード内 */
.market-wellness-card .wellness-label {
  font-family: var(--font-utility);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .34em;
  color: var(--kin);
  line-height: 1.6;
  margin-bottom: 12px;
}

.market-wellness-card h3 {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.8;
  color: var(--sumi);
  margin-bottom: 18px;
}

.market-wellness-card p {
  font-size: 13.5px;
  line-height: 2.25;
  color: #3c3a33;
}

.market-wellness-card p + p {
  margin-top: 10px;
}

.wellness-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.wellness-keywords span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border: 1px solid rgba(180, 154, 91, 0.42);
  border-radius: 999px;
  font-family: var(--font-utility);
  font-size: 11px;
  letter-spacing: .16em;
  color: #5d573f;
  background: rgba(245, 239, 227, 0.56);
}

/* タブレット・スマホ */
@media (max-width: 980px) {
  .market-sec-balanced {
    grid-template-columns: 1fr !important;
  }

  .market-sec-balanced .market-head .tategaki {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: .18em !important;
    border-left: none !important;
    border-bottom: 1px solid var(--kin) !important;
    padding: 0 0 18px !important;
    min-height: 0 !important;
  }

  .market-layout {
    grid-template-columns: 1fr !important;
  }

  .market-sec-balanced .market-wellness-card,
  .market-chart-block,
  .market-sec-balanced .market-photo {
    grid-column: 1 !important;
  }

  .market-sec-balanced .market-photo {
    min-height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
}

@media (max-width: 640px) {
  .market-sec-balanced {
    padding: 90px 20px !important;
    gap: 28px !important;
  }

  .market-layout {
    gap: 24px !important;
  }

  .market-sec-balanced .market-wellness-card {
    padding: 24px 20px !important;
  }

  .market-chart-block {
    padding: 24px 18px !important;
  }

  .market-chart-block .bars {
    height: 220px !important;
    gap: 18px !important;
  }

  .market-wellness-card p,
  .market-chart-block .market-note {
    font-size: 13px !important;
    line-height: 2.05 !important;
  }
}

/* 右側古文書カード：クリック拡大用 */
.story-aside img,
.story-aside .photo {
  cursor: zoom-in;
}

/* 拡大表示モーダル */
.image-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 10, 0.82);
  padding: 24px;
}

.image-lightbox-modal.active {
  display: flex;
}

.image-lightbox-modal img {
  display: block;
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #f5efe3;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

.image-lightbox-close {
  position: fixed;
  top: 22px;
  right: 26px;
  z-index: 100000;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(245, 239, 227, 0.6);
  border-radius: 50%;
  background: rgba(14, 36, 24, 0.7);
  color: #f5efe3;
  font-size: 28px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

@media (max-width: 640px) {
  .image-lightbox-modal {
    padding: 14px;
  }

  .image-lightbox-close {
    top: 14px;
    right: 14px;
  }

  .image-lightbox-modal img {
    max-width: 94vw;
    max-height: 82vh;
  }
}

/* 古文書・製茶之図：クリック拡大 */
.story-aside img,
.story-aside .kobunsho-slider,
.story-aside .photo {
  cursor: zoom-in;
}

/* 拡大モーダル */
.image-lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 10, 0.86);
  padding: 24px;
}

.image-lightbox-modal.active {
  display: flex;
}

.image-lightbox-inner {
  position: relative;
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-lightbox-modal img {
  display: block;
  max-width: min(92vw, 1200px);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #f5efe3;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

/* 閉じるボタン */
.image-lightbox-close {
  position: fixed;
  top: 22px;
  right: 26px;
  z-index: 100002;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(245, 239, 227, 0.6);
  border-radius: 50%;
  background: rgba(14, 36, 24, 0.78);
  color: #f5efe3;
  font-size: 28px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

/* 左右ボタン */
.image-lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100001;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(245, 239, 227, 0.62);
  border-radius: 50%;
  background: rgba(14, 36, 24, 0.78);
  color: #f5efe3;
  font-size: 34px;
  line-height: 48px;
  text-align: center;
  cursor: pointer;
}

.image-lightbox-prev {
  left: 28px;
}

.image-lightbox-next {
  right: 28px;
}

.image-lightbox-nav.is-hidden {
  display: none;
}

/* 何枚目表示 */
.image-lightbox-counter {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 100001;
  padding: 8px 18px;
  border: 1px solid rgba(245, 239, 227, 0.45);
  border-radius: 999px;
  background: rgba(14, 36, 24, 0.72);
  color: #f5efe3;
  font-family: var(--font-utility);
  font-size: 12px;
  letter-spacing: .16em;
}

@media (max-width: 640px) {
  .image-lightbox-modal {
    padding: 12px;
  }

  .image-lightbox-modal img {
    max-width: 94vw;
    max-height: 78vh;
  }

  .image-lightbox-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    font-size: 26px;
    line-height: 36px;
  }

  .image-lightbox-nav {
    width: 42px;
    height: 42px;
    font-size: 28px;
    line-height: 36px;
  }

  .image-lightbox-prev {
    left: 10px;
  }

  .image-lightbox-next {
    right: 10px;
  }

  .image-lightbox-counter {
    bottom: 14px;
    font-size: 11px;
  }
}

/* ============================================================
   茶園を守る取り組み：緑背景を除去して古画背景にする
============================================================ */

.torikumi-sec {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #f5efe3 !important; /* 緑ではなく生成り背景 */
  color: var(--sumi) !important;
}

/* 背景の古画画像 */
.torikumi-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('https://godaimeyagiichibei.com/wp-content/uploads/2026/06/A-10569-346_E0163286.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.28;
  filter: sepia(0.35) saturate(0.85) brightness(1.05);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* 緑の重ね色を消して、生成りの薄い膜に変更 */
.torikumi-sec::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(245, 239, 227, 0.52);
  pointer-events: none;
}

/* 中身を前面へ */
.torikumi-sec .torikumi-inner {
  position: relative;
  z-index: 2;
}

/* 見出しを生成り背景でも読める色へ */
.torikumi-sec .section-title {
  color: var(--sumi) !important;
}

.torikumi-sec .eyebrow {
  color: var(--kin) !important;
}

/* 比較表も緑一色から、半透明の生成りカードへ */
.torikumi-sec .compare {
  background: rgba(180, 154, 91, 0.35) !important;
  border-color: rgba(180, 154, 91, 0.45) !important;
}

.torikumi-sec .compare-col,
.torikumi-sec .compare-col.ours {
  background: rgba(245, 239, 227, 0.78) !important;
  color: var(--sumi) !important;
  backdrop-filter: blur(3px);
}

/* 比較表の文字色調整 */
.torikumi-sec .compare-col h3 {
  color: #6a5b32 !important;
}

.torikumi-sec .flow li {
  color: #2f3029 !important;
}

.torikumi-sec .flow.ours li:last-child,
.torikumi-sec .flow.decline li:last-child {
  color: var(--kin) !important;
}

/* 下の4項目も生成りカード化 */
.torikumi-sec .values {
  background: rgba(180, 154, 91, 0.35) !important;
}

.torikumi-sec .values li {
  background: rgba(245, 239, 227, 0.78) !important;
  color: var(--sumi) !important;
}

.torikumi-sec .values li span {
  color: var(--kin) !important;
}


/* ============================================================
   V2: 個別ページ表示制御
   トップLPはそのまま、個別ページでは該当セクションだけ表示
============================================================ */

body.subpage .site-header {
  background: rgba(245,239,227,.92) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 1px 0 rgba(17,18,15,.08) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

body.subpage .site-nav a {
  color: var(--sumi) !important;
}

body.subpage .nav-toggle span {
  background: var(--sumi) !important;
}

body.subpage main {
  padding-top: 82px !important;
}

/* いったん全メインセクションを非表示 */
body.subpage .hero,
body.subpage .statement,
body.subpage .story,
body.subpage .market-sec,
body.subpage .torikumi-sec,
body.subpage .process-intro,
body.subpage .process,
body.subpage .products-sec,
body.subpage .visit-sec,
body.subpage .region-sec,
body.subpage .vision-sec,
body.subpage .closing {
  display: none !important;
}

/* 茶園の物語 */
body.subpage-story .story {
  display: grid !important;
}

/* なぜ今、宇治茶なのか */
body.subpage-why .market-sec {
  display: grid !important;
}

/* 茶園を守る取り組み */
body.subpage-approach .torikumi-sec {
  display: block !important;
}

/* MATCHA HIGH */
body.subpage-matcha .products-sec {
  display: block !important;
}

/* 茶づくり */
body.subpage-process .process-intro,
body.subpage-process .process {
  display: block !important;
}

/* 体験・訪問 */
body.subpage-visit .visit-sec {
  display: block !important;
}

/* お問い合わせ */
body.subpage-contact .closing {
  display: block !important;
}

/* 個別ページの先頭余白の微調整 */
body.subpage-story .story,
body.subpage-why .market-sec,
body.subpage-approach .torikumi-sec,
body.subpage-matcha .products-sec,
body.subpage-process .process-intro,
body.subpage-visit .visit-sec,
body.subpage-contact .closing {
  margin-top: 0 !important;
}

/* 個別ページでヘッダー直下が詰まりすぎる場合の補正 */
body.subpage-story .story {
  min-height: calc(88vh - 82px);
}

/* 個別ページのモバイル時：ヘッダー余白 */
@media (max-width: 760px) {
  body.subpage main {
    padding-top: 72px !important;
  }
}

/* トップページのセクション詳細リンク */
.section-more-link {
  display: inline-block;
  margin-top: 34px;
  padding: 14px 34px;
  border: 1px solid var(--kin);
  color: var(--sumi);
  font-family: var(--font-utility);
  font-size: 12px;
  letter-spacing: .24em;
  transition: .4s ease;
}

.section-more-link:hover {
  background: var(--kin);
  color: var(--sumi);
}

.section-more-link-light {
  color: var(--kinari);
}

.section-more-link-light:hover {
  color: var(--sumi);
}


/* ============================================================
   V3 下層ページ共通デザイン
============================================================ */
.yagi-subpage .site-header:not(.scrolled) .site-nav a{ color:var(--kinari); }
.subpage-main{ background:var(--kinari); }
.subpage-hero{ position:relative; min-height:58svh; display:flex; align-items:center; justify-content:center; padding:160px 24px 90px; overflow:hidden; color:var(--kinari); background:linear-gradient(160deg,#0E2418,#11120F); }
.subpage-hero.photo{ background-size:cover; background-position:center; }
.subpage-hero.photo::after{ display:none !important; }
.subpage-hero-scrim{ position:absolute; inset:0; background:radial-gradient(80% 70% at 50% 40%, rgba(14,36,24,.12), rgba(10,14,10,.72)), linear-gradient(to bottom, rgba(17,18,15,.55), rgba(14,36,24,.65)); z-index:1; }
.subpage-hero-inner{ position:relative; z-index:2; width:min(100%, 980px); text-align:center; }
.subpage-hero h1{ font-family:var(--font-display); font-size:clamp(38px,6vw,76px); line-height:1.45; letter-spacing:.18em; font-weight:600; margin-top:16px; }
.subpage-hero p:not(.eyebrow){ max-width:44em; margin:24px auto 0; color:rgba(245,239,227,.86); font-size:clamp(14px,1.5vw,17px); line-height:2.3; }
.breadcrumb{ max-width:1180px; margin:0 auto; padding:22px clamp(20px,5vw,72px); display:flex; gap:12px; align-items:center; font-family:var(--font-utility); font-size:12px; letter-spacing:.16em; color:#6a6552; border-bottom:1px solid rgba(17,18,15,.08); }
.breadcrumb a{ color:var(--kin); }
.subpage-section{ max-width:1180px; margin:0 auto; padding:clamp(76px,10vw,140px) clamp(20px,5vw,72px); }
.subpage-section + .subpage-section{ border-top:1px solid rgba(17,18,15,.08); }
.subpage-section h2{ font-family:var(--font-display); font-size:clamp(26px,3.8vw,46px); line-height:1.7; letter-spacing:.14em; font-weight:600; margin-top:14px; margin-bottom:28px; }
.subpage-section h3{ font-family:var(--font-display); font-size:clamp(18px,2vw,24px); line-height:1.8; letter-spacing:.12em; font-weight:600; }
.subpage-section p{ font-size:14.5px; line-height:2.35; color:#34352e; }
.subpage-section p + p{ margin-top:16px; }
.section-lead{ max-width:58em; margin-bottom:34px; }
.section-note{ margin-top:28px; padding:18px 22px; border-left:2px solid var(--kin); background:rgba(180,154,91,.12); }
.split-section{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.8fr); gap:clamp(34px,5vw,72px); align-items:center; }
.map-card, .contact-card{ background:rgba(255,255,255,.42); border:1px solid rgba(180,154,91,.32); padding:28px; box-shadow:0 18px 45px rgba(17,18,15,.06); }
.ide-map-svg{ min-height:320px; position:relative; overflow:hidden; background:radial-gradient(circle at 62% 48%, rgba(180,154,91,.35), transparent 8%), linear-gradient(145deg, rgba(63,95,56,.28), rgba(245,239,227,.8)); border:1px solid rgba(180,154,91,.32); }
.ide-map-svg::before{ content:""; position:absolute; inset:34px 46px; border:1px solid rgba(17,18,15,.15); border-radius:46% 54% 44% 56%; transform:rotate(-15deg); }
.map-label, .map-pin{ position:absolute; font-family:var(--font-utility); letter-spacing:.2em; font-size:11px; color:#5f593f; }
.map-label.kyoto{ left:30px; top:28px; } .map-label.uji{ right:26px; top:72px; }
.map-pin{ left:58%; top:48%; transform:translate(-50%,-50%); color:var(--kinari); background:var(--midori); border:1px solid var(--kin); padding:9px 13px; }
.timeline{ position:relative; margin-top:42px; padding-left:34px; }
.timeline::before{ content:""; position:absolute; left:8px; top:0; bottom:0; width:1px; background:var(--kin); }
.timeline article{ position:relative; padding:0 0 38px 28px; }
.timeline article::before{ content:""; position:absolute; left:-31px; top:10px; width:13px; height:13px; border-radius:50%; background:var(--kin); box-shadow:0 0 0 6px rgba(180,154,91,.15); }
.timeline span{ font-family:var(--font-utility); font-size:12px; letter-spacing:.28em; color:var(--kin); }
.timeline h3{ margin:8px 0 6px; }
.interview-section{ display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1fr); gap:clamp(34px,5vw,72px); align-items:stretch; }
.interview-photo{ min-height:620px; }
.interview-body{ background:rgba(255,255,255,.35); border:1px solid rgba(180,154,91,.25); padding:clamp(26px,4vw,48px); }
.interview-body h3{ margin-top:28px; color:#5a4e2e; }
.data-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:34px; background:rgba(180,154,91,.35); border:1px solid rgba(180,154,91,.35); }
.data-grid article{ background:rgba(245,239,227,.92); padding:32px 22px; text-align:center; }
.data-grid strong{ display:block; font-family:var(--font-display); font-size:clamp(28px,4vw,46px); line-height:1.2; color:var(--midori); letter-spacing:.08em; }
.data-grid span{ display:block; margin-top:14px; font-family:var(--font-utility); font-size:12px; line-height:1.8; letter-spacing:.16em; color:#5b5748; }
.archive-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); gap:28px; margin-top:34px; align-items:start; }
.subpage-gallery-slider{ min-height:360px; }
.next-story{ max-width:1180px; margin:0 auto clamp(60px,8vw,100px); padding:0 clamp(20px,5vw,72px); }
.next-story a{ display:block; position:relative; overflow:hidden; padding:42px clamp(24px,5vw,64px); background:linear-gradient(135deg, #0E2418, #153522); color:var(--kinari); border:1px solid rgba(180,154,91,.35); }
.next-story span{ display:block; font-family:var(--font-utility); font-size:11px; letter-spacing:.32em; color:var(--kin); }
.next-story strong{ display:block; margin-top:12px; font-family:var(--font-display); font-size:clamp(26px,3.4vw,42px); letter-spacing:.15em; font-weight:600; }
.next-story em{ display:block; margin-top:14px; font-style:normal; color:rgba(245,239,227,.78); font-size:14px; line-height:2; }
.subpage-cta, .reservation-cta, .recruit-cta{ max-width:1180px; margin:0 auto clamp(80px,10vw,140px); padding:clamp(42px,6vw,76px) clamp(24px,5vw,72px); text-align:center; background:linear-gradient(160deg,#11120F,#0E2418); color:var(--kinari); border:1px solid rgba(180,154,91,.35); }
.subpage-cta h2, .reservation-cta h2, .recruit-cta h2{ font-family:var(--font-display); font-size:clamp(28px,4vw,48px); line-height:1.6; letter-spacing:.14em; font-weight:600; margin-top:14px; }
.subpage-cta p:not(.eyebrow), .reservation-cta p:not(.eyebrow), .recruit-cta p:not(.eyebrow){ max-width:46em; margin:18px auto 0; color:rgba(245,239,227,.78); line-height:2.2; }
.subpage-cta-actions{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:34px; }
.btn-subtle{ background:transparent; color:var(--kinari); border-color:rgba(245,239,227,.35); }
.tea-type-grid, .promise-grid, .quality-grid, .season-grid, .tool-grid, .partner-list, .contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:34px; }
.tea-type-grid article, .promise-grid article, .quality-grid article, .season-grid article, .tool-grid article, .contact-grid article{ background:rgba(255,255,255,.38); border:1px solid rgba(180,154,91,.28); padding:26px 22px; }
.tea-type-grid .featured{ background:rgba(14,36,24,.92); color:var(--kinari); }
.tea-type-grid .featured dd, .tea-type-grid .featured dt, .tea-type-grid .featured p{ color:rgba(245,239,227,.82); }
dl{ display:grid; grid-template-columns:70px 1fr; gap:8px 14px; margin-top:16px; font-family:var(--font-utility); font-size:12px; line-height:1.8; }
dt{ color:var(--kin); letter-spacing:.14em; } dd{ color:#3c3a33; }
.table-wrap{ overflow-x:auto; margin-top:32px; }
.subpage-table{ width:100%; border-collapse:collapse; min-width:720px; background:rgba(255,255,255,.4); }
.subpage-table th, .subpage-table td{ border:1px solid rgba(180,154,91,.35); padding:18px 20px; font-size:13px; line-height:2; vertical-align:top; }
.subpage-table th{ font-family:var(--font-utility); color:#625636; letter-spacing:.12em; background:rgba(180,154,91,.14); }
.contrast-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(180,154,91,.35); margin:30px 0; border:1px solid rgba(180,154,91,.35); }
.contrast-grid article{ background:rgba(255,255,255,.42); padding:34px; }
.faq-section details{ border-top:1px solid rgba(180,154,91,.36); padding:20px 0; }
.faq-section details:last-child{ border-bottom:1px solid rgba(180,154,91,.36); }
.faq-section summary{ cursor:pointer; font-family:var(--font-display); font-size:17px; letter-spacing:.12em; }
.faq-section details p{ margin-top:14px; }
.process-detail-list{ display:flex; flex-direction:column; gap:38px; margin-top:40px; }
.process-detail-card{ display:grid; grid-template-columns:minmax(280px,.92fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:center; }
.process-detail-card:nth-child(even){ grid-template-columns:minmax(0,1fr) minmax(280px,.92fr); }
.process-detail-card:nth-child(even) .photo{ order:2; }
.process-detail-card .photo{ min-height:360px; }
.data-card{ border:1px solid rgba(180,154,91,.35); padding:18px; background:rgba(180,154,91,.1); }
.year-calendar{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(180,154,91,.35); border:1px solid rgba(180,154,91,.35); margin-top:34px; }
.year-calendar article{ background:rgba(245,239,227,.94); padding:24px 20px; }
.year-calendar span, .step-five span, .step-four span, .promise-grid span{ font-family:var(--font-utility); color:var(--kin); letter-spacing:.18em; font-size:12px; }
.step-five, .step-four{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:38px; background:rgba(180,154,91,.35); border:1px solid rgba(180,154,91,.35); }
.step-four{ grid-template-columns:repeat(4,1fr); }
.step-five article, .step-four article{ background:rgba(255,255,255,.42); padding:26px 20px; }
.before-after{ display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:34px 0; }
.before-after .photo{ min-height:340px; margin-bottom:18px; }
.subpage-torikumi-box{ max-width:none; padding-top:clamp(76px,10vw,140px) !important; padding-bottom:clamp(76px,10vw,140px) !important; }
.partner-list{ grid-template-columns:repeat(5,1fr); }
.partner-list span{ display:flex; align-items:center; justify-content:center; min-height:82px; background:rgba(255,255,255,.4); border:1px solid rgba(180,154,91,.28); font-family:var(--font-utility); letter-spacing:.14em; text-align:center; padding:14px; }
.brand-story-section{ text-align:center; max-width:900px; }
.brand-story-section .matcha-high-logo-img{ margin-bottom:36px; }
.business-section{ background:#11120F; color:var(--kinari); max-width:none; padding-left:max(clamp(20px,5vw,72px), calc((100vw - 1180px)/2 + 72px)); padding-right:max(clamp(20px,5vw,72px), calc((100vw - 1180px)/2 + 72px)); }
.business-section p, .business-section li{ color:rgba(245,239,227,.78); }
.check-list{ margin:28px auto 0; max-width:820px; display:grid; gap:14px; }
.check-list li{ position:relative; padding-left:28px; line-height:2; }
.check-list li::before{ content:"✓"; position:absolute; left:0; color:var(--kin); }
.experience-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:34px; }
.experience-grid article{ background:rgba(255,255,255,.42); border:1px solid rgba(180,154,91,.3); padding:20px; }
.experience-grid .photo{ aspect-ratio:16/10; margin-bottom:22px; }
.course-timeline{ max-width:820px; margin-top:36px; border-left:1px solid var(--kin); padding-left:26px; }
.course-timeline article{ display:grid; grid-template-columns:90px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid rgba(180,154,91,.25); }
.course-timeline span{ font-family:var(--font-utility); color:var(--kin); letter-spacing:.16em; }
.access-section{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.85fr); gap:42px; align-items:center; }
.message-template{ background:rgba(255,255,255,.42); border:1px solid rgba(180,154,91,.3); padding:28px; font-family:var(--font-utility); }
@media (max-width:980px){
  .split-section, .interview-section, .archive-grid, .process-detail-card, .process-detail-card:nth-child(even), .access-section{ grid-template-columns:1fr; }
  .process-detail-card:nth-child(even) .photo{ order:0; }
  .data-grid, .tea-type-grid, .promise-grid, .quality-grid, .season-grid, .tool-grid, .partner-list{ grid-template-columns:1fr 1fr; }
  .year-calendar{ grid-template-columns:1fr 1fr; }
  .step-five, .step-four{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .site-nav ul{ gap:18px; }
  .site-nav a{ font-size:12px; }
  .subpage-hero{ min-height:52svh; padding:130px 20px 70px; }
  .subpage-hero h1{ letter-spacing:.12em; }
  .subpage-section{ padding:72px 20px; }
  .data-grid, .tea-type-grid, .promise-grid, .quality-grid, .season-grid, .tool-grid, .partner-list, .experience-grid, .contrast-grid, .before-after{ grid-template-columns:1fr; }
  .year-calendar{ grid-template-columns:1fr; }
  .step-five, .step-four{ grid-template-columns:1fr; }
  .interview-photo, .process-detail-card .photo{ min-height:300px; }
  .course-timeline article{ grid-template-columns:1fr; gap:4px; }
  .subpage-cta-actions{ flex-direction:column; align-items:center; }
  .subpage-cta-actions .btn{ width:min(100%, 320px); text-align:center; }
}