@charset "utf-8";

/* ============================================================================
   FILE    : original-coffee.css
   PAGE    : Okinawa Longstay Original Coffee（template-original-coffee.php）
   ----------------------------------------------------------------------------
   - このページでだけ読み込む。テーマの style.css より先に読まれるので、
     すべて .olsp-coffee 配下のクラスで書き、詳細度でテーマの要素指定
     （h1〜h4 の font-weight / a:link の下線 / p の line-height）に勝たせる
   - 01 のリセット（.olsp-coffee p / h1〜h3 / figure / dl / dd）は詳細度 0-1-1。
     p や dl に margin / line-height を指定するときは .olsp-coffee を前に付けて勝たせる
   - JS なし。SP の横スクロールは scroll-snap のみ
   - ブレークポイントはテーマに合わせて 768px
   - letter-spacing は使わない（和文・英字とも）
   - font-family は指定しない。テーマの body { font-family:serif }（端末の明朝・セリフ体）を継承する

   STRUCTURE
     01. Tokens & base
     02. Common parts（見出し・ボタン・価格・ユーティリティ）
     03. KV
     04. Intro
     05. Taste（テイスティングチャート）
     06. Origin
     07. Expert
     08. Story
     09. Scene
     10. Product
     T.  Tablet (769px - 1024px)
     M.  Mobile (max-width: 768px)
   ============================================================================ */

/* ============================================================================
   01. TOKENS & BASE
   ============================================================================ */

.olsp-coffee {
  --olsp-navy:     #013573;   /* テーマのメインカラー（ヘッダー・フッター） */
  --olsp-navy-ink: #0f2140;   /* チャートの丸・数値 */
  --olsp-cream:    #fffcf4;
  --olsp-beige:    #efece5;
  --olsp-ink:      #222;
  --olsp-muted:    #5c5c5c;
  --olsp-line:     #cfd4dc;

  display:block;
  background-color:var(--olsp-cream);
  color:var(--olsp-ink);
  font-size:1rem;
  line-height:2;
}
.olsp-coffee p {
  margin:0;
  line-height:2;
  text-wrap:pretty;
}
.olsp-coffee h1, .olsp-coffee h2, .olsp-coffee h3 {
  margin:0;
  font-weight:500;
}
.olsp-coffee figure {margin:0;}
.olsp-coffee img {
  display:block;
  width:100%;
  height:auto;
}
.olsp-coffee dl, .olsp-coffee dd {margin:0;}

.olsp-coffee-inner {
  box-sizing:border-box;
  margin:0 auto;
  padding:0 24px;
  max-width:1128px;
}
.olsp-coffee-sec {padding:120px 0;}

/* ============================================================================
   02. COMMON PARTS
   ============================================================================ */

/* セクション見出し：英字ラベル + 和文見出し */
.olsp-coffee-head {
  margin-bottom:56px;
  text-align:center;
}
.olsp-coffee .olsp-coffee-head__en {
  font-size:1rem;
  line-height:1;
  color:var(--olsp-navy);
}
.olsp-coffee .olsp-coffee-head__ja {
  margin-top:20px;
  font-size:1.875rem;
  line-height:1.7;
}
/* 英字だけで見出しにするとき（DOUBLE COFFEE EXPERT） */
.olsp-coffee .olsp-coffee-head__en.is-title {
  font-size:2.25rem;
  font-weight:400;
  line-height:1.3;
}

.olsp-coffee .olsp-coffee-lead {
  margin:0 auto;
  max-width:820px;
  text-align:center;
  line-height:2.2;
}
.olsp-coffee .olsp-coffee-expert .olsp-coffee-lead {max-width:900px;}
.olsp-coffee .olsp-coffee-subhead {
  margin-bottom:1.2em;
  font-size:1.375rem;
  line-height:1.8;
}

.olsp-coffee-cta {text-align:center;}
.olsp-coffee a.olsp-coffee-btn {
  box-sizing:border-box;
  display:inline-block;
  position:relative;
  padding:1.4em 4.5em 1.4em 3.5em;
  min-width:320px;
  background-color:var(--olsp-navy);
  color:#fff;
  font-size:1rem;
  line-height:1;
  text-decoration:none;
  transition:background-color .2s;
}
.olsp-coffee a.olsp-coffee-btn::after {
  content:'';
  position:absolute;
  right:1.75em;
  top:50%;
  width:0.5em;
  height:0.5em;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
  transition:right .2s;
}
.olsp-coffee a.olsp-coffee-btn:hover {background-color:var(--olsp-navy-ink);}
.olsp-coffee a.olsp-coffee-btn:hover::after {right:1.4em;}
.olsp-coffee a.olsp-coffee-btn:focus-visible {
  outline:2px solid var(--olsp-navy);
  outline-offset:3px;
}

