/**
 * SERVICE（Ver.2、ユーザー指示 2026-09-16）。
 *
 * Ver.1（ScrollTrigger pin＋scrubで1枚ずつカードをドロー→扇状に展開）は廃止した。
 * 「アニメーションの面白さより5枚のカードデザインが綺麗に見えること」を優先し、
 * PCでは常にCSS Gridで5枚を重ならず・回転なしの横一列に配置する（.service-draw__deck）。
 * 登場演出はSERVICEがviewportに入った瞬間に一度だけ再生する軽いfromTo+stagger
 * （実処理はassets/js/pages/service-draw.js）で、最終的な並び自体はJSの有無に関わらず
 * 常にこのCSSのGridレイアウトのまま変わらない（JSはopacity/transformのみを一時的に
 * 動かし、レイアウト＝Gridの列や幅は一切動かさない）。
 *
 * 背景はservice-world.webp 1枚のみ（ABOUTと同じ「背景を切り替えない」手法：
 * background-size:100% auto／position:center top／no-repeat、画像が尽きた場合は
 * 下端トーンに合わせたbackground-colorへ自然に受け渡す）。
 *
 * カード画像（service-card-0{N}.webp）自体には文字を焼き込まない。画像下部の白い
 * カードエリアへ.service-draw__card-infoをposition:absoluteで重ねる。
 */

.service-draw {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% auto;
	/* service-world.webp下端付近（雲海）のトーンに近い色。画像が尽きた場合の
	   フォールバックが不自然な境界線に見えないようにするための色。 */
	background-color: #a5a8a1;
	color: var(--color-ink);
	padding-bottom: clamp(56px, 9vh, 96px);
}

/* ============================== 見出し ==============================
   ユーザー指示（2026-09-17）：中央揃えから左揃えへ変更し、「SERVICE」ラベルをもう少し
   大きく。その下にキャッチコピー「可能性を実現する」、さらにその下に説明文を追加する
   3段構成にする（見出しブロック全体の横幅は読みやすさのため720pxに制限）。 */
.service-draw__intro {
	position: relative;
	isolation: isolate;
	z-index: 3;
	/* ユーザー指示（2026-09-17、数値調整指示）：catchが1行に収まる幅を確保するため
	   560px→760pxへ拡張。 */
	width: min(760px, 70vw);
	max-width: 760px;
	text-align: left;
	/* ユーザー指示（2026-09-17、「LIBRE実装指示書」完成見本の再現指示）：SECTION左端から約7%、
	   上端から約26%にintro開始。ただしsection自身は高さ可変（カード段まで含むautoレイアウト）
	   のため、position:absoluteでSECTION全体の高さに対するtop:%を使うと（カード段を含む
	   実測1000px超の高さ基準になり）見出しがカード領域まで下がってしまう。左右方向は
	   section幅=概ねviewport幅のためpadding-leftの%指定がそのまま「7%」に対応するが、
	   縦方向はvh近似（26vh）で「初期表示範囲の26%相当」を表現する。 */
	padding-top: clamp(70px, 26vh, 280px);
	padding-left: 7%;
	padding-right: clamp(16px, 3vw, 40px);
	padding-bottom: clamp(28px, 5vh, 56px);
}

/* ============================== ATMOSPHERIC LIGHT ==============================
   ユーザー指示（2026-09-17、「LIBRE実装指示書」完成見本の再現指示）：背景画像を複製して
   filterで加工する「local-light-layer」方式を廃止した。「背景を明るく加工する」のではなく
   「背景の上に巨大で非常に柔らかい光・霞を追加する」表現へ変更する。文字サイズに合わせない
   巨大なradial-gradient＋blurを画面左上（太陽光・霞が差し込むエリア）に配置し、左端が最も
   明るく、中央へ向けて背景へ融合していく構造。矩形gradient・白パネル・backdrop-filterは
   使用しない。 */
