@charset "UTF-8";
/**
 * service.css — /service（サービス一覧）
 *
 * 一次資料: 設計ツリー specs/pageviews/93bdff6a-c5d0-4b3b-a2a3-11e45e539842.json
 * 値はすべて設計ツリーの style から逐語。丸めや「だいたい同じ」で置き換えない。
 * 設計ツリーに書かれていない余白・罫線・装飾は足さない。
 *
 * ブレークポイント（specs/index.json の breakPoints 実測・全ページ共通）:
 *   ベース幅 1280px / small ~1140px / tablet ~840px / mobile ~540px / mini ~320px
 * 記述規約は base.css §0 に従う（MQは末尾に 1140 → 840 → 540 → 320 の順でまとめる）。
 *
 * 対応する PHP: theme/page-service.php（設計ツリーとの差異 D1〜D8 はそちらの docblock に記載）
 *
 * 目次:
 *   1. ページ土台 / セクション
 *   2. 見出し（サービス一覧 ＋ 背面ウォーターマーク SERVICE）
 *   3. タブ（カテゴリ導線のピル4つ）
 *   4. カード一覧の枠（#menu > ul）
 *   5. サービスカード
 *   6. レスポンシブ
 */

/* ============================================================
 * 1. ページ土台 / セクション
 *    設計ツリー: Section 2b4f94df
 *      background rgba(240,240,240,0) / gap 50px / height auto
 *      margin 80px 0 0 0 / padding 100px 0 / width 1080px / flex none
 * ============================================================ */

