/* TOP page styles */

/*-----------------------------------------
TOP共通
-------------------------------------------*/
.c-section {
	padding-block: var(--space-4xl);
}

@media screen and (max-width: 896px) {
	.c-section {
		padding-block: var(--space-3xl);
	}
}

/*-----------------------------------------
ファーストビュー（CTAパネル・KV）
-------------------------------------------*/
.p-top-fv {
	position: relative;
}

.p-top-fv__panel {
	position: absolute;
	top: 50%;
	right: calc(60 / 1440 * 100vw);
	transform: translateY(-50%);
	z-index: 2;
	padding: calc(32 / 1440 * 100vw) calc(24 / 1440 * 100vw);
	border-radius: calc(30 / 1440 * 100vw);
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: var(--shadow-sm);
	width: calc(332 / 1440 * 100vw);
}

.p-top-fv__panel-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(26.5 / 1440 * 100vw);
	margin-bottom: calc(4 / 1440 * 100vw);
	font-weight: var(--font-weight-medium);
	text-align: center;
	font-size: calc(16 / 1440 * 100vw);
	letter-spacing: 0.08em;
	padding-inline: calc(20 / 1440 * 100vw);
}

.p-top-fv__panel-heading::before,
.p-top-fv__panel-heading::after {
	flex-shrink: 0;
	width: calc(8 / 1440 * 100vw);
	height: calc(18 / 1440 * 100vw);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	content: '';
}

/* 新規加入をご検討の方 */
.p-top-fv__panel-new .p-top-fv__panel-heading {
	color: #f3982e;
}

.p-top-fv__panel-new .p-top-fv__panel-heading::before {
	background-image: url('../img/top/icon-dots-orange-left.svg');
}

.p-top-fv__panel-new .p-top-fv__panel-heading::after {
	background-image: url('../img/top/icon-dots-orange-right.svg');
}

/* ご加入者の方へ */
.p-top-fv__panel-join .p-top-fv__panel-heading {
	color: var(--color-primary);
}

.p-top-fv__panel-join .p-top-fv__panel-heading::before {
	background-image: url('../img/top/icon-dots-blue-left.svg');
}

.p-top-fv__panel-join .p-top-fv__panel-heading::after {
	background-image: url('../img/top/icon-dots-blue-right.svg');
}

.p-top-fv__actions {
	display: grid;
	gap: calc(8 / 1440 * 100vw);
}

/* CTAボタン共通 */
.p-top-fv__btn {
	display: flex;
	align-items: center;
	gap: calc(12 / 1440 * 100vw);
	padding: calc(16 / 1440 * 100vw) calc(25 / 1440 * 100vw) calc(16 / 1440 * 100vw) calc(30 / 1440 * 100vw);
	border: calc(1 / 1440 * 100vw) solid rgba(41, 130, 211, 0.5);
	border-radius: calc(40 / 1440 * 100vw);
	font-size: calc(16 / 1440 * 100vw);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.08em;
	line-height: 1.5;
	transition: opacity 0.3s;
	height: calc(80 / 1440 * 100vw);
	box-shadow: 0 2px 6px rgba(15, 95, 175, 0.1);
}

.p-top-fv__btn:hover {
	opacity: 0.8;
}

/* ボタン 背景色オレンジ */
.p-top-fv__btn--primary {
	border: none !important;
	color: var(--color-text-secondary) !important;
	background: var(--gradient-secondary);
	width: 100%;
	box-shadow: 0 4px 12px rgba(31, 111, 184, 0.18);
	text-shadow: 0 2px 6px rgba(92, 61, 2, 0.2);
}

.p-top-fv__btn--primary .p-top-fv__btn-arrow img {
	filter: drop-shadow(0 2px 6px rgba(92, 61, 2, 0.2));
}

/* ボタン 背景色白テキストオレンジ */
.p-top-fv__panel-new .p-top-fv__btn {
	color: #f3982e;
	border: calc(1 / 1440 * 100vw) solid #f3982e;
}

