/* ========================================
   reason.css - 当社のこだわりページ専用スタイル
======================================== */

/* ========================================
   1. イントロセクション
======================================== */
.section-block--reason-intro {
	background: var(--color-bg-yellow);
}

.sec--reason-intro {
	padding: 4rem 0 0;
}

@media (min-width: 768px) {
	.sec--reason-intro {
		padding: 5rem 0 0;
	}
}

@media (min-width: 1024px) {
	.sec--reason-intro {
		padding: 6rem 0 0;
	}
}

/* タイトルヘッダー */
.reason-intro__header {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 2.5rem;
	padding: 0 1.25rem;
}

@media (min-width: 768px) {
	.reason-intro__header {
		margin-bottom: 3rem;
	}
}

.reason-intro__en {
	display: block;
	font-family: var(--font-en);
	font-size: var(--title-en-sp);
	color: var(--color-primary);
	letter-spacing: var(--title-en-tracking);
	font-weight: 700;
	line-height: 1;
}

.reason-intro__en::first-letter {
	color: #378add;
}

@media (min-width: 768px) {
	.reason-intro__en {
		font-size: var(--title-en-pc);
	}
}

.reason-intro__title {
	font-size: var(--title-ja-sp);
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: 0.06em;
	line-height: 1.55;
}

@media (min-width: 768px) {
	.reason-intro__title {
		font-size: var(--title-ja-pc);
	}
}

.reason-intro__title-em {
	font-style: normal;
}

/* コンセプト画像 */
.reason-intro__img-wrap {
	border-top: 4px solid #0a4a7a;
	border-bottom: 4px solid #0a4a7a;
	line-height: 0;
}

.reason-intro__img {
	width: 100%;
	height: auto;
	display: block;
}

/* ========================================
   2. COMMITMENTヘッダー（svc-section__hd準拠）
======================================== */
.commitment__hd {
	padding: 0 0 1.75rem;
}

@media (min-width: 768px) {
	.commitment__hd {
		padding: 0 0 2.25rem;
	}
}

.commitment__hd--navy {
	background: #0a4a7a;
}

.commitment__hd--yellow {
	background: var(--color-primary);
}

.commitment__hd-inner {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	max-width: var(--section-width-xl);
	margin: 0 auto;
}