.sv-main {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

/*
 * align-items は設計ツリーに指定が無い。子3つのうち見出し群とカード枠は width:100%、
 * 残るタブ群も内部が justify-content:center のため center / stretch どちらでも描画は同じ。
 * STUDIO の Section 既定に合わせて center を採る。
 * background の rgba(240,240,240,0) は完全透過。原文の値をそのまま置く。
 */
.sv-section {
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: center;
	gap: 50px;
	width: 1080px;
	max-width: 100%;
	height: auto;
	margin: 80px 0 0;
	padding: 100px 0;
	background: rgba(240, 240, 240, 0);
	border-radius: 0;
}

/* ============================================================
 * 2. 見出し
 *    設計ツリー: <group tagName="h2"> eb84c773
 *      flex-direction column / align-items center / justify-content center
 *      width 100% / height auto / margin 0 / padding 0 / flex none
 *    背面 Box 4ebf6a23 は position:absolute / inset -29px 0 0 0 / opacity .1 / z-index -1
 * ============================================================ */

/* 背面ウォーターマークの位置基準。設計ツリーに position の指定は無いが、
   子が position:absolute なので STUDIO 既定の relative を明示する。
   z-index は付けない（付けると stacking context ができて z-index:-1 の子が隠れる）。 */
.sv-head {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	align-content: center;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

/* 設計ツリー: 36px / 700 / letter-spacing .08em / line-height normal / text-align left */
.sv-head__ja {
	width: auto;
	height: auto;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 36px;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 0.08em;
	text-align: left;
}

/* 設計ツリー: top -29px / left 0 / right 0 / bottom 0 / height auto / opacity .1 / z-index -1 */
.sv-head__wm {
	position: absolute;
	top: -29px;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	margin: 0;
	background: transparent;
	opacity: 0.1;
}

/* 設計ツリー: 100px / 700 / line-height 1.4 / text-align center / position relative */
.sv-head__en {
	position: relative;
	width: auto;
	height: auto;
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 100px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* ============================================================
 * 3. タブ
 *    設計ツリー: <group> 6fdcb5c6（行・gap 12px）
 *      └ <group>（列・gap 20px。リンク） > Box（ピル） > Text
 *    ピルの :hover は box-shadow 1px 3px 20px rgba(0,0,0,.1) ＋ scale 1.05。
 *    transition-duration 300ms はピル側に付いている。
 * ============================================================ */

.sv-tabs {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 0;
}

.sv-tabs__item {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 0;
	color: inherit;
	text-decoration: none;
}

/* 設計ツリー: border 1px solid #14314a 四辺 / radius 36px / padding 6px 15px 8px */
.sv-tab {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	margin: 0;
	padding: 6px 15px 8px;
	background: transparent;
	border: 1px solid #14314a;
	border-radius: 36px;
	box-shadow: none;
	transition-duration: 300ms;
	transition-property: box-shadow, scale;
}

/*
 * ★2026-09-14 削除: 旧 .sv-tab--tight { padding: 6px 15px }（3つ目「メディア」だけ下 8px が無い）。
 *   設計ツリー実測どおりに写していたが、4つのピルのうち1つだけ 2px 低く 1px 下にずれて見えていた
 *   （現行・ローカルとも 1440px: 他 [y282,h37] / メディア [y283,h35]、375px: 36/36/34/36）。
 *   他3つと同じ 6px 15px 8px（設計ツリー 5f00c54c / f0f7913d / e3a86738 の値）に揃えるため、
 *   page-service.php 側で 'pad' => 'tight' を外した（D8）。
 */

.sv-tabs__item:hover .sv-tab,
.sv-tabs__item:focus-visible .sv-tab {
	box-shadow: 1px 3px 20px rgba(0, 0, 0, 0.1);
	scale: 1.05 1.05;
}

/* 設計ツリー: 15px / 500 / line-height 1.4 / text-align center */
.sv-tab__label {
	width: auto;
	height: auto;
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 15px;
	font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: center;
}

/* ============================================================
 * 4. カード一覧の枠
 *    設計ツリー: 「4つのサービス」2771627e（id="menu"）
 *      row / wrap / gap 10px / justify-content center / align-items stretch
 *      padding 50px / width 100% / flex none
 *    └ List 10f30031（ul）gap 70px / padding 10px / width 100% / flex none
 * ============================================================ */

.sv-menu {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: stretch;
	align-items: stretch;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 50px;
}

/* List に flex-direction の指定は無い（STUDIO の List 既定＝縦積み）。
   li は width:100% なので1列に並ぶ。 */
.sv-list {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 70px;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px;
	list-style: none;
}

/* li。カードの見た目一式は中の <a>（.sv-card）が持つ（page-service.php D5） */
.sv-item {
	display: flex;
	flex: none;
	width: 100%;
}

/* ============================================================
 * 5. サービスカード
 *    設計ツリー: li 563cfe34
 *      background {{color1}} / radius 16px / column / align-items center
 *      justify-content flex-start / padding 60px 60px 30px / width 100% / height auto
 *    :hover は transition-duration 200ms のみ＝見た目の変化は無い。
 *    ハッシュタグが position:absolute で外へはみ出すため position:relative を置く。
 * ============================================================ */

.sv-card {
	position: relative;
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: auto;
	padding: 60px 60px 30px;
	color: inherit;
	text-decoration: none;
	background: var(--sv-bg);
	border-radius: 16px;
}

/* 設計ツリー: <group> 47fc59fb。base では gap 無し（@small で 20px が付く） */
.sv-card__row {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 0;
}

/*
 * 設計ツリー: <group> 8c896fe8。flex-direction の指定は無い（STUDIO 既定＝縦積み）。
 * &appear{opacity:0} ＋ transition 300ms / delay 300ms / ease-in-out が付いているが、
 * 出現アニメは本テーマでは再現しない（page-service.php D7）。
 */
.sv-card__body {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: flex-start;
	align-items: flex-start;
	justify-content: center;
	gap: 5px;
	width: 50%;
	padding: 0;
}

/* ------------------------------------------------------------------
 * サービスカードのアクセント色のコントラスト調整（CEO決定 2026-09-15「直してOK」）
 *
 * トップ（front.css .fr-services__item）と同じ6サービス・同じ値を、
 * page-service.php が style="--sv-accent:…" でインラインに流し込む。
 * 個別値が CSS からは見えないため、インラインstyleの値そのものをセレクタにして
 * 「色相そのまま・黒方向へ N% 暗くした固定値」を当て、**バッジ地色とサービス名だけ**
 * を差し替える（PHP のデータは触らない）。N の決め方・検算・
 * color-mix と :nth-child を使わない理由は front.css の同じ注記に書いてある。
 * ------------------------------------------------------------------ */
.sv-item {
	/* 既定は元のアクセント色そのまま。基準に届かない4件だけ下で上書きする。 */
	--sv-accent-d: var(--sv-accent);
}
.sv-item[style*="--sv-accent:#13ae67"]           { --sv-accent-d: #0d7646; } /* Stories 緑 32%暗  バッジ 2.89→5.68 / 名前 2.33→4.59 */
.sv-item[style*="--sv-accent:#e24d5c"]           { --sv-accent-d: #ae3b47; } /* Wedding  23%暗   バッジ 3.85→5.97 / 名前 2.95→4.58 */
.sv-item[style*="--sv-accent:rgb(242, 165, 30)"] { --sv-accent-d: #8f6112; } /* O-DINARY 41%暗   バッジ 2.06→5.40 / 名前 1.76→4.62 */
.sv-item[style*="--sv-accent:rgb(61, 160, 168)"] { --sv-accent-d: #2c7379; } /* るーるぅ 28%暗   バッジ 3.09→5.48 / 名前 2.61→4.62 */
/* Re:Blue #036eb8 と 企業向け rgb(72,72,72) は元から基準を満たしているため変更しない。 */

/* 設計ツリー: Box 74bb3e0f。radius 20.5px / 125×30px / margin 0 0 10px */
.sv-card__badge {
	display: flex;
	flex: none;
	align-content: center;
	align-items: center;
	justify-content: center;
	width: 125px;
	height: 30px;
	margin: 0 0 10px;
	background: var(--sv-accent-d);  /* 2026-09-15 コントラスト調整・上の注記参照 */
	border-radius: 20.5px;
}

/* 設計ツリー: 12px / 400 / line-height 1.4 / text-align left */
.sv-card__target {
	width: auto;
	height: auto;
	color: #ffffff;
	font-family: var(--s-font-f88553ee);
	font-size: 12px;
	font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
	line-height: 1.4;
	text-align: left;
}

/* 設計ツリー: 16px / 700 / letter-spacing .1em / line-height 1.4 / text-align center
   @mobile / @tablet の position:relative は base と同値のため MQ 側には書かない（no-op） */
.sv-card__kind {
	position: relative;
	width: auto;
	height: auto;
	margin: 0;
	color: #082b34;
	font-family: var(--s-font-f88553ee);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-align: center;
}

/* 設計ツリー: 40px / 700 / letter-spacing .1em / line-height 1.1 / 文字色は {{color}} */
.sv-card__name {
	position: relative;
	width: auto;
	height: auto;
	margin: 0;
	color: var(--sv-accent-d);  /* 2026-09-15 コントラスト調整・上の注記参照 */
	font-family: var(--s-font-f88553ee);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.1em;
	text-align: left;
}

/* 設計ツリー: Title（tagName h2）20px / 700 / letter-spacing .1em / line-height 1.4 / width 100% */
.sv-card__catch {
	flex: none;
	width: 100%;
	height: auto;
	margin: 0;
	color: #082b34;
	font-family: var(--s-font-f88553ee);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-align: left;
}

/* 設計ツリー: 13px / 700 / letter-spacing .1em / line-height 1.3 / margin 10px 0 0 0 */
.sv-card__desc {
	flex: none;
	width: auto;
	height: auto;
	margin: 10px 0 0;
	color: #082b34;
	font-family: var(--s-font-f88553ee);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.1em;
	text-align: left;
}

/* 設計ツリー: Box 08e98776。#EEEEEE / radius 12px / overflow hidden / 50% × 243.09px */
.sv-card__thumb {
	display: flex;
	flex: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	width: 50%;
	height: 243.09px;
	overflow: hidden;
	background: #eeeeee;
	border-radius: 12px;
}

/* 設計ツリーの Image は width/height 100% のみ。
   object-fit は STUDIO の Image 既定（cover）を補う。無いと枠内で歪む。 */
.sv-card__thumb img {
	display: block;
	flex: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 設計ツリー: Text e21843fa。absolute / top -36px / left -30px / 28px italic 700 / line-height 1.4 */
.sv-card__tag {
	position: absolute;
	top: -36px;
	right: auto;
	bottom: auto;
	left: -30px;
	width: auto;
	height: auto;
	margin: 0;
	color: #14314a;
	font-family: var(--s-font-f88553ee);
	font-size: 28px;
	font-style: italic;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}

/*
 * 設計ツリー: <group> 88f35987。base は opacity 0 / translate -30px 0 で不可視。
 * 親（カード）hover で opacity 1 / translate 0 / transition-duration 800ms（in:hover）。
 * transition-duration は hover 側にしか無い＝出るときだけ 800ms でフェード、
 * 戻りは即時。STUDIO の挙動をそのまま写す。
 */
.sv-card__more {
	display: flex;
	flex: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 21px 0 0;
	padding: 0;
	opacity: 0;
	translate: -30px 0;
	transition-duration: 0ms;
	transition-property: opacity, translate;
}

.sv-card:hover .sv-card__more,
.sv-card:focus-visible .sv-card__more {
	opacity: 1;
	translate: 0 0;
	transition-duration: 800ms;
}

/* 設計ツリー: Box 81b540d0。#082b34 / flex 1 / height 1px */
.sv-card__rule {
	flex: 1;
	width: auto;
	height: 1px;
	background: #082b34;
}

/* 設計ツリー: 15px / 700 / line-height 1.4 / margin 0 0 0 10px */
.sv-card__morelabel {
	width: auto;
	height: auto;
	margin: 0 0 0 10px;
	color: #082b34;
	font-family: var(--s-font-f88553ee);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}

/* prefers-reduced-motion を尊重する（原文には無いがアクセシビリティ上必要）。
   動きだけ止め、hover で「詳しく見る」が出ること自体は保つ。 */
@media (prefers-reduced-motion: reduce) {

	.sv-tab {
		transition: none;
	}

	.sv-tabs__item:hover .sv-tab,
	.sv-tabs__item:focus-visible .sv-tab {
		scale: 1 1;
	}

	.sv-card__more {
		translate: 0 0;
		transition: none;
	}

	.sv-card:hover .sv-card__more,
	.sv-card:focus-visible .sv-card__more {
		transition: none;
	}
}

/* ============================================================
 * 6. レスポンシブ
 *    設計ツリーの @small / @tablet / @mobile / @mini 実測値。
 *    display は R2 に従い狭い側にも明示する（STUDIO 側も明示済み）。
 *    ★2026-09-14 の表示品質修正で設計ツリーから逸脱した箇所は、その場に ★ 付きコメントで根拠を書く
 *      （2カラム幅 calc(50% - 10px) / 841〜1140 のサービス名 / ≤840 のキャッチ 20px+.05em）。
 * ============================================================ */

@media screen and (max-width: 1140px) {

	.sv-menu {
		display: flex;
	}

	.sv-card__row {
		gap: 20px;
	}

	/*
	 * ★2026-09-14 追加: width は設計ツリー（8c896fe8 / 08e98776）では 50% のままだが、
	 *   現行の描画では STUDIO が gap:20px 付き flex row の子に max-width:calc(50% - 10px)
	 *   （gap の半分）を自動付与している（現行 computed maxWidth 実測: 768〜1140px は calc(50% - 10px)、
	 *   @mobile は 100%、1440px は 50%）。無いと 50%＋50%＋gap20px で行から 20px はみ出し、
	 *   768px（justify center）ではテキスト列 x=85（現行 95）・画像右端 683（現行 673＝「詳しく見る」右端）、
	 *   841〜1140px（justify flex-start）では画像右端が行より 20px 右（1140px: 1010 vs 990）に出ていた。
	 *   max-width ではなく width で書くのは、≤540px の width:100%（column-reverse）にそのまま
	 *   上書きされて追加ルールが要らないため（描画結果は同じ）。
	 */
	.sv-card__body,
	.sv-card__thumb {
		width: calc(50% - 10px);
	}

	.sv-card__thumb {
		height: 220px;
	}
}

/*
 * ★2026-09-14 追加: 841〜1140px（iPad 横 1024px を含む）のサービス名の折れ防止。
 *   設計ツリーは 40px 固定だが、この帯域の列幅 (W−260)/2 = 291〜410px に対して
 *   「for the Company」の自然幅は 386px（40px 時）なので W<1032 では「O-DINARY / for the / Company」の
 *   3行に折れていた（1024px 実測 nameLines [236,157,216]、現行サイトも同じ＝docH 3677）。
 *   841〜883px では「Lu-Lu Stories」[132,167]・「るーるぅの日常」[264,44] も折れる。
 *   min(40px, 3.5vw) で列幅に比例させる: 841→29.4px（for the Company 284px ≤ 列 291）、
 *   1024→35.84px（[212,346] ≤ 382）、1140→39.9px（1141px 以上の 40px と段差なし）。
 *   ≤840 は設計ツリーどおり 14px に切り替わるため、この範囲には含めない。
 */
@media screen and (min-width: 841px) and (max-width: 1140px) {

	.sv-card__name {
		font-size: min(40px, 3.5vw);
	}
}

@media screen and (max-width: 840px) {

	.sv-tabs {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
	}

	.sv-tabs__item {
		flex: none;
	}

	.sv-tab {
		display: flex;
	}

	.sv-menu {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* 設計ツリー実測は padding:48px 35px 48px（上下同値のため2値に畳んだ。等価） */
	.sv-card {
		flex: none;
		align-content: center;
		align-items: center;
		justify-content: space-between;
		padding: 48px 35px;
	}

	.sv-card__row {
		flex: none;
		align-content: center;
		align-items: center;
		justify-content: center;
	}

	.sv-card__kind {
		font-size: 14px;
	}

	.sv-card__name {
		font-size: 14px;
	}

	/*
	 * ★2026-09-14 変更: 設計ツリー @tablet は font-size 24px（letter-spacing は base の .1em のまま）。
	 *   その値だと 768px（iPad 縦）の列幅 279px に2行目が収まらず、6枚中4枚で最終行が
	 *   「う。」「と。」「る。」の2文字だけ落ち（audit orphans: lastLineW 53px）、るーるぅは4行（h 134px）
	 *   になっていた。現行サイトも同じ（live audit 768: orphans 4件・同座標）。
	 *   20px（base / @mobile と同値）＋ letter-spacing .05em で 6枚とも2行に収まる
	 *   （768px 実測 [168,231]/[147,252]/[147,147]/[134,252]/[126,231]/[231,273]、840px も同様）。
	 *   20px だけだと るーるぅが [242,242,44] で「う。」が残るため letter-spacing も併用。
	 *   @mobile（≤540）は列幅 295px で .1em のまま収まるので、下の ≤540 ブロックで .1em に戻す。
	 */
	.sv-card__catch {
		font-size: 20px;
		letter-spacing: 0.05em;
	}

	.sv-card__desc {
		font-size: 13px;
	}

	.sv-card__thumb {
		height: 197px;
	}

	/* @tablet 以下では hover を待たず常時表示（設計ツリー実測） */
	.sv-card__more {
		opacity: 1;
		translate: 0 0;
	}
}

@media screen and (max-width: 540px) {

	.sv-head {
		flex: none;
	}

	.sv-head__wm {
		flex: none;
	}

	.sv-head__en {
		font-size: 80px;
	}

	/* 2つ目「企業向け」のみ height:52px（設計ツリー実測） */
	.sv-tabs__item--h52 {
		height: 52px;
	}

	.sv-tab {
		display: flex;
	}

	.sv-tab__label {
		font-size: 14px;
	}

	.sv-menu {
		display: flex;
		padding: 50px 20px;
	}

	.sv-list {
		padding: 0;
	}

	/* 設計ツリー実測は padding:30px 20px 30px（上下同値のため2値に畳んだ。等価） */
	.sv-card {
		flex: none;
		width: 100%;
		padding: 30px 20px;
	}

	/* 画像が上・テキストが下になる（column-reverse。設計ツリー実測） */
	.sv-card__row {
		flex: none;
		flex-direction: column-reverse;
		flex-wrap: nowrap;
		height: auto;
	}

	.sv-card__body {
		flex: none;
		width: 100%;
	}

	.sv-card__name {
		font-size: 24px;
	}

	/* letter-spacing は ≤840 で .05em に落としたぶんを base の .1em に戻す（2026-09-14）。
	   375/430px は列幅 295/350px で [242,286] と2行に収まり、現行と完全一致のまま。 */
	.sv-card__catch {
		font-size: 20px;
		letter-spacing: 0.1em;
	}

	.sv-card__desc {
		font-size: 10px;
		font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
	}

	.sv-card__thumb {
		flex: none;
		width: 100%;
		height: 170px;
	}

	.sv-card__tag {
		top: -20px;
		bottom: auto;
		left: -18px;
		font-size: 24px;
	}
}

@media screen and (max-width: 320px) {

	.sv-tab {
		display: flex;
	}

	.sv-menu {
		display: flex;
	}

	/* 設計ツリー実測は padding:70px 35px 70px（上下同値のため2値に畳んだ。等価） */
	.sv-card {
		padding: 70px 35px;
	}

	.sv-card__kind {
		font-size: 11px;
	}

	.sv-card__name {
		font-size: 11px;
	}

	.sv-card__catch {
		font-size: 20px;
	}
}