@charset 'utf-8';

#wrapper * {
	box-sizing: border-box;
}

.grid-item {
	display: grid;

	width: auto;
}

.sp_conts_in .search_wrap .input_txt {
	width: 85%;
	height: 50px;
}


.index .faq-icon img {
	max-height: 30px;
}


@media screen and (min-width: 320px) and (max-width: 480px) {
	html {
		font-size: 3.125vw !important;
	}

	body {
		font-size: 1.2rem;
	}
}


.sp_conts_in {
	min-height: 100vh;
}

.emergency_notice .sp_conts_in {
	min-height: auto !important;
}



.faq-list>.support-item {
	margin-bottom: 20px;
}

.support-item a {
	width: 100%;
	min-width: auto !important;

	text-align: center;
}

.support-icon {
	display: inline-block;
	flex-basis: 15%;

	text-align: center;
}


.support-icon img {
	width: 100%;
	height: 100%;
	max-height: 30px;
}

.faq-list>.support-item>a {
	font-size: 16px;

	display: inline-flex;
	align-items: center;
	justify-content: space-between;

	padding: 14px;

	background: #f6f6f6;
}

.faq-list>.support-item>a .support-label {
	display: block;
	flex-basis: calc(100% - 17%);

	text-align: left;
}


.faq-list>.support-item>a::after {
	transform: rotate(135deg);
}

.subtree-wrapper {
	position: relative;
}

.subtree {
	margin-top: 30px;
	padding: 30px 30px 30px;

	border: solid 2px #ccc;
	border-radius: 5px;
	background: #fff;
}


.subtree>.support-item:not(:nth-last-of-type(1)) {
	margin-bottom: 20px;
}

.subtree-wrapper::before,
.subtree-wrapper::after {
	position: absolute;
	top: -30px;
	left: calc(50% - 15px);

	display: inline-block;

	width: 0;
	height: 0;

	content: '';

	border-width: 0 20px 30px 20px;
	border-style: solid;
	border-color: transparent transparent #ccc transparent;
}

.subtree-wrapper::after {
	top: -26px;

	border-width: 0 22px 34px inherit;
	border-color: transparent transparent #fff transparent;
}

.btn_red {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	height: 100%;
	padding: 10px 20px 12px;
}

.support-item strong {
	color: #ffeb3b;
}


@media screen and (min-width: 764px) {
	.grid-item {
		grid-template-columns: .5fr 240px 760px .5fr;
		grid-template-rows: auto auto;
	}

	.ttl_main_wrap {
		grid-row: 1/2;
		grid-column: 1/5;
	}

	.sp_conts_in {
		grid-row: 2/3;
		grid-column: 2/4;
	}

	.main_conts.category2 .sp_conts_in {
		grid-row: 2/3;
		grid-column: 3/4;
	}


	.support-icon img {
		max-height: 40px;
	}

	.faq-list>.support-item>a {
		font-size: 18px;

		padding: 20px;
	}

	.faq-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.faq-list>.support-item {
		width: calc(100% / 2.05);
	}

	.subtree-wrapper {
		width: 205%;
	}

	.subtree {
		display: grid;
		justify-content: space-around;

		grid-template-columns: repeat(3, minmax(15ch, max-content));
		column-gap: 30px;
		row-gap: 20px;
	}

	.subtree-wrapper::before,
	.subtree-wrapper::after {
		left: 25%;
	}

	.faq-list>.support-item:nth-of-type(even)>.subtree-wrapper {
		margin-left: -105%;
	}

	.faq-list>.support-item:nth-of-type(even)>.subtree-wrapper::before,
	.faq-list>.support-item:nth-of-type(even)>.subtree-wrapper::after {
		right: 25%;
		;
		left: auto;
	}

	.subtree-wrapper.subtree-less-item {
		width: min(150%, 36ch);
	}

	.subtree-wrapper.subtree-less-item .subtree {
		grid-template-columns: repeat(auto-fit, minmax(15ch, max-content));
	}

	.subtree>.support-item {
		margin-bottom: 0 !important;
	}
}