@charset "UTF-8";

/* ==========================================================================
   佐賀の酒蔵特集 (/feature/saga-sakagura)
   Figma: 玉屋特集ページ / 酒蔵特集 (SP 375px) ・酒蔵特集_pc (314:2981 / 1440px)
   テンプレート: app/template/default/Feature/pages/saga-sakagura.twig

   レスポンシブの考え方 (お酒特集 osake/css/style.css と同じ)
   - 375px で SP デザイン、1440px で PC デザインと一致させ、その間は幅に比例して連続的に変える。
   - 1 つの値は「SP の値 + (PC - SP) × var(--u)」で書く。--u は 375px で 0、1440px で 1px。
   - コンテンツ幅はサイトのヘッダーと同じ 1130px (Figma の PC は 1200px。2026-09-24 に狭めた)。
     Figma で 1200px 基準の寸法は 1130/1200 倍にして、1440px のときの値にしている。
   - 1440px より広いときは PC の値のまま、コンテンツ幅 1130px で中央寄せ。
   - 375px より狭いときは SP の値のまま (画像は幅に合わせて縮める)。
   - 酒蔵カードの枠は 375px → 767px で消していく (--v)。
   - 切り替えにしかできないもの (矢印・ドットをボタンの上へ移す) だけ 768px で切り替える。
   ========================================================================== */

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

  --skg-navy: #3e495a;          /* 濃色ブロック・カード枠・ボタン */
  --skg-text: #333;             /* 見出し・蔵名・蔵見学 */
  --skg-text-body: #0f1116;     /* カード本文 */
  --skg-text-lead: #000;        /* リード文・注記 */
  --skg-dot: #d9d9d9;           /* ドット・押せない矢印 */
  --skg-white: #fff;

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

  --skg-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");
  --skg-chevron-thin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 12'%3E%3Cpath d='M0.5 0.5L5.5 6L0.5 11.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --skg-chevron-24: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18L15 12L9 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

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

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

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

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

  /* 375px で 0、1440px で 1px */
  --u: clamp(0px, calc((100cqw - 375px) / 1065), 1px);
  /* 375px で 0、767px で 1px (酒蔵カードの枠を消していくのに使う) */
  --v: clamp(0px, calc((100cqw - 375px) / 392), 1px);
  /* 左右余白: 375px で 20px → 1440px で 155px。それより広いとコンテンツ 1130px で中央寄せ */
  --pad: max(calc(20px + 135 * var(--u)), calc((100cqw - 1130px) / 2));

  width: 100%;
  /* 見出し脇のアイコンがはみ出すので、Figma のフレームと同じように切り落とす */
  overflow-x: clip;
  background: var(--skg-white);
  color: var(--skg-text);
  font-family: var(--skg-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
}

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

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

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

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

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

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

/* 見出し 24px → 40px (リード・エリア・締め)。
   PC の Figma は行高 36px だが、そのままだと折り返したときに行が重なる。
   行高を 36px → 56px に広げ、広げた分 (最大 20px) を上下の負のマージンで打ち消して、1 行のときの位置を合わせる。
   見出しの親は上下 padding を持つか、フレックスアイテムの中にあるので、負のマージンが外へ抜けない前提 */
.skg-intro__title,
.skg-area__title,
.skg-closing__title {
  margin-block: calc(-10 * var(--u));
  font-family: var(--skg-serif);
  font-weight: 500;
  font-size: calc(24px + 16 * var(--u));
  line-height: calc(36px + 20 * var(--u));
}

/* --------------------------------------------------------------------------
   ヒーロー (Figma SP 375x375 / PC 308:2686 1440x600)
   -------------------------------------------------------------------------- */

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

/* 写真は SP・PC とも同じ 1 枚。PC は下寄りを切り抜いている */
.skg-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 71%;
}

/* 写真の上に 30% の黒を重ねる */
.skg-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .3);
}

.skg-hero__title {
  position: static;
}

