/* =========================================================
   SP Plan Co., Ltd. ? Landing Page Stylesheet
   Fonts   : Shippori Mincho (display) / Noto Serif JP (body)
   Palette : see :root variables below
========================================================= */

:root {
  --white:     #ffffff;
  --light:     #fff9f5;
  --dark:      #18192b;
  --primary:   #e6c85c;
  --secondary: #aa923c;
  --info:      #da6e2b;
  --accent1:   #674428;
  --accent2:   #74645a;
  --accent3:   #c4aea4;
  --success:   #4fb51d;
  --warning:   #fec65e;
  --danger:    #f80e5d;

  --font-display: "Shippori Mincho", "Noto Serif JP", serif;
  --font-body: "Noto Serif JP", "Shippori Mincho", serif;
  --font-latin: "Cormorant Garamond", "Shippori Mincho", serif;

  --container-w: 87%;
  --card-radius: 42px;
  --transition-slow: 900ms cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--light);
  color: var(--dark);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  width: var(--container-w);
  margin: 0 auto;
}

.section { padding: 7rem 0; }
.section--tight { padding: 4rem 0; }

.section-eyebrow {
  font-family: var(--font-latin);
  font-style: italic;
  letter-spacing: 0.25em;
  color: var(--secondary);
  font-size: 0.85rem;
  margin: 0 0 0.6rem;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 0 0 2.5rem;
  color: var(--accent1);
  position: relative;
  padding-bottom: 1.1rem;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 48px; height: 2px;
  background: var(--primary);
}

/* =========================================================
   HEADER
========================================================= */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500;
  background: var(--white);
  border-bottom: 1px solid var(--accent3);
}

.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 5%;
}

.logo { display: inline-flex; align-items: center; }
.logo-img {
  height: 34px;
  width: auto;
  display: block;
}

.gnav ul {
  display: flex;
  gap: 2.3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gnav a {
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  color: var(--dark);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  padding-bottom: 2px;
  transition: color .3s ease;
}

.star-sm {
  width: 11px; height: 11px;
  fill: var(--primary);
  flex-shrink: 0;
  transition: transform .4s ease, fill .3s ease;
}

.gnav a:hover { color: var(--info); }
.gnav a:hover .star-sm {
  fill: var(--info);
  transform: rotate(90deg) scale(1.3);
}

.gnav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1px;
  background: var(--info);
  transition: width .35s ease;
}
.gnav a:hover::after { width: 100%; }

/* Hamburger (mobile only) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 32px; height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent1);
  transition: all .35s ease;
}

.hamburger.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--dark);
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
.mobile-menu li { margin: 1.7rem 0; }
.mobile-menu a {
  font-family: var(--font-display);
  color: var(--light);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}
.mobile-menu .star-sm { fill: var(--primary); width: 13px; height: 13px; }

/* Header tagline */
.site-header .header-tagline {
  width: 100%;
  margin: 0;
  margin-bottom: 4px !important;
  padding: 7px 5% 4px;
  text-align: left !important;
  font-size: 68% !important;
  line-height: 1.5;
  letter-spacing: .04em;
  color: inherit;
  opacity: .88;
}

@media (max-width: 900px) {
  .site-header .header-tagline {
    padding: 6px 5% 3px;
    font-size: 68% !important;
    line-height: 1.45;
  }
}

/* =========================================================
   HERO / SLIDER
========================================================= */
.hero {
  padding: 3.2rem 0 3.6rem;
  background: var(--light);
  overflow: hidden;
}

.hero-inner {
  width: 87%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2.5rem;
  align-items: stretch;
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
}

.hero-eyebrow {
  font-family: var(--font-latin);
  font-style: italic;
  color: var(--secondary);
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  margin: 0;
}

.hero-catch {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  line-height: 1.55;
  color: var(--accent1);
  margin: 0;
}

.hero-lead {
  color: var(--accent2);
  font-size: 0.95rem;
  margin: 0 0 1rem;
}

.slide-caption {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  border-top: 1px solid var(--accent3);
  padding-top: 1.4rem;
  margin-top: 0.6rem;
  min-height: 130px;
}

.slide-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  color: var(--accent1);
  height: 130px;
}

.slide-catch {
  font-size: 0.86rem;
  color: var(--accent2);
  line-height: 1.9;
  padding-top: 0.3rem;
  transition: opacity .5s ease;
}

.hero-right { position: relative; min-height: 550px; }/*min-height: 680px*/

.slider-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 550px;/*min-height: 680px*/
}

.slide-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.4s ease;
  clip-path: url(#orgWindowA);
}
.slide-wrap.is-active { opacity: 1; }
.slide-wrap.shape-b { clip-path: url(#orgWindowB); }

.slide-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 外側は白、内側（写真）へ向かって透明になるフェード（強め） */
/*
.slide-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 249, 245, 0) 22%,
    rgba(255, 249, 245, 0.28) 48%,
    rgba(255, 249, 245, 0.62) 68%,
    rgba(255, 249, 245, 0.88) 85%,
    rgba(255, 249, 245, 1) 100%
  );
}
*/

.slide-caption-mobile { display: none; }
.slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}
.slider-dots button {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  border: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent3);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.slider-dots button.is-active {
  background: var(--info);
  transform: scale(1.25);
}

/* =========================================================
   AYUMI / VIP SECTION ? 見出しは slash-block（下部で定義）
========================================================= */
.ayumi {
  background: var(--white);
  border-radius: 48px;
  overflow: hidden;
}

/* =========================================================
   SLASH HEADING（"＼ 見出し ／" スタイル）
========================================================= */
.slash-block {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  container-type: inline-size;
}
.slash-block--left {
  text-align: left;
  margin: 0 0 3.4rem;
  max-width: 100%;
}

.slash-eyebrow {
  font-size: 0.82rem;
  color: var(--accent2);
  letter-spacing: 0.2em;
  margin: 0 0 0.9rem;
}

.slash-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--dark);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: nowrap;
  max-width: 100%;
}
.slash-block .slash-heading { justify-content: center; }
.slash-block--left .slash-heading { justify-content: flex-start; }

