@charset "UTF-8";
/* =========================================================================
   AEMI — main stylesheet（モバイルファースト）
   Base = mobile / @media (min-width) で拡張
   トップ／下層で共有する部品もここに含む（front.css は廃止）。
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root {
	/* 地は純白ではなく、ほんの少し灰を落とした紙。写真とロゴが浮きすぎないため。
	   --paper-2 は地の上にもう一段沈める面なので、地を下げたぶん同じだけ下げる
	   （白のときの差 1.08:1 を保つ。同じままだと 1.03:1 になって面が消える）。 */
	--paper:#f9f9f9;
	--paper-2:#f0f0f1;
	--ink:#0a0a0a;
	--ink-soft:#1a1a1e;
	--gray:#6b6b70;
	--gray-light:#9a9aa0;
	--line:#e7e7e9;
	/* 巨大英字の帯。地より一段だけ沈める文字なので、地を下げたぶん同じだけ下げる
	   （白地のときの 1.12:1 を保つ。#f2f2f3 のままだと 1.06:1 まで薄まって消える） */
	--watermark:#ececed;

	--red:#C90016;
	--pink:#D64C85;
	--magenta:#A900C2;
	--violet:#8E06FB;
	--blue:#0066D0;
	--cyan:#00DEFF;

	/* 色は「飾り」ではなく「意味」で置く。
	   地の色 = そのセクションの温度（愛＝暖 / 未来＝寒）。
	   文字の色 = その語そのものの色（スポットライト＝光 / 愛＝赤 / 未来＝青）。 */
	/* 地には色を敷かない（紙・黒・写真だけ）。色は文字・罫・番号に置く。
	   番号や面のための淡色（輝度が高いので文字には使わない） */
	--pale-red:#eab9c1;
	--pale-violet:#cdb2f6;
	--pale-blue:#aecbee;

	/* 和文はゴシック1書体。ウェイトで階層をつける
	   （900=大見出し / 800=セクション見出し / 700=小見出し・ラベル / 400=本文） */
	--sans:"Noto Sans JP",system-ui,sans-serif;

	/* 版面は全幅。左右は --pad だけで受ける */
	--maxw:100%;
	--pad:clamp(16px,3.2vw,40px);
	/* 上限を外したぶん、本文の行長だけは別に縛る。
	   和文は全角1文字=1em なので em で持つ（ch だと半角基準で狭くなりすぎる）。
	   40em ＝ 1行およそ40字。 */
	--measure:40em;
	--sec:clamp(72px,9.5vw,124px);
	/* SERVICE の写真3枚（絶対配置）の幅。中の3枚は全て aspect-ratio 固定なので、
	   塊の高さは幅のおよそ0.95倍で決まる。逃げ量と収まり高さもここから算出する。
	   幅は窓幅の割合ではなく「見出しの右に残った余白」から決める。
	   見出しは 1024px の時点で既に上限の 112px に達していて、最長行「チャンスに。」は
	   9字ぶん≒655px のまま伸び縮みしない。割合で決めると窓を狭めたときだけ
	   塊が見出しに追いつき、文字の上に写真が乗る（1024〜1300px で実測）。
	   700px = 見出しの最長行 655px ＋ 逃げ 45px。 */
	--service-figs-w:clamp(400px,calc(100vw - 2 * var(--pad) - 700px),620px);
	--header-h:64px;

	/* 縦組みラベルを版面の外に置くときの、版面との間隔と字面の幅。
	   縦組みの幅は文字サイズそのものなので、幅は .label と同じ 11px。
	   ヒーローの SCROLL もこの2つで同じ縦線に載せる。 */
	--rail-gap:clamp(12px,1.3vw,18px);
	--rail-w:11px;

	--ease:cubic-bezier(.22,.61,.36,1);
	--ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
	margin:0;
	padding-top:var(--header-h);
	font-family:var(--sans);
	font-weight:400;
	color:var(--ink);
	background:var(--paper);
	line-height:1.95;
	font-size:15px;
	letter-spacing:.02em;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
	overflow-x:hidden;
}
/* body だけに掛けても html 側は素通しで、装飾のはみ出し分だけ横スクロールできてしまう。
   clip はスクロールコンテナを作らないので sticky と Lenis に影響しない。 */
@supports (overflow:clip){
	html{overflow-x:clip;}
}
/* トップのヒーローはヘッダーの下まで敷き詰める */
body.is-front{padding-top:0;}

