/*
  MISATO Web Studio - style.css (Premium Background v2)
  Goal: simple + premium + trustworthy UI
  A案：背景は「ページ全体で1枚」＝切れ目を無くす
  小技：固定グラデ層 / ガラス感（backdrop-filter） / 余白リズム / うっすいgrain
*/

:root{
  --bg: #ffffffab;
  --surface: #FFFFFF;
  --surface2: #F1F5F9;

  --text: #0F172A;
  --muted: #475569;
  --faint: #64748B;

  --line: #E2E8F0;
  --lineSoft: rgba(226,232,240,.72);

  --accent: #2563EB;
  --accentSoft: #DBEAFE;

  --radius: 12px;
  --radiusLg: 16px;
  --radiusXl: 22px;

  --shadowSm: 0 8px 18px rgba(15, 23, 42, 0.06);
  --shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  --shadowLg: 0 26px 60px rgba(15,23,42,.10);

  --max: 1120px;
  --padX: 20px;
  --padXsp: 14px;

  --pageLabel: "";

  /* ===== A案：背景の“にじみ”は変数で管理（ページごとに色だけ差し替え） ===== */
  --glowA: rgb(65, 228, 32);      /* 左上 */
  --glowB: rgba(255, 0, 0, 0.95);    /* 右上 */
  --glowC: rgba(240, 80, 205, 0.06);     /* 下側の奥行き */
}

/* ===== Base Reset ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: Inter, "Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  letter-spacing: .01em;
  color: var(--text);

  /* 背景は「単色」＋ fixed疑似要素で“1枚”にする（切れ目をなくす） */
  background: var(--bg);
  overflow-x:hidden;

  position: relative;
  isolation: isolate; /* 擬似要素の重なりを安定 */
}

/* ===== A案（重要）：背景は body::before で固定レイヤー化 ===== */
body::before{
  content:"";
  position: fixed;
  inset: -18vh -16vw;
  z-index: -2;
  pointer-events: none;

  background:
    radial-gradient(900px 520px at 18% 12%, var(--glowA), transparent 60%),
    radial-gradient(980px 560px at 86% 4%,  var(--glowB), transparent 62%),
    radial-gradient(840px 520px at 56% 92%, var(--glowC), transparent 64%),
    linear-gradient(180deg, rgba(247,249,252,1) 0%, rgba(247,249,252,1) 100%);

  filter: saturate(1.02);
  transform: translateZ(0);
}

/* ===== 小技：超薄いgrain（高級感の“紙っぽさ”） ===== */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* 画像なしで作る微粒子。強いと安っぽくなるので “薄く” */
  background:
    repeating-linear-gradient(
      0deg,
      rgba(15,23,42,.018) 0px,
      rgba(15,23,42,.018) 1px,
      transparent 1px,
      transparent 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(15,23,42,.012) 0px,
      rgba(15,23,42,.012) 1px,
      transparent 1px,
      transparent 4px
    );
  opacity: .16;
  mix-blend-mode: overlay;
  transform: translateZ(0);
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
b,strong{ color: var(--text); }
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ===== Skip Link ===== */
.skip{
  position:absolute; left:-999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  position:fixed;
  left:16px; top:16px;
  width:auto; height:auto;
  padding:10px 12px;
  border-radius:12px;
  background: var(--surface);
  color: var(--text);
  z-index:9999;
  border: 1px solid var(--line);
  box-shadow: var(--shadowSm);
}

/* ===== Layout wrapper ===== */
.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding: 18px var(--padX) 96px;
  position: relative;
  z-index: 0;
}
@media (max-width: 560px){
  .wrap{ padding: 14px var(--padXsp) 84px; }
}