/* ユーザー指示（2026-09-19再指示）：「戦略・デザイン・テクノロジーを掛け合わせ…」の説明文が
   見にくいとのフィードバックを受け、service-world.webpを実際にCanvasへ描画してeyebrow/
   catch/descriptionの3要素をグリッド実測した。旧ボックス（left:-12%,width:78%）は
   楕円の右端がdescription本文の右側（複数行に折り返した本文の右寄り部分）まで届いておらず、
   そこで実測コントラスト比が最低1.70まで落ち込んでいた。ボックスをleft:-5%・width:95%へ
   広げ、楕円半径も37%,49%→65%,70%へ拡大（中心位置32%,42%は据え置き）。同じ45点の実測
   グリッドで最低コントラスト比が1.70→6.50まで改善することを確認した。 */
.service-draw__ambient-light {
	position: absolute;
	left: -5%;
	top: -18%;
	width: 95%;
	height: 105%;
	z-index: 1;
	pointer-events: none;
	/* サイズキーワード省略時のデフォルト`farthest-corner`だと、この光レイヤー自身の
	   ボックス内で右/下端の距離/半径比が最終stop(82%)に届かずごく薄い残留alphaが残る
	   （このセッションで既知のradial-gradient farthest-cornerバグと同じ原因）。四辺すべて
	   完全にtransparentへ減衰するよう明示的にellipse 65% 70%を指定した。 */
	background: radial-gradient(ellipse 65% 70% at 30% 42%,
		rgba(255,255,245,.90) 0%,
		rgba(255,255,245,.64) 24%,
		rgba(255,255,245,.33) 48%,
		rgba(255,255,245,.15) 66%,
		rgba(255,255,245,0) 82%);
	filter: blur(28px);
}

/* ユーザー指示（2026-09-19、TOPタイポグラフィ統一 TYPE A）：ABOUT/SERVICEを同じタイポ
   グラフィシステムに統一する（ABOUTを基準、about.cssの.about-world__eyebrow/__lead/__bodyと
   対になる）。SERVICEのラベルだけ太く見えていた点（weight 600）を修正し、ABOUTと同じ
   「細め・字間広め・上品」なラベルにする。 */
/* ユーザー指示（2026-09-19再指示）：SERVICEの英字ラベルもWORKSと同じ書体・文字色にする
   （about.cssの.about-world__eyebrowと対になる）。サイズはこのセクション独自の
   --libre-label-sizeのまま変更しない。 */
.service-draw__eyebrow {
	margin: 0 0 clamp(24px, 2vw, 34px);
	font-family: var(--font-serif);
	font-weight: 500;
	font-size: var(--libre-label-size);
	line-height: 1;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--libre-color-navy);
}

/* メインコピー：明朝（--font-serif）。FV/ABOUTと同じ「メインコピー＝明朝」の統一ルール。
   ユーザー指示（2026-09-19、TOPタイポグラフィ統一 TYPE A）：ABOUTの日本語見出し
   （about-world__lead）と同じvar(--libre-heading-size)へ統一。サイズ上限が60px→68pxへ
   広がるため、「可能性を実現する」がPCで必ず1行に収まるか改めてCanvas measureTextで
   再実測し、必要なら.service-draw__intro側のwidthで調整する（後述のPC確認手順を参照）。 */
.service-draw__catch {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: 400;
	font-size: var(--libre-heading-size);
	line-height: 1.4;
	letter-spacing: .03em;
	color: var(--libre-color-navy);
	/* ユーザー指示（2026-09-17、数値調整指示 セクション1）：PCでは必ず1行表示にする
	   （コンテナ幅を760pxへ拡張した上でnowrap。768px以下はmobile用@mediaでnormalへ戻す）。 */
	white-space: nowrap;
	/* ユーザー指示（セクション3）：「光っている」と分かるレベルは禁止。背景からエッジを
	   数%だけ分離する非常に弱いtext-shadow一段のみ。 */
	text-shadow: 0 1px 2px rgba(255,255,255,.28);
}

/* ユーザー指示（2026-09-19、TOPタイポグラフィ統一 TYPE A）：ABOUTの本文
   （about-world__body）と同じvar(--libre-body-size)・weight 400へ統一
   （旧weight500・15-17pxではABOUTより明らかに小さく見えていた）。 */