/* ボタン 背景色白テキスト青*/
.p-top-fv__btn--secondary {
	background: rgba(255, 255, 255, 0.85);
	color: var(--color-primary);
}

.p-top-fv__btn-icon img {
	width: calc(30 / 1440 * 100vw);
	height: calc(30 / 1440 * 100vw);
	/* flex-shrink: 0; */
}

.p-top-fv__btn-label {
	flex: 1;
}

.p-top-fv__btn-arrow img {
	width: calc(16 / 1440 * 100vw);
	height: calc(16 / 1440 * 100vw);
}

.p-top-fv__panel hr {
	border: 0;
	border-top: calc(1 / 1440 * 100vw) solid var(--color-text-muted);
	opacity: 0.8;
	margin-block: calc(24 / 1440 * 100vw) calc(18 / 1440 * 100vw);
}

/* sp */
@media screen and (max-width: 896px) {
	.p-top-fv__panel {
		position: static;
		transform: none;
		padding: var(--space-xl) var(--space-md);
		width: 100%;
		border-radius: 0;
		box-shadow: none;
		background: url('../img/top/bg-cta.webp') no-repeat center;
		background-size: cover;
	}

	.p-top-fv__panel-heading {
		gap: var(--space-xl);
		margin-bottom: 4px;
		font-size: var(--font-size-md);
		letter-spacing: 0.08em;
	}

	.p-top-fv__panel-heading::before,
	.p-top-fv__panel-heading::after {
		width: 9.5px;
		height: 22px;
	}

	.p-top-fv__actions {
		display: grid;
		gap: var(--space-xs);
	}

	.p-top-fv__btn {
		gap: 12px;
		padding: 16px 25px 16px 30px;
		border: 1px solid rgba(41, 130, 211, 0.5);
		border-radius: var(--radius-lg);
		font-size: var(--font-size-md);
		letter-spacing: 0.08em;
		height: 80px;
	}

	.p-top-fv__panel-new .p-top-fv__btn {
		border: 1px solid #f3982e;
	}

	.p-top-fv__btn-icon img {
		width: 30px;
		height: 30px;
	}

	.p-top-fv__btn-arrow img {
		width: 16px;
		height: 16px;
	}

	.p-top-fv__panel hr {
		border: 0;
		border-top: 1px solid var(--color-text-muted);
		margin-block: var(--space-md) 18px;
	}
}

/*-----------------------------------------
NEWS
-------------------------------------------*/
.c-news--bg-color {
	border-top: 2px solid var(--color-bg);
	background-color: rgba(217, 232, 245, 0.6);
}

/*-----------------------------------------
About
-------------------------------------------*/
.c-section--top-about {
	display: grid;
	gap: var(--space-3xl);
	padding-bottom: var(--space-5xl);
	background-color: #fafbfb;
	position: relative;
}

.p-top-about {
	display: flex;
	gap: var(--space-xl);
}

.p-top-about .c-section-ttl-sub::after {
	left: 0;
	transform: none;
}

.p-top-about__btn {
	width: 362px;
	height: 100%;
	padding: var(--space-sm);
	border-radius: 15px;
	background-color: #d9e8f5;
	margin-inline: auto;
	display: block;
	transition: opacity 0.3s;
}

.p-top-about__btn:hover {
	opacity: 0.8;
}

.p-top-about__txt {
	display: grid;
	gap: var(--space-xs);
	flex: 1;
}

.p-top-about__txt-em {
	font-weight: var(--font-weight-medium);
	text-decoration: underline;
	text-decoration-color: #ffef3a;
	text-decoration-thickness: 20%;
	text-underline-offset: 30%;
	text-decoration-skip-ink: auto;
}

@media print, screen and (max-width: 896px) {
	.c-section--top-about {
		gap: var(--space-xl);
		padding-bottom: var(--space-3xl);
	}

	.p-top-about {
		flex-direction: column;
		gap: var(--space-md);
	}

	.p-top-about__btn {
		max-width: 295px;
		width: auto;
	}
}