/* ロゴ: SP 355px → PC 809px。上端は SP・PC とも 98px、左右中央 */
.skg-hero__logo {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: min(calc(100cqw * .26133), 98px);
  width: min(calc(100cqw * .94667), calc(355px + 454 * var(--u)));
  max-width: none;
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   リード (Figma SP / PC section1)
   -------------------------------------------------------------------------- */

.skg-intro {
  position: relative;
  padding: calc(32px + 63 * var(--u)) var(--pad) 0;
}

.skg-intro__head {
  position: relative;
}

.skg-intro__title {
  position: relative;
  z-index: 1;
  color: var(--skg-text);
}

/* 見出しの右上に重なる酒蔵のアイコン (SP 175x137 / PC 308:2699 293x229・不透明度15%)。
   見出しの文字の上端から SP -34px / PC -106px。見出しの負のマージンでこの箱ごと 10px 上がるので、その分を足している。
   PC の左端は、コンテンツ幅を狭めた 70px だけ Figma (1043px) より左に寄せている */
.skg-intro__deco {
  position: absolute;
  left: calc(190px + 783 * var(--u));
  top: calc(-34px - 62 * var(--u));
  width: calc(175px + 118 * var(--u));
  max-width: none;
  opacity: .15;
  pointer-events: none;
}

.skg-intro__body {
  position: relative;
  z-index: 1; /* アイコンより前に出して本文を読めるようにする */
  margin-top: calc(32px + 36 * var(--u));
  color: var(--skg-text-lead);
}

.skg-intro__body p + p {
  margin-top: 26px; /* Figma は段落間に空行 1 行 */
}

.skg-intro__note {
  position: relative;
  z-index: 1;
  margin-top: calc(37px - 19 * var(--u));
  font-size: 13px;
  line-height: 26px;
  color: var(--skg-text-lead);
}

/* --------------------------------------------------------------------------
   エリア目次 (Figma SP / PC section1)
   -------------------------------------------------------------------------- */

.skg-toc {
  position: relative;
  padding: calc(57px + 27 * var(--u)) var(--pad) 0;
}

/* 目次見出し 24px → 32px (行高の考え方はほかの見出しと同じ) */
.skg-toc__title {
  margin-block: calc(-4.4 * var(--u));
  font-family: var(--skg-serif);
  font-weight: 500;
  font-size: calc(24px + 8 * var(--u));
  line-height: calc(36px + 8.8 * var(--u));
  color: var(--skg-text);
}

/* 目次の右の県地図 (PC 308:2719 375px・不透明度15%)。
   目次 (最大 691px) の右 86px から置き、幅が足りないぶんだけ小さくする。余裕がなければ出ない */
.skg-toc__map {
  position: absolute;
  top: calc(57px + 27 * var(--u));
  left: calc(var(--pad) + min(100cqw - 2 * var(--pad), 691px) + 86px);
  /* 幅 0 のときは見えない */
  width: min(375px, max(0px, calc(100cqw - 2 * var(--pad) - 777px)));
  max-width: none;
  opacity: .15;
  pointer-events: none;
}

.skg-toc__list {
  position: relative;
  max-width: 691px;
  margin-top: calc(22px + 28 * var(--u));
}

/* 行の間隔: SP 44px → PC 48px (リンク 36px + 下線 (0.5px 指定で 1px に描画される)) */
.skg-toc__item + .skg-toc__item {
  margin-top: calc(7px + 4 * var(--u));
}

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

/* 6x12 の山括弧。線の右端から SP 18px → PC 35.5px 内側 */
.skg-toc__link::after {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 12px;
  margin-right: calc(18px + 17.5 * var(--u));
  background: var(--skg-navy);
  -webkit-mask: var(--skg-chevron-thin) no-repeat center / contain;
  mask: var(--skg-chevron-thin) no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   エリアセクション (Figma SP / PC section2〜7)
   -------------------------------------------------------------------------- */

.skg-area {
  margin-top: calc(49px + 45 * var(--u));
}

/* 目次の最後の線から SP 41px → PC 97px。
   SP の Figma は線の位置が実装と 1px ずれるので、その分を引いている */
.skg-toc + .skg-area {
  margin-top: calc(40px + 57 * var(--u));
}

/* 濃色の説明ブロック (全幅)。
   PC は左に見出し・説明文 (最大 496px)、右に地図の白い箱 (最大 541x377) を並べる。間隔は 93px (496 + 93 + 541 = 1130)。
   Figma (527 + 99 + 574 = 1200) を 1130/1200 倍にしている。
   説明文の列が 400px 取れない幅 (約 1270px 未満) では地図が説明文の下に回り、中央に置かれる。
   400px は「02 伊万里・有田エリア」が 1 行に収まる幅 */
.skg-area__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 58px 93px;
  padding:
    calc(31px + 33 * var(--u))
    var(--pad)
    calc(33px + 61 * var(--u));
  background: var(--skg-navy);
  color: var(--skg-white);
}

.skg-area__intro {
  flex: 1 1 400px;
  max-width: 496px;
}

.skg-area__text {
  margin-top: 32px;
  font-size: 16px;
  line-height: 26px;
}

/* 地図の白い箱: SP 335px 角 → PC 541x377。幅は余白があれば 541px まで広がる */
.skg-area__map {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: min(100%, calc(335px + 206 * var(--u)));
  max-width: 541px;
  margin-inline: auto;
  height: min(calc(100cqw - 40px), calc(335px + 42 * var(--u)));
  background: var(--skg-white);
}

/* 地図: SP 335px → PC 347px。PC は箱の中央から右に 14px・下に 3px ずらしている */
.skg-area__map img {
  position: relative;
  left: calc(14 * var(--u));
  top: calc(3 * var(--u));
  width: min(100%, calc(335px + 12 * var(--u)));
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   酒蔵カード (カルーセル)
   SP は枠つきのカード (正方形の画像)、PC は枠なし (1130x408 の画像。Figma は 1200x433)。
   「この酒蔵のおすすめ」ボタン (.skg-card__link) は全蔵に出す (リンク先は蔵名での商品検索結果)。
   - ボタンなし: カードの下に矢印とドット (SP・PC とも)
   - ボタンあり: Figma どおり SP はボタンの下、PC (768px 以上) は蔵見学とボタンの間に矢印とドット
   -------------------------------------------------------------------------- */

.skg-kura {
  padding-top: calc(48px + 47 * var(--u));
}

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

.skg-kura__track::-webkit-scrollbar {
  display: none;
}

.skg-kura__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  /* SP はカードの左右 22px。PC は透明になった枠線 1px の分だけ外に出して、画像をコンテンツ幅 1130px にそろえる */
  padding-inline: calc(var(--pad) + 2px - 2 * var(--u) - 1 * var(--v));
}

.skg-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 枠と内側の余白は 767px までに消す。
   下余白は、ボタンなしでは枠の内側の余白 (SP 37px → 767px で 0)。
   ボタンありでは蔵見学→ボタンの間隔 (枠線 1px 込みで SP 38px → PC 64px) */
.skg-card__body {
  flex: 1 1 auto;
  padding:
    calc(17px - 17 * var(--v))
    calc(18px - 18 * var(--v))
    calc(37px - 37 * var(--v));
  border: 1px solid var(--skg-navy);
  background: var(--skg-white);
}

@supports (width: calc(1px * tan(atan2(1px, 1px)))) {
  .skg-card__body {
    border-color: color-mix(in srgb, var(--skg-navy), transparent calc(100% * tan(atan2(var(--v), 1px))));
  }
}

@supports not (width: calc(1px * tan(atan2(1px, 1px)))) {
  @media (min-width: 768px) {
    .skg-card__body {
      border-color: transparent;
    }
  }
}

/* 画像: SP 292px 角 → PC 1130x408。元画像は横長で、--pos に SP の左右位置と PC の上下位置を持たせている */
.skg-card__photo img {
  width: 100%;
  height: min(calc(100cqw - 82px), calc(292px + 116 * var(--u)));
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  background: var(--skg-dot);
}

.skg-card__name {
  margin-top: calc(15px + 25 * var(--u));
  padding-inline: calc(4px - 4 * var(--u)); /* SP は画像より 4px 内側 */
  font-size: calc(24px + 8 * var(--u));
  line-height: 36px;
  font-weight: 500;
  color: var(--skg-text);
}

/* 本文は SP 5 行・PC 2 行分の高さを取り、蔵ごとに文章量が違っても蔵見学の位置をそろえる */
.skg-card__text {
  min-height: calc(130px - 78 * var(--u));
  margin-top: calc(3px + 13 * var(--u));
  padding-inline: calc(4px - 4 * var(--u));
  font-size: 16px;
  line-height: 26px;
  color: var(--skg-text-body);
}

.skg-card__visit {
  margin-top: calc(24px + 4 * var(--u));
  padding-inline: calc(4px - 4 * var(--u));
  font-size: 16px;
  line-height: 26px;
  color: var(--skg-text);
}

.skg-card:has(.skg-card__link) .skg-card__body {
  padding-bottom: calc(37px + 27 * var(--u) - 1 * var(--v));
}

/* ボタン: 375px まではカードと同じ幅、それより広い幅では 328px で中央寄せ。高さ 44px → 52px */
.skg-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16px + 13 * var(--u));
  width: min(100%, max(328px, calc(100% - 100000 * var(--v))));
  height: calc(44px + 8 * var(--u));
  margin-inline: auto;
  background: var(--skg-navy);
  color: var(--skg-white);
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
}

