/* HPの土台（色・文字・ヘッダー・フッター・ボタン・文だけのページ）。色はサービスの試作品（src/styles/proto.css）から写す */
:root{--paper:#FFFFFF;--ink:#1A2236;--muted:#6B7080;--line:#ECEDF0;--fill:#F5F6F8;--sky:#F3F7FC;--accent:#F2762E;--accent2:#E8601C;--accent-soft:#FDEBDF;--accent-line:#F5B88F}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font-family:"M PLUS 1p","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;font-size:15px;line-height:1.8}
a{color:inherit}
h1,h2,h3,p{margin:0}
img{max-width:100%}
/* 中身が短いページでも、フッターを画面のいちばん下に置く（main を伸ばして、フッターの下に白い隙間を残さない） */
body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
main{flex:1}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* ヘッダー。パソコンはロゴ・メニュー・ボタンを横に並べ、スクロールしても上に残す（白をうすく敷く）。
   スマホは ADAY のように丸いメニューボタンだけ右上に残す。メニュー（25）より上に置き、開いている間もロゴと×を見せる */
.head{position:sticky;top:0;z-index:30;transition:background .3s,box-shadow .3s}
/* いちばん上では透明。スクロールしたら白を敷く（head.js が html に scrolled をつける） */
.scrolled .head{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(26,34,54,.06)}
.head .wrap{display:flex;align-items:center;gap:40px;height:72px}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.logo img{display:block}
.head-nav{margin-left:auto;display:flex;gap:40px;font-size:14px;font-weight:700}
.head-nav a{text-decoration:none}
.head-nav a:hover{color:var(--accent2)}
.menu-btn{display:none;position:fixed;top:12px;right:16px;z-index:30;width:48px;height:48px;border:0;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(26,34,54,.15);cursor:pointer;place-items:center}
/* 3本線。真ん中の線を span、上下を ::before / ::after で描き、開いた時は×にする */
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:20px;height:2px;border-radius:1px;background:var(--ink);transition:transform .25s,background .25s}
.menu-btn span{position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}
.menu-btn span::after{top:6px}
.menu-btn[aria-expanded="true"] span{background:transparent}
.menu-btn[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:900px){
  .head,.scrolled .head{position:relative;background:none;backdrop-filter:none;box-shadow:none}
  .head-nav,.head .head-cta{display:none}
  .menu-btn{display:grid}
}

/* 開いたメニュー。全画面にクリーム色を敷き、大きな文字で並べる */
.menu{position:fixed;inset:0;z-index:25;background:#FFFAF6;display:grid;place-content:center;justify-items:center;gap:32px;padding:96px 24px 48px;overflow-y:auto;animation:menu-in .25s ease}
.menu[hidden]{display:none}
.menu a{text-decoration:none}
.menu-main{display:grid;justify-items:center;gap:20px;font-size:24px;font-weight:800}
.menu-main a:hover,.menu-sub a:hover{color:var(--accent2)}
.menu-sub{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;font-size:13px;color:var(--muted)}
.menu-open{overflow:hidden}
@keyframes menu-in{from{opacity:0}}

/* ボタン。arrow は右に「›」を添える */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;border-radius:999px;padding:14px 28px;font-weight:700;font-size:16px;background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(242,118,46,.25);transition:background .2s,transform .2s}
.btn:hover{background:var(--accent2);transform:translateY(-1px)}
.btn.ghost{background:var(--paper);color:var(--accent2);border:1.5px solid var(--accent-line);box-shadow:none}
.btn.small{padding:10px 20px;font-size:14px}
.btn .ic{width:16px;height:16px;margin-right:-6px}
.btn.arrow{padding-right:22px}

/* フッター。紺の地に、ロゴと一言・リンク・ボタンを横に並べ、下の段にコピーライトと規約。ロゴの文字は紺なので白く抜く */
.foot{background:var(--ink);color:rgba(255,255,255,.7);font-size:13px;padding:56px 0 28px}
.foot .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:32px 56px;align-items:center}
.foot-brand{display:grid;gap:10px}
.foot-brand p{color:#fff;font-size:13px}
.foot .logo img+img{filter:brightness(0) invert(1)}
.foot nav{display:flex;flex-wrap:wrap;gap:10px 32px}
.foot-nav{justify-content:center;font-size:14px;font-weight:700}
.foot a{text-decoration:none;color:#fff}
.foot nav a:hover{color:var(--accent-line)}
.foot-cta.btn{box-shadow:none}
.foot-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:12px}
.foot-bottom a{color:rgba(255,255,255,.7)}

/* SNS のアイコン。丸い枠に入れて並べる（フッターは白、メニューは紺） */
.sns{display:flex;gap:10px}
.sns a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid currentColor;text-decoration:none;transition:background .2s,color .2s}
.sns .ic{width:18px;height:18px}
.foot .foot-sns{gap:10px;margin-top:6px}
.foot-sns a{color:#fff;border-color:rgba(255,255,255,.35)}
.foot .foot-sns a:hover{background:#fff;color:var(--ink)}
.menu-sns a{color:var(--ink);border-color:var(--line);background:#fff}
.menu-sns a:hover{color:var(--accent2);border-color:var(--accent-line)}

/* 文だけのページ（規約など） */
.doc{max-width:680px;margin:0 auto;padding:40px 24px 24px;display:grid;gap:18px}
.doc h1{font-size:26px;font-weight:800}
.doc h2{font-size:17px;margin-bottom:4px}
.doc section{display:grid;gap:6px}
.draft{font-size:13px;color:var(--accent2)}
.sub{color:var(--muted);font-size:14px}

/* スマホ。フッターは縦に積む */
@media (max-width:900px){
  .foot .wrap{grid-template-columns:1fr;justify-items:start}
  .foot-nav{justify-content:start}
}

/* 見出しの中の「ナノリ」のロゴ（html.mjs の brand）。ロゴは上にキラキラがあるぶん文字が下に寄るので、少し下げて文字の並びにそろえる */
.brand{display:inline-block;height:1.9em;width:auto;margin:-0.5em 0.04em -0.32em 0;vertical-align:baseline}
/* オレンジの地（最後の誘い）では白く抜く */
.closing .brand{filter:brightness(0) invert(1)}