/* ===== NAV ===== */
.nav{
  position:sticky; top:0; z-index:50;

  /* 小技：ナビも背景の延長に（切れ目を感じさせない） */
  background: rgba(247,249,252,.66);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226,232,240,.92);
}
.nav-inner{
  max-width:var(--max);
  margin:0 auto;
  padding: 12px var(--padX);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:64px;
}
@media (max-width: 560px){
  .nav-inner{ padding: 10px var(--padXsp); }
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700;
  letter-spacing:.2px;
  min-width: 0;
}
.brand-text{
  color: var(--text);
  white-space: nowrap;
}
.dot{
  width:12px; height:12px; border-radius:999px;
  background: linear-gradient(135deg, var(--accent), #60A5FA);
  box-shadow: 0 0 0 6px rgba(37,99,235,.10);
}

/* nav links (PC) */
.navlinks{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 1 1 auto;
  justify-content: flex-end;
  min-width: 0;
}
.navlinks a{
  font-size:14px;
  color: var(--muted);
  padding:10px 10px;
  border-radius: 10px;
  white-space: nowrap;
  word-break: keep-all;
  position: relative;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.navlinks a:hover{
  background: rgba(37,99,235,.06);
  color: var(--text);
}

/* ✅ current-page highlight */
.navlinks a[aria-current="page"]{
  color: var(--text);
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.18);
  box-shadow: var(--shadowSm);
}
.navlinks a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:6px;
  height:2px;
  border-radius:999px;
  background: rgba(37,99,235,.55);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.86);
  color: var(--text);
  font-weight:700;
  font-size:14px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(37,99,235,.25);
  box-shadow: var(--shadowSm);
}
.btn:focus-visible{
  outline: 3px solid rgba(37,99,235,.28);
  outline-offset: 2px;
}
.btn.primary{
  border: 1px solid rgba(37,99,235,.22);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 14px 26px rgba(37,99,235,.18);
}
.btn.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(37,99,235,.20);
}

/* ===== Mobile nav ===== */
.nav-toggle{
  display:none;
  width:42px; height:42px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.76);
  align-items:center;
  justify-content:center;
  gap:6px;
}
.nav-toggle span{
  width:18px; height:2px;
  background: rgba(15,23,42,.78);
  border-radius: 999px;
  display:block;
}
.navpanel{
  display:none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: rgba(247,249,252,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226,232,240,.92);
  padding: 12px var(--padXsp) 16px;
  z-index: 60;
}
.navpanel a{
  display:block;
  padding: 12px 12px;
  border-radius: 12px;
  color: var(--text);
  border: 1px solid rgba(226,232,240,.78);
  background: rgba(255,255,255,.72);
  margin-bottom: 10px;
  white-space: nowrap;
}
.navpanel a:hover{
  border-color: rgba(37,99,235,.22);
  box-shadow: var(--shadowSm);
}
.navpanel.open{ display:block; }

@media (max-width: 820px){
  .navlinks{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

/* ===== HERO (Home) ===== */
.hero{ padding: 84px 0 42px; }
.grid{
  display:grid;
  grid-template-columns: 7fr 3fr;
  gap: 44px;
  align-items: start;
}
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; gap: 22px; }
  .hero{ padding: 64px 0 28px; }
}
@media (max-width: 560px){
  .hero{ padding: 52px 0 20px; }
}

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(37,99,235,.12);
  background: rgba(37,99,235,.06);
  color: var(--muted);
  font-size: 13px;
}
.pill b{ color: var(--text); font-weight:700; }
.pill-dot{
  width:10px;height:10px;border-radius:99px;
  background: rgba(37,99,235,.75);
  box-shadow:0 0 0 6px rgba(37,99,235,.10);
}

.h1{
  font-size: clamp(28px, 6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 16px 0 18px;
}
.h1 .grad{
  background: linear-gradient(135deg, var(--text), rgba(37,99,235,.92));
  -webkit-background-clip:text; background-clip:text;
  color: transparent;
}
.lead{
  color: var(--muted);
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.82;
  margin: 0 0 22px;
  max-width: 70ch;
}
.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
@media (max-width: 560px){
  .hero-cta{ display:grid; gap:10px; }
  .hero-cta .btn{ width:100%; height:48px; }
}

.meta{
  margin-top: 16px;
  display:flex; flex-wrap:wrap; gap:10px 14px;
  color: var(--faint);
  font-size: 13px;
}
.meta span{ display:inline-flex; align-items:center; gap:8px; }
.meta i{
  width:7px; height:7px; border-radius:99px; display:inline-block;
  background: rgba(37,99,235,.28);
}

.facts{ align-self: center; }
.facts-inner{
  border-radius: var(--radiusXl);
  border: 1px solid rgba(226,232,240,.78);

  /* 小技：ガラス感（背景が繋がって見える） */
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  padding: 16px;
  display:grid;
  gap: 12px;
  box-shadow: var(--shadowSm);
}
.fact{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  align-items:baseline;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(226,232,240,.88);
}
.fact:last-child{ border-bottom: none; padding-bottom:0; }
.fact-k{
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .01em;
}
.fact-v{
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
}

/* ===== Page Hero (Subpages) ===== */
.price-hero{
  padding: 76px 0 34px;
}
@media (max-width: 560px){
  .price-hero{ padding: 56px 0 22px; }
}
.price-hero .h1,
.h1.price-h1{
  margin-bottom: 12px;
}

/* ===== Section system ===== */
/* 小技：余白リズムを少し整えて“ちゃんとしたサイト感” */
.section{ padding: 88px 0 0; }
@media (max-width: 560px){
  .section{ padding: 62px 0 0; }
}

.section-title{
  font-size: 13px;
  letter-spacing: .02em;
  color: var(--faint);
  margin: 0 0 10px;
}
.section-h2{
  font-size: clamp(20px, 4.6vw, 34px);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.section-lead{
  color: var(--muted);
  line-height: 1.9;
  margin: 0 0 18px;
  max-width: 86ch;
}

/* ===== Premium "Band" block ===== */
/* A案：背景は塗らない。情報は“面（band/card）”で区切る */
.band{
  margin-top: 18px;
  border: 1px solid rgba(226,232,240,.78);

  /* 小技：ガラス＋ほんのりグラデ（高級感） */
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.82));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-radius: var(--radiusXl);
  box-shadow: var(--shadowSm);
  padding: 22px;
}
@media (max-width: 560px){
  .band{ padding: 16px; border-radius: 18px; }
}