.skg-card__chevron {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--skg-chevron-24) no-repeat center / contain;
  mask: var(--skg-chevron-24) no-repeat center / contain;
}

/* 矢印 + ドットの行。カードが 1 枚のときは JS が hidden のままにする。
   カードの下端から: ドットまで SP 27px。PC は蔵見学から矢印まで 36px (Figma) になるよう、
   枠の内側の余白が 0 になるぶん上の余白を 9px → 21.5px に広げる */
.skg-kura__nav:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12px + 8.85 * var(--u));
  margin-top: calc(9px + 12.5 * var(--u));
  /* 次のエリアまでの間隔を矢印・ドットの見た目の下端から測るため、
     箱 (44px) と見た目 (SP ドット 8px → PC 矢印 17px) の差の半分を打ち消す */
  margin-bottom: calc(-18px + 4.5 * var(--u));
}

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

.skg-kura__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(--skg-chevron) no-repeat center / 100% 100%;
  mask: var(--skg-chevron) no-repeat center / 100% 100%;
}

.skg-kura__arrow--prev::before {
  transform: scaleX(-1);
}

.skg-kura__arrow:disabled {
  color: var(--skg-dot);
  cursor: default;
}

/* ドット: 8px → 9.71px */
.skg-kura__dots {
  display: flex;
  justify-content: center;
  gap: calc(8px + 1.71 * var(--u));
  min-height: 8px;
}

