@charset "UTF-8";
/*! /medical/css/medical.css */

/* 特徴
========================================================================== */

.box-feature .box-border {
	border: 2px dotted rgb(194 62 132 / 60%);
	border-radius: 10px;
}

/* 主契約と選べるオプション（特約）*/
.block-hosyo__medical .ttl-square,
.block-hosyo__option .ttl-square {
	margin-bottom: 10px;
}
.block-hosyo__medical .ttl-square::before,
.block-hosyo__option .ttl-square::before {
	color: #c23e84;
}
.block-hosyo__option {
	position: relative;
	margin-top: 60px;
}
.block-hosyo__option::before {
	position: absolute;
	content: "＋";
	font-size: 4rem;
	color: #333;
	top: -45px;
	left: 50%;
	margin-left: -2rem;
}
.block-hosyo__medical ul,
.block-hosyo__option ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	margin-top: 10px;
}
.block-hosyo__medical ul li,
.block-hosyo__option ul li {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	font-weight: bold;
	padding: 15px 10px 13px;
	background-color: #ccc;
	border-radius: 8px;
}

.block-hosyo__medical ul li {color: #c44b8c; background: #fff; border: 1px solid #c44b8c;}
.block-hosyo__option ul li:first-child {color: #0075c1; background: #e0f0fa;}
.block-hosyo__option ul li:nth-child(2) {color: #335db3; background: #e0e9fa;}
.block-hosyo__option ul li:nth-child(3) {color: #00b5d9; background: #e1f4fa;}
.block-hosyo__option ul li:nth-child(4) {color: #f060a1; background: #ffebf3;}
.block-hosyo__option ul li:nth-child(5) {color: #84b81d; background: #ecf5d7;}
.block-hosyo__option ul li:nth-child(6) {color: #f59b00; background: #fff1db;}
.block-hosyo__option ul li:nth-child(7) {color: #b169a7; background: #f6e6f7;}
.block-hosyo__option ul li:nth-child(8) {color: #b169a7; background: #f6e6f7;}
.block-hosyo__option ul li:nth-child(9) {color: #bf8022; background: #f0e6d0;}

@media screen and (min-width: 768px){
	.block-hosyo__option {
		margin-top: 50px;
	}
	.block-hosyo__medical ul {grid-template-columns: repeat(4, 1fr);}
	.block-hosyo__option ul {grid-template-columns: repeat(5, 1fr);}
	.block-hosyo__medical ul li,
	.block-hosyo__option ul li {
		padding: 15px 10px 13px;
	}
}
@media screen and (max-width: 767px){
	.block-hosyo__option::before {
		top: -60px;
	}
	.block-hosyo__medical ul li,
	.block-hosyo__option ul li {
		font-size: 1.5rem;
		padding: 10px;
	}
}