/* 動くトップ画面のデモ（谷川SEOサービス・架空の会社）の見た目。着地の画面は 案1 の並べ方を写した。
   2026-10-11 nishi-web のサイトに組むときに変えたこと：
   ・頁（または枠）の画面にぴったり収める（はみ出して縦に流れない）。枠が小さくても着地の画面が収まるよう、
     文字と余白を画面の大きさに合わせて縮める（元の大きさを上限にする）
   ・横長の画面と縦長の画面で並べ方を分ける（元は幅 768px で分けていた。枠の中では幅より形で分けるほうが合う）。
     縦長ではボタンを縦に積む（2 つ並べると「nishi-webのトップへ」が折り返すため）
   ・待ち受けの画像（全部の場面を読み終えるまで見せる）
   ・着地のボタンは「もう一度見る」と「トップへ」だけ */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#000}
body{color:#ffd9b8;font-family:"BIZ UDPGothic","Yu Gothic","Noto Sans JP",sans-serif}

.hero{position:relative;height:100vh;height:100svh;overflow:hidden;background:#000}

/* 着地の画面（縦長の画面の並べ方。横長は下の @media） */
.landing-bg{position:absolute;inset:0;z-index:0}
.landing-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;display:block}
.landing-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,0) 100%);pointer-events:none}
.landing{position:relative;z-index:1;height:100%;padding:clamp(28px,9.6vw,72px) clamp(18px,5.3vw,48px) 32px;display:flex;flex-direction:column;align-items:flex-start}
/* 文節で折り返す（サイト本体の style.css と同じ。2026-10-11 電話で「とし／て」と割れた） */
.landing{line-break:strict;word-break:auto-phrase}
.landing .note{text-wrap:balance}
.logo{display:flex;align-items:center;gap:12px;color:#fff6ee;font-weight:700;font-size:clamp(16px,4.8vw,24px);margin-bottom:clamp(20px,7.5vw,40px)}
.logo img{width:clamp(40px,11.7vw,64px);height:clamp(40px,11.7vw,64px);display:block}
.landing h1{margin:0 0 16px;color:#fff6ee;font-size:clamp(24px,7.47vw,44px);line-height:1.35;font-weight:700;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.landing h1 span{display:block}   /* 1 行ずつ（横長の低い画面でも 2 行に） */
.landing h1 strong{font-weight:inherit;color:#ff8a3d}
.sub{margin:0 0 24px;font-size:clamp(14px,4vw,20px);line-height:1.7;color:#ffd9b8}
.btns{display:flex;flex-wrap:wrap;gap:10px;width:100%;margin-bottom:20px}
.btn{flex:1 1 100%;min-height:48px;white-space:nowrap;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:15px;font-weight:700;text-decoration:none;color:#ffd9b8;background:rgba(18,16,16,.85);border:2px solid #2a2520;padding:0 8px;text-align:center}
.btn.main{background:#ff8a3d;border-color:#ff8a3d;color:#1a0f06}
.btn:hover{border-color:#ff8a3d}
.btn:focus-visible{outline:2px solid #fff6ee;outline-offset:2px}
.note{margin:0;font-size:14px;line-height:1.7;color:#ffd9b8}

/* 物語を流す舞台（着地の画面の上にかぶせる） */
.stage{position:absolute;inset:0;z-index:2;background:#000;display:none}
.stage .layer{position:absolute;inset:0;overflow:hidden}
.stage canvas{display:block;width:100%;height:100%}
.hero-anim .stage{display:block}
.hero-anim .landing-bg,.hero-anim [data-land]{opacity:0}

/* 待ち受けの画像（全部の場面を読み終えて流し始めるまで、舞台の上に出す） */
.poster{position:absolute;inset:0;z-index:3;display:none;background:#000}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-anim .poster{display:block}
.poster[hidden]{display:none!important}

/* とばす・音を出す */
.ui{position:absolute;z-index:5;bottom:16px;min-height:44px;padding:0 18px;border-radius:22px;border:1px solid rgba(255,217,184,.38);background:rgba(0,0,0,.5);color:#ffd9b8;font:700 14px/1 "BIZ UDPGothic","Yu Gothic","Noto Sans JP",sans-serif;letter-spacing:.04em;cursor:pointer;display:none}
.ui:hover{border-color:#ff8a3d;color:#fff6ee}
.ui:focus-visible{outline:2px solid #ff8a3d;outline-offset:2px}
.hero-anim .ui{display:block}
.ui[hidden]{display:none!important}
.skip{right:16px}
.sound{left:16px}
.sound[aria-pressed="true"]{border-color:#ff8a3d;color:#fff6ee}

/* 横長の画面（PC・枠の 16:9）。文字と余白は画面の高さに合わせて縮め、元の大きさ（高さ 720px のとき）を上限にする */
@media (orientation:landscape){
.landing-bg img{object-position:center}
.landing-bg::after{background:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 55%,rgba(0,0,0,0) 100%)}
.landing{padding:min(72px,10vh) min(96px,7.5vw) min(56px,7.8vh);justify-content:center}
.logo{font-size:clamp(14px,3.33vh,24px);margin-bottom:clamp(14px,6.67vh,48px)}
.logo img{width:clamp(36px,8.9vh,64px);height:clamp(36px,8.9vh,64px)}
.landing h1{font-size:clamp(22px,min(8.33vh,5.2vw),60px);line-height:1.3;margin-bottom:clamp(10px,2.8vh,20px)}
.sub{font-size:clamp(13px,2.78vh,20px);margin-bottom:clamp(14px,5.56vh,40px)}
.btns{width:auto;flex-wrap:nowrap;gap:clamp(10px,2.2vh,16px);margin-bottom:clamp(12px,3.9vh,28px)}
.btn{flex:0 0 auto;min-width:clamp(160px,33vh,240px);padding:0 1.2em;font-size:clamp(14px,2.5vh,18px);min-height:clamp(40px,8.33vh,60px)}
.note{font-size:clamp(13px,2.5vh,18px)}
.ui{bottom:clamp(12px,3.3vh,24px);font-size:15px}
.skip{right:clamp(12px,1.9vw,24px)}.sound{left:clamp(12px,1.9vw,24px)}
}