.service-draw__description {
	margin: clamp(14px, 1.8vw, 20px) 0 0;
	max-width: 650px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--libre-body-size);
	line-height: 2;
	letter-spacing: .04em;
	color: var(--libre-color-navy);
	text-shadow: 0 1px 1px rgba(255,255,255,.55), 0 0 5px rgba(255,255,255,.18);
}

/* ============================== カード：CSS Gridで横一列（PC） ==============================
   ユーザー指示：5枚を重ねない・扇状にしない・回転させない。CSS Gridを基本にする。 */
.service-draw__deck {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
	gap: clamp( 10px, 1.1vw, 22px );
	width: min( 96vw, 1800px );
	margin-inline: auto;
	align-items: start;
}

.service-draw__card {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	aspect-ratio: 640 / 960;
	text-decoration: none;
	/* 登場前の初期状態（JS未実行時のフォールバックにもなる：opacity:1のまま、
	   何も動かさずそのまま完成形として見える＝WebGL/JS Fallback原則）。
	   画像はaspect-ratioをservice-card-0{N}.webpの実寸（640×960）に一致させた上で
	   background-size:coverを使っている。コンテナ比率＝画像比率のため実質object-fit:
	   containと同じ結果（トリミングは発生せず、カードの装飾枠も常に全体表示される）。 */
	opacity: 1;
	transform: none;
	cursor: pointer;
}

.service-draw__card-inner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

/* ============================== カードめくり演出（裏面→表面のY軸フリップ） ==============================
   ユーザー指示（2026-09-19）：SERVICEの既存デザイン・5枚のカード面・レイアウトは一切変更せず、
   「初期状態は裏面（service-card-back.webp）→SERVICEがスクロールで見えたら01→05の順に
   素早くめくれて既存の表面が現れる」演出だけを追加する。既存の.service-draw__card-innerは
   完全に元のまま.service-card-flip__frontの中へ入れ子にしただけで、内容・スタイルには触れていない。
   初期状態（.service-card-flip__inner、transformなし＝rotateY(0deg)相当）はCSSのデフォルトの
   ため、JSやGSAPが読み込まれる前の最初のペイントから常に「裏面が正面」を表示する
   （FOUC対策。JS/GSAP非対応環境でもこの裏面のまま完成形として見える）。 */
.service-card-flip {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	perspective: 1400px;
}

/* 実装ノート：.service-card-flip__inner/__front/__backはHTML上<span>（既存の
   .service-draw__card-inner等と同じインライン要素の慣習に合わせた）のため、
   position:relative／absoluteだけでは（backface-visibility以外は）ブロック化されず、
   width/height:100%が効かず崩れる。display:blockを明示して解決している。 */
.service-card-flip__inner {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	will-change: transform;
}