.olsp-coffee .olsp-coffee-price {
  margin:48px 0 32px;
  font-size:1.75rem;
  line-height:1.4;
  text-align:center;
}
.olsp-coffee-price__amount {
  margin-right:0.6em;
  font-size:0.7em;
}
.olsp-coffee-price__tax {font-size:0.55em;}

.olsp-sp {display:none;}
.olsp-sr {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ============================================================================
   03. KV
   ============================================================================ */

.olsp-coffee-kv {
  /* KV 内の重なり（写真 < グラデーション < 文字）をここで閉じる。
     文字の z-index が固定ヘッダー（#navi z-index:1）と競って、スクロール時に被さるのを防ぐ */
  isolation:isolate;
  position:relative;
  height:calc(100svh - 110px);
  min-height:520px;
  max-height:860px;
  overflow:hidden;
  background-color:#4a3a2e;
}
.olsp-coffee-kv img {
  position:absolute;
  inset:0;
  height:100%;
  object-fit:cover;
}
.olsp-coffee-kv::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25) 35%, rgba(0, 0, 0, 0) 65%);
}
.olsp-coffee-kv__text {
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  top:12%;
  color:#fff;
  text-align:center;
  text-shadow:0 0 1.5em rgba(0, 0, 0, 0.3);
}
.olsp-coffee .olsp-coffee-kv__title {
  font-size:1.125rem;
  font-weight:400;
  line-height:1.6;
}
.olsp-coffee .olsp-coffee-kv__catch {
  margin-top:24px;
  font-size:2.75rem;
  line-height:1.6;
}
.olsp-coffee-kv__catch br {display:none;}

/* ============================================================================
   04. INTRO
   ============================================================================ */

.olsp-coffee-intro {padding:120px 0;}
.olsp-coffee-intro__poem {text-align:center;}
.olsp-coffee .olsp-coffee-intro__poem p {
  font-size:1.125rem;
  line-height:2.2;
}
.olsp-coffee .olsp-coffee-intro__poem p + p {margin-top:1.4em;}
/* 最初の 3 行は情景の短文なので詰めて並べる */
.olsp-coffee .olsp-coffee-intro__poem p:nth-child(2),
.olsp-coffee .olsp-coffee-intro__poem p:nth-child(3) {margin-top:0.4em;}
.olsp-coffee .olsp-coffee-intro__poem p:last-child {
  margin-top:2.4em;
  font-size:1.375rem;
}

/* ============================================================================
   05. TASTE
   ============================================================================ */

.olsp-coffee-taste {background-color:#fff;}
.olsp-coffee-taste__body {
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:72px;
  align-items:center;
}
.olsp-coffee .olsp-coffee-taste__text > p {line-height:2.2;}

/* テイスティングチャート
   値は行の style="--v:4.0"（1〜5）。丸の位置 = (v - 1) / 4 */
.olsp-coffee .olsp-coffee-chart {
  margin-top:56px;
  max-width:520px;
}
.olsp-coffee-chart__row {
  display:grid;
  grid-template-columns:4.5em 1fr;
  gap:0 24px;
}
.olsp-coffee-chart__row + .olsp-coffee-chart__row {margin-top:28px;}
.olsp-coffee-chart__label {
  /* 数値の高さ(32px)ぶん下げて、横線と中心をそろえる */
  padding-top:calc(32px - 0.75em);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.5;
}
.olsp-coffee-chart__scale {padding-top:32px;}
.olsp-coffee-chart__track {
  display:block;
  position:relative;
  height:1px;
  background-color:var(--olsp-line);
}
/* 5 段階の目盛り */
.olsp-coffee-chart__track::before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-3px;
  height:7px;
  background:
    linear-gradient(var(--olsp-line), var(--olsp-line)) 0    0 / 1px 100% no-repeat,
    linear-gradient(var(--olsp-line), var(--olsp-line)) 25%  0 / 1px 100% no-repeat,
    linear-gradient(var(--olsp-line), var(--olsp-line)) 50%  0 / 1px 100% no-repeat,
    linear-gradient(var(--olsp-line), var(--olsp-line)) 75%  0 / 1px 100% no-repeat,
    linear-gradient(var(--olsp-line), var(--olsp-line)) 100% 0 / 1px 100% no-repeat;
}
.olsp-coffee-chart__dot {
  position:absolute;
  left:calc((var(--v) - 1) / 4 * 100%);
  top:50%;
  width:16px;
  height:16px;
  border-radius:50%;
  background-color:var(--olsp-navy-ink);
  transform:translate(-50%, -50%);
}
.olsp-coffee-chart__val {
  position:absolute;
  left:50%;
  bottom:calc(100% + 6px);
  transform:translateX(-50%);
  font-size:1.5rem;
  font-weight:600;
  line-height:1;
  color:var(--olsp-navy-ink);
}
.olsp-coffee-chart__ends {
  display:flex;
  justify-content:space-between;
  margin-top:12px;
  font-size:0.875rem;
  line-height:1.5;
  color:var(--olsp-muted);
}

