@charset "UTF-8";

/* 特長
========================================================================== */
.box-lunaluna {
	padding: 15px;
	margin-top: 15px;
	border: 4px solid #fae5ee;
}
.box-lunaluna .ttl-bold-l {
	color: #e8528d;
	margin: 0 0 5px;
}
@media screen and (max-width: 767px) {
	.box-lunaluna img {
		display: block;
		margin: 0 auto;
	}
}
@media screen and (min-width: 768px) {
	.box-lunaluna {
		display: flex;
		justify-content: space-between;
		gap: 0 15px;
		padding: 20px 30px;
		margin-top: 20px;
	}
}


/* 保障内容・保険料例
========================================================================== */
.tbl-main,
.tbl-opt {
	border-top: none;
}
.tbl-main thead th,
.tbl-opt thead th,
.tbl-price thead th {
	color: #fff;
	font-weight: bold;
	border-top: 1px solid #ccc;
}
.tbl-price thead tr:first-child th span {
	font-size: 1.6rem;
}
@media screen and (min-width: 768px) {
	.tbl-main thead tr:first-child th span,
	.tbl-opt thead tr:first-child th span,
	.tbl-price thead tr:first-child th span {
		font-size: 1.8rem;
	}
}

.th--plan01 {background-color: #23afc7;}
.th--plan02 {background-color: #e9528e;}
.th--plan03 {background-color: #ab549f;}

.th--age {background-color: #666666;}
.th--sex {background-color: #808080;}

.tbl-main thead .th--none,
.tbl-opt thead .th--none {
	border-top: none;
	border-left: none;
}

.td--off {color: #999!important; background-color: #fafafa;}

.medical_usagi .q-icon.is_close {
	background-image: url(/life/nanairo/img/icon/icon_question.svg);
	background-size: 14px 14px;
	background-position: center;
}


/* 基本保障（主契約）
-------------------------------------------------------------------------- */
.tbl-main tbody th {
	position: relative;
	font-size: 1.5rem;
	font-weight: bold;
	text-align: left;
	padding: 10px 28px 10px 8px;
}
.tbl-main tbody th .th--tokuyaku {
	display: block;
	font-size: 1.2rem;
	font-weight: normal;
	margin-bottom: 3px;
}
@media screen and (min-width: 768px) {
	.tbl-main tbody th {
		font-size: 1.8rem;
		padding: 15px 28px 15px 15px;
	}
	.tbl-main tbody th .th--tokuyaku {
		font-size: 1.4rem;
	}
	.tbl-main .sim-col01 {
		width: 220px;
	}
}

/* プラン */
.tbl-main .plan1 .txt-bg {color: #23afc7; border: 1px solid #23afc7;}
.tbl-main .plan2 .txt-bg{color: #e9528e; border: 1px solid #e9528e;}
.tbl-main .plan3 .txt-bg {color: #ab549f; border: 1px solid #ab549f;}

/* 基本保障 */
.tbl-main .th--main01 {
	color: #e8528d;
	background-color: #ffedf5;
}
.tbl-main .th--main01 .q-icon {background-color: #eb5993;}
#modal-main01 .ttl-bg,
#modal-main01 .ttl-bg,
#modal-main01 .ttl-bg {color: #fff; background-color: #eb5993;}

.tbl-main .txt-bg {
	color: #666;
	margin: 0;
	background-color: #fff;
	border: 1px solid #ccc;
}

.tbl-main .price {font-size: 2.6rem !important;}
.tbl-main .price-s {font-size: 2.2rem !important;}

@media screen and (max-width: 767px) {
	.tbl-main thead th {
		display: none;
	}
	.tbl-main tbody th,
	.tbl-main tbody td {
		border-top: 1px solid #ccc;
	}
	.medical_usagi .select-plan {
		padding: 0;
		margin: 10px auto 15px;
	}
	.medical_usagi .select-plan li {
		border: 1px solid #ccc;
		border-radius: 10px;
		overflow: hidden;
	}
	.medical_usagi .select-plan li a {
		position: relative;
		font-size: 1.5rem;
		padding: 34px 8px 8px;
	}
	.medical_usagi .select-plan li a::before{
		content: "";
		display: block;
		position: absolute;
		top: 8px;
		left: 50%;
		transform: translateX(-50%);
		width: 18px;
		height: 18px;
		background-color: #f2f2f2;
		border: 1px solid #999999;
		border-radius: 50%;
		-webkit-box-shadow: 0 6px 1px -4px rgba(0,0,0,0.2) inset;
		-moz-box-shadow: 0 6px 1px -4px rgba(0,0,0,0.2) inset;
		box-shadow: 0 6px 1px -4px rgba(0,0,0,0.2) inset;
	}
	.medical_usagi .select-plan li.select-plan__on::before{
		border: none;
	}
	.medical_usagi .select-plan li.select-plan__on::after{
		content: "";
		display: block;
		position: absolute;
		top: 13px;
		left: 50%;
		transform: translateX(-50%);
		width: 8px;
		height: 8px;
		background: #515050;
		border-radius: 50%;
	}

	.medical_usagi .select-plan .select-plan__on{
		border: none;
	}
	.medical_usagi .select-plan .select-plan__on a {
		color: #fff;
	}
	.medical_usagi .select-plan .select-plan__on a#plan1,
	.medical_usagi .select-plan li.select-plan__on:has(#plan1)::after {background: #23afc7 !important;}
	.medical_usagi .select-plan .select-plan__on a#plan2,
	.medical_usagi .select-plan li.select-plan__on:has(#plan2)::after {background: #e9528e !important;}
	.medical_usagi .select-plan .select-plan__on a#plan3,
	.medical_usagi .select-plan li.select-plan__on:has(#plan3)::after {background: #ab549f !important;}
}


/* 選べる保障
-------------------------------------------------------------------------- */
.img-plus {
	width: 30px;
	margin: 15px auto 0;
}
@media screen and (min-width: 768px) {
	.img-plus {
		width: 40px;
		margin: 20px auto 0;
	}
}


.tbl-opt {
	border-top: 1px solid #ccc;
}

/* 特則・特約 */
.tbl-main .th--opt01 {
	color: #f27b26;
	background-color: #fff0e0;
}
.tbl-main .th--opt01 .q-icon {background-color: #f28333;}
#modal-opt01 .ttl-bg,
#modal-opt02 .ttl-bg,
#modal-opt03 .ttl-bg {color: #fff; background-color: #f28333;}

.tbl-main .th--opt02 {
	color: #e6598a;
	background-color: #ffebf1;
}
.tbl-main .th--opt02 .q-icon {background-color: #eb6191;}
#modal-opt04 .ttl-bg,
#modal-opt05 .ttl-bg {color: #fff; background-color: #eb6191;}

.tbl-main .th--opt03 {
	color: #a6599c;
	background-color: #f1e6f7;
}
.tbl-main .th--opt03 .q-icon {background-color: #b066a6;}
#modal-opt06 .ttl-bg,
#modal-opt07 .ttl-bg,
#modal-opt08 .ttl-bg {color: #fff; background-color: #b066a6;}

.tbl-main .th--opt04 {
	color: #7fad00;
	background-color: #edf5d1;
}
.tbl-main .th--opt04 .q-icon {background-color: #8ab31a;}
#modal-opt09 .ttl-bg {color: #fff; background-color: #8ab31a;}

.tbl-main .th--opt05 {
	color: #0da9d9;
	background-color: #e0f1fa;
}
.tbl-main .th--opt05 .q-icon {background-color: #33b2d9;}
#modal-opt10 .ttl-bg {color: #fff; background-color: #33b2d9;}


/* その他 */
.box-other-opt {
	display: flex;
	gap: 0 15px;
	margin-top: 10px;
}
.box-other-opt li {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-weight: bold;
	text-align: center;
	padding: 15px;
	background-color: #ccc;
	border-radius: 10px;
}
.box-other-opt li span{
	display: block;
	font-size: 1.4rem;
	font-weight: normal;
	margin-bottom: 3px;
}
@media screen and (max-width: 767px) {
	.box-other-opt {
		gap: 0 10px;
	}
	.box-other-opt li {
		font-size: 1.5rem;
		padding: 10px;
	}
	.box-other-opt li span{
		font-size: 1.2rem;
	}
}

.box-other-opt li:first-child {color: #f27b26; background-color: #fff0e0;}
.box-other-opt li:nth-child(2) {color: #a6599c; background-color: #f1e6f7;}
.box-other-opt li:last-child {color: #e54d63; background-color: #fae6e9;}


/* 保険料例
-------------------------------------------------------------------------- */
.tbl-price thead .th--age {
	color: #333;
	background-color: #fff;
}
.tbl-price tbody th {
	color: #fff;
}
.tbl-price tbody tr:nth-child(odd) td {
	background-color: #fafafa;
}