@charset "UTF-8";
/*
Theme Name: MADE IN CREW
Theme URI: https://madeincrew.com/
Author: MADE IN CREW
Author URI: https://madeincrew.com/
Description: MADE IN CREW のオリジナル WordPress テーマ。採用プロモーション・LP・写真・映像・Webサイト制作のクリエイティブパートナー。
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: madeincrew
*/


/* ============================================================
   GLOBAL RESET / 共通設定
============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: 'Noto Serif JP', "Yu Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", serif;
	color: #1a1a1a;
	background: #fff;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	cursor: pointer;
}

/* スクリーンリーダー用に隠す（WordPressでも使うクラス） */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ============================================================
   FRONT PAGE (TOP) — MADE IN CREW
   ----------------------------------------------------------
   セクション:
     1) FV / Hero            #mic-fv-dip
     2) About + Results      #mc-rs
     3) Service              #sv-h
============================================================ */


/* ============================================================
   1) FV / Hero (Diptych)
============================================================ */
#mic-fv-dip{
	--gold:#b8965a;
	--gold-l:#d4aa6e;
	--cin:'Cinzel',serif;
	--noto:'Noto Serif JP',serif;
	--mincho:'Shippori Mincho',serif;
	--expo:cubic-bezier(.16,1,.3,1);
	position:relative;
	width:100%;
	height:100vh;
	min-height:680px;
	font-family:var(--noto);
	color:#fff;
	overflow:hidden;
	isolation:isolate;
	background:#1a1a1a;
}
#mic-fv-dip *,
#mic-fv-dip *::before,
#mic-fv-dip *::after{
	box-sizing:border-box;
	margin:0;
	padding:0;
	min-width:0;
}
#mic-fv-dip .dip-side{
	position:absolute;
	inset:0;
	clip-path:polygon(50% 0,50% 0,50% 100%,50% 100%);
	will-change:clip-path;
}
#mic-fv-dip .dip-side-l{animation:dipSpreadL 1.4s var(--expo) 3.55s forwards}
#mic-fv-dip .dip-side-r{animation:dipSpreadR 1.4s var(--expo) 3.55s forwards}
@keyframes dipSpreadL{to{clip-path:polygon(0 0,65% 0,55% 100%,0 100%)}}
@keyframes dipSpreadR{to{clip-path:polygon(65% 0,100% 0,100% 100%,55% 100%)}}

#mic-fv-dip .dip-photo{
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:center 35%;
	opacity:0;
	transition:opacity 1.4s cubic-bezier(.22,1,.32,1);
}
#mic-fv-dip .dip-l-1,
#mic-fv-dip .dip-r-1{will-change:opacity;opacity:1}
#mic-fv-dip .dip-side-l .dip-photo{animation:dipBurnsL 22s cubic-bezier(.33,0,.67,1) infinite alternate}
#mic-fv-dip .dip-side-r .dip-photo{animation:dipBurnsR 22s cubic-bezier(.33,0,.67,1) infinite alternate;filter:grayscale(1) brightness(.5) contrast(1.5)}
@keyframes dipBurnsL{0%{transform:scale(1)}100%{transform:scale(1.06)}}
@keyframes dipBurnsR{0%{transform:scale(1)}100%{transform:scale(1.06)}}

/* PC: 1枚目だけ即時表示 */
#mic-fv-dip .dip-l-1{background-image:url('assets/images/top-fv-pc-l1.webp')}
#mic-fv-dip .dip-r-1{background-image:url('assets/images/top-fv-pc-r1.webp')}

@media (min-width:1024px){
	#mic-fv-dip .dip-side-l .dip-photo{background-size:cover;background-position:75% 30%}
	#mic-fv-dip .dip-side-r .dip-photo{background-size:cover;background-position:25% 30%}
	#mic-fv-dip .dip-r-1,
	#mic-fv-dip .dip-r-2{background-size:cover;background-position:25% 30%}
	#mic-fv-dip .dip-l-2,
	#mic-fv-dip .dip-l-3{background-position:100% 5%}
}

#mic-fv-dip .dip-line{position:absolute;inset:0;z-index:5;pointer-events:none}
#mic-fv-dip .dip-line svg{position:absolute;inset:0;width:100%;height:100%}
#mic-fv-dip .dip-line line{
	stroke:#000;
	stroke-width:4;
	stroke-dasharray:1500;
	stroke-dashoffset:1500;
	animation:dipLineDraw .5s cubic-bezier(.16,1,.3,1) 3.05s forwards;
}
@keyframes dipLineDraw{to{stroke-dashoffset:0}}

#mic-fv-dip .dip-title-area{
	position:absolute;
	right:clamp(28px,5vw,100px);
	top:50%;
	transform:translateY(-50%);
	z-index:10;
	text-align:right;
	pointer-events:none;
	max-width:min(640px,55vw);
}
#mic-fv-dip .dip-eyebrow{
	font-family:var(--cin);
	font-size:clamp(.62rem,.9vw,.74rem);
	font-weight:500;
	color:var(--gold-l);
	margin-bottom:clamp(28px,4vw,44px);
	display:inline-block;
}
#mic-fv-dip .dip-eyebrow-text{
	display:inline-block;
	opacity:0;
	filter:blur(6px);
	letter-spacing:.95em;
	animation:dipEyebrowIn 1.4s cubic-bezier(.22,1,.32,1) 4.6s forwards;
}
@keyframes dipEyebrowIn{to{opacity:1;filter:blur(0);letter-spacing:.5em}}

#mic-fv-dip .dip-title{
	font-family:var(--mincho);
	font-size:clamp(1.8rem,4.5vw,4rem);
	font-weight:600;
	line-height:1.25;
	letter-spacing:.06em;
	color:#fff;
	mix-blend-mode:difference;
	margin-bottom:clamp(24px,3.5vw,40px);
}
#mic-fv-dip .dip-title-line{display:block;overflow:hidden;padding:0 .03em}
#mic-fv-dip .dip-char{
	display:inline-block;
	transform:translateY(108%);
	opacity:0;
	animation:dipCharUp 1.1s cubic-bezier(.22,1,.32,1) calc(5s + var(--i,0) * 55ms) forwards;
}
@keyframes dipCharUp{
	0%{transform:translateY(108%);opacity:0}
	55%{transform:translateY(-2%);opacity:1}
	100%{transform:translateY(0);opacity:1}
}

#mic-fv-dip .dip-sub{
	font-family:var(--noto);
	font-size:clamp(.95rem,1.5vw,1.2rem);
	font-weight:400;
	color:var(--gold-l);
	display:inline-block;
}
#mic-fv-dip .dip-sub-text{
	display:inline-block;
	opacity:0;
	filter:blur(5px);
	letter-spacing:.4em;
	animation:dipSubIn 1.3s cubic-bezier(.22,1,.32,1) 5.9s forwards;
}
@keyframes dipSubIn{to{opacity:1;filter:blur(0);letter-spacing:.18em}}

@media (max-width:640px){
	#mic-fv-dip{min-height:600px}
	#mic-fv-dip .dip-side-l{animation:dipSpreadLsp 1.4s var(--expo) 3.55s forwards}
	#mic-fv-dip .dip-side-r{animation:dipSpreadRsp 1.4s var(--expo) 3.55s forwards}
	@keyframes dipSpreadLsp{to{clip-path:polygon(0 0,100% 0,15% 100%,0 100%)}}
	@keyframes dipSpreadRsp{to{clip-path:polygon(100% 0,100% 0,100% 100%,15% 100%)}}
	#mic-fv-dip .dip-side-l .dip-photo{
		background-size:cover;
		background-position:48% 38%;
		animation:dipBurnsLsp 16s cubic-bezier(.33,0,.67,1) infinite alternate;
	}
	#mic-fv-dip .dip-side-r .dip-photo{
		background-size:auto 108%;
		background-position:30% 38%;
		animation:dipBurnsRsp 16s cubic-bezier(.33,0,.67,1) infinite alternate;
	}
	#mic-fv-dip .dip-l-1{background-image:url('assets/images/top-fv-sp-l1.webp')}
	#mic-fv-dip .dip-r-1{background-image:url('assets/images/top-fv-sp-r1.webp')}
	@keyframes dipBurnsLsp{0%{transform:scale(1)}100%{transform:scale(1.05)}}
	@keyframes dipBurnsRsp{0%{transform:scale(1)}100%{transform:scale(1.05)}}
	#mic-fv-dip .dip-line{display:none}
	#mic-fv-dip .dip-title-area{
		top:auto;
		bottom:7%;
		transform:none;
		right:20px;
		left:20px;
		max-width:none;
		text-align:right;
	}
	#mic-fv-dip .dip-title{
		font-size:clamp(1.4rem,7vw,2.4rem);
		font-weight:700;
		margin-bottom:clamp(16px,3vw,28px);
	}
	#mic-fv-dip .dip-eyebrow{font-size:.66rem;margin-bottom:clamp(18px,3vw,28px)}
	#mic-fv-dip .dip-eyebrow-text{
		animation:dipEyebrowInSp 1.4s cubic-bezier(.22,1,.32,1) 4.6s forwards;
		white-space:nowrap;
	}
	@keyframes dipEyebrowInSp{to{opacity:1;filter:blur(0);letter-spacing:.28em}}
	#mic-fv-dip .dip-sub{font-size:.9rem}
	#mic-fv-dip .dip-sub-text{
		animation:dipSubInSp 1.3s cubic-bezier(.22,1,.32,1) 5.9s forwards;
		white-space:nowrap;
		display:inline-block;
	}
	@keyframes dipSubInSp{to{opacity:1;filter:blur(0);letter-spacing:.04em}}
}

@media (prefers-reduced-motion:reduce){
	#mic-fv-dip .dip-side-l{clip-path:polygon(0 0,65% 0,55% 100%,0 100%);animation:none}
	#mic-fv-dip .dip-side-r{clip-path:polygon(65% 0,100% 0,100% 100%,55% 100%);animation:none}
	#mic-fv-dip .dip-photo{animation:none;opacity:1}
	#mic-fv-dip .dip-side-l .dip-photo:not(.dip-l-1){opacity:0}
	#mic-fv-dip .dip-side-r .dip-photo:not(.dip-r-1){opacity:0}
	#mic-fv-dip .dip-line{display:none}
	#mic-fv-dip .dip-char{transform:none;opacity:1;animation:none}
	#mic-fv-dip .dip-eyebrow-text,
	#mic-fv-dip .dip-sub-text{opacity:1;filter:none;letter-spacing:inherit;animation:none}
}


/* ============================================================
   2) About + Results
============================================================ */
#mc-rs{
	--nv:#353B4B;
	--bd:#bcc6d4;
	--gd:#b89968;
	--dk:#1a1a1a;
	--ease:cubic-bezier(.22,.61,.36,1);
	--ease-roll:cubic-bezier(.76,0,.24,1);
	font-family:'Noto Serif JP',serif;
	color:var(--dk);
	background:#fff url('assets/images/bg-paper-texture.png') repeat-y center top;
	background-size:100% auto;
	position:relative;
	overflow:hidden;
	width:100%;
	max-width:100%;
	display:block;
}
#mc-rs *{box-sizing:border-box}
#mc-rs:not(.mc-ready) *,
#mc-rs:not(.mc-ready) *::before,
#mc-rs:not(.mc-ready) *::after{
	transition:none !important;
	animation:none !important;
}

#mc-rs .mc-eyebrow{
	display:flex;
	align-items:center;
	gap:14px;
	font-family:'Noto Serif JP',serif;
	font-size:24px;
	line-height:1.4;
	letter-spacing:0;
	font-weight:400;
	font-style:italic;
	color:var(--dk);
	margin-bottom:18px;
	opacity:0;
	transform:translateY(8px);
	filter:blur(2px);
	transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);
}
#mc-rs .mc-eyebrow::before{
	content:'';
	width:0;
	height:1px;
	background:var(--gd);
	display:inline-block;
	transition:width .9s var(--ease);
}
#mc-rs .mc-headline{
	font-family:'Cinzel',serif;
	font-size:clamp(3.6rem,7.4vw,6rem);
	font-weight:400;
	font-style:italic;
	letter-spacing:.02em;
	color:rgba(53,59,75,.2);
	line-height:1;
	margin:0 0 14px;
	display:inline-block;
}
#mc-rs .mc-headline .ch{
	display:inline-block;
	opacity:0;
	transform:translateY(22px);
	filter:blur(6px);
	transition:opacity .65s var(--ease),transform .65s var(--ease),filter .65s var(--ease);
}
#mc-rs .mc-link{
	display:inline-flex;
	align-items:center;
	gap:18px;
	font-family:'Cinzel',serif;
	font-size:.78rem;
	font-weight:500;
	letter-spacing:.32em;
	color:var(--dk);
	padding:14px 0;
	border-bottom:1px solid var(--dk);
	transition:gap .4s,color .3s,border-color .3s,letter-spacing .4s;
	text-decoration:none;
}
#mc-rs .mc-link:hover,
#mc-rs .mc-link:focus-visible{gap:28px;color:var(--gd);border-color:var(--gd);letter-spacing:.36em}
#mc-rs .mc-link .arrow{position:relative;width:24px;height:1.5px;background:currentColor;display:inline-block}
#mc-rs .mc-link .arrow::after{
	content:'';
	position:absolute;
	right:0;top:50%;
	width:9px;height:9px;
	border-top:1.5px solid currentColor;
	border-right:1.5px solid currentColor;
	transform:translateY(-50%) rotate(45deg);
}

#mc-rs .mc-about,
#mc-rs .mc-results{position:relative;padding:90px 0 110px;overflow:hidden}
#mc-rs .mc-about-head,
#mc-rs .mc-results-head{position:relative;z-index:5;padding:0 60px;margin-bottom:54px}
#mc-rs .mc-about-content,
#mc-rs .mc-results-content{position:relative;padding:60px 60px;z-index:2}
#mc-rs .mc-results-content{padding:160px 60px}

#mc-rs .mc-about-band,
#mc-rs .mc-results-band{
	position:absolute;
	inset:0;
	background:var(--nv);
	z-index:1;
	transition:-webkit-mask-size .85s var(--ease-roll),mask-size .85s var(--ease-roll);
	will-change:mask-size;
}
#mc-rs .mc-about-band{
	clip-path:polygon(0 14%,100% 0,100% 86%,0 100%);
	-webkit-mask:linear-gradient(90deg,#000,#000) right/0% 100% no-repeat;
	mask:linear-gradient(90deg,#000,#000) right/0% 100% no-repeat;
}
#mc-rs .mc-results-band{
	clip-path:polygon(0 0,100% 14%,100% 100%,0 86%);
	-webkit-mask:linear-gradient(90deg,#000,#000) left/0% 100% no-repeat;
	mask:linear-gradient(90deg,#000,#000) left/0% 100% no-repeat;
}
#mc-rs .mc-about-band::after,
#mc-rs .mc-results-band::after{
	content:'';
	position:absolute;
	top:0;
	width:2px;
	height:100%;
	background:linear-gradient(180deg,transparent 0%,rgba(184,153,104,.85) 50%,transparent 100%);
	opacity:0;
	transition:left .85s var(--ease-roll),right .85s var(--ease-roll),opacity .3s ease;
}
#mc-rs .mc-about-band::after{right:0}
#mc-rs .mc-results-band::after{left:0}

#mc-rs .mc-about-body{
	position:relative;
	z-index:5;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:60px;
	align-items:center;
}
#mc-rs .mc-about-text{
	background:#fff;
	padding:60px 56px;
	box-shadow:0 22px 50px rgba(0,0,0,.10),0 4px 14px rgba(0,0,0,.04);
	position:relative;
	opacity:0;
	transform:translateY(24px);
	filter:blur(2px);
	transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
}
#mc-rs .mc-about-text::before{
	content:'';
	position:absolute;
	inset:14px;
	border:1px solid rgba(184,153,104,.35);
	pointer-events:none;
	opacity:0;
	transition:opacity .7s var(--ease) .4s;
}
#mc-rs .mc-about-text::after{
	content:'';
	position:absolute;
	top:-1px;left:-1px;
	width:0;height:0;
	border-top:2px solid var(--gd);
	border-left:2px solid var(--gd);
	transition:width .55s var(--ease) .65s,height .55s var(--ease) .65s;
}
#mc-rs .mc-about-text .body{
	font-size:1.15rem;
	line-height:2.1;
	color:var(--dk);
	font-weight:300;
	margin-bottom:32px;
	letter-spacing:.06em;
}

