@charset "UTF-8";

/* ==========================================================================
   佐賀の酒特集 (/feature/saga-sake)
   Figma: 玉屋特集ページ / 酒特集_sp (263:479) 375px・酒特集_pc (308:2967) 1440px
   テンプレート: app/template/default/Feature/pages/saga-sake.twig

   レスポンシブの考え方
   - 375px で SP デザイン、1440px で PC デザインと一致させ、その間は幅に比例して連続的に変える。
   - 1 つの値は「SP の値 + (PC - SP) × var(--u)」で書く。--u は 375px で 0、1440px で 1px。
     例: 見出し 24px → 40px は calc(24px + 16 * var(--u))
   - コンテンツ幅はサイトのヘッダーと同じ 1130px (Figma の PC は 1200px。2026-09-24 に狭めた)。
     Figma で 1200px 基準の寸法は 1130/1200 倍にして、1440px のときの値にしている。
   - 1440px より広いときは PC の値のまま、コンテンツ幅 1130px で中央寄せ。
   - 375px より狭いときは SP の値のまま (画像は幅に合わせて縮める)。
   - 切り替えにしかできないもの (背景色・書体・文字揃え) だけ 768px で切り替える。
   ========================================================================== */

/* 色・書体・アイコンの変数。サイト共通のヘッダー・フッターに影響しないよう .osk の中だけで定義する */
.osk {

  --osk-navy: #3e495a;          /* ボタン */
  --osk-gold: #bf8f51;          /* セクション区切り */
  --osk-gold-button: #b59648;   /* ご注文とお届けの英字・ボタン */
  --osk-gray-bg: #f5f5f5;       /* 03 (SP では 01 も) の背景 */
  --osk-text: #333;
  --osk-text-dark: #0f1116;
  --osk-rule: #747474;
  --osk-track: #d9d9d9;         /* 味わいゲージの地・ドット */
  --osk-fill: #acacac;          /* 味わいゲージの塗り */
  --osk-white: #fff;

  --osk-serif: "Noto Serif JP", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  --osk-sans: "游ゴシック体", YuGothic, "Yu Gothic Medium", "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "Noto Sans JP", sans-serif;

  --osk-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1 13L7 7L1 1' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --osk-chevron-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 13'%3E%3Cpath d='M0.5 12.5L6.5 6.5L0.5 0.5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --osk-chevron-mid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.5 13.5'%3E%3Cpath d='M0.75 12.75L6.75 6.75L0.75 0.75' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   EC-CUBE との統合
   -------------------------------------------------------------------------- */

/* メイン領域の幅制限 (max-width: 1150px) と上余白 (15px) を外す。
   .osk は自身の幅で SP→PC を計算するので、画面幅いっぱいに置く必要がある。
   body の feature-custom は Feature/page.twig が custom ページで付ける */
.feature-custom .ec-layoutRole .ec-layoutRole__contents {
  max-width: none;
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   土台
   -------------------------------------------------------------------------- */

.osk {
  /* 幅の基準は .osk 自身の幅 (100cqw)。スクロールバーや EC-CUBE の枠の影響を受けない */
  container-type: inline-size;

  /* 375px で 0、1440px で 1px。子要素で var() を使ったときに .osk の幅で計算される */
  --u: clamp(0px, calc((100cqw - 375px) / 1065), 1px);
  /* 左右余白: 375px で 16px → 1440px で 155px。それより広いとコンテンツ 1130px で中央寄せ */
  --pad: max(calc(16px + 139 * var(--u)), calc((100cqw - 1130px) / 2));

  width: 100%;
  /* 装飾の稲穂・米粒がはみ出すので、Figma のフレームと同じように切り落とす */
  overflow-x: clip;
  background: var(--osk-white);
  color: var(--osk-text);
  font-family: var(--osk-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

.osk *,
.osk *::before,
.osk *::after {
  box-sizing: border-box;
}

/* :where() で詳細度を 0 にして、下の個別指定が確実に勝つようにする */
.osk :where(h1, h2, h3, p, ul, ol, li, figure) {
  margin: 0;
  padding: 0;
}

.osk :where(ul, ol) {
  list-style: none;
}

.osk :where(img) {
  display: block;
  max-width: 100%;
  height: auto;
}

.osk :where(a) {
  color: inherit;
  text-decoration: none;
}

/* サイト共通CSS (Bootstrap の a:hover / a:focus) の色・下線を打ち消す */
.osk a:hover,
.osk a:focus {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   共通パーツ
   -------------------------------------------------------------------------- */

/* 見出し 24px → 40px。
   PC の Figma は行高 36px だが、そのままだと折り返したときに行が重なる。
   行高を 36px → 56px に広げ、広げた分 (最大 20px) を上下の負のマージンで打ち消して、1 行のときの位置を合わせる。
   見出しの親には必ず上下 padding があるので、負のマージンが外へ抜けない前提。
   padding のない入れ物に入れると見出しがずれるので注意 */
.osk-heading {
  margin-block: calc(-10 * var(--u));
  font-family: var(--osk-serif);
  font-weight: 500;
  font-size: calc(24px + 16 * var(--u));
  line-height: calc(36px + 20 * var(--u));
  color: var(--osk-text);
}

.osk-heading--dark {
  color: var(--osk-text-dark);
}

.osk-text {
  font-size: 16px;
  line-height: 26px;
  color: var(--osk-text);
}

.osk-text--dark {
  color: var(--osk-text-dark);
}

/* 写真: SP 343x229 → PC 1130x408 (Figma は 1200x433)。高さを幅と別に変えて、横長の比率へ連続的に近づける。
   375px 未満は SP の比率のまま縮める */
.osk-photo img {
  width: 100%;
  height: min(calc((100cqw - 32px) * .6676), calc(229px + 179 * var(--u)));
  object-fit: cover;
}

/* 田んぼの写真は SP・PC とも下寄りを切り抜いている (Figma の切り抜き位置) */
.osk-photo__rice {
  object-position: 52% 74%;
}

/* 金の区切り線 (Figma Group 213 ほか)。背景の切り替わり位置に重ねる */
.osk-divider {
  --gap: calc(15.5px + 6.5 * var(--u));   /* 中央の空き 31px → 44px の半分 */
  position: relative;
  z-index: 2;
  height: 0;
}

.osk-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -.5px;
  height: 1px;
  background: linear-gradient(to right,
    var(--osk-gold) 0 calc(50% - var(--gap)),
    transparent calc(50% - var(--gap)) calc(50% + var(--gap)),
    var(--osk-gold) calc(50% + var(--gap)) 100%);
}

/* 中央の菱形 16.7x15.56 → 26.22x24.43 */
.osk-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(16.7px + 9.52 * var(--u));
  height: calc(15.56px + 8.87 * var(--u));
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.7 15.56'%3E%3Cg fill='%23bf8f51'%3E%3Cpath d='M8.35 0L12.15 3.54L8.35 7.07L4.56 3.54Z'/%3E%3Cpath d='M3.8 4.24L7.59 7.78L3.8 11.31L0 7.78Z'/%3E%3Cpath d='M12.9 4.24L16.7 7.78L12.9 11.31L9.11 7.78Z'/%3E%3Cpath d='M8.35 8.49L12.15 12.02L8.35 15.56L4.56 12.02Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   FV (Figma SP 243:32 375x375 / PC 304:306 1440x600)
   背景・ロゴ・瓶を重ねる。ロゴと瓶は SP と PC で縮尺が違うので、それぞれ別に大きさを変える
   -------------------------------------------------------------------------- */

.osk-fv {
  position: relative;
  /* 375px 以下は正方形。そこから 1440px で 600px まで高くなる */
  height: min(100cqw, calc(375px + 225 * var(--u)));
  overflow: hidden;
  background: #0d1a3a;
}

/* 背景: PC は横いっぱいで上下中央、SP は右寄りを切り抜いている */
.osk-fv__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 50%;
}

.osk-fv__title {
  position: static;
}

/* ロゴ: SP 333px (上端 0・中央から 4px 左) → PC 689px (上に 13px はみ出し・中央から 12.5px 左) */
.osk-fv__logo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(-13 * var(--u));
  width: min(calc(100cqw * .888), calc(333px + 356 * var(--u)));
  max-width: none;
  transform: translateX(calc(-50% - 4px - 8.5 * var(--u)));
}

/* 瓶 5 本と影 (1 枚に合成): SP 309px (下端から 37.8px) → PC 510px (下端から 31px) */
.osk-fv__bottles {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: min(calc(100cqw * .1009), calc(37.84px - 6.84 * var(--u)));
  width: min(calc(100cqw * .824), calc(309px + 201 * var(--u)));
  max-width: none;
  transform: translateX(calc(-50% - 1.2px - 9.8 * var(--u)));
}

/* --------------------------------------------------------------------------
   佐賀の酒の世界 / 佐賀の酒ガイド (Figma SP section1 / PC section1)
   -------------------------------------------------------------------------- */

.osk-intro {
  position: relative;
  /* 下余白: 目次の行は 36px + 線で組んでいて Figma(線は文字上端+34px) より高い分を引いている */
  padding:
    calc(40px + 55 * var(--u))
    var(--pad)
    calc(67px + 39.5 * var(--u));
}

.osk-intro > :not(img) {
  position: relative;
  z-index: 1;
}

/* 見出し右上の米粒 (SP 243:4221 153px / PC 304:124 220px・不透明度20%)。
   PC の左端は、コンテンツ幅を狭めた 70px だけ Figma より左に寄せている */
.osk-intro__grains {
  position: absolute;
  top: calc(7px + 15 * var(--u));
  left: calc(var(--pad) + 218px + 707 * var(--u));
  width: calc(153px + 67 * var(--u));
  max-width: none;
  opacity: .2;
  pointer-events: none;
}

/* 目次右下の稲穂 (SP 243:4223 / PC 304:125 を回転・反転・不透明度15%)。
   目次の下端に合わせるため、セクションの下端から位置を決める。PC の左端は米粒と同じく 70px 左に寄せている */
.osk-intro__ear {
  position: absolute;
  bottom: calc(-2.7px + .7 * var(--u));
  left: calc(var(--pad) + 237.5px + 690.7 * var(--u));
  width: calc(107.1px + 48.02 * var(--u));
  max-width: none;
  opacity: .15;
  transform: rotate(-159.78deg) scaleY(-1);
  pointer-events: none;
}

/* SP (幅 337px) だけ幅を詰めている。375px 以下でだけ 337px、それより広いと制限なし
   (--u が 0 より大きくなった時点で max-width が十分大きくなる) */
.osk-intro__lead {
  max-width: calc(337px + 100000 * var(--u));
  margin-top: calc(32px + 36 * var(--u));
}

.osk-toc {
  margin-top: calc(40px + 72 * var(--u));
}

/* 目次見出し 24px → 32px (行高の考え方は .osk-heading と同じ) */
.osk-toc__title {
  display: flex;
  align-items: center;
  gap: calc(11px - 4 * var(--u));
  margin-block: calc(-4.4 * var(--u));
  font-size: calc(24px + 8 * var(--u));
  line-height: calc(36px + 8.8 * var(--u));
}

/* 見出し右の家紋 (Figma 58x39・不透明度15%) */
.osk-toc__kamon {
  flex: 0 0 auto;
  width: 58px;
  margin-block: -1.5px; /* 高さ39pxを見出しの行高36pxに収める */
  opacity: .15;
}

/* 目次の幅は Figma (951px) からコンテンツ幅を狭めた 70px を引いている */
.osk-toc__list {
  max-width: 881px;
  margin-top: 22px;
}

.osk-toc__list li + li {
  margin-top: calc(8px + 2.5 * var(--u));
}

.osk-toc__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding-left: 2px;
  border-bottom: .5px solid var(--osk-text);
  font-family: var(--osk-serif);
  font-weight: 500;
  font-size: 16px;
  line-height: 36px;
  color: var(--osk-text);
}

.osk-toc__link::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 13px;
  margin-right: calc(13.5px + 21.5 * var(--u));
  background: var(--osk-text);
  -webkit-mask: var(--osk-chevron-thin) no-repeat center / contain;
  mask: var(--osk-chevron-thin) no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   01 佐賀の酒とは (Figma SP section2 グレー地 / PC section2 白地)
   -------------------------------------------------------------------------- */

.osk-about {
  padding:
    calc(32px + 76 * var(--u))
    var(--pad)
    calc(33px + 69 * var(--u));
  background: var(--osk-gray-bg);
}

/* 背景を SP のグレーから PC の白へ、幅に応じて薄くする。
   tan(atan2(長さ, 1px)) で長さを数値 (0〜1) に変換している。未対応のブラウザは 768px で切り替える (下の @supports not) */
@supports (width: calc(1px * tan(atan2(1px, 1px)))) {
  .osk-about {
    background: color-mix(in srgb, var(--osk-gray-bg), var(--osk-white) calc(100% * tan(atan2(var(--u), 1px))));
  }
}

.osk-about .osk-photo {
  margin-top: calc(32px + 37 * var(--u));
}

.osk-about .osk-text {
  margin-top: calc(32px + 34 * var(--u));
}

/* --------------------------------------------------------------------------
   02 なぜ、佐賀の酒はおいしい？ (Figma SP Group 317 / PC section3)
   -------------------------------------------------------------------------- */

.osk-reason {
  padding:
    calc(48px + 59 * var(--u))
    var(--pad)
    calc(32px + 67.5 * var(--u));
}

/* SP の Figma は 1 行 (幅345px) で左右余白に 2px はみ出している。375px 前後では折り返さないようにする */
@media (min-width: 360px) and (max-width: 419px) {
  .osk-reason > .osk-heading {
    margin-right: -8px;
    white-space: nowrap;
  }
}

.osk-reason > .osk-text {
  margin-top: calc(32px + 34 * var(--u));
}

.osk-slider {
  margin-top: calc(32px + 27 * var(--u));
}

.osk-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.osk-slider__track::-webkit-scrollbar {
  display: none;
}

.osk-slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.osk-slider__title {
  margin-top: calc(24px + 32 * var(--u));
  font-family: var(--osk-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 36px;
  color: #000;
}

.osk-slider__text {
  margin-top: calc(24px + 8 * var(--u));
}

/* 矢印 + ドット (Figma SP Group 206/215 / PC Group 286)。スライドが 1 枚のときは JS が hidden のままにする。
   ドット(8px)が矢印(44px)の中央に来るので、Figma のドット位置から 18px 引いている */
.osk-slider__nav:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(21px + 11 * var(--u));
  margin-top: calc(6px + 38.5 * var(--u));
}

.osk-slider__arrow {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--osk-navy);
  cursor: pointer;
}

