@charset "utf-8";

/* ======================================================================
 * CSSカスタムプロパティ（変数）
 * ====================================================================== */
:root {
	--white: #fff;
	--black: #000;
	--magenta: #d80084;
	--magenta-dark: #a20063;
	--magenta-bright: #cf1f8d;
	--magenta-light:#e0339d;
	--magenta-vivid-alpha: rgba(230, 0, 122, 0.85);
	--primary-dark: #152a63;
	--soft-gray: #d1d5db;
	--light-gray: #e5e7eb;
	--pale-gray: #f3f4f6;

	--fcena-cta: #165aa1;
	--str-cta: #26815e;
	--pale-green-gray: #f8fAf8;

	--text: var(--black);
	--text-dark: var(--black);
	--text-light: #57564f;
	--text-entry-links: #3f3e39;

	/* フォントサイズ */
	--font-size-big: 2.4rem;
	--font-size-big-sp: 1.8rem;
	--font-size-base: 1.6rem;
	--font-size-list: 1.5rem;
	--font-weight-bold: 600;
}

/* ======================================================================
 * ログイン関連のスタイル
 * ====================================================================== */

#js-ctrl-icon-sp {
	margin-left: -16px !important;
}

@media only screen and (max-width: 767px) {
	#js-ctrl-icon-sp {
		margin-left: -0 !important;
	}
}

#header-group-nav-inner .utility-icon.login {
	background-color: var(--magenta) !important;
	border: 1px solid var(--magenta-dark) !important;
	box-shadow: 0 0 3px 0 rgba(216, 0, 132, 0.4) !important;
	margin-left: 10px;
	box-sizing: border-box;
}

@media only screen and (max-width: 1000px){
	#header-group-nav-inner .utility-icon.login {
		background: none !important;
		border: 0 !important;
		box-shadow: none !important;
		margin-left: 20px;
	}
}

#header-group-nav-inner .utility-sp.login {
/* 左右の白塗りの空間を埋める */
	margin-left: -16px !important;
	margin-right: -16px !important;
	background-color: var(--magenta) !important;
	padding-left: 11px;
}

@media only screen and (min-width: 1001px) {
	#header-group-nav-inner .utility > li.contact > a > img {
		height: 18px;
		object-fit: contain;
		width: auto;
	}
	#header-group-nav-inner .utility-sp > li.contact > a > img {
		height: 18px;
		object-fit: contain;
		width: auto;
	}
}

/* ======================================================================
 * 汎用コンテンツセクションのスタイル
 * ====================================================================== */

.content-section {
/*
	max-width: 1100px; */
	margin: 0 auto;
	line-height: 1.9;
}

.content-section-title {
	font-size: 2rem;
	font-weight: var(--font-weight-bold);
	color: var(--text-entry-links);
	margin-bottom: 20px;
}

/* ======================================================================
 * FCENAグローバルコンテナ/カードスタイル
 * ====================================================================== */

/* FCENAサイト全体のコンテナ */
.fcena-container {
	max-width: 1280px;
	margin: 0 auto;
	color: var(--text);
}

/* FCENAコンテナ内のリンク色 */
.fcena-container a {
	color: var(--text);
}

/* FCENAカードコンポーネント */
.fcena-card {
	background: var(--white);
	border-radius: 8px;
	padding: 16px 20px;
	margin-bottom: 16px;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		0 6px 16px rgba(0, 0, 0, 0.04);
	width: 100%;
	break-inside: avoid; /* カラムレイアウトでの改行抑制 */
}

/* FCENAグリッド内のカード要素 */
.fcena-grid .fcena-card {
	display: block;
	margin-bottom: 0;
}

/* FCENAタイトル */
.fcena-title {
	color: var(--text-dark);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	margin-bottom: 12px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--soft-gray);
}

