/*
Theme Name: シナコネ LP
Theme URI: https://syner-conne.com/
Author: 株式会社シナコネ
Description: 自治体・企業向けサービスLP用のブロックテーマ。design-ref（navy #082970 / coral #ff634f）に準拠。ヘッダー／フッター／フォントは本体サイト syner-conne.com と統一。
Version: 0.8.0
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 8.1
Text Domain: synaconne-lp
*/

/* ブロックテーマなので装飾は theme.json が主。ここは最小の補助のみ。 */
.wp-site-blocks{overflow-x:clip}

/* スクロールで「にゅっ」と出す（class は assets/reveal.js が付ける） */
.syn-reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.syn-reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.syn-reveal{opacity:1;transform:none;transition:none}}

/* ============================================================
   ヘッダー／フッター／ナビ（本体サイト syner-conne.com と統一）
   ============================================================ */

/* 追従ヘッダー */
.syn-header.is-position-sticky{
  z-index:100;
  /* 半透明＋ぼかしで本体サイトの雰囲気に寄せる */
  background:color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent)!important;
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  backdrop-filter:saturate(180%) blur(8px);
}

/* ロゴ（wp:html の <a>。余白を消して縦位置を揃える） */
.syn-logo{display:inline-flex;flex:none;margin:0;line-height:0}
.syn-logo img{display:block;height:auto;max-width:100%}

/* アンカー移動時、追従ヘッダーに隠れないように */
html{scroll-behavior:smooth}
:where(#problem,#solution,#function,#works,#flow,#pricing,#faq,#contact){
  scroll-margin-top:84px;
}

/* ヘッダーのページ内ナビ（wp:html のプレーンリンク） */
.syn-nav{
  display:flex;align-items:center;flex-wrap:wrap;gap:1.4rem;
  font-family:var(--wp--preset--font-family--body);font-size:0.94rem;font-weight:600;
}
.syn-nav a{
  color:var(--wp--preset--color--contrast);text-decoration:none;white-space:nowrap;
}
.syn-nav a:hover{color:var(--wp--preset--color--navy)}
.syn-nav .syn-nav__cta{
  background:var(--wp--preset--color--coral);color:#fff;
  border-radius:999px;padding:0.55rem 1.15rem;font-size:0.84rem;line-height:1;
}
.syn-nav .syn-nav__cta:hover{background:var(--wp--preset--color--coral-press);color:#fff}

/* フッターのナビ */
.syn-footer-nav{
  display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:flex-end;
  font-family:var(--wp--preset--font-family--body);font-size:0.86rem;font-weight:600;
}
.syn-footer-nav a,.syn-footer a{color:var(--wp--preset--color--muted);text-decoration:none}
.syn-footer-nav a:hover,.syn-footer a:hover{color:var(--wp--preset--color--navy)}

/* 狭幅：本文リンクは畳んで CTA だけ残す */
@media(max-width:781px){
  .syn-nav a:not(.syn-nav__cta){display:none}
  .syn-footer-nav{justify-content:flex-start}
  :where(#problem,#solution,#function,#works,#flow,#pricing,#faq,#contact){scroll-margin-top:72px}
}

/* ヒーローの黄マーカー（単語途中で割れない） */
.synaconne-hl{
  background:linear-gradient(transparent 58%, var(--wp--preset--color--hl) 58%, var(--wp--preset--color--hl) 92%, transparent 92%);
  padding:0 .06em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}

/* セクション見出しの下ラベル（— PROBLEM —） */
.synaconne-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:16px;
  letter-spacing:.22em; font-style:italic; font-size:.72rem;
  color:var(--wp--preset--color--muted);
}
.synaconne-eyebrow::before,.synaconne-eyebrow::after{content:"";width:38px;height:1px;background:currentColor;opacity:.5}

/* ============================================================
   LP コンポーネント補助（パターンから className で参照）
   色・余白・フォントは theme.json を正とし、ここは構造だけ
   ============================================================ */

/* 白カード（角丸＋影）。problem / works mini / pricing などで共用 */
.syn-card{
  background:var(--wp--preset--color--base);
  border:1px solid var(--wp--preset--color--line);
  border-radius:22px;
  box-shadow:0 18px 44px rgba(8,41,112,.10), 0 6px 16px rgba(8,41,112,.06);
  padding:clamp(1.6rem,1rem + 2vw,2.4rem);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .syn-card{box-shadow:0 18px 44px rgba(0,0,0,.5)}
}

/* 特徴の横並び行（solution）。左に丸アイコン、右にテキスト */
.syn-frow{align-items:center}
.syn-frow>.wp-block-column:first-child{flex-basis:260px!important;flex-grow:0}
.syn-circle{
  margin:0;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,var(--wp--preset--color--sky),var(--wp--preset--color--sky-2));
  box-shadow:inset 0 0 0 1px var(--wp--preset--color--line);
}
.syn-circle img{width:60%;height:60%;object-fit:contain;display:block}
@media(max-width:781px){
  .syn-frow>.wp-block-column:first-child{flex-basis:100%!important}
  .syn-circle{max-width:180px;margin-inline:auto}
}

