@charset "UTF-8";

/*
Theme Name: child
Theme URI:
Description:
Template: twentytwentyone
Author: makesview
Author URI: https://makes-view.co.jp/
Version: 1.0.0
*/

:root {
	--main-color: #263B6E;
	--sub-color: #EFBE46;
}

html,
button,
input,
select,
textarea {
	font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

body {
	color: #fff;
	font-size: 16px;
	line-height: 1.7;
	background-color: #333;
}

.wrap {
	width: 1140px;
	margin: 0 auto;
}

.wrap.mid {
	width: 1240px;
}

.wrap.lr {
	width: 1340px;
}

.hidden {
	display: none;
}

/* 共通部分 */
.common_page_wrap {
	padding-block: 30px;
}

.common_title {
	margin-block: 0 3em;
}

.common_title.center {
	text-align: center;
}

.common_title .en {
	font-size: 60px;
	letter-spacing: .08em;
	font-weight: 700;
	line-height: 1.3;
	margin-block: 0 0.2em;
}

.common_title .jp {
	font-size: 20px;
	letter-spacing: .05em;
	font-weight: 700;
	line-height: 1.5;
}

/* ヘッダー */
#main_header {
	padding: 25px 50px;
	background-color: #fff;
}

#main_header .hd_box .logo {
	width: 275px;
}

#main_header .hd_box .logo img {
	width: 100%;
}

/* トップページ シミュレーター */
.top_simulator .list ul {
	display: grid;
	grid-template-columns: repeat(2, 33%);
	gap: 50px;
	justify-content: center;
}

.top_simulator .list li {
	/* background: #fff; */
}

.top_simulator .list li .link {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	height: 100%;
	color: #fff;
	padding: 25px;
	align-items: center;
	gap: 25px;
	border: 2px solid #fff;
	background-color: #333333;
	transition: .3s;
}

.top_simulator .list li .link .img {
	/* width: 40%; */
	aspect-ratio: 240/432;
	flex-shrink: 0;
}

.top_simulator .list li .link .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.top_simulator .list li .link .text_area {
	line-height: 1.5;
}

.top_simulator .list li .link .text_area .en_ttl {
	transition: .3s;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.top_simulator .list li .link .text_area .link_ttl {
	font-size: 18px;
	transition: .3s;
	letter-spacing: .02em;
}

.top_simulator .list li .link:hover {
	color: var(--main-color);
	background-color: #fff;
}

/* フッター */
.top_footer {
	padding: 0.5em;
}

.top_footer .copyright {
	text-align: center;
}

.top_footer .copyright small {
	display: block;
	font-size: 12px;
	letter-spacing: .05em;
	font-weight: 400;
}

/* シミュレーター */
.simulator_cont_sec .container {
	padding-inline: 100px;
}

.simulator_cont_sec .top_box {
	margin-block: 0 1.2em;
}

.simulator_cont_sec .top_box .type_name {
	display: inline-block;
	background: var(--main-color);
	color: #fff;
	font-size: 18px;
	letter-spacing: .08em;
	font-weight: 700;
	line-height: 1.5;
	padding: 0.3em 2.5em;
	margin-block: 0 1em;
}

.simulator_cont_sec .top_box .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
}

.simulator_cont_sec .top_box .main_tab ul {
	display: flex;
	align-items: center;
	gap: 0.7em;
}

.simulator_cont_sec .top_box .main_tab li {
	display: flex;
	justify-content: center;
	align-items: center;
	min-block-size: 35px;
	padding: 0.3em 2.5em;
	border: 1px solid var(--main-color);
	color: #fff;
	background: #2a2a2a;
	font-size: 14px;
	letter-spacing: .08em;
	line-height: 1.5;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: .3s;
}

.simulator_cont_sec .top_box .main_tab li.active,
.simulator_cont_sec .top_box .main_tab li:hover {
	color: #fff;
	background: var(--main-color);
}