img,svg{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:color .3s var(--ease),opacity .3s var(--ease);}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table{margin:0;}
ul,ol{list-style:none;padding:0;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
::selection{background:var(--ink);color:#fff;}


/* Lenis（慣性スクロール）の動作要件 */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-stopped{overflow:clip;}
.lenis [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-smooth iframe{pointer-events:none;}

/* =========================================================================
   初回ローディングのカーテン
   （ページ間の遷移演出は廃止した。リンクは素の遷移に任せる）
   ========================================================================= */
.curtain{position:fixed;inset:0;z-index:9999;pointer-events:none;visibility:hidden;}
/* JS が動く前の一瞬でも本文を見せないよう、初期状態は CSS 側で確定させる */
html.is-loading .curtain{visibility:visible;}
html.is-loading{overflow:hidden;}

.curtain__sheet{position:absolute;inset:0;background:var(--ink);transform:translateY(100%);}
html.is-loading .curtain__sheet{transform:translateY(0);}

.curtain__brand{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	display:flex;align-items:center;justify-content:center;
	opacity:0;
}
html.is-loading .curtain__brand{opacity:1;}
.curtain__logo{width:clamp(112px,26vw,150px);height:auto;}

/* =========================================================================
   スクロール連動の出現（JS が動くときだけ隠す）
   ========================================================================= */
html.js-motion [data-anim]{opacity:0;}
html.js-motion [data-anim="mask"]{opacity:1;clip-path:inset(0% 0% 101% 0%);}
.sp-line{will-change:transform;}

/* =========================================================================
   Layout utilities
   ========================================================================= */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
/* 読み物・フォームを載せる列。2カラムを組む場面もあるので行長そのものではなくレイアウト幅 */
.container--narrow{max-width:980px;}

/* 版面の上限を外したぶん、地の文はここで行長を止める。
   これが無いと 1920px 以上で1行が60字を超えて読めなくなる。 */
.news-single__body,
.policy__intro,
.policy__body,
.mission__body,
.message__text,
.bdetail__lead{max-width:var(--measure);}

.section{padding-block:var(--sec);}
.section--tint{background:var(--paper-2);}
.section-head{margin-bottom:clamp(30px,5vw,52px);}

/* =========================================================================
   Typography helpers
   ========================================================================= */
.label{
	display:block;
	font-family:var(--sans);font-weight:700;
	font-size:10.5px;letter-spacing:.3em;
	color:var(--red);text-transform:uppercase;
	margin-bottom:16px;
}
.label--muted{color:var(--gray);}
.label--light{color:rgba(255,255,255,.8);}

/* ゴシックは明朝より字面が大きいので、字間と行間を詰めないと締まらない。
   大きい見出しほど詰める（900 = -.01em / 800 = 0）。 */
.section-title{
	font-family:var(--sans);font-weight:800;
	font-size:clamp(1.9rem,6.6vw,3rem);
	line-height:1.34;letter-spacing:0;
}
/* 和文は文節の切れ目で折る。「プロデュ / ース」のような単語途中の改行と、
   最終行が1〜2文字だけ残る「泣き別れ」を防ぐ
   （未対応ブラウザは通常の折り返しに戻るだけ）。
   見出しだけでなく、幅の変わる箱に入る短い和文にも掛ける。 */
.section-title,
.page-hero__title,
.bdetail__title,
.value__title,
.subhead,
.news-list__ttl,
.workcard__title,
.msg__text,
.value__text,
.bizcard__ja,
.company-home__dl dd,
.hero__title{word-break:auto-phrase;}
.section-title--lg{font-weight:900;font-size:clamp(2.2rem,8.4vw,4rem);line-height:1.22;letter-spacing:-.01em;}

.lead{font-family:var(--sans);font-weight:500;font-size:clamp(1.02rem,3.4vw,1.3rem);line-height:2;letter-spacing:.04em;word-break:auto-phrase;}
.note{margin-top:20px;font-size:12px;color:var(--gray-light);line-height:1.9;}
.empty{color:var(--gray);padding:40px 0;}

/* 蛍光ペンで塗ったハイライト。ベタのピンクに白文字でコントラスト 4.02:1。
   通常サイズの基準（4.5:1）には届かないが、これを使う文は 19px 以上の太字＝
   WCAG の「大きな文字」（3:1）に当たるので基準を満たす。小さい文字には使わないこと。
   box-decoration-break:clone で、折り返した各行にも余白が付いて帯が途切れない。 */
.mark{
	background:var(--pink);
	color:#fff;
	padding:.14em .2em;
	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;
}

/* ---------- Link arrow ---------- */
.link-arrow{
	display:inline-flex;align-items:center;gap:14px;
	font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
}
.link-arrow__line{position:relative;display:inline-block;width:44px;height:1px;background:currentColor;transition:width .4s var(--ease-out);}
.link-arrow__line::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translateY(-50%) rotate(45deg);}
.link-arrow:hover .link-arrow__line{width:68px;}
.link-arrow--pink{color:var(--red);}
.link-arrow--light{color:#fff;}

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex;align-items:center;justify-content:space-between;gap:20px;
	min-height:56px;padding:0 10px 0 30px;
	background:var(--ink);color:#fff;
	font-weight:500;font-size:13px;letter-spacing:.14em;border-radius:999px;
	transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
.btn__arrow{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:14px;transition:transform .4s var(--ease-out),background .4s var(--ease),color .4s var(--ease);}
.btn:hover{background:var(--red);}
.btn:hover .btn__arrow{transform:translateX(4px);}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.btn--ghost .btn__arrow{background:var(--ink);color:#fff;}
.btn--ghost:hover{background:var(--ink);color:#fff;}
.btn--ghost:hover .btn__arrow{background:#fff;color:var(--ink);}
.btn--light{background:#fff;color:var(--ink);}
.btn--light .btn__arrow{background:var(--ink);color:#fff;}
.btn--light:hover{background:var(--red);color:#fff;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

/* ---------- Placeholder / media ---------- */
.ph{width:100%;height:100%;display:block;object-fit:cover;}
/* PC/SP 出し分けの <picture>。箱を作らせず、中の img をそのまま置く */
picture.art{display:contents;}
/* span で使う場面があるので display は自前で持つ（インラインだと写真が潰れる） */
.media{display:block;position:relative;overflow:hidden;background:var(--paper-2);}
.media .ph,.media img{width:100%;height:100%;object-fit:cover;}
/* 写真はモノクロに統一し、ホバーでだけ色を戻す（モード寄りの版面を保つ） */
.media--mono .ph,.media--mono img{filter:grayscale(1) contrast(1.03);transition:filter .7s var(--ease),transform .9s var(--ease-out);}
a:hover .media--mono .ph,a:hover .media--mono img{filter:grayscale(0) contrast(1);transform:scale(1.04);}

/* =========================================================================
   Header
   ========================================================================= */
.site-header{
	position:fixed;top:0;left:0;right:0;z-index:100;
	/* 地と同じ色を透かす。純白のままだと、下を通る本文より header だけ明るく浮く */
	background:rgba(249,249,249,.92);
	backdrop-filter:saturate(1.2) blur(10px);
	border-bottom:1px solid var(--line);
	transition:transform .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease);
}
.site-header.is-hidden{transform:translateY(-101%);}
/* 写真のヒーローに載っている間は地を透かして白抜きにする */
.site-header.is-invert{background:transparent;backdrop-filter:none;border-color:transparent;}
.site-header__inner{
	display:flex;align-items:center;gap:16px;
	height:var(--header-h);padding-inline:var(--pad);max-width:var(--maxw);margin-inline:auto;
}
.site-header__logo{position:relative;z-index:120;margin:0;margin-right:auto;line-height:0;}
.site-header__logo img{width:auto;height:26px;}
.site-header .logo--light{display:none;}
/* ヒーローの上／オーバーレイ展開中は黒地に載るため白ロゴへ差し替え */
.site-header.is-invert .logo--dark,
.nav-open .site-header .logo--dark{display:none;}
.site-header.is-invert .logo--light,
.nav-open .site-header .logo--light{display:block;}
.nav-open .site-header{transform:none;background:transparent;border-color:transparent;backdrop-filter:none;}

.site-header__cta{
	display:none;
	align-items:center;gap:12px;
	height:42px;padding:0 8px 0 22px;border-radius:999px;
	background:var(--ink);color:#fff;
	font-size:10.5px;font-weight:700;letter-spacing:.22em;
	transition:background .35s var(--ease),color .35s var(--ease);
}
.site-header__cta-arrow{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--ink);font-size:12px;transition:transform .35s var(--ease-out);}
.site-header__cta:hover{background:var(--red);}
.site-header__cta:hover .site-header__cta-arrow{transform:translateX(3px);}
.site-header.is-invert .site-header__cta{background:#fff;color:var(--ink);}
.site-header.is-invert .site-header__cta-arrow{background:var(--ink);color:#fff;}
.site-header.is-invert .site-header__cta:hover{background:var(--red);color:#fff;}
.site-header.is-invert .site-header__cta:hover .site-header__cta-arrow{background:#fff;color:var(--red);}
.nav-toggle{
	position:relative;z-index:120;width:44px;height:44px;margin-right:-10px;
	display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;
}
.nav-toggle__bar{display:block;width:24px;height:1px;background:var(--ink);transition:transform .4s var(--ease),background .35s var(--ease);}
.site-header.is-invert .nav-toggle__bar,
.nav-open .nav-toggle__bar{background:#fff;}
.nav-open .nav-toggle__bar:nth-child(1){transform:translateY(4px) rotate(45deg);}
.nav-open .nav-toggle__bar:nth-child(2){transform:translateY(-4px) rotate(-45deg);}

/* ---------- Global nav（〜1023px はフルスクリーンのオーバーレイ） ---------- */
.global-nav{
	position:fixed;inset:0;z-index:110;
	background:var(--ink);color:#fff;
	overflow-y:auto;overscroll-behavior:contain;
	opacity:0;visibility:hidden;
	clip-path:inset(0 0 100% 0);
	transition:clip-path .7s var(--ease-out),opacity .4s var(--ease),visibility .4s;
}
.global-nav.is-open{opacity:1;visibility:visible;clip-path:inset(0 0 0 0);}
.global-nav__inner{
	min-height:100%;
	display:flex;flex-direction:column;justify-content:space-between;gap:44px;
	padding:calc(var(--header-h) + 34px) var(--pad) 44px;
	max-width:var(--maxw);margin-inline:auto;
}
.global-nav__list{display:flex;flex-direction:column;margin-block:auto;}
.global-nav__list a{
	display:flex;align-items:baseline;gap:18px;
	padding:18px 2px;border-bottom:1px solid rgba(255,255,255,.14);
	font-family:var(--sans);font-size:1.4rem;font-weight:500;color:#fff;
	opacity:0;transform:translateY(14px);
	transition:opacity .5s var(--ease),transform .5s var(--ease-out),color .3s var(--ease);
}
.global-nav__list li:first-child a{border-top:1px solid rgba(255,255,255,.14);}
/* 項目数は 外観 → メニュー 次第なので、段差の遅延は li の --i から作る */
.global-nav.is-open .global-nav__list a{opacity:1;transform:none;transition-delay:calc(.1s + var(--i,1) * .06s);}

.global-nav__foot{display:flex;flex-direction:column;gap:20px;opacity:0;transition:opacity .5s var(--ease);}
.global-nav.is-open .global-nav__foot{opacity:1;transition-delay:calc(.1s + var(--i,7) * .06s);}
.global-nav__address{display:flex;flex-direction:column;gap:6px;font-style:normal;font-size:13px;line-height:1.85;color:rgba(255,255,255,.66);}
.global-nav__mail{color:#fff;letter-spacing:.04em;}
.global-nav__sub{font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.66);}
.global-nav a:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;}

/* =========================================================================
   Page hero（下層共通）
   ========================================================================= */
.page-hero{
	position:relative;overflow:hidden;
	padding:clamp(48px,10vw,86px) 0 clamp(34px,6vw,56px);
	border-bottom:1px solid var(--line);
	background:var(--paper);color:var(--ink);
}
.page-hero__inner{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
/* 「プライバシーポリシー」のように文節で割れない長い語は、SPで必ず折り返す。
   strict にしないと長音符（ー）だけが次行に落ちる。 */
.page-hero__title{font-family:var(--sans);font-weight:900;font-size:clamp(2.3rem,8.6vw,4.2rem);line-height:1.2;letter-spacing:-.01em;line-break:strict;}
.page-hero .label{margin-top:22px;margin-bottom:10px;}
.page-hero__watermark{
	position:absolute;right:var(--pad);bottom:-.22em;z-index:0;
	font-family:var(--sans);font-weight:900;font-size:clamp(3.5rem,15vw,9.5rem);line-height:.8;letter-spacing:.02em;
	color:var(--watermark);white-space:nowrap;pointer-events:none;user-select:none;
}

/* 背景写真ありの見出し帯（管理画面「サイト設定」で設定） */
.page-hero--photo{border-bottom:none;background:var(--ink);color:#fff;padding:clamp(72px,16vw,140px) 0 clamp(44px,8vw,72px);}
.page-hero__bg{position:absolute;inset:0;z-index:0;}
.page-hero__bg .ph{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);}
.page-hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,.38),rgba(10,10,10,.74));}
.page-hero--photo .page-hero__title{color:#fff;}
.page-hero--photo .label{color:rgba(255,255,255,.82);}
.page-hero--photo .page-hero__watermark{color:rgba(255,255,255,.06);}

/* ---------- パンくず ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;font-size:11px;letter-spacing:.08em;color:var(--gray);}
.breadcrumb a{color:var(--gray);}
.breadcrumb a:hover{color:var(--red);}
.breadcrumb__sep{opacity:.5;margin:0 8px;}
.breadcrumb__current{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(52vw,420px);}
.page-hero--photo .breadcrumb,
.page-hero--photo .breadcrumb a{color:rgba(255,255,255,.72);}
.page-hero--photo .breadcrumb a:hover,
.page-hero--photo .breadcrumb__current{color:#fff;}

/* =========================================================================
   01 STATEMENT（ABOUT の入口）
   トップのヒーローが「写真」で立てる面なら、ここは「組版だけ」で立てる面。
   写真を1枚も置かず、黒地・特大の和文・袋文字の英字の3つで持たせる。
   ========================================================================= */
.astate{
	position:relative;overflow:hidden;
	display:flex;align-items:flex-end;
	min-height:clamp(420px,60svh,700px);
	padding-block:clamp(56px,10vw,96px);
	background:var(--ink);color:#fff;
}
@supports not (min-height:100svh){.astate{min-height:clamp(420px,60vh,700px);}}
.astate__inner{position:relative;z-index:1;}
/* 「スポットライトを。」だけ光の色にする。語の意味をそのまま色で言う。
   --cyan は白地では 1.6:1 で使えないが、黒地なら 12.2:1 で最も強く光る。 */
.astate__title .accent{color:var(--cyan);}
/* 袋文字は線が太って「塗り」に見えない大きさでだけ成立する。
   768px 未満は字が小さくなりすぎるので出さない（ヒーローと同じ判断）。 */
.astate__ghost{display:none;}

@media (min-width:768px){
	.astate__ghost{
		display:block;
		position:absolute;left:var(--pad);bottom:clamp(150px,26vw,300px);z-index:0;
		font-family:var(--sans);font-weight:900;
		font-size:clamp(3.2rem,9.4vw,8.5rem);line-height:.98;letter-spacing:-.02em;
		white-space:pre-line;
		color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);
		pointer-events:none;user-select:none;
	}
}

/* =========================================================================
   Mission（ABOUT）
   ページの宣言。トップの SERVICE と同じ「特大見出し → 下に本文」の組みで受ける。
   2カラムに押し込むと宣言が本文と同じ大きさまで縮み、下のセクション見出しより
   小さくなって階層が逆転する。
   ========================================================================= */
.mission{position:relative;overflow:hidden;}
.mission .container{position:relative;z-index:1;}
/* 「愛」の1字だけ色を変える。見出しの意味そのものを色で言う（白地で 6.7:1） */
.mission .shead__title .accent{color:var(--red);}
/* 他ページの装飾は英字の帯（.drift）。ここだけ和文1字を巨大に敷いて、
   ページの中心がどこかを一目で示す。
   ベタで塗ると、上に載る --line の罫と番号が同じ色に沈んで消えるので、
   線だけの袋文字にする（STATEMENT の袋文字と同じ手＝ABOUT の装飾言語）。 */
/* 3つの定義の番号・本文に重ならないよう、見出しとリードが載る上側の帯だけに収める。
   SP は横にも縦にも逃げ場が無いので出さない（STATEMENT の袋文字と同じ判断）。 */
.mission__kanji{display:none;}

@media (min-width:1024px){
	/* 見出しの下・3つの定義の右、という空いた面にだけ置く。
	   そのために定義側の幅を絞ってある（下の .creed の max-width）。 */
	.mission__kanji{
		display:block;
		position:absolute;z-index:0;
		right:calc(var(--pad) * -.5);top:50%;transform:translateY(-50%);
		font-family:var(--sans);font-weight:900;
		font-size:clamp(11rem,20vw,17rem);line-height:.74;letter-spacing:0;
		color:transparent;-webkit-text-stroke:2px rgba(201,0,22,.18);
		pointer-events:none;user-select:none;
	}
}
.mission__en{margin-top:clamp(18px,2.4vw,26px);font-family:var(--sans);font-weight:500;font-size:clamp(.86rem,2.2vw,1.02rem);letter-spacing:.16em;color:var(--gray);}
.mission__body{margin-top:clamp(30px,4.6vw,48px);}
.mission__lead{font-family:var(--sans);font-weight:500;font-size:clamp(1.02rem,3.4vw,1.28rem);line-height:2;letter-spacing:.04em;word-break:auto-phrase;}
.mission__body p{margin-bottom:22px;font-size:clamp(14px,1.6vw,16px);line-height:2.1;color:#333;}
.mission__body p:last-child{margin-bottom:0;}
.mission__close{max-width:var(--measure);margin-top:clamp(26px,4vw,38px);font-size:clamp(14px,1.6vw,16px);line-height:2.1;color:#333;}

/* 「愛」の定義。説明文を持たない3行なので、番号と一文だけで組む。
   罫と番号は地の温度に合わせて赤へ寄せる（灰のままだと暖色地から浮く）。 */
.creed{display:flex;flex-direction:column;margin-top:clamp(28px,4.4vw,44px);border-top:1px solid rgba(201,0,22,.14);}
.creed .value{border-bottom-color:rgba(201,0,22,.14);}
.creed .value__no{color:var(--pale-red);}
.creed .value__title{font-family:var(--sans);font-weight:700;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.6;letter-spacing:.01em;word-break:auto-phrase;}

/* =========================================================================
   Message（代表メッセージ）
   ========================================================================= */
.message__grid{display:flex;flex-direction:column;gap:32px;}
.message__photo{aspect-ratio:3/4;overflow:hidden;background:#e9e9ea;}
/* 代表の写真だけはカラーのまま。人柄を伝えるカットをモノクロに揃えると、
   本人ではなく「素材」に見えてしまう（他の写真はモノクロで統一）。 */
.message__photo .ph,.message__photo img{width:100%;height:100%;object-fit:cover;}
.message__text{font-size:14px;line-height:2.1;color:#333;margin-bottom:22px;}
.message__sign{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);}
.message__company{display:block;font-family:var(--sans);font-size:.95rem;color:var(--gray);letter-spacing:.06em;margin-bottom:6px;}
.message__role{display:block;font-family:var(--sans);font-size:1rem;color:var(--ink);letter-spacing:.06em;}
.message__role strong{font-weight:800;font-size:1.35rem;margin-left:8px;}

/* =========================================================================
   Business detail（ABOUT）
   ========================================================================= */
.bdetail{display:flex;flex-direction:column;gap:26px;margin-bottom:clamp(56px,10vw,110px);}
.bdetail:last-child{margin-bottom:0;}
.bdetail__photo{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2);}
.bdetail__photo .ph,.bdetail__photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);}
.bdetail__no{font-family:var(--sans);font-weight:900;font-size:30px;color:var(--red);letter-spacing:.06em;font-variant-numeric:tabular-nums;}
.bdetail__title{font-family:var(--sans);font-weight:700;font-size:clamp(1.4rem,5vw,1.75rem);letter-spacing:.05em;margin:4px 0 16px;}
.bdetail__lead{font-size:14px;color:#333;margin-bottom:26px;}

/* サービス内訳（説明文が無い項目も成立させる） */
.svc{display:flex;flex-direction:column;margin-bottom:26px;border-top:1px solid var(--line);}
.svc__item{padding:16px 0;border-bottom:1px solid var(--line);}
.svc__title{position:relative;font-family:var(--sans);font-weight:700;font-size:13.5px;letter-spacing:.05em;padding-left:16px;}
/* 見出しが折り返しても1行目に留めるため、行ボックス（1.9em）の中心に置く */
.svc__title::before{content:"";position:absolute;left:0;top:calc((1.9em - 5px) / 2);width:5px;height:5px;border-radius:50%;background:var(--red);}
.svc__text{margin-top:6px;padding-left:16px;font-size:13px;color:#555;}

.bdetail__tags{display:flex;flex-wrap:wrap;gap:8px;}
.bdetail__tags li{font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;color:var(--gray);border:1px solid var(--line);border-radius:999px;padding:6px 14px;}

/* 実績の裏づけ（取引先）。ロゴが揃うまでは社名の組みで受ける。
   掲載可否は サイト設定 → CLIENTS の切り替えに従う。 */
.proof{margin-top:clamp(48px,7vw,88px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--ink);}
.proof__note{margin-top:20px;}
/* ABOUT の CLIENTS はトップと同じロゴの並び。上罫は .proof が持っているので重ねない
   （.clients__grid の指定はこれより後ろにあるため、詳細度で上回る書き方にする） */
.proof .clients__grid{border-top:0;}

/* 店舗情報。枠付きのカードは版面でここだけ浮くので、
   トップの会社概要（.company-home__dl）と同じ「上罫＋行ごとの細罫」で通す。 */
.shop__dl{display:grid;grid-template-columns:1fr;border-top:1px solid var(--ink);}
.shop__dl dt{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.18em;color:var(--gray);text-transform:uppercase;padding-top:16px;}
.shop__dl dd{font-size:13.5px;color:#333;line-height:1.9;padding:4px 0 16px;border-bottom:1px solid var(--line);}
.shop__dl dd a{display:inline-flex;align-items:center;min-height:44px;color:var(--red);text-decoration:underline;text-underline-offset:3px;}
.shop__dl dd a:hover{opacity:.7;}

/* =========================================================================
   Info table / Timeline / Access（会社概要）
   ========================================================================= */
.info-table{width:100%;border-collapse:collapse;border-top:1px solid var(--ink);}
.info-table th,.info-table td{display:block;text-align:left;padding:14px 2px;font-size:14px;}
.info-table th{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.18em;color:var(--gray);text-transform:uppercase;padding-bottom:2px;}
.info-table td{color:#333;border-bottom:1px solid var(--line);padding-top:2px;}

.history{background:var(--paper-2);}
.timeline{position:relative;padding-left:8px;}
.timeline::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line);}
.timeline__item{position:relative;display:flex;flex-direction:column;gap:2px;padding:0 0 30px 28px;}
.timeline__item:last-child{padding-bottom:0;}
.timeline__dot{position:absolute;left:-3px;top:10px;width:7px;height:7px;border-radius:50%;background:var(--red);}
.timeline__year{font-family:var(--sans);font-weight:700;font-size:12px;color:var(--red);letter-spacing:.12em;}
.timeline__text{font-size:14px;color:#333;}

.access__grid{display:flex;flex-direction:column;gap:26px;}
.access__name{font-family:var(--sans);font-weight:700;font-size:1.15rem;letter-spacing:.05em;margin-bottom:14px;}
.access__info p{font-size:14px;color:#333;margin-bottom:10px;}
.access__map-ph{aspect-ratio:16/10;background:var(--paper-2);display:grid;place-items:center;}
.access__map-ph span{font-size:11px;letter-spacing:.3em;color:var(--gray-light);}
.access__map iframe{width:100%;aspect-ratio:16/10;border:0;display:block;}

/* =========================================================================
   お知らせ 一覧 / 個別
   ========================================================================= */
.news-list{border-top:1px solid var(--ink);}
.news-list__item{border-bottom:1px solid var(--line);}
.news-list__link{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:22px 2px;transition:padding-left .4s var(--ease-out);}
.news-list__link:hover{padding-left:10px;}
.news-list__link:hover .news-list__ttl{color:var(--red);}
.news-list__cat{font-size:9.5px;font-weight:700;letter-spacing:.16em;color:var(--red);border:1px solid var(--line);padding:4px 12px;min-width:92px;text-align:center;text-transform:uppercase;}
.news-list__ttl{flex:1 1 100%;font-size:14px;line-height:1.7;transition:color .3s var(--ease);}

/* --- マガジン風ヒーロー --- */
.news-hero{position:relative;display:flex;min-height:clamp(320px,50vh,520px);overflow:hidden;color:#fff;background:var(--ink);}
.news-hero__media{position:absolute;inset:0;z-index:0;}
.news-hero__media img,.news-hero__media .ph{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);}
.news-hero__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.36) 0%,rgba(0,0,0,.14) 38%,rgba(0,0,0,.8) 100%);}
.news-hero__inner{position:relative;z-index:2;flex:1;width:100%;max-width:var(--maxw);margin-inline:auto;padding:clamp(24px,4vw,40px) var(--pad) clamp(32px,5vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:26px;}
.news-hero__foot{max-width:var(--measure);}
.news-hero__meta{display:inline-flex;align-items:center;gap:14px;margin-bottom:16px;font-size:12px;letter-spacing:.08em;}
.news-hero__meta time{font-variant-numeric:tabular-nums;}
.news-hero__cat{border:1px solid rgba(255,255,255,.55);padding:4px 12px;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.news-hero__title{font-family:var(--sans);font-weight:800;font-size:clamp(1.6rem,4.8vw,2.8rem);line-height:1.36;letter-spacing:0;}
.news-hero .breadcrumb,.news-hero .breadcrumb a{color:rgba(255,255,255,.75);}
.news-hero .breadcrumb a:hover,.news-hero .breadcrumb__current{color:#fff;}

/* --- 目次 --- */
.news-toc{background:var(--paper-2);border:1px solid var(--line);padding:24px 26px;margin-bottom:44px;}
.news-toc__ttl{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.24em;color:var(--red);margin-bottom:14px;text-transform:uppercase;}
.news-toc ol{counter-reset:toc;}
.news-toc li{counter-increment:toc;margin-bottom:9px;font-size:13.5px;line-height:1.7;}
.news-toc li:last-child{margin-bottom:0;}
.news-toc a{color:#333;display:inline-flex;gap:10px;}
.news-toc a::before{content:counter(toc,decimal-leading-zero);color:var(--red);font-weight:700;font-family:var(--sans);}
.news-toc a:hover{color:var(--red);}

/* --- 本文 --- */
.news-single__body{margin-bottom:48px;}
.entry p{margin-bottom:22px;font-size:14px;color:#333;line-height:2.05;}
.entry h2{font-family:var(--sans);font-weight:700;font-size:1.3rem;letter-spacing:.05em;margin:38px 0 16px;scroll-margin-top:110px;}
.entry h3{font-family:var(--sans);font-weight:700;font-size:1.1rem;letter-spacing:.05em;margin:28px 0 12px;}
.entry img{max-width:100%;height:auto;margin:10px 0;}
.entry ul,.entry ol{margin:0 0 22px;padding-left:1.4em;}
.entry li{font-size:14px;color:#333;line-height:2;margin-bottom:6px;}
.entry ul li{list-style:disc;}
.entry ol li{list-style:decimal;}
.entry a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}
.entry blockquote{margin:24px 0;padding:14px 20px;border-left:2px solid var(--red);color:#555;background:var(--paper-2);}

/* --- SNSシェア --- */
.news-share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line);}
.news-share__label{font-size:10.5px;font-weight:700;letter-spacing:.22em;color:var(--gray);margin-right:4px;text-transform:uppercase;}
.news-share__btn{position:relative;width:44px;height:44px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:#444;background:#fff;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease-out);cursor:pointer;}
.news-share__btn svg{width:17px;height:17px;}
.news-share__btn:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px);}
.news-share__copy.is-copied{background:var(--red);color:#fff;border-color:var(--red);}
.news-share__copied{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:11px;letter-spacing:.04em;padding:4px 10px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s var(--ease);}
.news-share__copy.is-copied .news-share__copied{opacity:1;}

/* --- 関連記事 / 記事ナビ --- */
.news-related{background:var(--paper-2);}
.news-related .container{padding-block:clamp(52px,9vw,96px);}
.news-related__head{margin-bottom:clamp(26px,4vw,42px);}
.news-related__list{display:flex;flex-direction:column;gap:26px;}
.news-related__item a{display:block;color:var(--ink);}
.news-related__thumb{display:block;aspect-ratio:16/10;overflow:hidden;margin-bottom:16px;background:#e9e9ea;}
.news-related__thumb .ph,.news-related__thumb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .8s var(--ease-out),filter .6s var(--ease);}
.news-related__item a:hover .news-related__thumb .ph,.news-related__item a:hover .news-related__thumb img{transform:scale(1.05);filter:grayscale(0);}
.news-related__meta{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:11.5px;color:var(--gray);letter-spacing:.06em;}
.news-related__meta time{font-variant-numeric:tabular-nums;}
.news-related__ttl{display:block;font-size:14px;line-height:1.7;transition:color .3s var(--ease);}
.news-related__item a:hover .news-related__ttl{color:var(--red);}

.news-single__navsec .container{padding-block:clamp(44px,7vw,72px);}
.news-single__nav{display:flex;flex-direction:column;gap:18px;text-align:center;}
.news-single__nav-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;color:var(--gray);margin-bottom:6px;text-transform:uppercase;}
.news-single__nav-ttl{display:block;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .3s var(--ease);}
.news-single__nav a:hover .news-single__nav-ttl{color:var(--red);}
.news-single__nav-list{align-self:center;font-size:10.5px;font-weight:700;letter-spacing:.2em;color:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:13px 28px;text-transform:uppercase;transition:background .3s var(--ease),color .3s var(--ease);}
.news-single__nav-list:hover{background:var(--ink);color:#fff;}

.pagination{margin-top:48px;display:flex;justify-content:center;gap:6px;flex-wrap:wrap;}
.pagination .page-numbers{display:inline-flex;min-width:44px;height:44px;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--line);font-size:13px;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);}
.pagination a.page-numbers:hover{border-color:var(--ink);}
.pagination .current{background:var(--ink);color:#fff;border-color:var(--ink);}

/* =========================================================================
   Contact form（入力欄そのもの。ページの組みは末尾の「お問い合わせページ」に）
   ========================================================================= */
.admin-note{background:var(--paper-2);border:1px solid var(--line);border-left:2px solid var(--red);padding:18px;font-size:12.5px;color:#7a2233;margin-bottom:28px;line-height:1.9;}
.admin-note code{background:#fff;padding:1px 6px;font-size:12px;}

/* CF7 & preview form 共通 */
.cf-form p,.wpcf7-form p{margin:0 0 22px;}
.cf-field label,.wpcf7-form .cf-field label{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-bottom:10px;}
.req{display:inline-block;margin-left:8px;font-size:9.5px;font-weight:700;color:#fff;background:var(--red);padding:2px 7px;letter-spacing:.08em;vertical-align:middle;}
.cf-form input[type=text],.cf-form input[type=email],.cf-form input[type=tel],.cf-form textarea,.cf-form select,
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],.wpcf7-form input[type=url],.wpcf7-form input[type=number],.wpcf7-form input[type=date],.wpcf7-form textarea,.wpcf7-form select{
	width:100%;padding:16px 18px;font-family:inherit;font-size:15px;letter-spacing:.02em;color:var(--ink);
	background:#fff;border:1px solid var(--line);border-radius:0;
	transition:border-color .3s var(--ease),background .3s var(--ease);
}
.cf-form input:hover,.cf-form textarea:hover,.cf-form select:hover,
.wpcf7-form input:hover,.wpcf7-form textarea:hover,.wpcf7-form select:hover{border-color:var(--gray-light);}
/* 枠線の色だけでは focus の合図として弱い。素の :focus-visible（赤い輪郭）は残す */
.cf-form input:focus,.cf-form textarea:focus,.cf-form select:focus,
.wpcf7-form input:focus,.wpcf7-form textarea:focus,.wpcf7-form select:focus{border-color:var(--ink);}
.cf-form textarea,.wpcf7-form textarea{resize:vertical;min-height:160px;}
.cf-select{position:relative;display:block;}
.cf-select::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:1px solid var(--gray);border-bottom:1px solid var(--gray);transform:translateY(-70%) rotate(45deg);pointer-events:none;}
.cf-form select,.wpcf7-form .cf-select select{appearance:none;}
.cf-consent,.wpcf7-form .consent{font-size:13px;color:#333;}
.cf-consent a,.wpcf7-form .consent a{color:var(--red);text-decoration:underline;}
.cf-consent input,.wpcf7-form input[type=checkbox]{margin-right:8px;}
/* CF7 の acceptance ラベルは1行のインライン表示に戻す */
.wpcf7-form .consent .wpcf7-list-item{margin:0;display:inline;}
.wpcf7-form .consent label{display:inline;font-weight:400;margin:0;letter-spacing:normal;text-transform:none;font-size:13px;color:#333;}
.cf-submit .btn,.wpcf7-form .wpcf7-submit{min-height:58px;padding:0 60px;background:var(--ink);color:#fff;border:0;border-radius:999px;font-size:12px;letter-spacing:.2em;font-weight:700;cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease-out);}
.wpcf7-form .wpcf7-submit:hover{background:var(--red);transform:translateY(-2px);}
.wpcf7-form .wpcf7-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.wpcf7-not-valid-tip{color:var(--red);font-size:12px;margin-top:6px;}
.wpcf7-form input.wpcf7-not-valid,.wpcf7-form textarea.wpcf7-not-valid,.wpcf7-form select.wpcf7-not-valid{border-color:var(--red);}
.wpcf7-response-output{font-size:13px;margin:18px 0 0;padding:14px 16px;border:1px solid var(--line);}
.wpcf7-form.invalid .wpcf7-response-output,.wpcf7-form.unaccepted .wpcf7-response-output{border-color:var(--red);color:#7a2233;background:#fff4f6;}
.wpcf7-form.sent .wpcf7-response-output{border-color:#2e7d32;color:#1b5e20;background:#eef8ef;}
.wpcf7-spinner{margin:0 0 0 12px;}

/* =========================================================================
   Privacy policy（組みは会社概要の表と共通。末尾の「項目名＋内容の2列」を参照）
   ========================================================================= */
.policy__intro{font-size:clamp(14px,1.6vw,16px);line-height:2.05;color:#333;margin-bottom:clamp(34px,5.5vw,60px);}
.policy__date{margin-top:clamp(30px,4.5vw,44px);font-size:13px;color:var(--gray);line-height:1.95;}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer{background:var(--ink);color:rgba(255,255,255,.8);}
.site-footer__inner{
	display:flex;flex-direction:column;gap:44px;
	max-width:var(--maxw);margin-inline:auto;padding:clamp(56px,10vw,96px) var(--pad) 44px;
}
.site-footer__logo{width:128px;height:auto;margin-bottom:20px;}
.site-footer__tagline{font-family:var(--sans);font-size:1rem;color:#fff;margin-bottom:18px;letter-spacing:.08em;}
.site-footer__addr{font-style:normal;font-size:12px;color:rgba(255,255,255,.58);line-height:1.95;}
.site-footer__addr a{color:rgba(255,255,255,.58);}
.site-footer__addr a:hover{color:#fff;}

.site-footer__nav{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px;}
.fnav--social{grid-column:1 / -1;}
.fnav__ttl{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.28em;color:rgba(255,255,255,.45);margin-bottom:18px;text-transform:uppercase;}
.fnav ul{display:flex;flex-direction:column;gap:14px;}
.fnav a{font-size:13px;color:rgba(255,255,255,.8);}
.fnav a:hover{color:var(--pink);}

.fsocial a{display:inline-flex;align-items:center;gap:12px;min-height:44px;}
.fsocial__icon{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(255,255,255,.24);border-radius:50%;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);}
.fsocial__icon svg{width:17px;height:17px;}
.fsocial a:hover .fsocial__icon{background:#fff;color:var(--ink);border-color:#fff;}
.fsocial__label{display:flex;flex-direction:column;line-height:1.5;font-size:12.5px;}
.fsocial__handle{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.04em;}

.site-footer__bottom{
	border-top:1px solid rgba(255,255,255,.12);
	display:flex;flex-direction:column;gap:16px;align-items:flex-start;
	max-width:var(--maxw);margin-inline:auto;padding:26px var(--pad);
}
.site-footer__copy{font-size:10.5px;color:rgba(255,255,255,.45);letter-spacing:.1em;}
.site-footer__legal a{font-size:10px;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.6);}
.site-footer__legal a:hover{color:var(--pink);}
.page-top{display:inline-flex;align-items:center;gap:12px;font-size:10px;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.75);}
.page-top__arrow{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.28);border-radius:50%;transition:background .35s var(--ease),border-color .35s var(--ease);}
.page-top__arrow::after{content:"";width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translateY(2px) rotate(-45deg);}
.page-top:hover{color:#fff;}
.page-top:hover .page-top__arrow{background:rgba(255,255,255,.12);border-color:#fff;}

/* =========================================================================
   Breakpoints — 600px
   ========================================================================= */


/* =========================================================================
   Breakpoints — 768px
   ========================================================================= */


/* =========================================================================
   Breakpoints — 1024px（PCは水平ナビ）
   ========================================================================= */


/* =========================================================================
   Reduced motion — アニメを一切出さず、全要素を最終状態で見せる
   ========================================================================= */

/* ====== 旧 front.css：トップと下層で共有するセクション部品 ====== */

/* =========================================================================
   キネティック・タイポグラフィの土台
   トップだけ文字組みを一段大きくし、写真も同じリズム・同じ大きさで扱う。
   ========================================================================= */
.section-title{font-weight:800;font-size:clamp(2.3rem,8vw,4.6rem);line-height:1.28;letter-spacing:-.005em;}
.section-title--lg{font-weight:900;font-size:clamp(2.9rem,11vw,7rem);line-height:1.14;letter-spacing:-.02em;}
.section{padding-block:clamp(72px,9.5vw,124px);}
.section-head{margin-bottom:clamp(32px,4.6vw,56px);}
.label{font-size:11px;letter-spacing:.34em;margin-bottom:20px;}

/* 巨大英字の帯。スクロールした分だけ横に流れる（常時は動かない） */
.drift{
	position:relative;z-index:0;
	width:100%;overflow:hidden;
	/* 負の値なので clamp の第1引数が最小（＝いちばん強い引き上げ）。
	   小さい順に -48px, -2vw, -16px と並べないと min>max になり、常に -16px に張り付く。 */
	margin-bottom:clamp(-48px,-2vw,-16px);
	pointer-events:none;user-select:none;
}
.drift__row{
	display:flex;align-items:center;width:max-content;
	font-family:var(--sans);font-weight:900;
	font-size:clamp(4rem,17vw,14rem);line-height:.9;letter-spacing:-.02em;
	color:var(--watermark);
	will-change:transform;
}
.drift__word{display:block;}
.drift__sep{display:block;flex:0 0 auto;width:.34em;height:.34em;margin:0 .3em;border-radius:50%;background:currentColor;}
.drift--dark .drift__row{color:rgba(255,255,255,.07);}
.drift--dark{position:absolute;top:calc(var(--sec) * .35);left:0;z-index:1;margin:0;}

/* 写真は枠の中で上へ抜ける。文字の流れと同じ「スクロールした分だけ動く」に揃える */
/* 枠より18%高くして、上へ抜ける分の余白を確保する。
   .bizcard__media .ph のように後から height:100% を当てる指定と同じ強さだと
   書いた順で負けて画像の下に隙間が出るため、クラス2つ分の強さにしてある。 */
.media.media--drift .ph{height:118%;}

/* 見出しは全幅で振り切るが、地の文は行長を止める。
   トップは2カラムの中に本文が入るので、列幅任せだと広い画面で1行60字を超える。 */
.story__text,
.msg__text,
.cta-home__text,
.cta-home__card-text{max-width:var(--measure);}

/* =========================================================================
   HERO
   ========================================================================= */
/* 写真1枚を全面に敷いて文字を白抜きする。写真を白で薄める処理は入れない。 */
.hero{
	position:relative;
	min-height:100svh;
	display:flex;align-items:flex-end;
	overflow:hidden;
	background:var(--ink);color:#fff;
}
@supports not (min-height:100svh){.hero{min-height:100vh;}}

.hero__slides{position:absolute;inset:0;z-index:0;}
/* フィルムの粒子。ライトリークと組で「写した」質感にする。
   .hero__slides の中（＝写真と同じ重ね順）に置くので、上に載る文字には掛からない。
   親に置いているため、寄り（scale 1→1.06）では粒が動かない＝画面に焼き付いたままになる。
   画像ファイルは足さない（SVGのフラクタルノイズをそのまま敷く）。 */
.hero__slides::after{
	content:"";
	/* 粒を動かすぶん、外側へ逃がす余白を持たせる（動かしても端が出ない） */
	position:absolute;inset:-100px;z-index:1;
	pointer-events:none;
	/* overlay は暗部を潰し明部を飛ばすので、粒そのものを feComponentTransfer で
	   硬くしてから重ねる。素のノイズを normal で薄く敷くと黒が灰色に浮いて
	   写真が眠くなる（実測：normal .09 で黒が +39 も持ち上がる）。
	   この組み合わせなら、粒立ちは5倍・黒の浮きは +6 に収まる。 */
	mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncG type='linear' slope='3.2' intercept='-1.1'/%3E%3CfeFuncB type='linear' slope='3.2' intercept='-1.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
	background-size:160px 160px;
	/* フィルムは1コマごとに粒の位置が変わる。補間せず飛ばす（steps(1)）ことで
	   「滑って動く」ではなく「引き直される」ように見える。
	   毎秒9回。24コマ相当まで上げるとちらつきが強く、読むのを邪魔する。
	   ずらし幅はタイル（160px）未満に収め、position ではなく transform で動かす
	   （背景位置を動かすと毎回描き直しになるため）。 */
	animation:aemi-grain 1.1s steps(1,end) infinite;
}
@keyframes aemi-grain{
	0%,100%{transform:translate(0,0);}
	10%{transform:translate(-38px,26px);}
	20%{transform:translate(54px,-18px);}
	30%{transform:translate(-22px,-61px);}
	40%{transform:translate(67px,44px);}
	50%{transform:translate(-71px,12px);}
	60%{transform:translate(31px,-49px);}
	70%{transform:translate(-56px,58px);}
	80%{transform:translate(19px,33px);}
	90%{transform:translate(-45px,-29px);}
}
/* 切替（ワイプ）と寄りは main.js のタイムラインが受け持つ。
   ここは JS が動かないときの静的な表示だけを決める。 */
.hero__slide{position:absolute;inset:0;opacity:0;}
.hero__slide.is-active{opacity:1;}
/* ヒーローは写真を主役にするのでカラーのまま出す（他セクションはモノクロで統一） */
.hero__slide .ph,.hero__slide img{width:100%;height:100%;object-fit:cover;}

/* 真ん中は素通し。ヘッダーが載る上端と、見出しが載る下端だけを沈める。
   中身（どこをどれだけ沈めるか）は幅の帯ごとに別々に決める。
     767px 以下 → コピーが縦積みになるので、暗幕は .hero__inner に持たせる
     768px 以上 → コピーとお知らせが左右に分かれるので、2つの角で受ける
   ここは重ね順と位置だけを決める。 */
.hero__scrim{position:absolute;inset:0;z-index:1;}

/* フィルムのライトリーク。写真の切替はこの光の下で起きる。
   ロゴの虹波と同じ色で漏れさせるが、色の帯に見えるとネオンに寄るので
   ①白い芯を中心に置いて「光」に見せる ②境目を作らず全ての止めをなだらかにする
   ③文字が載る側には届かせない（767px 以下はコピーの塊が持つ暗幕が、
     768px 以上はマスクが受ける）、の3点で押さえている。
   一度通って消えるだけ。繰り返しスキャンはさせない。写真の上・文字の下（z-index:2）。 */
.hero__spot{
	position:absolute;top:-25%;bottom:-25%;left:-45%;right:-45%;z-index:2;
	opacity:0;pointer-events:none;
	background:
		/* 芯（白）— これが無いと単なる色の帯になり、光として読めない */
		linear-gradient(104deg,
			rgba(255,255,255,0) 40%,
			rgba(255,255,255,.1) 46%,
			rgba(255,255,255,.34) 50%,
			rgba(255,255,255,.1) 54%,
			rgba(255,255,255,0) 60%),
		/* 滲み（虹波）— 芯より広く、薄く。ロゴのグラデーションと同じ並び順 */
		linear-gradient(104deg,
			rgba(201,0,22,0) 24%,
			rgba(201,0,22,.3) 33%,
			rgba(191,0,95,.42) 40%,
			rgba(169,0,194,.5) 47%,
			rgba(142,6,251,.46) 54%,
			rgba(0,102,208,.38) 62%,
			rgba(0,222,255,.26) 70%,
			rgba(0,222,255,0) 80%),
		/* 漏れ口（画面の左上から入る）*/
		radial-gradient(70% 90% at 14% -10%,
			rgba(255,255,255,.22) 0%,
			rgba(191,0,95,.16) 38%,
			rgba(142,6,251,.08) 62%,
			rgba(0,0,0,0) 82%);
	/* 文字が載る側には光を届かせない。
	   リークの色（虹波）は英字ステートメントのピンクと同系なので、
	   当たると文字が光に溶けて消える（実測 1.0:1）。
	   どこで切るかは幅の帯ごとに決める。767px 以下はコピーの塊自身が
	   暗幕を持つので切る必要がなく、768px 以上は下端に向けて落とす。 */
	mix-blend-mode:screen;
}

/* ヒーローの導入は main.js のタイムラインが受け持つ。
   ここでの初期状態は JS が動くときだけ（js-motion）適用する。 */
html.js-motion .hero__title{opacity:0;}
html.js-motion .hero__sub,
html.js-motion .hero__movie,
html.js-motion .hero__news{opacity:0;transform:translateY(18px);}
html.js-motion .hero__scroll{opacity:0;}

.hero__inner{
	position:relative;z-index:3;
	width:100%;max-width:var(--maxw);margin-inline:auto;
	padding:calc(var(--header-h) + 40px) var(--pad) clamp(56px,13vw,86px);
	display:flex;flex-direction:column;gap:clamp(34px,7vw,48px);
}
/* 写真の明暗に左右されないよう、白文字に薄い黒の沈みを添える */
.hero__title{
	font-family:var(--sans);font-weight:900;color:#fff;
	/* 和文は1字＝1em。いちばん長い行「スポットライトを。」は9字なので、
	   1行に収めるには 字サイズ ≦ 行幅/9 が要る（行幅＝100vw - --pad*2）。
	   10vw だと行幅ぎりぎりまで埋まって窮屈なので、余白を残す 8.8vw にしている。 */
	font-size:clamp(1.4rem,6.8vw,7rem);line-height:1.16;letter-spacing:-.02em;
	text-shadow:0 2px 30px rgba(0,0,0,.5);
	/* 袋文字の英字の手前に置く */
	position:relative;z-index:1;
}
.hero__sub{
	/* 1920px・いちばん明るいカットで 4.50:1 とちょうど基準だったので余裕を持たせる */
	margin-top:20px;color:rgba(255,255,255,.92);
	font-family:var(--sans);font-weight:700;
	font-size:clamp(9.5px,2.6vw,11.5px);letter-spacing:.28em;line-height:1.9;
	text-shadow:0 1px 16px rgba(0,0,0,.55);
}

.hero__movie{display:inline-flex;align-items:center;gap:16px;margin-top:clamp(26px,5vw,36px);font-size:10.5px;font-weight:700;letter-spacing:.24em;color:#fff;}
.hero__movie-btn{
	position:relative;flex:0 0 auto;display:grid;place-items:center;
	width:52px;height:52px;border:1px solid rgba(255,255,255,.7);border-radius:50%;
	transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.hero__movie-btn::after{content:"";width:0;height:0;margin-left:3px;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;}
.hero__movie:hover .hero__movie-btn{background:#fff;color:var(--ink);border-color:#fff;}

.hero__news{display:flex;flex-direction:column;gap:12px;padding-top:22px;border-top:1px solid rgba(255,255,255,.28);}
.hero__news-label{font-family:var(--sans);font-weight:700;font-size:9.5px;letter-spacing:.28em;color:#fff;}
.hero__news-link{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.7;color:rgba(255,255,255,.92);}
.hero__news-link time{font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.6);font-variant-numeric:tabular-nums;}
.hero__news-link:hover{color:#fff;}
.hero__news .link-arrow{color:rgba(255,255,255,.8);align-self:flex-start;}
.hero__news .link-arrow:hover{color:#fff;}

/* モバイルは左に置くと見出しと重なるので右端へ逃がす */
.hero__scroll{
	position:absolute;right:calc(var(--pad) * .3);bottom:clamp(48px,11vw,72px);z-index:4;
	writing-mode:vertical-rl;
	font-family:var(--sans);font-weight:700;font-size:9px;letter-spacing:.34em;color:rgba(255,255,255,.88);
	padding-bottom:52px;
}
.hero__scroll::after{
	content:"";position:absolute;left:50%;bottom:0;width:1px;height:42px;
	background:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,0));
	animation:aemi-scroll 2.4s var(--ease) infinite;transform-origin:top;
}
@keyframes aemi-scroll{0%{transform:scaleY(0);}45%{transform:scaleY(1);}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ---------- 767px 以下：暗幕を画面ではなくコピーの塊に持たせる ----------
   768px からはコピーとお知らせが左右に分かれるので、対象はその手前まで。
   縦積みの幅では、コピーとお知らせが1つの塊になって画面の下半分を占める。
   これを「下端から 780px」の傾斜で沈めていたが、実際の塊は 390x844 で
   391px しかなく、倍の高さを暗くしていた。結果、写真は下半分が輝度 0.004
   （ほぼ黒）まで落ち、文字のほうは 16〜19:1 ＝必要な 4.5:1 の4倍という
   極端に振れた状態になっていた。SPでは写真が主役なので、暗幕は
   「読ませるのに要る範囲」だけに絞る。

   px で画面から測るのをやめ、.hero__inner に持たせる。
   この要素は中身の高さ＋余白ぶんしかないので、上端から px で切った傾斜を
   敷けば、暗くなり始める位置が常に「1行目の文字の 1余白ぶん上」になる。
   画面の高さ・幅・お知らせの行数が変わっても関係が崩れない
   （＝ px 決め打ちで起きていた「縦に短いと文字が暗部の外へ出る」が構造的に消える）。 */
@media (max-width:767px){
	.hero__scrim{
		background:
			/* ヘッダー（白ロゴ・ハンバーガー）が載る上端だけ。
			   30% で切ると縦に長い画面ほど深く入るので px で止める。
			   ヘッダーの高さ（64px）までは濃さを保ち、そこから 180px までで抜く
			   （抜きを早めるとハンバーガーの線が明るいカットで 2.4:1 まで落ちる）。 */
			linear-gradient(180deg,rgba(8,8,10,.56) 0,rgba(8,8,10,.46) 46px,rgba(8,8,10,.3) 84px,rgba(8,8,10,.1) 130px,rgba(8,8,10,0) 180px),
			/* 写真の締まりだけ残す。文字のための沈みは .hero__inner が持つ。 */
			linear-gradient(180deg,rgba(8,8,10,0) 46%,rgba(8,8,10,.1) 78%,rgba(8,8,10,.18) 100%);
	}
	/* 傾斜は .hero__inner の padding-top（＝ヘッダー高 64 + 40 = 104px）の中で
	   終わらせる。1行目の英字が乗る時点で既にベタに近い。 */
	.hero__inner::before{
		content:"";
		position:absolute;inset:0;z-index:-1;pointer-events:none;
		background:linear-gradient(180deg,
			rgba(8,8,10,0) 0,
			rgba(8,8,10,.12) 30px,
			rgba(8,8,10,.4) 56px,
			rgba(8,8,10,.68) 80px,
			rgba(8,8,10,.85) 104px,
			rgba(8,8,10,.9) 180px,
			rgba(8,8,10,.94) 100%);
	}
}

/* =========================================================================
   OUR MISSION / 事業内容
   ========================================================================= */
.mission-home{position:relative;overflow:hidden;}
.mission-home__lead{position:relative;z-index:1;margin-bottom:clamp(48px,9vw,96px);}
.mission-home__text{margin-top:clamp(26px,4vw,36px);max-width:var(--measure);}
.mission-home__text p{font-size:clamp(14px,1.6vw,16px);line-height:2.2;color:#333;margin-bottom:22px;}
.mission-home__text p:last-child{margin-bottom:0;}
.mission-home__btn{margin-top:clamp(30px,5vw,40px);}

/* 事業カードは横長のバナー1枚。押せることが伝わるよう、
   ホバー／タップで「写真の寄り・色の掃き・英字の入れ替わり・矢印の踏み込み」が同時に起きる。
   タッチ端末には hover が無いので :active も同じ条件に入れている。 */
.bizcards{position:relative;z-index:1;display:flex;flex-direction:column;gap:clamp(14px,2.4vw,22px);}
.bizcard{
	position:relative;isolation:isolate;display:block;overflow:hidden;color:#fff;
	min-height:clamp(190px,20vw,280px);
}
.bizcard__media{position:absolute;inset:0;z-index:0;transition:transform .9s var(--ease-out);}
.bizcard__media .ph,.bizcard__media img{width:100%;height:100%;object-fit:cover;}
/* 文字が載る左側だけ沈める。右は写真を見せたままにする */
.bizcard__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.8) 34%,rgba(8,8,10,.5) 62%,rgba(8,8,10,.22) 100%);}
/* 事業ごとの色を膜として掃く。平常時は出さず、押せる合図としてだけ出す */
.bizcard__sweep{
	position:absolute;inset:-2px;z-index:2;opacity:0;
	transform:translateX(-16%) skewX(-8deg);
	transition:opacity .45s var(--ease),transform .7s var(--ease-out);
}
.bizcard--ent .bizcard__sweep{background:rgba(142,6,251,.42);}
.bizcard--cypher .bizcard__sweep{background:rgba(169,0,194,.42);}
.bizcard--food .bizcard__sweep{background:rgba(201,0,22,.42);}

.bizcard__body{
	position:relative;z-index:3;
	display:flex;flex-direction:column;gap:6px;
	padding:clamp(22px,3.2vw,40px);
	padding-right:clamp(84px,9vw,140px);
}
.bizcard__no{font-family:var(--sans);font-weight:700;font-size:clamp(.8rem,2vw,1rem);letter-spacing:.18em;color:rgba(255,255,255,.7);}
.bizcard__en{font-family:var(--sans);font-weight:900;font-size:clamp(1.5rem,3.8vw,2.9rem);line-height:1.05;letter-spacing:-.015em;}
.bizcard__ja{font-size:clamp(12px,1.5vw,14.5px);letter-spacing:.18em;color:rgba(255,255,255,.9);}
.bizcard__desc{display:none;margin-top:6px;font-size:12.5px;line-height:1.9;color:rgba(255,255,255,.88);max-width:58em;word-break:auto-phrase;}

/* 英字の入れ替わり。同じ語を2枚重ね、上下に送って差し替える */
.roll{display:block;position:relative;overflow:hidden;}
.roll__a,.roll__b{display:block;transition:transform .55s var(--ease-out);}
.roll__b{position:absolute;left:0;top:0;transform:translateY(106%);}

.bizcard__go{
	position:absolute;z-index:3;
	right:clamp(20px,2.6vw,40px);bottom:clamp(20px,2.6vw,40px);
	width:clamp(50px,4.4vw,66px);aspect-ratio:1;
	display:grid;place-items:center;border-radius:50%;
	border:1px solid rgba(255,255,255,.62);
	transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease-out);
}
.bizcard__go::after{content:"";width:9px;height:9px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translateX(-2px) rotate(45deg);}

.bizcard:hover .bizcard__media,
.bizcard:focus-visible .bizcard__media,
.bizcard:active .bizcard__media{transform:scale(1.06);}
.bizcard:hover .bizcard__sweep,
.bizcard:focus-visible .bizcard__sweep,
.bizcard:active .bizcard__sweep{opacity:1;transform:translateX(0) skewX(-8deg);}
.bizcard:hover .roll__a,
.bizcard:focus-visible .roll__a,
.bizcard:active .roll__a{transform:translateY(-106%);}
.bizcard:hover .roll__b,
.bizcard:focus-visible .roll__b,
.bizcard:active .roll__b{transform:translateY(0);}
.bizcard:hover .bizcard__go,
.bizcard:focus-visible .bizcard__go,
.bizcard:active .bizcard__go{background:#fff;color:var(--ink);border-color:#fff;transform:translateX(8px) scale(1.08);}

/* =========================================================================
   ABOUT AEMI / OUR STORY
   ========================================================================= */
.story{position:relative;overflow:hidden;}
/* 見出しは版面いっぱいの幅で受けてから、写真と本文を下に並べる。
   2カラムの中に大見出しを押し込むと文字を小さくするしかなくなるため。 */
.story__head{position:relative;z-index:1;margin-bottom:clamp(38px,6vw,68px);}
.story__grid{display:flex;flex-direction:column;gap:clamp(34px,6vw,56px);}
.story__media{position:relative;}

/* 写真3枚の構図。等分に並べず、主役1枚＋添え2枚に段差をつけて版面に動きを作る。
   モバイル: 大1枚の下に小2枚（右だけ下げる）／PC: 縦長の大1枚の横に小2枚を積んで列ごと下げる。 */
.story__figs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2.4vw,18px);align-items:start;}
.story__fig--1{grid-column:1 / -1;aspect-ratio:4/3;}
.story__fig--2{aspect-ratio:1;}
.story__fig--3{aspect-ratio:1;transform:translateY(clamp(16px,5vw,28px));}
/* 「何の会社か」に答える一文だけ、蛍光ペンで面にして立てる。
   白抜きは 4.02:1 なので、19px 以上の太字（大きな文字の基準 3:1）でだけ使う。 */
.story__mark{margin-top:clamp(22px,4vw,30px);font-size:clamp(19px,2.2vw,26px);font-weight:700;line-height:1.75;letter-spacing:.01em;word-break:auto-phrase;}
.story__text{margin-top:clamp(18px,2.6vw,26px);margin-bottom:clamp(28px,5vw,36px);}
.story__text p{font-size:clamp(14px,1.6vw,16px);line-height:2.2;color:#333;margin-bottom:20px;}
.story__text p:last-child{margin-bottom:0;}

/* =========================================================================
   WHY AEMI / VALUES
   ========================================================================= */
.values{position:relative;overflow:hidden;}
.values .container{position:relative;z-index:1;}
.values__list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.value{display:flex;flex-direction:column;gap:12px;padding:clamp(30px,5.5vw,42px) 0;border-bottom:1px solid var(--line);}
/* アイコンではなく番号を主役に。文字が大きいこと自体が装飾になる */
.value__no{
	font-family:var(--sans);font-weight:900;
	font-size:clamp(2.6rem,7.4vw,4.2rem);line-height:1;letter-spacing:-.02em;
	font-variant-numeric:tabular-nums;
	color:var(--line);
}
/* 4カラムの列幅に「現場を知るプロデュース」が1行で収まる上限 */
.value__title{font-family:var(--sans);font-weight:700;font-size:clamp(1.05rem,1.72vw,1.24rem);line-height:1.6;letter-spacing:.01em;}
.value__text{font-size:clamp(13px,1.4vw,14px);line-height:2.05;color:#555;}

/* =========================================================================
   04 OUR PHILOSOPHY（ABOUT）
   番号はカードの添え物ではなく版面の骨。ただし文字には重ねない
   （数字が下地になると見出しが読みにくくなる）。番号は独立した列で受ける。
   ========================================================================= */
.philos{display:flex;flex-direction:column;gap:clamp(30px,4.2vw,54px);}
/* 3つの価値観を「別々の柱」として読ませる。地は白のまま、色は番号と罫が持つ。
   番号は面なので淡色。その上に載る本文は黒のままなので可読性は変わらない（実測 16:1）。 */
.philos__item:nth-child(1){border-top-color:rgba(201,0,22,.3);}
.philos__item:nth-child(2){border-top-color:rgba(142,6,251,.3);}
.philos__item:nth-child(3){border-top-color:rgba(0,102,208,.3);}
.philos__item:nth-child(1) .philos__no{color:var(--pale-red);}
.philos__item:nth-child(2) .philos__no{color:var(--pale-violet);}
.philos__item:nth-child(3) .philos__no{color:var(--pale-blue);}
.philos__item{padding-top:clamp(26px,3.6vw,40px);border-top:1px solid var(--line);}
/* SP は番号を見出しの上に置く。横に並べると番号のぶん見出しの行幅が足りなくなる */
.philos__no{
	display:block;margin-bottom:clamp(6px,1.2vw,12px);
	font-family:var(--sans);font-weight:900;
	font-size:clamp(3.4rem,9vw,7rem);line-height:.82;letter-spacing:-.04em;
	font-variant-numeric:tabular-nums;
	pointer-events:none;user-select:none;
}

.philos__title{
	font-family:var(--sans);font-weight:800;
	font-size:clamp(1.35rem,3.6vw,2.3rem);line-height:1.45;letter-spacing:.005em;
	margin-bottom:clamp(12px,1.6vw,18px);word-break:auto-phrase;
}
.philos__text{max-width:var(--measure);font-size:clamp(14px,1.6vw,16px);line-height:2.1;color:#333;}

@media (min-width:768px){
	/* 番号は独立した列へ。見出しと重ならないので、数字は大きいままにできる。
	   数字の上端と見出しの1行目の頭を揃えるため、番号側だけ行の頭を少し上げる。 */
	.philos__item{display:grid;grid-template-columns:clamp(110px,13vw,190px) minmax(0,1fr);gap:0 clamp(24px,4vw,56px);align-items:start;}
	.philos__no{margin-bottom:0;margin-top:-.06em;}
}

/* 事業には事業の色。トップの事業カードの膜（ent=violet / food=red）と揃える。
   地は白のままで、ラベル・見出しの1語・罫・ドット・タグに色を通す。 */
.business-detail .shead__en{color:var(--violet);}
.business-detail .shead__title .accent{color:var(--violet);}
.business-detail .svc{border-top-color:rgba(142,6,251,.26);}
.business-detail .svc__item{border-bottom-color:rgba(142,6,251,.26);}
.business-detail .svc__title::before{background:var(--violet);}
.business-detail .bdetail__tags li{border-color:rgba(142,6,251,.34);color:var(--violet);}
/* 実績の裏づけは事業の色の罫で受ける */
.proof{border-top-color:var(--violet);}
.proof .label--muted{color:var(--violet);}

/* CYPHER はマゼンタ。CYPHER(magenta)／芸能(violet)／飲食(red) の3色で事業を見分ける。
   ラベル・見出しの1語・罫・ドットまで通すのは ENTERTAINMENT と同じやり方。 */
.cypher .shead__en{color:var(--magenta);}
.cypher .shead__title .accent{color:var(--magenta);}
.bdetail--cypher .label{color:var(--magenta);}
.bdetail--cypher .svc{border-top-color:rgba(169,0,194,.26);}
.bdetail--cypher .svc__item{border-bottom-color:rgba(169,0,194,.26);}
.bdetail--cypher .svc__title::before{background:var(--magenta);}

/* 飲食は赤。ラベルは既定のままなので、罫だけ色を持たせる */
.otherbiz .shop__dl{border-top-color:var(--red);}

/* 未来の段は青。ラベルも青に振って、見出しの1語と対にする */
.vision .label{color:var(--blue);}

/* =========================================================================
   07 VISION（ABOUT）
   サイトで唯一、見出しを縦組みで立てる面（1024px 以上）。
   ========================================================================= */
.vision{position:relative;overflow:hidden;}
.vision__inner{position:relative;z-index:1;}
/* 「輝く場所へ。」だけ青（白地で 5.5:1） */
.vision__title .accent{color:var(--blue);}
.vision__title{
	font-family:var(--sans);font-weight:900;
	font-size:clamp(1.9rem,7vw,2.6rem);line-height:1.32;letter-spacing:-.01em;
	word-break:auto-phrase;
}
.vision__text{max-width:var(--measure);margin-top:clamp(30px,4.6vw,48px);}
.vision__text p{margin-bottom:22px;font-size:clamp(14px,1.6vw,16px);line-height:2.2;color:#333;}
.vision__text p:last-child{margin-bottom:0;}

/* =========================================================================
   WORKS
   ========================================================================= */
.works{overflow:hidden;}
.works__head{display:flex;flex-direction:column;gap:22px;margin-bottom:clamp(28px,5vw,44px);}
.works__tools{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.works__ctrl{display:flex;gap:10px;}
.works__btn{
	position:relative;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;
	transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease);
}
.works__btn::after{content:"";position:absolute;left:52%;top:50%;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:translate(-50%,-50%) rotate(-135deg);}
.works__btn--next::after{left:48%;transform:translate(-50%,-50%) rotate(45deg);}
.works__btn:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
.works__btn[disabled]{opacity:.3;cursor:not-allowed;}
.works__btn[disabled]:hover{background:none;border-color:var(--line);color:inherit;}

.works__track{
	--works-pad:var(--pad);
	/* 横だけのカルーセルなので縦は明示的に塞ぐ。overflow-x だけ指定すると
	   overflow-y は visible から auto に計算され、縦のスクロールコンテナになってしまう
	   （中身が縦にはみ出すとスライドだけが下にずれる）。
	   横は contain のままにして、端まで送ってもブラウザの「戻る」に繋がらないようにする。 */
	overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
	padding-inline:var(--works-pad);
	/* スナップ位置はスクロールポートの端が基準。scroll-padding を揃えないと
	   1枚目が padding のぶん左に食い込んだ状態で止まる。 */
	scroll-padding-left:var(--works-pad);
}
.works__track::-webkit-scrollbar{display:none;}
.works__list{display:flex;gap:clamp(14px,3vw,24px);width:max-content;}
.workcard{flex:0 0 auto;width:clamp(240px,72vw,340px);scroll-snap-align:start;}
.workcard a{display:block;color:var(--ink);}
.workcard__media{display:block;aspect-ratio:4/3;margin-bottom:16px;}
.workcard__meta{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.workcard__cat{font-weight:700;color:var(--red);text-transform:uppercase;}
.workcard__title{font-size:clamp(14px,1.5vw,16px);font-weight:500;line-height:1.7;word-break:auto-phrase;transition:color .3s var(--ease);}
.workcard a:hover .workcard__title{color:var(--red);}

/* =========================================================================
   NEWS（トップ）
   ========================================================================= */
.news-home__head{display:flex;flex-direction:column;gap:20px;}
.news-home__grid{display:flex;flex-direction:column;gap:clamp(32px,6vw,48px);}

/* =========================================================================
   MESSAGE
   ========================================================================= */
.msg__grid{display:flex;flex-direction:column;gap:clamp(34px,6vw,56px);}
/* SP は1カラムなので写真は版面いっぱい。左右は --pad だけで受けて余白を均等にする
   （右だけパディングを持たせると左16px/右44pxのように振れる）。
   2カラムになる 768px 以上でだけ、写真の右に逃げを作る。 */
.msg__media{position:relative;}
.msg__media .media{aspect-ratio:3/4;}
.msg__eyebrow{font-family:var(--sans);font-weight:700;font-size:clamp(1rem,3.4vw,1.15rem);letter-spacing:.06em;color:var(--gray);margin:clamp(18px,2.4vw,26px) 0 16px;}
.msg__text{margin-top:clamp(24px,4vw,34px);font-size:clamp(14px,1.6vw,16px);line-height:2.2;color:#333;}
.msg__sign{display:flex;align-items:baseline;gap:14px;margin-top:clamp(28px,5vw,38px);padding-top:22px;border-top:1px solid var(--line);}
.msg__role{font-size:11px;letter-spacing:.16em;color:var(--gray);}
.msg__name{font-family:var(--sans);font-weight:800;font-size:clamp(1.3rem,2.8vw,1.8rem);letter-spacing:.08em;}

/* =========================================================================
   COMPANY（トップ）
   ========================================================================= */
.company-home__grid{display:flex;flex-direction:column;gap:clamp(34px,6vw,56px);}
.company-home__dl{display:grid;grid-template-columns:1fr;margin:clamp(26px,4vw,34px) 0 clamp(30px,5vw,40px);border-top:1px solid var(--ink);}
.company-home__dl dt{font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.18em;color:var(--gray);text-transform:uppercase;padding-top:16px;}
.company-home__dl dd{font-size:13.5px;line-height:1.9;color:#333;padding:4px 0 16px;border-bottom:1px solid var(--line);}
.company-home__media{aspect-ratio:4/3;}

/* =========================================================================
   CTA（トップ下部）
   ========================================================================= */
.cta-home{position:relative;overflow:hidden;background:var(--ink);color:#fff;}
.cta-home__bg{position:absolute;inset:-8% 0;height:116%;z-index:0;}
.cta-home__bg .ph,.cta-home__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);}
.cta-home__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.66) 52%,rgba(10,10,10,.5) 100%);}
.cta-home__inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(34px,6vw,56px);padding-block:var(--sec);}
.cta-home__title{font-family:var(--sans);font-weight:900;font-size:clamp(2.8rem,12vw,7.5rem);line-height:1.02;letter-spacing:-.02em;}
.cta-home__text{margin-top:18px;font-size:13px;letter-spacing:.14em;color:rgba(255,255,255,.76);}
.cta-home__lead .btn{margin-top:clamp(26px,5vw,36px);}

.cta-home__card{background:var(--paper);color:var(--ink);padding:clamp(28px,6vw,44px);}
.cta-home__card-title{font-family:var(--sans);font-weight:800;font-size:clamp(1.5rem,5vw,2.2rem);line-height:1.36;letter-spacing:0;margin-bottom:16px;}
.cta-home__card-text{font-size:13px;line-height:2;color:#555;margin-bottom:clamp(24px,4vw,32px);word-break:auto-phrase;}

/* 用件別の入口。読み終えた人の目的はばらけているので、
   1つのボタンではなく用件の名前で受ける（組みはカードのまま）。 */
.cta-home__routes{border-top:1px solid var(--line);}
.cta-home__routes a{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	min-height:44px;padding:16px 0;border-bottom:1px solid var(--line);
	transition:padding-left .4s var(--ease-out),color .3s var(--ease);
}
.cta-home__route-body{display:flex;flex-direction:column;gap:3px;min-width:0;}
.cta-home__route-label{font-family:var(--sans);font-weight:700;font-size:14px;line-height:1.6;letter-spacing:.02em;word-break:auto-phrase;}
.cta-home__route-note{font-size:11.5px;line-height:1.7;color:var(--gray);word-break:auto-phrase;}
.cta-home__route-arrow{flex:0 0 auto;color:var(--gray);transition:transform .35s var(--ease-out),color .3s var(--ease);}
.cta-home__routes a:hover{padding-left:8px;color:var(--red);}
.cta-home__routes a:hover .cta-home__route-arrow{transform:translateX(4px);color:var(--red);}

/* =========================================================================
   Breakpoints — 600px
   ========================================================================= */


/* =========================================================================
   Breakpoints — 768px
   ========================================================================= */


/* =========================================================================
   Breakpoints — 1024px
   ========================================================================= */


/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (min-width:600px){
.info-table th{display:table-cell;width:210px;vertical-align:top;border-bottom:1px solid var(--line);padding:20px 20px 20px 2px;}
	.info-table td{display:table-cell;vertical-align:top;padding:20px 20px 20px 0;}
	.news-related__list{flex-direction:row;}
	.news-related__item{flex:1;min-width:0;}
	.site-footer__bottom{flex-direction:row;justify-content:space-between;align-items:center;}

	.values__list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,40px);}
	.value{padding-inline:0;}
}

@media (min-width:768px){
body{font-size:16px;}

	.site-header__logo img{height:29px;}
	.global-nav__inner{padding:calc(var(--header-h) + 52px) var(--pad) 52px;}
	.global-nav__list a{padding:24px 4px;font-size:clamp(1.9rem,3.4vw,2.7rem);gap:26px;}
	.global-nav__foot{flex-direction:row;justify-content:space-between;align-items:flex-end;}
	.global-nav__address{font-size:14px;}

	.message__grid{flex-direction:row;align-items:flex-start;gap:clamp(48px,6vw,72px);}
	.message__photo{flex:0 0 38%;position:sticky;top:calc(var(--header-h) + 32px);}
	.message__body{flex:1;}

	/* 「愛」の3行は1行ずつ短いので、PCでは横に並べて1つの宣言として読ませる。
	   全幅には伸ばさない（右に空けた面が巨大な「愛」の場所になる） */
	.creed{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,4vw,40px);max-width:min(100%,760px);}

	.bdetail{flex-direction:row;align-items:center;gap:clamp(40px,5vw,64px);}
	.bdetail--reverse{flex-direction:row-reverse;}
	.bdetail__photo{flex:0 0 48%;}
	.bdetail__body{flex:1;}
	.shop__dl{grid-template-columns:110px 1fr;column-gap:18px;}
	.shop__dl dt{padding:18px 0;border-bottom:1px solid var(--line);}
	.shop__dl dd{padding:18px 0;}

	.access__grid{flex-direction:row;gap:48px;}
	.access__info{flex:0 0 34%;}
	.access__map{flex:1;}

	.news-list__link{flex-wrap:nowrap;gap:30px;}
	.news-list__ttl{flex:1;}

	.site-footer__inner{flex-direction:row;justify-content:space-between;gap:clamp(40px,6vw,80px);}
	.site-footer__brand{flex:0 0 30%;}
	.site-footer__nav{flex:1;}


	/* PCでは SCROLL が左へ移るが、お知らせは右下に残る。
	   左下＝コピー、右下＝お知らせ の2つの角を沈める。
	   写真の中央（被写体）はどちらの幅でも沈めない。 */
	.hero__scrim{
		background:
			radial-gradient(78% 76% at 0% 100%,rgba(8,8,10,.9) 0%,rgba(8,8,10,.62) 42%,rgba(8,8,10,.2) 70%,rgba(8,8,10,0) 88%),
			radial-gradient(42% 46% at 100% 100%,rgba(8,8,10,.82) 0%,rgba(8,8,10,.5) 46%,rgba(8,8,10,0) 80%),
			/* PCでもコピー帯は下端からの px で受ける（画面の高さに依存させない） */
			linear-gradient(to top,rgba(8,8,10,.9) 0,rgba(8,8,10,.8) 220px,rgba(8,8,10,.44) 380px,rgba(8,8,10,0) 520px),
			linear-gradient(180deg,rgba(8,8,10,.46) 0%,rgba(8,8,10,.14) 14%,rgba(8,8,10,0) 28%),
			linear-gradient(180deg,rgba(8,8,10,0) 44%,rgba(8,8,10,.22) 70%,rgba(8,8,10,.45) 100%);
	}
	/* セクション見出しの縦組みラベルと同じ縦線に載せる（版面の左外 1本） */
	.hero__scroll{right:auto;left:calc(var(--pad) - var(--rail-gap) - var(--rail-w));}
	/* PCはお知らせが右カラムへ抜けてコピー塊が低くなるので、光をもっと下まで許せる */
	.hero__spot{
		-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 28%,rgba(0,0,0,.4) 46%,rgba(0,0,0,.06) 60%,rgba(0,0,0,0) 70%);
		mask-image:linear-gradient(180deg,#000 0%,#000 28%,rgba(0,0,0,.4) 46%,rgba(0,0,0,.06) 60%,rgba(0,0,0,0) 70%);
	}
	.hero__inner{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:clamp(32px,5vw,64px);}
	.hero__copy{flex:1 1 auto;max-width:860px;}
	.hero__news{flex:0 0 clamp(240px,26vw,310px);}
	.hero__news-link{flex-direction:column;}

	/* 写真の塊を右の列に置き、版面の右端で止めずに画面の外へ抜く。
	   全幅の版面で「面が続いている」ことを見せられるのはここだけ。
	   本文は左の列に残るので、版面の左端は他セクションと1本に揃ったまま。 */
	.story__grid{flex-direction:row-reverse;align-items:center;gap:clamp(40px,6vw,72px);}
	.story__media{flex:0 0 56%;min-width:0;margin-right:calc(var(--pad) * -1);}
	.story__body{flex:1;min-width:0;}

	/* 縦長の大1枚が2行ぶんの高さを占め、右の小2枚は列ごと下げて底を揃えない */
	.story__figs{grid-template-columns:1.12fr .88fr;}
	.story__fig--1{grid-column:1;grid-row:1 / 3;aspect-ratio:auto;align-self:stretch;}
	.story__fig--2,
	.story__fig--3{transform:translateY(clamp(28px,4.5vw,52px));}

	.news-home__head{flex-direction:row;align-items:flex-end;justify-content:space-between;}
	.news-home__grid{flex-direction:row;align-items:flex-start;gap:clamp(32px,4vw,56px);}
	.news-home__grid .news-list{flex:1 1 100%;min-width:0;}

	.msg__grid{flex-direction:row;align-items:center;gap:clamp(40px,6vw,72px);}
	.msg__media{flex:0 0 42%;min-width:0;padding-right:clamp(28px,7vw,48px);}
	.msg__body{flex:1;min-width:0;}

	.company-home__grid{flex-direction:row;align-items:center;gap:clamp(40px,6vw,72px);}
	.company-home__body{flex:1;min-width:0;}
	.company-home__media{flex:0 0 46%;min-width:0;}
	.company-home__dl{grid-template-columns:110px 1fr;}
	.company-home__dl dt{padding:18px 0 18px;border-bottom:1px solid var(--line);}
	.company-home__dl dd{padding:18px 0;}

	.works__head{flex-direction:row;align-items:flex-end;justify-content:space-between;}
	.works__tools{flex-direction:column;align-items:flex-end;gap:22px;}
	

	.cta-home__inner{flex-direction:row;align-items:flex-end;justify-content:space-between;}
	.cta-home__lead{flex:1 1 auto;min-width:0;}
	/* 白カードを暗い帯の下端から出して、フッターへ食い込ませる（モックの重なり）。
	   下げ幅は帯の下パディング（--sec）＋40px。フッター上部の余白内に収まる範囲。 */
	/* 下へずらすのは版面の下余白の半分まで。それ以上下げるとセクションを飛び出し、
	   同じ黒のフッターと繋がって「切れている」ようにしか見えない。 */
	.cta-home__card{flex:0 0 clamp(320px,38vw,420px);margin-bottom:calc(var(--sec) * -.5);box-shadow:0 30px 70px rgba(0,0,0,.3);}
}

@media (min-width:1024px){
:root{--header-h:84px;}

	.nav-toggle{display:none;}
	.site-header__cta{display:inline-flex;}

	.global-nav{
		position:static;inset:auto;z-index:auto;
		background:none;color:inherit;overflow:visible;
		opacity:1;visibility:visible;clip-path:none;transition:none;
		margin-right:28px;
	}
	.global-nav__inner{display:block;min-height:0;padding:0;max-width:none;}
	.global-nav__list{flex-direction:row;align-items:center;gap:clamp(20px,2.4vw,38px);margin:0;}
	/* ラベルは 外観 → メニュー の文字をそのまま出す。
	   CONTACT ボタンと同じ組み（10.5px/.22em）。小文字で入力しても大文字で出す。 */
	.global-nav__list a{
		display:inline-flex;align-items:center;gap:0;padding:6px 0;border:0;
		font-family:var(--sans);font-weight:700;font-size:10.5px;letter-spacing:.22em;
		text-transform:uppercase;
		color:var(--ink);opacity:1;transform:none;transition:color .3s var(--ease);
	}
	.global-nav__list li:first-child a{border-top:0;}
	.global-nav__list a:hover{color:var(--red);}
	.site-header.is-invert .global-nav__list a{color:#fff;}
	.site-header.is-invert .global-nav__list a:hover{color:var(--pink);}
	.global-nav__list .global-nav__contact{display:none;} /* PCではヘッダー右のボタンに集約 */
	.global-nav__foot{display:none;}

	.page-hero{padding:clamp(80px,9vw,120px) 0 clamp(44px,5vw,64px);}

	/* 4カラムはリンク文字が縦積みになるため 1024px から */
	.site-footer__nav{grid-template-columns:repeat(4,1fr);gap:32px;}
	.fnav--social{grid-column:auto;}


	/* 上限は「スポットライトを。」（9字）が .hero__copy に1行で収まる範囲（860/9≒95px）。
	   その手前で止めているのは、写真の面を潰さず見出しを効かせるため。 */
	.hero__title{font-size:clamp(2rem,3.7vw,3.4rem);}
	/* 縦組みの見出しを左に、本文を右に。縦組みは右の列から読むので、
	   塊の中では1行目が右端に来る。塊そのものは版面の左端に揃える。 */
	/* 縦組みの見出しは本文よりずっと背が高い。上で揃えると下半分が空くので、
	   本文は見出しの高さの中心に載せる。 */
	.vision__inner{display:flex;align-items:center;gap:clamp(48px,7vw,104px);}
	.vision__head{flex:0 0 auto;}
	.vision__title{
		writing-mode:vertical-rl;
		margin-top:clamp(10px,1.6vw,20px);
		font-size:clamp(1.9rem,2.7vw,2.5rem);line-height:1.5;letter-spacing:.06em;
	}
	.vision__text{flex:1;min-width:0;margin-top:0;}

	.values__list{grid-template-columns:repeat(4,1fr);}
	.values__list--3{grid-template-columns:repeat(3,1fr);}
	.value{border-left:1px solid var(--line);padding-left:clamp(20px,2.4vw,30px);}
	.creed .value{border-left-color:rgba(201,0,22,.14);}
	.values__list .value:first-child,
	.creed .value:first-child{border-left:0;padding-left:0;}
	.workcard{width:clamp(260px,22vw,320px);}
}

@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
	.curtain{display:none !important;}
	[data-anim]{opacity:1 !important;transform:none !important;clip-path:none !important;}
	.global-nav__list a,.global-nav__foot{opacity:1 !important;transform:none !important;transition-delay:0s !important;}
	.site-header{transition:none !important;}


	.hero__slide{transition:none !important;}
	.hero__scroll::after{animation:none !important;transform:none !important;}
	/* 粒そのものは残す（静止テクスチャなので）。動きだけ止める */
	.hero__slides::after{animation:none !important;transform:none !important;}
	.works__track{scroll-behavior:auto !important;}
}

/* =========================================================================
   構成刷新で追加したセクション
   （SERVICE / CLIENTS / 実績一覧・絞り込み）
   ========================================================================= */

/* ---------- HERO: 英字ステートメント ----------
   縦に3つ並べるだけだと、写真の上に「置いてある」だけになる。
   英字を一段大きくして和文キャッチのすぐ上に重ね、ポスターの組みにする。
   色はブランドのピンク。ピンク(#D64C85)の輝度は 0.21 しかなく、明るいカットの
   写真（0.19前後）とほぼ同じなので、そのままだと消える。
   袋文字（線だけ）は線の間から写真が透けて分離できないため（実測 1.6〜2.5:1）、
   ベタ塗り＋字のまわりだけを沈める影で成立させている（実測 3.5:1）。 */
.hero__statement{
	font-family:var(--sans);font-weight:900;
	font-size:clamp(1.2rem,3.1vw,1.3rem);line-height:1.25;letter-spacing:.04em;
	color:var(--pink);
	margin-bottom:clamp(20px,3.2vw,28px);
	/* 影は「にじみ」に見えない範囲まで薄くしてある。
	   ここを更に薄くすると 3:1 を割る（実測: この値で 320〜390px が 3.0〜3.3:1）。 */
	text-shadow:0 0 3px rgba(8,8,10,.8),0 0 10px rgba(8,8,10,.76),0 2px 22px rgba(8,8,10,.68);
}
@media (min-width:768px){
	.hero__statement{
		/* 見出しのおよそ 0.78 倍。近づけすぎると前後の層に見えず、ただ2行並んだだけになる */
		font-size:clamp(1.7rem,2.9vw,2.65rem);line-height:1.06;letter-spacing:.02em;
		/* 英字と和文のあいだ。和文の行間より広くしないと、4行が等間隔に見えて
		   英字と和文が1つの塊に読める。字面の間隔で和文行間のおよそ2倍を狙う。 */
		margin-bottom:.28em;
	}
}
html.js-motion .hero__statement{opacity:0;transform:translateY(18px);}

/* ---------- SERVICE ---------- */
.service{position:relative;overflow:hidden;}
.service__lead{position:relative;z-index:1;margin-bottom:clamp(48px,9vw,96px);}
.service__text{margin-top:clamp(34px,5.2vw,56px);max-width:var(--measure);}
/* 説明文は白抜きを成立させるため 19px 以上の太字（コントラスト基準）。
   見せ方は幅で切り替える。

   SP  = 段落ごとに1枚のピンクの面。文字は自由に折り返してよく、
         面は矩形なので左右の端が必ず揃う。狭い画面ではこれが一番まとまる。
   PC  = 蛍光ペンで引いた帯。幅に余裕があるので、文字数ぶんに縮んだ帯の
         長短がそのままリズムになる。 */
.service__text p{
	font-size:clamp(19px,1.9vw,24px);font-weight:700;line-height:1.85;
	background:var(--pink);color:#fff;
	padding:.7em .9em;
}
.service__text p + p{margin-top:.6em;}
/* SPでは面が色を持つので、中の span は素の文字に戻す */
.service__text .mark{background:none;color:inherit;padding:0;}
/* SERVICE のリード文の横（＝これまで空いていた面）に3枚を散らす。
   STORY の「大1枚＋小2枚」とは別の組み方にして、同じ構図の繰り返しを避ける。 */
.service__cols{display:flex;flex-direction:column;gap:clamp(30px,5vw,48px);}
/* 写真は必ず文字の背面。lead が重ね合わせの文脈になっているのでこの中で完結する */
.service__figs{z-index:0;}


.service__text{position:relative;z-index:1;}
.service__figs{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(10px,2vw,16px);align-items:start;}
/* 4枚を互い違いに。大小と左右を交互にして、格子に見えないようにする */
.service__fig--1{grid-column:1 / 5;grid-row:1;aspect-ratio:16/10;}
.service__fig--2{grid-column:5 / 7;grid-row:1;aspect-ratio:1;margin-top:clamp(18px,4vw,32px);}
.service__fig--3{grid-column:1 / 3;grid-row:2;aspect-ratio:1;}
.service__fig--4{grid-column:3 / 7;grid-row:2;aspect-ratio:4/3;}

/* ---------- CLIENTS ---------- */
/* CLIENTS：社名を並べるのではなくロゴを敷き詰める壁。見出しも説明も持たない。
   地は紙（--paper）のままにして、ロゴには一切フィルタをかけない（他社の商標は色ごとその会社のもの。
   モノクロ化は作り替えになる）。ここだけ写真のモノクロ統一の外に置く。
   前後も同じ地のセクションなので、壁の上に罫を1本だけ引いて切れ目を作る。セル同士は仕切らない
   （列数が変わると最終行に空きが出て、そこだけ罫が途切れて欠けて見えるため）。 */
.clients{padding-block:clamp(64px,10vw,120px);}
.clients__head .shead__en{margin-bottom:clamp(16px,2.6vw,24px);}
.clients__grid{
	display:grid;
	/* PCは1行5個。SPで5列だと1枠が60px台になりロゴが読めないので、2 → 3 → 5 と上げる。 */
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:clamp(10px,1.4vw,16px);
	list-style:none;margin:0;padding:clamp(28px,4.6vw,44px) 0 0;
	border-top:1px solid var(--line);
}
/* 枠は 4:3（管理画面の推奨サイズ 640×480px と同じ比）。ロゴは枠いっぱいまで使う。
   枠を列幅より小さく止めると、余った幅がそのままロゴ同士の余白になる（5列だと1列259px。
   200pxで止めていたときは間が75px開いた）。枠いっぱいにすれば余白は gap のぶんだけになる。
   320×240px で頭打ちにするのは、それ以上伸ばすと原寸（推奨640px）に対して2倍を割るため。 */
.clients__item{aspect-ratio:4/3;max-height:240px;display:grid;place-items:center;}
.clients__logo{width:auto;height:auto;max-width:min(100%,320px);max-height:100%;object-fit:contain;}
@media (min-width:600px){
	.clients__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:1024px){
	.clients__grid{grid-template-columns:repeat(5,minmax(0,1fr));}
}
/* ラベルは左の縦レールへ移る。.shead__en の余白指定より強いので、こちらで戻す */
@media (min-width:1280px){
	.clients__head .shead__en{margin:0 var(--rail-gap) 0 0;}
}

/* ---------- 実績一覧 ---------- */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,5vw,52px);}
.filter__item{
	display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
	border:1px solid var(--line);border-radius:999px;
	font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--gray);
	transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.filter__item:hover{border-color:var(--ink);color:var(--ink);}
.filter__item.is-current{background:var(--ink);border-color:var(--ink);color:#fff;}

.workgrid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,44px);}
.workgrid__item a{display:block;color:var(--ink);}
.workgrid__media{display:block;aspect-ratio:4/3;margin-bottom:16px;}
.workgrid__meta{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:10.5px;letter-spacing:.14em;color:var(--gray);}
.workgrid__cat{font-weight:700;color:var(--red);text-transform:uppercase;}
.workgrid__meta time{font-variant-numeric:tabular-nums;}
.workgrid__title{font-family:var(--sans);font-weight:700;font-size:clamp(15px,1.8vw,18px);line-height:1.65;transition:color .3s var(--ease);}
.workgrid__item a:hover .workgrid__title{color:var(--red);}

/* ---------- 実績 詳細 ----------
   実績の主役は写真そのものなので、ヒーローを暗く沈めて文字を載せる組みは使わない。
   写真は文字を持たない全幅の面として先に見せ、タイトルと概要は白地で受ける。
   段の区切りは面の色ではなく罫（--line）1本だけで作る。 */
/* 写真の比率は切らずにそのまま出す。実績のメインビジュアルは横長のバナーから
   縦位置のスチルまで比率がまちまちで、枠を固定すると中央だけが引き伸ばされる
   （2560×388 の帯を 2:1 で切ると 3.3倍に拡大されて顔のドアップになった）。
   縦に伸びすぎるカットだけ max-height で止め、そのときだけ cover が効く。 */
.worksingle__visual{display:block;background:var(--paper-2);}
.worksingle__visual img{width:100%;height:auto;max-height:78vh;object-fit:cover;}
/* プレースホルダの SVG は固有の比率を持たないので、ここで枠を決める */
.worksingle__visual svg{width:100%;height:auto;aspect-ratio:16/9;}

.worksingle__lead .container{padding-block:clamp(32px,6vw,60px) clamp(40px,6.5vw,72px);}
.worksingle__lead .breadcrumb{margin-bottom:clamp(22px,3.4vw,32px);}

.worksingle__tags{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:clamp(14px,2.4vw,20px);}
.worksingle__cat{
	font-size:9.5px;font-weight:700;letter-spacing:.16em;color:var(--red);
	border:1px solid var(--line);padding:4px 12px;text-transform:uppercase;
}
.worksingle__tags time{font-variant-numeric:tabular-nums;}

.worksingle__title{
	font-family:var(--sans);font-weight:800;
	font-size:clamp(1.7rem,6vw,3.1rem);line-height:1.34;letter-spacing:-.005em;
	word-break:auto-phrase;
}

/* 概要。入力済みの項目だけが並ぶので、区切りは列ではなく項目ごとの罫で持たせる。
   1項目でも4項目でも同じ顔になり、空欄が版面の穴に見えない。 */
.worksingle__facts{margin:clamp(30px,4.6vw,46px) 0 0;}
.worksingle__fact{padding:14px 0;border-top:1px solid var(--line);}
.worksingle__fact:last-child{border-bottom:1px solid var(--line);}
.worksingle__fact dt{
	font-family:var(--sans);font-weight:500;
	font-size:10.5px;letter-spacing:.16em;color:var(--gray);
	margin-bottom:5px;
}
.worksingle__fact dd{margin:0;font-size:14px;line-height:1.8;word-break:auto-phrase;}

.worksingle__main{border-top:1px solid var(--line);}
.worksingle__main .container{padding-block:clamp(48px,8vw,88px);}
.worksingle__body{max-width:var(--measure);}
/* 目次は読んでいる最中ずっと横に見えている列。列が置ける幅になるまでは出さない */
.worksingle__side{display:none;}

.worksingle__other{border-top:1px solid var(--line);}
.worksingle__more{margin-top:clamp(40px,6vw,64px);text-align:center;}

/* 目次。読んでいる位置を示すのが役目なので、現在地だけが黒で、他は退く。
   面も枠も持たせない（箱にすると本文と対等な塊に見えて、脇役にならない）。 */
.worktoc__ttl{margin-bottom:18px;}
.worktoc__list{display:flex;flex-direction:column;gap:2px;}
.worktoc__item a{
	display:block;padding:7px 0 7px 14px;
	border-left:1px solid var(--line);
	font-size:12px;line-height:1.6;letter-spacing:.02em;color:var(--gray);
	word-break:auto-phrase;
	transition:color .3s var(--ease),border-color .3s var(--ease);
}
.worktoc__item--sub a{padding-left:26px;font-size:11.5px;}
.worktoc__item a:hover{color:var(--ink);border-left-color:var(--gray);}
.worktoc__item a.is-current{color:var(--ink);font-weight:700;border-left-color:var(--red);}

/* 見出しだけ読み上げに残す（一覧の h2 は視覚的には不要） */
.screen-reader-text{
	position:absolute;width:1px;height:1px;margin:-1px;padding:0;
	overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

@media (min-width:600px){
	.workgrid{grid-template-columns:repeat(2,1fr);}

	/* 罫は項目ごとではなく組み全体の上下だけに戻す。
	   2列に並ぶと項目ごとの罫が格子に見えて、概要が表組みになってしまう。 */
	.worksingle__facts{
		display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
		gap:clamp(18px,3vw,28px) clamp(24px,4vw,48px);
		padding-block:clamp(20px,3vw,26px);
		border-block:1px solid var(--line);
	}
	.worksingle__fact{padding:0;border-top:0;}
	.worksingle__fact:last-child{border-bottom:0;}
}

@media (min-width:768px){
	.bizcard__desc{display:block;}

	/* PC は蛍光ペンの帯に戻す。面の色と余白を外し、span 側に持たせる */
	.service__text p{background:none;color:#333;padding:0;line-height:1.7;}
	.service__text p + p{margin-top:1.1em;}
	.service__text .mark{display:table;background:var(--pink);color:#fff;padding:.14em .2em;}
	.service__text .mark + .mark{margin-top:.34em;}
}

@media (min-width:1024px){
	.workgrid{grid-template-columns:repeat(3,1fr);}

	.worksingle__facts{grid-template-columns:repeat(4,minmax(0,1fr));}

	/* 本文は --measure で止め、目次は余った右端へ寄せる。
	   目次を 1fr の列にすると本文と目次の間が伸び縮みして、
	   窓幅ごとに目次の位置が動いてしまう。 */
	.worksingle__grid{
		display:grid;
		grid-template-columns:minmax(0,var(--measure)) minmax(150px,190px);
		justify-content:space-between;
		gap:clamp(48px,6vw,96px);
		align-items:start;
	}
	.worksingle__side{display:block;position:sticky;top:calc(var(--header-h) + 32px);}
}

/* 1200px 未満で絶対配置にしないのは、塊の下限 400px を確保したうえで
   見出しの最長行（≒655px）を避けきれる窓幅がここからだから。
   それ未満では塊を本文の下へ戻す（＝SPと同じ積み方）。 */
@media (min-width:1200px){
	/* 写真の塊を「本文の隣の列」として置くと、本文が短いぶん左下に大きな空白が残り、
	   見出し→本文→写真→カードと段を積んだだけに見える。
	   そこで塊を絶対配置にして見出しの右の余白へ食い込ませ、レイアウト上の高さを持たせない。
	   空きは lead の min-height（＝塊がちょうど収まる高さ）だけになる。 */
	/* 写真の塊と文字の塊は、上下の中心を揃える。
	   塊の高さは幅のおよそ0.94倍（実測 幅451/563/620px で 0.932〜0.939）なので、
	   その高さぶんを min-height で確保したうえで、両方を同じ中心線に載せる。
	   文字が先に終わっても余りは上下へ均等に散り、左下に空白が溜まらない。 */
	.service__lead{
		position:relative;
		min-height:calc(var(--service-figs-w) * 0.94);
		display:flex;flex-direction:column;justify-content:center;
	}
	.service__cols{display:block;}
	.service__text{max-width:var(--measure);}
	.service__figs{
		position:absolute;right:0;
		top:50%;transform:translateY(-50%);
		width:var(--service-figs-w);
	}
	/* 斜めのずれは②を下げることだけで作る。
	   ③を負マージンで引き上げても行の高さは据え置かれ、その分が下に死んだ余白として残るため。 */
	.service__fig--2{margin-top:clamp(30px,4vw,64px);}
}

/* =========================================================================
   セクション見出しの組み（.shead）
   小さな英字＋特大の和文だけでは全セクションが同じ顔になるので、
   番号・罫線・英字・和文・リードを1つの塊として組む。
   書体は1つのまま、大きさ・太さ・字間・組む向きの対比だけで差を出す。
   ========================================================================= */
.shead{
	display:grid;
	grid-template-columns:minmax(0,1fr);
	align-items:start;
	margin-bottom:clamp(32px,4.6vw,56px);
}

.shead__en{margin-bottom:clamp(10px,1.6vw,14px);}
.shead__lead{
	max-width:var(--measure);
	margin:clamp(26px,3.6vw,40px) 0 0;
	color:#3a3a3e;
}

/* 暗い背景に載る版 */
.shead--light .shead__title{color:#fff;}
.shead--light .shead__lead{color:rgba(255,255,255,.78);}

/* 注釈。日付・出典・補足のための最小段 */
.caption{
	font-family:var(--sans);font-weight:500;
	font-size:11.5px;line-height:1.9;letter-spacing:.16em;
	color:var(--gray);
	text-transform:uppercase;
	font-variant-numeric:tabular-nums;
}

/* 中見出し。特大見出しと本文の間が空いていたので埋める */
.subhead{
	font-family:var(--sans);font-weight:700;
	font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.55;letter-spacing:.005em;
	word-break:auto-phrase;
}

/* 英字だけを左の縦組みに送る。横組みの見出しとの向きの対比が、
   同じ書体のままで最も強く効く。DOM は動かさないので読み上げ順は変わらない。
   レールは版面の「外」（container の左パディング内）に絶対配置する。
   列として持たせると、その幅ぶん見出しだけが右へ寄って本文と左端が揃わなくなるため。
   1280px 以上に限るのは、それ未満だとパディングが 40px に届かずレールが画面外に出るため。 */
@media (min-width:1280px){
	.shead{position:relative;}
	.shead__en{
		position:absolute;top:0;right:100%;
		margin:0 var(--rail-gap) 0 0;
		writing-mode:vertical-rl;
		line-height:1;               /* 縦組みの幅を字面ぶんに抑え、ガターに収める */
		letter-spacing:.42em;
		white-space:nowrap;
	}
}

/* 親が既に下の余白を持っている場所では、塊側の余白は殺す */
.shead--flush{margin-bottom:0;}
/* 従の見出し。特大と本文の間の段（関連記事・ほかの実績など、本編の後に付く塊） */
.shead--sm .shead__title{font-size:clamp(1.5rem,5vw,2.6rem);font-weight:800;line-height:1.3;letter-spacing:-.005em;}

/* ABOUT の宣言。最長行「スポットライトを。」は9字あり、--lg（下限 2.9rem）のままだと
   375px で1行に入らずカタカナの途中で折れる。9字が収まる専用の目盛りを持たせる。
   .section-title--lg より後に置くこと（同じ強さなので書いた順で決まる）。 */
.astate__title{font-size:clamp(1.5rem,7.6vw,6.5rem);line-height:1.18;letter-spacing:-.02em;}

/* SERVICE：見出しの塊ごと写真の上に載せる（旧 .label/.section-title 直下指定の置き換え） */
.service__lead > .shead{position:relative;z-index:1;}

/* =========================================================================
   項目名＋内容の2列（会社概要の表 / プライバシーポリシー）
   「罫線で仕切った表」ではなく、和文の項目名＋英字の注釈という2段の文字組みとして
   扱う。トップと同じく、罫は下1本だけに絞る。
   SP は1カラム、768px 以上で項目名を左の列へ送る。
   ========================================================================= */
.profile{position:relative;overflow:hidden;}
.profile .container{position:relative;z-index:1;}

.profile__dl,
.policy__list{border-top:1px solid var(--ink);}
.profile__row,
.policy__row{
	display:grid;grid-template-columns:minmax(0,1fr);gap:6px;
	padding:clamp(18px,2.8vw,26px) 0;
	border-bottom:1px solid var(--line);
}
/* SP は項目名と英字を1行に並べる。縦に積むと項目数ぶん高さが倍になる */
.profile__term,
.policy__term{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;}
.profile__ja,
.policy__ja{font-family:var(--sans);font-weight:700;letter-spacing:.12em;}
.profile__ja{font-size:13px;}
/* 規約の見出しは読み物の中の段。表の項目名より一段大きくして本文と差をつける */
.policy__ja{font-size:15px;line-height:1.7;word-break:auto-phrase;}

/* 取引先や規約の本文のように長い文が入るので、地の文と同じく行長を止める */
.profile__row dd,
.policy__body{max-width:var(--measure);font-size:14.5px;line-height:1.95;color:#333;word-break:auto-phrase;}
/* タップ領域の 44px は確保しつつ、字は箱の中心に置く
   （flex-start だと同じ行の項目名より数px上に浮く） */
.profile__row dd a{display:inline-flex;align-items:center;min-height:44px;color:var(--red);text-decoration:underline;text-underline-offset:3px;}
.profile__row dd a:hover{opacity:.7;}

@media (min-width:768px){
	.profile__row,
	.policy__row{grid-template-columns:clamp(170px,22vw,260px) minmax(0,1fr);gap:0 clamp(24px,4vw,56px);}
	/* 項目名は和文＋英字の2段、値は1〜2行と高さが揃わないので、base ではなく
	   行の中心で合わせる（base 揃えだと値だけが上に浮いて見える）。 */
	.profile__row{align-items:center;}
	/* 規約は本文が数行に渡るので、見出しは中心ではなく上端に置く */
	.policy__row{align-items:start;}
	.profile__term,
	.policy__term{flex-direction:column;gap:5px;}
}

/* =========================================================================
   お問い合わせページ
   フォーム（白）と直接の連絡先（黒の面）を左右に並べる。
   「送る」以外の選択肢を、押す導線と同じ強さで見せるための対比。
   ========================================================================= */
.contact{position:relative;}
.contact .container{position:relative;z-index:1;}
.contact__grid{display:flex;flex-direction:column;gap:clamp(40px,7vw,64px);}

.contact__blockhead{margin-bottom:clamp(24px,3.6vw,34px);}
.contact__blockhead .label{margin-bottom:10px;}
.contact__blocktitle{font-family:var(--sans);font-weight:700;font-size:clamp(1.1rem,2.4vw,1.35rem);line-height:1.6;letter-spacing:.04em;word-break:auto-phrase;}

.contact__panel{background:var(--ink);color:#fff;padding:clamp(26px,5vw,38px);}
.contact__panel-title{
	font-family:var(--sans);font-weight:800;
	/* 上限は 768px（列が最も細い瞬間）で「お電話・メールでも」が1行に収まる大きさ */
	font-size:clamp(1.2rem,4.2vw,1.4rem);line-height:1.45;letter-spacing:.01em;
	margin-bottom:clamp(22px,3.4vw,30px);word-break:auto-phrase;
}
.contact__dl dt{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.55);margin-top:22px;}
.contact__dl dt:first-child{margin-top:0;}
.contact__dl dd{margin-top:4px;font-size:14px;line-height:1.85;color:rgba(255,255,255,.92);word-break:auto-phrase;}
/* dt/dd の文字上端を揃える: min-height:44px の anchor を center にするとラベルより数px沈む */
.contact__dl a{display:inline-flex;align-items:flex-start;min-height:44px;color:#fff;text-decoration:underline;text-underline-offset:4px;}
.contact__dl a:hover{color:var(--cyan);}
/* 電話は「押す以外の選択肢」の中でいちばん強い。数字だけ一段大きく出す */
.contact__tel{
	align-items:center;
	font-family:var(--sans);font-weight:800;
	font-size:clamp(1.4rem,5.6vw,1.8rem);letter-spacing:.02em;
	font-variant-numeric:tabular-nums;
	text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);
	transition:color .3s var(--ease),border-color .3s var(--ease);
}
.contact__tel:hover{border-color:var(--cyan);}

.contact__privacy-note{margin-top:22px;font-size:12px;line-height:1.95;color:var(--gray);word-break:auto-phrase;}
.contact__privacy-note a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}

@media (min-width:768px){
	.contact__grid{flex-direction:row;align-items:flex-start;gap:clamp(48px,6vw,88px);}
	.contact__form{flex:1;min-width:0;}
	/* フォームが長いので連絡先は追従させ、どこまで下げても選べる状態にしておく */
	.contact__side{flex:0 0 clamp(290px,32vw,380px);position:sticky;top:calc(var(--header-h) + 32px);}
}

/* =========================================================================
   お問い合わせの確認・完了（F-07）
   フォームと同じ列に、同じ書体階層で組む。押す前に「まだ送っていない」と
   「あと何段あるか」が分かる状態にしておく。
   ========================================================================= */

/* ---------- 手順（01 入力 → 02 確認 → 03 完了） ---------- */
.fsteps{
	display:flex;gap:clamp(8px,1.8vw,18px);
	margin:0 0 clamp(30px,4.4vw,44px);padding:0;list-style:none;
}
.fsteps__item{
	flex:1 1 0;min-width:0;
	display:flex;align-items:baseline;gap:8px;
	padding-top:12px;border-top:2px solid var(--line);
	color:var(--gray-light);
}
/* 通り過ぎた段は黒、いまの段は赤。どちらの罫も同じ太さで、色だけで差をつける */
.fsteps__item.is-done{border-top-color:var(--ink);color:var(--gray);}
.fsteps__item.is-current{border-top-color:var(--red);color:var(--ink);}
.fsteps__no{
	font-weight:800;font-size:12px;letter-spacing:.14em;
	font-variant-numeric:tabular-nums;
}
.fsteps__label{font-weight:700;font-size:11px;letter-spacing:.18em;}

/* ---------- 確認画面 ---------- */
/* 追従するヘッダーの下に潜らせない。焦点は受けるが輪郭は出さない
   （操作する部品ではなく、Tab でも止まらないため） */
.cform-confirm{scroll-margin-top:calc(var(--header-h) + 46px);}
.cform-confirm:focus,
.cform-confirm:focus-visible{outline:none;}
/* 見出しは設置ページの「FORM」と同じ位置・同じ組み（入れ替わっても版面が動かない） */
.cform-confirm .label{margin-bottom:10px;}
.cform-confirm__title{
	font-family:var(--sans);font-weight:800;
	font-size:clamp(1.15rem,2.6vw,1.4rem);line-height:1.55;letter-spacing:.03em;
	margin:0 0 10px;word-break:auto-phrase;
}
.cform-confirm__lead{
	margin:0 0 clamp(22px,3.2vw,30px);
	font-size:13px;line-height:1.95;color:var(--gray);word-break:auto-phrase;
}
.cform-confirm__list{margin:0;border-top:1px solid var(--line);}
.cform-confirm__item{
	display:grid;gap:6px;
	padding:18px 2px;border-bottom:1px solid var(--line);
}
/* 項目名は入力欄のラベルと同じ扱い（11px / .16em）。画面が変わっても読み方が変わらない */
.cform-confirm__item dt{
	font-weight:700;font-size:11px;letter-spacing:.16em;
	text-transform:uppercase;color:var(--gray);
}
.cform-confirm__item dd{
	margin:0;font-size:15px;line-height:1.9;letter-spacing:.02em;
	/* テキストエリアの改行をそのまま見せる */
	white-space:pre-wrap;overflow-wrap:anywhere;
}
.cform-confirm__actions{
	display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,18px);
	margin:clamp(28px,4vw,38px) 0 0;
}
/* .btn は <a> 前提の組み。<button> で使うぶんだけ素の見た目を消す */
button.btn{border:0;font-family:inherit;cursor:pointer;}
button.btn--ghost{border:1px solid var(--ink);}

/* ---------- 送信完了 ---------- */
.thanks__grid{display:flex;flex-direction:column;gap:clamp(40px,7vw,64px);}
.thanks__message{margin:0 0 clamp(30px,4.4vw,44px);max-width:var(--measure);}
.thanks__message p{margin:0 0 14px;font-size:15px;line-height:2.05;color:var(--ink-soft);word-break:auto-phrase;}
.thanks__message p:last-child{margin-bottom:0;}
/* 1行目は「受け付けた」という結論。本文より一段大きく置く */
.thanks__message .thanks__lead{
	font-weight:800;font-size:clamp(1.15rem,3vw,1.5rem);
	line-height:1.75;letter-spacing:.02em;color:var(--ink);
	margin-bottom:18px;
}
/* 自動返信の案内。本文と地続きに見せず、注記として一段引く */
.thanks__note{
	margin:0 0 clamp(28px,4vw,38px);padding:18px 20px;
	background:var(--paper-2);border-left:2px solid var(--ink);
	font-size:13px;line-height:1.95;color:var(--gray);
	max-width:var(--measure);word-break:auto-phrase;
}
.thanks__actions{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2.4vw,24px);margin:0;}
.thanks__link{
	display:inline-flex;align-items:center;min-height:44px;
	font-size:13px;letter-spacing:.06em;color:var(--gray);
	text-decoration:underline;text-underline-offset:4px;
}
.thanks__link:hover{color:var(--red);}

/* ---------- ページが見つからない ---------- */
/* 行き止まりのページなので、主役は説明ではなく「次の入口」。
   説明は左に細く畳み、入口の一覧に幅を渡す（送信完了はこの逆で、本文が主役）。 */
.notfound__grid{display:flex;flex-direction:column;gap:clamp(36px,6vw,56px);}
/* 1行目は結論。本文より一段大きく置く */
.notfound__lead{
	margin:0 0 16px;
	font-weight:800;font-size:clamp(1.15rem,3vw,1.5rem);
	line-height:1.75;letter-spacing:.02em;color:var(--ink);
	word-break:auto-phrase;
}
.notfound__note{
	margin:0 0 clamp(28px,4vw,38px);
	max-width:var(--measure);
	font-size:14px;line-height:2.05;color:var(--gray);
	word-break:auto-phrase;
}
.notfound__actions{margin:0;}

/* 入口の一覧。上の罫だけ地の色で締めて「ここから先は一覧」と分ける */
.notfound__list{border-top:1px solid var(--ink);}
.notfound__item{border-bottom:1px solid var(--line);}
.notfound__row{
	display:flex;align-items:center;gap:14px;
	padding:19px 2px;
	transition:padding-left .4s var(--ease-out);
}
/* 英字は幅を固定して和文の頭を揃える。揃えないと行ごとに和文が動いて、
   「一覧」ではなく「ばらばらに置かれたリンク」に見える */
.notfound__en{
	flex:0 0 auto;width:76px;
	font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.22em;
	/* --gray-light は地に対して 2.6:1 で、読ませる文字には薄すぎる（矢印は装飾なので可） */
	color:var(--gray);
	transition:color .3s var(--ease);
}
.notfound__ja{
	flex:1 1 auto;min-width:0;
	font-size:14.5px;line-height:1.7;
	transition:color .3s var(--ease);
}
.notfound__arrow{
	flex:0 0 auto;font-size:13px;color:var(--gray-light);
	transition:transform .4s var(--ease-out),color .3s var(--ease);
}
/* 触れたときの動きは、お知らせ一覧の行（.news-list__link）と同じにする。
   キーボードでも同じ合図が要る（輪郭だけだと、どの行に居るかは分かっても
   「押せる行」だと分かりにくい）ので :focus-visible にも同じものを当てる */
.notfound__row:hover,
.notfound__row:focus-visible{padding-left:10px;}
.notfound__row:hover .notfound__en,
.notfound__row:hover .notfound__ja,
.notfound__row:focus-visible .notfound__en,
.notfound__row:focus-visible .notfound__ja{color:var(--red);}
.notfound__row:hover .notfound__arrow,
.notfound__row:focus-visible .notfound__arrow{transform:translateX(5px);color:var(--red);}

@media (min-width:600px){
	/* 2列に割ると、5〜6個の入口が1画面に収まって「地図」として読める。
	   行の高さは揃うので、左右の罫はそのまま1本につながって見える */
	.notfound__list{display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(24px,4vw,56px);}
}

@media (min-width:1024px){
	.notfound__grid{flex-direction:row;align-items:flex-start;gap:clamp(48px,6vw,88px);}
	.notfound__body{flex:0 0 clamp(280px,28vw,360px);}
	.notfound__nav{flex:1;min-width:0;}
}

@media (min-width:768px){
	.thanks__grid{flex-direction:row;align-items:flex-start;gap:clamp(48px,6vw,88px);}
	.thanks__body{flex:1;min-width:0;}
	.thanks__side{flex:0 0 clamp(290px,32vw,380px);}
	.cform-confirm__item{
		grid-template-columns:clamp(150px,22%,210px) 1fr;
		gap:24px;align-items:baseline;
	}
}