/* Otoa v4 — Otoa Input (input.otoa.ai) の共通スタイル
   デザイン言語は kotonone/otoa-web の 3 枚(Zen Maru Gothic / ブルー系)を踏襲する。
   画像は使わない。外部 CDN は Google Fonts のみ。 */

:root {
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --radius:24px; --radius-lg:32px; --radius-sm:16px; --pill:999px;
  --maxw:1160px; --gutter:24px;
  --font:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono",monospace;

  --t-hero:clamp(38px,5.4vw,66px);
  --t-h2:clamp(27px,3.6vw,42px);
  --t-h3:23px; --t-h4:17.5px; --t-body:16px; --t-sm:14px; --t-xs:12.5px;

  --bg:#eef4fc; --bg-2:#e6f1ff; --bg-3:#dcebfc;
  --surface:#ffffff; --surface-2:#f7fbff;
  --ink:#0f1a2e; --ink-soft:#5a6685; --line:#dbe6f5; --line-soft:#eaf1fb;
  --brand:#2f7fe0; --brand-strong:#1c5cbb; --brand-2:#6fb0f0; --cyan:#46b6e6; --amber:#c47a12;
  --navy:#0d1f3c; --navy-2:#15294c; --navy-soft:#9fb3d6;
  --danger:#c0392b; --ok:#1f7a4d;
  --on-brand:#fff; --ring:rgba(47,127,224,.22);
  --dot:rgba(47,127,224,.14);

  --grad-brand:linear-gradient(135deg,#3d86d9,#1c5cbb);
  --grad-hl:linear-gradient(100deg,#1c5cbb,#3d86d9 50%,#46b6e6);
  --grad-navy:linear-gradient(150deg,#15294c,#0d1f3c 70%);

  --e1:0 1px 2px rgba(13,31,60,.05),0 10px 24px -16px rgba(13,31,60,.24);
  --e2:0 2px 8px rgba(13,31,60,.06),0 30px 60px -28px rgba(13,31,60,.34);
  --e-brand:0 16px 34px -14px rgba(47,127,224,.6);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-3:#102238;
    --surface:#111e33; --surface-2:#16263f;
    --ink:#e9f1fc; --ink-soft:#a2b5d3; --line:#22385a; --line-soft:#1a2c48;
    --brand:#57a4f2; --brand-strong:#8cc4f9; --brand-2:#6fb0f0; --cyan:#5cc6f2; --amber:#f0b64f;
    --navy:#0a1322; --navy-2:#111e33; --navy-soft:#a2b5d3;
    --danger:#ff8a7a; --ok:#66d19e;
    --ring:rgba(87,164,242,.26);
    --dot:rgba(111,176,240,.12);

    --grad-brand:linear-gradient(135deg,#3d86d9,#2f6cc0);
    --grad-hl:linear-gradient(100deg,#8cc4f9,#6fb0f0 50%,#5cc6f2);
    --grad-navy:linear-gradient(150deg,#16263f,#0a1322 70%);

    --e1:0 1px 2px rgba(0,0,0,.3),0 10px 24px -16px rgba(0,0,0,.6);
    --e2:0 2px 8px rgba(0,0,0,.35),0 30px 60px -28px rgba(0,0,0,.7);
    --e-brand:0 16px 34px -14px rgba(30,80,150,.7);
  }
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font); color:var(--ink); font-size:var(--t-body); line-height:1.8;
  -webkit-font-smoothing:antialiased; font-feature-settings:"palt";
  background:
    radial-gradient(1200px 640px at 84% -8%,var(--bg-3) 0%,transparent 58%),
    radial-gradient(900px 560px at -4% 2%,var(--bg-2) 0%,transparent 52%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
svg{display:block;}
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.2;font-weight:900;}
strong{color:var(--brand-strong);font-weight:900;}
.hl{background:var(--grad-hl);-webkit-background-clip:text;background-clip:text;color:transparent;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter);}
.wrap-narrow{max-width:760px;margin:0 auto;padding-inline:var(--gutter);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.hide{display:none !important;}

/* ===== ボタン ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:900;
  font-size:var(--t-sm);line-height:1;cursor:pointer;padding:15px 26px;border-radius:var(--pill);
  border:1.5px solid transparent;transition:transform .16s ease,box-shadow .22s ease,background .2s ease,border-color .2s ease;
  text-align:center;}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:3px solid var(--brand);outline-offset:3px;}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:default;pointer-events:none;}
.btn-primary{background:var(--grad-brand);color:#fff;box-shadow:var(--e-brand);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-outline{background:color-mix(in srgb,var(--surface) 78%,transparent);color:var(--brand-strong);border-color:var(--line);}
.btn-outline:hover{border-color:var(--brand-2);background:var(--surface);transform:translateY(-2px);box-shadow:var(--e1);}
.btn-quiet{background:transparent;color:var(--ink-soft);border-color:var(--line);}
.btn-quiet:hover{color:var(--brand-strong);border-color:var(--brand-2);}
.btn-lg{padding:17px 34px;font-size:15.5px;}
.btn-block{display:flex;width:100%;}
.btn .ar{transition:transform .16s;}
.btn:hover .ar{transform:translateX(3px);}

/* ===== ナビ ===== */
.nav{position:sticky;top:0;z-index:40;backdrop-filter:saturate(1.6) blur(16px);
  background:color-mix(in srgb,var(--bg) 74%,transparent);}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent);}
.nav-inner{display:flex;align-items:center;gap:20px;min-height:72px;flex-wrap:wrap;padding-block:10px;}
.brand{display:flex;align-items:center;gap:7px;font-weight:900;font-size:23px;letter-spacing:-.01em;color:var(--ink);}
.brand .wave{width:30px;height:24px;flex:none;}
.brand .wave rect{fill:var(--brand-2);}
.brand .sub{font-weight:900;color:var(--brand-strong);font-size:18px;margin-left:2px;}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.nav-links a.lnk{font-size:var(--t-sm);font-weight:700;color:var(--ink-soft);transition:color .15s;}
.nav-links a.lnk:hover{color:var(--brand-strong);}

/* ===== セクション ===== */
.section{padding-block:var(--s9);}
.section-sm{padding-block:var(--s8);}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:var(--t-xs);letter-spacing:.08em;
  color:var(--brand-strong);background:color-mix(in srgb,var(--surface) 85%,transparent);border:1px solid var(--line);
  padding:8px 16px;border-radius:var(--pill);box-shadow:var(--e1);}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--ring);}