.slash-heading-text {
  /* 端末幅（コンテナ幅）に応じて縮小し、常に1行に収める */
  font-size: clamp(0.95rem, 6.2cqw, 2rem);
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.slash-mark {
  color: var(--info);
  font-weight: 700;
  font-size: 1.3em;
  display: inline-block;
  transform: skewX(-8deg);
  flex-shrink: 0;
}

.slash-desc {
  color: var(--accent2);
  font-size: 0.94rem;
  line-height: 1.9;
  margin: 0;
}
.slash-block--left .slash-desc { max-width: 860px; }

/* =========================================================
   PRODUCT SECTIONS
========================================================= */
.product { background: var(--light); }
.product--alt { background: var(--white); }

.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: center;
}


.product-grid img{border-radius: var(--card-radius);}/*maico*/
.product-grid--image-right .product-media { order: 2; }
.product-grid--image-right .product-copy { order: 1; }

/* 金平糖：PRと3種類のギフトパッケージ */
.konpeito-package-showcase {
  display: grid;
  gap: 2rem;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
}

.konpeito-gift-pr {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.2rem);
  border: 1px solid rgba(141, 116, 79, 0.22);
  border-radius: var(--card-radius);
  background:
    radial-gradient(circle at 92% 12%, rgba(194, 175, 132, 0.22), transparent 30%),
    linear-gradient(135deg, #fffdf9 0%, #f7f0e5 100%);
  color: #263229;
  text-align: center;
  box-shadow: 0 20px 45px rgba(61, 47, 31, 0.08);
}

.konpeito-gift-kicker {
  margin: 0 0 0.8rem;
  color: #8b6942;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
}

.konpeito-gift-pr h3 {
  margin: 0 0 1.5rem;
  color: #1c2f29;
  font-size: clamp(1.55rem, 2.7vw, 2.25rem);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.08em;
}

.konpeito-gift-lead {
  margin: 0 0 0.8rem;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: 0.08em;
}

.konpeito-gift-text {
  max-width: 34rem;
  margin: 0 auto;
  color: #544b40;
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 0.9rem;
  line-height: 2;
}

.konpeito-quality {
  display: grid;
  gap: 0.45rem;
  margin-top: 1.6rem;
  padding: 1.15rem 1rem;
  border-top: 1px solid rgba(62, 87, 69, 0.22);
  border-bottom: 1px solid rgba(62, 87, 69, 0.22);
}

.konpeito-quality span {
  color: #6f604c;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
}

.konpeito-quality strong {
  color: #284c3a;
  font-size: clamp(1.25rem, 2.3vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.12em;
}

.konpeito-package-list {
  display: grid;
  gap: 1.35rem;
}

.konpeito-package-item {
  position: relative;
  overflow: hidden;
  margin: 0 0 50px 0;
  border-radius: var(--card-radius);
  background: #fff;
  box-shadow: 0 18px 38px rgba(53, 39, 28, 0.12);
}

.product-grid .konpeito-package-item img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--card-radius);
}

.konpeito-package-item figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.68rem 1rem;
  border-radius: 0 10px 0 0;
  background: rgba(16, 35, 55, 0.9);
  color: #fff;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  backdrop-filter: blur(5px);
}