.service-card-flip__front,
.service-card-flip__back {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* 新しいservice-card-back.webp（2026-09-19差し替え）はキャンバスいっぱいの正方形画像で、
   ゴールドの角丸フレームの外側（キャンバスの四隅）が黒で塗られている。コンテナのアスペクト比＝
   画像のアスペクト比（640/960）のためobject-fit:containでも余白（レターボックス）は出ないが、
   四隅の黒だけがそのまま見えてしまう。画像側に手を加える代わりに、コンテナ側をやや大きめの
   角丸＋overflow:hiddenでクリップし、黒い部分だけを隠す（実測：画像内のゴールド枠は対角線上
   およそ1024px中45〜50px地点から始まるため、カード幅の約6%程度の半径が必要）。 */
.service-card-flip__back {
	transform: rotateY(0deg);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: clamp(18px, 2.4vw, 28px);
	overflow: hidden;
}

/* ユーザー指示：画像はそのまま使用（白背景・パネル追加禁止、比率を歪めない、
   object-fit:containを基本とし、CSSでの枠追加もしない＝画像自体の金枠をそのまま活かす）。 */
.service-card-flip__back img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.service-card-flip__front {
	transform: rotateY(180deg);
}

/* reduced-motionでは3Dフリップ自体を行わず、最初から表面（既存の5枚のカード）を表示する。 */
@media (prefers-reduced-motion: reduce) {
	.service-card-flip__inner {
		transform: rotateY(180deg);
	}
}

/* ============================== Hover（5枚が並び終わった後のみ有効） ==============================
   ユーザー指示：transformのみで表現し、Gridレイアウト自体・隣のカードは一切動かさない。
   傾き（rotate）は付けない。 */
.service-draw__deck.is-ready .service-draw__card:hover .service-draw__card-inner,
.service-draw__deck.is-ready .service-draw__card:focus-visible .service-draw__card-inner {
	transform: translateY(-6px) scale(1.015);
}

.service-draw__deck.is-ready .service-draw__card:hover,
.service-draw__deck.is-ready .service-draw__card:focus-visible {
	z-index: 5;
}

.service-draw__card:nth-child(1) { --card-glow: 47, 120, 187; }
.service-draw__card:nth-child(2) { --card-glow: 61, 150, 88; }
.service-draw__card:nth-child(3) { --card-glow: 224, 133, 54; }
.service-draw__card:nth-child(4) { --card-glow: 219, 175, 55; }
.service-draw__card:nth-child(5) { --card-glow: 148, 87, 209; }

.service-draw__card-face {
	position: absolute;
	inset: 0;
	border-radius: clamp(8px, 1vw, 14px);
	background-image: var(--service-card-image);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	box-shadow: 0 18px 40px -16px rgba(10, 20, 30, 0.4);
	transition: box-shadow 0.35s ease;
}

.service-draw__deck.is-ready .service-draw__card:hover .service-draw__card-face,
.service-draw__deck.is-ready .service-draw__card:focus-visible .service-draw__card-face {
	box-shadow: 0 22px 48px -16px rgba(var(--card-glow), 0.45), 0 8px 22px -10px rgba(10, 20, 30, 0.35);
}

/* ============================== 左上バッジ（ナンバリングのみ） ==============================
   ユーザー指示（2026-09-16）：01〜05はカード下部の情報エリアから撤去し、カード本体の
   左上へ配置する。単なる四角いWeb UIではなく、半透明の濃紺＋blur＋白文字＋カード属性色の
   わずかな発光で、カードゲームのランク/属性ナンバーのように見せる。position基準は必ず
   カード本体（.service-draw__card、position:relative）にする。
   2026-09-17追記（ユーザー指示）：「SERVICE」の英字ラベルは不要、ナンバリングのみにする。 */
.service-draw__card-badge {
	position: absolute;
	top: clamp(16px, 1.8vw, 24px);
	left: clamp(16px, 1.8vw, 24px);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: clamp(40px, 4vw, 52px);
	padding: clamp(6px, 0.7vw, 8px) clamp(9px, 1vw, 12px);
	border-radius: 10px;
	background: rgba(7, 13, 24, 0.58);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45), 0 0 14px -2px rgba(var(--card-glow), 0.55);
	pointer-events: none;
}

.service-draw__card-badge-number {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(17px, 1.5vw, 23px);
	line-height: 1;
	color: #fff;
	text-shadow: 0 0 10px rgba(var(--card-glow), 0.95), 0 0 3px rgba(255, 255, 255, 0.85);
}

/* ============================== 宝石アイコン ==============================
   ユーザー指示（2026-09-16）：カード画像に焼き込み済みの宝石（属性・レアリティを表す
   装飾）はそのまま残し、その中央にサービスを象徴する簡易SVGアイコンだけを重ねる。
   宝石の位置・直径はservice-card-0{N}.webp（640×960）を実測して求めた値
   （中心=幅17.6%・高さ79.7%、直径=幅18%）。5枚とも同一テンプレートのため共通の値でよい。
   アイコン自体は白〜アイボリーの単色線画にし、drop-shadowでカードごとの属性色
   （--card-glow）とうっすら白の二重の発光を重ね、「宝石内部に紋章が封入されている」
   ように見せる（アイコンの上に黒い図形を置いただけのWeb UIにしない）。 */
.service-draw__card-gem {
	position: absolute;
	left: 17.6%;
	top: 79.7%;
	width: 18%;
	aspect-ratio: 1 / 1;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	color: #f7f5ee;
}