.osk-slider__arrow::before {
  content: "";
  display: block;
  width: calc(8px + 1.7 * var(--u));
  height: calc(14px + 3 * var(--u));
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: var(--osk-chevron) no-repeat center / contain;
  mask: var(--osk-chevron) no-repeat center / contain;
}

.osk-slider__arrow--prev::before {
  transform: scaleX(-1);
}

.osk-slider__arrow:disabled {
  color: var(--osk-track);
  cursor: default;
}

.osk-slider__dots {
  display: flex;
  gap: calc(8px + 1.71 * var(--u));
}

.osk-slider__dot {
  display: block;
  width: calc(8px + 1.71 * var(--u));
  height: calc(8px + 1.71 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--osk-track);
  cursor: pointer;
  transition: background-color .2s;
}

.osk-slider__dot[aria-current="true"] {
  background: var(--osk-navy);
}

/* --------------------------------------------------------------------------
   03 人気！佐賀で有名な酒を選ぶならコレ！ (Figma SP section4 / PC section4)
   -------------------------------------------------------------------------- */

.osk-picks {
  padding:
    calc(41px + 38 * var(--u))
    var(--pad)
    calc(48px + 32 * var(--u));
  background: var(--osk-gray-bg);
}

.osk-picks > .osk-text {
  margin-top: calc(32px + 34 * var(--u));
}