/*-----------------------------------------
Risk
-------------------------------------------*/
.p-top-risk {
	margin-left: calc(230 / 1440 * 100vw);
	border-radius: 30px 0 0 30px;
	background: linear-gradient(166deg, #86c0eb 14.74%, #73b4e6 54.71%);
	padding: 120px calc(365 / 1440 * 100vw) 120px calc(120 / 1440 * 100vw);
}

.p-top-risk__inner {
	max-width: clamp(0px, calc(725 / 1440 * 100vw), 725px);
	display: grid;
	gap: var(--space-md);
}

.p-top-risk__ttl {
	font-size: var(--font-size-7xl);
	font-weight: var(--font-weight-medium);
	line-height: 1.6;
	letter-spacing: 0.08em;
	color: var(--color-text-secondary);
	max-width: 15em;
}

.p-top-risk__ttl-em {
	font-weight: var(--font-weight-bold);
	background: linear-gradient(transparent 80%, #ffef3a 80%);
}

.p-top-risk__txt {
	color: var(--color-text-secondary);
	display: grid;
	gap: var(--space-sm);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	letter-spacing: 0.08em;
	line-height: 2.2;
}

.p-top-risk-img {
	position: absolute;
	bottom: 0;
	right: calc(54 / 1440 * 100vw);
	width: clamp(0px, calc(311 / 1440 * 100vw), 311px);
}

@media print, screen and (max-width: 896px) {
	.p-top-risk {
		margin-inline: 20px;
		padding: var(--space-xl) var(--space-md) var(--space-3xl) var(--space-md);
		border-radius: var(--radius-md);
	}

	.p-top-risk__inner {
		max-width: none;
	}

	.p-top-risk__ttl {
		font-size: var(--font-size-sp-sm);
		max-width: none;
	}

	.p-top-risk__txt {
		font-size: 1.5rem;
		font-weight: var(--font-weight-medium);
		line-height: 1.9;
		font-feature-settings: "palt";
	}

	.p-top-risk-img {
		position: absolute;
		right: 24px;
		width: 98px;
	}
}

/*-----------------------------------------
4つの特長
-------------------------------------------*/
/* 背景のウェーブライン */
.c-section--top-features {
	position: relative;
}

.p-top-features-bg img {
	position: absolute;
	z-index: -1;
	width: 100vw;
	object-fit: cover;
}

.p-top-features-bg img:nth-child(1) {
	top: calc(275 / 1440 * 100vw * -1);
	right: 0;
	z-index: 2;
}

.p-top-features-bg img:nth-child(2) {
	top: 540px;
	right: 0;
}

.p-top-features-bg img:nth-child(3) {
	bottom: calc(270 / 1440 * 100vw * -1);
	right: 0;
}

@media screen and (max-width: 1024px) {
	.p-top-features-bg img:nth-child(2) {
		top: calc(750 / 1024 * 100vw);
	}
}

@media print, screen and (max-width: 896px) {
	.p-top-features-bg img:nth-child(1) {
		top: calc(235 / 1440 * 100vw * -1);
	}

	.p-top-features-bg img:nth-child(2) {
		top: calc(50% - 350px);
		transform: translateY(-50%);
	}

	.p-top-features-bg img:nth-child(3) {
		bottom: 30px;
	}
}

.p-top-features {
	max-width: 1100px;
	width: min(100% - 20px * 2, 1100px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	margin: 0 auto;
}

.p-top-features__ttl-em {
	font-family: 'Zen Old Mincho', serif;
	font-size: 6.4rem;
	font-weight: var(--font-weight-bold);
	line-height: 0.65;
	letter-spacing: -0.1em;
}

.p-top-features-item {
	display: flex;
	align-items: center;
}

.p-top-features-item__info {
	padding-block: 110px 50px;
	width: 100%;
}

.p-top-features-item__ttl {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.08em;
	line-height: 1.5;
	margin-bottom: var(--space-md);
}

.p-top-features-item__txt {
	font-weight: var(--font-weight-medium);
}
/* イラスト1枚目 */
.p-top-features-item__img-1 {
	max-width: 329px;
	width: 100%;
	margin-right: 90px;
	flex-shrink: 0;
}
/* イラスト2枚目 */
.p-top-features-item__img-2 {
	max-width: 349px;
	width: 100%;
	margin-left: 70px;
	flex-shrink: 0;
}
/* イラスト3枚目 */
.p-top-features-item__img-3 {
	max-width: 389px;
	width: 100%;
	margin-right: 30px;
	flex-shrink: 0;
}
/* イラスト4枚目 */
.p-top-features-item__img-4 {
	max-width: 389px;
	width: 100%;
	margin-left: 30px;
	flex-shrink: 0;
}

@media print, screen and (max-width: 896px) {
	.p-top-features {
		gap: 0;
	}

	.p-top-features__ttl-em {
		font-size: 4.6rem;
	}

	.p-top-features-item {
		flex-direction: column;
		margin-bottom: var(--space-xl);
	}

	.p-top-features-item:last-child {
		margin-bottom: 0;
	}

	.p-top-features-item__info {
		padding-block: 0;
	}

	.p-top-features-item__ttl {
		font-size: var(--font-size-3xl);
		margin-bottom: var(--space-sm);
	}

	.p-top-features-item__txt {
		font-weight: var(--font-weight-regular);
		margin-bottom: var(--space-xs);
	}

	.p-top-features-item__img-1,
	.p-top-features-item__img-2,
	.p-top-features-item__img-3,
	.p-top-features-item__img-4 {
		max-width: none;
		height: 135px;
		display: flex;
		margin: 0;
		justify-content: center;
	}

	.p-top-features-item__img-1 img,
	.p-top-features-item__img-2 img,
	.p-top-features-item__img-3 img,
	.p-top-features-item__img-4 img {
		height: 100%;
	}

	.p-top-features-item__img-1 {
		order: 2;
	}

	.p-top-features-item__img-3 {
		order: 2;
	}
}

/*-----------------------------------------
補償内容
-------------------------------------------*/
.c-section--top-covered {
	padding-bottom: 0;
	background-color: #fafbfb;
}

.p-top-card-wrapper {
	max-width: 1100px;
	width: min(100% - 20px * 2, 1100px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-xl);
	margin: 0 auto;
	padding-bottom: var(--space-3xl);
}

.p-top-card {
	padding: var(--space-xl) var(--space-2xl);
	display: flex;
	gap: var(--space-lg);
	align-items: center;
	background-color: var(--color-bg);
	box-shadow: var(--shadow-md);
	border-radius: var(--radius-md);
	justify-content: space-between;
}

.p-top-card__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	width: 100%;
}

.p-top-card__ttl {
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.08em;
	line-height: 1.5;
}

.p-top-card__img {
	max-width: 280px;
	width: 100%;
}

.p-top-card__case-item {
	position: relative;
	padding-left: 1em;
}

.p-top-card__case-item::before {
	content: '';
	position: absolute;
	top: 14px;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--color-primary);
}

.p-top-card__btn {
	width: 170px;
	margin-top: var(--space-xs);
}

.p-top-card__btn .c-btn-sm {
	gap: 0;
	width: 100%;
	justify-content: space-between;
}

/* 背景の波線 */
.p-top-covered-bg {
	background-color: var(--color-bg-sub);
	width: 100%;
	aspect-ratio: 1440 / 127;
	background-image: url('../img/top/bg-covered.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center -1px;
}

@media print, screen and (max-width: 896px) {
	.p-top-card-wrapper {
		gap: var(--space-md);
		padding-bottom: var(--space-3xl);
	}

	.p-top-card {
		padding: var(--space-lg) var(--space-md);
		gap: var(--space-sm);
		flex-direction: column;
	}

	.p-top-card__info {
		max-width: 600px;
	}

	.p-top-card__ttl {
		font-size: var(--font-size-3xl);
		text-align: center;
	}

	.p-top-card__img {
		width: auto;
		height: 110px;
	}

	.p-top-card__img img {
		height: 100%;
	}

	.p-top-card .c-card-info__badge {
		width: 76px;
	}

	.p-top-card__case-item::before {
		top: 10px;
		width: 4px;
		height: 4px;
	}

	.p-top-card__btn {
		width: 160px;
	}
}

/*-----------------------------------------
お申込み手続き
-------------------------------------------*/
.p-top-process {
	padding-block: 65px var(--space-4xl);
	background-color: var(--color-bg-sub);
}

.p-top-process__container {
	background-color: var(--color-bg);
	border-radius: var(--radius-md);
	padding: var(--space-2xl) var(--space-xl);
}

.p-top-process__img {
	margin-bottom: var(--space-md);
	display: block;
}

.p-top-guide-container {
	display: flex;
	gap: var(--space-md);
	margin-bottom: var(--space-xl);
}

.p-top-guide-card {
	padding: var(--space-lg);
	background-color: #f7f8f6;
	border-radius: 15px;
	text-align: center;
	width: 100%;
}

.p-top-guide-card__ttl {
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-medium);
	line-height: 2.2;
	letter-spacing: 0.08em;
	margin-bottom: 5px;
}

.p-top-guide-card__img {
	width: 20px;
	height: 15px;
	margin-inline: auto;
}

.p-top-guide-card__text {
	font-size: var(--font-size-sm);
	line-height: 1.8;
	letter-spacing: 0.08em;
}

.p-top-guide-card a {
	text-decoration: underline var(--color-primary);
	transition:
		color 0.3s,
		text-decoration-color 0.3s;
}

.p-top-guide-card a:hover {
	text-decoration-color: transparent;
	color: var(--color-primary);
}

.p-top-process-list {
	display: grid;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
}

.p-top-process-list__item {
	text-decoration: underline #205ea5;
	position: relative;
	padding-left: var(--space-sm);
	transition:
		color 0.3s,
		text-decoration-color 0.3s;
	width: fit-content;
	font-weight: var(--font-weight-medium);
}

.p-top-process-list__item::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--color-primary);
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(13px);
}

