@charset "utf-8";
/* CSS Document */

	body{
	font-feature-settings : "palt";
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif; 
	color: #252525;
	font-size: 18px;
    line-height: 1.6;
	font-weight: 500;
    box-sizing: border-box;
	}
	span.aks{
    display: inline-block;
	} 
	article{
		width: 100%;
		margin: 0 auto;
	}
	h2{
		color: #000c57;
		font-size: clamp(24px, 7vw, 40px);
		font-weight: bold;
		margin: 1.2em 0;
		text-align: center;
	}
	.merit_headline{
		color: #000c57;
		font-size: clamp(18px, 5vw, 27px);
		font-weight: bold;
		margin: 1em 0;
		text-align: center;
		background: #fff;
		border-radius: 100vmax;
	}
	.bold{font-weight: bold;}
	.note{font-size: clamp(13px, 5vw, 16px);}
	.main_ttl{width: 100%;}
	.intro_txt{
		text-align: center;
		margin: 2em 0;
	}
	#content1, #content3, #content5{
		background: #e2f6ff;
		padding: 1em;
		position: relative;
		margin-bottom: clamp(30px, 5vw, 60px);
	}

	#content1::after, #content3::after, #content5::after{
		position: absolute;
		bottom: -40px;
		left: 50%;
        transform: translateX(-50%);
		width: 0;
		height: 0;
		content: '';
		border-width: 40px 100px 0 100px;
		border-style: solid;
		border-color: #e2f6ff transparent transparent transparent;
	}
	#content2, #content4, #content6{
		padding: 1em;
		box-sizing: border-box;
	}
	.content_child{
		max-width: 1080px;
		margin: 0 auto 2em;
	}
	.card_wrap{
		display: grid;
		gap: clamp(24px, 5vw, 50px);
		justify-content: center;
		margin-bottom: 2em;
	}
	.card {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.card img{
		width: 100%;
		height: auto;
	}
	
	.card:nth-child(1) {
		grid-column-start: 1;
        grid-column-end: 3;
	}
	.card:nth-child(2) {
		grid-column-start: 3;
        grid-column-end: 5;
	}
	.card:nth-child(3) {
		grid-column-start: 5;
        grid-column-end: 7;
	}
	.card:nth-child(4) {
		grid-column-start: 2;
        grid-column-end: 4;
	}
	.card:nth-child(5) {
		grid-column-start: 4;
        grid-column-end: 6;
	}
	#content1 .item_grid, #content6 .item_grid{
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(3, 1fr);
		margin: 2em 0;
	}
	#content1 .item_parent{
		background: #fff;
		border-radius: 10px;
		padding: 1.5em;
	}
	#content6 .item_parent{
		background: #e2f6ff;
		border-radius: 10px;
		padding: 1.5em
	}
	.item_parent img{
		display: block;
		width: 100%;
		height: auto;
		margin: auto;
		border-radius: 10px;
	}
	.item_parent table{
		width: 100%;
		position: relative;
		margin: 20px 0;
	}
	
	.item_parent table:before {
		position: absolute;
		bottom: -20px;
		left: 50%;
		transform: translateX(-50%);
		width: 60px;
		height: 8px;
		content: '';
		border-radius: 100vmax;
		background: #2039a5;
	}

	.item_parent table th{
		text-align: left;
		font-weight: bold;
	}
	.item_parent table td{
		padding-left: 1.5em;
	}
	.item_parent p{
		text-align: center;
	}
	.item_parent .price1{
		font-size: clamp(20px, 7vw, 24px);
		font-weight: bold;
		margin: 1.5em 0 0;
		background: linear-gradient(transparent 60%, #fff10a 60%);
	}
	.item_parent .price1 span{
		font-size: clamp(16px, 5vw, 18px);
	}

	.item_parent .price2{
		font-size: clamp(14px, 5vw, 16px);
		margin: 0.5em 0 1em;
	}

	.item_parent .btn{
		display: block;
		max-width: 80%;
		text-align: center;
		color: #252525;
		font-weight: bold;
		text-decoration: none;
		background: #ffa21d;
		border-radius: 10px;
		padding: 0.5em 1em;
		margin: 0 auto;
		box-sizing: border-box;
	}
	.item_parent .btn:hover{
		opacity: 0.6;
		transition: 0.2s;
	}
	.flow{
		max-width: 1080px;
		margin: auto;
	}
	.flow img{
		width: 100%;
		height: auto;
	}
	.cp_timeline_parent{
		position: relative;
		margin: 3em auto 0;
		max-width: 1080px;
	}
	.cp_timeline_parent:before{
		position: absolute;
    	width: 4px;
		content: '';
		background-color: #2039a5;
		left: 0;
		top: 0;
        height: 98.5%;
	}
	.cp_timeline_parent h3{
		margin: 0 0 1em;
		font-size: clamp(18px, 5vw, 21px);
		font-weight: bold;
	}
	.cp_timeline_parent .step3 h3{
		margin: 2em 0 0;
	}
	.cp_timeline_parent .timeline_group{
		position: relative;	
	}
	.cp_timeline_parent .timeline_group:not(:first-of-type) {
		margin-top: 4rem;
}
	.cp_timeline_parent .time_year {
		position: absolute;
		top: 0;
		left: 0;
		padding: 0.5rem 1.5rem;
		color: #fff;
		background-color: #00838F;
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
}
	.cp_timeline_parent .timeline_item {
		margin-bottom: 1em;
		position: relative;
		padding: 2em 0 1.2em 1.2em;
		box-sizing: border-box;
}
	.cp_timeline_parent .timeline_item:not(:last-of-type) {
		margin-bottom: 2em;
}
	.cp_timeline_parent .time{
		position: absolute;
		left: 0;
		box-sizing: border-box;
		min-width: 140px;
		padding: 0.5em 0.5em;
		text-align: center;
		color: #fff;
		background-color: #2039a5;
		margin-top: -65px;
		top: 40px;
		border-radius: 0 10px 10px 0;
		min-height: 2em;
	}
	.cp_timeline_parent .time_step {
		font-weight: 700;
		display: inline-block;
		margin-top: 0;
		font-size: clamp(20px, 7vw, 27px);
}
	.cp_timeline_parent .desc {
		margin: 2em 0 0;
		display: flex;
		gap: 30px;
	}
	.cp_timeline_parent .desc_txt{
		width: 60%;
	}
	.cp_timeline_parent .desc .flag{
		margin: 15px 0 0 0;
	}
	.step_parent{
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin: 2em 0;
	}
	.step_child{
		position: relative;
		background: #e2f6ff;
		border-radius: 10px;
		width: 24%;
		padding: 0.8em;
		box-sizing: border-box;
	}
	
	.step_child .number{
		position: absolute;
		top: -32px;
		left: 20px;
		width: 1.5em;
		height: 1.5em;
		padding: 0.3em;
		background: #fff;
		border-radius: 50%;
		font-size: 1.5em;
		font-weight: bold;
		color: #2039a5;
		text-align: center;
	}
	.step_child h4{
		position: relative;
		text-align: center;
		font-weight: bold;
		margin: 1.8em 0;
	}
	.step_child h4::after{
		position: absolute;
		bottom: -10px;
		left: 50%;
		transform: translateX(-50%);
		width: 50px;
		height: 4px;
		content: '';
		border-radius: 100vmax;
		background: #2039a5;
	}
	.step_child img{
		display: block;
		margin: auto;
		width: 100%;
		height: auto;
	}
	.step_child p{
		margin: 0.5em 0 0;
	}
	.btn_jecc_wrap{
		text-align: right;
	}
	.btn_jecc{
		display: inline-block;
		padding: 0.3em;
		box-sizing: border-box;
		width: 40%;
		background: #6378d5;
		border-radius: 10px;
		color: #fff;
		font-weight: bold;
		text-decoration: none;
		text-align: center;
	}
	.btn_jecc:hover{
		opacity: 0.6;
		transition: 0.2s;
	}
	#content3 ul, #content4 ul{
		list-style: none;
	}
	#content3 li, #content4 li{
		position: relative;
		margin-bottom: 0.5em;
	}
	#content3 li::before, #content4 li::before{
		position: absolute;
		left: -1.1em;
		content: '●';
		color: #2039a5; 
	}
	
	.qa_wrap{
		background: #fff;
		border-radius: 10px;
		padding: 1em 1.5em;
		margin-bottom: 1em;
		box-sizing: border-box;
	}
	.qa_wrap .q_box{
		border-bottom: 1px solid #000c57;
		position: relative;
		padding: 0 0 0.3em 2em;
	}
	.qa_wrap .q_box::before{
		position: absolute;
		content: 'Q';
		left: 0;
		color: #2039a5;
		font-weight: bold;
	}
	.qa_wrap .a_box{
		position: relative;
		padding: 0.3em 0 0 2em;
	}
	.qa_wrap .a_box::before{
		position: absolute;
		content: 'A';
		left: 0;
		color: #ff3f3f;
		font-weight: bold;
	}
	footer{
		font-size: 0.8em;
		text-align: center;
	}