/* 同梱イラスト（hero / problem カード）。ブラウザ幅に追従 */
.syn-illust{margin:0 auto}
.syn-illust img{display:block;width:100%;height:auto}
.syn-card .syn-illust{max-width:240px;margin:0 auto 1.2rem}
.syn-card .syn-illust img{width:100%}

/* “pill”＝機能タグ行 */
.syn-pill{
  display:inline-block;background:var(--wp--preset--color--sky-2);
  border-radius:12px;padding:12px 18px;
  font-family:var(--wp--preset--font-family--display);font-weight:700;
  color:var(--wp--preset--color--navy);font-size:.9rem;line-height:1.7;
}

/* チップ（導入自治体名） */
.syn-chips{display:flex;flex-wrap:wrap;gap:9px}
.syn-chips .wp-block-button__link{
  background:var(--wp--preset--color--base);
  border:1px solid var(--wp--preset--color--line);
  color:var(--wp--preset--color--navy);
  padding:8px 16px;font-size:.85rem;font-weight:500;box-shadow:none;
}

/* 縦タイムライン（flow）。丸数字の中心を線でつなぐ。
   線は各 .syn-step の疑似要素で描く（カード余白や列幅に依存しない） */
.syn-timeline{position:relative;display:flex;flex-direction:column;gap:1.8rem}
.syn-step{position:relative;align-items:flex-start!important;margin:0!important}
.syn-step>.wp-block-column:first-child{flex-basis:72px!important;flex-grow:0}
.syn-step>.wp-block-column:last-child{padding-top:2px}
/* 丸の中心 = 左から 36px。線は幅2pxなので left:35px */
.syn-step::before{
  content:"";position:absolute;left:35px;top:36px;bottom:calc(-1.8rem - 36px);
  width:2px;background:var(--wp--preset--color--navy);opacity:.28;z-index:0;
}
.syn-step:last-child::before{display:none}
.syn-step__num{
  width:72px;height:72px;flex:none;border-radius:50%;
  background:var(--wp--preset--color--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0;
  position:relative;z-index:1;
  font-family:var(--wp--preset--font-family--display);
  font-weight:700;font-size:1.5rem;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:.03em;
  box-shadow:0 0 0 6px var(--wp--preset--color--base);
}
@media(max-width:781px){
  .syn-step::before{display:none}
  .syn-step>.wp-block-column:first-child{flex-basis:72px!important}
}

/* 料金プラン：中央を強調＋バッジ */
.syn-plan{height:100%}
.syn-plan--featured{position:relative;border-color:var(--wp--preset--color--navy)!important}
.syn-plan--featured::before{
  content:"よく選ばれます";position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--wp--preset--color--coral);color:#fff;white-space:nowrap;
  font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:.72rem;
  padding:4px 14px;border-radius:999px;
}

/* 大きい数字（works の 280+） */
.syn-bignum{
  font-family:var(--wp--preset--font-family--display);font-weight:900;
  color:var(--wp--preset--color--navy);line-height:.9;
  font-size:clamp(3rem,2rem + 5vw,5rem);font-variant-numeric:tabular-nums;
}
.syn-bignum em{color:var(--wp--preset--color--coral);font-style:normal}

/* FAQ（core/details） */
.syn-faq{
  background:var(--wp--preset--color--base);
  border:1px solid var(--wp--preset--color--line);
  border-radius:14px;padding:.2rem 1.4rem;margin-bottom:.75rem;
}
.syn-faq>summary{
  font-family:var(--wp--preset--font-family--display);font-weight:700;
  color:var(--wp--preset--color--navy);padding:1rem 0;cursor:pointer;
}

/* CTA：ネイビー背景内のラベル・見出しは白／コーラルに */
.syn-cta .synaconne-eyebrow{color:var(--wp--preset--color--coral)}
.syn-cta h2{color:#fff}
.syn-cta .is-style-outline .wp-block-button__link{
  color:#fff!important;border-color:rgba(255,255,255,.55)!important;
}