@charset "UTF-8";

/* =========================================================
   下層ページ共通
   （佐野川茶について／齊藤について／お問い合わせ）
   ========================================================= */

/* 固定ヘッダーを廃止したので、下層でも先頭のロゴをそのまま出す */
.sg-view.is-ready .sg-topbar,
.sg-view.is-ready .sg-topbar__menu { opacity: 1; visibility: visible; transition: opacity 1.2s .2s, visibility 1.2s .2s; }
.sg-topbar, .sg-topbar__menu { opacity: 0; visibility: hidden; }

/* ---------- KV ---------- */
.sec-hero { width: 100%; height: 100vh; overflow: hidden; position: relative; }
.sec-hero__photo { z-index: 1; height: 100%; overflow: hidden; position: relative; }
.sec-hero__photo-image {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06); transition: transform 2.4s cubic-bezier(.22, 1, .36, 1);
}
.sg-view.is-ready .sec-hero__photo-image { transform: scale(1); }
/* 縦組みは top:50% だと「利用できる行長」が半分になって余計な列送りが起きるため、
   高さを 100% 取って text-align（縦組みでは天地方向の揃え）で中央に置く */
.sec-hero__title {
  z-index: 2; position: absolute; top: 0; bottom: 0; height: 100%;
  writing-mode: vertical-rl; font-feature-settings: "palt" 0; text-align: center;
  color: #fff; font-weight: 600; text-shadow: 0 .1rem 1.2rem rgba(0, 0, 0, .32);
  opacity: 0; transform: translateX(2rem);
}
.sg-view.is-ready .sec-hero__title {
  opacity: 1; transform: translateX(0);
  transition: opacity 1.6s .7s, transform 1.6s .7s cubic-bezier(.22, 1, .36, 1);
}
.sec-hero__scrim {
  position: absolute; z-index: 1; top: 0; right: 0; height: 100%; pointer-events: none;
  background: linear-gradient(to left, rgba(24, 14, 8, .5) 0%, rgba(24, 14, 8, .26) 45%, rgba(24, 14, 8, 0) 100%);
}

/* ---------- 本文セクション ---------- */
.sec-story__section { position: relative; }
.sec-story__label { font-family: var(--f-en); font-weight: 500; letter-spacing: .12em; color: var(--tea); }
.sec-story__label-jp { font-weight: 600; letter-spacing: .12em; }
.sec-story__top, .sec-story__desc-photo, .sec-story__center-photo-inner, .sec-story__overlap-photo { overflow: hidden; }
.sec-story__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.sec-story__title { font-weight: 600; letter-spacing: .13em; }
.sec-story__text { font-weight: 500; letter-spacing: .1em; }
.sec-story__quote { font-weight: 600; letter-spacing: .1em; }
.sec-story__quote-by { font-family: var(--f-en); font-weight: 500; letter-spacing: .08em; color: var(--mute); }

/* ---------- SNSチャンネル一覧 ---------- */
.sec-channels__item { border-top: 1px solid var(--line); }
.sec-channels__item:last-child { border-bottom: 1px solid var(--line); }
.sec-channels__link { display: flex; align-items: center; position: relative; }
.sec-channels__en { font-family: var(--f-en); font-weight: 500; letter-spacing: .05em; flex-shrink: 0; }
.sec-channels__desc { font-weight: 500; letter-spacing: .1em; }
.sec-channels__icon { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: block; }
.sec-channels__icon > svg { display: block; width: 100%; height: 100%; }
.sec-channels__link:hover .sec-channels__en, .sec-channels__link:hover .sec-channels__desc { color: var(--tea); }
.sec-channels__en, .sec-channels__desc { transition: color .3s ease-out; }
.sec-channels__link:hover .sec-channels__icon { transform: translateY(-50%) translate(.4rem, -.4rem); color: var(--tea); }
.sec-channels__icon { transition: transform .3s ease-out, color .3s ease-out; }

