/* このファイルは tools/build-css.sh で自動で作っています。直接は直さず、assets/css/ の中の各ファイルを直してから作り直してください */
/* ---- foundation/_variables.css ---- */
/* デザインの基本値（Figmaの色スタイル・文字スタイル）
ブレイクポイント：1439（ヘッダーを詰める）／ 1239（ヘッダーのメニュー切替）／ 1200 ／ 1024 ／ 768（スマホ） */
:root {
/* 色 */
--color-text: #4a403c; /* Ranto_アクセント（見出し・本文） */
--color-sub: #7b6f69; /* Rant_logo茶（説明文・線） */
--color-red: #da3c31; /* Rant＿logo赤 */
--color-red-light: #e0493e;
--color-bg: #faf7f3; /* Ranto_メインbg */
--color-paper: #fcfbf8;
--color-white: #fff;
--color-header: #ded3c9; /* ヘッダーの背景 */
--color-section: #f4f0ec; /* セクションの背景（SERVICESなど） */
--color-navy: #181b5e; /* ショップボタンの枠 */
--color-orange: #ef9706; /* ショップボタンの文字・アイコン */
/* やわらかい光（ぼかしの丸）の色。使うときは rgb(var(--glow-peach) / .5) のように濃さを足す */
--glow-peach: 245 214 190; /* 写真の後ろ（SERVICES・SHOP・RESCUE） */
--glow-rose: 240 205 195; /* 写真の後ろ・文章の後ろ（RESCUE・BRAND STORY・代表メッセージ） */
--glow-cream: 250 225 200; /* 代表メッセージの右上 */
--glow-terracotta: 209 150 132; /* Figmaの #D19684（Rantoについて・サービスの写真の影） */
--glow-paper: 248 245 241; /* FVの文字の後ろの白いぼかし */
/* グラデーション */
--grad-red: linear-gradient(171.7deg, #e0493e 14.234%, #da3c31 46.377%, #c2352b 85.662%); /* Ranto_ボタン赤 */
/* 書体 */
--font-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
--font-en: "Marcellus", serif;
/* 幅・余白 */
--content: 1140px;
--gutter: 150px;
--header-h: 118px;
}
@media (max-width: 1200px) { :root { --gutter: 60px; } }
@media (max-width: 1239px) { :root { --header-h: 88px; } }
@media (max-width: 768px) { :root { --gutter: 20px; --header-h: 72px; } }
/* ---- foundation/_base.css ---- */
/* リセット・本文の基本・フォーカス表示 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-jp);
font-size: 18px;
line-height: 1.8;
-webkit-font-smoothing: antialiased;
line-break: strict;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, p, li, dd { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--color-red); outline-offset: 4px; }
/* 飾り（ぼかしの光・イラスト）が横にはみ出しても、横スクロールが出ないように */
main { overflow-x: clip; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 200; padding: 12px 16px; background: var(--color-white); }
.skip-link:focus { top: 12px; }
/* メニューを開いている間、背景のページを固定（iOSでも効く方法：js/main.js の「1. メインメニュー」） */
.is-scroll-locked { position: fixed; left: 0; right: 0; overflow: hidden; }
@media (max-width: 768px) { body { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
/* 動きを減らす設定の端末：動きは一瞬で終わらせ、出るまでの待ち時間もなくす（すぐ最後の見た目になる） */
*, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}
/* ---- layout/_container.css ---- */
/* コンテンツ幅（1140px）と左右の余白 */
.l-container { width: min(100%, calc(var(--content) + var(--gutter) * 2)); margin-inline: auto; padding-inline: var(--gutter); }
/* ---- layout/_header.css ---- */
/* ヘッダー＋メインメニュー（開閉は js/main.js の「1. メインメニュー」）
下の角が丸いベージュの帯。1240〜1439pxは余白を詰めた形、1239px以下はハンバーガーメニュー
SERVICE は押すと、ヘッダーの下に CARE・WELLNESS が出る（Figma 377:2772。js/main.js の「1. メインメニュー」） */
.l-header {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
min-height: var(--header-h); padding-inline: 80px 90px; /* 右はFigmaどおり90px（ボタンの外側に10pxの余白がある作り） */
border-radius: 0 0 60px 60px; background: var(--color-header);
}
/* ログイン中は、管理バーの下に固定（782px以下は管理バーが高く、600px以下は管理バーが一緒にスクロールする） */
.admin-bar .l-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .l-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .l-header { top: 0; } }
.l-header__logo img { width: 80px; height: 87px; object-fit: contain; }
.l-header__nav { display: flex; align-items: center; gap: 50px; padding-block: 20px; }
.l-header__menu { display: flex; align-items: center; gap: 24px; font-family: var(--font-en); font-size: 18px; line-height: 1; color: var(--color-text); white-space: nowrap; }
.l-header__menu > li { position: relative; }
.l-header__menu a, .l-header__parent { display: inline-flex; align-items: center; padding-block: 8px; transition: color .3s; }
@media (hover: hover) { .l-header__menu a:hover, .l-header__parent:hover { color: var(--color-red); } }
.l-header__parent { gap: 0; padding-inline: 0; border: 0; background: none; font: inherit; line-height: 1; cursor: pointer; }
.l-header__parent img { width: 19.7px; height: 19.8px; transition: transform .3s; }
.l-header__parent[aria-expanded="true"] img { transform: rotate(180deg); }
/* ヘッダーの下にぶら下がるベージュの箱（上はヘッダーとつながり、下の角だけ丸い） */
.l-header__sub {
position: absolute; left: -20px; top: calc(50% + var(--header-h) / 2 - 1px); z-index: -1;
display: flex; flex-direction: column; gap: 24px; min-width: 166px; padding: 20px 40px 40px 20px;
border-radius: 0 0 40px 40px; background: var(--color-header);
transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s;
}
.l-header__sub a { display: block; padding: 0 0 4px; border-bottom: 1px dashed var(--color-sub); white-space: nowrap; }
.l-header__sub a::before { content: "— "; }
.l-header__parent[aria-expanded="true"] + .l-header__sub { opacity: 1; visibility: visible; transform: none; }
.l-header__actions { display: flex; align-items: center; gap: 36px; }
.l-header__toggle { display: none; }
/* 1240〜1439px：横に収まるよう、余白と間隔を詰める */
@media (max-width: 1439px) {
.l-header { padding-inline: 40px; }
.l-header__nav { gap: 24px; }
.l-header__menu { gap: 16px; }
.l-header__actions { gap: 20px; }
}
@media (max-width: 1239px) {
.l-header { padding-inline: 32px; border-radius: 0 0 40px 40px; }
.l-header__logo { position: relative; z-index: 110; } /* メニューを開いてもロゴを表示 */
.l-header__logo img { width: 60px; height: 65px; }
.l-header__toggle {
position: relative; z-index: 110; display: flex; flex-direction: column; justify-content: center; gap: 7px;
width: 44px; height: 44px; padding: 0 9px; border: 0; background: none; cursor: pointer;
}
.l-header__toggle span { display: block; height: 2px; border-radius: 1px; background: var(--color-text); transition: transform .3s, opacity .3s; }
.l-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.l-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.l-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.l-header__nav {
position: fixed; inset: 0; z-index: 105; overflow-y: auto;
flex-direction: column; justify-content: center; gap: 40px; padding: 96px 24px 48px;
background: var(--color-header); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.l-header__nav.is-open { opacity: 1; visibility: visible; }
.admin-bar .l-header__nav { top: 32px; } /* 開いたメニューが管理バーに隠れないように */
.l-header__menu { flex-direction: column; gap: 22px; font-size: 22px; text-align: center; }
/* メニューの中では、SERVICE を押すと下に CARE・WELLNESS が開く */
.l-header__sub { position: static; display: none; gap: 14px; min-width: 0; margin-top: 16px; padding: 0; border-radius: 0; background: none; transform: none; opacity: 1; visibility: visible; font-size: 18px; }
.l-header__parent[aria-expanded="true"] + .l-header__sub { display: flex; }
.l-header__sub a { padding: 0 8px 4px; }
.l-header__actions { flex-direction: column; gap: 16px; }
}
@media (max-width: 782px) { .admin-bar .l-header__nav { top: 46px; } }
@media (max-width: 768px) {
.l-header { padding-inline: 16px; border-radius: 0 0 28px 28px; }
.l-header__logo img { width: 52px; height: 57px; }
}
/* ---- layout/_footer.css ---- */
/* フッター（ロゴ・SNS／メニュー／LINE・ショップのボタン／プライバシーポリシーと©） */
.l-footer { display: flex; flex-direction: column; gap: 40px; padding-top: 32px; background: var(--color-text); color: var(--color-bg); }
.l-footer__top { display: flex; align-items: flex-start; justify-content: center; gap: 80px; padding-inline: var(--gutter); }
.l-footer__brand { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 76px; align-self: stretch; }
/* ロゴは、ヘッダーと同じ「犬のマークの下に文字」の並び（白） */
.l-footer__logo img { width: 100px; height: 109px; }
.l-footer__sns { display: flex; justify-content: space-between; width: 200px; padding-inline: 8px; }
.l-footer__sns a { transition: opacity .3s; }
@media (hover: hover) { .l-footer__sns a:hover { opacity: .7; } }
.l-footer__sns img { width: 40px; height: 40px; }
.l-footer__body { display: flex; align-items: flex-start; gap: 80px; }
.l-footer__menu { display: flex; gap: 32px; padding-top: 47px; font-family: var(--font-en); font-size: 18px; line-height: 1; white-space: nowrap; }
.l-footer__menu a { transition: opacity .3s; }
@media (hover: hover) { .l-footer__menu a:hover { opacity: .7; } }
/* SERVICE：押すと CARE・WELLNESS が開く（ヘッダーと同じ js/main.js の「1. メインメニュー」。ほかの場所を押す・Escキーで閉じる）
JSが動かないときは、最初から開いた形 */
.l-footer__parent { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; font: inherit; line-height: 1; color: inherit; cursor: pointer; transition: opacity .3s; }
@media (hover: hover) { .l-footer__parent:hover { opacity: .7; } }
.l-footer__parent img { width: 19.7px; height: 19.8px; transition: transform .3s; }
.l-footer__parent[aria-expanded="true"] img { transform: rotate(180deg); }
.l-footer__sub { margin-top: 16px; font-size: 16px; }
.js .l-footer__sub { max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height .3s, margin-top .3s, opacity .3s, visibility .3s; }
.js .l-footer__parent[aria-expanded="true"] + .l-footer__sub { max-height: 120px; margin-top: 16px; opacity: 1; visibility: visible; }
.l-footer__sub li + li { margin-top: 16px; }
.l-footer__sub a::before { content: "— "; }
.l-footer__actions { display: flex; flex-direction: column; align-items: center; gap: 36px; padding-top: 25px; }
.l-footer__actions > :first-child { margin-bottom: -10px; } /* Figmaどおり：2つのボタンの間を少し詰める */
.l-footer__bottom {
display: flex; justify-content: center; gap: 40px; padding: 16px var(--gutter) 8px;
border-top: 1px dashed var(--color-bg); font-size: 11px; line-height: 22px; letter-spacing: .32px;
}
@media (hover: hover) { .l-footer__bottom a:hover { opacity: .7; } }
@media (max-width: 1200px) {
.l-footer__top { flex-wrap: wrap; gap: 48px 64px; }
.l-footer__body { flex-wrap: wrap; justify-content: center; gap: 40px 64px; }
}
@media (max-width: 1024px) {
.l-footer__top { flex-direction: column; align-items: center; }
.l-footer__brand { align-self: auto; gap: 32px; }
.l-footer__body { flex-direction: column; align-items: center; }
.l-footer__menu { flex-wrap: wrap; justify-content: center; gap: 24px 28px; padding-top: 0; }
.l-footer__actions { padding-top: 0; }
}
@media (max-width: 768px) {
.l-footer { gap: 32px; padding-top: 48px; }
.l-footer__logo img { width: 80px; height: 87px; }
.l-footer__menu { flex-direction: column; align-items: center; gap: 20px; font-size: 16px; text-align: center; }
/* スマホは、ヘッダーのメニューと同じく CARE・WELLNESS を下に縦に並べ、点線の下線を付ける（地が濃いので線は明るい色） */
.l-footer__sub { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 16px; font-size: 14px; }
.js .l-footer__parent[aria-expanded="true"] + .l-footer__sub { margin-top: 16px; }
.l-footer__sub li + li { margin-top: 0; }
.l-footer__sub a { display: block; padding: 0 8px 4px; border-bottom: 1px dashed var(--color-bg); }
.l-footer__actions { gap: 20px; }
.l-footer__actions > :first-child { margin-bottom: 0; }
.l-footer__bottom { padding-bottom: 16px; }
}
.l-footer__bottom small { font-size: inherit; }
/* ---- component/_button.css ---- */
/* ボタン（丸いピル型）
変化形：--line（LINEで相談する）／--shop（ショップを見る）／--more（詳しく見る）／--partner（提携について）
マウスを乗せたとき：文字が太字・枠が3px・アイコンが塗りの形に替わって少し傾く
（枠の太さは box-shadow で足すので、太くなっても大きさは変わらない）
.is-hover：スマホ・タブレットで、マウスを乗せたときと同じ見た目を一時的に見せる（js/main.js） */
.c-button {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
min-height: 56px; padding: 16px 24px;
border: 1px solid transparent; border-radius: 70px;
font-family: var(--font-jp); font-size: 20px; font-weight: 400; line-height: 1; white-space: nowrap;
cursor: pointer; transition: box-shadow .25s, scale .15s;
}
.c-button__icon { width: 24px; height: 24px; flex-shrink: 0; transition: transform .25s; }
.c-button__icon--hover { display: none; }
.c-button:focus-visible, .c-button.is-hover { font-weight: 700; }
@media (hover: hover) { .c-button:hover { font-weight: 700; } }
.c-button:focus-visible .c-button__icon, .c-button.is-hover .c-button__icon { transform: rotate(-25deg); }
@media (hover: hover) { .c-button:hover .c-button__icon { transform: rotate(-25deg); } }
.c-button:focus-visible .c-button__icon--default, .c-button.is-hover .c-button__icon--default { display: none; }
@media (hover: hover) { .c-button:hover .c-button__icon--default { display: none; } }
.c-button:focus-visible .c-button__icon--hover, .c-button.is-hover .c-button__icon--hover { display: block; }
@media (hover: hover) { .c-button:hover .c-button__icon--hover { display: block; } }
/* LINEで相談する：赤のグラデーション */
.c-button--line { min-width: 223px; background: var(--grad-red); color: var(--color-bg); }
/* ショップを見る：白に紺の枠、オレンジの文字 */
.c-button--shop { width: 220px; gap: 9px; background: var(--color-white); border-color: var(--color-navy); color: var(--color-orange); font-weight: 500; }
.c-button--shop:focus-visible, .c-button--shop.is-hover { font-weight: 500; box-shadow: inset 0 0 0 2px var(--color-navy); }
@media (hover: hover) { .c-button--shop:hover { font-weight: 500; box-shadow: inset 0 0 0 2px var(--color-navy); } }
/* 押したとき（PCのクリック・スマホのタップ）：少し沈み、マウスを乗せたときと同じ見た目（太い枠・塗りの肉球が傾く）に
スマホで画面に入ったときの動きは js/main.js の「2. ボタンの動き」（.is-hover を一時的に付ける） */
.c-button--shop:active { scale: .96; box-shadow: inset 0 0 0 2px var(--color-navy); }
.c-button--shop:active .c-button__icon { transform: rotate(-25deg); }
.c-button--shop:active .c-button__icon--default { display: none; }
.c-button--shop:active .c-button__icon--hover { display: block; }
/* 提携について：大きめの文字、茶色の枠 */
.c-button--partner { min-height: 63px; padding: 16px 32px; background: var(--color-paper); border-color: var(--color-sub); color: var(--color-sub); font-size: 24px; font-weight: 500; line-height: 1.2; }
.c-button--partner .c-button__icon { width: 31px; height: 31px; padding: 6px 4px 6px 4.5px; transform: none; }
.c-button--partner:focus-visible, .c-button--partner.is-hover { box-shadow: inset 0 0 0 2px var(--color-sub); }
@media (hover: hover) { .c-button--partner:hover { box-shadow: inset 0 0 0 2px var(--color-sub); } }
.c-button--partner:focus-visible .c-button__icon, .c-button--partner.is-hover .c-button__icon { width: 33px; height: 33px; padding: 7px 1px 4px 5px; transform: none; }
@media (hover: hover) { .c-button--partner:hover .c-button__icon { width: 33px; height: 33px; padding: 7px 1px 4px 5px; transform: none; } }
/* 詳しく見る（Figma Component 31）：生成りの地に赤い細枠・赤い文字。右に丸い矢印
マウスを乗せる／キーボードで選ぶと、文字が太くなり、枠が太くなり、矢印がアイコンの形のまま右へ少し動く */
.c-button--more { width: 220px; min-height: 60px; gap: 10px; padding: 20px 24px; border-color: var(--color-red); background: var(--color-bg); color: var(--color-red); }
.c-button--more .c-button__icon { width: 20px; height: 20px; transition: translate .25s; }
.c-button--more:focus-visible, .c-button--more.is-hover { font-weight: 700; box-shadow: inset 0 0 0 3px var(--color-red); }
.c-button--more:focus-visible .c-button__icon, .c-button--more.is-hover .c-button__icon { transform: none; translate: 6px 0; }
@media (hover: hover) {
.c-button--more:hover { font-weight: 700; box-shadow: inset 0 0 0 3px var(--color-red); }
.c-button--more:hover .c-button__icon { transform: none; translate: 6px 0; }
}
/* スマホ・タブレット（マウスなし）：指で押しているあいだも同じ見た目に。画面に入ったときの動きは js/main.js の「2. ボタンの動き」（.is-hover を一時的に付ける） */
@media (hover: none) {
.c-button--more:active { font-weight: 700; box-shadow: inset 0 0 0 3px var(--color-red); }
.c-button--more:active .c-button__icon { transform: none; translate: 6px 0; }
}
@media (max-width: 768px) {
.c-button { min-height: 52px; padding: 14px 22px; font-size: 18px; }
.c-button--line { min-width: 208px; }
.c-button--shop { width: 208px; }
.c-button--partner { min-height: 56px; padding: 14px 28px; font-size: 20px; }
.c-button--more { width: 200px; min-height: 52px; padding: 14px 22px; }
}
/* ---- component/_section-heading.css ---- */
/* セクション見出し（日本語の大見出し＋赤い英字） 例：Rantoの2つの柱／OUR SERVICES
変化形：--center（中央そろえ） */
.c-section-heading { display: flex; flex-direction: column; gap: 32px; }
.c-section-heading__title { font-size: 40px; font-weight: 700; line-height: 64.8px; color: var(--color-text); }
.c-section-heading__en { font-family: var(--font-en); font-size: 18px; line-height: 1; color: var(--color-red); }
.c-section-heading--center { align-items: center; text-align: center; }
@media (max-width: 768px) {
.c-section-heading { gap: 14px; }
.c-section-heading__title { font-size: 28px; line-height: 1.5; }
.c-section-heading__en { font-size: 16px; }
}
/* ---- component/_section-lead.css ---- */
/* セクション見出しの下の「小見出し＋説明文」（トップの SERVICES・SHOP・RESCUE）
例：Ran to — CARE ／ その子との毎日を、もっと心地よく。
変化形：--tight（小見出しが2行以上あるとき。小見出しと説明文の間を20pxに） */
.c-section-lead { display: flex; flex-direction: column; gap: 32px; width: min(100%, 570px); margin-top: 32px; color: var(--color-text); }
.c-section-lead--tight { gap: 20px; }
.c-section-lead__subs { display: flex; flex-direction: column; gap: 16px; }
.c-section-lead__sub { font-size: 24px; font-weight: 500; line-height: 1.8; }
.c-section-lead__text { font-size: 18px; line-height: 1.8; }
@media (max-width: 768px) {
.c-section-lead { gap: 16px; margin-top: 20px; }
.c-section-lead--tight { gap: 12px; }
.c-section-lead__subs { gap: 4px; }
.c-section-lead__sub { font-size: 19px; line-height: 1.6; }
.c-section-lead__text { font-size: 16px; }
}
/* ---- component/_page-title.css ---- */
/* 下層ページの見出し（h1）：日本語＋その下に中央そろえの赤い英字 例：Rantoについて／ABOUT US
変化形：--light（写真の上で使う白文字。影つき） */
.c-page-title { display: inline-flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.c-page-title__title { font-size: 40px; font-weight: 700; line-height: 1; color: var(--color-text); }
.c-page-title__en { font-family: var(--font-en); font-size: 32px; font-weight: 400; line-height: 1; color: var(--color-red); }
.c-page-title--light .c-page-title__title { color: var(--color-bg); text-shadow: 0 4px 4px rgba(121, 110, 104, .2); }
.c-page-title--light .c-page-title__en { color: var(--color-bg); text-shadow: 0 4px 4px rgba(121, 110, 104, .25); }
@media (max-width: 768px) {
.c-page-title { gap: 20px; }
.c-page-title__title { font-size: 28px; line-height: 1.3; }
.c-page-title__en { font-size: 22px; }
}
/* ---- component/_breadcrumb.css ---- */
/* パンくずリスト（トップ ／ Rantoについて）
変化形：--light（写真の上で使う白文字。影つき） */
.c-breadcrumb { display: flex; flex-wrap: wrap; font-size: 14px; font-weight: 500; line-height: 1; color: var(--color-sub); }
.c-breadcrumb li + li::before { content: "／"; margin-inline: .25em; }
.c-breadcrumb a { transition: opacity .3s; }
@media (hover: hover) { .c-breadcrumb a:hover { opacity: .7; } }
.c-breadcrumb--light { color: var(--color-bg); filter: drop-shadow(0 4px 2px rgba(121, 110, 104, .25)); }
@media (max-width: 768px) { .c-breadcrumb { font-size: 12px; } }
/* ---- component/_page-hero.css ---- */
/* 下層ページの見出し帯（写真の上に、パンくず＋白い見出し）
写真は style="background-image: url(…)" で指定する（テーマでは template-parts/components/page-hero.php が、アイキャッチ画像またはテーマの写真を入れる）
変化形：--dim（写真の上に薄い茶色を重ねて、白い文字を読みやすくする）
--under-header（ヘッダーを写真の上に重ねる。ヘッダーの高さ分だけ上に引き上げる） */
.c-page-hero {
position: relative;
display: flex; flex-direction: column; gap: 100px;
min-height: 600px; padding: 150px var(--gutter) 80px;
background: var(--color-header) var(--hero-image, none) center / cover no-repeat;
}
.c-page-hero > * { position: relative; }
.c-page-hero__title { display: flex; justify-content: center; }
.c-page-hero--dim::before { content: ""; position: absolute; inset: 0; background: rgba(123, 111, 105, .32); pointer-events: none; }
.c-page-hero--under-header { margin-top: calc(var(--header-h) * -1); }
@media (max-width: 1239px) {
.c-page-hero--under-header { padding-top: calc(var(--header-h) + 40px); }
}
@media (max-width: 768px) {
.c-page-hero { gap: 56px; min-height: 360px; padding-block: 100px 48px; }
.c-page-hero--under-header { padding-top: calc(var(--header-h) + 28px); }
}
/* 変化形：--plain（写真なし。生成りの背景に、茶色のパンくず＋通常の見出し） 例：プライバシーポリシー */
.c-page-hero--plain { background: var(--color-bg); }
/* ---- component/_text-block.css ---- */
/* 本文ブロック（小見出し＋本文） 例：人と動物の、より良い未来へ。 変化形：--tight */
.c-text-block { display: flex; flex-direction: column; gap: 40px; width: min(100%, 560px); color: var(--color-sub); }
.c-text-block__title { font-size: 30px; font-weight: 500; line-height: 1.8; }
.c-text-block__body { font-size: 18px; line-height: 1.8; }
.c-text-block__body > * + * { margin-top: 1em; }
/* 変化形 --tight：小見出しと本文の間を20pxに（保護犬活動のはじめの文章） */
.c-text-block--tight { gap: 20px; }
@media (max-width: 768px) {
.c-text-block { gap: 20px; }
.c-text-block__title { font-size: 22px; line-height: 1.6; }
.c-text-block__body { font-size: 16px; }
}
/* ---- component/_tag.css ---- */
/* タグ（CARE／WELLNESS などの分類） 例：Rantoについての事業概要 */
.c-tag { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border: 1px solid var(--color-sub); border-radius: 10px; background: var(--color-white); font-size: 18px; line-height: 1.8; color: var(--color-sub); white-space: nowrap; }
@media (max-width: 768px) { .c-tag { padding: 6px 14px; font-size: 16px; } }
/* ---- component/_faq.css ---- */
/* よくある質問（アコーディオン。開閉は js/modules/faq.js）
質問：上の角が丸い白い帯＋点線。開くと、下の角が丸い答えの帯が続く
JSが動かないときは、すべて開いた状態で表示する */
.c-faq { display: flex; flex-direction: column; gap: 30px; width: min(100%, 760px); }
.c-faq__q {
display: flex; align-items: center; gap: 20px; width: 100%;
padding: 24px 40px; border: 0; border-bottom: 1px dashed var(--color-sub); border-radius: 40px 40px 0 0;
background: var(--color-white); text-align: left; cursor: pointer;
}
.c-faq__mark {
position: relative; display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px;
padding-top: 11px; background: url("../img/icons/faq-paw.svg") center / 36px 36px no-repeat; /* 文字は肉球の大きなふくらみの真ん中に見えるよう下寄せ */
font-size: 14px; font-weight: 500; line-height: 1; color: var(--color-bg);
}
.c-faq__text { flex: 1; font-size: 18px; line-height: 1.8; color: var(--color-text); }
.c-faq__q .c-faq__text { padding-block: 0; }
.c-faq__toggle { position: relative; width: 20px; height: 20px; flex-shrink: 0; background: url("../img/icons/plus-circle.svg") center / contain no-repeat; }
.c-faq__q[aria-expanded="true"] .c-faq__toggle { background-image: url("../img/icons/minus-circle.svg"); }
/* 閉じているときは、質問だけの角丸の箱に（下の点線をなくし、下の角も丸く） */
.c-faq__q { transition: border-radius .35s, border-color .35s; }
.js .c-faq__item:not(.is-open) .c-faq__q { border-bottom-color: transparent; border-radius: 40px; transition-delay: .2s; }
/* 答え：高さをなめらかに変える（0fr → 1fr） */
.c-faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s ease; }
.c-faq__panel > div { overflow: hidden; }
.js .c-faq__item:not(.is-open) .c-faq__panel { grid-template-rows: 0fr; }
.c-faq__a { display: flex; align-items: flex-start; gap: 20px; padding: 24px 80px 24px 40px; border-radius: 0 0 40px 40px; background: var(--color-white); }
@media (max-width: 768px) {
.c-faq { gap: 16px; }
.c-faq__q { gap: 12px; padding: 18px 20px; border-radius: 24px 24px 0 0; }
.c-faq__a { gap: 12px; padding: 18px 20px; border-radius: 0 0 24px 24px; }
.js .c-faq__item:not(.is-open) .c-faq__q { border-radius: 24px; }
.c-faq__mark { width: 30px; height: 30px; padding-top: 9px; background-size: 30px 30px; font-size: 12px; }
.c-faq__text { font-size: 16px; }
}
/* ---- component/_logo-loop.css ---- */
/* ロゴが横に流れ続ける帯（お問い合わせの背景などに使う飾り）
同じロゴの並びを2組つなげて、1組分ずつ動かすと切れ目なく流れる */
.c-logo-loop { overflow: hidden; height: 143px; pointer-events: none; }
.c-logo-loop__track { display: flex; gap: 70px; width: max-content; opacity: .1; animation: c-logo-loop 40s linear infinite; }
.c-logo-loop__track img { width: 622px; height: 152px; flex-shrink: 0; }
@keyframes c-logo-loop { to { transform: translateX(calc(-50% - 35px)); } }
@media (max-width: 768px) {
.c-logo-loop { height: 72px; }
.c-logo-loop__track { gap: 36px; }
.c-logo-loop__track img { width: 311px; height: 76px; }
@keyframes c-logo-loop { to { transform: translateX(calc(-50% - 18px)); } }
}
@media (prefers-reduced-motion: reduce) { .c-logo-loop__track { animation: none; } }
/* ---- component/_line-box.css ---- */
/* ご予約・ご相談（LINE）の箱：見出し＋ひとこと＋流れるロゴ＋QRとLINEボタン
トップ（後ろの背景つき：project/top/_contact.css）、CARE・WELLNESS で使う
スマホでは、同じ画面のQRは読めないので、QRを出さずボタンだけにする */
.c-line-box { position: relative; padding: 56px 0; overflow: hidden; border-radius: 80px; background: #f3e9e4; text-align: center; }
.c-line-box__head { display: flex; flex-direction: column; align-items: center; gap: 32px; padding-inline: 20px; }
.c-line-box__title { font-size: 36px; font-weight: 700; line-height: 64.8px; letter-spacing: 1.26px; }
.c-line-box__en { margin-top: 32px; font-family: var(--font-en); font-size: 18px; line-height: 1; color: var(--color-red); }
.c-line-box__lead { font-size: 21px; font-weight: 500; line-height: 39.9px; letter-spacing: .32px; }
.c-line-box .c-logo-loop { margin-top: 222px; }
.c-line-box__qr {
position: absolute; left: 50%; top: 272px; transform: translateX(-50%);
display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px;
border-radius: 60px; background: var(--color-bg);
}
.c-line-box__qr-img { width: 100px; height: 100px; margin-bottom: 8px; }
.c-line-box__qr-note { width: 219px; font-size: 14px; line-height: 1.4; }
@media (max-width: 768px) {
/* スマホは、ボタンのカードを先に、ロゴが流れる帯をいちばん下に（並びを入れ替え） */
.c-line-box { display: flex; flex-direction: column; padding: 40px 0 28px; border-radius: 40px; }
.c-line-box__head { gap: 16px; }
.c-line-box__en { margin-top: 12px; }
.c-line-box__title { font-size: 26px; line-height: 1.5; }
.c-line-box__lead { font-size: 16px; line-height: 1.8; }
.c-line-box__qr { position: static; transform: none; margin: 28px 20px 0; padding: 28px 20px; border-radius: 32px; }
.c-line-box__qr-img { display: none; }
.c-line-box .c-logo-loop { order: 1; margin-top: 24px; }
}
/* ---- component/_message-card.css ---- */
/* 代表メッセージのカード：文章（見出し・本文・署名）＋やわらかい丸の写真＋後ろのやわらかい光
トップ（Figma 377:2603）で使う形が基本。変化形：--about（Rantoについて。光の位置・高さ・文章の余白が少しちがう）
900px以下は写真を上、文章を下に並べる */
.c-message-card { position: relative; display: flex; align-items: center; justify-content: center; gap: 40px; min-height: 714px; margin-top: 80px; padding: 20px 16px; border-radius: 80px; background: #f9f7f2; }
/* 文章の後ろのやわらかい光（Figmaのグラデーションの形） */
.c-message-card::before { content: ""; position: absolute; left: -100px; top: -120px; width: 720px; height: 900px; background: radial-gradient(ellipse at 45% 50%, rgb(var(--glow-rose) / .35), rgb(var(--glow-rose) / 0) 60%); pointer-events: none; }
.c-message-card::after { content: ""; position: absolute; right: -150px; top: -140px; width: 640px; height: 640px; background: radial-gradient(circle, rgb(var(--glow-cream) / .5), rgb(var(--glow-cream) / 0) 62%); pointer-events: none; }
.c-message-card__text { position: relative; z-index: 1; flex: 1; max-width: 462px; margin: 118px 17px 50px 60px; color: var(--color-text); }
.c-message-card__title { font-size: 24px; font-weight: 700; line-height: 1.66; letter-spacing: .32px; }
.c-message-card__body { margin-top: 24px; font-size: 18px; font-weight: 500; line-height: 1.8; }
.c-message-card__body p + p { margin-top: 1em; }
.c-message-card__sign { display: flex; align-items: baseline; gap: 23px; margin-top: 24px; }
.c-message-card__role { font-size: 24px; font-weight: 500; line-height: 1; }
.c-message-card__name { font-family: "Shippori Mincho", serif; font-size: 31px; font-weight: 800; line-height: 1; letter-spacing: 2px; }
.c-message-card__photo { position: relative; z-index: 1; flex-shrink: 0; width: min(540px, 46%); }
/* 変化形 --about：文章の後ろ・右上のやわらかい光（Figmaのぼかし：#D19684・16%） */
.c-message-card--about { min-height: 668px; }
.c-message-card--about::before { left: 0; top: 0; width: 560px; height: 100%; background: radial-gradient(ellipse 50% 46% at 52% 50%, rgb(var(--glow-terracotta) / .16), rgb(var(--glow-terracotta) / 0)); }
.c-message-card--about::after { right: auto; left: 62%; top: -60px; width: 520px; height: 430px; background: radial-gradient(ellipse closest-side, rgb(var(--glow-terracotta) / .12), rgb(var(--glow-terracotta) / 0)); }
.c-message-card--about .c-message-card__text { max-width: 435px; margin: 95px 30px 40px 44px; }
.c-message-card--about .c-message-card__sign { flex-wrap: wrap; white-space: nowrap; }
@media (max-width: 1200px) {
.c-message-card { min-height: 0; padding: 20px 40px; }
.c-message-card__text, .c-message-card--about .c-message-card__text { margin: 60px 0 40px; }
}
@media (max-width: 900px) {
.c-message-card { flex-direction: column-reverse; padding: 40px 32px 48px; }
.c-message-card__text, .c-message-card--about .c-message-card__text { max-width: none; margin: 0; }
.c-message-card__photo { width: min(100%, 480px); }
.c-message-card--about::before { width: 100%; }
.c-message-card--about::after { left: auto; right: -80px; width: 360px; height: 320px; }
.c-message-card--about .c-message-card__photo { width: min(100%, 460px); }
}
@media (max-width: 768px) {
.c-message-card { margin-top: 40px; padding: 28px 20px 36px; border-radius: 40px; gap: 24px; }
.c-message-card__title { font-size: 20px; }
.c-message-card__body { font-size: 16px; }
.c-message-card__role { font-size: 18px; }
.c-message-card__name { font-size: 26px; }
}
/* ---- component/_partner-cta.css ---- */
/* 動物病院／ペットサロンの皆さまへ（提携の案内）：トップと保護犬活動で使う
上の境目は、ゆるいS字の波（トップ）。変化形 --flat は波なし */
.c-partner-cta { position: relative; padding: 180px var(--gutter); background: #fcfbf8; --wave-h: 218px; --wave-top: -109px; }
.c-partner-cta::before { background-image: url("../img/deco/wave-partners-top.svg"); } /* 上の境目の波（utility/_wave.css） */
/* 変化形 --flat：上の境目が波なしのまっすぐ（保護犬活動のページ。Figma 390:4409） */
.c-partner-cta--flat::before { background-image: none; }
.c-partner-cta__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 40px; max-width: var(--content); margin-inline: auto; padding: 80px 40px; border-radius: 80px; background: #f2eee7; text-align: center; }
.c-partner-cta__dog { position: absolute; left: 79px; top: -100px; width: 180px; }
.c-partner-cta__title { font-size: 40px; font-weight: 700; line-height: 64.8px; }
.c-partner-cta__en { margin-top: 32px; font-family: var(--font-en); font-size: 32px; line-height: 1; letter-spacing: 2px; color: var(--color-red); }
.c-partner-cta__text { width: min(100%, 435px); text-align: left; }
.c-partner-cta__card .c-button { margin-block: 50px 10px; }
@media (max-width: 768px) {
.c-partner-cta { padding-block: 140px 100px; --wave-top: -50px; --wave-h: 100px; }
.c-partner-cta__card { gap: 28px; padding: 64px 20px 48px; border-radius: 40px; }
.c-partner-cta__dog { left: 20px; top: -76px; width: 120px; }
.c-partner-cta__title { font-size: 24px; line-height: 1.6; }
.c-partner-cta__en { margin-top: 16px; font-size: 22px; }
.c-partner-cta__card .c-button { margin-block: 12px 0; }
}
/* ---- component/_media-card.css ---- */
/* 写真＋文章のカード（CARE・WELLNESS・保護犬活動のサービス紹介）
カードの色は画面の端までのばし、左右交互に出す：--left（左端から・右だけ丸い）／--right（右端まで・左だけ丸い）／--narrow（右から出る少しせまいカード）
中身：肉球の番号 → サービス名（赤20%のラインマーカー）→ 状態・説明 →（対象のめやす）→ 注記 →（ボタン）
写真の大きさ：ふつう400px／--wide 440px／--large 430px。900px以下は写真が上、文章が下 */
.c-media-card { display: flex; align-items: center; justify-content: center; gap: 80px; padding: 80px 150px; background: #efe6dc; }
/* 1440pxで端から220px空く */
.c-media-card--left { margin-right: max(20px, calc(50% - 500px)); border-radius: 0 80px 80px 0; }
.c-media-card--right { margin-left: max(20px, calc(50% - 500px)); border-radius: 80px 0 0 80px; }
/* 1440pxで左端から300px（保護犬活動の2枚目） */
.c-media-card--narrow { margin-left: max(20px, calc(50% - 420px)); }
/* 写真（やわらかい丸）。後ろにやわらかい光（Figmaの楕円のぼかし：#D19684・16%） */
.c-media-card__photo { flex-shrink: 0; width: 400px; filter: drop-shadow(-30px 40px 50px rgb(var(--glow-terracotta) / .35)); }
.c-media-card__photo--wide { width: 440px; }
.c-media-card__photo--large { width: 430px; }
.c-media-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 420px; color: var(--color-text); }
.c-media-card__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
/* 肉球の中に番号 */
.c-media-card__num { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: -10px; padding-top: 12px; background: url("../img/icons/paw-number.svg") center / contain no-repeat; font-size: 16px; font-weight: 700; line-height: 1; color: var(--color-bg); }
/* サービス名：赤20%のラインマーカー（Figmaどおり、文字の高さいっぱいの帯） */
.c-media-card__title { display: flex; align-items: center; gap: 16px; font-size: 30px; font-weight: 500; line-height: 1.8; }
.c-media-card__title > span { background: linear-gradient(rgba(218, 60, 49, .2), rgba(218, 60, 49, .2)) 0 .317em / 100% 1.2em no-repeat; }
.c-media-card__title img { width: 46px; height: 46px; }
.c-media-card__status { margin-top: -20px; font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--color-sub); }
.c-media-card__lead { font-size: 18px; line-height: 1.8; }
/* 対象のめやす（●の箇条書き） */
.c-media-card__checks { display: flex; flex-direction: column; gap: 4px; margin-top: -4px; }
.c-media-card__checks li { position: relative; padding-left: 16px; font-size: 16px; line-height: 32px; letter-spacing: .32px; color: var(--color-sub); }
.c-media-card__checks li::before { content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-sub); }
/* ＊対象・料金などの小さな注記 */
.c-media-card__notes { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.2; }
.c-media-card__body .c-button { margin-top: 10px; }
@media (max-width: 1200px) {
.c-media-card { gap: 48px; padding: 60px; }
.c-media-card__photo, .c-media-card__photo--wide, .c-media-card__photo--large { width: 40%; max-width: 440px; }
.c-media-card__body { flex: 1; width: auto; max-width: 420px; }
}
@media (max-width: 900px) {
.c-media-card { flex-direction: column; align-items: stretch; gap: 28px; }
.c-media-card--right .c-media-card__photo { order: -1; }
.c-media-card__photo, .c-media-card__photo--wide, .c-media-card__photo--large { width: min(100%, 360px); margin-inline: auto; }
.c-media-card__body { max-width: none; }
}
@media (max-width: 768px) {
.c-media-card { padding: 32px 20px 40px; }
/* カードの色は左右から交互に出すが、中の文字と写真は、どのカードも画面の左右40pxの線にそろえる
（左から出るカード：左40・右20／右から出るカード：左20・右40。カード自体が20px内側にあるぶんを差し引く） */
.c-media-card--left { border-radius: 0 40px 40px 0; padding-inline: 40px 20px; }
.c-media-card--right { border-radius: 40px 0 0 40px; padding-inline: 20px 40px; }
.c-media-card__text { gap: 12px; }
.c-media-card__title { font-size: 22px; line-height: 1.6; gap: 10px; }
.c-media-card__title img { width: 36px; height: 36px; }
.c-media-card__status { margin-top: -12px; }
.c-media-card__lead { font-size: 16px; }
.c-media-card__checks li { font-size: 15px; line-height: 28px; }
.c-media-card__checks li::before { top: 11px; }
}
/* ---- component/_point-list.css ---- */
/* 丸いタグの並び（サービスや取り組みの一覧。例：ペットシッター／寄付）
はじめの文章の下、境目の波にまたがって置く。変化形：--4（丸が4つのとき。スマホで少し小さく） */
/* align-items: center … 1つの丸が伸びても、ほかの丸の高さがつられて伸びないように（v1.0.1） */
.c-point-list { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 0; padding-bottom: 0; }
/* 幅がたりないときは丸ごと小さくなる（高さは幅に合わせるので、つぶれて楕円にならない） */
.c-point-list li { display: grid; place-items: center; width: 160px; height: auto; aspect-ratio: 1; min-width: 0; border-radius: 50%; background: #f3ebe5; font-size: 24px; font-weight: 500; line-height: 1.8; color: var(--color-sub); text-align: center; white-space: nowrap; }
/* white-space: nowrap … 改行は
の所だけ。iPhoneのSafariで、文字が1文字ずつ縦に折り返して丸が縦長になるのを防ぐ（v1.0.1） */
@media (max-width: 768px) {
.c-point-list { gap: 10px; }
.c-point-list li { width: 104px; font-size: 15px; line-height: 1.6; }
.c-point-list--4 { gap: 6px; }
.c-point-list--4 li { width: 80px; font-size: 12px; line-height: 1.5; }
}
@media (max-width: 374px) {
.c-point-list { gap: 6px; }
.c-point-list li { width: 92px; font-size: 13px; }
.c-point-list--4 li { width: 72px; font-size: 11px; }
}
/* とても狭い画面（340px以下）：「フィットネス」など長い言葉が丸の幅ぎりぎりになるので、文字を少し小さく（v1.0.1） */
@media (max-width: 340px) {
.c-point-list li { font-size: 12px; }
.c-point-list--4 li { font-size: 10.5px; }
}
/* ---- component/_page-links.css ---- */
/* ほかのページへのリンク（もう1つの柱・保護犬活動・よくある質問など）。2つを横に並べる
上は、前のセクションの色がゆるい波で入り込む */
.c-page-links { position: relative; display: flex; align-items: flex-end; gap: 100px; padding: 200px var(--gutter) 60px; background: #eee8e1; --wave-h: 143px; }
.c-page-links::before { background-image: url("../img/deco/wave-links.svg"); } /* 上の境目の波（utility/_wave.css） */
.c-page-links__item { position: relative; flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 40px; border-radius: 40px; background: var(--color-white); transition: box-shadow .3s; }
@media (hover: hover) { .c-page-links__item:hover { box-shadow: 0 6px 20px rgba(123, 111, 105, .12); } }
.c-page-links__en { font-family: var(--font-en); font-size: 14px; line-height: 1; color: var(--color-red); }
.c-page-links__label { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 500; line-height: 1; }
.c-page-links__label img { width: 40px; height: 40px; }
.c-page-links__label::after { content: "→"; margin-left: 16px; transition: transform .3s; }
@media (hover: hover) { .c-page-links__item:hover .c-page-links__label::after { transform: translateX(4px); } }
@media (max-width: 1200px) { .c-page-links { gap: 40px; } }
@media (max-width: 768px) {
.c-page-links { flex-direction: column; align-items: stretch; gap: 16px; padding-block: 90px 32px; --wave-h: 60px; }
.c-page-links__item { padding: 24px 28px; border-radius: 28px; gap: 14px; }
.c-page-links__label { font-size: 20px; }
.c-page-links__label img { width: 32px; height: 32px; }
}
/* ---- project/top/_fv.css ---- */
/* トップ：ファーストビュー
写真4枚（やわらかい丸に切り抜き済み）と、その上に重ねた本物の文字
PC・タブレット：1440×900の比率のまま全体を縮める（文字も同じ割合で縮む）
スマホ：小さい写真2枚 → 大きい写真 → 文字（大きい写真に重ねる・ぼかし付き）→ グッズの写真
写真は、表示したときにふわっと出て、そのあとゆっくりゆっくり上下に1回ゆれて止まる（下の「アニメーション」）
ヘッダーは写真の上に重ねる（ヘッダーの高さ分だけ上に引き上げる） */
.p-top-fv { --u: min(1px, calc(100vw / 1440)); margin-top: calc(var(--header-h) * -1); background: #f8f5f1; overflow: hidden; } /* --u：1440pxのとき1px。画面幅に合わせて縮む単位 */
.p-top-fv__inner { position: relative; max-width: 1440px; height: min(900px, 62.5vw); margin-inline: auto; }
/* 写真4枚：1440×900の中の位置をFigmaどおり％で置くので、画面幅に合わせて全体が縮む */
.p-top-fv__photos { position: absolute; inset: 0; }
.p-top-fv__photo { position: absolute; height: auto; }
.p-top-fv__photo--poodle { left: 6.32%; top: 16%; width: 24.58%; }
.p-top-fv__photo--walk { left: 28.89%; top: 24.89%; width: 39.58%; }
.p-top-fv__photo--catdog { left: 66.29%; top: 15.95%; width: 30.12%; }
.p-top-fv__photo--goods { left: 66.53%; top: 57.78%; width: 29.24%; }
/* アニメーション
1. 表示したとき：写真が少しずつ時間をずらして、ふわっと浮かび上がる（散歩→トイプードル→犬と猫→グッズ）。そのあと文字が出る
2. そのあと：写真がそれぞれ、ゆっくり上下に1回だけゆれて、もとの位置で止まる（ゆれ幅6px。速さを1枚ずつ少し変える。ページを開いてから5秒以内にすべて止まる）
3. 文字の赤いラインマーカーが、左から右へ引かれる（下の .p-top-fv__mark）
出るときは opacity・scale、ゆれは translate と、別々の性質を動かすので、2つの動きがぶつからない
動きを減らす設定の端末では、foundation/_base.css の指定で、すぐ表示されて止まる */
.p-top-fv__photo { animation: p-top-fv-in .9s cubic-bezier(.22, 1, .36, 1) both, p-top-fv-float 2.6s ease-in-out .8s 1; }
.p-top-fv__photo--walk { animation-delay: 0s, .8s; }
.p-top-fv__photo--poodle { animation-delay: .15s, .95s; animation-duration: .9s, 2.4s; }
.p-top-fv__photo--catdog { animation-delay: .3s, 1.1s; animation-duration: .9s, 2.8s; }
.p-top-fv__photo--goods { animation-delay: .45s, 1.25s; animation-duration: .9s, 2.5s; }
.p-top-fv__text { animation: p-top-fv-text .9s cubic-bezier(.22, 1, .36, 1) 1s both; } /* 写真が出そろってから */
@keyframes p-top-fv-in { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
/* ゆれは、もとの位置から始まって、もとの位置に戻る（始まりで写真が跳ねないように） */
@keyframes p-top-fv-float { 0%, 100% { translate: 0 0; } 25% { translate: 0 -6px; } 75% { translate: 0 6px; } }
@keyframes p-top-fv-text { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
.p-top-fv__text { position: absolute; z-index: 1; left: 10.42%; top: 56%; display: flex; flex-direction: column; gap: clamp(16px, 2.36vw, 34px); }
/* 文字の後ろのやわらかい白いぼかし。文字の箱に z-index を付けて、ぼかしが写真の後ろに隠れないようにしている */
.p-top-fv__text::before { content: ""; position: absolute; inset: -20% -10% -10% -15%; z-index: -1; background: radial-gradient(ellipse at 40% 45%, rgb(var(--glow-paper) / .85), rgb(var(--glow-paper) / 0) 70%); }
.p-top-fv__catch { position: relative; display: flex; flex-direction: column; gap: clamp(10px, 1.667vw, 24px); color: var(--color-text); }
/* 文字が散歩の写真に重なる所（「でいく。」のあたり）に、白いぼかし2つ（Figmaの「ぼかしbg」#f2f2f2・ぼかし60〜65px）。文字を読みやすく */
.p-top-fv__catch::before, .p-top-fv__catch::after { content: ""; position: absolute; z-index: -1; background: #f2f2f2; pointer-events: none; }
.p-top-fv__catch::before { left: calc(285 * var(--u)); top: calc(-27 * var(--u)); width: calc(270 * var(--u)); height: calc(88 * var(--u)); filter: blur(calc(65 * var(--u))); }
.p-top-fv__catch::after { left: calc(337 * var(--u)); top: calc(61 * var(--u)); width: calc(223 * var(--u)); height: calc(88 * var(--u)); filter: blur(calc(60 * var(--u))); }
.p-top-fv__en { font-family: var(--font-en); font-size: clamp(20px, 2.778vw, 40px); line-height: 1.2; letter-spacing: .1em; }
.p-top-fv__title { font-size: clamp(20px, 2.778vw, 40px); font-weight: 700; line-height: 1; }
.p-top-fv__lead { font-size: clamp(13px, 1.667vw, 24px); font-weight: 500; line-height: 1.6; color: var(--color-text); }
/* 赤いラインマーカー（Figmaの「ラインマーカー」：赤20%を文字の下半分に） */
/* 「や。には、もともと文字の半分ほどの空きがあるので、マーカーをその分だけ内側に寄せる（--mark-l：左、--mark-r：右）
1本目「「ラン」。」は左右とも、2本目「たくさんの幸せを、すべての犬へ。」は右（。）だけ */
.p-top-fv__mark {
--mark-l: .5em; --mark-r: .5em;
background: linear-gradient(transparent .32em, rgba(218, 60, 49, .2) .32em, rgba(218, 60, 49, .2) 1.28em, transparent 1.28em) var(--mark-l) 0 / calc(100% - var(--mark-l) - var(--mark-r)) 100% no-repeat;
}
.p-top-fv__mark ~ .p-top-fv__mark { --mark-l: 0em; }
/* マーカーを、ペンで引くように左から右へ（文字が出そろってから。1本目→少し遅れて2本目） */
.p-top-fv__mark { animation: p-top-fv-mark .8s cubic-bezier(.65, 0, .35, 1) 1.7s both; }
.p-top-fv__mark ~ .p-top-fv__mark { animation-delay: 2.2s; }
@keyframes p-top-fv-mark { from { background-size: 0% 100%; } to { background-size: calc(100% - var(--mark-l) - var(--mark-r)) 100%; } }
/* 769〜1239px（ヘッダーがハンバーガーの幅）：写真の上端がヘッダーに隠れないよう、
写真がヘッダーの下20pxより上に来るぶんだけFVを下げる（写真の上端はFVの高さの約15.8%＝9.896vw） */
@media (min-width: 769px) and (max-width: 1239px) {
.p-top-fv { margin-top: calc(var(--header-h) * -1 + max(0px, var(--header-h) + 20px - 9.896vw)); }
}
@media (max-width: 768px) {
/* スマホは上から「小さい写真2枚 → 大きい写真（散歩）→ 文字（大きい写真に重ねる）→ グッズの写真」
文字の後ろには、PCと同じやわらかいぼかし（大きい写真と文字のあいだ）を置いて、文字を読みやすく
写真の箱は display: contents にして、4枚の写真と文字を同じ並びの中で入れ替える
幅は画面幅（vw）で決める（％だと縦の高さの計算がずれて、間が大きく空くため） */
.p-top-fv__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 0 12px; height: auto; padding: calc(var(--header-h) + 16px) 20px 48px; }
.p-top-fv__photos { display: contents; }
.p-top-fv__photo { position: static; height: auto; }
.p-top-fv__photo, .p-top-fv__text { left: auto; top: auto; } /* PC用の位置（％）を打ち消す */
.p-top-fv__photo--poodle { grid-row: 1; grid-column: 1; width: 40vw; justify-self: start; }
.p-top-fv__photo--catdog { grid-row: 1; grid-column: 2; width: 44vw; justify-self: end; margin-top: 28px; }
.p-top-fv__photo--walk { grid-row: 2; grid-column: 1 / -1; width: 78vw; justify-self: center; margin-top: 8px; }
/* 文字は大きい写真の下のほうに重ねる。ぼかし（::before）は文字のすぐ後ろ＝写真より前 */
.p-top-fv__text { grid-row: 3; grid-column: 1 / -1; position: relative; z-index: 1; gap: 20px; margin-top: -96px; padding-top: 16px; }
.p-top-fv__catch::before, .p-top-fv__catch::after { content: none; } /* スマホは下の大きなぼかしだけ */
.p-top-fv__text::before { content: ""; inset: -12% -20px -6% -20px; background: radial-gradient(ellipse at 45% 50%, rgb(var(--glow-paper) / .95) 45%, rgb(var(--glow-paper) / 0) 72%); }
.p-top-fv__photo--goods { grid-row: 4; grid-column: 1 / -1; width: 46vw; justify-self: end; margin-top: 12px; }
.p-top-fv__en { font-size: 20px; letter-spacing: .08em; }
.p-top-fv__title { font-size: 24px; line-height: 1.4; }
.p-top-fv__lead { font-size: 16px; line-height: 1.9; }
}
/* ---- project/top/_about.css ---- */
/* トップ：ABOUT（HELLO WE ARE RANTO） */
.p-top-about { position: relative; padding: 160px var(--gutter) 200px; background: #f8f5f1; text-align: center; }
/* 大きなハート（ロゴの一部）を、文章の後ろの中央に薄く */
.p-top-about__heart { position: absolute; left: 50%; top: 228px; width: 500px; height: 500px; transform: translateX(-50%); opacity: .1; pointer-events: none; }
.p-top-about > :not(.p-top-about__heart) { position: relative; }
.p-top-about__head { display: flex; flex-direction: column; align-items: center; gap: 60px; }
.p-top-about__label { position: relative; display: inline-block; font-family: var(--font-en); font-size: 32px; line-height: 1; letter-spacing: 2px; color: var(--color-red); }
/* 「HELLO」：文字を1つずつ傾けて、ゆるい弧にする */
.p-top-about__hello { position: absolute; left: -38px; top: -47px; width: 100px; height: 40px; font-size: 22px; line-height: 1; }
.p-top-about__hello span { position: absolute; }
.p-top-about__hello span:nth-child(1) { left: 0; top: 18px; transform: rotate(-45deg); }
.p-top-about__hello span:nth-child(2) { left: 18px; top: 7px; transform: rotate(-27.5deg); }
.p-top-about__hello span:nth-child(3) { left: 39px; top: 1px; transform: rotate(-10deg); }
.p-top-about__hello span:nth-child(4) { left: 58px; top: 0; transform: rotate(7.5deg); }
.p-top-about__hello span:nth-child(5) { left: 72px; top: 4px; transform: rotate(25deg); }
.p-top-about__title { font-size: 36px; font-weight: 700; line-height: 1.9; color: var(--color-sub); }
.p-top-about__text { margin-top: 60px; font-size: 22px; font-weight: 500; line-height: 1.8; color: var(--color-sub); }
@media (max-width: 768px) {
.p-top-about { padding-block: 72px 140px; }
.p-top-about__heart { top: 80px; width: 300px; height: 300px; }
.p-top-about__head { gap: 32px; }
.p-top-about__label { font-size: 24px; }
.p-top-about__hello { left: -30px; top: -38px; transform: scale(.8); transform-origin: left bottom; }
.p-top-about__title { font-size: 24px; line-height: 1.7; }
.p-top-about__text { margin-top: 32px; font-size: 16px; line-height: 2; }
}
/* ---- project/top/_services.css ---- */
/* トップ：SERVICES（Rantoの2つの柱）
写真はFigmaで「やわらかい丸」に切り抜いた画像。その上に同じ形の半透明の茶色を重ねる
ふだんは写真だけ。マウスを乗せる／キーボードで選ぶと、茶色の重なりと文字（.p-top-services__overlay）が、写真の上から下へかぶさるように出る
スマホ・タブレットは、写真が画面のまん中あたりに来たときに同じ動きで出る（js/modules/services.js） */
.p-top-services { position: relative; padding: 100px var(--gutter); background: #f4f0ec; --wave-h: 154px; --wave-top: -95px; }
.p-top-services::before { background-image: url("../img/deco/wave-services.svg"); } /* 上の境目の波（utility/_wave.css） */
.p-top-services > * { position: relative; }
.p-top-services__inner { max-width: var(--content); margin-inline: auto; }
/* 背伸びの犬のイラスト：見出しの右。右端を、コンテンツ（1140px）の右端＝1440pxで右から150pxの線にそろえる */
.p-top-services__pose { position: absolute; right: max(var(--gutter), calc((100% - var(--content)) / 2)); top: 100px; width: 280px; transform: scaleX(-1); }
.p-top-services__pair { display: flex; justify-content: space-between; align-items: center; margin-top: 80px; padding-inline: 50px; }
.p-top-services__item { position: relative; display: block; width: 450px; max-width: 47%; }
/* 写真の後ろのやわらかい光 */
.p-top-services__item::before { content: ""; position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -62%); background: radial-gradient(circle, rgb(var(--glow-peach) / .5), rgb(var(--glow-peach) / 0) 62%); pointer-events: none; }
.p-top-services__photo { position: relative; }
.p-top-services__photo > img { display: block; width: 100%; height: auto; transition: transform .5s; }
.p-top-services__overlay { position: absolute; inset: 0; }
.p-top-services__cover { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-top-services__body {
position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
padding: 8% 6%; color: var(--color-bg); text-align: center;
}
.p-top-services__item--care .p-top-services__body { padding-top: 6%; }
.p-top-services__item--wellness .p-top-services__body { padding-top: 13%; }
.p-top-services__head { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.p-top-services__icon { width: 80px; height: auto; margin-bottom: 1px; }
.p-top-services__item--wellness .p-top-services__icon { width: 73px; margin: 18px 0 18px; }
.p-top-services__name { font-size: 32px; font-weight: 700; line-height: 1; }
.p-top-services__catch { font-size: 22px; font-weight: 500; line-height: 1; }
.p-top-services__list { display: flex; flex-direction: column; gap: 4px; font-size: 18px; line-height: 1.8; color: #faf8f5; }
.p-top-services__more { width: 33.4px; height: 33.4px; transition: transform .3s; }
.p-top-services__item:focus-visible .p-top-services__more { transform: translateX(4px); }
@media (hover: hover) { .p-top-services__item:hover .p-top-services__more { transform: translateX(4px); } }
/* 最初は写真だけ（JSが動くとき。JSが動かないときは最初から重なりを出したまま）
PC：マウスを乗せる／キーボードで選ぶと、上から下へ幕を下ろすように重なりが出る（離すと上へ戻る）
スマホ・タブレット：写真が画面のまん中あたりに来たら、同じ動きで出る（一度出たらそのまま。js/modules/services.js が .is-active を付ける） */
.js .p-top-services__overlay { -webkit-clip-path: inset(0 0 100% 0); clip-path: inset(0 0 100% 0); transition: clip-path .6s cubic-bezier(.65, 0, .35, 1), -webkit-clip-path .6s cubic-bezier(.65, 0, .35, 1); }
.js .p-top-services__body > * { opacity: 0; transform: translateY(-16px); transition: opacity .3s, transform .3s; }
.js .p-top-services__item.is-active .p-top-services__overlay { -webkit-clip-path: inset(0); clip-path: inset(0); transition-duration: .9s; }
.js .p-top-services__item.is-active .p-top-services__body > * { opacity: 1; transform: none; transition: opacity .45s .25s, transform .45s .25s; }
/* スマホ：押したときに少し沈む（押せることが分かるように） */
@media (hover: none) { .p-top-services__item:active .p-top-services__photo { transform: scale(.98); } .p-top-services__photo { transition: transform .2s; } }
@media (hover: hover) {
.js .p-top-services__item:hover .p-top-services__overlay, .js .p-top-services__item:focus-visible .p-top-services__overlay { -webkit-clip-path: inset(0); clip-path: inset(0); }
.js .p-top-services__item:hover .p-top-services__body > *, .js .p-top-services__item:focus-visible .p-top-services__body > * { opacity: 1; transform: none; transition: opacity .45s .25s, transform .45s .25s; }
.js .p-top-services__item:hover .p-top-services__more, .js .p-top-services__item:focus-visible .p-top-services__more { transform: translateX(4px); }
}
@media (max-width: 1200px) {
.p-top-services__pose { width: 200px; top: 60px; }
.p-top-services__pair { padding-inline: 0; }
.p-top-services__name { font-size: 26px; }
.p-top-services__catch { font-size: 18px; }
.p-top-services__list { font-size: 15px; gap: 0; }
.p-top-services__icon { width: 64px; }
.p-top-services__item--wellness .p-top-services__icon { width: 58px; margin-block: 12px; }
.p-top-services__body { gap: 14px; }
}
@media (max-width: 900px) {
.p-top-services__pair { flex-direction: column; gap: 40px; margin-top: 48px; }
.p-top-services__item { width: min(100%, 450px); max-width: none; }
.p-top-services__name { font-size: 30px; }
.p-top-services__catch { font-size: 20px; }
.p-top-services__list { font-size: 17px; }
}
@media (max-width: 768px) {
.p-top-services { padding-block: 72px; --wave-top: -50px; --wave-h: 72px; }
.p-top-services__pose { width: 120px; top: -60px; right: 16px; }
.p-top-services__body { gap: 10px; padding: 6% 8%; }
.p-top-services__head { gap: 6px; }
.p-top-services__icon { width: 52px; }
.p-top-services__item--wellness .p-top-services__icon { width: 48px; margin-block: 8px; }
.p-top-services__name { font-size: 24px; }
.p-top-services__catch { font-size: 16px; }
.p-top-services__list { font-size: 14px; line-height: 1.7; }
.p-top-services__more { width: 28px; height: 28px; }
}
/* とても狭い画面（〜374px）：文字が丸からはみ出さないよう、さらに一段小さく */
@media (max-width: 374px) {
.p-top-services__body { gap: 6px; }
.p-top-services__icon { width: 40px; }
.p-top-services__item--wellness .p-top-services__icon { width: 38px; margin-block: 4px; }
.p-top-services__name { font-size: 20px; }
.p-top-services__catch { font-size: 14px; }
.p-top-services__list { font-size: 12.5px; line-height: 1.6; }
.p-top-services__more { width: 24px; height: 24px; }
}
/* ---- project/top/_shop.css ---- */
/* トップ：オンラインショップ（BASE）。入り口は「ショップを見る」1つ
左に写真（やわらかい丸に切り抜き済み）、右に2つのライン（アイコン・名前・説明）、下に「ショップを見る」 */
.p-top-shop { position: relative; overflow: hidden; padding: 180px 0 100px; background: #f2eee7; --wave-h: 154px; --wave-top: -22px; --wave-flip: scaleY(-1); }
/* 上はSERVICESの色がゆるい波で入り込む */
.p-top-shop::before { background-image: url("../img/deco/wave-services.svg"); } /* 上の境目の波（utility/_wave.css） */
.p-top-shop > * { position: relative; }
.p-top-shop__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.p-top-shop__toys { flex-shrink: 0; width: 280px; margin: 0 -10px 0 0; }
.p-top-shop__main { display: flex; flex-direction: column; align-items: center; gap: 80px; margin-top: 80px; }
/* 写真とラインの並びは、Figmaの高さ（652px）を保ってセクションの間をそろえる。写真とラインは上下中央 */
.p-top-shop__body { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 80px; width: 100%; min-height: 652px; }
/* ボタンの箱：Figmaは上下10pxの余白つき（高さ76px） */
.p-top-shop__action { padding-block: 9px; }
/* 写真の左下のやわらかい光 */
.p-top-shop__body::before { content: ""; position: absolute; left: -120px; top: 192px; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--glow-peach) / .55), rgb(var(--glow-peach) / 0) 65%); pointer-events: none; }
.p-top-shop__photo { position: relative; flex-shrink: 0; width: min(510px, 45%); }
.p-top-shop__photo img { width: 100%; height: auto; }
.p-top-shop__lines { display: flex; flex-direction: column; gap: 80px; width: 425px; }
.p-top-shop__line { display: flex; flex-direction: column; align-items: flex-start; }
.p-top-shop__icon { width: 60px; height: 60px; margin-bottom: 8px; }
.p-top-shop__icon--apria { width: 60px; height: 60px; object-fit: contain; }
.p-top-shop__title { font-size: 30px; font-weight: 500; line-height: 1.8; color: var(--color-text); }
.p-top-shop__text .u-keep { max-width: 100%; } /* 区切りの単位でまとめて改行。せまい画面では中で折り返す */
.p-top-shop__text { margin-top: 20px; font-size: 18px; line-height: 1.8; }
@media (max-width: 1200px) {
.p-top-shop__body { gap: 48px; }
.p-top-shop__lines { flex: 1; width: auto; max-width: 425px; }
}
@media (max-width: 900px) {
.p-top-shop__body { flex-direction: column; align-items: stretch; gap: 40px; min-height: 0; }
.p-top-shop__photo { width: min(100%, 460px); margin-inline: auto; }
.p-top-shop__lines { max-width: none; flex-direction: row; gap: 32px; }
/* スマホ・タブレット：アイコン・名前・説明を真ん中そろえに */
.p-top-shop__line { flex: 1; align-items: center; text-align: center; }
}
@media (max-width: 768px) {
.p-top-shop { padding-block: 110px 72px; --wave-top: -10px; --wave-h: 70px; }
.p-top-shop__head { position: relative; }
.p-top-shop__toys { position: absolute; right: 12px; top: -64px; width: 100px; margin: 0; }
.p-top-shop__main { gap: 48px; margin-top: 40px; }
.p-top-shop__body::before { left: -100px; top: 120px; width: 300px; height: 300px; }
.p-top-shop__lines { flex-direction: column; gap: 40px; }
.p-top-shop__icon { width: 48px; height: 48px; }
.p-top-shop__title { font-size: 22px; line-height: 1.6; }
.p-top-shop__text { margin-top: 10px; font-size: 16px; }
}
/* ---- project/top/_rescue.css ---- */
/* トップ：RESCUE（保護犬の活動） */
.p-top-rescue { position: relative; overflow: hidden; padding: 100px var(--gutter) 160px; background: #efe6dc; }
.p-top-rescue__action { position: relative; display: flex; justify-content: center; margin-top: 60px; }
.p-top-rescue__inner { position: relative; max-width: var(--content); margin-inline: auto; }
.p-top-rescue__tail { position: absolute; right: 5px; top: -56px; width: 280px; }
.p-top-rescue__body { position: relative; display: flex; align-items: center; gap: 60px; margin-top: 80px; }
/* 写真の後ろのやわらかい光 */
.p-top-rescue__body::before, .p-top-rescue__body::after { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; pointer-events: none; }
.p-top-rescue__body::before { left: -190px; top: 117px; background: radial-gradient(circle, rgb(var(--glow-peach) / .55), rgb(var(--glow-peach) / 0) 65%); }
.p-top-rescue__body::after { left: 260px; top: -180px; background: radial-gradient(circle, rgb(var(--glow-rose) / .5), rgb(var(--glow-rose) / 0) 65%); }
/* 写真：上はゆるく、下は大きく丸めた「やわらかい丸」 */
.p-top-rescue__photo { position: relative; flex: 1; height: 380px; overflow: hidden; border-radius: 121.56px 121.56px 296.31px 296.31px; }
.p-top-rescue__photo img { width: 100%; height: 100%; object-fit: cover; }
.p-top-rescue__body .c-text-block { position: relative; flex-shrink: 0; }
@media (max-width: 1200px) {
.p-top-rescue__body { gap: 40px; }
.p-top-rescue__body .c-text-block { width: 46%; flex-shrink: 1; }
}
@media (max-width: 900px) {
.p-top-rescue__body { flex-direction: column; align-items: stretch; }
.p-top-rescue__photo { flex: none; width: min(100%, 520px); height: auto; aspect-ratio: 520 / 380; margin-inline: auto; }
.p-top-rescue__body .c-text-block { width: 100%; }
}
@media (max-width: 768px) {
.p-top-rescue { padding-block: 72px 100px; }
.p-top-rescue__action { margin-top: 40px; }
.p-top-rescue__tail { width: 100px; right: -8px; top: -44px; }
.p-top-rescue__body { margin-top: 40px; gap: 32px; }
.p-top-rescue__photo { border-radius: 80px 80px 200px 200px; }
}
/* ---- project/top/_message.css ---- */
/* トップ：MESSAGE（代表メッセージ）。カードは共通部品 c-message-card（component/_message-card.css） */
/* 上の境目：RESCUEの色が、ゆるい波で入り込む */
.p-top-message { position: relative; overflow: hidden; padding: 200px var(--gutter) 180px; background: #f4f0ec; --wave-h: 151px; }
.p-top-message::before { background-image: url("../img/deco/wave-rescue.svg"); } /* 上の境目の波（utility/_wave.css） */
.p-top-message__inner { position: relative; max-width: var(--content); margin-inline: auto; }
@media (max-width: 768px) {
.p-top-message { padding-block: 120px 80px; --wave-top: 0; --wave-h: 70px; }
}
/* ---- project/top/_faq.css ---- */
/* トップ：FAQ（よくある質問）。部品は component/_faq.css。ここは並べ方と背景だけ */
.p-top-faq { position: relative; padding: 200px var(--gutter) 160px; background: #f8f5f1; --wave-h: 106px; }
/* 上の境目：PARTNERSの色とのあいだを、ゆるいS字の波に（足あとはこの波の上） */
.p-top-faq::before { background-image: url("../img/deco/wave-faq-top.svg"); } /* 上の境目の波（utility/_wave.css） */
.p-top-faq__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 80px; max-width: var(--content); margin-inline: auto; }
.p-top-faq__heading { width: min(100%, 283px); }
/* 足あと（見出しの右上） */
.p-top-faq__footprints { position: absolute; right: 0; top: -108px; width: 372px; pointer-events: none; }
.p-top-faq__panel { width: 100%; padding: 40px 80px; border-radius: 80px; background: #f2eee7; }
.p-top-faq__panel .c-faq { width: 100%; }
/* 質問・答えの中身を、帯の中央680pxにそろえる（Figmaどおり） */
.p-top-faq__panel .c-faq__q, .p-top-faq__panel .c-faq__a { padding-inline: max(40px, calc((100% - 680px) / 2)); }
.p-top-faq__panel .c-faq__a { padding-right: max(64px, calc((100% - 680px) / 2 + 24px)); }
@media (max-width: 1024px) { .p-top-faq__panel { padding: 32px 24px; border-radius: 48px; } }
@media (max-width: 768px) {
.p-top-faq { padding-block: 120px 80px; --wave-h: 48px; }
.p-top-faq__inner { gap: 40px; }
.p-top-faq__footprints { width: 180px; right: -10px; top: -96px; }
.p-top-faq__panel { padding: 20px 12px; border-radius: 32px; }
.p-top-faq__panel .c-faq__q, .p-top-faq__panel .c-faq__a { padding-inline: 16px; }
.p-top-faq__panel .c-faq__a { padding-right: 16px; }
}
/* ---- project/top/_contact.css ---- */
/* トップ：ご予約・ご相談（LINE）と、お問い合わせフォーム */
/* FAQに200px重ねて始まる（わざと重ねるデザイン）。重なる上の200pxは透明にして、FAQの箱が隠れないようにする */
.p-top-contact { position: relative; margin-top: -200px; padding: 130px var(--gutter) 100px; background: linear-gradient(transparent 200px, var(--color-bg) 200px); }
/* 箱の後ろの背景（Figmaの波 377:2639）。箱を基準に置くので、FAQを開閉しても重なり方は変わらない
・箱の上53pxから、FAQの色（#f8f5f1）が続き、下向きのゆるいカーブで終わる（両端：箱の上から約245px、まん中：約312px）
・カーブの下は白、箱の下130pxまで */
.p-top-contact__stage { position: relative; isolation: isolate; }
.p-top-contact__stage::before {
content: ""; position: absolute; z-index: -1; left: calc(50% - 50vw); top: -53px; bottom: -130px; width: 100vw; pointer-events: none;
background: url("../img/deco/wave-cta.svg") 0 0 / 100% 365px no-repeat, #fff;
}
.p-top-contact__inner { position: relative; max-width: var(--content); margin-inline: auto; }
/* ご予約・ご相談：見た目は共通部品 c-line-box（component/_line-box.css）。後ろの背景（上の .p-top-contact__stage）より前に出す */
.p-top-contact__stage .c-line-box { z-index: 1; }
/* お問い合わせフォーム */
.p-top-contact__head { position: relative; width: min(100%, 576px); margin: 230px auto 0; }
/* 肉球のイラスト（お問い合わせの見出しの右） */
.p-top-contact__paw { position: absolute; left: calc(100% + 62px); top: -62px; z-index: 1; width: 220px; pointer-events: none; }
.p-top-contact__head > p:last-child { margin-top: 24px; } /* 「>」：見出しの中の英字（CONTACT）にはかけない */
.p-top-contact__form { display: flex; flex-direction: column; gap: 24px; margin-top: 80px; padding: 80px 200px; border-radius: 80px; background: var(--color-white); }
.p-top-contact__field { display: flex; flex-direction: column; gap: 8px; }
.p-top-contact__label { display: flex; align-items: center; gap: 16px; font-size: 16px; line-height: 1.6; }
.p-top-contact__req { font-size: 14px; color: var(--color-red); }
.p-top-contact__input { width: 100%; height: 60px; padding: 0 18px; border: 1px solid var(--color-header); border-radius: 6px; background: var(--color-bg); font: inherit; font-size: 16px; color: var(--color-text); }
.p-top-contact__input:focus { outline: 2px solid var(--color-red); outline-offset: 1px; }
/* 記入例（薄い文字） */
.p-top-contact__input::placeholder { color: #b3a8a2; opacity: 1; }
/* 「ご相談の内容」がまだ選ばれていない（選択してください）ときも、記入例と同じ薄い文字に */
select.p-top-contact__input:has(option[value=""]:checked) { color: #b3a8a2; }
select.p-top-contact__input { height: 54px; padding-right: 44px; appearance: none; background: var(--color-bg) url("../img/icons/arrow-down.svg") right 16px center / 20px no-repeat; cursor: pointer; }
textarea.p-top-contact__input { height: 180px; min-height: 180px; padding: 14px 18px; line-height: 1.8; resize: vertical; }
/* 同意のチェック：（Contact Form 7 の形に合わせて、label を div で包む） */
.p-top-contact__agree { font-size: 14px; line-height: 1.6; }
.p-top-contact__agree label { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.p-top-contact__agree input { flex-shrink: 0; width: 18px; height: 18px; margin: 0 0 0 4px; accent-color: var(--color-sub); }
.p-top-contact__agree a { text-decoration: underline; text-underline-offset: 3px; }
.p-top-contact__submit { display: inline-flex; align-items: center; gap: 16px; align-self: flex-start; padding: 16px 32px; border: 0; border-radius: 60px; background: var(--color-sub); color: var(--color-bg); font-size: 16px; font-weight: 700; line-height: 1.6; cursor: pointer; transition: opacity .3s; }
/* 右の矢印（CSSで出す。Contact Form 7 のフォームの中には、テーマの画像のURLを書けないため） */
.p-top-contact__submit::after { content: ""; flex-shrink: 0; width: 24px; height: 24px; background: url("../img/icons/arrow-right-circle.svg") center / contain no-repeat; transition: transform .3s; }
.p-top-contact__submit:disabled { opacity: .5; cursor: not-allowed; }
@media (hover: hover) { .p-top-contact__submit:not(:disabled):hover { opacity: .85; } }
@media (hover: hover) { .p-top-contact__submit:not(:disabled):hover::after { transform: translateX(3px); } }
.p-top-contact__status { font-size: 14px; color: var(--color-sub); }
/* フォームが未設定のとき：公式LINEへの案内（だれでも見える）／見本のフォームの注意書き（ログイン中の管理者だけ） */
.p-top-contact__form--notice { align-items: center; text-align: center; }
.p-top-contact__admin-note { padding: 12px 16px; border: 1px dashed var(--color-red); border-radius: 8px; font-size: 14px; line-height: 1.7; color: var(--color-red); }
/* Contact Form 7 のフォーム（