.konpeito-package-item figcaption span {
  color: #d9bb7a;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}
/*
.product-media-frame1 {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
}
*/

.product-media-frame {
  width: 100%;
  aspect-ratio: 1 / 1; /* 正方形画像用に枠のスペースを確保（画像未設置時も空白にならない） */
  overflow: hidden;
  position: relative;
  background: var(--light);
  margin-bottom: 50px;
}

.frame-a { clip-path: url(#orgWindowA); }
.frame-b { clip-path: url(#orgWindowB); }

.product-media-frame2 {
  width: 100%;
  aspect-ratio: 3 / 6;/*商品縦長画像*/
  overflow: hidden;
  position: relative;
}
.frame-a { clip-path: url(#orgWindowA); }
.frame-b { clip-path: url(#orgWindowB); }


.product-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* スライム枠と背景の境目をぼかすフェード（KVと同様の処理・強めに調整） */
/*
.media-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.media-fade--light {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 249, 245, 0) 22%,
    rgba(255, 249, 245, 0.28) 48%,
    rgba(255, 249, 245, 0.62) 68%,
    rgba(255, 249, 245, 0.88) 85%,
    rgba(255, 249, 245, 1) 100%
  );
}
.media-fade--white {
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0) 22%,
    rgba(255, 255, 255, 0.28) 48%,
    rgba(255, 255, 255, 0.62) 68%,
    rgba(255, 255, 255, 0.88) 85%,
    rgba(255, 255, 255, 1) 100%
  );
}
*/


/* --- 甘納豆：味別・商品詳細（テーブル ? 丸写真の交互レイアウト） --- */
.amanatto-detail {
  display: flex;
  flex-direction: column;
  gap: 3.6rem;
  margin: 4.5rem auto 0;
  width: 100%;
  max-width: 1050px;
}

.amanatto-item {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 2.6rem;
  align-items: center;
}
/* 2番目（左右反転）は列幅も反転させる。orderではなくカラム自体を入れ替える */
.amanatto-item--media-left {
  grid-template-columns: 260px 1fr;
}

/* PC版のみ：甘納豆の商品詳細と画像の間隔を広げてバランス調整 */
@media (min-width: 1025px) {
  .amanatto-item,
  .amanatto-item--media-left {
    column-gap: 100px;
  }
}

.amanatto-media {
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  text-align: center;
}
.amanatto-media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--accent3);
  box-shadow: 0 10px 22px rgba(103,68,40,0.14);
}

.amanatto-media-caption {
  margin: 0.8rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent1);
  text-align: center;
  line-height: 1.5;
}
.amanatto-media-caption small {
  display: block;
  font-family: var(--font-latin);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  font-weight: 400;
  color: var(--secondary);
}

/* =========================================================
   甘納豆：宗像大豆 PR（品質・ブランドストーリー）
========================================================= */
.amanatto-pr {
  padding-bottom: 100px;
  background: var(--white);
}

/* --- 写真バナー＋左側の白抜きコピー --- */
.amanatto-pr-hero {
  position: relative;
  width: 100%;
  border-radius: var(--card-radius);
  overflow: hidden;
  margin-bottom: 4rem;
  box-shadow: 0 16px 40px rgba(103, 68, 40, 0.16);
}
.amanatto-pr-hero img {
  display: block;
  width: 100%;
  height: clamp(220px, 30vw, 420px);
  object-fit: cover;
}
.amanatto-pr-hero-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 7%;
  background: linear-gradient(90deg, rgba(24,25,43,0.6) 0%, rgba(24,25,43,0.28) 46%, rgba(24,25,43,0) 68%);
}
.amanatto-pr-hero-eyebrow {
  margin: 0 0 0.7rem;
  color: rgba(255,255,255,0.88);
  font-family: var(--font-latin);
  font-style: italic;
  letter-spacing: 0.22em;
  font-size: 0.8rem;
}
.amanatto-pr-hero-title {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 3.8vw, 2.9rem);
  line-height: 1.55;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.amanatto-pr-hero-title span {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: clamp(1.9rem, 5.2vw, 4rem);
  color: var(--primary);
}

/* --- 見出しリード --- */
.amanatto-pr-head { max-width: 760px; margin: 0 0 2.6rem; }
.amanatto-pr-title {
  margin: 0 0 1rem;
  color: var(--accent1);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.6;
}
.amanatto-pr-lead {
  margin: 0;
  color: var(--dark);
  font-size: 0.92rem;
  line-height: 1.95;
}

/* --- 全国ランキング・バッジ --- */
.amanatto-pr-rank {
  display: block;
  margin: 0 0 3.6rem;
  padding: clamp(2rem, 3.5vw, 3rem);
  border: 1px solid var(--accent3);
  border-radius: var(--card-radius);
  background: #fffaf6;
}
.amanatto-pr-rank-head {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(196,174,164,0.65);
}
.amanatto-pr-rank-num {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  color: var(--info);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.34vw, 1.8rem);
  line-height: 1;
}
.amanatto-pr-rank-num span {
  align-self: flex-start;
  margin-right: 0.35rem;
  color: var(--accent2);
  font-size: 0.85rem;
  font-weight: 700;
}
.amanatto-pr-rank-num small {
  margin-left: 0.15rem;
  font-size: 1rem;
  font-weight: 700;
}
.amanatto-pr-rank-head > p:last-child {
  margin: 0;
  color: var(--dark);
  font-size: 0.86rem;
  line-height: 1.9;
}

/* --- 特徴カード（アイコン付き） --- */
.amanatto-pr-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}
.amanatto-pr-feature {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  row-gap: 1rem;
  background: var(--white);
  border: 1px solid rgba(196,174,164,0.5);
  border-radius: 20px;
  padding: 1.7rem 1.5rem;
  box-shadow: 0 8px 22px rgba(103,68,40,0.06);
}
.amanatto-pr-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0;
  border-radius: 50%;
  background: var(--light);
  color: var(--info);
}
.amanatto-pr-feature-icon svg { width: 26px; height: 26px; }
.amanatto-pr-feature h3 {
  margin: 0;
  color: var(--accent1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}
.amanatto-pr-feature p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--dark);
  font-size: 0.85rem;
  line-height: 1.85;
}
.amanatto-pr-feature a {
  display: inline-block;
  margin-top: 0.7rem;
  color: var(--info);
  font-size: 0.8rem;
  border-bottom: 1px solid var(--info);
}

/* --- 宗像大豆プロジェクト：文章＋イメージの2カラム --- */
.amanatto-pr-project-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
  margin: 0;
  padding: clamp(2.2rem, 4vw, 4rem);
  border: 1px solid rgba(196, 174, 164, 0.62);
  border-radius: var(--card-radius);
  background: linear-gradient(135deg, #fff 0%, #fffaf3 100%);
  box-shadow: 0 18px 48px rgba(103,68,40,0.09);
}
.amanatto-pr-project {
  min-width: 0;
}
.amanatto-pr-project .section-eyebrow {
  margin-bottom: 1rem;
}
.amanatto-pr-project h2 {
  margin: 0 0 1.5rem;
  color: var(--accent1);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  line-height: 1.65;
}
.amanatto-pr-project p {
  margin: 0;
  color: var(--dark);
  font-size: 0.9rem;
  line-height: 2.15;
}
.amanatto-pr-project-image {
  margin: 0;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: #f5efe1;
  box-shadow: 0 16px 36px rgba(62,45,28,0.12);
}
.amanatto-pr-project-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.amanatto-pr-story {
  grid-column: 1 / -1;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid rgba(196,174,164,0.65);
}
.amanatto-pr-story-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
  margin-bottom: 2.6rem;
}
.amanatto-pr-story-intro .amanatto-pr-head {
  margin-bottom: 0;
}
.amanatto-pr-story-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 26px rgba(103,68,40,0.1);
}
.amanatto-pr-story-photo figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 0.62rem 1rem;
  border-radius: 0 0 12px 0;
  background: rgba(16, 35, 55, 0.9);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.amanatto-pr-story-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  align-items: center;
}
.amanatto-pr-story-photo img {
  width: 100%;
  aspect-ratio: 1.65 / 1;
  object-fit: cover;
}

.product-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: var(--accent1);
  margin: 0 0 0.6rem;
  line-height: 1.5;
}

.product-sub {
  color: var(--secondary);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  margin: 0 0 1.6rem;
}

.product-text {
  font-size: 0.96rem;
  color: var(--dark);
  margin: 0 0 2.2rem;
}

.store-list {
  font-size: 0.86rem;
  color: var(--accent2);
  margin: 0 0 2.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--accent3);
}
.store-list-label {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--secondary);
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  margin-right: 1rem;
  padding: 0.15rem 0.7rem;
  border: 1px solid var(--secondary);
  border-radius: 10px;
}

.placeholder-text {
  color: var(--accent2);
  font-style: italic;
  border: 1px dashed var(--accent3);
  padding: 1.1rem 1.3rem;
  font-size: 0.88rem;
}

.flavor-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2.6rem;
}
.product-grid .flavor-list { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); }