/* ===== TOC pills ===== */
.toc{
  margin-top: 14px;
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}
.toc a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid rgba(226,232,240,.95);
  background: rgba(255,255,255,.58);
  padding: 8px 12px;
  border-radius: 999px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
.toc a:hover{
  transform: translateY(-1px);
  border-color: rgba(37,99,235,.22);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadowSm);
}
.toc a[aria-current="true"],
.toc a.is-active{
  color: var(--text);
  border-color: rgba(37,99,235,.28);
  background: rgba(37,99,235,.10);
}

/* ===== Prose ===== */
.prose{
  color: var(--muted);
  line-height: 1.95;
  font-size: 15px;
}
.prose p{ margin: 10px 0 0; }
.prose ul{
  margin: 12px 0 0;
  padding-left: 18px;
}
.prose li{ margin: 6px 0; }
.prose .k{
  display:block;
  color: var(--text);
  font-weight: 800;
  margin: 14px 0 6px;
}

/* ===== Cards grid ===== */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .cards{ grid-template-columns: 1fr; }
}
.card{
  border: 1px solid rgba(226,232,240,.92);

  /* ガラス寄りにして背景と繋がるように */
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border-radius: var(--radiusLg);
  padding: 16px;
  box-shadow: var(--shadowSm);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.18);
  box-shadow: var(--shadow);
}
.card h3{
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.card p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}
.card .tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  color: var(--faint);
  margin-bottom: 10px;
}
.card .tag i{
  width:8px; height:8px; border-radius:99px;
  background: rgba(37,99,235,.55);
  box-shadow: 0 0 0 6px rgba(37,99,235,.10);
  display:inline-block;
}

/* ===== Timeline / Flow ===== */
.timeline{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  padding-top: 6px;
}
@media (max-width: 980px){
  .timeline{ grid-template-columns: 1fr; }
}

/* ✅ mobile horizontal scroll */
@media (max-width: 560px){
  .timeline{
    grid-template-columns: none !important;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: 12px;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    padding: 6px 0 10px;
    scroll-padding-left: 2px;
    justify-content: start !important;
    align-items: stretch !important;
  }
  .timeline > *{
    scroll-snap-align: start;
    min-width: 280px;
    display:block !important;
    width:auto !important;
  }
  .timeline::-webkit-scrollbar{ height: 6px; }
  .timeline::-webkit-scrollbar-thumb{
    background: rgba(15,23,42,.18);
    border-radius: 999px;
  }
}