/* タブレット対応（768px以下） */
@media (max-width: 768px) {
	body{
		width: 100%;
		margin: 0;
	}
	article{
		width: 100%;
		margin: 0;
		box-sizing: border-box;
		overflow: hidden;
	}
	.intro_txt{
		text-align: left;
		padding: 0 1em;
		box-sizing: border-box;
	}
	#content1 .item_grid, #content6 .item_grid {
	grid-template-columns: repeat(2, 1fr); /* 2列に変更 */
	gap:10px;
	}

	.cp_timeline_parent:before{
        height: 100%;
	}

	.cp_timeline_parent .desc {
		display: block;
		margin: 1em 0 0;
	}
	
	.cp_timeline_parent .timeline_item {
		padding: 2em 0.7em 1.2em 1em;
}

	.cp_timeline_parent .desc_txt{
		width: 100%;
		margin: 0 0 1em;
	}
	
	.desc_img, .desc_img img{
		width: 100%;
	}
	
	.content_child{
		max-width: 100%;
	}
	
	.flow{
		max-width: 100%;
	}

	.step_parent{
		flex-wrap: wrap;
	}

	.step_child{
		width: 48%;
		margin-bottom: 1.8em;
	}
	
	.step_child:nth-child(3), .step_child:nth-child(4){
		margin-bottom: 0.3em;
	}

	.cp_timeline_parent{
		max-width: 100%;
	}
	#content3 ul, #content4 ul{
		padding: 0 0.5em 0 1em;
		box-sizing: border-box;
	}
	#content3 li, #content4 li{
		position: relative;
		margin-bottom: 0.5em;
	}
	#content3 li::before, #content4 li::before{
		position: absolute;
		left: -1.1em;
		content: '●';
		color: #2039a5; 
	}
}

/* スマートフォン対応（480px以下） */
@media (max-width: 480px) {
	.card_wrap{
		gap: 0.5em;
	}
	#content1 .item_grid, #content6 .item_grid {
		grid-template-columns: 1fr; /* 1列に変更 */
}
	.item_parent img{
		width: 80%;
	}
	.item_parent .btn{
		max-width: 100%;
	}
	.btn_jecc_wrap{
		text-align: center;
	}
	.btn_jecc{
		width: 100%;
		margin: 0.5em 0 0;
	}
}