@charset "UTF-8";

@charset "utf-8";
:root{
	--i_sub3_color: #eb787f;/*ピンク*/
	--i_sub4_color: #dd6642;/*赤*/
}
.sim{
	background: var(--i_noimg_bg_color);
	padding: 65px 5%;
	border-radius: 30px;
	max-width: 920px;
	margin: 0 auto;
}

.sim h3{
	text-align: center;
	font-size: 3rem;
	margin-bottom: 20px;
	margin-top: 50px;
}
.sim > h3{
	margin-top: 0;
}
.sim h4{
	text-align: left;
	font-size: 2.2rem;
	margin-bottom: 15px;
	margin-top: 50px;
	padding-left: 1em;
	position: relative;
}
.sim h4::before{
	content: "";
	display: block;
	width: 0.4em;
	height: 0.4em;
	border-top: 2px solid var(--i_txt_color);
	border-right: 2px solid var(--i_txt_color);
	transform: rotate(135deg);
	position: absolute;
	top: 0.7em;
	left: 0;
	pointer-events: none;
	z-index: 0;
}
.sim ul{
	display: flex;
	flex-wrap: nowrap;
	gap: 15px;
	align-items: center;
	justify-content: center;
}
.sim ul li{
	list-style: none;
	padding-left: 0;
}
.sim ul li a{
	display: inline-block;
	background: #fff;
	color: var(--i_sub_color);
	border: 2px solid var(--i_sub_color);
	border-radius: 99px;
	padding: 8px 20px;
	min-width: 100px;
	text-align: center;
	transition: .2s ease-in-out;
	font-size: 1em;
	font-weight: 500;
	font-family: inherit;
	box-sizing: border-box;
	line-height: 1.9;
	cursor: pointer;
}
.sim ul li a:hover,
.sim ul li a.selected{
	color: #fff;
	background: var(--i_sub_color);
}
.sim ul.choice1 li:nth-of-type(2) a{
	color: var(--i_sub3_color);
	border-color: var(--i_sub3_color);
}
.sim ul.choice1 li:nth-of-type(2) a:hover,
.sim ul.choice1 li:nth-of-type(2) a.selected{
	color: #fff;
	background: var(--i_sub3_color);
}
.sim ul.choice1 li:nth-of-type(3) a{
	color: var(--i_sub4_color);
	border-color: var(--i_sub4_color);
}
.sim ul.choice1 li:nth-of-type(3) a:hover,
.sim ul.choice1 li:nth-of-type(3) a.selected{
	color: #fff;
	background: var(--i_sub4_color);
}
.sim .per2{
	--i_sub_color: var(--i_sub3_color);
}
.sim .per3{
	--i_sub_color: var(--i_sub4_color);
}


.sim table{
	width: 100%;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 1px 1px 0 var(--i_border_color), -1px -1px 0 var(--i_border_color),1px -1px 0 var(--i_border_color),-1px 1px 0 var(--i_border_color);
	font-size: 1.7rem;
}
.sim table th,
.sim table td{
	padding: 10px 15px;
	font-weight: 500;
}
.sim table th{
	color: #fff;
	background: var(--i_sub_color);
	text-align: left;
}
.sim table th+th{
	border-left: 1px solid rgba(255,255,255,0.5);
}
.sim table tr+tr th{
	border-top: 1px solid rgba(255,255,255,0.5);
}