.step{
  border-radius: var(--radiusXl);
  border: 1px solid rgba(226,232,240,.82);
  background: rgba(255,255,255,.76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 14px;
  box-shadow: var(--shadowSm);
}
.step-no{
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(37,99,235,.72);
  margin-bottom: 10px;
}
.step-title{
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.step-desc{
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ===== Pricing cards ===== */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .pricing-grid{ grid-template-columns: 1fr; }
}
.p-card{
  border-radius: var(--radiusXl);
  border: 1px solid rgba(226,232,240,.82);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 18px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  position: relative;
  box-shadow: var(--shadowSm);
}
.p-card:hover{
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.20);
  box-shadow: var(--shadow);
}
.p-name{ font-weight:800; font-size: 16px; color: var(--text); }
.p-tag{ color: var(--muted); font-size: 12px; }
.p-price{
  font-size: 26px;
  font-weight:900;
  letter-spacing:-0.02em;
  margin: 12px 0 4px;
  color: var(--text);
}
.p-sub{ color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.p-ul{ margin: 0; padding: 0; list-style:none; display:grid; gap:9px; }
.p-ul li{ color: var(--muted); font-size: 14px; display:flex; gap:10px; line-height: 1.6; }
.p-ul li::before{
  content:"";
  width:9px; height:9px; border-radius:3px;
  margin-top: 6px;
  background: rgba(37,99,235,.22);
  flex: 0 0 auto;
}

/* ===== Compare table ===== */
.compare{
  border-radius: var(--radiusXl);
  border: 1px solid rgba(226,232,240,.82);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadowSm);
  overflow:hidden;
  margin-top: 16px;
}
.compare table{
  width:100%;
  border-collapse: collapse;
}
.compare th, .compare td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(226,232,240,.90);
  vertical-align: top;
  font-size: 14px;
}
.compare th{
  background: rgba(219,234,254,.44);
  color: rgba(71,85,105,.90);
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
}
.compare tr:last-child td{ border-bottom:none; }
@media (max-width: 720px){
  .compare{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
  .compare table{ min-width: 680px; }
}

/* ===== Addons grid ===== */
.addons-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .addons-grid{ grid-template-columns: 1fr; }
}

/* ===== CTA ===== */
.section-actions{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
@media (max-width: 560px){
  .section-actions{ display:grid; gap:10px; }
  .section-actions .btn{ width:100%; height:48px; }
}

.cta{
  margin-top: 18px;
  border-radius: var(--radiusXl);
  border: 1px solid rgba(37,99,235,.16);
  background: linear-gradient(180deg, rgba(219,234,254,.58), rgba(255,255,255,.78));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  box-shadow: var(--shadowLg);
}
.cta h3{ margin:0; font-size: 16px; letter-spacing:.2px; color: var(--text); }
.cta p{ margin:6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.cta .btns{ display:flex; gap:10px; }
@media (max-width: 560px){
  .cta{ padding: 16px; }
  .cta .btns{ width:100%; display:grid; gap:10px; }
  .cta .btns .btn{ width:100%; height:48px; }
}

/* ===== FAQ ===== */
.faq{ margin-top: 14px; display:grid; gap: 10px; }
.qa{
  border-radius: var(--radiusXl);
  border: 1px solid rgba(226,232,240,.82);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 16px;
  box-shadow: var(--shadowSm);
}
.qa summary{
  cursor: pointer;
  font-weight: 800;
  color: var(--text);
}
.qa p{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.85;
  font-size: 14px;
}
.qa summary::-webkit-details-marker{ display:none; }

/* ===== reveal ===== */
.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.on{ opacity:1; transform: translateY(0); }

/* ===== Optional: bottom sticky CTA (mobile) ===== */
.bottom-cta{ display:none; }
@media (max-width: 560px){
  .bottom-cta{
    display:flex;
    gap:10px;
    position: fixed;
    left: var(--padXsp);
    right: var(--padXsp);
    bottom: 12px;
    z-index: 70;
    padding: 10px;
    border-radius: 16px;
    border: 1px solid rgba(226,232,240,.80);
    background: rgba(255,255,255,.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadowSm);
  }
  .bottom-cta .btn{
    flex: 1 1 0;
    height: 48px;
  }
}

/* =========================
   Page Identity (body[data-page])
   背景を“切り替える”のではなく、色味（glow変数）だけ差し替える
   ========================= */
body[data-page="home"]{
  --pageLabel: "";
  --glowA: rgba(37, 99, 235, .10);
  --glowB: rgba(219, 234, 254, .95);
  --glowC: rgba(99, 102, 241, .06);
}
body[data-page="services"]{
  --pageLabel: "SERVICE";
  --glowA: rgba(20, 184, 166, .10);
  --glowB: rgba(204, 251, 241, .90);
  --glowC: rgba(14, 165, 233, .06);
}
body[data-page="pricing"]{
  --pageLabel: "PRICING";
  --glowA: rgba(124, 58, 237, .10);
  --glowB: rgba(237, 233, 254, .92);
  --glowC: rgba(99, 102, 241, .06);
}
body[data-page="about"]{
  --pageLabel: "PROFILE";
  --glowA: rgba(245, 158, 11, .10);
  --glowB: rgba(254, 243, 199, .92);
  --glowC: rgba(248, 113, 113, .06);
}
body[data-page="contact"]{
  --pageLabel: "CONTACT";
  --glowA: rgba(37, 99, 235, .10);
  --glowB: rgba(219, 234, 254, .92);
  --glowC: rgba(34, 197, 94, .05);
}

/* Page label on hero (optional but helps “moved page” feeling) */
.hero, .price-hero{ position: relative; }
body[data-page="services"] .price-hero::before,
body[data-page="pricing"]  .price-hero::before,
body[data-page="about"]    .price-hero::before,
body[data-page="contact"]  .price-hero::before,
body[data-page="services"] .hero::before,
body[data-page="pricing"]  .hero::before,
body[data-page="about"]    .hero::before,
body[data-page="contact"]  .hero::before{
  content: var(--pageLabel);
  position: absolute;
  top: -10px;
  left: 0;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(71, 85, 105, .9);
}

/* =========================================================
   Contact page only (フォームのサイズ感統一 / 見た目の一貫性)
   目的：input/select/textarea/buttonの「高さ・余白・角丸・影」を統一
   ========================================================= */
body[data-page="contact"]{
  --form-control-h: 48px;     /* ← ここで全体の高さを統一 */
  --form-radius: 14px;
  --form-border: rgba(226,232,240,.95);
  --form-bg: rgba(255,255,255,.92);
  --form-shadow: 0 8px 18px rgba(15,23,42,.05);
  --form-focus-border: rgba(37,99,235,.35);
  --form-focus-ring: rgba(37,99,235,.12);

  --form-gap: 16px;
  --form-gap-row: 18px;
}

/* grid */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--form-gap-row) var(--form-gap);
  margin-top: 14px;
  align-items: start;
}
@media (max-width: 980px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* field */
.field{ display:grid; gap: 8px; min-width: 0; }
.field--full{ grid-column: 1 / -1; }

.label{
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  letter-spacing: .01em;
}

/* helper */
.hint{
  font-size: 12px;
  color: var(--faint);
  line-height: 1.6;
  margin-top: -2px;
}

/* required badge */
.req{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(15,23,42,.82);
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.75);
}