#mc-rs .mc-about-photo{
	position:relative;
	aspect-ratio:4/5;
	background:#000;
	overflow:hidden;
	box-shadow:0 22px 60px rgba(0,0,0,.22),0 4px 14px rgba(0,0,0,.10);
	opacity:0;
	transform:translateY(24px);
	filter:blur(2px);
	transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);
}
#mc-rs .mc-about-photo::before{
	content:'';
	position:absolute;
	inset:16px;
	border:1px solid rgba(184,153,104,.55);
	z-index:5;
	pointer-events:none;
	opacity:0;
	transition:opacity .7s var(--ease) .8s;
}
#mc-rs .mc-about-photo .img{
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:center 25%;
	transform:scale(1.08);
	filter:grayscale(1) saturate(.4) contrast(1.15) brightness(.92) blur(4px);
	transition:transform 1.8s var(--ease),filter 1.8s var(--ease);
}
#mc-rs .mc-about-photo .veil{
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,transparent 60%,rgba(21,32,58,.55));
	z-index:2;
	opacity:0;
	transition:opacity .9s var(--ease) 1s;
}

#mc-rs .mc-cards{
	position:relative;
	z-index:5;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:36px;
	justify-items:center;
}
#mc-rs .mc-stat{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:24px;
	width:100%;
	max-width:280px;
	opacity:0;
	transform:translateY(28px);
	filter:blur(3px);
	transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);
}
#mc-rs .mc-stat-circle{
	position:relative;
	width:100%;
	aspect-ratio:1;
	border-radius:50%;
	overflow:hidden;
	background:#1a1a1a;
	box-shadow:0 22px 50px rgba(0,0,0,.32),0 6px 18px rgba(0,0,0,.18);
}
#mc-rs .mc-stat-circle::before{
	content:'';
	position:absolute;
	inset:0;
	border-radius:50%;
	border:1px solid rgba(184,153,104,.55);
	z-index:4;
	pointer-events:none;
	transition:inset .6s var(--ease),border-color .4s;
}
#mc-rs .mc-stat:hover .mc-stat-circle::before{inset:8px;border-color:rgba(184,153,104,.95)}
#mc-rs .mc-ring-out,
#mc-rs .mc-ring-in{position:absolute;border-radius:50%;pointer-events:none;z-index:3;opacity:0;transition:opacity .9s var(--ease)}
#mc-rs .mc-ring-out{inset:-14px;border:1px dashed rgba(184,153,104,.45);animation:mcRot 90s linear infinite}
#mc-rs .mc-ring-in{inset:14px;border:1px solid rgba(184,153,104,.25);z-index:6}
@keyframes mcRot{to{transform:rotate(360deg)}}

#mc-rs .mc-stat-photo{
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:center;
	transform:scale(1.06);
	filter:grayscale(1) saturate(.4) contrast(1.08) blur(3px);
	transition:filter 1.4s var(--ease),transform 1.6s var(--ease);
	z-index:1;
}
#mc-rs .mc-stat-content{
	position:absolute;
	inset:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	color:#fff;
	z-index:7;
	padding:36px 24px;
	opacity:0;
	transition:opacity .8s var(--ease);
}
#mc-rs .mc-stat-num{
	font-family:'Cinzel',serif;
	font-size:clamp(2.4rem,4.4vw,3.4rem);
	font-weight:500;
	letter-spacing:.03em;
	line-height:1;
	color:var(--gd);
	margin-bottom:4px;
	display:flex;
	align-items:baseline;
	justify-content:center;
	gap:2px;
	text-shadow:0 0 18px rgba(255,255,255,.95),0 0 38px rgba(255,255,255,.7);
}
#mc-rs .mc-stat-num .suffix{font-size:.5em;letter-spacing:.05em;color:rgba(184,153,104,.85)}
#mc-rs .mc-stat-divider{
	width:0;
	height:1px;
	background:var(--gd);
	margin-bottom:14px;
	opacity:.75;
	transition:width .6s var(--ease);
}
#mc-rs .mc-stat:hover .mc-stat-divider{width:56px}
#mc-rs .mc-stat-label{
	font-size:1.25rem;
	font-weight:700;
	letter-spacing:.2em;
	line-height:1.5;
	color:#fff;
	text-shadow:0 2px 12px rgba(0,0,0,.45);
}
#mc-rs .mc-stat-cap{
	font-family:'Cinzel',serif;
	font-size:.78rem;
	font-weight:500;
	letter-spacing:.42em;
	color:rgba(255,255,255,.85);
	padding:0 4px 8px;
	border-bottom:1px solid var(--gd);
	opacity:0;
	transform:translateY(8px);
	transition:opacity .8s var(--ease),transform .8s var(--ease);
}

#mc-rs .mc-results-foot{position:relative;z-index:5;padding:50px 60px 0}
#mc-rs .mc-results-foot .body{
	max-width:1040px;
	font-size:1.3rem;
	line-height:2;
	color:var(--dk);
	font-weight:300;
	letter-spacing:.05em;
	opacity:0;
	transform:translateY(16px);
	filter:blur(2px);
	transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease);
}

/* About — in view */
#mc-rs .mc-about.is-in .mc-eyebrow{opacity:1;transform:none;filter:blur(0)}
#mc-rs .mc-about.is-in .mc-eyebrow::before{width:32px;transition-delay:.25s}
#mc-rs .mc-about.is-in .mc-headline .ch{opacity:1;transform:translateY(0);filter:blur(0)}
#mc-rs .mc-about.is-in .mc-about-band{-webkit-mask-size:100% 100%;mask-size:100% 100%;transition-delay:.65s}
#mc-rs .mc-about.is-in .mc-about-band::after{right:100%;opacity:1;transition-delay:.65s,.65s,.65s}
#mc-rs .mc-about.is-in .mc-about-text{opacity:1;transform:none;filter:blur(0);transition-delay:1.5s}
#mc-rs .mc-about.is-in .mc-about-text::before{opacity:1}
#mc-rs .mc-about.is-in .mc-about-text::after{width:42px;height:42px}
#mc-rs .mc-about.is-in .mc-about-photo{opacity:1;transform:none;filter:blur(0);transition-delay:1.65s}
#mc-rs .mc-about.is-in .mc-about-photo::before{opacity:1}
#mc-rs .mc-about.is-in .mc-about-photo .img{transform:scale(1);filter:grayscale(0) saturate(1) contrast(1) brightness(1) blur(0);transition-delay:1.95s}
#mc-rs .mc-about.is-in .mc-about-photo .veil{opacity:1}

/* Results — in view */
#mc-rs .mc-results.is-in .mc-eyebrow{opacity:1;transform:none;filter:blur(0)}
#mc-rs .mc-results.is-in .mc-eyebrow::before{width:32px;transition-delay:.25s}
#mc-rs .mc-results.is-in .mc-headline .ch{opacity:1;transform:translateY(0);filter:blur(0)}
#mc-rs .mc-results.is-in .mc-results-band{-webkit-mask-size:100% 100%;mask-size:100% 100%;transition-delay:.65s}
#mc-rs .mc-results.is-in .mc-results-band::after{left:100%;opacity:1;transition-delay:.65s,.65s}
#mc-rs .mc-results.is-in .mc-stat{opacity:1;transform:none;filter:blur(0)}
#mc-rs .mc-results.is-in .mc-stat:nth-child(1){transition-delay:1.35s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(2){transition-delay:1.5s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(3){transition-delay:1.65s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(1) .mc-stat-photo{transform:scale(1);filter:grayscale(0) saturate(1) contrast(1) blur(0);transition-delay:1.8s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(2) .mc-stat-photo{transform:scale(1);filter:grayscale(0) saturate(1) contrast(1) blur(0);transition-delay:1.95s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(3) .mc-stat-photo{transform:scale(1);filter:grayscale(0) saturate(1) contrast(1) blur(0);transition-delay:2.1s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(1) .mc-ring-out,
#mc-rs .mc-results.is-in .mc-stat:nth-child(1) .mc-ring-in{opacity:1;transition-delay:1.95s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(2) .mc-ring-out,
#mc-rs .mc-results.is-in .mc-stat:nth-child(2) .mc-ring-in{opacity:1;transition-delay:2.1s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(3) .mc-ring-out,
#mc-rs .mc-results.is-in .mc-stat:nth-child(3) .mc-ring-in{opacity:1;transition-delay:2.25s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(1) .mc-stat-content{opacity:1;transition-delay:1.95s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(2) .mc-stat-content{opacity:1;transition-delay:2.1s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(3) .mc-stat-content{opacity:1;transition-delay:2.25s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(1) .mc-stat-divider{width:32px;transition-delay:2.2s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(2) .mc-stat-divider{width:32px;transition-delay:2.35s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(3) .mc-stat-divider{width:32px;transition-delay:2.5s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(1) .mc-stat-cap{opacity:1;transform:none;transition-delay:2.1s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(2) .mc-stat-cap{opacity:1;transform:none;transition-delay:2.25s}
#mc-rs .mc-results.is-in .mc-stat:nth-child(3) .mc-stat-cap{opacity:1;transform:none;transition-delay:2.4s}
#mc-rs .mc-results.is-in .mc-results-foot .body{opacity:1;transform:none;filter:blur(0);transition-delay:2.6s}

@media (max-width:1023px){
	#mc-rs .mc-about,
	#mc-rs .mc-results{padding:60px 0 80px}
	#mc-rs .mc-about-head,
	#mc-rs .mc-results-head{padding:0 24px;margin-bottom:36px}
	#mc-rs .mc-about-content,
	#mc-rs .mc-results-content,
	#mc-rs .mc-results-foot{padding-left:24px;padding-right:24px}
	#mc-rs .mc-about-body{grid-template-columns:1fr;gap:40px}
	#mc-rs .mc-about-photo{aspect-ratio:5/4}
	#mc-rs .mc-cards{grid-template-columns:1fr;gap:48px}
	#mc-rs .mc-stat{max-width:240px}
}
@media (max-width:540px){
	#mc-rs .mc-about-text{padding:32px 24px}
	#mc-rs .mc-eyebrow{font-size:21px}
	#mc-rs .mc-about-text .body{font-size:.84rem}
	#mc-rs .mc-results-foot .body{font-size:.99rem}
	#mc-rs .mc-stat{max-width:220px}
	#mc-rs .mc-stat-num{font-size:2.2rem}
	#mc-rs .mc-stat-label{font-size:.9rem;font-weight:700}
}


/* ============================================================
   3) Service (Atelier Index)
============================================================ */
#sv-h{
	--nv:#353B4B;
	--gd:#b89968;
	--gd-l:#d4b27f;
	--dk:#1a1a1a;
	--paper:#fafaf6;
	--ease:cubic-bezier(.22,.61,.36,1);
	--exp:cubic-bezier(.16,1,.3,1);
	--dram:cubic-bezier(.86,0,.07,1);
	font-family:'Noto Serif JP',serif;
	color:var(--dk);
	background:#fff url('assets/images/bg-paper-texture.png') repeat-y center top;
	background-size:100% auto;
	position:relative;
	overflow:hidden;
}
#sv-h *{box-sizing:border-box;margin:0;padding:0}
#sv-h:not(.is-ready) *,
#sv-h:not(.is-ready) *::before,
#sv-h:not(.is-ready) *::after{transition:none !important;animation:none !important}

#sv-h::before{
	content:'';
	position:absolute;
	top:-10%;right:-10%;
	width:60%;height:60%;
	border-radius:50%;
	background:radial-gradient(circle,rgba(184,153,104,.08),transparent 60%);
	pointer-events:none;
	z-index:0;
	opacity:0;
	animation:svGi 3s ease 1s forwards,svGb 22s ease-in-out 4s infinite;
}
#sv-h::after{
	content:'';
	position:absolute;
	bottom:-15%;left:-15%;
	width:55%;height:55%;
	border-radius:50%;
	background:radial-gradient(circle,rgba(53,59,75,.06),transparent 60%);
	pointer-events:none;
	z-index:0;
	opacity:0;
	animation:svGi 3s ease 1.5s forwards,svGb2 26s ease-in-out 5s infinite;
}
@keyframes svGi{to{opacity:1}}
@keyframes svGb{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.08) translate(-30px,20px)}}
@keyframes svGb2{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(.94) translate(25px,-18px)}}

#sv-h .head{padding:90px 60px 30px;max-width:none;margin:0 auto;position:relative;z-index:5}
#sv-h .eb{
	font-family:'Noto Serif JP',serif;
	font-size:24px;
	letter-spacing:0;
	font-style:italic;
	margin-bottom:14px;
	display:flex;
	align-items:center;
	gap:14px;
	opacity:0;
	transform:translateY(10px);
	transition:opacity 1s var(--exp),transform 1s var(--exp);
}
#sv-h.is-in .eb{opacity:1;transform:none}
#sv-h .eb::before{content:'';width:0;height:1px;background:var(--gd);transition:width 1s var(--exp) .25s}
#sv-h.is-in .eb::before{width:42px}
#sv-h h2{
	font-family:'Cinzel',serif;
	font-size:clamp(3.6rem,7vw,5.6rem);
	font-weight:400;
	font-style:italic;
	letter-spacing:.04em;
	color:rgba(53,59,75,.2);
	line-height:1;
	overflow:hidden;
}
#sv-h h2 .ch{
	display:inline-block;
	transform:translateY(115%);
	opacity:0;
	transition:transform 1.3s var(--exp),opacity 1.3s var(--exp);
}
#sv-h.is-in h2 .ch{transform:translateY(0);opacity:1}

#sv-h .index{padding:60px 60px 120px;max-width:none;margin:0 auto;position:relative;z-index:5}
#sv-h .index-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:80px;align-items:stretch}
#sv-h .list{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(0,0,0,.08);position:relative}
#sv-h .list::before{
	content:'';
	position:absolute;
	top:-1px;left:0;
	width:0;height:1px;
	background:linear-gradient(90deg,var(--gd),var(--gd-l),transparent);
	transition:width 1.6s var(--exp) .3s;
}
#sv-h.is-in .list::before{width:100%}

#sv-h .item{
	position:relative;
	display:grid;
	grid-template-columns:80px 1fr auto;
	gap:32px;
	align-items:center;
	padding:28px 4px;
	border-bottom:1px solid rgba(0,0,0,.08);
	cursor:pointer;
	text-decoration:none;
	color:inherit;
	opacity:0;
	transform:translateX(-28px);
	transition:opacity 1s var(--exp),transform 1s var(--exp),padding .4s var(--exp);
}
#sv-h.is-in .item{opacity:1;transform:none}
#sv-h.is-in .item:nth-child(1){transition-delay:.6s,.6s,0s}
#sv-h.is-in .item:nth-child(2){transition-delay:.72s,.72s,0s}
#sv-h.is-in .item:nth-child(3){transition-delay:.84s,.84s,0s}
#sv-h.is-in .item:nth-child(4){transition-delay:.96s,.96s,0s}
#sv-h.is-in .item:nth-child(5){transition-delay:1.08s,1.08s,0s}
#sv-h.is-in .item:nth-child(6){transition-delay:1.2s,1.2s,0s}

#sv-h .item::before{
	content:'';
	position:absolute;
	left:0;top:50%;
	width:0;height:1px;
	background:var(--gd);
	opacity:.55;
	transition:width .9s var(--exp),opacity .4s;
}
#sv-h.is-in .item::before{width:0}
#sv-h .item:hover::before,
#sv-h .item:focus-visible::before{width:24px;opacity:1}
#sv-h .item::after{
	content:'';
	position:absolute;
	left:0;right:0;bottom:-1px;
	height:1px;
	background:var(--gd);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform .7s var(--ease);
}
#sv-h .item:hover::after,
#sv-h .item:focus-visible::after{transform:scaleX(1)}