/* 筆の波線 (SP 257:4801 196.5x18・中央から 4px 左 / PC 304:275 306.9x28・中央)。
   SVG は線の太さぶん枠より上下にはみ出すので、その分を余白から引いている */
.osk-picks__wave {
  position: relative;
  left: calc(-4px + 4 * var(--u));
  width: calc(196.5px + 110.45 * var(--u));
  margin: calc(60.9px - 2.62 * var(--u)) auto 0;
}

/* 商品カード (343px) を入るだけ並べる。375px で 1 列、約 720px から 2 列、約 1140px から 3 列。
   列の間隔は 32px。3 列が入る幅になったら、余った幅を間隔に回して広げる (上限 80px は PC の Figma の値。
   コンテンツ幅 1130px では 50.5px まで) */
.osk-picks__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 343px), 343px));
  justify-content: center;
  column-gap: clamp(32px, calc((100% - 1029px) / 2), 80px);
  row-gap: calc(48px + 32 * var(--u));
  margin-top: calc(61.06px + .48 * var(--u));
}

.osk-pick {
  display: flex;
  flex-direction: column;
}

.osk-pick__title {
  font-family: var(--osk-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
  color: var(--osk-text);
}

/* 説明文は 3 行分の高さを取り、並んだカードの上端をそろえる */
.osk-pick__lead {
  min-height: 78px;
  margin-top: 24px;
}

/* 商品カード (Figma 343x505 + ボタン 44 → 52) */
.osk-item {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  margin-top: calc(32px - 8 * var(--u));
}

.osk-item__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 505px;
  padding: 17px 25px 22px;
  background: var(--osk-white);
}

