/* CSS Document */

#ihai{
	& section{
		padding: 70px 0;
		&:where(#features, #price) {
			padding-bottom: 0;
		}
	}
}

#subject{
	& figure{
		position:relative;
	}
}

#features{
	& h3{
		font-size: 3.2rem;
		font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
	}
	&>div{
		padding: 70px 0 48px;
		&:nth-of-type(even){
			background: #fdf8e4;
		}
		&:nth-of-type(1) h4:before{
			background:url(../policy/images/icon-01.png);
			background-size:100% auto;
		}
		&:nth-of-type(2) h4:before{
			background:url(../policy/images/icon-02.png);
			background-size:100% auto;
		}
		&:nth-of-type(3) h4:before{
			background:url(../policy/images/icon-03.png);
			background-size:100% auto;
		}
		& .wrap{
			display: grid;
			grid-template-columns: 1fr calc(30% - 30px);
			grid-gap: 30px;
			@media (max-width: 800px) {
				grid-template-columns: 1fr;
				grid-gap: 0;
				&>div{
					display: contents;
				}
			}
		}
	}
	& h4{
		position:relative;
		margin-bottom: clamp(24px, calc(56 / 1200 * 100vw), 56px);
		padding-left: 80px;
		font-size: 3.2rem;
		line-height: 120%;
		@media (max-width: 800px) {
			order: 1;
		}
		&:before{
			content:"";
			position:absolute;
			top:-20px;
			left:0;
			width:78px;
			height:72px;
		}
	}
	& p{
		margin: clamp(24px, calc(56 / 1200 * 100vw), 56px) 0;
		@media (max-width: 800px) {
			order: 3;
		}
	}
	& figure{
		& img{
			border-radius: 50%;
		}
		@media (max-width: 800px) {
			order: 2;
			width: 60%;
			margin: 0 20%;
		}
		@media (max-width: 480px) {
			width: 80%;
			margin: 0 10%;
		}
	}
}

#flow{
	background:#fdf8e4;
	& h3{
		padding-bottom: 56px;
		font-size: 3.2rem;
		font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
	}
	&>div+div{
		padding-top: clamp(48px, calc(70 / 1200 * 100vw), 70px);
	}
	& h4{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		justify-content: center;
		grid-gap: 20px;
		padding-bottom: clamp(24px, calc(48 / 1200 * 100vw), 48px);
		font-size: 2.4rem;
		line-height: 1.4;
		text-align: center;
		&:before,
		&:after{
			content:"";
			align-self: center;
			width: 100%;
			height: 2px;
			background: #b98c00;
		}
	}
	.tabMenu{
		z-index: 1;
		& ul{
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 1.5em;
			padding: 0 5%;
			@media (max-width: 800px) {
				grid-gap: 0.5em;
			}
		}
		& li{
			padding: 16px 8px;
			font-weight: bold;
			font-size: 2rem;
			line-height: 1.2;
			text-align: center;
			background: #b98c00;
			border: 2px solid #b98c00;
			border-bottom: none;
			color: #fff;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			@media (max-width: 800px) {
				font-size: 1.6rem;
			}
			&.select{
				background: #fff;
				color: inherit;
			}
		}
	}
	.tabContents{
		display: none;
		background: #fff;
		margin-top: -2px;
		padding: 2em 1.5em;
		border: 2px solid #b98c00;
		border-radius: 8px;
		counter-reset: number 0;
		@media (max-width: 800px) {
			padding: 1.5em 1em;
		}
		& dl{
			display: grid;
			grid-template-columns: auto 1fr;
			grid-gap: 1.5rem 2rem;
			@media (max-width: 800px) {
				grid-template-columns: 1fr;
			}
		}
		& dl+dl{
			padding-top: 2em;
		}
		& dt{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			grid-gap: 1rem;
			font-size: 1.8rem;
			font-weight: bold;
			&:before{
				counter-increment: number 1;
				content: counter(number);
				display: grid;
				justify-items: center;
				align-items: center;
				aspect-ratio: 1;
				width: 32px;
				font-size: 2.4rem;
				font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
				color: #fff;
				background: #b98c00;
				border-radius: 50%;
			}
		}
		& dd+dd{
			grid-column: 1;
			grid-row: 1 / 3;
			& figure{
				margin-bottom: 0;
				& img{
					aspect-ratio: 1;
					width: 100px;
					object-fit: cover;
					border-radius: 100%;
					@media (max-width: 800px) {
						aspect-ratio: 6 / 4;
						width: 100%;
						border-radius: 16px;
					}
				}
			}
		}
	}
	.tabContents.select{
		display: block;
	}
}

#flowNew{}

#flowAddition{}

#price{}

#pricePlan{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0 2.5rem;
	margin: 48px auto;
	padding: 2em 1.5em;
	max-width: 960px;
	border: 2px solid #b98c00;
	border-radius: 8px;
	background: #fff;
	box-sizing: border-box;
	@media (max-width: 800px) {
		grid-template-columns: 1fr;
		padding: 1.5em 1em;
	}
	@media (max-width: 1000px) {
		margin: 48px 15px;
	}
	& h4{
		grid-column: 1 / 3;
		justify-self: center;
		margin-bottom: 1em;
		padding: 0.25em 1em 0.5em;
		font-size: 2.4rem;
		line-height: 1.4;
		text-align: center;
		border-bottom: 2px solid #b98c00;
		@media (max-width: 800px) {
			grid-column: 1;
		}
	}
	&>div{
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		grid-gap: 1.5rem;
		& h5{
			margin-bottom: 1em;
			font-size: clamp(1.4rem, 2.1vw, 1.6rem);
			line-height: 1.6;
		}
		& dl{
			justify-self: center;
			display: grid;
			grid-template-columns: 20rem auto;
			grid-gap: 0.5rem;
			white-space: nowrap;
		}
		& dl+dl{
			margin-top: 0.5rem;
			padding-top: 0.5rem;
			border-top: 1px solid #b98c00;
		}
		& dt{
			text-align: left;
		}
		& dd{
			text-align: right;
		}
		& figure{
			order: -1;
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 0.25rem;
			margin: 0;
			&>div{
				position: relative;
				&:before{
					display: grid;
					justify-content: center;
					align-items: center;
					content: "表";
					position: absolute;
					margin: 0.5em;
					aspect-ratio: 1;
					width: 3rem;
					font-size: 1.5rem;
					background: #b98c00;
					color: #fff;
					border-radius: 50%;
				}
			}
			&>div:nth-of-type(2){
				&:before{
					content: "裏";
				}
			}
		}
	}
	&>div+div{
		@media (max-width: 800px) {
			margin-top: 3rem;
		}
	}
}

/* Media Queries - wrapper size */
@media (max-width: 1000px) {
}

/* Media Queries - Small Tablet & Smartphone */
@media (max-width: 800px) {
}

/* Media Queries - Smartphone */
@media (max-width: 480px) {
}