/* ============================================================
   noren-fv.css — ファーストビューの共通の決まり（2026-10-14 持ち主の基準）
   PC でもスマホでも、最初の1画面＝ヘッダー80px＋ヒーロー（画面の高さ−80px）。
   ヘッダーは固定（position:fixed）でヒーローの上に重なるので、ヒーローの要素は画面の一番上から始まり、
   最小の高さ＝画面の高さ・上の余白でヘッダーの80pxをよける＝見えるヒーローがちょうど「画面−80px」。
   ★中身が1画面に入らない端末では、はみ出さずにヒーローが伸びる（min-height）。
   ★100svh：スマホのアドレスバーが出ている時の高さ。対応していないブラウザは 100vh を使う。
   ============================================================ */
:root{--hdr:80px}
/* ★スマホ（〜640px）のヘッダーは 56px（2026-10-17 持ち主「読める画面が狭い・情報量が多すぎる」）。ロゴの紋 32px とメニュー 40px が入る高さ。
   ヘッダーの「ホームページを作る」を無くしたので 80px の中身はロゴとメニューだけになっていた。タブレット・パソコンは 80px のまま */
@media (max-width:640px){:root{--hdr:56px}}
.site-header .header-inner{min-height:calc(var(--hdr) - 1px)}   /* 下の線1pxと合わせて --hdr */

/* 下層ページ（料金・サポート・ガイド・記事・規約など） */
.page-hero{
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(var(--hdr) + clamp(24px,5vh,64px));
  padding-bottom:clamp(24px,5vh,64px);
}

/* 下層ページは画面いっぱいの高さになるので、見出しを大きく・パンくずはヘッダーのすぐ下に置き、
   見出しの塊を画面の真ん中に。下に「スクロールして続きを読む」の印を添えて間延びさせない */
.page-hero .breadcrumbs{position:absolute;top:calc(var(--hdr) + clamp(14px,2.4vh,24px));margin:0}
.page-hero > .container{position:static}
.page-hero h1{font-size:clamp(2.1rem,min(5vw,6.4vh),4rem)}
.page-hero .lead{font-size:clamp(1.02rem,min(1.5vw,2.2vh),1.25rem)}
.page-hero > .container::after{content:"";position:absolute;left:50%;bottom:clamp(16px,3vh,28px);width:1px;height:clamp(28px,5vh,48px);
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.7));animation:fvcue 2.4s ease-in-out infinite}
@keyframes fvcue{0%,100%{opacity:.35;transform:translateY(-6px)}50%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.page-hero > .container::after{animation:none}}
@media (max-height:600px){.page-hero > .container::after{display:none}.page-hero .breadcrumbs{position:static;margin-bottom:6px}}

/* トップ（.hg）。★トップの中に直接書かれた指定より後に効かせるため .hg .hg-inner で書く */
.hg .hg-inner{
  min-height:100vh;min-height:100svh;
  align-content:center;
  padding-top:calc(var(--hdr) + clamp(16px,3vh,40px));
  padding-bottom:clamp(16px,3vh,40px);
}
/* 幅1100px以下でも横向き（ノートPC・横向きのタブレット）は、文と画面の絵を横に並べたまま1画面に収める */
@media (min-width:901px) and (max-width:1100px) and (orientation:landscape){
  .hg .hg-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
  .hg .hg-app{justify-self:end;width:100%;max-width:none;margin:0}
}
/* 文と絵が縦に並ぶ画面（縦向きのタブレット・スマホ）：ヒーロー＝文の塊。画面の絵はその下に置く */
@media (max-width:1100px) and (orientation:portrait), (max-width:900px){
  .hg .hg-inner{min-height:0;align-content:start;padding-top:var(--hdr);padding-bottom:clamp(32px,6vw,56px)}
  .hg .hg-copy{min-height:calc(100vh - var(--hdr));min-height:calc(100svh - var(--hdr));
    display:flex;flex-direction:column;justify-content:center;padding-block:clamp(12px,3vh,32px)}
}
/* 背の低い画面（いちばん小さいスマホ・横向きのスマホ）：文の塊を詰めて1画面に収める */
@media (max-height:600px){
  .hg .hg-title{font-size:clamp(1.55rem,5.2vh,2rem);line-height:1.28}
  .hg .hg-lead{margin-top:12px;font-size:.92rem;line-height:1.7}
  .hg .hg-ctas{margin-top:16px;gap:10px}
  .hg .hg-cta{gap:5px}
  .hg .hg-btn{min-height:46px}
  .hg .hg-cta-note{font-size:.72rem}
  .hg .hg-copy{padding-block:8px}
}
@media (max-height:600px) and (orientation:landscape){
  .hg .hg-ctas{flex-wrap:nowrap}
  .hg .hg-cta{flex:1 1 0}
}
/* 下層ページのヒーローも、背の低い画面では見出しと説明を詰める */
@media (max-height:600px){
  .page-hero{padding-top:calc(var(--hdr) + 12px);padding-bottom:12px}
  .page-hero h1{font-size:clamp(1.4rem,5.4vh,1.9rem);line-height:1.3}
  .page-hero .lead,.page-hero .fine{margin-top:8px;font-size:.86rem;line-height:1.65}
  .page-hero .breadcrumbs{margin-bottom:6px}
  .page-hero .kicker{margin-bottom:4px}
}