/* kknova.com 共通スタイル。デザインシステムの styles.css の上に重ねる */

:root{
  --font-heading:"Source Serif 4","Zen Old Mincho",serif;
  --font-body:"Source Serif 4","Zen Old Mincho",serif;
  --color-bg:oklch(0.965 0.008 310);
  --color-text:oklch(0.25 0.04 300);
  --color-accent:oklch(0.55 0.12 295);
  --color-accent-600:oklch(0.48 0.12 295);
  --color-accent-700:oklch(0.42 0.11 295);
  --color-accent-2:oklch(0.62 0.16 350);
  --color-accent-2-700:oklch(0.48 0.16 350);
  --muted:color-mix(in srgb, var(--color-text) 62%, transparent);
  --line:color-mix(in srgb, var(--color-text) 14%, transparent);
  --on-dark:oklch(0.97 0.01 310);
}
html{scroll-behavior:smooth}
body{margin:0;text-wrap:pretty;overflow-x:hidden;background:oklch(0.28 0.06 300)}
a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent-600)}

/* 全ページ共通の背景（fixed・1枚だけ読む） */
.kk-sky{position:fixed;inset:0;z-index:-1;width:100%;max-width:none;height:100%;object-fit:cover;display:block}
.kk-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(0deg, oklch(0.2 0.05 300 / 0.35), transparent 30%)}

/* ナビ */
/* 現在地は下線で示す。デザインシステムが aria-current にアクセント色を当てるが、
   空の背景の上では読めなくなるので他のリンクと同じ文字色に戻す */
#kk-root .nav a[aria-current="page"]{color:var(--color-text);
  text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* 見出し・本文 */
.eyebrow{margin:0;font-size:12.5px;line-height:14px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted)}
.h2{font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(28px,4.2vw,52px);line-height:1.3;letter-spacing:-0.015em;margin:32px 0 0 -0.02em}
.h3{font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:clamp(20px,2.4vw,26px);line-height:1.4;margin:0}
.lead{font-size:16px;line-height:32px;max-width:36em;margin:24px 0 0;
  color:color-mix(in srgb, var(--color-text) 82%, transparent)}
.panel{background:color-mix(in srgb, oklch(0.965 0.008 310) 90%, transparent);
  backdrop-filter:blur(28px) saturate(1.08);-webkit-backdrop-filter:blur(28px) saturate(1.08)}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(24px,6vw,96px)}
section.blk{padding:clamp(64px,9vh,110px) 0;border-top:1px solid var(--line)}
section.blk:first-child{border-top:0}

/* トップの3サービス要約・カード */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:40px clamp(28px,4vw,56px);margin-top:56px}
.card{display:flex;flex-direction:column;gap:14px}
.card h3{font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:22px;line-height:1.4;margin:0}
.card p{margin:0;font-size:15px;line-height:28px;
  color:color-mix(in srgb, var(--color-text) 82%, transparent)}
.card .more{margin-top:auto;padding-top:8px;font-size:14.5px}
.price{font-family:var(--font-heading);font-size:26px;line-height:1.2;margin-top:6px}
.price small{font-size:13px;letter-spacing:0.06em;color:var(--muted);margin-left:8px}
.tag{display:inline-block;font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;
  padding:4px 10px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.fine{font-size:13px;line-height:23px;color:var(--muted);margin:0}

/* 手順 */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;margin-top:48px}
.steps div{border-top:1px solid var(--line);padding-top:18px}
.steps b{display:block;font-family:var(--font-heading);font-weight:var(--font-heading-weight);
  font-size:19px;margin:6px 0 10px}
.steps p{margin:0;font-size:14.5px;line-height:26px;
  color:color-mix(in srgb, var(--color-text) 82%, transparent)}

/* 箇条書き・定義リスト（事業概要） */
.bullets{margin:20px 0 0;padding-left:1.2em;font-size:15px;line-height:30px;
  color:color-mix(in srgb, var(--color-text) 82%, transparent)}
.facts{margin:36px 0 0;display:grid;grid-template-columns:max-content 1fr;
  gap:0;border-top:1px solid var(--line);font-size:15px}
.facts dt{padding:14px 24px 14px 0;border-bottom:1px solid var(--line);
  color:var(--muted);font-size:13.5px;letter-spacing:0.06em;white-space:nowrap}
.facts dd{margin:0;padding:14px 0;border-bottom:1px solid var(--line);line-height:28px}

/* 価格表 */
.plans{margin-top:40px;border-top:1px solid var(--line)}
.plans div{display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:26px}
.plans b{font-weight:normal;font-family:var(--font-heading);white-space:nowrap;font-size:17px}

/* Q&A */
.qa{margin-top:40px}
.qa dt{font-family:var(--font-heading);font-size:17px;line-height:28px;margin-top:26px}
.qa dd{margin:8px 0 0;font-size:14.5px;line-height:28px;
  color:color-mix(in srgb, var(--color-text) 82%, transparent);max-width:44em}

/* 注意書きの箱（法的な線引きなど） */
.callout{margin-top:32px;padding:20px 24px;border-left:3px solid var(--color-accent-2);
  background:color-mix(in srgb, var(--color-text) 4%, transparent);
  font-size:14.5px;line-height:28px;max-width:44em}
.callout p{margin:0}
.callout p + p{margin-top:12px}

/* CTA 帯（各ページ末尾） */
.cta{position:relative;padding:clamp(72px,12vh,140px) 0;color:var(--on-dark)}
.cta .veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, oklch(0.22 0.06 300 / 0.55), oklch(0.22 0.06 300 / 0.75))}
.cta .wrap{position:relative}
.cta .lead{color:oklch(0.97 0.01 310 / 0.85);max-width:38em}
.cta a.btn{text-decoration:none;white-space:nowrap}

/* フォーム */
form.kk{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-top:40px;max-width:760px}
form.kk label{display:flex;flex-direction:column;gap:8px;font-size:13px;letter-spacing:0.08em;
  color:oklch(0.97 0.01 310 / 0.85)}
form.kk .full{grid-column:1/-1}
form.kk input,form.kk select,form.kk textarea{font:inherit;font-size:15px;padding:12px 14px;
  border:1px solid oklch(0.97 0.01 310 / 0.35);border-radius:6px;
  background:oklch(0.97 0.01 310 / 0.94);color:var(--color-text)}
form.kk textarea{min-height:160px;resize:vertical}
form.kk input:focus,form.kk select:focus,form.kk textarea:focus{
  outline:2px solid oklch(0.82 0.12 350);outline-offset:1px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn-lg{font-size:15px;padding:14px 26px}
.note{font-size:13px;line-height:22px;color:oklch(0.97 0.01 310 / 0.72)}

/* リビール */
[data-kk-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity 1.1s cubic-bezier(.16,.7,.2,1),transform 1.1s cubic-bezier(.16,.7,.2,1)}
[data-kk-reveal="in"]{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){[data-kk-reveal]{opacity:1;transform:none;transition:none}}

@media (max-width:760px){
  form.kk{grid-template-columns:1fr}
  #kk-root .nav{flex-wrap:wrap;row-gap:10px;column-gap:16px}
  .facts{grid-template-columns:1fr;gap:0}
  .facts dt{border-bottom:0;padding-bottom:0}
  .facts dd{padding-top:6px}
  .plans div{flex-direction:column;gap:2px}
}