#sv-h .item .num{
	font-family:'Cinzel',serif;
	font-size:1.4rem;
	font-weight:300;
	font-style:italic;
	color:var(--gd);
	letter-spacing:.04em;
	position:relative;
	transition:transform .5s var(--exp),color .4s;
}
#sv-h .item:hover .num,
#sv-h .item:focus-visible .num{transform:translateX(6px);color:var(--gd-l)}

#sv-h .item .info{display:flex;flex-direction:column;gap:8px}
#sv-h .item .cat{
	font-family:'Shippori Mincho','Noto Serif JP',serif;
	font-size:.82rem;
	font-weight:500;
	letter-spacing:.14em;
	color:var(--dk);
	opacity:.65;
	transition:opacity .4s,color .4s,letter-spacing .5s var(--exp);
}
#sv-h .item:hover .cat,
#sv-h .item:focus-visible .cat{opacity:1;color:var(--gd);letter-spacing:.2em}

#sv-h .item .ttl{
	font-family:'Cinzel',serif;
	font-size:clamp(2rem,4vw,3.2rem);
	font-weight:300;
	font-style:italic;
	letter-spacing:.02em;
	color:var(--dk);
	line-height:1.05;
	transition:transform .55s var(--exp),color .4s;
}
#sv-h .item:hover .ttl,
#sv-h .item:focus-visible .ttl{transform:translateX(14px);color:var(--nv)}

#sv-h .item .arrow{
	width:36px;height:36px;
	border:1px solid rgba(0,0,0,.2);
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background .45s,border-color .45s,transform .55s var(--exp);
}
#sv-h .item .arrow::after{
	content:'';
	width:8px;height:8px;
	border-top:1px solid var(--dk);
	border-right:1px solid var(--dk);
	transform:rotate(45deg) translate(-2px,2px);
	transition:border-color .4s;
}
#sv-h .item:hover .arrow,
#sv-h .item:focus-visible .arrow{background:var(--gd);border-color:var(--gd);transform:rotate(-30deg) scale(1.08)}
#sv-h .item:hover .arrow::after,
#sv-h .item:focus-visible .arrow::after{border-color:#fff}

#sv-h .preview{
	position:sticky;
	top:80px;
	align-self:stretch;
	height:100%;
	min-height:480px;
	max-height:calc(100vh - 100px);
	overflow:hidden;
	background:#000;
	box-shadow:0 22px 50px rgba(0,0,0,.18);
	clip-path:inset(0 0 100% 0);
	-webkit-clip-path:inset(0 0 100% 0);
	transition:clip-path 1.6s var(--dram) .4s,-webkit-clip-path 1.6s var(--dram) .4s;
}
#sv-h.is-in .preview{clip-path:inset(0 0 0 0);-webkit-clip-path:inset(0 0 0 0)}

#sv-h .preview .card{
	position:absolute;
	inset:0;
	background-size:cover;
	background-position:center 30%;
	opacity:0;
	filter:grayscale(.55) brightness(.88);
	transition:opacity 1.2s var(--ease),filter 1.4s var(--ease),transform 6s var(--exp);
	transform:scale(1.08);
}
#sv-h .preview .card.is-active{opacity:1;filter:grayscale(0) brightness(1);transform:scale(1.02)}

#sv-h .preview-vig{
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,.4) 0%,transparent 18%,transparent 70%,rgba(0,0,0,.55) 100%);
	z-index:4;
	pointer-events:none;
}
#sv-h .preview .frame{position:absolute;inset:18px;z-index:5;pointer-events:none}
#sv-h .preview .frame svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#sv-h .preview .frame svg rect{
	fill:none;
	stroke:rgba(255,255,255,.5);
	stroke-width:1;
	stroke-dasharray:1;
	stroke-dashoffset:1;
	pathLength:1;
	transition:stroke-dashoffset 1.8s var(--exp) 1.5s;
}
#sv-h.is-in .preview .frame svg rect{stroke-dashoffset:0}

#sv-h .preview .tag{
	position:absolute;
	bottom:30px;left:30px;
	font-family:'Cinzel',serif;
	font-size:.7rem;
	letter-spacing:.42em;
	color:#fff;
	z-index:6;
	opacity:0;
	transform:translateY(8px);
	transition:opacity 1s var(--ease) 1.6s,transform 1s var(--ease) 1.6s;
}
#sv-h.is-in .preview .tag{opacity:1;transform:translateY(0)}
#sv-h .preview .tag::before{
	content:'';
	width:0;
	height:1px;
	background:var(--gd);
	display:inline-block;
	vertical-align:middle;
	margin-right:0;
	transition:width 1s var(--exp) 1.9s,margin-right .8s var(--exp) 1.9s;
}
#sv-h.is-in .preview .tag::before{width:24px;margin-right:14px}

#sv-h .preview .scroll-hint{
	position:absolute;
	top:24px;right:24px;
	font-family:'Cinzel',serif;
	font-size:.6rem;
	letter-spacing:.32em;
	color:rgba(255,255,255,.6);
	z-index:6;
	display:flex;
	align-items:center;
	gap:10px;
	opacity:0;
	transform:translateX(10px);
	transition:opacity 1s var(--ease) 1.8s,transform 1s var(--ease) 1.8s;
}
#sv-h.is-in .preview .scroll-hint{opacity:1;transform:translateX(0);animation:svHintP 3.5s ease-in-out 3s infinite}
@keyframes svHintP{0%,100%{opacity:1}50%{opacity:.45}}
#sv-h .preview .scroll-hint::after{content:'';width:24px;height:1px;background:rgba(255,255,255,.4)}

#sv-h .preview-corner{
	position:absolute;
	z-index:6;
	width:24px;
	height:24px;
	border-color:rgba(255,153,68,.85);
	opacity:0;
	transition:opacity 1s var(--ease) 2s;
}
#sv-h.is-in .preview-corner{opacity:1}
#sv-h .pc-tl{top:18px;left:18px;border-top:1px solid var(--gd);border-left:1px solid var(--gd)}
#sv-h .pc-br{bottom:18px;right:18px;border-bottom:1px solid var(--gd);border-right:1px solid var(--gd)}

#sv-h .preview .card.is-active::after{
	content:'';
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,transparent 0%,rgba(184,153,104,.06) 50%,transparent 100%);
	pointer-events:none;
	opacity:0;
	animation:svCardGl 8s ease-in-out 3s infinite;
}
@keyframes svCardGl{0%,100%{opacity:0}50%{opacity:1}}

@media (max-width:900px){
	#sv-h .head{padding:60px 24px 20px}
	#sv-h .index{padding:30px 24px 80px}
	#sv-h .index-grid{grid-template-columns:1fr;gap:0}
	#sv-h .preview{display:none}
	#sv-h .item{grid-template-columns:50px 1fr 36px;gap:18px;padding:22px 0}
	#sv-h .item .ttl{font-size:1.5rem}
	#sv-h .item:hover .ttl,
	#sv-h .item:focus-visible .ttl{transform:none}
	#sv-h .item:hover .num,
	#sv-h .item:focus-visible .num{transform:none}
}
@media (prefers-reduced-motion:reduce){
	#sv-h *,
	#sv-h *::before,
	#sv-h *::after{animation:none !important;transition:none !important;transform:none !important;opacity:1 !important;filter:none !important;clip-path:none !important;-webkit-clip-path:none !important}
	#sv-h .preview .card{opacity:0}
	#sv-h .preview .card.is-active{opacity:1 !important}
	#sv-h h2 .ch{transform:none !important;opacity:1 !important}
	#sv-h .list::before,
	#sv-h .eb::before,
	#sv-h .preview .tag::before{width:auto !important}
	#sv-h .preview .frame svg rect{stroke-dashoffset:0 !important}
}


/* ============================================================
   4) CASE — Cinematic Horizontal Pin
   ----------------------------------------------------------
   - .case-stage がピン留めされ縦スクロールが横移動に変換
   - サムネは 1800x1200 (3:2)、フル背景イメージ
   - 中央のカードに .is-active で前面化
============================================================ */
#case-list{
	--gd:#b89968;
	--gd-l:#d4b27f;
	--dk:#0a0b10;
	--paper:#f0ece4;
	--ease:cubic-bezier(.22,.61,.36,1);
	--exp:cubic-bezier(.16,1,.3,1);
	position:relative;
	background:var(--dk);
	color:var(--paper);
	font-family:'Noto Serif JP',serif;
	overflow:hidden;
}
#case-list .case-stage{
	position:relative;
	height:100vh;
	min-height:640px;
	width:100%;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
#case-list .case-vignette{
	position:absolute;inset:0;
	background:
		radial-gradient(ellipse at center, transparent 0%, transparent 55%, rgba(0,0,0,.55) 100%),
		linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 18%, transparent 80%, rgba(0,0,0,.5) 100%);
	pointer-events:none;
	z-index:8;
}
#case-list .case-beam{
	position:absolute;top:-20%;left:-10%;
	width:140%;height:140%;
	background:linear-gradient(135deg, transparent 30%, rgba(184,153,104,.05) 50%, transparent 70%);
	pointer-events:none;
	z-index:1;
	animation:caseBeam 18s ease-in-out infinite alternate;
}
@keyframes caseBeam{
	0%{transform:translate(-5%,-3%)}
	100%{transform:translate(5%,3%)}
}

#case-list .case-stage-head{
	position:absolute;top:60px;left:60px;right:60px;
	z-index:9;
	display:flex;align-items:flex-end;gap:24px;
	pointer-events:none;
}
#case-list .case-eyebrow{
	font-family:'Noto Serif JP',serif;
	font-size:14px;font-style:italic;font-weight:400;
	color:var(--paper);opacity:.7;
	margin:0 0 8px;letter-spacing:.04em;
}
#case-list .case-title{
	font-family:'Cinzel',serif;font-weight:400;font-style:italic;
	font-size:clamp(2.6rem,5vw,4.2rem);letter-spacing:.04em;
	color:rgba(240,236,228,.18);line-height:1;margin:0;
	overflow:hidden;
}
#case-list .case-title .ch{
	display:inline-block;transform:translateY(115%);opacity:0;
	transition:transform 1.3s var(--exp),opacity 1.3s var(--exp);
}
#case-list.is-in .case-title .ch{transform:translateY(0);opacity:1}

#case-list .case-frame{
	position:relative;
	width:100%;
	overflow:hidden;
	z-index:5;
	padding:0;
}
#case-list .case-track{
	display:flex;
	align-items:center;
	gap:80px;
	padding:0 10vw;
	will-change:transform;
}
#case-list .case-item{
	flex:0 0 78vw;
	max-width:1280px;
	display:grid;
	grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr);
	gap:60px;
	align-items:center;
	transform:scale(.88);
	opacity:.45;
	transition:transform .8s var(--exp), opacity .8s var(--exp), filter .8s var(--exp);
	filter:saturate(.5) brightness(.85);
}
#case-list .case-item.is-active{
	transform:scale(1);
	opacity:1;
	filter:saturate(1) brightness(1);
}
#case-list .case-link{
	display:contents;
	color:inherit;
	text-decoration:none;
}
#case-list .case-thumb{
	position:relative;
	width:100%;
	aspect-ratio:3/2;
	background-size:cover;
	background-position:center;
	background-color:#1f2128;
}
#case-list .case-corner{
	position:absolute;
	width:32px;height:32px;
	z-index:2;
	opacity:0;
	transition:opacity .8s var(--exp);
}
#case-list .case-item.is-active .case-corner{opacity:.85}
#case-list .case-corner-tl{top:-1px;left:-1px;border-top:1px solid var(--gd);border-left:1px solid var(--gd)}
#case-list .case-corner-br{bottom:-1px;right:-1px;border-bottom:1px solid var(--gd);border-right:1px solid var(--gd)}

#case-list .case-meta{
	display:flex;flex-direction:column;
	gap:18px;
	padding-right:20px;
}
#case-list .case-num{
	font-family:'Cinzel',serif;font-style:italic;
	font-size:.85rem;letter-spacing:.42em;
	color:var(--gd);
}
#case-list .case-name{
	font-family:'Shippori Mincho',serif;font-weight:600;
	font-size:clamp(1.6rem,2.4vw,2.6rem);
	line-height:1.4;letter-spacing:.04em;
	color:var(--paper);
	margin:0;
}
#case-list .case-cat-line{
	display:flex;align-items:center;gap:14px;
	font-family:'Cinzel',serif;font-size:.78rem;letter-spacing:.32em;
	color:rgba(240,236,228,.65);
}
#case-list .case-cat{position:relative;padding-right:14px}
#case-list .case-cat::after{
	content:'';position:absolute;right:0;top:50%;
	width:1px;height:10px;background:rgba(240,236,228,.4);
	transform:translateY(-50%);
}
#case-list .case-year{font-family:'Cinzel',serif;color:var(--gd-l)}

#case-list .case-progress{
	position:absolute;
	bottom:60px;left:60px;right:60px;
	height:1px;
	background:rgba(240,236,228,.12);
	z-index:9;
}
#case-list .case-progress-fill{
	display:block;width:100%;height:100%;
	background:linear-gradient(90deg, var(--gd), var(--gd-l));
	transform-origin:left center;
	transform:scaleX(0);
	will-change:transform;
}

#case-list .case-foot{
	position:absolute;
	bottom:80px;left:60px;right:60px;
	display:flex;justify-content:space-between;align-items:flex-end;
	z-index:9;
	pointer-events:none;
}
#case-list .case-counter{
	font-family:'Cinzel',serif;font-style:italic;
	font-size:.8rem;letter-spacing:.32em;
	color:rgba(240,236,228,.55);
}
#case-list .case-more{
	pointer-events:auto;
	display:inline-flex;align-items:center;gap:18px;
	font-family:'Cinzel',serif;font-size:.78rem;font-weight:500;letter-spacing:.32em;
	color:var(--paper);padding:14px 0;border-bottom:1px solid var(--paper);
	text-decoration:none;
	transition:gap .4s,color .3s,border-color .3s,letter-spacing .4s;
}
#case-list .case-more:hover{gap:28px;color:var(--gd-l);border-color:var(--gd-l);letter-spacing:.36em}
#case-list .case-more .arrow{position:relative;width:24px;height:1.5px;background:currentColor}
#case-list .case-more .arrow::after{
	content:'';position:absolute;right:0;top:50%;
	width:9px;height:9px;
	border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
	transform:translateY(-50%) rotate(45deg);
}
#case-list .case-empty{padding:80px 60px;color:rgba(240,236,228,.55);font-style:italic;text-align:center}

@media (max-width:1023px){
	#case-list{padding:60px 0 80px}
	#case-list .case-stage{height:auto;min-height:0;display:block;padding:80px 24px 40px}
	#case-list .case-vignette,
	#case-list .case-beam{display:none}
	#case-list .case-stage-head{position:static;padding:0;margin-bottom:32px;display:block}
	#case-list .case-frame{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0}
	#case-list .case-frame::-webkit-scrollbar{display:none}
	#case-list .case-track{
		gap:24px;padding:0 24px;
		transform:none !important;
	}
	#case-list .case-item{
		flex:0 0 80vw;
		grid-template-columns:1fr;
		gap:20px;
		transform:none;
		opacity:1;
		filter:none;
		scroll-snap-align:center;
	}
	#case-list .case-corner{opacity:.85}
	#case-list .case-meta{padding:0}
	#case-list .case-progress,
	#case-list .case-counter{display:none}
	#case-list .case-foot{position:static;padding:24px 0 0;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){
	#case-list .case-stage{height:auto;min-height:0;display:block;padding:80px 24px 40px}
	#case-list .case-stage-head{position:static;padding:0;margin-bottom:32px;display:block}
	#case-list .case-frame{overflow:auto}
	#case-list .case-track{transform:none !important;gap:24px;padding:0;flex-wrap:wrap;justify-content:center}
	#case-list .case-item{flex:0 0 90%;transform:none;opacity:1;filter:none}
	#case-list .case-progress{display:none}
	#case-list .case-foot{position:static;padding:24px 0 0;justify-content:flex-end}
	#case-list .case-beam{animation:none}
}