.simulator_cont_sec .top_box .print_box .btn_box .btn {
	display: flex;
	justify-content: center;
	align-items: center;
	min-block-size: 35px;
	padding: 0.3em 2.5em;
	border: 1px solid var(--main-color);
	outline: none;
	background: var(--main-color);
	color: #fff;
	font-size: 14px;
	letter-spacing: .08em;
	line-height: 1.5;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: .3s;
}

.simulator_cont_sec .top_box .print_box .btn_box .btn:hover {
	color: var(--main-color);
	background: #fff;
}

.simulator_cont_sec .main_panel {
	display: grid;
	grid-template-columns: 480px 1fr;
	gap: 1em;
	align-items: flex-start;
}

.simulator_cont_sec .main_panel.panel_car {
	grid-template-columns: 550px 1fr;
}

.simulator_cont_sec .main_panel .visual_flex {
	display: flex;
	gap: 15px;
	align-items: flex-end;
}

.simulator_cont_sec .main_panel .visual .visual_name {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 100%);
	font-size: 14px;
	font-weight: 700;
	line-height: 2;
}

.simulator_cont_sec .main_panel .visual {
	flex-grow: 1;
	aspect-ratio: 383/689;
	position: relative;
}

.simulator_cont_sec .main_panel .visual.back,
.simulator_cont_sec .main_panel .visual.front {
	cursor: pointer;
}

.simulator_cont_sec .main_panel .visual.hidden {
	order: -1;
	display: block;
	width: 28%;
	flex-shrink: 0;
	flex-grow: unset;
}