.flavor-list li {
  text-align: center;
  font-size: 0.72rem;
  color: var(--accent2);
  letter-spacing: 0.04em;
}
.flavor-list img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 0.55rem;
  border: 1px solid var(--accent3);
}
.flavor-list small {
  font-family: var(--font-latin);
  font-size: 0.62rem;
  color: var(--secondary);
  letter-spacing: 0.08em;
}

/* CTA button with hover phone reveal */
.cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  height: 58px;
  padding: 0 2rem;
  border: 1px solid var(--accent1);
  border-radius: 20px;
  color: var(--accent1);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  overflow: hidden;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.cta-button .cta-default,
.cta-button .cta-hover {
  position: absolute;
  transition: transform .4s ease, opacity .4s ease;
  white-space: nowrap;
}
.cta-hover {
  opacity: 0;
  transform: translateY(10px);
  color: var(--white);
  font-family: var(--font-latin);
  letter-spacing: 0.06em;
}
.cta-default { opacity: 1; transform: translateY(0); }

.cta-button:hover {
  background: var(--accent1);
  border-color: var(--accent1);
  color: var(--white);
}
.cta-button:hover .cta-default { opacity: 0; transform: translateY(-10px); }
.cta-button:hover .cta-hover { opacity: 1; transform: translateY(0); }

/* =========================================================
   成分表（原材料・内容量・賞味期限・保存方法）
   カード分割型リストスタイル／商品ごとに背景色を指定
========================================================= */
.spec-table {
  margin-top: 0.6rem;
}

.spec-table-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--dark);
  font-size: 0.95rem;
  margin: 0 0 1.2rem;
}
.detail-shield { width: 18px; height: 18px; color: var(--info); flex-shrink: 0; }

.spec-item {
  border: none;
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
}
.spec-item:last-child { margin-bottom: 0; }

.spec-label {
  display: block;
  color: var(--info);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}
.spec-value {
  display: block;
  color: var(--dark);
  font-size: 0.86rem;
  line-height: 1.75;
}

.spec-nutrition-list {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
}
.spec-nutrition-list li {
  font-size: 0.86rem;
  color: var(--dark);
  line-height: 1.75;
}

.spec-ingredient-list {
  margin-top: 0.8rem;
}
.spec-ingredient {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  padding: 1rem 0;/*0.5rem*/
  border-bottom: 1px dashed var(--accent3);
}
.spec-ingredient:last-child { border-bottom: none; }
.spec-ingredient-name {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--secondary);
  letter-spacing: 0.05em;
  min-width: 3.4em;
}
.spec-ingredient-value {
  flex: 1 1 auto;
  font-size: 0.86rem;
  color: var(--dark);
  line-height: 1.75;
}
.spec-ingredient-value:empty::before {
  content: "―";
  color: var(--accent3);
}

/* 商品ごとの背景色設定：博多一番星金平糖＝白／宗像さいだぁ＝白 */
.spec-table--white .spec-item {
  background: var(--white);
}

/* 宗像の甘納豆＝KV（キービジュアル）と同じ背景色 */
.spec-table--kv .spec-item {
  background: var(--light);
}

/* =========================================================
   KP2 ― 商品紹介：金平糖 詳細ビジュアル
   （元画像をテキスト／画像に切り分けてHTML化したセクション）
========================================================= */
.kp2 { background: var(--light); }
#konpeito-detail { padding-top: 0px; padding-bottom: 0px; }
#munakata-konpeito { padding-bottom: 56px; }

.kp2-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 4rem;
}
.kp2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--secondary);
  margin: 0 0 1rem;
}
.kp2-eyebrow .star-sm { fill: var(--primary); width: 12px; height: 12px; }

.kp2-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--dark);
  line-height: 1.6;
  margin: 0 0 1.2rem;
}
.kp2-title span {
  display: inline-block;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  color: var(--accent1);
  margin-top: 0.3rem;
}

.kp2-lead {
  font-size: 0.95rem;
  color: var(--accent2);
  margin: 0;
}

/* --- 3カラム特徴ブロック --- */
.kp2-features {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 2.4rem;
  align-items: start;
  margin-bottom: 4.5rem;
}

.kp2-feature-media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  margin-bottom: 1.3rem;
  box-shadow: 0 12px 28px rgba(103,68,40,0.14);
}
.kp2-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.kp2-feature-media--tall { aspect-ratio: 3/4; margin-bottom: 0; }

/* 金平糖の豆知識：3枚とも同じ幅・高さに揃える */
#konpeito-trivia .kp2-features { grid-template-columns: repeat(3, 1fr); }
#konpeito-trivia { margin-top: 50px; margin-bottom: 50px; padding-top: 31px; }

.kp2-feature--media-only { display: flex; align-items: center; }

.kp2-feature-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--accent1);
  margin: 0 0 0.7rem;
}
.kp2-feature-text {
  font-size: 0.88rem;
  color: var(--dark);
  line-height: 1.85;
  margin: 0;
}

.kp2-assurance {
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--accent3);
}
.kp2-assurance-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.425rem; /* 0.95rem x1.5 */
  color: var(--dark);
  margin: 0 0 0.5rem;
}
.kp2-assurance-sub {
  font-size: 1.2rem; /* 0.8rem x1.5 */
  letter-spacing: 0.05em;
  color: var(--secondary);
  margin: 0 0 1.8rem;
}

.kp2-icon-list {
  display: flex;
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kp2-icon-list li {
  flex: 1;
  text-align: center;
  font-size: 1.05rem; /* 0.7rem x1.5 */
  line-height: 1.5;
  color: var(--accent2);
}
.kp2-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px; height: 78px; /* 52px x1.5 */
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  border: 1px solid var(--accent3);
  background: var(--white);
  color: var(--info);
}
.kp2-icon svg { width: 36px; height: 36px; } /* 24px x1.5 */

/* --- じっくりと時間をかけて --- */
.kp2-time {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 2.6rem;
  align-items: center;
  margin-bottom: 4.5rem;
}
.kp2-time-media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: 0 12px 28px rgba(103,68,40,0.14);
}
.kp2-time-media img { width: 100%; height: 100%; object-fit: cover; }