/* ---------- 下部ナビゲーション ---------- */
.sec-pagenav__title { position: relative; }
.sec-pagenav__head-jp { font-weight: 600; letter-spacing: .1em; }
.sec-pagenav__head-en { font-family: var(--f-en); font-weight: 600; letter-spacing: .05em; color: var(--tea); }
.sec-pagenav__nav { display: flex; }
.sec-pagenav__cell { position: relative; width: 50%; overflow: hidden; }
.sec-pagenav__cell:first-of-type { border-right: 1px solid var(--line); }
.sec-pagenav__cell-inner { display: block; width: 100%; height: 100%; position: relative; }
.sec-pagenav__cell-head { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; text-align: center; width: 100%; }
.sec-pagenav__cell-head-en { font-family: var(--f-en); font-weight: 500; transition: color .4s; }
.sec-pagenav__cell-head-jp { font-weight: 600; letter-spacing: .075em; transition: color .4s; }
.sec-pagenav__cell-photo { position: absolute; z-index: 1; inset: 0; opacity: .5; transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1); }
.sec-pagenav__cell-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sec-pagenav__cell-inner:hover .sec-pagenav__cell-photo { opacity: 1; transform: scale(1.03); }
.sec-pagenav__cell-inner:hover .sec-pagenav__cell-head-en,
.sec-pagenav__cell-inner:hover .sec-pagenav__cell-head-jp { color: #fff; }
.sec-pagenav__prev-link { display: flex; }

/* =========================================================
   PC
   ========================================================= */
@media screen and (min-width: 768px) {
  .sec-hero__title { right: 34.4rem; font-size: 3.8rem; letter-spacing: .38em; line-height: 1.4; }
  .sec-hero__scrim { width: 72rem; }

  .sec-story { padding-top: 24.9rem; }
  .sec-story__label-wrap { margin-left: 30rem; margin-bottom: 8.8rem; }
  .sec-story__label { font-size: 1.8rem; }
  .sec-story__label-jp { font-size: 1.5rem; margin-top: 1rem; }
  .sec-story__top { width: 120rem; height: 80rem; margin-left: auto; }
  .sec-story__desc { display: flex; justify-content: space-between; flex-direction: row-reverse; padding-right: 24.6rem; padding-top: 15rem; }
  .sec-story__desc-body { width: 54.6rem; padding-top: 6.8rem; }
  .sec-story__desc-photo { width: 68.2rem; height: 56rem; flex-shrink: 0; }
  .sec-story__title { font-size: 3rem; line-height: 1.86667; margin-bottom: 2.2rem; }
  .sec-story__text { font-size: 1.8rem; line-height: 2.34; }
  .sec-story__center-photo { padding-top: 24.8rem; margin: 0 auto; width: 120rem; height: 104.8rem; }
  .sec-story__center-photo-inner { width: 120rem; height: 80rem; }
  .sec-story__desc2 { display: flex; flex-direction: row-reverse; }
  .sec-story__overlap-photo { width: 68.2rem; height: 56rem; margin-top: -8rem; margin-left: 7.8rem; flex-shrink: 0; z-index: 2; }
  .sec-story__desc2-body { width: 54rem; padding-top: 12.2rem; }
  .sec-story__quote { font-size: 2.4rem; line-height: 2; margin-top: 5.2rem; }
  .sec-story__quote-by { font-size: 1.5rem; margin-top: 2rem; }

  .sec-channels { margin: 20rem 30rem 0; }
  .sec-channels__link { height: 12rem; padding-right: 6.4rem; }
  .sec-channels__en { font-size: 3.2rem; width: 20rem; }
  .sec-channels__desc { font-size: 1.6rem; line-height: 2.25; }
  .sec-channels__icon { width: 2rem; height: 2rem; }

  /* お問い合わせパネルが浮かなくなったので、下の逃げを詰めた */
  .sec-pagenav { padding-top: 35rem; padding-bottom: 20rem; }
  .sec-pagenav__title { display: flex; align-items: flex-end; margin-left: 30rem; }
  .sec-pagenav__head-jp { font-size: 1.8rem; line-height: 1.2; }
  .sec-pagenav__head-en { font-size: 1.6rem; margin-right: 2.8rem; }
  .sec-pagenav__nav { margin-top: 10rem; }
  .sec-pagenav__cell { height: 36rem; }
  .sec-pagenav__cell-head-en { font-size: 2.8rem; }
  .sec-pagenav__cell-head-jp { font-size: 1.6rem; line-height: 1.875; margin-top: 1.4rem; }
  .sec-pagenav__prev-link { margin-top: 16rem; justify-content: center; }
  .sec-pagenav .sg-btn { padding-right: 5rem; }
}

/* =========================================================
   SP
   ========================================================= */
@media screen and (max-width: 767px) {
  .sec-hero__title { right: 4.25rem; font-size: 2.4rem; letter-spacing: .38em; line-height: 1.4; }
  .sec-hero__scrim { width: 25.6rem; }

  .sec-story { padding-top: 14.1rem; }
  .sec-story__label-wrap { margin-left: 2.85rem; margin-bottom: 4.4rem; }
  .sec-story__label { font-size: 1.4rem; }
  .sec-story__label-jp { font-size: 1.3rem; margin-top: .8rem; }
  .sec-story__top { width: 41.4rem; height: 36rem; }
  .sec-story__desc { padding: 6.5rem 2.85rem 0; }
  .sec-story__desc-photo { width: 34.1rem; height: 28rem; margin-left: auto; margin-right: -2.85rem; margin-top: 7rem; }
  .sec-story__title { letter-spacing: .1em; font-size: 2.1rem; line-height: 1.90476; margin-bottom: 2rem; }
  .sec-story__text { letter-spacing: .13em; font-size: 1.5rem; line-height: 2.26667; }
  .sec-story__center-photo { padding-top: 12.4rem; margin-left: 2.85rem; }
  .sec-story__overlap-photo { width: 35.35rem; height: 28rem; margin-top: -4rem; }
  .sec-story__desc2-body { padding: 5.3rem 2.85rem 0; }
  .sec-story__quote { font-size: 1.8rem; line-height: 1.9; margin-top: 3.6rem; }
  .sec-story__quote-by { font-size: 1.3rem; margin-top: 1.4rem; }

  .sec-channels { margin: 10rem 2.85rem 0; }
  .sec-channels__link { display: block; padding: 2.4rem 4rem 2.4rem 0; }
  .sec-channels__en { font-size: 2.2rem; }
  .sec-channels__desc { font-size: 1.4rem; line-height: 1.92857; margin-top: .8rem; }
  .sec-channels__icon { width: 1.6rem; height: 1.6rem; }

  .sec-pagenav { padding-top: 13.7rem; padding-bottom: 8rem; }
  .sec-pagenav__title { margin-left: 2.85rem; }
  .sec-pagenav__head-jp { font-size: 1.4rem; line-height: 2; margin-top: .5rem; }
  .sec-pagenav__head-en { font-size: 1.4rem; }
  .sec-pagenav__nav { margin-top: 4.5rem; }
  .sec-pagenav__cell { height: 17.5rem; }
  .sec-pagenav__cell-head-en { font-size: 1.8rem; }
  .sec-pagenav__cell-head-jp { font-size: 1.3rem; margin-top: .8rem; }
  .sec-pagenav__prev-link { margin-top: 4.9rem; margin-left: 2.85rem; }
}