.simulator_cont_sec .main_panel .visual .canvas_layer {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	pointer-events: none;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer1 {
	z-index: 10;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer2 {
	z-index: 20;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer3 {
	z-index: 30;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer4 {
	z-index: 40;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer5 {
	z-index: 50;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer6 {
	z-index: 60;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer7 {
	z-index: 70;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer8 {
	z-index: 80;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer9 {
	z-index: 90;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer10 {
	z-index: 100;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer11 {
	z-index: 110;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer12 {
	z-index: 120;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer13 {
	z-index: 130;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer14 {
	z-index: 140;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer15 {
	z-index: 150;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer16 {
	z-index: 160;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer17 {
	z-index: 170;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer18 {
	z-index: 180;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer19 {
	z-index: 190;
}

.simulator_cont_sec .main_panel .visual .canvas_layer.layer20 {
	z-index: 200;
}

.simulator_cont_sec .main_panel .visual .canvas_layer img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.simulator_cont_sec .main_panel .controller {
	display: flex;
	flex-direction: column;
}

.simulator_cont_sec .main_panel .controller .sub_tab {
	margin-block: 0;
}

.simulator_cont_sec .main_panel .controller .sub_tab ul {
	display: flex;
	align-items: center;
	gap: 0.7em;
}

.simulator_cont_sec .main_panel .controller .sub_tab li {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1 0 auto;
	min-block-size: 35px;
	padding: 0.3em 0.5em;
	border: 1px solid var(--main-color);
	border-bottom: none;
	background: #2a2a2a;
	color: #fff;
	font-size: 14px;
	letter-spacing: .08em;
	line-height: 1.5;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: .3s;
}

.simulator_cont_sec .main_panel .controller .sub_tab li.active,
.simulator_cont_sec .main_panel .controller .sub_tab li:hover {
	color: #fff;
	background: var(--main-color);
}

.simulator_cont_sec .main_panel .controller .sub_panel_box {
	flex-grow: 1;
}

.simulator_cont_sec .main_panel .controller .sub_panel {
	height: 642px;
	overflow-y: scroll;
	/* background: #2E3B4C; */
	background: #2a2a2a;
	padding: 1.2em;
	border: 1px solid var(--main-color);
}

.simulator_cont_sec .main_panel.panel_outer .controller .sub_panel {
	height: 818px;
}

.common_item_list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3em 2em;
}

.common_item_list.column2 {
	grid-template-columns: repeat(2, 1fr);
}

.common_item_list .item .head {
	font-size: 16px;
	letter-spacing: .05em;
	line-height: 1.5;
	font-weight: 700;
	border-left: 3px solid var(--main-color);
	padding-inline: 0.7em 0;
	margin-block: 0 0.8em;
}

.common_item_list .item .sub_head {
	font-size: 15px;
	letter-spacing: .05em;
	line-height: 1.5;
	font-weight: 700;
	margin-block: 0 0.5em;
}

.common_item_list .item .sub_head.mt {
	margin-top: 1em;
}

.common_item_list .item .radio_btns {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}

.common_item_list .item .radio_btns .radio_btn_item input {
	display: none;
}

.common_item_list .item .radio_btns .radio_btn_item .label {
	display: inline-block;
	cursor: pointer;
}

.common_item_list .item .radio_btns .radio_btn_item .img_area {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	aspect-ratio: 1;
	min-width: 0;
	border: 1px solid transparent;
	color: #fff;
	margin-inline: auto;
	transition: .3s;
}

.common_item_list .item .radio_btns .radio_btn_item .img_area .text {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	background: var(--main-color);
	padding: 0.3em;
	font-size: 13px;
	letter-spacing: .03em;
	line-height: 1.5;
	text-align: center;
	font-weight: 700;
	transition: .3s;
}

.common_item_list .item .radio_btns .radio_btn_item .img_area img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.common_item_list .item .radio_btns .radio_btn_item .name {
	display: block;
	font-size: 12px;
	letter-spacing: .03em;
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
	margin-block: 0.4em 0;
	transition: .3s;
}

.common_item_list .item .radio_btns .radio_btn_item input:checked+label .img_area {
	border-color: var(--sub-color);
	color: var(--sub-color);
}

.common_item_list .item .radio_btns .radio_btn_item input:checked+label .name {
	color: var(--sub-color);
}

.common_item_list .item .detail {
	margin-block: 1.5em 0;
}

.common_item_list .item .input_box+.input_box {
	margin-top: 5px;
}

.common_item_list .item .input_box .text_input {
	width: 100%;
	background: #F8F8F8;
	border: 1px solid #D4D4D4;
	outline: none;
	border-radius: 0.2em;
	padding: 0.8em 1em;
	color: initial;
	font-size: 14px;
	letter-spacing: .08em;
	font-weight: 400;
}

.common_item_list .item .checkbox_cont {
	margin-block: 1em 0;
}

.common_checkbox_list ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1.5em;
}

.common_checkbox_list .label {
	display: flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
}

.common_checkbox_list .label input {
	display: none;
}

.common_checkbox_list .label .mark {
	flex-shrink: 0;
	display: block;
	width: 15px;
	aspect-ratio: 1;
	min-width: 0;
	background: #fff;
	position: relative;
}

.common_checkbox_list .label .mark::before {
	content: "";
	border-width: 2px;
	border-color: transparent transparent #fff #fff;
	border-style: solid;
	width: 12px;
	aspect-ratio: 2 / 1;
	min-width: 0;
	margin-top: -0.08em;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%) rotate(-45deg);
	opacity: 0;
}

.common_checkbox_list .label .text {
	font-size: 16px;
	letter-spacing: .05em;
	line-height: 1.5;
}

.common_checkbox_list .label input:checked+.mark {
	background: var(--main-color);
}

.common_checkbox_list .label input:checked+.mark::before {
	opacity: 1;
}

.common_item_list .item .checkbox_cont .cont_box {
	margin-block: 0.5em 0;
}

.common_item_list .item .checkbox_cont .cont_box .inbox {
	display: none;
}

.common_item_list .item .checkbox_cont .cont_box .inbox+.inbox {
	margin-block: 0.5em 0;
}

.common_item_list .item .checkbox_cont .cont_box .inbox .text_box .text {
	font-size: 14px;
	letter-spacing: .05em;
	line-height: 1.5;
}

.common_item_list .item .checkbox_cont .cont_box .inbox .text_box .link {
	color: #fff;
	text-decoration: underline;
}

.common_item_list .item .checkbox_cont .cont_box .inbox .text_box .link:hover {
	text-decoration: none;
}

/* モーダル */
.modal {
	display: none;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
}

.modal__bg {
	background: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
}

.modal__content {
	background: #2a2a2a;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: fit-content;
	max-width: 600px;
	max-height: 80%;
	padding: 50px;
	overflow: scroll;
}

.modal__content .js-modal-close {
	width: 30px;
	aspect-ratio: 1;
	min-width: 0;
	position: absolute;
	top: 15px;
	right: 15px;
	cursor: pointer;
}

.modal__content .js-modal-close::before,
.modal__content .js-modal-close::after {
	content: "";
	width: 2px;
	height: 100%;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}

.modal__content .js-modal-close::before {
	rotate: -45deg;
}

.modal__content .js-modal-close::after {
	rotate: 45deg;
}

/* ローディング */
#loading {
	width: 100%;
	height: 100svh;
	background: var(--main-color);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}

#loading .inner {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#loading .cont .loader {
	width: 55px;
	aspect-ratio: 1;
	min-width: 0;
	margin: 0 auto 0.7em;
	display: grid;
	-webkit-mask: conic-gradient(from 15deg, #0000, #000);
	animation: loader 1s infinite steps(12);
}

#loading .cont .loader,
#loading .cont .loader:before,
#loading .cont .loader:after {
	background: radial-gradient(closest-side at 50% 12.5%, #fff 96%, #0000) 50% 0/20% 80% repeat-y, radial-gradient(closest-side at 12.5% 50%, #fff 96%, #0000) 0 50%/80% 20% repeat-x;
}

#loading .cont .loader:before,
#loading .cont .loader:after {
	content: "";
	grid-area: 1/1;
	transform: rotate(30deg);
}

#loading .cont .loader:after {
	transform: rotate(60deg);
}

@keyframes loader {
	100% {
		transform: rotate(1turn)
	}
}

#loading .cont .text {
	text-align: center;
	color: #fff;
	font-size: 14px;
	letter-spacing: .05em;
	line-height: 1.5;
	font-weight: 700;
}

@media (max-width: 750px) {
	.wrap {
		max-width: 90%;
	}

	body {
		font-size: 13px;
	}

	/* 共通部分 */
	.common_page_wrap {
		padding-block: 10vw;
	}

	.common_title {
		margin-block: 0 2em;
	}

	.common_title .en {
		font-size: 8vw;
	}

	.common_title .jp {
		font-size: 4vw;
	}

	/* ヘッダー */
	#main_header {
		padding: 15px 10px;
	}

	#main_header .hd_box .logo {
		width: 215px;
	}

	/* トップページ シミュレーター */
	.top_simulator .list ul {
		grid-template-columns: repeat(2, 1fr);
		gap: 3vw;
	}

	.top_simulator .list li .link {
		padding: 3vw;
		gap: 3vw;
	}

	.top_simulator .list li .link .text_area .en_ttl {
		font-size: 4.5vw;
	}

	.top_simulator .list li .link .text_area .link_ttl {
		font-size: 3.4vw;
	}

	/* フッター */
	.top_footer .copyright small {
		font-size: 3.2vw;
	}

	/* シミュレーター */
	.simulator_cont_sec .container {
		padding-inline: 2.5%;
	}

	.simulator_cont_sec .top_box {
		margin-block: 0 4vw;
	}

	.simulator_cont_sec .top_box .type_name {
		font-size: 4vw;
	}

	.simulator_cont_sec .top_box .main_tab ul {
		gap: 0.5em;
	}

	.simulator_cont_sec .top_box .main_tab li {
		min-block-size: 9vw;
		padding: 0.2em 2.5em;
		font-size: 3.3vw;
	}

	.simulator_cont_sec .top_box .print_box .btn_box .btn {
		min-block-size: 9vw;
		padding: 0.2em 2.5em;
		font-size: 3.3vw;
	}

	.simulator_cont_sec .top_box .print_box .btn_box .btn:hover {
		color: #fff;
		background: var(--main-color);
	}

	.simulator_cont_sec .main_panel {
		display: block;
	}

	.simulator_cont_sec .main_panel .visual {
		width: 70%;
		margin: 0 auto 4vw;
	}

	.simulator_cont_sec .main_panel .visual.back,
	.simulator_cont_sec .main_panel .visual.front {
		margin-bottom: 8vw;
	}

	.simulator_cont_sec .main_panel .visual .visual_name {
		font-size: 3.2vw;
	}

	.simulator_cont_sec .main_panel .controller {
		display: block;
	}

	.simulator_cont_sec .main_panel .controller .sub_tab {
		margin-block: 0;
	}

	.simulator_cont_sec .main_panel .controller .sub_tab ul {
		flex-wrap: wrap;
		gap: 0.5em;
	}

	.simulator_cont_sec .main_panel .controller .sub_tab li {
		min-block-size: 9vw;
		padding: 0.2em 0.5em;
		font-size: 3.3vw;
	}

	.simulator_cont_sec .main_panel.panel_outer .controller .sub_panel,
	.simulator_cont_sec .main_panel .controller .sub_panel {
		height: 70vw;
		padding: 1em;
	}

	.common_item_list {
		gap: 2em;
	}

	.common_item_list.column2 {
		grid-template-columns: 1fr;
	}

	.common_item_list .item .head {
		font-size: 3.8vw;
	}

	.common_item_list .item .sub_head {
		font-size: 3.6vw;
	}

	.common_item_list .item .radio_btns .radio_btn_item .img_area {
		width: 20vw;
	}

	.common_item_list .item .radio_btns .radio_btn_item .img_area .text {
		font-size: 3vw;
	}

	.common_item_list .item .radio_btns .radio_btn_item .name {
		font-size: 2.8vw;
		margin-block: 0.8em 0;
	}

	.common_item_list .item .detail {
		margin-block: 1em 0;
	}

	.common_item_list .item .input_box+.input_box {
		margin-top: 1vw;
	}

	.common_item_list .item .input_box .text_input {
		font-size: 3.3vw;
	}

	.common_item_list .item .checkbox_cont {
		margin-block: 0 4vw;
	}

	.common_checkbox_list .label {
		gap: 1.5vw;
	}

	.common_checkbox_list .label .mark {
		width: 3vw;
	}

	.common_checkbox_list .label .mark::before {
		width: 2.7vw;
		margin-top: -0.1em;
	}

	.common_checkbox_list .label .text {
		font-size: 3.4vw;
	}

	.common_item_list .item .checkbox_cont .cont_box {
		margin-block: 1.5vw 0;
	}

	.common_item_list .item .checkbox_cont .cont_box .inbox+.inbox {
		margin-block: 2.5vw 0;
	}

	.common_item_list .item .checkbox_cont .cont_box .inbox .text_box .text {
		font-size: 3.4vw;
	}

	.common_item_list .item .checkbox_cont .cont_box .inbox .text_box .link:hover {
		text-decoration: underline;
	}

	/* モーダル */
	.modal__content {
		max-width: 90%;
		padding: 10vw 5vw 5vw;
	}

	.modal__content .js-modal-close {
		width: 6.5vw;
		top: 2.5vw;
		right: 2.5vw;
	}

	/* ローディング */
	#loading .cont .loader {
		width: 13vw;
	}

	#loading .cont .text {
		font-size: 3.2vw;
	}
}