/* ============================================================
   5) NEWS — Spotlight Theater
   ----------------------------------------------------------
   - 暗闇の中、ホバー対象だけスポットライトで浮かび上がる
   - 兄弟は :has() でさらに暗くフェード
============================================================ */
#news-list{
	--gd:#b89968;
	--gd-l:#f0d9a8;
	--paper:#f0ece4;
	--ease:cubic-bezier(.22,.61,.36,1);
	position:relative;
	background:#0a0b10;
	color:var(--paper);
	padding:140px 0;
	overflow:hidden;
	font-family:'Noto Serif JP',serif;
}
#news-list .news-glow{
	position:absolute;inset:0;
	background:
		radial-gradient(ellipse 60% 40% at 80% 20%, rgba(184,153,104,.08), transparent 60%),
		radial-gradient(ellipse 50% 30% at 20% 80%, rgba(184,153,104,.06), transparent 60%);
	pointer-events:none;
	z-index:1;
}
#news-list .news-inner{
	position:relative;z-index:5;
	max-width:1320px;margin:0 auto;
	padding:0 60px;
	display:grid;
	grid-template-columns:280px 1fr;
	gap:80px;
	align-items:start;
}
#news-list .news-eyebrow{
	font-size:14px;font-style:italic;font-weight:400;
	color:rgba(240,236,228,.7);
	margin:0 0 8px;letter-spacing:.04em;
}
#news-list .news-title{
	font-family:'Cinzel',serif;font-weight:400;font-style:italic;
	font-size:clamp(3.6rem,7vw,5.6rem);letter-spacing:.04em;
	color:rgba(240,236,228,.18);line-height:1;margin:0;
	overflow:hidden;
}
#news-list .news-title .ch{
	display:inline-block;transform:translateY(115%);opacity:0;
	transition:transform 1.3s var(--ease),opacity 1.3s var(--ease);
}
#news-list.is-in .news-title .ch{transform:translateY(0);opacity:1}

#news-list .news-items{
	list-style:none;margin:0;padding:0;
}
#news-list .news-item{
	border-bottom:1px solid rgba(240,236,228,.08);
}
#news-list .news-item:first-child{
	border-top:1px solid rgba(240,236,228,.08);
}
#news-list .news-link{
	position:relative;
	display:grid;
	grid-template-columns:120px 130px 1fr 24px;
	align-items:center;gap:24px;
	padding:24px 24px;
	color:var(--paper);text-decoration:none;
	opacity:.42;
	transition:opacity .55s var(--ease), padding-left .55s var(--ease), color .4s;
	overflow:hidden;
}
#news-list .news-spot{
	position:absolute;inset:0;
	background:radial-gradient(ellipse 60% 110% at 30% 50%, rgba(240,217,168,.18), transparent 70%);
	opacity:0;
	transition:opacity .55s var(--ease);
	pointer-events:none;
	z-index:0;
}
#news-list .news-link > *:not(.news-spot){position:relative;z-index:1}
#news-list .news-link:hover,
#news-list .news-link:focus-visible{
	opacity:1;
	padding-left:36px;
	color:var(--gd-l);
}
#news-list .news-link:hover .news-spot,
#news-list .news-link:focus-visible .news-spot{opacity:1}
#news-list .news-items:has(.news-link:hover) .news-link:not(:hover),
#news-list .news-items:has(.news-link:focus-visible) .news-link:not(:focus-visible){
	opacity:.16;
}

#news-list .news-date{
	font-family:'Cinzel',serif;font-size:.86rem;letter-spacing:.06em;
	color:inherit;
}
#news-list .news-cat{
	display:inline-block;
	font-size:.7rem;letter-spacing:.16em;
	background:rgba(240,236,228,.12);
	border:1px solid rgba(240,236,228,.25);
	color:var(--paper);
	padding:4px 12px;text-align:center;width:fit-content;
	transition:background .4s, border-color .4s;
}
#news-list .news-link:hover .news-cat,
#news-list .news-link:focus-visible .news-cat{
	background:rgba(240,217,168,.15);
	border-color:rgba(240,217,168,.5);
}
#news-list .news-name{
	font-family:'Noto Serif JP',serif;
	font-size:1rem;line-height:1.6;
	color:inherit;
	display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
	overflow:hidden;
}
#news-list .news-arrow{
	width:14px;height:14px;
	border-top:1px solid currentColor;border-right:1px solid currentColor;
	transform:rotate(45deg);
	transition:transform .55s var(--ease);
}
#news-list .news-link:hover .news-arrow,
#news-list .news-link:focus-visible .news-arrow{transform:rotate(45deg) translate(4px,-4px)}

#news-list .news-foot{display:flex;justify-content:flex-end;margin-top:50px}
#news-list .news-more{
	display:inline-flex;align-items:center;gap:18px;
	font-family:'Cinzel',serif;font-size:.78rem;font-weight:500;letter-spacing:.32em;
	color:var(--paper);padding:14px 0;border-bottom:1px solid var(--paper);
	text-decoration:none;
	transition:gap .4s,color .4s,border-color .4s,letter-spacing .4s;
}
#news-list .news-more:hover{gap:28px;color:var(--gd-l);border-color:var(--gd-l);letter-spacing:.36em}
#news-list .news-more .arrow{position:relative;width:24px;height:1.5px;background:currentColor}
#news-list .news-more .arrow::after{
	content:'';position:absolute;right:0;top:50%;
	width:9px;height:9px;
	border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
	transform:translateY(-50%) rotate(45deg);
}
#news-list .news-empty{padding:0;color:rgba(240,236,228,.55);font-style:italic}

@media (max-width:1023px){
	#news-list{padding:90px 0}
	#news-list .news-inner{grid-template-columns:1fr;padding:0 24px;gap:40px}
	#news-list .news-link{
		grid-template-columns:100px 100px 1fr 18px;
		gap:14px;padding:18px 12px;
	}
	#news-list .news-link:hover,
	#news-list .news-link:focus-visible{padding-left:24px}
	#news-list .news-name{font-size:.9rem}
}
@media (max-width:640px){
	#news-list .news-link{
		grid-template-columns:90px 1fr;
		grid-template-rows:auto auto;
		gap:6px 14px;padding:18px 12px;
	}
	#news-list .news-cat{grid-row:1;grid-column:2;justify-self:start}
	#news-list .news-name{grid-row:2;grid-column:1/3}
	#news-list .news-arrow{display:none}
}


/* ============================================================
   6) JOURNAL — Paper Stack on a Desk
   ----------------------------------------------------------
   - 3枚カードがオーバーラップ、中央が最前面
   - ホバーでカードがふわっと持ち上がる
   - サムネは 1800x1200 (3:2) → カード内 aspect 3/2
============================================================ */
#journal-list{
	--gd:#b89968;
	--dk:#1a1a1a;
	--ease:cubic-bezier(.22,.61,.36,1);
	--exp:cubic-bezier(.16,1,.3,1);
	font-family:'Noto Serif JP',serif;
	color:var(--dk);
	background:#fff url('assets/images/bg-paper-texture.png') repeat-y center top;
	background-size:100% auto;
	padding:120px 0 140px;
	position:relative;overflow:hidden;
}
#journal-list .journal-head{
	padding:0 60px;margin-bottom:60px;
	max-width:1320px;margin-left:auto;margin-right:auto;
}
#journal-list .journal-eyebrow{
	font-size:14px;font-style:italic;font-weight:400;
	color:var(--dk);
	margin:0 0 8px;letter-spacing:.04em;
}
#journal-list .journal-title{
	font-family:'Cinzel',serif;font-weight:400;font-style:italic;
	font-size:clamp(3.6rem,7vw,5.6rem);letter-spacing:.04em;
	color:rgba(53,59,75,.18);line-height:1;margin:0;
	overflow:hidden;
}
#journal-list .journal-title .ch{
	display:inline-block;transform:translateY(115%);opacity:0;
	transition:transform 1.3s var(--exp),opacity 1.3s var(--exp);
}
#journal-list.is-in .journal-title .ch{transform:translateY(0);opacity:1}

#journal-list .journal-stack{
	max-width:1320px;margin:0 auto;
	padding:60px 24px 40px;
	display:flex;justify-content:center;align-items:center;
	perspective:1600px;
	min-height:480px;
}
#journal-list .journal-card{
	position:relative;
	flex:0 0 320px;
	margin:0 -36px;
	text-decoration:none;color:inherit;
	transform-origin:center center;
	transition:
		transform .7s var(--exp),
		filter .7s var(--exp),
		z-index 0s linear .35s;
	will-change:transform, filter;
}
#journal-list .journal-card:hover,
#journal-list .journal-card:focus-visible{
	transition:
		transform .7s var(--exp),
		filter .7s var(--exp),
		z-index 0s linear 0s;
	z-index:20 !important;
}

/* 3カードの初期回転・位置 */
#journal-list .journal-pos-l{
	transform:rotate(-5deg) translate(0, 16px);
	z-index:1;
	filter:saturate(.85);
}
#journal-list .journal-pos-c{
	transform:rotate(0deg) translate(0, -8px);
	z-index:5;
}
#journal-list .journal-pos-r{
	transform:rotate(5deg) translate(0, 16px);
	z-index:1;
	filter:saturate(.85);
}

/* ホバー時：そのカードだけ前へ持ち上げる */
#journal-list .journal-card:hover,
#journal-list .journal-card:focus-visible{
	transform:rotate(0deg) translate(0, -36px) scale(1.04);
	filter:saturate(1) brightness(1.02);
}

/* 紙のフレーム（写真の周りに白い余白） */
#journal-list .journal-paper{
	background:#fff;
	padding:14px 14px 24px;
	box-shadow:
		0 22px 50px rgba(0,0,0,.18),
		0 6px 18px rgba(0,0,0,.10);
	transition:box-shadow .7s var(--exp);
}
#journal-list .journal-card:hover .journal-paper,
#journal-list .journal-card:focus-visible .journal-paper{
	box-shadow:
		0 40px 80px rgba(0,0,0,.28),
		0 12px 28px rgba(0,0,0,.14);
}
#journal-list .journal-thumb{
	width:100%;
	aspect-ratio:3/2;
	background-size:cover;background-position:center;
	background-color:#1a1a1a;
}
#journal-list .journal-meta{
	display:flex;align-items:center;gap:10px;
	margin:14px 4px 8px;
}
#journal-list .journal-date{
	font-family:'Cinzel',serif;font-size:.78rem;letter-spacing:.04em;color:var(--dk);
}
#journal-list .journal-cat{
	display:inline-block;
	font-size:.66rem;letter-spacing:.16em;
	background:rgba(0,0,0,.85);color:#fff;
	padding:3px 10px;
}
#journal-list .journal-name{
	font-family:'Noto Serif JP',serif;
	font-size:.92rem;font-weight:400;line-height:1.7;
	color:var(--dk);margin:0 4px;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
	overflow:hidden;
}

#journal-list .journal-foot{
	max-width:1320px;margin:30px auto 0;padding:0 60px;
	display:flex;justify-content:flex-end;
}
#journal-list .journal-more{
	display:inline-flex;align-items:center;gap:18px;
	font-family:'Cinzel',serif;font-size:.78rem;font-weight:500;letter-spacing:.32em;
	color:var(--dk);padding:14px 0;border-bottom:1px solid var(--dk);
	text-decoration:none;
	transition:gap .4s,color .3s,border-color .3s,letter-spacing .4s;
}
#journal-list .journal-more:hover{gap:28px;color:var(--gd);border-color:var(--gd);letter-spacing:.36em}
#journal-list .journal-more .arrow{position:relative;width:24px;height:1.5px;background:currentColor}
#journal-list .journal-more .arrow::after{
	content:'';position:absolute;right:0;top:50%;
	width:9px;height:9px;
	border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
	transform:translateY(-50%) rotate(45deg);
}
#journal-list .journal-empty{padding:30px 60px;color:#666;font-style:italic;text-align:center}

@media (max-width:1023px){
	#journal-list{padding:80px 0 100px}
	#journal-list .journal-head,
	#journal-list .journal-foot{padding-left:24px;padding-right:24px}
	#journal-list .journal-stack{
		padding:30px 24px 20px;
		flex-direction:column;
		gap:32px;
		min-height:0;
	}
	#journal-list .journal-card{
		flex:0 0 auto;
		width:100%;max-width:420px;
		margin:0;
		transform:none !important;
		filter:none !important;
		z-index:auto !important;
	}
	#journal-list .journal-card:hover .journal-paper,
	#journal-list .journal-card:focus-visible .journal-paper{
		box-shadow:0 22px 50px rgba(0,0,0,.18);
	}
}
@media (prefers-reduced-motion:reduce){
	#journal-list .journal-card{transform:none !important;filter:none !important}
	#journal-list .journal-card:hover{transform:none !important}
}


/* ============================================================
   OP / Opening Animation Overlay
   ----------------------------------------------------------
   3層構造（前面から順に）:
     z:100001  #mic-white  白オーバーレイ（FVへの繋ぎフェード用）
     z:99999   #mic-op     OPコンテンツ（タグライン + ロゴ + ジオメトリ）
     z:99998   #mic-water  WebGL水面キャンバス
   - display:none / remove() は使わず opacity のみで制御
   - prefers-reduced-motion は要素ごと非表示
============================================================ */
#mic-op{
	position:fixed;inset:0;z-index:99999;
	display:flex;align-items:center;justify-content:center;
	overflow:hidden;
	opacity:1;
	pointer-events:none;
	will-change:opacity;
}
#mic-water{
	position:fixed;inset:0;z-index:99998;
	width:100%;height:100%;
	pointer-events:none;
	opacity:1;
	will-change:opacity;
}
#mic-white{
	position:fixed;inset:0;z-index:100001;
	background:#f8f9fb;
	opacity:0;
	pointer-events:none;
	will-change:opacity;
}

/* OP内部要素 */
#mic-grid{
	position:absolute;inset:0;
	opacity:0;
	background-image:
		linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
	background-size:72px 72px;
	pointer-events:none;
}
#mic-geo{
	position:absolute;inset:0;
	width:100%;height:100%;
	pointer-events:none;
	overflow:visible;
	z-index:2;
}
.mg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mg-d{stroke-dasharray:var(--l);stroke-dashoffset:var(--l)}