.osk-item__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #ededed;
}

.osk-item__name {
  margin-top: 21px;
  /* 3 行になる商品でもゲージとの間を最低 10px 空ける (Figma の天吹・古伊万里) */
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 36px;
  color: #000;
}

/* 味わいゲージ。ゲージはカード下端から位置を決める (Figma は 2 行の商品名で名前との間が 35px) */
.osk-taste {
  margin-top: auto;
  padding: 0 8px 0 6px;
}

.osk-taste__bar {
  display: block;
  height: 5px;
  background: linear-gradient(to right,
    var(--osk-fill) 0 calc(var(--taste, .5) * 100%),
    var(--osk-track) calc(var(--taste, .5) * 100%) 100%);
}

.osk-taste__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  font-size: 16px;
  line-height: 36px;
  color: #000;
}

.osk-item__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: calc(44px + 8 * var(--u));
  background: var(--osk-navy);
  color: var(--osk-white);
  font-family: var(--osk-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 36px;
}

.osk-item__link::after {
  content: "";
  flex: 0 0 auto;
  width: 7.5px;
  height: 13.5px;
  background: currentColor;
  -webkit-mask: var(--osk-chevron-mid) no-repeat center / contain;
  mask: var(--osk-chevron-mid) no-repeat center / contain;
}