/* ============================================================================
   06. ORIGIN
   ============================================================================ */

.olsp-coffee-origin__body {
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:64px;
  align-items:center;
  margin-top:72px;
}
.olsp-coffee-origin__list {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  margin-top:96px;
}
.olsp-coffee .olsp-coffee-origin__en {
  margin:24px 0 8px;
  font-size:1.625rem;
  font-weight:500;
  line-height:1.2;
  color:var(--olsp-navy);
}
.olsp-coffee .olsp-coffee-origin__ja {
  font-size:0.9375rem;
  line-height:1.9;
}

/* ============================================================================
   07. EXPERT
   ============================================================================ */

.olsp-coffee-expert {background-color:var(--olsp-beige);}
.olsp-coffee-expert__list {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:40px;
  margin-top:72px;
}
.olsp-coffee-expert__item {
  padding:48px 44px;
  background-color:var(--olsp-cream);
}
.olsp-coffee-expert__item figure {
  margin:0 auto 32px;
  width:160px;
}
.olsp-coffee-expert__item figure img {
  aspect-ratio:1;
  border-radius:50%;
  object-fit:cover;
}
.olsp-coffee .olsp-coffee-expert__name {
  font-size:1.5rem;
  line-height:1.4;
  text-align:center;
}
.olsp-coffee-expert__name span {
  display:block;
  margin-top:8px;
  font-size:1rem;
  font-weight:400;
  color:var(--olsp-muted);
}
.olsp-coffee .olsp-coffee-expert__role {
  margin:24px 0 20px;
  padding:12px 0;
  border-top:1px solid var(--olsp-line);
  border-bottom:1px solid var(--olsp-line);
  font-size:0.9375rem;
  line-height:1.7;
  text-align:center;
  color:var(--olsp-navy);
}
.olsp-coffee .olsp-coffee-expert__body > p:last-child {
  font-size:0.9375rem;
  line-height:2;
}

/* ============================================================================
   08. STORY
   ============================================================================ */

.olsp-coffee-story {
  background-color:var(--olsp-navy);
  color:#fff;
}
.olsp-coffee-story .olsp-coffee-head__en {color:rgba(255, 255, 255, 0.75);}
.olsp-coffee .olsp-coffee-story__text {
  margin:0 auto;
  max-width:720px;
  line-height:2.3;
}

/* ============================================================================
   09. SCENE
   ============================================================================ */

.olsp-coffee-scene__list {
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin:0 auto;
  padding:0 24px;
  max-width:1248px;
}
.olsp-coffee-scene__list img {
  aspect-ratio:4 / 5;
  object-fit:cover;
}
.olsp-coffee-scene__list figcaption {
  margin-top:16px;
  font-size:0.9375rem;
  line-height:1.7;
  text-align:center;
}
.olsp-coffee .olsp-coffee-scene__text {
  margin-top:56px;
  font-size:1.125rem;
  text-align:center;
}

/* ============================================================================
   10. PRODUCT
   ============================================================================ */

.olsp-coffee-product {
  background-color:#fff;
  padding-top:140px;
}
.olsp-coffee .olsp-coffee-product__catch {
  margin-bottom:96px;
  font-size:2rem;
  line-height:1.8;
  text-align:center;
}
.olsp-coffee-product__body {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
.olsp-coffee .olsp-coffee-product__name {
  margin-bottom:32px;
  font-size:2rem;
  font-weight:500;
  line-height:1.3;
  color:var(--olsp-navy);
}
.olsp-coffee-spec {border-top:1px solid var(--olsp-line);}
.olsp-coffee-spec > div {
  display:grid;
  grid-template-columns:8em 1fr;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--olsp-line);
  line-height:1.7;
}
.olsp-coffee-spec dt {color:var(--olsp-muted);}
.olsp-coffee-product__info .olsp-coffee-price {
  margin:32px 0 28px;
  text-align:left;
}
.olsp-coffee-product__info .olsp-coffee-cta {text-align:left;}

/* ============================================================================
   T. TABLET (769px - 1024px)
   ============================================================================ */

/* テーマはこの幅でヘッダーが 80px になるが、body の padding-top は 110px のまま。
   通常ページは白背景で目立たない 30px の隙間が、KV の上では白帯に見えるので詰める */