.mic-c{
	position:relative;z-index:10;
	text-align:center;
	padding:0 20px;
}
.mic-tag{
	font-family:'Cinzel',serif;
	font-weight:400;
	font-size:clamp(1.4rem, 4.5vw, 2.9rem);
	letter-spacing:clamp(.06em, .4vw, .16em);
	line-height:1.1;
	white-space:nowrap;
	color:rgba(240,236,228,.9);
	opacity:0;
	filter:blur(10px);
	transform:translateY(6px) scale(1.02) translateZ(0);
	will-change:transform, opacity, filter;
}
.mic-dot{color:#c49955}
.mic-logo{
	font-family:'Cinzel',serif;
	font-weight:300;
	font-size:clamp(.87rem, 2vw, 1.2rem);
	letter-spacing:clamp(.3em, .8vw, .6em);
	color:rgba(240,236,228,.85); /* WCAG AA：コントラスト確保のため alpha 0.45→0.85 */
	opacity:0;
	filter:blur(8px);
	transform:translateY(5px) translateZ(0);
	will-change:transform, opacity, filter;
	margin-top:44px;
}
.mic-logo-line{
	width:48px;height:1px;
	background:rgba(255,255,255,.1);
	margin:14px auto 0;
	opacity:0;
	transform:translateZ(0);
	will-change:opacity;
}

@media (max-width:960px){
	.mic-tag{
		font-size:clamp(.9rem, 4.5vw, 1.4rem);
		white-space:nowrap;
	}
}
@media (prefers-reduced-motion:reduce){
	#mic-op,
	#mic-water,
	#mic-white{display:none !important}
}


/* ============================================================
   WordPress 管理バー対策
============================================================ */
.admin-bar #mic-fv-dip{height:calc(100vh - 32px)}
@media screen and (max-width:782px){
	.admin-bar #mic-fv-dip{height:calc(100vh - 46px)}
}

/* ============================================================
   SERVICE PAGE — page-service.php 用スタイル
   ----------------------------------------------------------
   既存 style.css の末尾に追記してください。
   #sv-h（Atelier Index）は TOP と共有のため、既存スタイルをそのまま流用しています。
============================================================ */

/* page-service 共通：CSS変数を body スコープで定義（他ページに漏らさない） */
body.page-service{
	--svc-white:#fff;
	--svc-off:#fafaf8;
	--svc-line-d:#d4cfc8;
	--svc-ink:#1a1a1a;
	--svc-navy:#363B4A;
	--svc-mgray:#666;
	--svc-gold:#c49955;
	--svc-gold-l:#ddb276;
	--svc-gold-d:#a17f43;
	--svc-cin:'Cinzel',serif;
	--svc-noto:'Noto Serif JP',serif;
	--svc-expo:cubic-bezier(.16,1,.3,1);
	--svc-ease:cubic-bezier(.22,.61,.36,1);
}

/* [data-r] スクロールリビール共通 */
body.page-service [data-r]{opacity:0;transition:opacity 1s var(--svc-expo),transform 1s var(--svc-expo)}
body.page-service [data-r="up"]{transform:translateY(44px)}
body.page-service [data-r].on{opacity:1;transform:none}
body.page-service [data-rd="1"]{transition-delay:.12s}
body.page-service [data-rd="2"]{transition-delay:.24s}
body.page-service [data-rd="3"]{transition-delay:.36s}
body.page-service [data-rd="4"]{transition-delay:.48s}


/* ============================================================
   Service OP — 白背景 WebGL 水面 + GSAP テキスト
============================================================ */
#svc-white{position:fixed;inset:0;background:#fff;opacity:0;z-index:99998;pointer-events:none}
#svc-water{position:fixed;inset:0;width:100%;height:100%;z-index:99997;display:block}
#svc-op{position:fixed;inset:0;z-index:99999;pointer-events:none;background:transparent;overflow:hidden;font-family:'Cinzel',serif}
#svc-op #svc-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(54,59,74,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(54,59,74,.02) 1px,transparent 1px);background-size:80px 80px;opacity:0;pointer-events:none}
#svc-op #svc-geo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#svc-op #svc-geo .sg-d{fill:none;stroke-linecap:round;stroke-dasharray:var(--l);stroke-dashoffset:var(--l)}
#svc-op #svc-geo .sg{fill:none;stroke-linecap:round}
#svc-op .svc-c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column}
#svc-op .svc-tag{font-family:'Cinzel',serif;font-weight:400;font-style:italic;font-size:clamp(2.2rem,5vw,4rem);letter-spacing:.05em;color:#363B4A;opacity:0;filter:blur(10px);transform:translateY(6px) scale(1.02);text-shadow:0 0 30px rgba(248,249,251,0)}
#svc-op .svc-tag .svc-dot{color:#c49955}

@media (prefers-reduced-motion:reduce){
	#svc-op,#svc-water,#svc-white{display:none !important}
}


/* ============================================================
   Section 1: Service Hero
============================================================ */
.sv-hero{position:relative;background:var(--svc-navy);padding:100px 60px 80px;overflow:hidden;font-family:var(--svc-noto)}
.sv-hero-ghost{position:absolute;left:50%;bottom:18%;transform:translateX(-50%);font-family:var(--svc-cin);font-size:clamp(6rem,18vw,14rem);font-weight:300;color:rgba(255,255,255,.02);letter-spacing:.15em;white-space:nowrap;pointer-events:none}
.sv-hero-tex{position:absolute;inset:0;background:repeating-linear-gradient(-55deg,transparent,transparent 80px,rgba(255,255,255,.01) 80px,rgba(255,255,255,.01) 81px);pointer-events:none}
.sv-hero-kw{position:absolute;font-family:var(--svc-cin);font-weight:300;color:rgba(196,153,85,.05);pointer-events:none;white-space:nowrap;letter-spacing:.2em}
.sv-hero-kw:nth-of-type(1){top:18%;left:8%;font-size:1.2rem;transform:rotate(-8deg)}
.sv-hero-kw:nth-of-type(2){top:55%;right:6%;font-size:1rem;transform:rotate(5deg)}
.sv-hero-kw:nth-of-type(3){bottom:25%;left:14%;font-size:.9rem;transform:rotate(-3deg)}
.sv-hero-inner{position:relative;z-index:2;max-width:800px}
.sv-hero-ey{display:inline-flex;align-items:center;gap:14px;margin-bottom:16px}
.sv-hero-ey-line{width:28px;height:1px;background:var(--svc-gold)}
.sv-hero-ey-txt{font-family:var(--svc-cin);font-size:.56rem;letter-spacing:.4em;color:var(--svc-gold-l);font-weight:300}
.sv-hero-h{font-family:var(--svc-cin);font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:300;color:#fff;letter-spacing:.08em;line-height:1.2;margin-bottom:10px}
.sv-hero-sub{font-size:.86rem;font-weight:200;color:rgba(255,255,255,.4);letter-spacing:.12em}
@media(max-width:960px){
	.sv-hero{padding:72px 24px 60px}
	.sv-hero-kw{display:none}
}


/* ============================================================
   Section 2: Intro (Navy → White Diagonal Cut)
============================================================ */
.sv-intro{position:relative;background:var(--svc-navy);font-family:var(--svc-noto);overflow:hidden}
.sv-intro-cut{position:relative;height:64px}
.sv-intro-cut::after{content:'';position:absolute;inset:0;background:var(--svc-white);clip-path:polygon(0 100%,100% 0,100% 100%)}
.sv-intro-cut::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-55deg,transparent,transparent 80px,rgba(255,255,255,.01) 80px,rgba(255,255,255,.01) 81px);pointer-events:none}
.sv-intro-content{position:relative;padding:48px 60px 72px;background:var(--svc-white);text-align:center;overflow:hidden}
.sv-intro-content::before,.sv-intro-content::after{content:'';position:absolute;top:0;width:1px;height:100%;background:linear-gradient(transparent,var(--svc-line-d) 20%,var(--svc-line-d) 80%,transparent);pointer-events:none}
.sv-intro-content::before{left:40px}
.sv-intro-content::after{right:40px}
.sv-intro-inner{max-width:720px;margin:0 auto;position:relative;z-index:1}
.sv-intro-lead{font-size:clamp(1.05rem,2vw,1.4rem);font-weight:400;color:var(--svc-ink);line-height:2;letter-spacing:.06em;margin-bottom:24px}
.sv-intro-lead strong{color:var(--svc-navy);font-weight:600}
.sv-intro-body{font-size:.96rem;font-weight:300;line-height:2.2;color:var(--svc-mgray);letter-spacing:.03em}
.sv-intro-body+.sv-intro-body{margin-top:8px}
.sv-intro-orn{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:32px}
.sv-intro-orn-l{width:48px;height:1px;background:linear-gradient(90deg,transparent,var(--svc-gold))}
.sv-intro-orn-l:last-child{background:linear-gradient(90deg,var(--svc-gold),transparent)}
.sv-intro-orn-d{width:5px;height:5px;background:var(--svc-gold);transform:rotate(45deg);opacity:.4}
@media(max-width:960px){
	.sv-intro-cut{height:36px}
	.sv-intro-content{padding:32px 24px 48px}
	.sv-intro-content::before,.sv-intro-content::after{display:none}
}


/* ============================================================
   Section 4: FAQ
   ※ Section 3 (#sv-h Atelier Index) は既存スタイルを再利用するため追記不要
============================================================ */
.sv-faq{position:relative;padding:80px 60px 88px;background:var(--svc-navy);overflow:hidden;font-family:var(--svc-noto)}
.sv-faq::before{content:'FAQ';position:absolute;right:-2%;top:50%;transform:translateY(-50%);font-family:var(--svc-cin);font-size:clamp(8rem,22vw,16rem);font-weight:300;color:rgba(255,255,255,.015);letter-spacing:.1em;pointer-events:none}
.sv-faq::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-55deg,transparent,transparent 80px,rgba(255,255,255,.008) 80px,rgba(255,255,255,.008) 81px);pointer-events:none}
.sv-faq-header{text-align:center;margin-bottom:48px;position:relative;z-index:1}
.sv-faq-ey{display:inline-flex;align-items:center;gap:14px;margin-bottom:12px}
.sv-faq-ey-line{width:28px;height:1px;background:var(--svc-gold)}
.sv-faq-ey-txt{font-family:var(--svc-cin);font-size:.56rem;letter-spacing:.4em;color:var(--svc-gold-l);font-weight:300}
.sv-faq-h{font-size:clamp(1rem,1.8vw,1.25rem);font-weight:600;color:var(--svc-white);letter-spacing:.08em;margin-bottom:4px}
.sv-faq-en{font-family:var(--svc-cin);font-size:.5rem;letter-spacing:.3em;color:rgba(255,255,255,.25);font-weight:300}
.sv-faq-list{max-width:880px;margin:0 auto;position:relative;z-index:1}
.sv-faq-item{border-bottom:1px solid rgba(255,255,255,.06);position:relative}
.sv-faq-item::after{content:'';position:absolute;bottom:-1px;left:0;width:0;height:1px;background:linear-gradient(90deg,var(--svc-gold-d),var(--svc-gold-l),transparent);transition:width .6s var(--svc-expo)}
.sv-faq-item:hover::after{width:100%}
.sv-faq-q{display:flex;align-items:flex-start;gap:16px;padding:24px 48px 24px 0;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;list-style:none}
.sv-faq-q::-webkit-details-marker{display:none}
.sv-faq-q-mark{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-family:var(--svc-cin);font-size:.7rem;font-weight:600;color:var(--svc-gold);border:1px solid rgba(196,153,85,.25);border-radius:2px;margin-top:2px;transition:background .3s,border-color .3s,color .3s}
.sv-faq-item[open] .sv-faq-q-mark{background:var(--svc-gold);color:var(--svc-navy);border-color:var(--svc-gold)}
.sv-faq-q-txt{font-size:.82rem;font-weight:400;color:rgba(255,255,255,.75);line-height:1.8;letter-spacing:.03em;transition:color .3s}
.sv-faq-item:hover .sv-faq-q-txt{color:var(--svc-white)}
.sv-faq-toggle{position:absolute;right:0;top:28px;width:20px;height:20px;pointer-events:none}
.sv-faq-toggle::before,.sv-faq-toggle::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:1px;background:rgba(255,255,255,.3);transform:translate(-50%,-50%);transition:transform .4s var(--svc-expo),opacity .3s}
.sv-faq-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}
.sv-faq-item[open] .sv-faq-toggle::after{transform:translate(-50%,-50%) rotate(0);opacity:0}
.sv-faq-item[open] .sv-faq-toggle::before{background:var(--svc-gold)}
.sv-faq-a{padding:0 0 28px 44px;position:relative}
.sv-faq-a-mark{position:absolute;left:0;top:2px;font-family:var(--svc-cin);font-size:.6rem;font-weight:400;color:var(--svc-gold-l);letter-spacing:.05em}
.sv-faq-a-body{font-size:.78rem;font-weight:300;line-height:2.1;color:rgba(255,255,255,.45);letter-spacing:.03em}
.sv-faq-a-body strong{color:rgba(255,255,255,.7);font-weight:500}
@media(min-width:961px){
	.sv-faq-ey-txt{font-size:1.06rem}
	.sv-faq-h{font-size:clamp(1.5rem,2.4vw,1.75rem)}
	.sv-faq-en{font-size:1rem}
	.sv-faq-q-mark{font-size:1.2rem;width:40px;height:40px;border-radius:3px}
	.sv-faq-q-txt{font-size:1.32rem;line-height:1.7}
	.sv-faq-a-mark{font-size:1.1rem;top:0}
	.sv-faq-a-body{font-size:1.28rem;line-height:1.95}
	.sv-faq-q{gap:20px;padding:28px 56px 28px 0}
	.sv-faq-a{padding-left:60px;padding-bottom:32px}
	.sv-faq-toggle{top:34px;width:24px;height:24px}
	.sv-faq-toggle::before,.sv-faq-toggle::after{width:18px}
}
@media(max-width:960px){
	.sv-faq{padding:56px 24px 64px}
	.sv-faq-q{padding:20px 40px 20px 0}
	.sv-faq-a{padding:0 0 24px 44px}
}


/* ============================================================
   reduced-motion 全体ガード
============================================================ */
@media(prefers-reduced-motion:reduce){
	body.page-service [data-r]{opacity:1 !important;transform:none !important}
}


/* ============================================================
   HEADER / FOOTER / FULLSCREEN MENU — clean rebuild
   ----------------------------------------------------------
   添付ビジュアルの完全再現版
   既存 style.css の 旧「HEADER / FOOTER / FULLSCREEN MENU」
   セクションと「HEADER NAV & CTA v2」セクションを丸ごと
   このファイルの内容に差し替えてください（同名クラス）。
============================================================ */

/* ============================================================
   共通変数
============================================================ */
.mc-header,
.mc-menu,
.mc-footer{
	--mc-nv:#363B4A;
	--mc-nv-d:#2a2f3c;
	--mc-ink:#1a1a1a;
	--mc-paper:#f0ece4;
	--mc-cin:'Cinzel',serif;
	--mc-noto:'Noto Serif JP',serif;
	--mc-exp:cubic-bezier(.16,1,.3,1);
	--mc-ease:cubic-bezier(.22,.61,.36,1);
}


/* ============================================================
   1) GLOBAL HEADER — 白背景・固定
============================================================ */
.mc-header{
	position:fixed;
	top:0;left:0;right:0;
	z-index:9000;
	background:#fff;
	color:var(--mc-ink);
	font-family:var(--mc-noto);
	border-bottom:1px solid transparent;
	transition:border-color .4s var(--mc-exp),box-shadow .4s var(--mc-exp);
}
.mc-header.is-scrolled{
	border-bottom-color:rgba(26,26,26,.08);
	box-shadow:0 2px 16px rgba(26,26,26,.04);
}

.mc-header-inner{
	display:flex;
	align-items:center;
	gap:40px;
	max-width:1760px;
	margin:0 auto;
	padding:22px 56px;
	transition:padding .4s var(--mc-exp);
}
.mc-header.is-scrolled .mc-header-inner{padding:14px 56px}

/* ロゴ */
.mc-logo{
	display:inline-flex;
	align-items:center;
	flex-shrink:0;
	text-decoration:none;
	color:inherit;
	transition:opacity .35s;
}
.mc-logo:hover,
.mc-logo:focus-visible{opacity:.7}
.mc-logo img{
	display:block;
	height:40px;
	width:auto;
	object-fit:contain;
}

/* ナビゲーション（日本語） */
.mc-nav{margin-left:auto}
.mc-nav-list{
	list-style:none;
	margin:0;padding:0;
	display:flex;
	gap:36px;
	align-items:center;
}
.mc-nav-list a{
	position:relative;
	display:inline-block;
	padding:8px 2px;
	color:var(--mc-ink);
	text-decoration:none;
	font-size:.95rem;
	font-weight:400;
	letter-spacing:.06em;
	line-height:1;
	transition:color .35s;
}
.mc-nav-list a::after{
	content:'';
	position:absolute;
	left:0;right:0;bottom:0;
	height:1px;
	background:var(--mc-ink);
	transform:scaleX(0);
	transform-origin:center;
	transition:transform .45s var(--mc-exp);
}
.mc-nav-list a:hover::after,
.mc-nav-list a:focus-visible::after,
.mc-nav-list .current-menu-item a::after,
.mc-nav-list .current_page_item a::after{transform:scaleX(1)}
.mc-nav-list a:hover,
.mc-nav-list a:focus-visible{color:#000}

/* CTA ボタン */
.mc-cta{
	display:flex;
	align-items:center;
	gap:0;
	flex-shrink:0;
}
.mc-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:14px 22px;
	min-width:140px;
	height:50px;
	font-family:var(--mc-noto);
	font-size:.86rem;
	font-weight:400;
	letter-spacing:.06em;
	white-space:nowrap;
	text-decoration:none;
	transition:background .35s,color .35s,border-color .35s;
	border:1px solid var(--mc-ink);
}
.mc-btn-outline{
	background:#fff;
	color:var(--mc-ink);
	border-right:none;
}
.mc-btn-outline:hover,
.mc-btn-outline:focus-visible{
	background:var(--mc-ink);
	color:#fff;
}
.mc-btn-solid{
	background:var(--mc-nv);
	color:#fff;
	border-color:var(--mc-nv);
}
.mc-btn-solid:hover,
.mc-btn-solid:focus-visible{
	background:var(--mc-nv-d);
	border-color:var(--mc-nv-d);
}

