/* ============================================================
   KINTAUROS Publish 専用スタイル(style.css → top.css の後に読み込む)
   ブランドカラー: ブルー。top.css のイエロー系トークンを body.pub 配下で
   ブルーに差し替え、Publish 固有のレイアウトだけをここに足す。
   マスコットは青・翼つきのこどもキンタウロス(images/pub-*.webp)
   ============================================================ */
body.pub {
  --pub: #2f7df6;
  --pub-bright: #6aa5ff;
  --pub-deep: #1b5fd1;
  --pub-ink: #0c2a66;
  --pub-soft: #eef5ff;
  --pub-sky: #d6e6ff;
  /* top.css / style.css のトークンをブルーへ */
  --gold: var(--pub);
  --gold-bright: var(--pub-bright);
  --gold-deep: var(--pub-deep);
  --accent: var(--pub);
  --accent-dark: var(--pub-deep);
  --accent-text: var(--pub-deep);
  --glow: rgba(47, 125, 246, .5);
  --cream: var(--pub-soft);
  --sky: var(--pub-soft);
  background: #fff;
}
/* 共通フッターは KINTAUROS 本体の配色のまま */
body.pub footer { --accent: #d2d254; --gold: #d2d254; }
body.pub ::selection { background: var(--pub); color: #fff; }

/* イエロー直書きの箇所をブルーへ */
body.pub .kf { fill: #a9cbff; }
body.pub .mk { background-image: linear-gradient(transparent 62%, rgba(47, 125, 246, .28) 62%, rgba(47, 125, 246, .28) 94%, transparent 94%); }
body.pub .btn-primary {
  background: linear-gradient(135deg, var(--pub-bright), var(--pub)); color: #fff;
  box-shadow: 0 8px 26px rgba(47, 125, 246, .4);
}
body.pub .btn-primary:hover { box-shadow: 0 12px 34px rgba(47, 125, 246, .55); }
body.pub header nav .nav-cta, body.pub header.scrolled nav .nav-cta { background: var(--pub); color: #fff; }
body.pub header nav .nav-cta:hover { background: var(--pub-deep); color: #fff; }
body.pub header nav a:hover { color: #fff; }
body.pub header.scrolled nav a:hover { color: var(--pub-deep); }
body.pub a { text-underline-offset: 3px; }

/* ---- ヒーロー: 青空 ---- */
.pub-hero {
  position: relative; overflow: hidden; color: #fff; padding: 132px 0 120px;
  background: linear-gradient(165deg, #0f3d9e 0%, #1f63dc 42%, #4c93ff 78%, #9cc6ff 100%);
}
body.pub section.pub-hero { background: linear-gradient(165deg, #0f3d9e 0%, #1f63dc 42%, #4c93ff 78%, #9cc6ff 100%); padding: 132px 0 120px; }
.pub-sky { position: absolute; inset: 0; pointer-events: none; }
.pub-sky::after { /* 下端の雲海 */
  content: ""; position: absolute; left: -5%; right: -5%; bottom: -70px; height: 150px; background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  box-shadow: 0 -30px 60px rgba(255, 255, 255, .35);
}
.cloud { position: absolute; display: block; background: rgba(255, 255, 255, .9); border-radius: 999px; filter: blur(.3px); animation: cloudDrift linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.cloud::before { width: 48%; height: 180%; left: 14%; bottom: 30%; }
.cloud::after { width: 38%; height: 140%; right: 14%; bottom: 30%; }
.c1 { width: 170px; height: 44px; top: 16%; left: -200px; opacity: .55; animation-duration: 70s; }
.c2 { width: 110px; height: 30px; top: 34%; left: -140px; opacity: .4; animation-duration: 95s; animation-delay: -40s; }
.c3 { width: 220px; height: 54px; top: 62%; left: -260px; opacity: .5; animation-duration: 120s; animation-delay: -75s; }
.c4 { width: 90px; height: 26px; top: 9%; left: -120px; opacity: .35; animation-duration: 85s; animation-delay: -20s; }
@keyframes cloudDrift { to { transform: translateX(calc(100vw + 300px)); } }

.pub-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.pub-hero .crumb { font-size: .8rem; margin-bottom: 22px; color: rgba(255, 255, 255, .8); }
.pub-hero .crumb a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.pub-hero .crumb a:hover { color: #fff; text-decoration: underline; }
.pub-hero .crumb span { margin: 0 6px; opacity: .6; }
.pub-hero h1 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  font-family: "Cinzel", "Noto Sans JP", serif; font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.5rem); letter-spacing: .08em; color: #fff;
  animation: heroRise .9s var(--ease-out) both;
}
.pub-hero h1 .tag {
  font-family: "Noto Sans JP", sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; padding: 3px 14px;
}
.pub-hero .h1-sub {
  margin: 18px 0 22px; font-family: "Noto Sans JP", sans-serif; font-weight: 900; line-height: 1.4; color: #fff;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem); letter-spacing: .01em; word-break: auto-phrase; text-wrap: balance;
  text-shadow: 0 6px 30px rgba(8, 30, 90, .35); animation: heroRise .9s .1s var(--ease-out) both;
}
.pub-hero .lead { font-size: .98rem; line-height: 1.95; color: rgba(255, 255, 255, .92); animation: heroRise .9s .2s var(--ease-out) both; }
.pub-hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; animation: heroRise .9s .3s var(--ease-out) both; }
body.pub .pub-hero .btn-primary { background: #fff; color: var(--pub-deep); box-shadow: 0 10px 30px rgba(8, 30, 90, .35); }
body.pub .pub-hero .btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .14); }

.pub-hero-visual { position: relative; animation: heroRise 1s .25s var(--ease-out) both; }
.browser {
  display: block; background: #fff; border-radius: 16px; overflow: hidden; text-decoration: none;
  box-shadow: 0 30px 80px rgba(8, 30, 90, .45), 0 0 0 1px rgba(255, 255, 255, .5);
}
.browser .frame-bar b {
  margin-left: 10px; flex: 1; max-width: 260px; font-weight: 400; font-size: .68rem; color: var(--text-soft);
  background: #fff; border-radius: 999px; padding: 1px 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser .shot { border: 0; border-radius: 0; margin: 0; box-shadow: none; }
.browser .shot img { display: block; width: 100%; height: auto; }
.pub-hero-visual .browser { transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); transform-origin: left center; }
.pub-hero-mascot {
  position: absolute; right: -6%; bottom: -16%; width: 46%; height: auto; z-index: 3;
  filter: drop-shadow(0 16px 22px rgba(8, 30, 90, .35)); animation: pubFly 6s ease-in-out infinite; will-change: transform;
}
@keyframes pubFly { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 50% { transform: translate(-10px, -18px) rotate(2deg); } }
.pub-hero-visual .story-chip { z-index: 4; }
.pub-hero-visual .chip-a { left: -6%; top: -7%; }
.pub-hero-visual .chip-b { right: -2%; top: 20%; }
.pub-hero-visual .chip-c { left: 4%; bottom: -8%; }
.pub-hero-cap { position: relative; z-index: 2; margin-top: 56px; color: rgba(255, 255, 255, .9); }
@media (max-width: 900px) {
  .pub-hero, body.pub section.pub-hero { padding: 112px 0 96px; }
  .pub-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .pub-hero-visual { max-width: 560px; margin: 0 auto; width: 100%; }
  .pub-hero-visual .browser { transform: none; }
  .pub-hero-mascot { right: -2%; width: 40%; }
  .pub-hero-visual .chip-a { left: 0; } .pub-hero-visual .chip-b { right: 0; }
}

/* ---- 数字カード ---- */
body.pub section.pub-facts { background: #fff; padding: 0; margin-top: -64px; position: relative; z-index: 5; }
.pub-facts .fact-num { white-space: nowrap; }
.pub-facts .fact-num b { font-size: clamp(1.9rem, 3.8vw, 2.7rem); background: linear-gradient(180deg, var(--pub-ink) 50%, var(--pub)); -webkit-background-clip: text; background-clip: text; }

/* ---- 公開できるもの(用途ごとのショーケース) ---- */
body.pub #features { padding-top: 96px; }
.pub-cases { display: grid; gap: 32px; }
body.pub .feature.pub-case {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center;
  background: linear-gradient(160deg, #fff, var(--pub-soft)); border: 1px solid #dbe7fb; border-radius: var(--r-lg); padding: 44px;
  box-shadow: var(--shadow-card); transition: box-shadow .35s ease, opacity .7s ease, transform .7s var(--ease-out);
}
body.pub .feature.pub-case:hover { box-shadow: var(--shadow-pop); }
body.pub .pub-case:nth-child(even) .pub-case-text { order: 2; }
.pub-case .t { font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 900; line-height: 1.5; margin-bottom: 12px; word-break: auto-phrase; }
.pub-case p { font-size: .94rem; }
.pub-demo-btn { margin-top: 20px; font-size: .88rem; padding: 11px 22px; }
body.pub .btn-outline { border-color: var(--pub-deep); color: var(--pub-deep); }
body.pub .btn-outline:hover { background: var(--pub-deep); color: #fff; }
.pub-case-cap { margin-top: 10px; font-size: .8rem !important; color: var(--text-soft); }
.pub-case-visual { box-shadow: 0 22px 60px rgba(16, 29, 54, .2), 0 0 0 1px #dbe7fb; transition: transform .45s var(--ease-out), box-shadow .35s ease; }
.pub-case-visual:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 30px 70px rgba(47, 125, 246, .3), 0 0 0 2px var(--pub); }
.pub-case-visual .shot img { cursor: pointer; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.pub-demo-lead { margin: 48px auto 0 !important; }
@media (max-width: 900px) {
  body.pub .feature.pub-case { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 22px; }
  body.pub .pub-case:nth-child(even) .pub-case-text { order: 0; }
}

/* ---- 仕組みと使い方(スクロールで伸びるタイムライン) ---- */
.pub-usage { position: relative; max-width: 760px; --p: 0; }
.pub-usage-line { position: absolute; left: 27px; top: 28px; bottom: 60px; width: 4px; border-radius: 4px; background: #dbe7fb; }
.pub-usage-line span { position: absolute; inset: 0 0 auto 0; height: calc(var(--p) * 100%); border-radius: 4px; background: linear-gradient(180deg, var(--pub-bright), var(--pub-deep)); }
.pub-usage .u-step {
  padding: 22px 26px 22px 30px; margin: 0 0 18px 80px; background: #fff; border-radius: var(--r-md);
  box-shadow: 0 6px 22px rgba(16, 29, 54, .06); transition: box-shadow .4s ease, transform .4s var(--ease-out);
}
.pub-usage .u-step::after { display: none; }
.pub-usage .u-step::before {
  left: -80px; top: 14px; width: 58px; height: 58px; font-size: 1.15rem; font-weight: 900; z-index: 2;
  background: #fff; color: var(--pub-deep); border: 3px solid #dbe7fb; box-shadow: none;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, transform .4s var(--ease-out);
}
.pub-usage .u-step.is-on::before { background: var(--pub); color: #fff; border-color: var(--pub); transform: scale(1.06); box-shadow: 0 10px 24px rgba(47, 125, 246, .4); }
.pub-usage .u-step.is-on { box-shadow: var(--shadow-card); }
.pub-usage .u-step .t { font-size: 1.05rem; font-weight: 900; padding-top: 0; word-break: auto-phrase; }
.pub-usage .u-step p { font-size: .92rem; }
@media (max-width: 560px) {
  .pub-usage-line { left: 19px; }
  .pub-usage .u-step { margin-left: 58px; padding: 18px 18px 18px 20px; }
  .pub-usage .u-step::before { left: -58px; width: 42px; height: 42px; font-size: 1rem; }
}

/* ---- 画面イメージ ---- */
.pub-gallery { gap: 32px 28px; }
.pub-gallery .shot {
  border: 0; border-radius: 14px; overflow: hidden; background: var(--pub-soft);
  box-shadow: 0 14px 40px rgba(16, 29, 54, .14), 0 0 0 1px #dbe7fb; transition: transform .4s var(--ease-out), box-shadow .35s ease;
}
.pub-gallery .shot:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(47, 125, 246, .28), 0 0 0 2px var(--pub); }
.pub-gallery .shot img.is-mobile-shot { max-height: 520px; width: auto; margin: 0 auto; }
.pub-gallery .shot-caption { font-size: .86rem; margin-top: 14px; }

/* ---- 共通の機能 ---- */
.pub-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) { .pub-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pub-features { grid-template-columns: minmax(0, 1fr); } }
body.pub .pub-features .feature {
  border: 0; border-radius: var(--r-lg); padding: 32px 28px; background: #fff; box-shadow: 0 6px 22px rgba(16, 29, 54, .06);
  transition: transform .35s var(--ease-out), box-shadow .35s ease, opacity .7s ease;
}
body.pub .pub-features .feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-pop); }
.pub-ic { margin-bottom: 16px; }
.pub-ic .ico { width: 56px; height: 56px; }
.pub-features .t { font-size: 1.08rem; font-weight: 900; margin-bottom: 10px; word-break: auto-phrase; }
.pub-features .feature p { font-size: .9rem; }
.pub-features code, .pub-usage code, .spec code { font-size: .86em; background: var(--pub-soft); color: var(--pub-ink); border-radius: 6px; padding: 1px 6px; }

/* ---- 料金 ---- */
body.pub #pricing { background: linear-gradient(180deg, #fff, var(--pub-soft)); }
.pub-plans { max-width: 460px !important; }
body.pub .plan.featured {
  background: radial-gradient(520px 280px at 85% -10%, rgba(156, 198, 255, .45), transparent 70%), linear-gradient(160deg, #1b5fd1, #0c2a66);
  box-shadow: 0 30px 70px rgba(27, 95, 209, .4);
}
body.pub .plan.featured .price .num { color: #fff; }
body.pub .plan.featured li::before { color: #9cc6ff; }
body.pub .plan .rec { background: #fff; color: var(--pub-deep); box-shadow: 0 6px 18px rgba(8, 30, 90, .25); }
body.pub .plan.featured .btn-primary { background: #fff; color: var(--pub-deep); }
body.pub .pricing-note a { color: var(--pub-deep) !important; }
.pub-notice { max-width: 820px; margin: 32px auto 0; border-radius: var(--r-md); }

/* ---- 仕様 ---- */
.pub-spec-wrap { max-width: 900px; margin: 0 auto; background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-card); padding: 12px 28px; overflow-x: auto; }
.pub-spec-wrap .spec { max-width: none; }
.pub-spec-wrap .spec th, .pub-spec-wrap .spec td { border: 0; border-bottom: 1px solid var(--border); padding: 18px 12px; font-size: .9rem; line-height: 1.85; }
.pub-spec-wrap .spec tr:last-child th, .pub-spec-wrap .spec tr:last-child td { border-bottom: 0; }
.pub-spec-wrap .spec th { background: transparent; color: var(--pub-ink); width: 24%; }
.pub-spec-wrap .spec a { color: var(--pub-deep) !important; font-weight: 700; }
@media (max-width: 640px) {
  .pub-spec-wrap { padding: 8px 18px; }
  .pub-spec-wrap .spec th, .pub-spec-wrap .spec td { display: block; width: auto; }
  .pub-spec-wrap .spec th { border-bottom: 0; padding-bottom: 0; }
  .pub-spec-wrap .spec td { padding-top: 6px; }
}

/* ---- FAQ ---- */
body.pub .faq summary::before { background: var(--pub-ink); color: #fff; }
body.pub .faq details[open] { box-shadow: inset 0 0 0 1.5px var(--pub); }
body.pub .faq details a { color: var(--pub-deep); font-weight: 700; }
.pub-faq-more { font-size: .86rem; color: var(--text-soft); margin-top: 24px; }
.pub-faq-more a { color: var(--pub-deep) !important; font-weight: 700; }
body.pub .faq-mascot { width: 190px; }

/* ---- CTA(青空のパネル) ---- */
body.pub .cta-panel {
  background: radial-gradient(700px 360px at 50% 0%, #7db3ff, transparent 70%), linear-gradient(135deg, #1b5fd1, #2f7df6 60%, #6aa5ff);
  box-shadow: 0 30px 80px rgba(27, 95, 209, .4);
}
body.pub .cta-panel::before { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .12) 0deg 6deg, transparent 6deg 18deg); }
body.pub .cta-final h2 { color: #fff; }
body.pub .cta-final p { color: rgba(255, 255, 255, .92); max-width: 640px; }
body.pub .cta-final .btn-primary { background: #fff; color: var(--pub-deep); box-shadow: 0 12px 34px rgba(8, 30, 90, .4); animation: none; }
body.pub .cta-final .cta-note { color: rgba(255, 255, 255, .85); }
body.pub .cta-mascot { width: clamp(130px, 19vw, 240px); bottom: 8px; animation: pubFly 6s ease-in-out infinite; }
@media (max-width: 720px) { body.pub .cta-mascot { animation: none; bottom: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cloud, .pub-hero-mascot, body.pub .cta-mascot { animation: none; }
  .pub-hero h1, .pub-hero .h1-sub, .pub-hero .lead, .pub-hero .cta-row, .pub-hero-visual { animation: none; }
}