@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* ============================================================
   さぬき麺機LP 専用CSS
   このファイルは sanuki-temp--lp.html からのみ読み込まれる。
   同テンプレートを使うページ以外には一切影響しない。
   クラスはすべて .sk- 接頭辞。Figma: node 4580:21878 準拠。
   ============================================================ */

/* テーマは固定ヘッダー前提で page-contents に上余白を入れるが、
   このLPのヘッダーは通常配置なので打ち消す */

/* dnd領域の横幅制限を超えて全幅にする
   （テーマの #wrap が overflow:hidden なので横スクロールは出ない） */
.sk-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* ── 基本 ── */
.sk { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; color: #353453; font-weight: 500; }
.sk * { box-sizing: border-box; }
.sk p { margin: 0; }
.sk b, .sk strong { font-weight: 900; }
.c-custom_html .sk p { margin: 0; }
.c-custom_html .sk img { max-width: 100%; }

/* ── FV ── */
.sk-fv { position: relative; background: #f6f6f6 url('https://21021653.fs1.hubspotusercontent-na2.net/hubfs/21021653/claude-uploads/fv-bg.png') center top / cover no-repeat; padding: 80px 20px; }
.sk-fv__in { max-width: 1240px; margin: 0 auto; text-align: center; }
.sk-fv__ttl { margin: 0; font-size: 84px; font-weight: 900; line-height: 1.3; letter-spacing: .01em; }
.sk-fv__ttl span { display: block; }
.sk-badge { display: inline-block; margin: 57px 0 0; padding: 10px 46px; background: #353453; color: #fff; font-size: 24px; font-weight: 700; line-height: 1.5; }
.sk-menu { display: flex; justify-content: center; gap: 36px; margin: 68px 0 0; padding: 0; list-style: none; }
.sk-menu li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sk-menu img { display: block; width: 110px; height: 110px; border-radius: 50%; object-fit: cover; }
.sk-menu span { font-size: 16px; font-weight: 700; line-height: 1.5; }
.sk-fv__lead { margin: 48px auto 0; max-width: 940px; font-size: 28px; font-weight: 500; line-height: 2.4; }
.sk-fv__btns { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin: 102px 0 0; }

/* ── ボタン（Figma: 320x64 / radius50） ── */
.sk-btn { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 320px; height: 64px; padding: 0 44px 0 20px; border-radius: 50px; color: #fff !important; font-size: 18px; font-weight: 700; text-decoration: none !important; line-height: 1; }
.sk-btn:after { content: ""; position: absolute; top: 50%; right: 28px; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); }
.sk-btn--g { background: linear-gradient(90deg, #4a385a 0%, #ab1f44 50%, #f34f5c 100%); }
.sk-btn--s { background: #353453; }

/* ── 写真帯 ── */
.sk-photo { margin: 0; line-height: 0; }
.sk-photo img { display: block; width: 100%; height: auto; }

/* ── 汎用セクション ── */
.sk-sec { padding: 100px 20px; }
.sk-sec--gray { background: #f6f6f6; }
.sk-sec__in { max-width: 1240px; margin: 0 auto; }
.sk-h2 { margin: 0 0 56px; font-size: 48px; font-weight: 900; line-height: 1.4; text-align: center; }
.sk-body { max-width: 1080px; margin: 0 auto; font-size: 20px; font-weight: 400; line-height: 1.8; text-align: center; }
.sk-body .sk-sp { display: block; height: 1.8em; }
.sk-body .sk-md { font-size: 32px; line-height: 1.8; }
.sk-body .sk-lg { font-size: 36px; font-weight: 900; line-height: 1.8; }

/* ── 比較 ── */
.sk-note { max-width: 1080px; margin: 0 auto 56px; padding: 32px 40px; border-radius: 4px; background: #f6f6f6; font-size: 18px; font-weight: 400; line-height: 1.8; text-align: center; }
.sk-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; max-width: 1080px; margin: 0 auto; }
.sk-card { overflow: hidden; border-radius: 4px; height: 100%; }
.sk-card__ttl { padding: 8px 24px; font-size: 18px; font-weight: 700; line-height: 1.5; color: #fff; }
.sk-card__txt { padding: 16px 24px 24px; font-size: 16px; font-weight: 400; line-height: 1.8; }
.sk-card--g { background: linear-gradient(120deg, #4a385a 0%, #ab1f44 55%, #f34f5c 100%); color: #fff; }
.sk-card--g .sk-card__ttl { background: rgba(0, 0, 0, .2); }
.sk-card--p { background: #fff; border: 1px solid #575670; }
.sk-card--p .sk-card__ttl { background: #575670; }

/* ── 製品図解（さぬき一番AP＋吹き出し6） ── */
.sk-product { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; max-width: 1080px; margin: 0 auto; }
.sk-product__col { display: flex; flex-direction: column; gap: 24px; }
.sk-product__img { text-align: center; }
.sk-product__img img { display: block; width: 394px; max-width: 100%; height: auto; margin: 0 auto; }
.sk-bubble { position: relative; padding: 16px 24px; border-radius: 4px; background: #fff; border: 1px solid #d8d5dd; font-size: 15px; font-weight: 700; line-height: 1.5; }
.sk-bubble:after { content: ""; position: absolute; top: 50%; width: 0; height: 0; border: 12px solid transparent; }
.sk-product__col--l .sk-bubble:after { right: -24px; margin-top: -12px; border-left-color: #fff; }
.sk-product__col--r .sk-bubble:after { left: -24px; margin-top: -12px; border-right-color: #fff; }
.sk-product__name { margin: 40px 0 24px; font-size: 36px; font-weight: 900; line-height: 1.4; text-align: center; }
.sk-center { text-align: center; }

/* ── 特徴4カード ── */
.sk-lead-sub { margin: 0 0 24px; font-size: 18px; font-weight: 700; line-height: 1.8; text-align: center; }
.sk-feature { position: relative; }
.sk-feature__visual { position: absolute; left: -392px; top: 0; width: 372px; opacity: .9; pointer-events: none; }
.sk-feature__visual img { display: block; width: 100%; height: auto; }
.sk-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1080px; margin: 56px auto 0; }
.sk-point { display: flex; align-items: center; gap: 24px; min-height: 140px; padding: 24px 28px; border-radius: 4px; background: #f6f6f6; }
.sk-point__icon { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #4a385a 0%, #ab1f44 60%, #f34f5c 100%); }
.sk-point__ttl { font-size: 16px; font-weight: 900; line-height: 1.5; }
.sk-point__txt { margin-top: 8px; font-size: 14px; font-weight: 400; line-height: 1.6; }

/* ── 濃紺セクション（トレンド／最終CTA） ── */
.sk-sec--navy { background: #353453; color: #fff; border-top: 1px solid #4a385a; border-bottom: 1px solid #4a385a; }
.sk-sec--navy .sk-note { background: rgba(255, 255, 255, .06); color: #fff; }
.sk-tag { display: inline-block; margin: 0 0 16px; font-size: 20px; font-weight: 700; line-height: 1.5; color: #f34f5c; letter-spacing: .08em; }
.sk-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 1080px; margin: 0 auto 44px; }
.sk-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk-panel { max-width: 1080px; margin: 0 auto; padding: 48px 60px; border-radius: 4px; background: rgba(255, 255, 255, .06); font-size: 20px; font-weight: 400; line-height: 1.8; text-align: center; }

/* ── 成長（Tier） ── */
.sk-sec--pink { background: #f6f4f5; }
.sk-growth { position: relative; max-width: 1080px; height: 387px; margin: 0 auto; }
.sk-growth__chart { position: absolute; inset: 0; }
.sk-growth__chart svg { display: block; width: 100%; height: 100%; }
.sk-tier { position: absolute; width: 248px; min-height: 131px; padding: 24px; border-radius: 4px; background: linear-gradient(60deg, #4a385a 35%, #ab1f44 68%, #f34f5c 100%); color: #fff; }
.sk-tier__no { font-size: 13px; font-weight: 700; line-height: 1.5; color: #ffcccc; }
.sk-tier__name { margin-top: 4px; font-size: 16px; font-weight: 700; line-height: 24px; }
.sk-tier__cap { margin-top: 12px; font-size: 13px; font-weight: 400; line-height: 1.5; color: #e6e6e6; }
.sk-tier--1 { left: 15px; top: 119px; }
.sk-tier--2 { left: 287px; top: 81px; }
.sk-tier--3 { left: 560px; top: 42px; }
.sk-tier--4 { left: 832px; top: 0; }
.sk-dot { position: absolute; width: 27px; height: 27px; border-radius: 50%; background: #ab1f44; }
.sk-dot--1 { left: 125px; top: 339px; }
.sk-dot--2 { left: 397px; top: 301px; }
.sk-dot--3 { left: 671px; top: 261px; }
.sk-dot--4 { left: 942px; top: 220px; }
.sk-stem { position: absolute; width: 2px; height: 72px; background: #ab1f44; }
.sk-stem--1 { left: 139px; top: 278px; }
.sk-stem--2 { left: 411px; top: 240px; }
.sk-stem--3 { left: 685px; top: 200px; }
.sk-stem--4 { left: 956px; top: 159px; }

/* ── 導入店の声 ── */
.sk-voices { display: flex; flex-direction: column; gap: 48px; max-width: 1080px; margin: 0 auto; }
.sk-voice { display: grid; grid-template-columns: 140px minmax(0, 720px); justify-content: center; align-items: center; gap: 40px; }
.sk-voice__photo { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; }
.sk-voice__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk-voice__name { margin-top: 12px; font-size: 13px; font-weight: 400; line-height: 1.5; }
.sk-voice__bubble { position: relative; padding: 24px 32px; border-radius: 8px; background: #f6f6f6; font-size: 20px; font-weight: 700; line-height: 1.6; }
.sk-voice__bubble:before { content: ""; position: absolute; left: -22px; top: 40px; width: 0; height: 0; border: 11px solid transparent; border-right-color: #f6f6f6; }

/* ── サポート（学校カード） ── */
.sk-stat { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0 0 56px; }
.sk-stat__pre, .sk-stat__post { font-size: 22px; font-weight: 700; }
.sk-stat__num { position: relative; font-size: 58px; font-weight: 900; line-height: 1.2; }
.sk-stat__num:after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 4px; height: 14px; background: rgba(243, 79, 92, .35); z-index: -1; }
.sk-schools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: 1080px; margin: 0 auto; }
.sk-school { padding: 24px; border-radius: 4px; background: #f6f6f6; }
.sk-school img { display: block; width: 100%; height: auto; border-radius: 2px; }
.sk-school__ttl { margin: 16px 0 0; padding-bottom: 12px; border-bottom: 1px solid #d8d5dd; font-size: 17px; font-weight: 900; line-height: 1.4; }
.sk-school__txt { margin-top: 12px; font-size: 13px; font-weight: 400; line-height: 1.8; }

/* ── 最終CTA ── */
.sk-cta { border-top: 6px solid #4a385a; }
.sk-cta .sk-h2 { color: #fff; }
.sk-cta__lead { max-width: 940px; margin: 0 auto 48px; font-size: 18px; font-weight: 400; line-height: 1.8; text-align: center; }
.sk-cta__btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; }
.sk-copyright { margin-top: 56px; font-size: 13px; font-weight: 400; text-align: center; opacity: .8; }

/* ── タブレット ── */
@media screen and (max-width: 1080px) {
  .sk-product { grid-template-columns: minmax(0, 1fr); }
  .sk-product__col--l .sk-bubble:after, .sk-product__col--r .sk-bubble:after { display: none; }
  .sk-feature__visual { display: none; }
  .sk-growth { height: auto; }
  .sk-growth__chart, .sk-dot, .sk-stem { display: none; }
  .sk-tier { position: static; width: auto; }
  .sk-growth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .sk-schools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-fv__ttl { font-size: 58px; }
  .sk-fv__lead { font-size: 22px; line-height: 2.2; }
  .sk-h2 { font-size: 36px; }
  .sk-body { font-size: 18px; }
  .sk-body .sk-md { font-size: 26px; }
  .sk-body .sk-lg { font-size: 28px; }
}

/* ── スマホ ── */
@media screen and (max-width: 768px) {
  .sk-fv { padding: 40px 16px; }
  .sk-fv__ttl { font-size: 32px; line-height: 1.4; }
  .sk-badge { margin-top: 28px; padding: 8px 20px; font-size: 15px; }
  .sk-menu { flex-wrap: wrap; gap: 20px 14px; margin-top: 32px; }
  .sk-menu img { width: 72px; height: 72px; }
  .sk-menu span { font-size: 13px; }
  .sk-fv__lead { margin-top: 28px; font-size: 16px; line-height: 2; text-align: left; }
  .sk-fv__btns { flex-direction: column; align-items: center; gap: 12px; margin-top: 36px; }
  .sk-btn { width: 100%; max-width: 340px; height: 58px; font-size: 16px; }
  .sk-sec { padding: 56px 16px; }
  .sk-h2 { margin-bottom: 28px; font-size: 23px; line-height: 1.5; }
  .sk-body { font-size: 15px; line-height: 1.9; text-align: left; }
  .sk-body .sk-md { font-size: 19px; }
  .sk-body .sk-lg { font-size: 21px; }
  .sk-note { margin-bottom: 32px; padding: 20px 18px; font-size: 14px; line-height: 1.9; text-align: left; }
  .sk-cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sk-card__txt { padding: 14px 18px 20px; font-size: 14px; }

  .sk-product__name { margin: 28px 0 20px; font-size: 24px; }
  .sk-bubble { padding: 14px 18px; font-size: 14px; }
  .sk-lead-sub { font-size: 15px; text-align: left; }
  .sk-points { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 32px; }
  .sk-point { min-height: 0; gap: 16px; padding: 18px 20px; }
  .sk-point__icon { flex-basis: 56px; width: 56px; height: 56px; }
  .sk-tag { font-size: 15px; }
  .sk-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 28px; }
  .sk-panel { padding: 24px 20px; font-size: 15px; line-height: 1.9; text-align: left; }
  .sk-growth { grid-template-columns: minmax(0, 1fr); }
  .sk-voice { grid-template-columns: 88px 1fr; gap: 20px; }
  .sk-voice__photo { width: 88px; height: 88px; }
  .sk-voice__name { font-size: 12px; }
  .sk-voice__bubble { padding: 16px 20px; font-size: 15px; }
  .sk-voice__bubble:before { left: -18px; top: 24px; border-width: 9px; }
  .sk-stat { margin-bottom: 32px; }
  .sk-stat__pre, .sk-stat__post { font-size: 15px; }
  .sk-stat__num { font-size: 36px; }
  .sk-schools { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sk-school { padding: 18px; }
  .sk-cta__lead { margin-bottom: 32px; font-size: 15px; line-height: 1.9; text-align: left; }
  .sk-cta__btns { flex-direction: column; align-items: center; gap: 12px; }
  .sk-copyright { margin-top: 32px; }
}