.p-top-process-list__item:hover {
	color: var(--color-primary);
	text-decoration-color: transparent;
}

.p-top-process-list__item--pdf::after {
	content: '';
	position: absolute;
	top: 6px;
	right: -24px;
	width: 16px;
	height: 20px;
	background: url('../img/common/pdf-icon.png') no-repeat center / contain;
}

.p-top-process-list__item--new-window::after {
	content: '';
	position: absolute;
	top: 6px;
	right: -27px;
	width: 19px;
	height: 20px;
	background: url('../img/common/icon-new-window.svg') no-repeat center / contain;
}

.p-top-process__link a {
	text-decoration: underline #205ea5;
}

@media screen and (max-width: 896px) {
	.p-top-process {
		padding-block: var(--space-3xl);
	}

	.p-top-process__container {
		padding: var(--space-xl) var(--space-md);
	}

	.p-top-process__img {
		margin-bottom: var(--space-sm);
	}

	.p-top-guide-container {
		flex-direction: column;
		gap: var(--space-xs);
		margin-bottom: var(--space-md);
	}

	.p-top-guide-card {
		padding: var(--space-sm);
	}

	.p-top-guide-card__ttl {
		font-size: var(--font-size-md);
		line-height: 2;
		margin-bottom: 4px;
	}

	.p-top-guide-card__img {
		width: 14px;
		height: 10px;
	}

	.p-top-process-list__item {
		font-size: var(--font-size-sm);
		line-height: 1.8;
	}

	.p-top-process-list__item::before {
		transform: translateY(9px);
	}

	.p-top-process-list__item--pdf::after {
		top: 4px;
		right: -21px;
		width: 13px;
		height: 17px;
	}

	.p-top-process-list__item--new-window::after {
		top: 4px;
		right: -24px;
		width: 16px;
		height: 17px;
	}
}

/*-----------------------------------------
Q&A
-------------------------------------------*/
.c-section:has(.c-accordion) {
	padding-bottom: 0;
}

/* リンク用 */
.c-accordion a {
	color: var(--color-primary);
	transition: opacity 0.3s;
}

.c-accordion a:hover {
	opacity: 0.8;
}