@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════
   下層ページ（pages/*.html）共通のCSS

   中身は2つだけ：
     ① ヘッダーを「読み物のページ」向けに微調整する
        （トップは1画面完結なのでヘッダーが半透明でも成立するが、
          下層は長い本文が下を流れるので、不透明にして高さを固定する）
     ② 背景の歯車

   ヘッダーそのものの見た目は css/header.css（トップと共用）。
   このファイルは下層だけが読む。トップには一切影響しない。
   ═══════════════════════════════════════════════════════════════ */

/* ── ① ヘッダーの下層向け調整 ─────────────────────────── */
body.subpage{ padding-top: 80px }
body.subpage header{
	height: 80px;
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-top: none;
	border-bottom: 1px solid #ececec;
	transform: none;      /* .start / .stop の出入りアニメーションは下層では使わない */
	opacity: 1;
	top: 0;
	transition: none;
}
body.subpage header .inner{
	display: flex;
	align-items: center;
	height: 80px;
	max-width: none;
}
body.subpage header .logo{ padding-top: 0; padding-bottom: 0 }

@media screen and (max-width: 1259px) {
	/* SPのハンバーガーは 81px 角。ヘッダーの高さ(80px)に合わせて上端を0にする */
	body.subpage .header_nav,
	body.subpage .stop .header_nav,
	body.subpage .start .header_nav{ top: 0; transform: translateX(0); transition: 0.3s all ease }
	body.subpage .open .header_nav{ transform: translateX(-11px) }
}
@media screen and (max-width: 767px) {
	body.subpage header{ background-color: rgba(255,255,255,0.94) }
	body.subpage header .logo{ padding-left: 20px }
	body.subpage .header_nav{ top: 0 }
}

/* ── ② 背景の歯車（旧leone-c.comの資産を継承）───────────────
   トップの歯車と同じ img/ob_*.svg を使う（＝画像は1組だけ。
   以前 hark.html は同じSVGを base64 で本文に埋め込んでいて約30KB増えていたが、
   ファイル参照に変えた。他のページでもブラウザのキャッシュがそのまま効く）

   ★方針：営業ページ・規約ページは「読ませるページ」なので、
     トップのような飛び込みアニメやクリック回転は入れない。ゆっくり回り続けるだけ。
   ★位置：本文の段組（max-width:760px）の外側だけに置く。
     calc(50% + 400px) ＝ 中央から400px外側なので、本文の文字には重ならない。
     画面が狭いと自然に画面外へ出るので、スマホでは見えなくなる（読みやすさ優先）。
   ─────────────────────────────────────────────────────── */
.gears{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.gears i{position:absolute;display:block;opacity:.5;will-change:transform}
.gears i>b{display:block;width:100%;height:100%;background-repeat:no-repeat;background-size:contain;
 background-position:center;will-change:transform}
.gears .g1{width:660px;height:660px;top:-10vh;left:calc(50% + 400px);animation:spinR 110s linear infinite}
.gears .g1>b{background-image:url("../img/ob_yellow.svg")}
.gears .g2{width:560px;height:560px;top:38vh;right:calc(50% + 400px);animation:spinL 137.5s linear infinite}
.gears .g2>b{background-image:url("../img/ob_blue.svg")}
.gears .g3{width:720px;height:720px;bottom:-22vh;left:calc(50% + 380px);animation:spinL 165s linear infinite}
.gears .g3>b{background-image:url("../img/ob_pink.svg")}
@keyframes spinR{to{transform:rotate(360deg)}}
@keyframes spinL{to{transform:rotate(-360deg)}}

/* スマホ：画面が狭いと歯車が完全に画面外へ出てしまうので、小さく・薄くして端から覗かせる */
@media(max-width:900px){
 .gears i{opacity:.4}
 /* 縦に重ならないよう間隔を空ける（844px想定で 黄:-84〜216 / 青:270〜550 / ピンク:642〜962） */
 .gears .g1{width:300px;height:300px;top:-10vh;right:auto;left:-30vw}
 .gears .g2{width:280px;height:280px;top:32vh;left:auto;right:-30vw}
 .gears .g3{width:320px;height:320px;bottom:-14vh;right:auto;left:-32vw}
}

/* 本文を歯車より前に出す（各ページの .wrap に position/z-index が無くても効くように、ここでまとめて指定） */
body.subpage .wrap{position:relative;z-index:1}

/* 「動きを減らす」設定の人には回さない（OSのアクセシビリティ設定に従う） */
@media(prefers-reduced-motion:reduce){ .gears i{animation:none} }
/* 印刷時は消す（特商法・利用規約・プライバシーポリシーは印刷される想定） */
@media print{ .gears{display:none} }