.sim table td{
	background: #fff;
	text-align: right;
}
.sim table td+td{
	border-left: 1px solid var(--i_border_color);
}
.sim table tr+tr td{
	border-top: 1px solid var(--i_border_color);
}
.sim input[type="number"] {
	border: 1px solid #ccc;
	padding: 3px;
	font-size: 1.7rem;
	font-family: 'Noto Sans JP', "Open Sans", "Helvetica Neue", Helvetica, Arial, Verdana, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	width: 60px;
	margin: 0 3px 0 0;
}
.sim table.table1 th,
.sim table.table1 td{
	text-align: center;
	width: 33.3%;
}
.sim table.table2 th,
.sim table.table2 td{
	width: 50%;
}
.sim table.table3 th,
.sim table.table3 td{
	width: 25%;
}
.sim table.table3{
	box-shadow: -1px -1px 0 var(--i_border_color),0px -1px 0 var(--i_border_color);
}
.sim table.table3 tr td:nth-of-type(2),
.sim table.table3 tr:last-of-type td{
	border-bottom: 1px solid var(--i_border_color);
	border-right: 1px solid var(--i_border_color);
}
.sim table input[type="radio"],
.sim table input[type="checkbox"] {
	min-height: 0;
	opacity: 0;
	margin: 0;
	-webkit-appearance: none;
	-moz-appearance: none;	
}
.sim table input[type="radio"] + label,
.sim table input[type="checkbox"] + label{
	position: relative;
	display: inline-block;
	cursor: pointer;
	padding-left: 25px;
}
.sim table input[type="radio"] + label::before,
.sim table input[type="checkbox"] + label::before {
	content: "";
	position: absolute;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	border: 1px solid rgba(0,0,0,0.2);
	top: 50%;
	left: 0;
	width: 17px;
	height: 17px;
	margin-top: -9px;
	background: #fff;
}
.sim table input[type="radio"]:checked + label::after,
.sim table input[type="checkbox"]:checked + label::after {
	content: "";
	position: absolute;
	top: 50%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	left: 4px;
	width: 9px;
	height: 9px;
	margin-top: -5px;
	background: var(--i_main_color);
}
.sim .total{
	margin-top: 50px;
	background: var(--i_sub_color);
	padding: 10px 15px;
	color: #fff;
	font-weight: 600;
	border-radius: 8px;
	font-size: 2.5rem;
	text-align: center;
}

.tab_inner{
	display: none;
}
.tab_inner.active{
	display: block;
}
@media screen and (max-width: 800px){
	.sim{
		padding: 45px 20px;
		border-radius: 10px;
		font-size: 1.5rem;
	}
	.sim h3{
		font-size: 2.0rem;
		margin-bottom: 20px;
		margin-top: 30px;
	}
	.sim h4{
		font-size: 1.7rem;
		margin-bottom: 10px;
		margin-top: 30px;
	}
	.sim ul {
		gap: 10px;
	}
	.sim ul li a{
		font-size: 1.4rem;
		padding: 8px 15px;
	}
	.sim table {
		font-size: 1.45rem;
	}
	.sim table th,
	.sim table td{
		padding: 8px 10px;
		box-sizing: border-box;
	}
	.sim input[type="number"]{
		width: 45px;
		font-size: 1.45rem;
	}
	.sim .table3 tr{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.sim table.table3 th{
		width: 65%;
	}
	.sim table.table3 th:nth-of-type(2){
		border-top: 1px solid rgba(255,255,255,0.5);
	}
	.sim table.table3 td {
		width: 35%;
	}
	.sim table input[type="radio"] + label,
	.sim table input[type="checkbox"] + label{
		padding-left: 17px;
	}
	.sim table input[type="radio"] + label::before,
	.sim table input[type="checkbox"] + label::before{
		width: 12px;
		height: 12px;
		margin-top: -5px;
	}
	
	.sim table input[type="radio"]:checked + label::after,
	.sim table input[type="checkbox"]:checked + label::after{
		left: 3px;
		width: 6px;
		height: 6px;
		margin-top: -2px;
	}
	.sim table.table3 tr td:nth-of-type(2){
	  border-bottom: none;
	}
	.sim table.table3 tr td{
		border-right: 1px solid var(--i_border_color);
	}
	.sim table.table3 tr:first-of-type td:nth-of-type(2){
		border-top: 1px solid var(--i_border_color);
	}
	.sim .total{
		padding: 8px 10px;
		font-size: 2.0rem;
		margin-top: 30px;
	}
	.sim table.table3 tr td,
	.sim table.table3 tr td:nth-of-type(2),
	.sim table.table3 tr:last-of-type td{
		border-bottom: 1px solid var(--i_border_color);
		border-right: 1px solid var(--i_border_color);
	}
	.sim table.table3{
		box-shadow: 1px 1px 0 var(--i_border_color), -1px -1px 0 var(--i_border_color),1px -1px 0 var(--i_border_color),-1px 1px 0 var(--i_border_color);
	}

}