@media only screen and (min-width:769px) and (max-width:1024px) {
  .olsp-coffee-kv {
    margin-top:-30px;
    height:calc(100svh - 80px);
  }
}

/* ============================================================================
   M. MOBILE (max-width: 768px)
   ============================================================================ */

@media only screen and (max-width:768px) {

  .olsp-coffee-inner {padding:0 20px;}
  .olsp-coffee-sec {padding:80px 0;}
  .olsp-pc {display:none;}
  .olsp-sp {display:inline;}

  .olsp-coffee-head {margin-bottom:40px;}
  .olsp-coffee .olsp-coffee-head__ja {
    margin-top:16px;
    font-size:1.375rem;
  }
  .olsp-coffee .olsp-coffee-head__en.is-title {font-size:1.625rem;}
  .olsp-coffee .olsp-coffee-lead {text-align:left;}
  .olsp-coffee .olsp-coffee-subhead {font-size:1.125rem;}

  .olsp-coffee a.olsp-coffee-btn {
    padding-left:2em;
    padding-right:3em;
    width:100%;
    min-width:0;
  }
  .olsp-coffee .olsp-coffee-price {
    margin:40px 0 24px;
    font-size:1.5rem;
  }

  /* KV */
  .olsp-coffee-kv {
    height:calc(100svh - 80px);
    min-height:480px;
  }
  .olsp-coffee .olsp-coffee-kv__title {font-size:0.875rem;}
  .olsp-coffee .olsp-coffee-kv__catch {
    margin-top:16px;
    font-size:1.875rem;
  }
  .olsp-coffee-kv__catch br {display:inline;}

  /* Intro */
  .olsp-coffee-intro {padding:72px 0 80px;}
  .olsp-coffee .olsp-coffee-intro__poem p {font-size:1rem;}
  .olsp-coffee .olsp-coffee-intro__poem p:last-child {font-size:1.125rem;}

  /* Taste */
  .olsp-coffee-taste__body {
    grid-template-columns:1fr;
    gap:40px;
  }
  .olsp-coffee-taste__img img {
    aspect-ratio:4 / 3;
    object-fit:cover;
  }
  .olsp-coffee .olsp-coffee-chart {margin-top:40px;}
  .olsp-coffee-chart__row {
    grid-template-columns:3.5em 1fr;
    gap:0 16px;
  }
  .olsp-coffee-chart__label {font-size:1rem;}
  .olsp-coffee-chart__ends {font-size:0.8125rem;}

  /* Origin */
  .olsp-coffee-origin__body {
    grid-template-columns:1fr;
    gap:32px;
    margin-top:40px;
  }
  .olsp-coffee-origin__list {
    grid-template-columns:1fr;
    gap:24px;
    margin-top:56px;
  }
  .olsp-coffee-origin__item {
    display:grid;
    grid-template-columns:40% 1fr;
    gap:20px;
    align-items:center;
  }
  .olsp-coffee .olsp-coffee-origin__en {
    margin-top:0;
    font-size:1.25rem;
  }
  .olsp-coffee .olsp-coffee-origin__ja {font-size:0.875rem;}

  /* Expert */
  .olsp-coffee-expert__list {
    grid-template-columns:1fr;
    gap:24px;
    margin-top:40px;
  }
  .olsp-coffee-expert__item {padding:40px 24px;}
  .olsp-coffee-expert__item figure {width:128px;}

  /* Story */
  .olsp-coffee .olsp-coffee-story__text {line-height:2.1;}

  /* Scene：横スクロール（JS なし） */
  .olsp-coffee-scene__list {
    display:flex;
    gap:12px;
    padding:0 20px 8px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding:0 20px;
  }
  .olsp-coffee-scene__list li {
    flex:0 0 72%;
    scroll-snap-align:start;
  }
  .olsp-coffee .olsp-coffee-scene__text {
    margin-top:40px;
    font-size:1rem;
  }

  /* Product */
  .olsp-coffee-product {padding-top:88px;}
  .olsp-coffee .olsp-coffee-product__catch {
    margin-bottom:56px;
    font-size:1.375rem;
  }
  .olsp-coffee-product__body {
    grid-template-columns:1fr;
    gap:40px;
  }
  .olsp-coffee .olsp-coffee-product__name {
    margin-bottom:24px;
    font-size:1.5rem;
  }
  .olsp-coffee-spec > div {
    grid-template-columns:7.6em 1fr;
    gap:12px;
    font-size:0.9375rem;
  }
  .olsp-coffee-product__info .olsp-coffee-price {text-align:center;}
  .olsp-coffee-product__info .olsp-coffee-cta {text-align:center;}

} /* @media only screen and (max-width:768px) */