/* ============================================================
   作成ページの紹介部分（#/start）だけに、HP と同じヘッダーとフッターを出す（2026-10-16 持ち主）。
   ・作成の画面（#/business 以降）では出さない（作業場の進み具合のヘッダーに任せる）
   ・今の帯（#sp-nav）は出さない（同じページ内のリンクだけ＝ヘッダーの「料金」と下の貼り付く帯で足りる）
   ・見た目は noren-studio.css の .site-header / .nav-cta / .nav-cta2 / .site-footer と同じ。
     作成ページは noren-studio.css を読まない（全体の初期化が作成ページの見た目とぶつかる）ので、
     名前を hs- に変えて写している。HP のヘッダーを変えたら、ここも同じに直すこと。
   ============================================================ */
.hs-hdr,.hs-foot{display:none}
body[data-route="start"] .hs-hdr,body[data-route="start"] .hs-foot{display:block}
body[data-route="start"] #sp-nav{display:none!important}
body[data-route="start"] #foot{display:none}
body[data-route="start"] .sp-hero{padding-top:calc(clamp(76px,8.4vh,104px) + 8px)!important}

.hs-hdr,.hs-foot{
  --hs-ink:#0b1730;--hs-ink-2:#3a465f;--hs-ink-3:#6f7a94;--hs-line:rgba(11,23,48,.09);--hs-line-2:rgba(11,23,48,.16);--hs-ai:#1d3f7f;
  --bt-ease:cubic-bezier(.2,.7,.2,1);--bt-1:#3a5aa6;--bt-2:#13285c;--bt-sheen:rgba(255,255,255,.34);--bt-inner:rgba(255,255,255,.34);
  --bt-rim:linear-gradient(180deg,rgba(255,255,255,.72),rgba(170,195,250,.22) 46%,rgba(120,150,230,.4));--bt-drop:rgba(14,32,84,.8);--bt-glow:rgba(70,110,220,.38);--bt-ink:#13285c;
  font-family:"Inter","Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif}

/* ヘッダー（暗い地では透明・40px 動くと白） */
.hs-hdr{position:fixed;inset:0 0 auto 0;z-index:60;border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.hs-hdr.is-solid{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border-bottom-color:var(--hs-line)}
.hs-in{width:min(100% - 64px,1200px);margin-inline:auto;min-height:79px;display:flex;align-items:center;gap:clamp(14px,2vw,32px)}
.hs-brand{position:relative;display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:#fff;font-size:1.2rem;font-weight:700;letter-spacing:.01em;white-space:nowrap;transition:color .3s}
.hs-brand img{display:block;width:36px;height:36px}
.hs-brand .hs-crest{opacity:0;transition:opacity .3s}
.hs-brand .hs-crest-l{position:absolute;left:0;top:50%;transform:translateY(-50%);transition:opacity .3s}
.hs-hdr.is-solid .hs-brand{color:var(--hs-ink)}.hs-hdr.is-solid .hs-crest{opacity:1}.hs-hdr.is-solid .hs-crest-l{opacity:0}
.hs-tag{margin-left:6px;padding-left:16px;border-left:1px solid rgba(255,255,255,.28);font-size:.78rem;font-weight:500;letter-spacing:.08em;color:rgba(255,255,255,.78);transition:color .3s,border-color .3s}
.hs-hdr.is-solid .hs-tag{color:var(--hs-ink-2);border-left-color:var(--hs-line-2)}
.hs-nav{margin-left:auto}
.hs-nav ul{display:flex;align-items:center;gap:clamp(14px,2vw,30px);margin:0;padding:0;list-style:none}
.hs-nav a{white-space:nowrap;text-decoration:none;font-size:.92rem;font-weight:500;color:rgba(255,255,255,.8);transition:color .25s}
.hs-nav a:hover{color:#fff}
.hs-nav a[aria-current="page"]{color:#fff;font-weight:700}
.hs-hdr.is-solid .hs-nav a{color:var(--hs-ink-2)}.hs-hdr.is-solid .hs-nav a:hover,.hs-hdr.is-solid .hs-nav a[aria-current="page"]{color:var(--hs-ink)}
/* 主のCTA「ホームページを作る」＝藍のスペースグラス */
.hs-cta{display:inline-flex;align-items:center;min-height:42px;padding:0 1.2rem;border:1px solid transparent;border-radius:999px;text-decoration:none;white-space:nowrap;color:#fff!important;font-weight:600;letter-spacing:.05em;text-shadow:0 1px 1px rgba(4,12,40,.35);
  background:radial-gradient(120% 130% at 50% -38%,var(--bt-sheen) 0%,rgba(255,255,255,0) 62%) padding-box,linear-gradient(180deg,var(--bt-1),var(--bt-2)) padding-box,var(--bt-rim) border-box;
  box-shadow:inset 0 1px 0 var(--bt-inner),0 1px 2px rgba(4,10,28,.14),0 12px 26px -14px var(--bt-drop),0 0 28px -8px var(--bt-glow);transition:transform .25s var(--bt-ease),box-shadow .35s var(--bt-ease)}
.hs-cta:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--bt-inner),0 1px 2px rgba(4,10,28,.14),0 16px 30px -14px var(--bt-drop),0 0 40px -6px var(--bt-glow)}
/* 副のCTA「無料で診断」＝暗い地では煙色のガラス・白い地では白いガラス */
/* 「無料で診断」は暗い地でも白いガラス（2026-10-16 K「診断先に遷移させるボタンは白」。HP のヘッダーと同じ） */
.hs-nav .hs-cta2{display:inline-flex;align-items:center;min-height:42px;padding:0 1.1rem;border:1px solid transparent;border-radius:999px;color:var(--bt-ink);font-weight:600;letter-spacing:.05em;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(242,245,250,.88)) padding-box,linear-gradient(180deg,#fff,rgba(11,23,48,.1) 50%,rgba(11,23,48,.2)) border-box;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(11,23,48,.06),0 10px 24px -14px rgba(11,23,48,.3);transition:transform .25s var(--bt-ease),box-shadow .35s var(--bt-ease)}
.hs-nav .hs-cta2:hover{color:var(--bt-ink);transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(11,23,48,.06),0 14px 28px -14px rgba(11,23,48,.34)}
.hs-hdr.is-solid .hs-nav .hs-cta2{color:var(--bt-ink);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(242,245,250,.88)) padding-box,linear-gradient(180deg,#fff,rgba(11,23,48,.1) 50%,rgba(11,23,48,.2)) border-box;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(11,23,48,.06),0 10px 24px -14px rgba(11,23,48,.3)}
.hs-toggle{display:none;width:44px;height:40px;padding:0;margin-left:10px;background:none;border:1px solid rgba(255,255,255,.3);border-radius:8px;cursor:pointer}
.hs-toggle span{display:block;width:18px;height:1.5px;margin:4px auto;background:#fff;transition:background .3s}
.hs-hdr.is-solid .hs-toggle{border-color:var(--hs-line-2)}.hs-hdr.is-solid .hs-toggle span{background:var(--hs-ink)}
.hs-hdr :focus-visible,.hs-foot :focus-visible{outline:2px solid #6f9cff;outline-offset:3px}

/* フッター（HP と同じ） */
.hs-foot{padding:clamp(48px,6vw,80px) 0 36px;background:#fff;border-top:1px solid var(--hs-line);color:var(--hs-ink)}
.hs-foot-in{width:min(100% - 64px,1200px);margin-inline:auto}
.hs-foot-grid{display:grid;grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,56px)}
.hs-fbrand{display:inline-flex;align-items:center;gap:.65rem;color:var(--hs-ink);font-size:1.2rem;font-weight:700;text-decoration:none}
.hs-fbrand img{width:36px;height:36px}
.hs-foot p{margin:.9rem 0 0;color:var(--hs-ink-2);font-size:.88rem;max-width:38ch;line-height:1.85}
.hs-foot ul{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.hs-foot ul a{color:var(--hs-ink-2);font-size:.88rem;text-decoration:none}
.hs-foot ul a:hover{color:var(--hs-ai)}
.hs-foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:clamp(32px,3.6vw,52px);padding-top:20px;border-top:1px solid var(--hs-line);color:var(--hs-ink-3);font-size:.78rem}

/* ★作成ページのヘッダーも共通のヘッダーと同じ幅で切り替える（2026-10-17）: メニューボタンの形は 979px まで・添え書きは 1160px から */
@media (max-width:1159px){.hs-tag{display:none}}
@media (max-width:979px){
  .hs-in{width:calc(100% - 32px);min-height:63px}
  .hs-tag{display:none}
  .hs-brand{font-size:1.05rem;gap:.5rem}
  .hs-brand img{width:32px;height:32px}
  .hs-in{gap:10px}
  .hs-brand{flex:none}
  /* ★スマホのヘッダーの「ホームページを作る」は無くした（2026-10-17 持ち主）。下の帯「0円で、作りはじめる」と同じ行き先が上下に2つ出ていた */
  .hs-toggle{display:block;width:42px;margin-left:auto}
  .hs-nav{position:absolute;left:0;right:0;top:100%;display:none;margin:0;background:#fff;border-bottom:1px solid var(--hs-line)}
  .hs-nav.is-open{display:block}
  .hs-nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 18px}
  .hs-nav a{display:block;padding:.8rem 0;color:var(--hs-ink-2)!important}
  .hs-nav a[aria-current="page"]{color:var(--hs-ink)!important;font-weight:700}
  .hs-pc{display:none}
  .hs-nav .hs-cta2,.hs-hdr.is-solid .hs-nav .hs-cta2{display:inline-flex;justify-content:center;margin-top:10px;color:var(--bt-ink)!important;
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(242,245,250,.88)) padding-box,linear-gradient(180deg,#fff,rgba(11,23,48,.1) 50%,rgba(11,23,48,.2)) border-box;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(11,23,48,.06),0 10px 24px -14px rgba(11,23,48,.3)}
}
@media (max-width:900px){
  .hs-foot-in{width:calc(100% - 32px)}
  .hs-foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:560px){.hs-foot-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.hs-in{min-height:55px}}   /* ★スマホのヘッダーは 56px（HP と同じ・2026-10-17 持ち主） */
@media (max-width:374px){
  .hs-brand{gap:.4rem;font-size:.95rem}.hs-brand img{width:28px;height:28px}
  .hs-toggle{width:38px}
}
@media (prefers-reduced-motion:reduce){.hs-hdr,.hs-cta,.hs-nav .hs-cta2{transition:none}}

@media(min-width:980px) and (max-width:1279px){.hs-nav ul{gap:14px}}

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/inter-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.hs-hdr{line-height:1.85;font-feature-settings:"palt" 1,"kern" 1}