/* FCENAリスト */
.fcena-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.fcena-list li {
	border-bottom: 1px solid var(--soft-gray);
	padding: 8px 0;
	font-size: var(--font-size-list);
}

.fcena-list li a {
	text-decoration: none;
}

.fcena-list li a:hover {
	color: var(--magenta);
}

/* FCENAグリッドレイアウト */
.fcena-grid {
	margin-bottom: 24px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: start;
}

/* FCENAサブ見出し */
.fcena-subhead {
	font-size: var(--font-size-list);
	color: var(--text-light);
	margin-top: 12px;
	margin-bottom: 4px;
	border-bottom: none;
	font-weight: var(--font-weight-bold);
	display: block !important;
}

/* ======================================================================
 * ヒーローエリア導線UI
 * ====================================================================== */

.fcena-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px !important;
}

/* FCENAエントリーボタン */
.fcena-hero-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 20px;
	border-radius: 8px;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.fcena-hero-btn:hover {
	transform: translateY(-1px);
}

.fcena-hero-btn.is-primary {
	background: var(--white);
	color: var(--primary-dark);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}

.fcena-hero-btn.is-primary:hover {
	background: var(--pale-gray);
}

.fcena-hero-btn.is-secondary {
	background: rgba(255, 255, 255, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: var(--white);
}

.fcena-hero-btn.is-secondary:hover {
	background: rgba(255, 255, 255, 0.16);
}

.lf-hero-a .lf-hero-contents .lf-hero-contents-inner .sub-title-sp {
	display:none;
}

/* ======================================================================
 * 外向け導線UI
 * ====================================================================== */

/* FCENAエントリーカード */
.fcena-entry-card {
	background: var(--white);
	border: 1px solid var(--soft-gray);
	border-radius: 10px;
	padding: 20px 22px;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		0 6px 16px rgba(0, 0, 0, 0.04);
}

.fcena-entry-card.is-strong {
/* 元マゼンタ
	border-color: rgba(216, 0, 132, 0.22);*/
	border-color: rgba(0, 0, 0, 0.08);
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		0 8px 18px rgba(0, 0, 0, 0.06);
}

.fcena-entry-card.str {
	background: var(--pale-green-gray);
	border: 1px solid var(--light-gray);
	padding: 28px 40px;
}

.fcena-entry-card-title {
	margin: 0 0 10px;
	font-size: var(--font-size-big);
	line-height: 1.5;
	font-weight: var(--font-weight-bold);
	color: var(--text-dark);
}

.fcena-entry-card-copy {
	margin: 0 0 14px;
	font-size: 1.5rem;
	line-height: 1.8;
	color: var(--text-light);
}

/* FCENAエントリーカード内のリンク */
.fcena-entry-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fcena-entry-links li + li {
	margin-top: 10px;
}

.fcena-entry-links a {
	display: inline-block;
	position: relative;
	padding-left: 18px;
	font-size: var(--font-size-base);
	line-height: 1.7;
	font-weight: var(--font-weight-bold);
	color: var(--text-entry-links);
	text-decoration: none;
}

.fcena-entry-links a .icon-c {
	display: inline-block;
	content: url('/solutions/common/images/icon/icon-window-01.png');
}

.fcena-entry-links a:hover .icon-c {
	content: url('/solutions/common/images/icon/icon-window-04.png');
}

/* FCENAエントリーカードリンクの左矢印アイコン */
.fcena-entry-links a::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 0;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--magenta-vivid-alpha);
	border-right: 2px solid var(--magenta-vivid-alpha);
	transform: rotate(45deg);
}

.fcena-entry-links a:hover {
	color: var(--magenta);
}

/* FCENAエントリーCTAグループ */
.fcena-entry-cta-group {
	display: grid;
	gap: 12px;
}

/* FCENAエントリーCTAボタン */
.fcena-entry-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 16px;
	border-radius: 8px;
	background: var(--magenta-light);
	color: var(--white) !important;
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(224, 51, 157, 0.16);

	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	width: 95%;
	margin: 0 auto;
}