/* controls: input/select/textarea の共通化 */
.input, .textarea, .select{
  width:100%;
  border-radius: var(--form-radius);
  border: 1px solid var(--form-border);
  background: var(--form-bg);
  font-size: 14px;
  color: var(--text);
  outline: none;
  box-shadow: var(--form-shadow);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* input & select：高さを完全一致 */
.input, .select{
  height: var(--form-control-h);
  padding: 0 14px;          /* ← 縦paddingではなく height + line-height で統一 */
  line-height: var(--form-control-h);
}

/* textarea：別枠（高さは自由、ただし見た目は同一） */
.textarea{
  min-height: 160px;
  padding: 12px 14px;
  line-height: 1.8;
  resize: vertical;
}

/* focus：transformで上下にズレないように（重要） */
.input:focus, .textarea:focus, .select:focus{
  border-color: var(--form-focus-border);
  box-shadow:
    0 0 0 4px var(--form-focus-ring),
    0 14px 26px rgba(15,23,42,.06);
  background: rgba(255,255,255,.96);
}

/* select：ブラウザ差の吸収（高さズレの原因になりやすい） */
.select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 42px; /* 矢印分の余白 */
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.55) 50%),
    linear-gradient(135deg, rgba(15,23,42,.55) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px),
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  background-repeat: no-repeat;
}
.select::-ms-expand{ display:none; }

/* actions */
.form-actions{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

/* フォーム内のボタンだけ高さを揃える（サイト全体には影響させない） */
.form-actions .btn{
  height: var(--form-control-h);
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 560px){
  .form-actions{ display:grid; }
  .form-actions .btn{ width:100%; }
}

.notice{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.78);
  color: var(--muted);
  line-height: 1.75;
  font-size: 13px;
}
.notice b{ color: var(--text); }

.success{
  display:none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(34,197,94,.25);
  background: rgba(34,197,94,.08);
  color: rgba(15,23,42,.88);
  line-height: 1.75;
  font-size: 13px;
}

.contact-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 980px){
  .contact-cards{ grid-template-columns: 1fr; }
}

/* optional: prevent background scroll when mobile menu is open */
body.no-scroll{ overflow: hidden; }

/* Profile photo */
.profile-photo{
  height: 300px;              /* 既存の枠と同じ高さ */
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.9);
}

.profile-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;          /* いい感じにトリミングして枠いっぱい */
  object-position: 50% 10%;   /* 顔が上にある場合に少し上寄せ */
  display: block;
}