/* --- ギフト訴求ブロック --- */
.kp2-gift {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 2.4rem;
  background: var(--white);
  border-radius: 20px;
  padding: 2.6rem;
  margin-bottom: 4.5rem;
  box-shadow: 0 12px 28px rgba(103,68,40,0.08);
}
.kp2-gift-icon {
  width: 76px; height: 76px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--light);
  color: var(--info);
}
.kp2-gift-icon svg { width: 34px; height: 34px; }

.kp2-gift-copy {
  flex: 1 1 280px;
  min-width: 240px;
}

.kp2-gift-media {
  flex: 0 1 700px;
  width: 700px;
  max-width: 100%;
  border-radius: 14px;
  overflow: hidden;
}
.kp2-gift-media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* --- 製造元／おすすめ／フレーバー一覧（ダーク帯） --- */
.kp2-maker {
  background: var(--dark);
  border-radius: 20px;
  padding: 2.1rem 3rem 2.24rem;
  color: var(--light);
}
.kp2-maker-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 2rem;
  margin-bottom: 2.4rem;
}
.kp2-maker-since {
  font-family: var(--font-latin);
  font-style: italic;
  color: var(--primary);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin: 0 0 0.3rem;
}
.kp2-maker-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--white);
  margin: 0;
}
.kp2-maker-text {
  font-size: 0.86rem;
  color: var(--accent3);
  line-height: 1.8;
  margin: 0;
  max-width: 320px;
}

.kp2-maker-bottom {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.6rem;
  align-items: start;
}

.kp2-flavors {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kp2-flavors li {
  text-align: center;
  font-size: 0.72rem;
  color: var(--accent3);
  letter-spacing: 0.04em;
}
.kp2-flavors img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 0.6rem;
  border: 1px solid rgba(255,255,255,0.2);
}
.kp2-flavors small {
  font-family: var(--font-latin);
  font-size: 0.62rem;
  color: var(--primary);
  letter-spacing: 0.08em;
}

.kp2-recommend {
  background: var(--light);
  border-radius: 16px;
  padding: 1.8rem 1.8rem;
}
.kp2-recommend-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent1);
  font-size: 0.95rem;
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--accent3);
}
.kp2-recommend ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kp2-recommend li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.82rem;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 0.85rem;
}
.kp2-recommend li:last-child { margin-bottom: 0; }
.kp2-recommend li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.15em;
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1px solid var(--info);
  background: var(--white);
}
.kp2-recommend li::after {
  content: "";
  position: absolute;
  left: 4px; top: 0.42em;
  width: 8px; height: 4px;
  border-left: 2px solid var(--info);
  border-bottom: 2px solid var(--info);
  transform: rotate(-45deg);
}

/* ページトップ（右下固定・スライム型） */
.totop-fixed {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70.4px; height: 70.4px; /* 88pxから20%縮小 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
.totop-fixed.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.totop-fixed:hover { transform: translateY(-4px); }

.totop-blob-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  z-index: 1;
  filter: drop-shadow(0 6px 16px rgba(103,68,40,0.28));
  transition: filter .35s ease;
}
.totop-fixed:hover .totop-blob-img {
  filter: drop-shadow(0 8px 18px rgba(103,68,40,0.38));
}

.totop-fixed-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 20.8px; height: 20.8px; /* 26pxから20%縮小 */
  font-size: 20.8px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
}

/* =========================================================
   COMPANY TABLE
========================================================= */
.company { background: var(--white); }

.company-heading-block {
  margin-top: 5rem;
}

.company-table {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
}
.company-table tr {
  border-bottom: 1px solid var(--accent3);
}
.company-table th,
.company-table td {
  text-align: left;
  padding: 1.15rem 1rem;
  font-weight: 400;
  font-size: 0.92rem;
  vertical-align: top;
}
.company-table th {
  width: 180px;
  color: var(--secondary);
  letter-spacing: 0.08em;
  font-family: var(--font-display);
}
.company-table td { color: var(--dark); }

.company-map {
  width: 100%;
  max-width: 900px;
  margin-top: 100px;
  overflow: hidden;
  border-radius: 12px;
  line-height: 0;
}
.company-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: none !important;
  border-radius: inherit;
}
.small-note {
  font-size: 0.75rem;
  color: var(--accent2);
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer {
  background: var(--dark);
  color: var(--light);
  height: 50px;
  padding: 0;
}
.footer-inner {
  width: var(--container-w);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  margin: 0;
  color: var(--white);
}

.footer-info p {
  margin: 0.3rem 0;
  font-size: 0.85rem;
  color: var(--white);
}

.footer-copy {
  margin: 0;
  padding: 0;
  border-top: none;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--white);
  font-family: var(--font-latin);
}

.site-footer .small-note { color: var(--white); opacity: 0.75; }

