@charset "utf-8";
/* ==========================================================================
   design_c.css — サービス紹介配下4ページ C案
   B案の質感向上を土台に、さらに「図解・アイコン」まで踏み込む案。
   ・サービス紹介：表 → 工程グループごとのアイコン付きカード群に再構成
   ・制作の流れ ：縦フロー図（連結線＋番号バッジ）に再構成
   ・料金      ：価格を主役にしたカード型プライスリスト
   ・強み      ：番号バッジ＋アイコンを持つカード
   2026-07-26 / ブランド色：紺 #004da0 / 明青 #4593d0 / CTA橙 #ed6c00
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 共通：導入文
   -------------------------------------------------------------------------- */
.service_detailPage .sec1 .commonTxt01,
.fees_detailPage .sec1 .commonTxt01 {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	line-height: 2;
	color: #333;
	position: relative;
	padding-bottom: 34px;
}
.service_detailPage .sec1 .commonTxt01::after,
.fees_detailPage .sec1 .commonTxt01::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 40px;
	height: 3px;
	background-color: #ed6c00;
}

/* ==========================================================================
   1. サービス紹介：工程グループ → アイコンカード群
   HTML側で .svcGroup / .svcCards / .svcCard に変換済みであることが前提。
   変換が当たらなかった場合は元のtableがそのまま残る（＝安全に退行）。
   ========================================================================== */