.service-draw__card-gem svg {
	/* ユーザー指示：アイコンサイズは宝石内部の約40〜50%程度（宝石より目立たせない）。 */
	width: 46%;
	height: 46%;
	filter:
		drop-shadow(0 0 1px rgba(255, 255, 255, 0.9))
		drop-shadow(0 0 5px rgba(var(--card-glow), 0.95))
		drop-shadow(0 0 10px rgba(var(--card-glow), 0.55));
}

/* ============================== 情報エリア（画像下部の白いカードエリア） ==============================
   ユーザー指示（2026-09-16）：
   ・01〜05はここに置かない（左上バッジへ移動済み）。ここにはCATEGORY・サービス名・説明・
     詳細を見る、のみを表示する。
   ・overflow:hidden／line-clampによる強制的な文章の途中切断は禁止。テキストは
     必ず折り返して全文表示する（親要素にoverflow:hiddenを設定しない）。
   ・「詳細を見る」は5枚で縦位置が揃うよう、flex columnにしてmargin-top:autoで
     常に情報エリアの下端に固定する。
   service-card-0{N}.webp（640×960）実測：白い羊皮紙パネルはおよそ70%〜96%
   （実測transition y=0.700／0.957）。パネルの実際の上端より僅かに早い69%から使い、
   下端も97%まで使うことで、画像を一切変更せずに情報エリアの高さを可能な限り確保している
   （ユーザー指示の「上部イラストを少し縮めてもよい」を、実画像のパネル境界ぎりぎりまで
   ボックスを広げる形で解釈）。 */
.service-draw__card-info {
	position: absolute;
	left: 28%;
	right: 5%;
	top: 74%;
	bottom: 7%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
	gap: 0;
	pointer-events: none;
	/* ユーザー指示（2026-09-16、PART1）：PCでは1280px（実運用上のタブレット/PC境界）〜1920pxの
	   全域で5列表示にするため、フォントサイズはclamp()でカード幅（＝ビューポート幅）に
	   なめらかに追従させる。以前のVer.（説明文2行固定・font-size floorが高い）は1280〜1900px
	   帯で情報エリアからのはみ出しが発生したため撤去し、下のclamp()を「5列時の最小カード幅
	   （1280px時）でも実測ではみ出さない」下限まで詰め、説明文は最大3行まで許容する形に
	   変更した（flexのgapではなく要素ごとのmarginで間隔を管理する方針は維持）。 */
}

.service-draw__card-label {
	display: none;
	margin: 0 0 clamp(2px, 0.3vw, 4px);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(8px, 0.5vw, 11px);
	line-height: 1.2;
	letter-spacing: 0.1em;
	color: #6b6d63;
}

/* ============================== サービス名（羊皮紙への刻印風） ==============================
   ユーザー指示（2026-09-16）：文字はHTMLのまま・画像に焼き込まない。CSSのtext-shadowのみで
   「羊皮紙に刻まれた」質感を出す。ネオン発光ではなく、下にごく薄いハイライト（光が当たって
   彫り込みの底が明るく見える）＋上にごく薄い暗い影（彫り込みの陰）を重ねるだけの控えめな
   加工にとどめ、可読性を落とさない（過剰なGlow・真っ黒な縁取りは禁止）。
   下端の属性色ライン（::after）はカード本文の色そのものは変えず、タイトル下にだけ
   ごく細く・中央が明るいgradientで一本入れる（01=BLUE〜05=PURPLE、--card-glow流用）。 */
.service-draw__card-name {
	position: relative;
	margin: 0 0 clamp(4px, 0.6vw, 9px);
	padding-bottom: clamp(4px, 0.6vw, 9px);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(12px, 1.05vw, 21px);
	line-height: 1.22;
	color: #30271f;
	text-align: center;
	width: 100%;
	text-shadow:
		0 1px 0 rgba(255, 248, 231, 0.55),
		0 -1px 1px rgba(35, 20, 8, 0.32);
}

.service-draw__card-name::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	width: min(72%, 132px);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--card-glow), 0.75), transparent);
	opacity: 0.65;
}