/* =========================================================
   SP PLAN BRAND STORY
========================================================= */
.sp-story {
  --sp-paper: #f6f2e8;
  --sp-ink: #17283a;
  --sp-gold: #b2985d;
  --sp-white: #fffdf8;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  border-radius: 48px;
  overflow: hidden;
  background: var(--sp-paper);
  color: #2c2925;
}
.sp-story-intro {
  min-height: 680px;
  padding: 120px 7vw 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.sp-story-line {
  width: 1px;
  height: 68px;
  margin-bottom: 28px;
  background: var(--sp-gold);
}
.sp-story-eyebrow {
  margin: 0;
  color: var(--sp-gold);
  font-family: "Cormorant Garamond", serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
}
.sp-story-main-title,
.sp-story-copy h3,
.sp-story-global-copy h3,
.sp-story-cta h3 {
  color: var(--sp-ink);
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  font-weight: 500;
}
.sp-story-main-title {
  margin: 28px 0 36px;
/*  font-size: clamp(2.43rem, 4.131vw, 3.888rem);*/
  font-size: clamp(2.43rem, 4.131vw, 3.375rem);
  line-height: 1.45;
  letter-spacing: 0.1em;
}
.sp-story-lead {
  margin: 0;
  font-size: 1rem;
  line-height: 2.25;
  letter-spacing: 0.07em;
}
.sp-story-row {
  min-height: 800px;
  margin-bottom: 170px;
  padding: 0 5.5vw;
  display: grid;
  grid-template-columns: 56% 44%;
  align-items: center;
}
.sp-story-photo {
  position: relative;
  height: 650px;
  margin: 0;
  border-radius: 42px;
  overflow: hidden;
}
.sp-story-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s ease;
}
.sp-story-row:hover .sp-story-photo img { transform: scale(1.018); }
.sp-story-photo-number {
  position: absolute;
  left: 20px;
  bottom: -38px;
  color: rgba(255,255,255,0.75);
  font-family: "Cormorant Garamond", serif;
  font-size: 11rem;
  line-height: 1;
}
.sp-story-copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin-left: -38px;
  padding: 68px 60px 62px;
  border-radius: 36px;
  background: rgba(255,253,248,0.97);
  box-shadow: 0 25px 70px rgba(23,40,58,0.1);
}
.sp-story-row--reverse { grid-template-columns: 44% 56%; }
.sp-story-row--reverse .sp-story-photo { grid-column: 2; grid-row: 1; }
.sp-story-row--reverse .sp-story-copy {
  grid-column: 1;
  grid-row: 1;
  margin-right: -38px;
  margin-left: auto;
}
.sp-story-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--sp-gold);
  font-family: "Cormorant Garamond", serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
}
.sp-story-label b { font-size: 1.8rem; font-weight: 400; }
.sp-story-label span {
  padding-left: 18px;
  border-left: 1px solid var(--sp-gold);
}
.sp-story-copy h3,
.sp-story-global-copy h3 {
  margin: 26px 0 28px;
/*  font-size: clamp(1.935rem, 2.7vw, 2.835rem);*/
  font-size: clamp(1.935rem, 2.7vw, 2.73rem);
  line-height: 1.55;
  letter-spacing: 0.06em;
}
.sp-story-divider {
  display: block;
  width: 52px;
  height: 1px;
  margin: 0 0 30px;
  background: var(--sp-gold);
}
.sp-story-copy > p:not(.sp-story-label),
.sp-story-global-copy > p:not(.sp-story-label) {
  margin: 0 0 15px;
  font-size: 0.93rem;
  line-height: 2.05;
}
.sp-story-global {
  position: relative;
  min-height: 880px;
  background: var(--sp-ink);
  overflow: hidden;
}
.sp-story-global > img {
  display: block;
  width: 100%;
  height: 680px;
  border-radius: 42px;
  object-fit: cover;
  opacity: 0.92;
}
.sp-story-global-copy {
  position: absolute;
  right: 6vw;
  bottom: 0;
  width: min(650px, 48vw);
  padding: 66px 64px 70px;
  background: rgba(23,40,58,0.97);
  color: #f4f0e7;
}
.sp-story-label--light { color: #d3bd8a; }
.sp-story-label--light span { border-color: #d3bd8a; }
.sp-story-global-copy h3 { color: var(--sp-white); }
.sp-story-cta {
  padding: 145px 7vw 150px;
  text-align: center;
  background: #ede7da;
}
.sp-story-cta h3 {
  margin: 27px 0 25px;
  font-size: clamp(2.43rem, 3.96vw, 3.78rem);
  line-height: 1.55;
  letter-spacing: 0.07em;
}
.sp-story-cta > p:not(.sp-story-eyebrow) {
  margin: 0;
  font-size: 0.94rem;
  line-height: 2;
}
.sp-story-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 44px;
  padding: 22px 34px;
  border: 1px solid var(--sp-ink);
  border-radius: 999px;
  background: var(--sp-white);
  color: var(--sp-ink);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  box-shadow: 0 12px 30px rgba(23,40,58,0.1);
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.sp-story-button:hover {
  color: #fff;
  background: var(--sp-ink);
  transform: translateY(-3px);
}
.sp-story-button span { font-size: 1.25rem; }

/* =========================================================
   RESPONSIVE ? TABLET / MOBILE
========================================================= */
@media (max-width: 900px) {
  :root { --card-radius: 26px; }
  .ayumi { border-radius: 28px; }
  .sp-story { border-radius: 28px; }
  .sp-story-intro { min-height: 580px; padding: 92px 24px 85px; }
  .sp-story-main-title { font-size: clamp(1.9035rem, 7.29vw, 2.754rem); letter-spacing: 0.04em; }
  .sp-story-lead { font-size: 0.92rem; }
  .sp-story .pc-only { display: none; }
  .sp-story-row,
  .sp-story-row--reverse {
    min-height: 0;
    margin-bottom: 105px;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .sp-story-photo {
    width: 100%;
    height: 62vw;
    min-height: 340px;
    border-radius: 26px;
  }
  .sp-story-copy,
  .sp-story-row--reverse .sp-story-copy {
    width: calc(100% - 30px);
    max-width: none;
    margin: -42px 0 0 30px;
    padding: 46px 27px 42px;
    border-radius: 24px;
  }
  .sp-story-copy h3,
  .sp-story-global-copy h3 { font-size: 1.8rem; }
  .sp-story-photo-number { bottom: -24px; font-size: 7rem; }
  .sp-story-global { min-height: 0; }
  .sp-story-global > img { height: 66vw; min-height: 380px; border-radius: 26px; }
  .sp-story-global-copy {
    position: relative;
    right: auto;
    width: calc(100% - 24px);
    margin: -38px 0 0 24px;
    padding: 52px 28px 56px;
  }
  .sp-story-cta { padding: 105px 24px 110px; }
  .sp-story-cta h3 { font-size: 2.205rem; }
  .sp-story-button { width: 100%; max-width: 480px; gap: 15px; padding: 20px 18px; }

  .hero-inner { grid-template-columns: 1fr; }
  .hero-left { order: 2; }
  .hero-right { order: 1; }

  .product-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .product-grid--image-right .product-media,
  .product-grid--image-right .product-copy { order: unset; }

  .kp2-features { grid-template-columns: 1fr; gap: 2.6rem; }
  #konpeito-trivia .kp2-features { grid-template-columns: 1fr; }
  .kp2-feature--media-only { order: -1; }
  .kp2-feature-media--tall { aspect-ratio: 16/10; }

  .kp2-time { grid-template-columns: 1fr; }

  .kp2-gift {
    flex-direction: column;
    text-align: center;
    padding: 2.2rem;
  }
  .kp2-gift-icon { margin: 0 auto; }
  .kp2-gift-copy { flex: 0 1 auto; min-width: 0; width: 100%; }
  .kp2-gift-media { flex: 1 1 auto; width: 100%; height: auto; }

  .kp2-maker-bottom { grid-template-columns: 1fr; }

  .amanatto-item,
  .amanatto-item.amanatto-item--media-left {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .amanatto-copy,
  .amanatto-copy .spec-table { width: 100%; }
  .amanatto-media { max-width: 220px; order: -1; }
  .amanatto-copy { order: 2; }

  .amanatto-pr-hero-copy {
    padding: 0 8%;
    background: linear-gradient(90deg, rgba(24,25,43,0.7) 0%, rgba(24,25,43,0.42) 62%, rgba(24,25,43,0.12) 100%);
  }
  .amanatto-pr-hero img { height: 280px; }

  .amanatto-pr-rank-head { flex-direction: column; text-align: center; gap: 0.8rem; }

  .amanatto-pr-features { grid-template-columns: 1fr; }
  .amanatto-pr-project-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    margin-bottom: 5.5rem;
    padding: 2rem;
  }
  .amanatto-pr-story-intro {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root { --container-w: 88%; --card-radius: 26px; }

  .logo-img { height: 28px; }

  .gnav { display: none; }
  .hamburger { display: flex; }

  .hero { padding: 2rem 0 2.4rem; }
  .hero-inner { width: 88%; gap: 0; }
  .hero-left { display: none; }
  .hero-right { min-height: 0; }
  .slider-frame { min-height: 0; aspect-ratio: 6/4; }

  .hero-right { min-height: 0; padding-bottom: 20px; }
  .slider-dots { margin-top: 30px; margin-bottom: 0; }

  .slide-caption-mobile {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.8rem;
    padding-top: 1.2rem;
    margin-top: 1rem;
    border-top: 1px solid var(--accent3);
    container-type: inline-size;
  }
  .slide-name-mobile {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--accent1);
    font-size: clamp(0.66rem, 5.4cqw, 0.95rem);
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
  }
  .slide-catch-mobile {
    font-size: 0.70rem;
    color: var(--accent2);
    text-align: left;
    line-height: 1.8;
    flex: 1 1 auto;
    min-width: 0;
  }

  .section { padding: 4.2rem 0; }

  .slash-heading { flex-wrap: nowrap; gap: 0.4rem; }
  .slash-block--left .slash-heading,
  .slash-block .slash-heading { justify-content: center; }
  .slash-block--left { text-align: center; }

  .flavor-list { grid-template-columns: repeat(3, 1fr); }
  .product-grid .flavor-list--5 {
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
  }

  .kp2-head { margin-bottom: 3rem; }
  .kp2-assurance-title { font-size: 1.2rem; }
  .kp2-assurance-sub { font-size: 1rem; }
  .kp2-icon-list { gap: 0.8rem; }
  .kp2-icon-list li { font-size: 0.9rem; }
  .kp2-icon { width: 66px; height: 66px; } /* 44px x1.5 */
  .kp2-icon svg { width: 30px; height: 30px; } /* 20px x1.5 */

  .kp2-maker { padding: 1.54rem 1.5rem 1.68rem; }
  .kp2-maker-name { font-size: 1.25rem; }
  .kp2-flavors { grid-template-columns: repeat(3, 1fr); gap: 0.9rem; row-gap: 1.4rem; }

  .cta-button { width: 100%; min-width: 0; }

  .totop-fixed { width: 54.4px; height: 54.4px; right: 18px; bottom: 18px; } /* 68pxから20%縮小 */
  .totop-fixed-arrow {
    width: 16px;
    height: 16px;
    font-size: 16px;
  } /* 20pxから20%縮小 */

  .company-table th { width: 110px; font-size: 0.82rem; }
  .company-table th, .company-table td { padding: 0.9rem 0.6rem; font-size: 0.82rem; }
  .company-table,
  .company-map { width: 100%; max-width: none; }
  .company-map { margin-top: 100px; }

  .site-footer {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    padding: 0;
    overflow: hidden;
  }
  .footer-inner {
    height: 50px;
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
}

@media (max-width: 560px) {
  .amanatto-pr-story-photos {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .slide-wrap, .totop-fixed, .cta-button, .cta-button span { transition: none !important; }
}

/* External feature banners */
.external-banner,
.buyer-feature-banner {
  width: min(100% - 40px, 1100px);
  margin-inline: auto;
}

.external-banner {
  margin-top: 2rem;
  margin-bottom: 2.4rem;
}

/* ふるさとチョイス：元バナーの縦横比を保ったまま50%表示 */
.external-banner--furusato {
  width: 50%;
  margin: 2rem auto 100px;
}

.buyer-feature-banner {
  margin-top: 4rem;
  margin-bottom: 4rem;
  text-align: center;
}

.buyer-feature-title {
  margin: 0 0 1.2rem;
  color: var(--accent1);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.3vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.external-banner a,
.buyer-feature-banner a {
  display: block;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(40, 31, 20, 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.external-banner img,
.buyer-feature-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.external-banner a:hover,
.buyer-feature-banner a:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(40, 31, 20, 0.22);
}

.external-banner a:focus-visible,
.buyer-feature-banner a:focus-visible {
  outline: 3px solid var(--accent3);
  outline-offset: 5px;
}

/* Copyright alignment */
.site-footer .footer-inner {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.site-footer .footer-copy {
  width: 100%;
  text-align: center;
}

/* 商品間の問い合わせボックス：手修正版HTMLの内容を保ち、余白だけ調整 */
.sp-story--contact {
  margin-top: 50px;
  margin-bottom: 50px;
}
.sp-story--contact .sp-story-cta {
  padding: 50px;
}

@media (max-width: 768px) {
  .sp-story--contact .sp-story-cta h3 {
    font-size: 1.65rem;
  }
}

/* ヘッダーと宗像大豆甘納豆の連続エリアは純白で統一 */
.site-header,
.product--alt,
.amanatto-pr {
  background: #fff;
}

/* ページ全体のカード・画像枠は、上部PRブロックと同じ角丸に統一（円・ボタンを除く） */
.ayumi,
.sp-story,
.sp-story-photo,
.sp-story-copy,
.sp-story-global > img,
.konpeito-gift-pr,
.konpeito-package-item,
.product-grid .konpeito-package-item img,
.product-media-frame,
.kp2-feature-media,
.kp2-time-media,
.kp2-gift,
.kp2-gift-media,
.kp2-maker,
.kp2-recommend,
.external-banner a,
.buyer-feature-banner a {
  border-radius: var(--card-radius);
}

/* 商品詳細だけは、情報を見分けやすい小さな角丸へ戻す */
.spec-item {
  border-radius: 12px;
}

@media (max-width: 720px) {
  .external-banner,
  .buyer-feature-banner {
    width: min(100% - 28px, 1100px);
  }

  .external-banner--furusato {
    width: 50%;
    margin-bottom: 100px;
  }

  .buyer-feature-banner {
    margin-top: 2.8rem;
    margin-bottom: 2.8rem;
  }

  .site-footer .footer-inner {
    align-items: center;
  }
}

/* =========================================================
   宗像さいだぁ 誕生ストーリー
========================================================= */
.cider-story {
  margin-top: clamp(5rem, 9vw, 8.5rem);
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid rgba(196, 174, 164, 0.58);
  border-radius: var(--card-radius);
  background: linear-gradient(145deg, #fff 0%, #fffaf3 100%);
  box-shadow: 0 18px 48px rgba(103, 68, 40, 0.08);
}
.cider-story-hero {
  position: relative;
  min-height: clamp(300px, 34vw, 500px);
  overflow: hidden;
  border-radius: calc(var(--card-radius) - 6px);
  background: #f7f0df;
}
.cider-story-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,253,246,.98) 0%, rgba(255,253,246,.84) 31%, rgba(255,253,246,.2) 58%, transparent 76%);
}
.cider-story-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cider-story-hero-copy {
  position: relative;
  z-index: 1;
  width: min(58%, 700px);
  box-sizing: border-box;
  padding: clamp(3rem, 7vw, 7rem) clamp(2rem, 5vw, 5.5rem);
  color: var(--accent1);
}
.cider-story-eyebrow {
  margin: 0 0 1rem;
  color: #a9873d;
  font-family: var(--font-display);
  font-size: .72rem;
  letter-spacing: .22em;
}
.cider-story-hero-copy h2 {
  margin: 0 0 1.3rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 600;
  line-height: 1.48;
  letter-spacing: .07em;
  white-space: nowrap;
}
.cider-story-hero-copy > p:last-child {
  margin: 0;
  color: #5e6e67;
  font-size: clamp(.88rem, 1.4vw, 1.08rem);
  line-height: 2;
  letter-spacing: .08em;
}
.cider-story-intro {
  display: block;
  margin: 0;
  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 4rem);
  text-align: left;
}
.cider-story-intro h3,
.cider-story-finale h3 {
  margin: .8rem 0 1.5rem;
  color: var(--accent1);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.35rem);
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: .04em;
}
.cider-story-intro > p:last-child {
  margin: 0;
  color: var(--dark);
  font-size: .94rem;
  line-height: 2.25;
  text-align: left;
}
.cider-story-list {
  border-top: 1px solid rgba(196, 174, 164, .55);
}
.cider-story-card {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid rgba(196, 174, 164, .55);
}
.cider-story-card:last-child { border-bottom: none; }
.cider-story-card--reverse .cider-story-image { order: 2; }
.cider-story-card--reverse .cider-story-copy { order: 1; }
.cider-story-image {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 600 / 343;
  justify-self: center;
  margin: 0;
  overflow: hidden;
  border-radius: var(--card-radius);
  box-shadow: 0 18px 38px rgba(63, 44, 25, .13);
}
.cider-story-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cider-story-image figcaption {
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(20, 35, 48, .58);
  color: rgba(255,255,255,.88);
  font-size: .55rem;
  letter-spacing: .14em;
}
.cider-story-number {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin: 0 0 .8rem;
  color: #b4934d;
  font-family: "Cormorant Garamond", serif;
  font-size: 2.2rem;
  line-height: 1;
}
.cider-story-number span {
  font-size: .65rem;
  letter-spacing: .22em;
}
.cider-story-copy h3 {
  margin: 0 0 .8rem;
  color: var(--accent1);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 600;
  letter-spacing: .06em;
}
.cider-story-copy .cider-story-catch {
  margin: 0 0 1.5rem;
  color: #8a713f;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.85;
}
.cider-story-copy > p:not(.cider-story-number):not(.cider-story-catch) {
  margin: 0 0 1rem;
  color: var(--dark);
  font-size: .9rem;
  line-height: 2.1;
}
.cider-story-finale {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 4vw, 3rem);
  text-align: center;
}
.cider-story-finale > p:not(.cider-story-eyebrow) {
  margin: 0 auto 1rem;
  color: var(--dark);
  font-size: .94rem;
  line-height: 2.2;
}

@media (max-width: 820px) {
  .cider-story { padding: 10px; }
  .cider-story-hero { min-height: 540px; }
  .cider-story-hero::after {
    background: linear-gradient(180deg, rgba(255,253,246,.96) 0%, rgba(255,253,246,.8) 38%, rgba(255,253,246,.12) 68%, transparent 82%);
  }
  .cider-story-hero > img { object-position: 63% center; }
  .cider-story-hero-copy {
    width: auto;
    padding: 3.1rem 1.6rem;
  }
  .cider-story-card {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 3.5rem 1rem;
  }
  .cider-story-card--reverse .cider-story-image,
  .cider-story-card--reverse .cider-story-copy { order: initial; }
  .cider-story-intro {
    padding: 3.8rem 1rem;
  }
  .cider-story-image {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 600 / 343;
  }
}