.svcGroups {
	margin-top: 56px;
}
/* 工程グループ（企画／制作／配信／分析・効果改善） */
.svcGroup {
	margin-bottom: 48px;
}
.svcGroup:last-of-type {
	margin-bottom: 0;
}
/* グループ見出し：番号＋ラベルの横並び。左に紺の縦バー */
.svcGroup_head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
	padding-left: 18px;
	position: relative;
}
.svcGroup_head::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 5px;
	background: linear-gradient(180deg, #004da0 0%, #4593d0 100%);
	border-radius: 3px;
}
.svcGroup_num {
	font-family: 'Arial', sans-serif;
	font-size: 1.3rem;
	font-weight: bold;
	letter-spacing: .12em;
	color: #4593d0;
	line-height: 1;
}
.svcGroup_ttl {
	font-size: 2.2rem;
	font-weight: bold;
	color: #16283f;
	letter-spacing: .06em;
	line-height: 1.4;
}
/* カード格子：2列。1項目しかないグループは1枚が横いっぱいにならないよう抑制 */
.svcCards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}
.svcCard {
	background-color: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 30px 30px 28px;
	position: relative;
	overflow: hidden;
	transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
/* 上辺のアクセント。ホバーで伸びる（過剰にならない程度） */
.svcCard::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 3px;
	width: 56px;
	background: linear-gradient(90deg, #004da0 0%, #4593d0 100%);
	transition: width .35s ease;
}
.svcCard:hover {
	box-shadow: 0 8px 24px rgba(0, 45, 90, .12);
	transform: translateY(-3px);
	border-color: #cfe0f0;
}
.svcCard:hover::before {
	width: 100%;
}
.svcCard_head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.svcCard_icon {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: #eef5fc;
	display: flex;
	align-items: center;
	justify-content: center;
}
.svcCard_icon img,
.svcCard_icon svg {
	width: 28px;
	height: 28px;
	display: block;
}
.svcCard_ttl {
	font-size: 1.8rem;
	font-weight: bold;
	color: #16283f;
	line-height: 1.5;
	letter-spacing: .04em;
}
.svcCard_txt {
	font-size: 1.5rem;
	line-height: 1.95;
	color: #444;
}

/* ==========================================================================
   2. 料金：価格を主役にしたカード型リスト
   ========================================================================== */
.feeList {
	margin-top: 56px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.feeItem {
	background-color: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 26px 28px 24px;
	display: flex;
	flex-direction: column;
	transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.feeItem:hover {
	box-shadow: 0 8px 24px rgba(0, 45, 90, .12);
	transform: translateY(-3px);
	border-color: #cfe0f0;
}
.feeItem_head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.feeItem_icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: #eef5fc;
	display: flex;
	align-items: center;
	justify-content: center;
}
.feeItem_icon img,
.feeItem_icon svg {
	width: 24px;
	height: 24px;
	display: block;
}
.feeItem_ttl {
	font-size: 1.7rem;
	font-weight: bold;
	color: #16283f;
	letter-spacing: .04em;
	line-height: 1.4;
}
/* 価格：ここが主役。数字だけ大きく、単位と「〜」は控えめに */
.feeItem_price {
	font-size: 2.8rem;
	font-weight: bold;
	color: #004da0;
	line-height: 1.2;
	letter-spacing: .01em;
}
/* 備考がある場合だけ価格の下に区切りを入れる（:has 非対応ブラウザでは
   区切りが出ないだけで崩れない＝安全に退行する） */
.feeItem:has(.feeItem_note:not(.is-empty)) .feeItem_price {
	padding-bottom: 14px;
	border-bottom: 1px solid #eef1f5;
	margin-bottom: 14px;
}
.feeItem_price .feeItem_unit {
	font-size: 1.5rem;
	font-weight: bold;
	color: #5b6874;
	margin-left: 4px;
	letter-spacing: .02em;
}
/* 「ご相談ください」など数値でない価格 */
.feeItem_price.is-ask {
	font-size: 2rem;
	color: #ed6c00;
}
.feeItem_note {
	font-size: 1.4rem;
	line-height: 1.85;
	color: #5b6874;
}
/* 備考のないカードでダッシュを浮かせると、かえって空白が目立つ。
   高さは grid の stretch で揃うので、中身のない注記は描画しない。 */
.feeItem_note.is-empty {
	display: none;
}
.feeNotice {
	margin-top: 22px;
	padding: 16px 22px;
	background-color: #f2f6fa;
	border-left: 4px solid #4593d0;
	font-size: 1.4rem;
	line-height: 1.85;
	color: #5b6874;
	border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   3. B.A.Dの強み：番号バッジ付きカード
   ========================================================================== */
.strength_detailPage .sec1 ul {
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	box-shadow: none;
	margin-bottom: 20px;
	padding: 40px 44px 36px 100px;
	position: relative;
	transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.strength_detailPage .sec1 ul:hover {
	box-shadow: 0 8px 24px rgba(0, 45, 90, .12);
	transform: translateY(-3px);
	border-color: #cfe0f0;
}
/* 既存の細い青バーを消して、丸バッジの連番に置き換える */
.strength_detailPage .sec1 ul li:first-of-type::before {
	display: none;
}
.strength_detailPage .sec1 ul::before {
	position: absolute;
	left: 36px;
	top: 38px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, #004da0 0%, #4593d0 100%);
	color: #fff;
	font-family: 'Arial', sans-serif;
	font-size: 1.7rem;
	font-weight: bold;
	line-height: 44px;
	text-align: center;
	letter-spacing: .02em;
	box-shadow: 0 3px 8px rgba(0, 77, 160, .28);
}
.strength_detailPage .sec1 ul:nth-of-type(1)::before { content: '01'; }
.strength_detailPage .sec1 ul:nth-of-type(2)::before { content: '02'; }
.strength_detailPage .sec1 ul:nth-of-type(3)::before { content: '03'; }
.strength_detailPage .sec1 ul:nth-of-type(4)::before { content: '04'; }
.strength_detailPage .sec1 ul:nth-of-type(5)::before { content: '05'; }

.strength_detailPage .sec1 ul li:first-of-type {
	font-size: 2.1rem;
	line-height: 1.6;
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid #eef1f5;
	color: #16283f;
}
.strength_detailPage .sec1 ul li {
	line-height: 1.95;
	color: #333;
}
.strength_detailPage .sec1 ul li div {
	margin-top: 14px;
	padding: 12px 16px;
	background-color: #f5f8fb;
	border-left: 3px solid #b9cfe4;
	color: #5b6874;
	line-height: 1.8;
	border-radius: 0 4px 4px 0;
}

/* ==========================================================================
   4. 制作の流れ：縦フロー図
   左に連結線を通し、番号バッジをその上に乗せる。工程の連続性を明示。
   ========================================================================== */
.flowPage .sec1 ul {
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	box-shadow: none;
	margin-top: 20px;
	padding: 38px 44px 36px 108px;
	position: relative;
	transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.flowPage .sec1 ul:hover {
	box-shadow: 0 8px 24px rgba(0, 45, 90, .12);
	border-color: #cfe0f0;
}
/* 既存のstep画像バッジを消し、CSSの丸バッジに差し替える */
.flowPage .sec1 ul li:first-of-type::before {
	width: 48px;
	height: 48px;
	left: -68px;
	top: -6px;
	border-radius: 50%;
	background: linear-gradient(135deg, #004da0 0%, #4593d0 100%) !important;
	color: #fff;
	font-family: 'Arial', sans-serif;
	font-size: 1.9rem;
	font-weight: bold;
	line-height: 48px;
	text-align: center;
	box-shadow: 0 3px 8px rgba(0, 77, 160, .28);
}
.flowPage .sec1 .u1 li:first-of-type::before { content: '1'; }
.flowPage .sec1 .u2 li:first-of-type::before { content: '2'; }
.flowPage .sec1 .u3 li:first-of-type::before { content: '3'; }
.flowPage .sec1 .u4 li:first-of-type::before { content: '4'; }
.flowPage .sec1 .u5 li:first-of-type::before { content: '5'; }
.flowPage .sec1 .u6 li:first-of-type::before { content: '6'; }

/* 工程をつなぐ縦線。カード下端から次のカードへ */
.flowPage .sec1 .u1::after,
.flowPage .sec1 .u2::after,
.flowPage .sec1 .u3::after,
.flowPage .sec1 .u4::after,
.flowPage .sec1 .u5::after {
	content: '';
	position: absolute;
	left: 63px;
	bottom: -20px;
	width: 2px;
	height: 20px;
	background: linear-gradient(180deg, #4593d0 0%, #c5d8ea 100%);
}
.flowPage .sec1 ul li:first-of-type {
	padding-bottom: 16px;
	margin-bottom: 20px;
	color: #16283f;
}
.flowPage .sec1 ul li:first-of-type span {
	font-size: 2.1rem;
}
.flowPage .sec1 ul li:first-of-type::after {
	background-color: #eef1f5;
	height: 1px;
}
.flowPage .sec1 ul li {
	line-height: 1.95;
	color: #333;
}
/* スケジュールブロック（u7）はフロー図の外なので左余白を戻す */
.flowPage .sec1 .u7 {
	padding: 44px 50px 40px;
}
.flowPage .sec1 .u7::after {
	display: none;
}
.flowPage .sec1 .u7 li:first-of-type {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 24px;
}
.flowPage .sec1 .u7 li:first-of-type::after,
.flowPage .sec1 .u7 li:first-of-type::before {
	display: none;
}
.flowPage .sec1 .u7 li:first-of-type p {
	padding: 16px 22px;
	background-color: #f5f8fb;
	border-left: 4px solid #4593d0;
	margin-bottom: 10px;
	line-height: 1.8;
	font-size: 1.6rem;
	color: #222;
	border-radius: 0 4px 4px 0;
}
.flowPage .sec1 .u7 li:first-of-type p:last-of-type {
	margin-bottom: 0;
}
.flowPage .sec1 ul li .commentary {
	margin-top: 8px;
}
.flowPage .sec1 ul li .commentary div {
	color: #5b6874;
}
.flowPage .sec1 .commonH2 {
	position: relative;
	padding-bottom: 22px;
}
.flowPage .sec1 .commonH2::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 40px;
	height: 3px;
	background-color: #ed6c00;
}

/* ==========================================================================
   5. ページ末CTA（B案と共通仕様）
   ========================================================================== */
/* 既存 subpages.css の `.fees_detailPage .sec1 div{overflow-x:auto}` /
   `.service_detailPage .sec1 div{overflow-x:auto}` はセレクタが緩く、
   div である .pageEndCta にも当たって overflow:hidden を打ち消す。
   その結果、装飾円がカード外へはみ出す。ここで明示的に打ち消す。 */
.pageEndCta {
	background: linear-gradient(135deg, #004087 0%, #00559f 55%, #0a63b5 100%);
	border-radius: 8px;
	padding: 46px 40px 44px;
	text-align: center;
	margin-top: 64px;
	position: relative;
	overflow: hidden !important;
	overflow-x: hidden !important;
}
.pageEndCta::after {
	content: '';
	position: absolute;
	right: -60px;
	bottom: -80px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, .05);
	pointer-events: none;
}
.pageEndCta .pageEndCta_ttl {
	font-size: 2.4rem;
	font-weight: bold;
	color: #fff;
	line-height: 1.6;
	margin-bottom: 12px;
	position: relative;
	z-index: 1;
}
.pageEndCta .pageEndCta_txt {
	font-size: 1.5rem;
	color: #d8e6f5;
	line-height: 1.9;
	margin-bottom: 28px;
	position: relative;
	z-index: 1;
}
.pageEndCta .pageEndCta_btn {
	display: inline-block;
	background-color: #ed6c00;
	color: #fff;
	font-size: 1.7rem;
	font-weight: bold;
	text-decoration: none;
	padding: 19px 54px 18px;
	border-radius: 4px;
	transition: background-color .3s ease, transform .3s ease;
	position: relative;
	z-index: 1;
}
.pageEndCta .pageEndCta_btn:hover {
	background-color: #ff7d15;
	transform: translateY(-2px);
}

/* ==========================================================================
   6. レスポンシブ
   ========================================================================== */
@media only screen and (max-width: 1024px) {
	.svcGroups { margin-top: 48px; }
	.svcGroup { margin-bottom: 40px; }
	.svcCard { padding: 26px 24px 24px; }
	.svcGroup_ttl { font-size: 2rem; }
	.feeList { margin-top: 48px; }
	.strength_detailPage .sec1 ul {
		padding: 36px 32px 32px 92px;
	}
	.strength_detailPage .sec1 ul::before {
		left: 30px;
		top: 34px;
	}
	.flowPage .sec1 ul {
		padding: 34px 32px 32px 96px;
	}
	.flowPage .sec1 ul li:first-of-type::before {
		left: -60px;
	}
	.flowPage .sec1 .u1::after,
	.flowPage .sec1 .u2::after,
	.flowPage .sec1 .u3::after,
	.flowPage .sec1 .u4::after,
	.flowPage .sec1 .u5::after {
		left: 59px;
	}
	.flowPage .sec1 .u7 { padding: 40px 32px 36px; }
}
@media only screen and (max-width: 768px) {
	.service_detailPage .sec1 .commonTxt01,
	.fees_detailPage .sec1 .commonTxt01 {
		padding-bottom: 28px;
		line-height: 1.9;
	}
	/* 1列に落とす。2列のままだとカード内が窮屈で逆に安っぽくなる */
	.svcCards { grid-template-columns: 1fr; gap: 14px; }
	.feeList { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
	.svcGroups { margin-top: 40px; }
	.svcGroup { margin-bottom: 34px; }
	.svcGroup_ttl { font-size: 1.8rem; }
	.svcCard { padding: 24px 20px 22px; }
	.svcCard_ttl { font-size: 1.7rem; }
	.svcCard_txt { font-size: 1.4rem; line-height: 1.9; }
	.svcCard_icon { width: 46px; height: 46px; }
	.svcCard_icon img, .svcCard_icon svg { width: 25px; height: 25px; }
	.feeItem { padding: 22px 20px 20px; }
	.feeItem_price { font-size: 2.4rem; }
	.feeNotice { padding: 14px 18px; font-size: 1.3rem; }

	.strength_detailPage .sec1 ul {
		padding: 74px 24px 28px;
		margin-bottom: 16px;
	}
	.strength_detailPage .sec1 ul::before {
		left: 24px;
		top: 24px;
		width: 38px;
		height: 38px;
		font-size: 1.5rem;
		line-height: 38px;
	}
	.strength_detailPage .sec1 ul li:first-of-type { font-size: 1.8rem; }

	.flowPage .sec1 ul {
		padding: 72px 24px 28px;
		margin-top: 16px;
	}
	.flowPage .sec1 ul li:first-of-type::before {
		left: 0;
		top: -46px;
		width: 40px;
		height: 40px;
		font-size: 1.6rem;
		line-height: 40px;
	}
	.flowPage .sec1 .u1::after,
	.flowPage .sec1 .u2::after,
	.flowPage .sec1 .u3::after,
	.flowPage .sec1 .u4::after,
	.flowPage .sec1 .u5::after {
		left: 44px;
		bottom: -16px;
		height: 16px;
	}
	.flowPage .sec1 ul li:first-of-type span { font-size: 1.8rem; }
	.flowPage .sec1 .u7 { padding: 32px 24px 28px; }
	.flowPage .sec1 .u7 li:first-of-type p {
		padding: 14px 16px;
		font-size: 1.5rem;
	}

	.pageEndCta {
		padding: 38px 24px 36px;
		margin-top: 48px;
	}
	.pageEndCta .pageEndCta_ttl { font-size: 1.9rem; }
	.pageEndCta .pageEndCta_txt { font-size: 1.4rem; margin-bottom: 24px; }
	.pageEndCta .pageEndCta_btn {
		display: block;
		padding: 17px 20px 16px;
		font-size: 1.6rem;
	}
}
@media only screen and (max-width: 480px) {
	.svcGroup_head { gap: 12px; padding-left: 14px; }
	.svcGroup_ttl { font-size: 1.7rem; }
	.feeItem_price { font-size: 2.2rem; }
}