.h2{font-size:var(--t-h2);}
.lead{color:var(--ink-soft);font-size:17px;line-height:2;font-weight:500;}
.muted{color:var(--ink-soft);}
.small{font-size:var(--t-sm);}
.xs{font-size:var(--t-xs);}

/* ===== カード ===== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s6);
  box-shadow:var(--e1);}
.card-tight{padding:var(--s5);}
.card h3{font-size:var(--t-h3);margin-bottom:var(--s3);}
.grid{display:grid;gap:var(--s5);}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}

/* ===== 定義リスト(マイページの明細) ===== */
.dl{display:grid;grid-template-columns:minmax(9em,auto) 1fr;gap:var(--s3) var(--s5);align-items:baseline;}
.dl dt{font-size:var(--t-sm);font-weight:800;color:var(--ink-soft);}
.dl dd{font-weight:700;overflow-wrap:anywhere;}

/* ===== バッジ ===== */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:900;padding:5px 12px;
  border-radius:var(--pill);border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft);}
.badge-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);}
.badge-warn{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent);}
.badge-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent);}

/* ===== メーター(使用量) ===== */
.meter{height:10px;border-radius:var(--pill);background:var(--line-soft);overflow:hidden;border:1px solid var(--line);}
.meter > i{display:block;height:100%;background:var(--grad-brand);border-radius:var(--pill);transition:width .4s ease;}
.meter.is-full > i{background:linear-gradient(135deg,#e0743d,#c0392b);}

/* ===== 通知 ===== */
.note{border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface-2);
  padding:var(--s4) var(--s5);font-size:var(--t-sm);line-height:1.9;color:var(--ink-soft);}
.note-warn{border-color:color-mix(in srgb,var(--amber) 45%,transparent);
  background:color-mix(in srgb,var(--amber) 10%,var(--surface));color:var(--ink);}
.note-danger{border-color:color-mix(in srgb,var(--danger) 40%,transparent);
  background:color-mix(in srgb,var(--danger) 9%,var(--surface));color:var(--ink);}

/* ===== 読み込み中 ===== */
.skeleton{border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--line-soft),var(--line),var(--line-soft));
  background-size:220% 100%;animation:sk 1.3s ease-in-out infinite;min-height:1em;}
@keyframes sk{0%{background-position:120% 0}100%{background-position:-20% 0}}
.spinner{width:20px;height:20px;border-radius:50%;border:2.5px solid var(--line);border-top-color:var(--brand);
  animation:spin .8s linear infinite;flex:none;}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
}

/* ===== フォーム ===== */
.field{display:block;margin-bottom:var(--s4);}
.field > span{display:block;font-size:var(--t-sm);font-weight:800;color:var(--ink-soft);margin-bottom:6px;}
.field input{width:100%;font-family:inherit;font-size:var(--t-body);padding:13px 16px;border-radius:var(--radius-sm);
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink);}
.field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--ring);}

/* ===== フッター ===== */
.footer{background:var(--grad-navy);color:var(--navy-soft);padding-block:var(--s8) var(--s6);margin-top:var(--s9);}
.footer a{color:#fff;font-weight:700;}
.footer a:hover{color:var(--brand-2);}
.footer-inner{display:flex;gap:var(--s6);flex-wrap:wrap;justify-content:space-between;align-items:flex-start;}
.footer-links{display:flex;gap:var(--s5);flex-wrap:wrap;font-size:var(--t-sm);}
.footer-copy{margin-top:var(--s6);font-size:var(--t-xs);opacity:.75;}

/* ===== 波形(ロゴ・装飾) ===== */
.wavebars rect{fill:var(--brand-2);}

@media (max-width: 900px){
  .grid-3,.grid-2{grid-template-columns:1fr;}
  .section{padding-block:var(--s8);}
}
@media (max-width: 560px){
  :root{--gutter:18px;}
  .card{padding:var(--s5);}
  .dl{grid-template-columns:1fr;gap:var(--s1) 0;}
  .dl dd{margin-bottom:var(--s3);}
  .nav-links{gap:14px;}
  .btn{padding:14px 20px;}
}