/* ハンバーガー */
.mc-burger{
	position:relative;
	flex-shrink:0;
	margin-left:24px;
	width:50px;height:50px;
	border:1px solid var(--mc-ink);
	border-radius:50%;
	background:transparent;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	transition:background .35s,border-color .35s;
}
.mc-burger:hover,
.mc-burger:focus-visible{background:rgba(26,26,26,.04)}
.mc-burger-line{
	position:absolute;left:50%;top:50%;
	width:20px;height:1px;
	background:var(--mc-ink);
	transform-origin:center;
	transition:transform .45s var(--mc-exp),background .35s;
}
.mc-burger-line:nth-child(1){transform:translate(-50%,-4px)}
.mc-burger-line:nth-child(2){transform:translate(-50%,4px)}
body.is-menu-open .mc-burger-line:nth-child(1){transform:translate(-50%,0) rotate(45deg)}
body.is-menu-open .mc-burger-line:nth-child(2){transform:translate(-50%,0) rotate(-45deg)}

/* レスポンシブ：1199px 以下でナビ・CTA非表示 */
@media (max-width:1199px){
	.mc-nav,
	.mc-cta{display:none}
	.mc-header-inner{padding:16px 28px;gap:0}
	.mc-header.is-scrolled .mc-header-inner{padding:12px 28px}
	.mc-burger{margin-left:auto}
}
@media (max-width:640px){
	.mc-header-inner{padding:14px 20px}
	.mc-logo img{height:32px}
	.mc-burger{width:44px;height:44px}
}


/* ============================================================
   2) FULLSCREEN MENU
============================================================ */
.mc-menu{
	position:fixed;
	inset:0;
	z-index:8900;
	background:var(--mc-nv);
	color:var(--mc-paper);
	font-family:var(--mc-noto);
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	opacity:0;
	visibility:hidden;
	transform:translateY(-12px);
	transition:opacity .5s var(--mc-exp),transform .5s var(--mc-exp),visibility 0s linear .5s;
}
body.is-menu-open .mc-menu{
	opacity:1;
	visibility:visible;
	transform:none;
	transition:opacity .5s var(--mc-exp),transform .5s var(--mc-exp),visibility 0s linear 0s;
}
body.is-menu-open{overflow:hidden}

.mc-menu-inner{
	max-width:1400px;
	margin:0 auto;
	padding:130px 60px 70px;
}
.mc-menu-grid{
	display:grid;
	grid-template-columns:1fr 1.2fr 2.4fr 1fr 1fr 1fr;
	gap:50px 40px;
	margin-bottom:80px;
}
.mc-menu-col{display:flex;flex-direction:column;gap:18px}

.mc-menu-h{
	display:inline-flex;
	flex-direction:column;
	gap:6px;
	text-decoration:none;
	color:#fff;
	align-self:flex-start;
	transition:color .35s;
}
.mc-menu-h .ja{
	font-size:.78rem;
	font-weight:400;
	letter-spacing:.08em;
	color:rgba(255,255,255,.55);
	transition:color .35s;
}
.mc-menu-h .en{
	font-family:var(--mc-cin);
	font-weight:400;
	font-size:clamp(2rem,3.4vw,2.8rem);
	letter-spacing:.04em;
	line-height:1.1;
	color:#fff;
}
.mc-menu-h:hover,
.mc-menu-h:focus-visible{color:rgba(255,255,255,.7)}
.mc-menu-h:hover .ja,
.mc-menu-h:focus-visible .ja{color:rgba(255,255,255,.8)}

