@charset "UTF-8";
/* Webフォントは index.html の head で読み込む（@import だと読み込みが遅れるため、2026-10-28） */
/* ==========================================================
トップページ専用CSS
- すべて .p-top 配下にスコープ（既存サイトに影響させない）
- スマホファースト：基本はSP、PCは min-width で上書き
【サイズの単位】
カンプ（幅375px）の 1px を --top-u として、寸法はすべて
calc(カンプのpx値 * var(--top-u)) で書く。
→ .p-top の幅に比例して拡大縮小するので、320px〜430px のどのスマホでも
カンプと同じ見た目（折り返し位置・重なり）になる。
- line-height は単位なし、letter-spacing は em（カンプの%÷100）
- 枠線（border）の太さだけは px 固定。ブラウザが物理ピクセル単位に切り捨てるため、
比例させると幅によって 2px → 1.5px のように細くなる
- 縦に並べるだけの箇所は flex を使わず、通常の並び＋margin で間隔をとる
========================================================== */
/* ---------- トップページ用ヘッダー ----------
main（.p-top）の外に置くため、.p-top と同じ考え方で .p-top-header 配下にスコープする。
サイズは .p-top と同じく幅375基準で比例（--top-u をここでも定義） */
.p-top-header {
--top-u: calc(100cqw / 375);
container-type: inline-size;
max-width: 500px;
margin-inline: auto;
background-color: #fff;
}
.p-top-header,
.p-top-header *,
.p-top-header *::before,
.p-top-header *::after {
box-sizing: border-box;
}
.p-top-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: calc(57 * var(--top-u));
padding: 0 calc(16 * var(--top-u));
}
/* セカンドビューから（SPはFVの写真が画面の上へ抜けたら）：ヘッダーを画面上部に固定し、上から出す（.is-fixed はJSが付ける）。
PC・タブレットは768の中で上書き */
.p-top-header.is-fixed {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 20;
animation: p-top-header-fixed-in 0.4s ease-out;
}
.p-top-header.is-fixed .p-top-header__inner {
box-shadow: 0 calc(2 * var(--top-u)) calc(8 * var(--top-u)) rgba(0, 0, 0, 0.08);
}
/* 固定したヘッダーは流れから抜けるので、その高さ（57）の分だけ本文の先頭に空きを入れてずれを防ぐ。
.p-top の中の要素（::before）にすると、--top-u がヘッダーと同じ幅（.p-top の幅）の基準になる */
.p-top-header.is-fixed + .p-top::before {
content: "";
display: block;
height: calc(57 * var(--top-u));
}
@keyframes p-top-header-fixed-in {
from {
transform: translateY(-100%);
}
}
@media (prefers-reduced-motion: reduce) {
.p-top-header.is-fixed {
animation: none;
}
}
/* ページ内リンクで移動したとき、見出しが固定ヘッダー（57）の下に隠れないようにする（PCは768の中で上書き） */
.p-top [id] {
scroll-margin-top: calc(67 * var(--top-u));
}
.p-top-header__logo {
display: block;
line-height: 0;
}
.p-top-header__logo img {
width: calc(138.19 * var(--top-u));
height: auto;
}
/* ハンバーガー：緑の丸に白い2本線（画像を使わずCSSで描く） */
.p-top-header__menu {
position: relative;
width: calc(50 * var(--top-u));
height: calc(50 * var(--top-u));
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background-color: #10ad5e;
cursor: pointer;
}
/* PCだけ表示するメニュー・MENUの文字・右端の固定CTA */
.p-top-header__nav,
.p-top-header__side,
.p-top-header__menu-text {
display: none;
}
.p-top-header__menu:focus-visible {
outline: 2px solid #333;
outline-offset: 2px;
}
.p-top-header__menu-line::before,
.p-top-header__menu-line::after {
content: "";
position: absolute;
left: calc(12 * var(--top-u));
width: calc(26 * var(--top-u));
height: 2px;
border-radius: 1px;
background-color: #fff;
}
/* 線の位置はFigmaの表示から実測（書き出しコードの数値は見た目と合わないため） */
.p-top-header__menu-line::before {
top: calc(21.5 * var(--top-u) - 1px);
}
.p-top-header__menu-line::after {
top: calc(29.5 * var(--top-u) - 1px);
}
/* ---------- ドロワーメニュー（MENUボタンで開く