.commitment__hd-icon {
	font-size: 2rem;
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (min-width: 768px) {
	.commitment__hd-icon {
		width: 64px;
		height: 64px;
		font-size: 2.25rem;
	}
}

/* インラインSVGアイコン */
.commitment__hd-icon-svg {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	display: block;
}

@media (min-width: 768px) {
	.commitment__hd-icon-svg {
		width: 80px;
		height: 80px;
	}
}

/* ネイビー背景: 黄色ストローク */
.commitment__hd--navy .commitment__hd-icon-svg .draw-path {
	stroke: var(--color-primary);
}

/* 黄色背景: ネイビーストローク */
.commitment__hd--yellow .commitment__hd-icon-svg .draw-path {
	stroke: #0a4a7a;
}
.commitment__hd-icon-svg .draw-path {
	fill: none;
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
	opacity: 0;
	transition:
		stroke-dashoffset 0.8s ease,
		opacity 0s;
}

/* is-drawn: 描画 */
.commitment__hd-icon-svg.js-icon-draw.is-drawn .draw-path {
	stroke-dashoffset: 0;
	opacity: 1;
}

/* スタガー遅延 */
.commitment__hd-icon-svg .draw-path:nth-child(2)  { transition-delay: 0.08s, 0.08s; }
.commitment__hd-icon-svg .draw-path:nth-child(3)  { transition-delay: 0.16s, 0.16s; }
.commitment__hd-icon-svg .draw-path:nth-child(4)  { transition-delay: 0.24s, 0.24s; }
.commitment__hd-icon-svg .draw-path:nth-child(5)  { transition-delay: 0.32s, 0.32s; }
.commitment__hd-icon-svg .draw-path:nth-child(6)  { transition-delay: 0.40s, 0.40s; }
.commitment__hd-icon-svg .draw-path:nth-child(7)  { transition-delay: 0.48s, 0.48s; }
.commitment__hd-icon-svg .draw-path:nth-child(8)  { transition-delay: 0.56s, 0.56s; }
.commitment__hd-icon-svg .draw-path:nth-child(9)  { transition-delay: 0.64s, 0.64s; }
.commitment__hd-icon-svg .draw-path:nth-child(10) { transition-delay: 0.72s, 0.72s; }
.commitment__hd-icon-svg .draw-path:nth-child(11) { transition-delay: 0.80s, 0.80s; }
.commitment__hd-icon-svg .draw-path:nth-child(12) { transition-delay: 0.88s, 0.88s; }
.commitment__hd-icon-svg .draw-path:nth-child(13) { transition-delay: 0.96s, 0.96s; }
.commitment__hd-icon-svg .draw-path:nth-child(14) { transition-delay: 1.04s, 1.04s; }
.commitment__hd-icon-svg .draw-path:nth-child(15) { transition-delay: 1.12s, 1.12s; }
.commitment__hd-icon-svg .draw-path:nth-child(16) { transition-delay: 1.20s, 1.20s; }
.commitment__hd-icon-svg .draw-path:nth-child(17) { transition-delay: 1.28s, 1.28s; }
.commitment__hd-icon-svg .draw-path:nth-child(18) { transition-delay: 1.36s, 1.36s; }
.commitment__hd-icon-svg .draw-path:nth-child(19) { transition-delay: 1.44s, 1.44s; }
.commitment__hd-icon-svg .draw-path:nth-child(20) { transition-delay: 1.52s, 1.52s; }

.commitment__hd--navy .commitment__hd-icon {
	color: var(--color-primary);
}

.commitment__hd--yellow .commitment__hd-icon {
	color: var(--color-text);
}

.commitment__hd-text {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.commitment__hd-en {
	display: block;
	font-family: var(--font-en);
	font-size: var(--title-en-sp);
	font-weight: 700;
	letter-spacing: var(--title-en-tracking);
	line-height: 1;
}

@media (min-width: 768px) {
	.commitment__hd-en {
		font-size: var(--title-en-pc);
	}
}

.commitment__hd--navy .commitment__hd-en {
	color: rgba(255, 255, 255, 0.6);
}

.commitment__hd--yellow .commitment__hd-en {
	color: rgba(0, 0, 0, 0.45);
}

.commitment__hd-title {
	font-size: clamp(1.25rem, 3vw, 1.75rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
}

.commitment__hd--navy .commitment__hd-title {
	color: #ffffff;
}

.commitment__hd--yellow .commitment__hd-title {
	color: var(--color-text);
}

/* ========================================
   3. COMMITMENTセクション
======================================== */
.commitments {
	display: flex;
	flex-direction: column;
	background: var(--color-bg-yellow);
}

.commitment {
	display: flex;
	flex-direction: column;
	padding: 3rem 1.25rem;
	position: relative;
}

@media (min-width: 768px) {
	.commitment {
		padding: 4rem 2rem;
	}
}

/* 最後のarticle: secの下パディングを適用 */
.commitment:last-child {
	padding-bottom: var(--spacing-xxl);
}

/* 最初以外: 角丸分上に重ねる */
.commitment:not(:first-child) {
	margin-top: calc(-1 * var(--radius-xl));
}

/* 最後以外: padding-bottomを角丸分増やして補正 */
.commitment:not(:last-child) {
	padding-bottom: calc(3rem + var(--radius-xl));
}

@media (min-width: 768px) {
	.commitment:not(:first-child) {
		margin-top: calc(-1 * var(--radius-xl));
	}

	.commitment:not(:last-child) {
		padding-bottom: calc(4rem + var(--radius-xl));
	}
}

/* SP: メイン（ヘッダー+テキスト）上 / 画像下 */
.commitment__split {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: var(--section-width-sm);
	margin: 0 auto;
	width: 100%;
}

/* 奇数（01・03・05）: 左上角丸 */
.commitment--01,
.commitment--03,
.commitment--05 {
	border-radius: var(--radius-xl) 0 0 0;
}

/* 偶数（02・04）: 右上角丸 */
.commitment--02,
.commitment--04 {
	border-radius: 0 var(--radius-xl) 0 0;
}

@media (min-width: 768px) {
	.commitment--01,
	.commitment--03,
	.commitment--05 {
		border-radius: var(--radius-xl) 0 0 0;
	}

	.commitment--02,
	.commitment--04 {
		border-radius: 0 var(--radius-xl) 0 0;
	}
}

@media (min-width: 768px) {
	.commitment__split {
		gap: 1rem;
	}
}

/* テキストボックス: 全方位角丸 + 白背景 */
.commitment__body-wrap {
	border-radius: var(--radius-md);
	overflow: hidden;
	background: #ffffff;
	padding: 2rem 1.25rem;
}

@media (min-width: 768px) {
	.commitment__body-wrap {
		padding: 2.5rem 2rem;
	}
}

/* 画像エリア: 全方位角丸 */
.commitment__banner {
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* 768px＋: 左（ヘッダー+テキスト）/ 右（画像）横並び */
@media (min-width: 768px) {
	.commitment__split {
		flex-direction: row;
		align-items: stretch;
		min-height: 400px;
		max-width: 1200px;
		margin: 0 auto;
	}

	/* 偶数POINT：画像左・テキスト右 */
	.commitment__split--reverse {
		flex-direction: row-reverse;
	}

	/* 画像境目の縦線（通常：画像右側） */
	.commitment__split:not(.commitment__split--reverse) .commitment__banner {
		border-left: 3px solid #0a4a7a;
	}

	/* 画像境目の縦線（逆：画像左側） */
	.commitment__split--reverse .commitment__banner {
		border-right: 3px solid #0a4a7a;
	}

	/* 偶数POINTは黄色 */
	.commitment--02 .commitment__split:not(.commitment__split--reverse) .commitment__banner,
	.commitment--04 .commitment__split--reverse .commitment__banner {
		border-color: var(--color-primary);
	}

	.commitment__main {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
	}

	.commitment__split .commitment__banner {
		flex: 1;
		min-width: 0;
		border-top: none;
		border-bottom: none;
	}

	.commitment__split .commitment__img {
		height: 100%;
		object-fit: cover;
	}

	/* body-wrapは残りの高さを埋める */
	.commitment__split .commitment__body-wrap {
		flex: 1;
	}
}

/* 背景色: commitment__mainの背景はなし */

/* 背景色: article全体（ヘッダー色と同調） */
.commitment--01,
.commitment--03,
.commitment--05 {
	background: #0a4a7a;
}

.commitment--02,
.commitment--04 {
	background: var(--color-primary);
}

/* 親要素: max-width管理なし */
.commitment__body-wrap {
	margin: 0 auto;
	width: 100%;
}

/* commitment__body: パディングなし（body-wrapに移動） */
.commitment__body {
}

@media (min-width: 768px) {
	.commitment__body {
	}
}

.commitment__body p {
	font-size: 0.9375rem;
	color: var(--color-text);
	line-height: 1.9;
	letter-spacing: var(--body-letter-spacing);
}

@media (min-width: 768px) {
	.commitment__body p {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	.commitment__body p {
		font-size: 1.05rem;
	}
}

@media (min-width: 1440px) {
	.commitment__body p {
		font-size: 1.1rem;
	}
}

.commitment__body strong {
	color: #0a4a7a;
	font-weight: 700;
}

/* バナー画像 */
.commitment__banner {
	border-top: 4px solid #0a4a7a;
	border-bottom: 4px solid #0a4a7a;
	line-height: 0;
}

.commitment--02 .commitment__banner,
.commitment--04 .commitment__banner {
	border-color: var(--color-primary);
}

.commitment__img {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 767px) {
	.commitment__banner {
		aspect-ratio: 16 / 10;
		overflow: hidden;
	}

	.commitment__img {
		height: 100%;
		object-fit: cover;
	}
}

@media (max-width: 474px) {
	.commitment__banner {
		aspect-ratio: 16 / 11;
	}
}