.skg-kura__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(--skg-dot);
  cursor: pointer;
  transition: background-color .2s;
}

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

/* ボタンありのとき、SP は矢印・ドットをボタンの下 27px に置く */
.skg-kura:has(.skg-card__link) .skg-kura__nav:not([hidden]) {
  margin-top: 9px;
  margin-bottom: -18px;
}

/* ボタンありの PC: 矢印とドットを蔵見学とボタンの間に置く。
   カードの下余白を 53px (蔵見学→矢印 36px + 矢印の高さ 17px) 増やし、その位置に重ねる */
@media (min-width: 768px) {
  .skg-kura:has(.skg-card__link) {
    position: relative;
  }

  .skg-kura[data-carousel-multi]:has(.skg-card__link) .skg-card__body {
    padding-bottom: calc(37px + 27 * var(--u) - 1 * var(--v) + 53px);
  }

  .skg-kura:has(.skg-card__link) .skg-kura__nav:not([hidden]) {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    /* ボタンの高さ + ボタンまでの余白 (枠線 1px 込み) - 矢印の上下の余り (44 - 17) / 2 */
    bottom: calc(44px + 8 * var(--u) + 38px + 27 * var(--u) - 1 * var(--v) - 13.5px);
    margin: 0;
  }
}

/* --------------------------------------------------------------------------
   締め (Figma SP / PC section8)
   -------------------------------------------------------------------------- */

.skg-closing {
  margin-top: calc(51px + 67 * var(--u));
  padding:
    calc(33px + 31 * var(--u))
    var(--pad)
    calc(51px + 7 * var(--u))
    calc(var(--pad) + 7 * var(--u));
  background: var(--skg-navy);
  color: var(--skg-white);
}

.skg-closing__text {
  max-width: calc(337px + 325 * var(--u));
  margin-top: calc(30px + 2 * var(--u));
  font-size: 16px;
  line-height: 26px;
}

/* SP の見出しの改行は、幅が広がって 1 行に収まるようになったら外す */
@media (min-width: 420px) {
  .skg-sp-only {
    display: none;
  }
}

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

@media print {
  .skg-kura__track {
    overflow: visible;
  }

  .skg-kura__nav {
    display: none;
  }
}