/* PC はグレー地の下を白地で 109px 空けて区切り線 (SP は空けない) */
.osk-picks + .osk-divider {
  margin-top: calc(109 * var(--u));
}

/* --------------------------------------------------------------------------
   佐賀の有名酒蔵紹介 (Figma SP section5 375x375 全幅 / PC section6 1200x433 → 実装は 1130x408)
   -------------------------------------------------------------------------- */

.osk-kura {
  padding:
    calc(56px + 27 * var(--u))
    var(--pad)
    calc(96 * var(--u));
}

/* 酒蔵特集のヒーローを流用したバナー。全体をリンクにする。
   SP は左右余白を打ち消して全幅、PC はコンテンツ幅 */
.osk-kura__banner {
  position: relative;
  display: block;
  height: min(100cqw, calc(375px + 33 * var(--u)));
  margin: calc(24px + 46 * var(--u)) calc(-16px + 16 * var(--u)) 0;
  overflow: hidden;
  background: var(--osk-navy);
}

/* 写真は SP・PC とも同じ 1 枚。SP は左右中央、PC は下寄りを切り抜いている */
.osk-kura__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 75%;
}

.osk-kura__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .3);
}

/* ロゴ: SP 355px (上から 67px) → PC 672px (上に 23px はみ出し。はみ出し部分は透明)。PC は Figma (714px・24px) の 1130/1200 倍 */
.osk-kura__logo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: min(calc(100cqw * .17867), calc(67px - 90 * var(--u)));
  width: min(calc(100cqw * .94667), calc(355px + 317 * var(--u)));
  max-width: none;
  transform: translateX(calc(-50% - 3px + 3 * var(--u)));
}

/* ボタン: SP 296px (上から 272px) → PC 615px (上から 314px)。PC は Figma (653px・333px) の 1130/1200 倍 */
.osk-kura__button {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: min(calc(100cqw * .72533), calc(272px + 42 * var(--u)));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16px - 2 * var(--u));
  width: min(calc(100cqw * .78933), calc(296px + 319 * var(--u)));
  height: 44px;
  transform: translateX(calc(-50% - .5px + .5 * var(--u)));
  background: var(--osk-navy);
  box-shadow: 4px 4px 0 rgba(255, 255, 255, .25);
  color: var(--osk-white);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
}