.mc-menu-sub{
	list-style:none;
	margin:0;padding:0;
	display:flex;flex-direction:column;
	gap:10px;
}
.mc-menu-sub a{
	display:inline-block;
	color:rgba(240,236,228,.65);
	text-decoration:none;
	font-size:.86rem;
	letter-spacing:.04em;
	line-height:1.6;
	transition:color .3s,padding-left .35s var(--mc-exp);
}
.mc-menu-sub a:hover,
.mc-menu-sub a:focus-visible{color:#fff;padding-left:6px}

.mc-menu-foot{
	border-top:1px solid rgba(255,255,255,.08);
	padding-top:42px;
	display:flex;
	flex-direction:column;
	gap:34px;
}
.mc-menu-cta{
	display:flex;
	flex-wrap:wrap;
	gap:12px;
}
.mc-menu-cta .mc-btn{
	background:transparent;
	color:#fff;
	border-color:rgba(255,255,255,.6);
}
.mc-menu-cta .mc-btn-outline:hover,
.mc-menu-cta .mc-btn-outline:focus-visible{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.mc-menu-cta .mc-btn-solid{background:#fff;color:var(--mc-nv);border-color:#fff}
.mc-menu-cta .mc-btn-solid:hover,
.mc-menu-cta .mc-btn-solid:focus-visible{background:rgba(255,255,255,.85);color:var(--mc-nv)}
.mc-btn-lg{height:56px;padding:16px 28px;font-size:.92rem;letter-spacing:.08em;min-width:200px}

.mc-menu-info{
	display:flex;
	align-items:center;
	gap:40px;
	flex-wrap:wrap;
}
.mc-menu-tel{
	display:inline-flex;
	align-items:baseline;
	gap:14px;
	color:#fff;
	text-decoration:none;
	transition:opacity .3s;
}
.mc-menu-tel:hover{opacity:.75}
.mc-menu-tel .lab{
	font-family:var(--mc-cin);
	font-size:.74rem;
	letter-spacing:.32em;
	color:rgba(255,255,255,.65);
}
.mc-menu-tel .num{
	font-family:var(--mc-cin);
	font-size:1.4rem;
	letter-spacing:.06em;
}
.mc-menu-sns{
	list-style:none;
	margin:0 0 0 auto;
	padding:0;
	display:flex;
	gap:18px;
}
.mc-menu-sns a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:24px;height:24px;
	color:#fff;
	transition:opacity .3s;
}
.mc-menu-sns a:hover,
.mc-menu-sns a:focus-visible{opacity:.65}
.mc-menu-sns svg{width:22px;height:22px;display:block}

.mc-menu-meta{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:18px;
	flex-wrap:wrap;
	color:rgba(255,255,255,.4);
}
.mc-menu-priv{
	color:inherit;
	font-size:.78rem;
	letter-spacing:.04em;
	text-decoration:none;
	transition:color .3s;
}
.mc-menu-priv:hover,
.mc-menu-priv:focus-visible{color:#fff}
.mc-menu-copy{
	font-family:var(--mc-cin);
	font-size:.74rem;
	letter-spacing:.24em;
	margin:0;
}

@media (max-width:1199px){
	.mc-menu-inner{padding:110px 36px 60px}
	.mc-menu-grid{grid-template-columns:repeat(2,1fr);gap:40px 28px;margin-bottom:60px}
}
@media (max-width:640px){
	.mc-menu-inner{padding:96px 24px 56px}
	.mc-menu-grid{grid-template-columns:1fr;gap:28px;margin-bottom:50px}
	.mc-menu-h .en{font-size:1.9rem}
	.mc-menu-cta{flex-direction:column;align-items:stretch}
	.mc-menu-cta .mc-btn{width:100%;justify-content:center}
	.mc-menu-info{flex-direction:column;align-items:flex-start;gap:20px}
	.mc-menu-sns{margin-left:0}
}


/* ============================================================
   3) GLOBAL FOOTER — ネイビー基調、添付ビジュアル完全再現
============================================================ */
.mc-footer{
	background:var(--mc-nv);
	color:var(--mc-paper);
	font-family:var(--mc-noto);
	padding:100px 0 36px;
}
.mc-foot-inner{
	max-width:1760px;
	margin:0 auto;
	padding:0 56px;
}

/* 上段：6カラムメニュー */
.mc-foot-grid{
	display:grid;
	grid-template-columns:1fr 1.2fr 2.4fr 1fr 1fr 1fr;
	gap:40px;
	margin-bottom:120px;
}
.mc-foot-col{
	display:flex;
	flex-direction:column;
	gap:18px;
}
.mc-foot-h{
	display:inline-flex;
	flex-direction:column;
	gap:6px;
	text-decoration:none;
	color:#fff;
	align-self:flex-start;
	transition:color .35s;
}
.mc-foot-h .ja{
	font-size:.78rem;
	font-weight:400;
	letter-spacing:.08em;
	color:rgba(255,255,255,.55);
	transition:color .35s;
}
.mc-foot-h .en{
	font-family:var(--mc-cin);
	font-weight:400;
	font-style:normal;
	font-size:clamp(1.6rem,2.4vw,2.1rem);
	letter-spacing:.04em;
	line-height:1.1;
	color:#fff;
}
.mc-foot-h:hover,
.mc-foot-h:focus-visible{color:rgba(255,255,255,.75)}
.mc-foot-h:hover .ja,
.mc-foot-h:focus-visible .ja{color:rgba(255,255,255,.85)}

.mc-foot-sub{
	list-style:none;
	margin:0;padding:0;
	display:flex;flex-direction:column;
	gap:8px;
}
.mc-foot-sub a{
	display:inline-block;
	color:rgba(240,236,228,.62);
	text-decoration:none;
	font-size:.82rem;
	letter-spacing:.04em;
	line-height:1.7;
	transition:color .3s,padding-left .35s var(--mc-exp);
}
.mc-foot-sub a:hover,
.mc-foot-sub a:focus-visible{color:#fff;padding-left:4px}

/* 下段：ロゴ・TEL ／ SNS */
.mc-foot-bottom{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:30px;
	flex-wrap:wrap;
	margin-bottom:28px;
}
.mc-foot-bottom-l{
	display:flex;
	flex-direction:column;
	gap:16px;
}
.mc-foot-bottom-r{
	display:flex;
	align-items:flex-end;
	gap:30px;
}

.mc-foot-logo{
	display:inline-flex;
	align-items:center;
	text-decoration:none;
	transition:opacity .3s;
}
.mc-foot-logo:hover,
.mc-foot-logo:focus-visible{opacity:.75}
.mc-foot-logo img{
	display:block;
	height:42px;
	width:auto;
	object-fit:contain;
	/* logo.webp が暗色の場合に白寄りに反転表示 */
	filter:brightness(0) invert(1);
}

.mc-foot-tel{
	display:inline-flex;
	align-items:baseline;
	gap:14px;
	color:#fff;
	text-decoration:none;
	transition:opacity .3s;
}
.mc-foot-tel:hover{opacity:.78}
.mc-foot-tel .lab{
	font-family:var(--mc-cin);
	font-size:.78rem;
	letter-spacing:.28em;
	color:#fff;
}
.mc-foot-tel .num{
	font-family:var(--mc-cin);
	font-size:1.05rem;
	letter-spacing:.06em;
	color:#fff;
}

.mc-foot-sns{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	gap:24px;
	align-items:center;
}
.mc-foot-sns a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:26px;height:26px;
	color:#fff;
	transition:opacity .3s;
}
.mc-foot-sns a:hover,
.mc-foot-sns a:focus-visible{opacity:.65}
.mc-foot-sns svg{width:24px;height:24px;display:block}

/* 最下段：プライバシー ／ コピーライト */
.mc-foot-meta{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:18px;
	flex-wrap:wrap;
	color:rgba(240,236,228,.85); /* WCAG AA：コントラスト確保のため alpha 0.45→0.85 */
	padding-top:20px;
}
.mc-foot-priv{
	color:inherit;
	font-size:.78rem;
	letter-spacing:.04em;
	text-decoration:none;
	transition:color .3s;
}
.mc-foot-priv:hover,
.mc-foot-priv:focus-visible{color:#fff}
.mc-foot-copy{
	font-family:var(--mc-cin);
	font-size:.78rem;
	letter-spacing:.18em;
	margin:0;
}

@media (max-width:1199px){
	.mc-foot-grid{grid-template-columns:1fr 1.2fr 2.4fr 1fr 1fr 1fr;gap:30px}
}
@media (max-width:1023px){
	.mc-footer{padding:72px 0 28px}
	.mc-foot-inner{padding:0 36px}
	.mc-foot-grid{grid-template-columns:repeat(3,1fr);gap:36px 28px;margin-bottom:80px}
	.mc-foot-col-wide{grid-column:span 3}
}
@media (max-width:640px){
	.mc-foot-inner{padding:0 24px}
	.mc-foot-grid{grid-template-columns:repeat(2,1fr);gap:30px 20px}
	.mc-foot-col-wide{grid-column:span 2}
	.mc-foot-bottom{align-items:flex-start;flex-direction:column;gap:24px}
	.mc-foot-bottom-r{width:100%;justify-content:flex-start}
}


/* ============================================================
   4) FRONT-PAGE OP との重なり
============================================================ */
body.home .mc-header{
	opacity:0;
	animation:mcHeaderInTop .8s var(--mc-exp) 3.2s forwards;
}
@keyframes mcHeaderInTop{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
	body.home .mc-header{opacity:1;animation:none}
}
body:not(.home) .mc-header{opacity:1}


/* ============================================================
   5) WordPress 管理バー対策
============================================================ */
body.admin-bar .mc-header{top:32px}
@media screen and (max-width:782px){
	body.admin-bar .mc-header{top:46px}
}


/* ============================================================
   6) reduced-motion
============================================================ */
@media (prefers-reduced-motion:reduce){
	.mc-header,
	.mc-burger,
	.mc-burger-line,
	.mc-menu,
	.mc-footer *{transition-duration:0s !important;animation-duration:0s !important}
	.mc-menu{transform:none}
}
/* ============================================================
   HEADER 微調整パッチ
   ----------------------------------------------------------
   既存 style.css の末尾に追記してください（後勝ち上書き）。
   調整内容：
     1) ロゴサイズ拡大（40px → 60px / SP 44px）
     2) CTA ボタンに角丸（5px）
     3) ヘッダー: 半透明白 + backdrop-filter（FV薄く透ける）
        スクロール下方向 → 上に隠れる
        スクロール上方向 → 上から降りてくる
        下端に白フェード影
============================================================ */


/* ============================================================
   1) ヘッダー本体 — 半透明白 + 表示/非表示挙動（ぼかしなし）
============================================================ */
.mc-header{
	background:rgba(255,255,255,.66);
	border-bottom:none;
	box-shadow:none;
	transition:transform .55s var(--mc-exp),background-color .35s var(--mc-exp);
	will-change:transform;
}

/* スクロール中は少し不透明に */
.mc-header.is-scrolled{
	background:rgba(255,255,255,.85);
	border-bottom:none;
	box-shadow:none;
}

/* 下方向スクロール時：上に隠れる */
.mc-header.is-hidden{
	transform:translateY(-100%);
}

/* メニュー開いてる時はヘッダー隠さない */
body.is-menu-open .mc-header{transform:none !important}


/* ============================================================
   2) ロゴサイズ拡大
============================================================ */
.mc-logo img{
	height:60px;
	width:auto;
}
.mc-header.is-scrolled .mc-logo img{
	height:52px;
	transition:height .4s var(--mc-exp);
}
.mc-logo img{
	transition:height .4s var(--mc-exp);
}

@media (max-width:1199px){
	.mc-logo img{height:52px}
	.mc-header.is-scrolled .mc-logo img{height:46px}
}
@media (max-width:640px){
	.mc-logo img{height:44px}
	.mc-header.is-scrolled .mc-logo img{height:40px}
}

/* ロゴが大きくなった分、ヘッダー高さ調整 */
.mc-header-inner{
	padding:18px 56px;
}
.mc-header.is-scrolled .mc-header-inner{
	padding:12px 56px;
}
@media (max-width:1199px){
	.mc-header-inner{padding:14px 28px}
	.mc-header.is-scrolled .mc-header-inner{padding:10px 28px}
}
@media (max-width:640px){
	.mc-header-inner{padding:12px 20px}
	.mc-header.is-scrolled .mc-header-inner{padding:10px 20px}
}


/* ============================================================
   3) CTAボタン角丸 + 連結解除
============================================================ */
.mc-cta{gap:10px}
.mc-btn{
	border-radius:5px;
}
/* outline ボタンの右ボーダー復活（角丸時に連結見た目をやめる） */
.mc-btn-outline{
	border-right:1px solid var(--mc-ink);
}


/* ============================================================
   4) フルスクリーンメニュー内 CTA も角丸対応
============================================================ */
.mc-menu-cta .mc-btn{
	border-radius:5px;
}


/* ============================================================
   5) reduced-motion
============================================================ */
@media (prefers-reduced-motion:reduce){
	.mc-header,
	.mc-header.is-hidden,
	.mc-logo img{
		transform:none !important;
		transition:none !important;
	}
}
/* ============================================================
   ABOUT PAGE — page-about.php 用スタイル
   ----------------------------------------------------------
   既存 style.css の末尾に追記してください。
   セクション:
     1) #hero-a       HERO
     2) #ph-c         PHILOSOPHY
     3) #mic-company  COMPANY (代表メッセージ)
     4) #ov-a         OVERVIEW (会社概要)
============================================================ */


/* ============================================================
   1) #hero-a — HERO (Diptych: 写真左 / テキスト右)
============================================================ */
#hero-a{
	--ha-white:#fff;
	--ha-ink:#1a1a1a;
	--ha-mgray:#6a6a6a;
	--ha-lgray:#a8a8a8;
	--ha-navy:#1c2b4a;
	--ha-gold:#c49955;
	--ha-gold-l:#ddb276;
	--ha-gold-d:#a17f43;
	--ha-cin:'Cinzel',serif;
	--ha-noto:'Noto Serif JP',serif;
	--ha-mont:'Montserrat',sans-serif;
	--ha-expo:cubic-bezier(.16,1,.3,1);
	position:relative;
	min-height:100vh;
	display:grid;
	grid-template-columns:1.05fr 1fr;
	background:var(--ha-white);
	color:var(--ha-ink);
	font-family:var(--ha-noto);
	overflow:hidden;
	isolation:isolate;
}
#hero-a *,#hero-a *::before,#hero-a *::after{box-sizing:border-box;margin:0;padding:0}

#hero-a .ha-photo{position:relative;overflow:hidden;clip-path:inset(0 100% 0 0);animation:haClip 1.4s .25s var(--ha-expo) forwards}
@keyframes haClip{to{clip-path:inset(0 0 0 0)}}
#hero-a .ha-photo img{width:100%;height:100%;object-fit:cover;transform:scale(1.18);animation:haZoom 2.4s .55s var(--ha-expo) forwards;will-change:transform}
@keyframes haZoom{to{transform:scale(1.02)}}
#hero-a .ha-photo-ov{position:absolute;inset:0;background:linear-gradient(135deg,rgba(28,43,74,.22),transparent 55%),linear-gradient(0deg,rgba(0,0,0,.12),transparent 40%);pointer-events:none}

#hero-a .ha-frames{position:absolute;inset:36px;z-index:2;pointer-events:none}
#hero-a .ha-fr{position:absolute;width:0;height:0;border:1.2px solid var(--ha-gold);opacity:0}
#hero-a .ha-fr.tl{top:0;left:0;border-right:none;border-bottom:none;animation:haFr .8s 1.7s var(--ha-expo) forwards}
#hero-a .ha-fr.br{bottom:0;right:0;border-left:none;border-top:none;animation:haFr .8s 1.9s var(--ha-expo) forwards}
@keyframes haFr{to{width:56px;height:56px;opacity:.5}}

#hero-a .ha-text{position:relative;display:flex;align-items:center;justify-content:center;padding:96px 88px;background:var(--ha-white)}
#hero-a .ha-text::before{content:'';position:absolute;top:0;left:0;width:1px;height:0;background:linear-gradient(var(--ha-gold) 0,transparent 70%);animation:haVline 1.1s 1s var(--ha-expo) forwards}
@keyframes haVline{to{height:100%}}

#hero-a .ha-text-inner{max-width:540px;width:100%}
#hero-a .ha-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:36px;opacity:0;transform:translateX(28px);animation:haSlide .9s 1.25s var(--ha-expo) forwards}
#hero-a .ha-ey-line{width:36px;height:1px;background:var(--ha-gold-d)}
#hero-a .ha-ey-txt{font-family:var(--ha-cin);font-size:.62rem;letter-spacing:.5em;color:var(--ha-gold-d);font-weight:300}
@keyframes haSlide{to{opacity:1;transform:translateX(0)}}

#hero-a .ha-title{font-family:var(--ha-noto);font-size:clamp(2.2rem,4.4vw,4.2rem);font-weight:300;line-height:1.32;letter-spacing:.06em;margin-bottom:36px;color:var(--ha-ink)}
#hero-a .ha-title-line{display:block;overflow:hidden}
#hero-a .ha-title-inner{display:block;transform:translateY(110%)}
#hero-a .ha-title-line:nth-child(1) .ha-title-inner{animation:haUp 1s 1.45s var(--ha-expo) forwards}
#hero-a .ha-title-line:nth-child(2) .ha-title-inner{animation:haUp 1s 1.6s var(--ha-expo) forwards}
@keyframes haUp{0%{transform:translateY(110%)}60%{transform:translateY(-2%)}100%{transform:translateY(0)}}

#hero-a .ha-divider{display:flex;align-items:center;gap:12px;margin-bottom:28px;opacity:0;animation:haFade .6s 1.85s ease forwards}
#hero-a .ha-div-line{flex:0 0 56px;height:1px;background:linear-gradient(90deg,var(--ha-gold),transparent)}
#hero-a .ha-div-line.r{background:linear-gradient(90deg,transparent,var(--ha-gold))}
#hero-a .ha-div-diamond{width:5px;height:5px;background:var(--ha-gold);transform:rotate(45deg);opacity:.6}
@keyframes haFade{to{opacity:1}}

#hero-a .ha-desc{font-size:clamp(.92rem,1.3vw,1.04rem);font-weight:300;line-height:2.15;color:var(--ha-mgray);letter-spacing:.06em;opacity:0;transform:translateY(18px);animation:haUp2 .9s 2s var(--ha-expo) forwards}
@keyframes haUp2{to{opacity:1;transform:translateY(0)}}

#hero-a .ha-scroll{position:absolute;bottom:48px;right:56px;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:haFade .6s 2.8s ease forwards;z-index:3}
#hero-a .ha-scroll-bar{width:1px;height:54px;background:linear-gradient(var(--ha-gold),transparent);opacity:.55;animation:haPulse 2.6s 3s ease-in-out infinite}
@keyframes haPulse{0%,100%{opacity:.35;transform:scaleY(.92)}50%{opacity:.7;transform:scaleY(1.1)}}
#hero-a .ha-scroll-txt{font-family:var(--ha-mont);font-size:.5rem;letter-spacing:.45em;color:var(--ha-lgray);writing-mode:vertical-rl;font-weight:500}

@media(max-width:960px){
	#hero-a{grid-template-columns:1fr;min-height:auto}
	#hero-a .ha-photo{aspect-ratio:3/2;height:auto;min-height:0;background:#0f1626}
	#hero-a .ha-photo img{animation:haZoomSp 2.4s .55s var(--ha-expo) forwards}
	@keyframes haZoomSp{from{transform:scale(1.12)}to{transform:scale(1)}}
	#hero-a .ha-text{padding:56px 28px 80px}
	#hero-a .ha-frames{inset:20px}
	#hero-a .ha-scroll{display:none}
}
@media(prefers-reduced-motion:reduce){
	#hero-a *,#hero-a *::before,#hero-a *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
	#hero-a .ha-photo{clip-path:none !important}
	#hero-a .ha-photo img,#hero-a .ha-title-inner,#hero-a .ha-eyebrow,#hero-a .ha-desc{transform:none !important;opacity:1 !important}
}


/* ============================================================
   2) #ph-c — PHILOSOPHY
============================================================ */
#ph-c{
	--phc-white:#fff;
	--phc-off:#fafaf8;
	--phc-line:#e8e4df;
	--phc-line-d:#d4cfc8;
	--phc-ink:#1a1a1a;
	--phc-mgray:#666;
	--phc-lgray:#aaa;
	--phc-navy:#1c2b4a;
	--phc-gold:#c49955;
	--phc-gold-l:#ddb276;
	--phc-gold-d:#a17f43;
	--phc-cin:'Cinzel',serif;
	--phc-noto:'Noto Serif JP',serif;
	--phc-expo:cubic-bezier(.16,1,.3,1);
	position:relative;
	background:var(--phc-white);
	color:var(--phc-ink);
	font-family:var(--phc-noto);
	overflow:hidden;
	isolation:isolate;
}
#ph-c *,#ph-c *::before,#ph-c *::after{box-sizing:border-box;margin:0;padding:0}

#ph-c [data-r]{opacity:0;transition:opacity 1s var(--phc-expo),transform 1s var(--phc-expo)}
#ph-c [data-r="up"]{transform:translateY(36px)}
#ph-c [data-r="scale"]{transform:scale(.95)}
#ph-c [data-r].on{opacity:1;transform:none}
#ph-c [data-rd="1"]{transition-delay:.12s}
#ph-c [data-rd="2"]{transition-delay:.24s}
#ph-c [data-rd="3"]{transition-delay:.36s}

#ph-c .phc-header{text-align:center;padding:108px 60px 56px;position:relative;overflow:hidden}
#ph-c .phc-header::before{content:'';position:absolute;top:50%;left:50%;width:440px;height:440px;transform:translate(-50%,-50%);border:1px solid rgba(196,153,85,.07);border-radius:50%;pointer-events:none}
#ph-c .phc-header::after{content:'';position:absolute;top:50%;left:50%;width:260px;height:260px;transform:translate(-50%,-50%) rotate(45deg);border:1px solid rgba(196,153,85,.05);pointer-events:none}

#ph-c .phc-eyebrow{display:inline-flex;align-items:center;gap:16px;margin-bottom:18px}
#ph-c .phc-ey-line{width:42px;height:1px;background:var(--phc-gold)}
#ph-c .phc-ey-txt{font-family:var(--phc-cin);font-size:.62rem;letter-spacing:.45em;color:var(--phc-gold-d);font-weight:300}
#ph-c .phc-title{font-family:var(--phc-cin);font-size:clamp(2.6rem,5.4vw,4.8rem);font-weight:300;color:var(--phc-ink);letter-spacing:.08em;line-height:1.15;margin-bottom:10px}
#ph-c .phc-sub{font-family:var(--phc-noto);font-size:.9rem;font-weight:200;color:var(--phc-lgray);letter-spacing:.16em}

#ph-c .phc-divider{position:relative;height:240px;overflow:hidden}
#ph-c .phc-divider img{width:100%;height:100%;object-fit:cover;filter:grayscale(35%) brightness(.82);transition:transform 1.4s var(--phc-expo);will-change:transform}
#ph-c .phc-divider:hover img{transform:scale(1.04)}
#ph-c .phc-divider-ov{position:absolute;inset:0;background:linear-gradient(rgba(28,43,74,.32),rgba(28,43,74,.55));pointer-events:none}
#ph-c .phc-divider-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:1}
#ph-c .phc-divider-label span{font-family:var(--phc-cin);font-size:clamp(2.1rem,4vw,3.2rem);font-weight:300;color:rgba(255,255,255,.78);letter-spacing:.14em}
#ph-c .phc-divider-label::after{content:'';display:block;width:48px;height:1px;background:rgba(196,153,85,.7);margin:14px auto 0}

#ph-c .phc-item{max-width:1000px;margin:0 auto;padding:64px 24px;text-align:center;position:relative}
#ph-c .phc-item::before{content:'';position:absolute;top:0;left:50%;width:1px;height:28px;background:linear-gradient(var(--phc-line-d),transparent);transform:translateX(-50%)}
#ph-c .phc-item::after{content:'';position:absolute;bottom:0;left:50%;width:1px;height:28px;background:linear-gradient(transparent,var(--phc-line-d));transform:translateX(-50%)}
#ph-c .phc-num{font-family:var(--phc-cin);font-size:clamp(3.4rem,6.6vw,5rem);font-weight:300;color:transparent;-webkit-text-stroke:1.4px rgba(28,43,74,.07);line-height:1;margin-bottom:6px;user-select:none}
#ph-c .phc-label{display:inline-flex;align-items:center;gap:12px;margin-bottom:14px}
#ph-c .phc-label-line{width:26px;height:1px;background:var(--phc-gold)}
#ph-c .phc-label-txt{font-family:var(--phc-cin);font-size:.62rem;letter-spacing:.32em;color:var(--phc-gold-d);font-weight:400}
#ph-c .phc-heading{font-family:var(--phc-noto);font-size:clamp(1.2rem,2.4vw,1.7rem);font-weight:600;line-height:1.7;color:var(--phc-ink);margin-bottom:14px;letter-spacing:.06em}

#ph-c .phc-ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px}
#ph-c .phc-ornament-line{width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--phc-gold))}
#ph-c .phc-ornament-line:last-child{background:linear-gradient(90deg,var(--phc-gold),transparent)}
#ph-c .phc-ornament-diamond{width:6px;height:6px;background:var(--phc-gold);transform:rotate(45deg);opacity:.55}

#ph-c .phc-body{font-size:1rem;font-weight:300;line-height:2.1;color:var(--phc-mgray);letter-spacing:.04em}

#ph-c .phc-values-center{display:flex;flex-direction:column;gap:14px;max-width:640px;margin:0 auto}
#ph-c .phc-vc{position:relative;text-align:left;padding:18px 22px 18px 28px;background:var(--phc-off);border-left:3px solid var(--phc-line-d);transition:border-color .5s var(--phc-expo),background .5s var(--phc-expo),transform .5s var(--phc-expo)}
#ph-c .phc-vc:hover{border-left-color:var(--phc-gold);background:var(--phc-white);transform:translateX(4px);box-shadow:0 8px 24px rgba(0,0,0,.04)}
#ph-c .phc-vc-label{font-family:var(--phc-noto);font-size:.94rem;font-weight:600;color:var(--phc-navy);margin-bottom:6px;letter-spacing:.08em}
#ph-c .phc-vc-desc{font-size:.9rem;font-weight:300;color:var(--phc-mgray);line-height:1.9}

@media(min-width:961px){
	#ph-c .phc-body{font-size:1.1rem;line-height:2.05}
	#ph-c .phc-vc-label{font-size:1.02rem}
	#ph-c .phc-vc-desc{font-size:.98rem;line-height:1.85}
}
@media(max-width:960px){
	#ph-c .phc-header{padding:72px 24px 40px}
	#ph-c .phc-item{padding:44px 24px}
	#ph-c .phc-divider{height:170px}
}
@media(prefers-reduced-motion:reduce){
	#ph-c [data-r]{opacity:1 !important;transform:none !important}
}


/* ============================================================
   3) #mic-company — COMPANY (代表メッセージ)
============================================================ */
#mic-company{
	--co-white:#fff;
	--co-off:#fafaf8;
	--co-line:#e8e4df;
	--co-line-d:#d4cfc8;
	--co-ink:#1a1a1a;
	--co-mgray:#666;
	--co-lgray:#aaa;
	--co-navy:#363B4A;
	--co-gold:#c49955;
	--co-gold-l:#ddb276;
	--co-gold-d:#a17f43;
	--co-cin:'Cinzel',serif;
	--co-noto:'Noto Serif JP',serif;
	--co-expo:cubic-bezier(.16,1,.3,1);
	position:relative;
	overflow:hidden;
	background:var(--co-white);
	color:var(--co-ink);
	font-family:var(--co-noto);
	isolation:isolate;
}
#mic-company *,#mic-company *::before,#mic-company *::after{box-sizing:border-box;margin:0;padding:0}

#mic-company .co-header{position:relative;padding:108px 60px 56px;background:var(--co-navy);text-align:center;overflow:hidden}
#mic-company .co-header::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-55deg,transparent,transparent 80px,rgba(255,255,255,.014) 80px,rgba(255,255,255,.014) 81px);pointer-events:none}
#mic-company .co-ghost{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--co-cin);font-size:clamp(4rem,14vw,11rem);font-weight:300;color:rgba(255,255,255,.035);letter-spacing:.12em;white-space:nowrap;pointer-events:none}

#mic-company .co-eyebrow,
#mic-company .co-title,
#mic-company .co-sub{opacity:0;transform:translateY(20px);transition:opacity .9s var(--co-expo),transform .9s var(--co-expo)}
#mic-company.co-on .co-eyebrow{opacity:1;transform:none;transition-delay:0s}
#mic-company.co-on .co-title{opacity:1;transform:none;transition-delay:.15s}
#mic-company.co-on .co-sub{opacity:1;transform:none;transition-delay:.3s}

#mic-company .co-eyebrow{display:inline-flex;align-items:center;gap:16px;margin-bottom:18px;position:relative;z-index:3}
#mic-company .co-ey-line{width:36px;height:1px;background:var(--co-gold)}
#mic-company .co-ey-txt{font-family:var(--co-cin);font-size:.62rem;letter-spacing:.45em;color:var(--co-gold-l);font-weight:300}
#mic-company .co-title{font-family:var(--co-cin);font-size:clamp(2.2rem,5vw,4rem);font-weight:300;color:#fff;letter-spacing:.08em;line-height:1.2;margin-bottom:10px;position:relative;z-index:3}
#mic-company .co-sub{font-family:var(--co-noto);font-size:.88rem;font-weight:200;color:rgba(255,255,255,.45);letter-spacing:.14em;position:relative;z-index:3}

#mic-company .co-main{background:var(--co-white);position:relative}
#mic-company .co-main::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(54,59,74,.035) 1px,transparent 1px);background-size:38px 38px;pointer-events:none}
#mic-company .co-inner{max-width:1180px;margin:0 auto;padding:88px 60px 64px;display:grid;grid-template-columns:380px 1fr;gap:80px;align-items:center;position:relative;z-index:1}

#mic-company .co-photo-area{position:relative}
#mic-company .co-photo-wrap{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--co-off)}
#mic-company .co-curtain{position:absolute;inset:0;background:var(--co-navy);z-index:4;transform-origin:right center;transform:scaleX(1);transition:transform 1.4s var(--co-expo)}
#mic-company.co-on .co-curtain{transform:scaleX(0)}
#mic-company .co-photo-mask{position:absolute;inset:0;z-index:1}
#mic-company .co-photo-mask img{width:100%;height:100%;object-fit:cover;object-position:center top;transform:scale(1.1);transition:transform 2s var(--co-expo);will-change:transform}
#mic-company.co-on .co-photo-mask img{transform:scale(1.02);transition-delay:.3s}

#mic-company .co-photo-frame{position:absolute;inset:14px;pointer-events:none;z-index:5}
#mic-company .co-pf{position:absolute;width:48px;height:48px;opacity:0;transition:opacity .6s var(--co-expo)}
#mic-company .co-pf.tl{top:0;left:0;border-top:1.2px solid rgba(196,153,85,.7);border-left:1.2px solid rgba(196,153,85,.7)}
#mic-company .co-pf.br{bottom:0;right:0;border-bottom:1.2px solid rgba(196,153,85,.7);border-right:1.2px solid rgba(196,153,85,.7)}
#mic-company.co-on .co-pf.tl{opacity:1;transition-delay:1.3s}
#mic-company.co-on .co-pf.br{opacity:1;transition-delay:1.45s}

#mic-company .co-photo-label{position:absolute;bottom:0;left:0;right:0;padding:18px 22px;background:linear-gradient(transparent,rgba(15,22,38,.65));z-index:6;display:flex;justify-content:space-between;opacity:0;transition:opacity .8s var(--co-expo) 1.5s}
#mic-company.co-on .co-photo-label{opacity:1}
#mic-company .co-photo-label span{font-family:var(--co-cin);font-size:.5rem;letter-spacing:.3em;color:rgba(255,255,255,.55);font-weight:300}

#mic-company .co-vertical{position:absolute;top:50%;right:-48px;transform:translateY(-50%);font-family:var(--co-cin);font-size:.46rem;letter-spacing:.5em;color:var(--co-lgray);writing-mode:vertical-rl;opacity:0;transition:opacity .8s var(--co-expo) 1.6s;z-index:1}
#mic-company.co-on .co-vertical{opacity:1}

#mic-company .co-content{position:relative}
#mic-company .co-position,
#mic-company .co-name-jp,
#mic-company .co-name-en{overflow:hidden}
#mic-company .co-position-inner,
#mic-company .co-name-jp-inner,
#mic-company .co-name-en-inner{display:block;transform:translateY(110%);transition:transform .9s var(--co-expo)}
#mic-company.co-on .co-position-inner{transform:translateY(0);transition-delay:.95s}
#mic-company.co-on .co-name-jp-inner{transform:translateY(0);transition-delay:1.15s}
#mic-company.co-on .co-name-en-inner{transform:translateY(0);transition-delay:1.3s}

#mic-company .co-position{font-family:var(--co-cin);font-size:.58rem;letter-spacing:.38em;color:var(--co-gold-d);font-weight:300;margin-bottom:16px}
#mic-company .co-name-jp{font-family:var(--co-noto);font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:600;color:var(--co-ink);letter-spacing:.14em;line-height:1.3;margin-bottom:6px}
#mic-company .co-name-en{font-family:var(--co-cin);font-size:.65rem;letter-spacing:.4em;color:var(--co-lgray);font-weight:300;margin-bottom:32px}

#mic-company .co-divider-row{display:flex;align-items:center;gap:14px;margin-bottom:32px;opacity:0;transform:translateX(-20px);transition:opacity .8s var(--co-expo) 1.4s,transform .8s var(--co-expo) 1.4s}
#mic-company.co-on .co-divider-row{opacity:1;transform:none}
#mic-company .co-divider-row .l{flex:1;height:1px;background:linear-gradient(90deg,var(--co-gold-d),transparent)}
#mic-company .co-divider-row .d{width:6px;height:6px;background:var(--co-gold);transform:rotate(45deg);opacity:.55}
#mic-company .co-divider-row .r{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(196,153,85,.35))}

#mic-company .co-message{opacity:0;transform:translateY(28px);transition:opacity 1s var(--co-expo) 1.6s,transform 1s var(--co-expo) 1.6s}
#mic-company.co-on .co-message{opacity:1;transform:none}
#mic-company .co-message p{font-family:var(--co-noto);font-size:.92rem;font-weight:300;line-height:2.3;color:var(--co-mgray);letter-spacing:.05em}
#mic-company .co-message p+p{margin-top:14px}
#mic-company .co-message strong{color:var(--co-navy);font-weight:500}

@media(max-width:960px){
	#mic-company .co-header{padding:72px 24px 40px}
	#mic-company .co-inner{grid-template-columns:1fr;gap:48px;padding:56px 24px 40px}
	#mic-company .co-photo-area{max-width:340px;margin:0 auto;width:100%}
	#mic-company .co-vertical{display:none}
}
@media(prefers-reduced-motion:reduce){
	#mic-company .co-curtain{display:none}
	#mic-company .co-photo-mask img{transform:none !important}
	#mic-company .co-eyebrow,
	#mic-company .co-title,
	#mic-company .co-sub,
	#mic-company .co-message,
	#mic-company .co-divider-row,
	#mic-company .co-photo-label,
	#mic-company .co-vertical,
	#mic-company .co-pf{opacity:1 !important;transform:none !important}
	#mic-company .co-position-inner,
	#mic-company .co-name-jp-inner,
	#mic-company .co-name-en-inner{transform:none !important}
}


/* ============================================================
   4) #ov-a — OVERVIEW (会社概要)
============================================================ */
#ov-a{
	--ova-white:#fff;
	--ova-off:#fafaf8;
	--ova-line:#e8e4df;
	--ova-line-d:#d4cfc8;
	--ova-ink:#1a1a1a;
	--ova-mgray:#666;
	--ova-lgray:#aaa;
	--ova-navy:#363B4A;
	--ova-gold:#c49955;
	--ova-gold-l:#ddb276;
	--ova-gold-d:#a17f43;
	--ova-cin:'Cinzel',serif;
	--ova-noto:'Noto Serif JP',serif;
	--ova-mont:'Montserrat',sans-serif;
	--ova-expo:cubic-bezier(.16,1,.3,1);
	position:relative;
	background:var(--ova-white);
	color:var(--ova-ink);
	font-family:var(--ova-noto);
	overflow:hidden;
	isolation:isolate;
}
#ov-a *,#ov-a *::before,#ov-a *::after{box-sizing:border-box;margin:0;padding:0}