.fcena-entry-cta:hover,
.fcena-entry-cta:focus-visible {
	background: var(--magenta-bright);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(224, 51, 157, 0.20);
}

.fcena-entry-cta.fcena {
	background: var(--fcena-cta) !important;
	box-shadow:0 2px 4px rgba(0,0,0,.08);
}

.fcena-entry-cta.str {
	background: var(--str-cta) !important;
	box-shadow:0 2px 4px rgba(0,0,0,.08);
}

.fcena-entry-cta.fcena:hover,
.fcena-entry-cta.fcena:focus-visible,
.fcena-entry-cta.str:hover,
.fcena-entry-cta.str:focus-visible {
	filter: brightness(1.1);
	box-shadow: 0 4px 8px rgba(0,0,0,.12);
}

/* 外向け導線UI（追加カード用ラッパー）*/
.fcena-additional-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 16px;
	margin-bottom: 24px;
	align-items: stretch;
}

/* 2倍幅カードのスタイル */
.fcena-entry-card.is-double-width {
	grid-column: span 2;
}

/* 通常幅のカードのスタイル (明示的に1カラム幅を確保) */
.fcena-additional-cards .fcena-entry-card:not(.is-double-width) {
	grid-column: span 1;
}

/* 2倍幅カード内の2カラムコンテナ */
.fcena-double-column-content {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 60px;
}

/* 2倍幅カード内のタイトルは、カードに対して1つ、横2列を上端で揃える */
.fcena-entry-card.is-double-width .fcena-entry-card-title {
	grid-column: span 2;
/*	margin-bottom: 16px; */
	margin-bottom: 20px;
}
.fcena-entry-card .fcena-entry-card-title {
	margin-bottom: 20px;
}

/* fcena-double-column-content内のコンテンツの調整 */
/* カードタイトルと横2列の上端を揃えるため、コピーとリンクリストのマージンを調整 */
.fcena-double-column-content .fcena-entry-card-copy {
	margin-top: 0;
	margin-bottom: 14px;
}
.fcena-double-column-content .fcena-entry-links {
	margin-top: 0;
}

/* ======================================================================
 * レスポンシブ調整
 * ====================================================================== */

/* タブレット向けスタイル */
@media only screen and (max-width: 1000px) {
	.fcena-entry-grid {
		grid-template-columns: 1fr;
	}
	/* .hero-area-b {
		height: auto;
		min-height: 300px;
		max-height: none;
	} */
	/* 新規追加カードのレスポンシブスタイル */
	.fcena-additional-cards {
		grid-template-columns: 1fr;
		margin-left: 0;
	}
	.fcena-entry-card.is-double-width {
		grid-column: span 1;
	}
	.fcena-double-column-content {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.fcena-double-column-content .left-col-content-wrapper {
		margin-bottom: 32px;
	}
	.fcena-entry-card.is-double-width .fcena-entry-card-title {
		grid-column: span 1;
	}
	.fcena-additional-cards > * > .fcena-entry-card {
		margin: 0 0 16px 0;
	}
	.fcena-grid {
		grid-template-columns: 1fr;
	}
}

/* スマートフォン向けスタイル */
@media only screen and (max-width: 767px) {
	.fcena-entry-card {
		padding: 18px 18px;
	}
	.fcena-entry-card.str {
		padding: 28px 18px;
	}
	.fcena-entry-card-title {
		font-size: var(--font-size-big-sp);
	}
	.fcena-hero-actions {
		margin-top: 16px !important;
	}
	.lf-hero-a .lf-hero-contents .lf-hero-contents-inner .sub-title {
		display: none !important;
	}
	.lf-hero-a .lf-hero-contents .lf-hero-contents-inner .sub-title-sp {
		display:block;
		font-size: 1.8rem;
		margin-top: 20px !important;
	}
}