/* ============================== 説明文（読みやすさ優先） ==============================
   ユーザー指示：宝石＋アイコン→刻印風タイトル→読みやすい説明文、という情報階層。
   カードゲーム的な特殊表現はタイトルだけにとどめ、説明文は可読性を優先する。
   「詳細を見る」リンクはユーザー指示（2026-09-16）により削除した。 */
.service-draw__card-text {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: clamp(10px, 0.75vw, 14px);
	line-height: 1.5;
	color: #262e38;
	/* ユーザー指示（PART1・10）：最大3行程度まで許容。overflow:hidden／line-clampによる
	   強制的な途中切断はここでも使用しない（絶対に文字を切らない方針を維持）。 */
}

/* ============================== SERVICE一覧CTA ============================== */
.home-service__cta {
	position: relative;
	z-index: 3;
	width: min(96vw, 1800px);
	margin: clamp(22px, 2.4vw, 34px) auto 0;
	padding-bottom: clamp(20px, 3vw, 42px);
	text-align: center;
}

.home-service__color-lines {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(10px, 1.1vw, 22px);
	width: 100%;
}

.home-service__color-line {
	display: block;
	height: 4px;
	border-radius: 999px;
	background: var(--service-line-color);
	transform-origin: left center;
	box-shadow: 0 1px 2px rgba(17, 47, 80, .08);
}

.home-service__cta-copy {
	margin-top: clamp(18px, 2vw, 28px);
}

.home-service__cta-eyebrow {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(11px, .78vw, 14px);
	letter-spacing: .28em;
	color: var(--libre-color-navy);
}

.home-service__cta-title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(27px, 2.5vw, 44px);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .04em;
	color: var(--libre-color-navy);
	text-wrap: balance;
}

.home-service__cta-description {
	margin: 10px 0 0;
	font-size: clamp(13px, .95vw, 16px);
	line-height: 1.8;
	letter-spacing: .06em;
	color: rgba(16, 47, 80, .72);
}

.home-service__cta-button {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(18px, 2vw, 30px);
	width: min(100%, 390px);
	min-height: 82px;
	margin: clamp(28px, 3vw, 38px) auto 0;
	padding: 14px 42px;
	border: 1px solid rgba(165, 124, 48, .82);
	background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(249,246,237,.96));
	color: var(--libre-color-navy);
	box-shadow: inset 0 0 0 4px rgba(255,255,255,.64), 0 7px 20px rgba(74,57,25,.08);
	border-radius: 6px;
	overflow: hidden;
	transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.home-service__cta-button::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(180, 142, 71, .42);
	border-radius: 4px;
	pointer-events: none;
}

.home-service__cta-button::after {
	content: "";
	position: absolute;
	top: -45%;
	bottom: -45%;
	left: -45%;
	width: 28%;
	background: linear-gradient(90deg, transparent, rgba(218, 175, 91, .15), transparent);
	transform: skewX(-20deg);
	pointer-events: none;
}

.home-service__cta-button-copy {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 4px;
}

.home-service__cta-button-en {
	font-family: var(--font-logo);
	font-size: 9px;
	letter-spacing: .2em;
}

.home-service__cta-button-label {
	font-family: var(--font-serif);
	font-size: clamp(17px, 1.35vw, 21px);
	font-weight: 600;
	letter-spacing: .06em;
}

.home-service__cta-arrow {
	position: relative;
	z-index: 1;
	font-size: 22px;
	font-weight: 300;
	transition: transform .3s ease;
}

.home-service__cta-button:hover,
.home-service__cta-button:focus-visible {
	transform: translateY(-2px);
	border-color: #c39439;
	box-shadow: inset 0 0 0 4px rgba(255,255,255,.72), 0 9px 24px rgba(171,126,40,.15);
}

.home-service__cta-button:hover::after,
.home-service__cta-button:focus-visible::after {
	animation: service-cta-shine .7s ease-out 1;
}

.home-service__cta-button:hover .home-service__cta-arrow,
.home-service__cta-button:focus-visible .home-service__cta-arrow {
	transform: translateX(5px);
}