.osk-kura__button::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--osk-chevron) no-repeat center / 100% 100%;
  mask: var(--osk-chevron) no-repeat center / 100% 100%;
}

/* --------------------------------------------------------------------------
   ご注文とお届け / ギフトラッピング (Figma SP section6 / PC section7)
   -------------------------------------------------------------------------- */

.osk-guide {
  padding:
    calc(48px + 10 * var(--u))
    calc(var(--pad) + 9px - 9 * var(--u))
    calc(48px - 31 * var(--u))
    calc(var(--pad) + 12px - 12 * var(--u));
  background: #f7f5f1 url("../img/feature/saga-sake/texture.webp") center / cover;
}

.osk-guide__block + .osk-guide__block {
  margin-top: calc(36px + 18 * var(--u));
  padding-top: calc(48px + 15 * var(--u));
  border-top: .5px solid var(--osk-rule);
}

/* 見出し 24px → 40px。書体は 768px で游ゴシック Bold から明朝に切り替える */
.osk-guide__title {
  text-align: center;
  font-weight: 700;
  font-size: calc(24px + 16 * var(--u));
  line-height: calc(36px + 21 * var(--u));
  color: var(--osk-text);
}

.osk-guide__en {
  display: block;
  margin-bottom: calc(1px + 7 * var(--u));
  font-family: var(--osk-sans);
  font-weight: 700;
  font-size: calc(12px + 4 * var(--u));
  line-height: calc(18px + 6 * var(--u));
  color: var(--osk-gold-button);
}

.osk-guide__text {
  max-width: 961px;
  margin: calc(48px + 10 * var(--u)) auto 0;
  font-size: 16px;
  line-height: calc(26px + 10 * var(--u));
  color: var(--osk-text);
}

/* PC の Figma はギフトラッピングだけ見出しと本文の間が 52px */
.osk-guide__block + .osk-guide__block .osk-guide__text {
  margin-top: calc(48px + 4 * var(--u));
}

.osk-guide__underline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.osk-guide__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: min(100%, calc(320px + 637 * var(--u)));
  height: calc(44px + 15 * var(--u));
  margin: calc(36px + 30 * var(--u)) auto 0;
  background: var(--osk-gold-button);
  color: var(--osk-white);
  font-weight: 700;
  font-size: calc(16px + 4 * var(--u));
  line-height: calc(24px + 6 * var(--u));
}

.osk-guide__button::before,
.osk-guide__button::after {
  content: "";
  flex: 0 0 auto;
  background: currentColor;
}

.osk-guide__button::before {
  width: 24px;
  height: 24px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V22H4V12'/%3E%3Cpath d='M22 7H2V12H22V7Z'/%3E%3Cpath d='M12 22V7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7Z'/%3E%3Cpath d='M12 7H16.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V22H4V12'/%3E%3Cpath d='M22 7H2V12H22V7Z'/%3E%3Cpath d='M12 22V7'/%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7Z'/%3E%3Cpath d='M12 7H16.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.osk-guide__button::after {
  width: 8px;
  height: calc(14px + 2 * var(--u));
  -webkit-mask: var(--osk-chevron) no-repeat center / 100% 100%;
  mask: var(--osk-chevron) no-repeat center / 100% 100%;
}

/* --------------------------------------------------------------------------
   切り替えにしかできないもの
   -------------------------------------------------------------------------- */

/* SP のリード文の改行は、幅が広がって 1 行目に余裕が出たら外す */
@media (min-width: 420px) {
  .osk-sp-only {
    display: none;
  }
}

@supports not (width: calc(1px * tan(atan2(1px, 1px)))) {
  @media (min-width: 768px) {
    /* 01 は PC では白地 */
    .osk-about {
      background: transparent;
    }
  }
}

@media (min-width: 768px) {
  /* 03 の見出しは PC では濃い色 */
  .osk-picks > .osk-heading {
    color: var(--osk-text-dark);
  }

  /* ご注文とお届けは PC では明朝の見出し・中央揃えの本文 */
  .osk-guide__title {
    font-family: var(--osk-serif);
    font-weight: 500;
  }

  .osk-guide__text {
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   印刷
   -------------------------------------------------------------------------- */

@media print {
  .osk-slider__track {
    overflow: visible;
  }

  .osk-slider__nav {
    display: none;
  }
}