:root {
--fontfamily: "Noto Sans JP", sans-serif;
--fontcolor: #000;
--maincolor:#F4F4EE;
--subcolor: #C9C7AF;
}


div, li {
	font-family: "Noto Sans JP", sans-serif;
}

.parent_frame{
	width: 100%;
	margin: 0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:3vh;
}

.support_description{
	text-align:left;
	font-family: "Kosugi", sans-serif;
	font-size: 1.2rem;
	margin: 0 auto;
}

.extend_contract{
	margin 2vh auto;
}

.horizonal_frame, .vertical_frame{
	width:100%;
	margin:0;
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
}

.horizonal_frame{
	flex-direction: row;
	gap: 3vw;
}

.vertical_frame{
	flex-direction: column;
	gap: 2vh;
}

.service_frame{
	gap:2vw;
}

.service_frame img{
	max-width:430px;
}

.service_title{
	font-size:2rem;
}

.detail_frame, .detail_title, .detail_left, .detail_right, 
.notapplicable_frame, .notapplicable_title, .notapplicable_left, .notapplicable_right{
	border: 1px solid #C9C7AF;
}

.detail_title, .detail_left, .notapplicable_title, .notapplicable_left{
	background-color: #F4F4EE;
}

.detail_title, .notapplicable_title{
	font-weight:bold;
	font-size:1.1em;
}

.detail_title h1, .notapplicable_title h1{
	padding:1em 0;
}

.detail_description, .notapplicable_description{
	display:flex;
}

.detail_left, .notapplicable_left{
	display:block;
	flex: 1;
	min-width: 14em;
}

.detail_left h1, .detail_left div, .notapplicable_left h1{
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.detail_right, .notapplicable_right{
	width:85%;
	text-align: left;
	padding: 1em 0 1em 3em;
}

.detail_right span, .notapplicable_right span{
	font-size:0.77em;
}

.detail_left div, .notapplicable_left span{
	font-size:0.77em;
	font-weight:bold;
	line-height:1em;
}


.notapplicable_message{
	margin:2em 0;
}

.notapplicable_message span{
	border-bottom:1px solid black;
}

.notapplicable_message2{
	margin-top: -1.5em;
	text-align: left;
}

.movie_frame{
	width: 100%;
	
}

.movie_contents{
	border-radius:15px;
	border:0;
	width:clamp(380px, 44vw, 850px);
	height:auto;
	margin:1.2vh 0;
	aspect-ratio: 16 / 9;
}


@media(max-width:768px){
	.parent_frame{
		margin:0 auto;
		gap:4.5vh;
	}
	
	.horizonal_frame, .vertical_frame{
		margin:0 auto;
	}
	
	
	.service_frame{
		flex-direction:column;
	}
	
	.detail_left, .notapplicable_left{
		min-width:6em;
	}
	
	.detail_left div{
		top:60%;
	}
	
	.detail_left h1, .notapplicable_left h1{
		line-height:1.1em;
	}
	
	.detail_right, .notapplicable_right{
		padding:1em 0 1em 1em;
	}
}