.home-service__cta-button:focus-visible {
	outline: 2px solid var(--libre-color-navy);
	outline-offset: 5px;
}

@keyframes service-cta-shine {
	to { left: 120%; }
}

/* ============================== タブレット：2〜3カラム ==============================
   ユーザー指示（2026-09-16、PART1）：「PCでは必ず5枚横並び。1440pxが重要な合格基準」
   「1200px以上：5枚」「タブレット：2〜3枚」。前Ver.は5列を1920px以上に限定していたが、
   font-size clamp()の下限を詰め直し・説明文を最大3行まで許容することで、1280px幅でも
   実測ではみ出さない状態を確認できたため、5列の下限を1280pxまで引き下げた
   （768〜1279pxをタブレット扱いとし2〜3列にする）。 */
@media (max-width: 1279px) {
	.service-draw__deck {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		row-gap: clamp( 20px, 3vw, 32px );
	}

	.home-service__color-lines {
		gap: 8px;
	}
}

@media (max-width: 900px) {
	.service-draw__deck {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* ============================== モバイル：5枚横並びにはせず、横スワイプカルーセル ============================== */
@media (max-width: 767px) {
	.service-draw__deck {
		display: flex;
		grid-template-columns: none;
		align-items: stretch;
		gap: clamp(14px, 4vw, 20px);
		width: 100%;
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 4px clamp(6vw, 6vw, 6vw) clamp(24px, 8vw, 36px);
		/* スクロールバーを視覚的に隠す（機能自体は維持） */
		scrollbar-width: none;
	}

	.service-draw__deck::-webkit-scrollbar {
		display: none;
	}

	.service-draw__card {
		/* ユーザー指示（PART1・14）：スマホは1.1〜1.15枚程度が見える幅にし、次カードが
		   少し見えることで横スワイプできると伝わるようにする（100vw/87vw≈1.15）。 */
		flex: 0 0 87vw;
		width: 87vw;
		scroll-snap-align: center;
	}

	.service-draw__card-info {
		left: 27%;
		right: 5%;
		top: 74%;
		bottom: 7%;
	}
	.service-draw__card-name { font-size: clamp(15px, 4.4vw, 23px); }
	.service-draw__card-text { font-size: clamp(12px, 3.3vw, 17px); line-height: 1.6; }

	/* 2026-09-17再検証：.service-draw__catchにmobile専用の上限が存在しなかったため、
	   狭い画面幅（320〜340px）で「可能性を実現する」がコンテナ幅（.service-draw__intro、
	   左padding clamp(20px,8vw,90px)＋右padding clamp(16px,3vw,40px)）を超え、
	   「可能性を実現す」／「る」に分断されていた（Canvas measureTextで実測確認）。
	   デスクトップと分離した専用clampを新設し、320〜767px全域でoverflowCount:0を確認済み。 */
	.service-draw__catch {
		font-size: clamp(26px, 7vw, 34px);
		/* ユーザー指示（2026-09-17、数値調整指示 セクション1）：768px以下は自然な改行を許可。 */
		white-space: normal;
	}

	.home-service__cta {
		width: min(88vw, 420px);
		margin-top: 10px;
		padding-bottom: 18px;
	}

	.home-service__color-lines {
		gap: 6px;
	}

	.home-service__color-line {
		height: 3px;
	}

	.home-service__cta-copy {
		margin-top: 48px;
	}

	.home-service__cta-title {
		max-width: 330px;
		margin: 12px auto 0;
		font-size: clamp(25px, 7.4vw, 32px);
		line-height: 1.5;
	}

	.home-service__cta-description {
		max-width: 280px;
		margin-inline: auto;
	}

	.home-service__cta-button {
		width: min(100%, 330px);
		min-height: 76px;
		padding-inline: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-service__cta-button,
	.home-service__cta-arrow,
	.home-service__color-line {
		transition: none;
	}

	.home-service__cta-button:hover,
	.home-service__cta-button:focus-visible,
	.home-service__cta-button:hover .home-service__cta-arrow,
	.home-service__cta-button:focus-visible .home-service__cta-arrow {
		transform: none;
	}

	.home-service__cta-button::after {
		display: none;
	}
}