#ov-a [data-r]{opacity:0;transition:opacity .9s var(--ova-expo),transform .9s var(--ova-expo)}
#ov-a [data-r="up"]{transform:translateY(40px)}
#ov-a [data-r="left"]{transform:translateX(-40px)}
#ov-a [data-r="right"]{transform:translateX(40px)}
#ov-a [data-r].on{opacity:1;transform:none}
#ov-a [data-rd="1"]{transition-delay:.1s}
#ov-a [data-rd="2"]{transition-delay:.2s}
#ov-a [data-rd="3"]{transition-delay:.3s}
#ov-a [data-rd="4"]{transition-delay:.4s}
#ov-a [data-rd="5"]{transition-delay:.5s}

#ov-a .ova-header{position:relative;padding:108px 60px 56px;background:var(--ova-navy);text-align:center;overflow:hidden}
#ov-a .ova-header::before{content:'OVERVIEW';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--ova-cin);font-size:clamp(4rem,14vw,10rem);font-weight:300;color:rgba(255,255,255,.035);letter-spacing:.12em;white-space:nowrap;pointer-events:none}
#ov-a .ova-header::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-55deg,transparent,transparent 80px,rgba(255,255,255,.014) 80px,rgba(255,255,255,.014) 81px);pointer-events:none}
#ov-a .ova-ey{display:inline-flex;align-items:center;gap:16px;margin-bottom:18px;position:relative;z-index:1}
#ov-a .ova-ey-line{width:36px;height:1px;background:var(--ova-gold)}
#ov-a .ova-ey-txt{font-family:var(--ova-cin);font-size:.62rem;letter-spacing:.45em;color:var(--ova-gold-l);font-weight:300}
#ov-a .ova-h{font-family:var(--ova-cin);font-size:clamp(2.2rem,5vw,4rem);font-weight:300;color:#fff;letter-spacing:.08em;line-height:1.2;margin-bottom:10px;position:relative;z-index:1}
#ov-a .ova-sub{font-family:var(--ova-noto);font-size:.88rem;font-weight:200;color:rgba(255,255,255,.45);letter-spacing:.14em;position:relative;z-index:1}

#ov-a .ova-body{background:var(--ova-off);padding:88px 60px 104px;position:relative}
#ov-a .ova-body::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(196,153,85,.05) 1px,transparent 1px);background-size:38px 38px;pointer-events:none}

#ov-a .ova-grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;position:relative;z-index:1}
#ov-a .ova-card{background:var(--ova-white);border:1px solid var(--ova-line);padding:38px 30px;position:relative;overflow:hidden;transition:transform .55s var(--ova-expo),box-shadow .55s var(--ova-expo),border-color .55s var(--ova-expo)}
#ov-a .ova-card:hover{transform:translateY(-6px);box-shadow:0 22px 56px rgba(0,0,0,.08);border-color:var(--ova-line-d)}
#ov-a .ova-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--ova-gold-d),var(--ova-gold-l));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ova-expo)}
#ov-a .ova-card:hover::before{transform:scaleX(1)}
#ov-a .ova-card::after{content:attr(data-n);position:absolute;bottom:-10px;right:10px;font-family:var(--ova-cin);font-size:4.6rem;font-weight:300;color:rgba(54,59,74,.03);line-height:1;pointer-events:none;transition:color .55s var(--ova-expo)}
#ov-a .ova-card:hover::after{color:rgba(196,153,85,.08)}

#ov-a .ova-card-label{display:flex;align-items:center;gap:10px;margin-bottom:14px}
#ov-a .ova-card-label-line{width:16px;height:1px;background:var(--ova-gold)}
#ov-a .ova-card-label-txt{font-family:var(--ova-noto);font-size:.74rem;font-weight:600;color:var(--ova-navy);letter-spacing:.1em}
#ov-a .ova-card-val{font-size:.86rem;font-weight:300;color:var(--ova-mgray);line-height:2;letter-spacing:.04em}
#ov-a .ova-card-val strong{font-weight:600;color:var(--ova-ink)}
#ov-a .ova-card-val.mono{font-family:var(--ova-mont);font-size:.82rem;letter-spacing:.1em;color:var(--ova-ink);font-weight:400}
#ov-a .ova-card-wide{grid-column:span 2}

#ov-a .ova-orn{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:60px;position:relative;z-index:1}
#ov-a .ova-orn-line{width:56px;height:1px;background:linear-gradient(90deg,transparent,var(--ova-gold))}
#ov-a .ova-orn-line:last-child{background:linear-gradient(90deg,var(--ova-gold),transparent)}
#ov-a .ova-orn-dia{width:6px;height:6px;background:var(--ova-gold);transform:rotate(45deg);opacity:.5}

@media(max-width:960px){
	#ov-a .ova-header{padding:72px 24px 40px}
	#ov-a .ova-body{padding:48px 20px 72px}
	#ov-a .ova-grid{grid-template-columns:1fr;gap:14px}
	#ov-a .ova-card-wide{grid-column:span 1}
	#ov-a .ova-card{padding:28px 22px}
}
@media(prefers-reduced-motion:reduce){
	#ov-a [data-r]{opacity:1 !important;transform:none !important}
}
/* ============================================================
   背景画像を bg-silk.webp に完全置き換え（後勝ち上書き）
   + 繋ぎ目対策: 固定背景化（fixed attachment）
   ----------------------------------------------------------
   既存 style.css の末尾に追記してください。
   対象セクション:
     - TOP About + Results       (#mc-rs)
     - TOP Service Atelier Index (#sv-h)
     - TOP Journal               (#journal-list)
     - Works Archive             (.page-works)
   ----------------------------------------------------------
   bg-silk.webp は /wp-content/themes/madeincrew/assets/images/
   に配置してください。
============================================================ */

/* PC: 固定背景で繋ぎ目を完全に消す */
#mc-rs,
#sv-h,
#journal-list,
.page-works{
	background-image:url('assets/images/bg-silk.webp') !important;
	background-repeat:no-repeat !important;
	background-position:center center !important;
	background-size:cover !important;
	background-attachment:fixed !important;
	background-color:#fff !important;
}

.page-works .wk-hero,
.page-works .wk-list{
	background:transparent !important;
}

/* SP / タブレット: iOS Safari で fixed が動作しないため
   縦ループ + 余裕のあるサイズに戻して繋ぎ目を抑える */
@media (max-width:1023px){
	#mc-rs,
	#sv-h,
	#journal-list,
	.page-works{
		background-attachment:scroll !important;
		background-repeat:repeat-y !important;
		background-position:center top !important;
		background-size:100% auto !important;
	}
}