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

#contentsBlock section[id^="sec_"]{
	margin-top: 100px;
}

.tabBtn{
	max-width: 740px;
	margin: 60px auto 0;
}
.tabBtn li{
	font-size: var(--fs-xl);
	font-weight: 700;
	padding: 13px 10px;
}

@media screen and (max-width: 767px){
	#contentsBlock section[id^="sec_"]{
		margin-top: 60px;
	}
	.hd01{
		font-size: var(--fs-3xl);
	}
}



/* ------------------------------------------------------------------------ */

/*  ご利用の流れ

/* ------------------------------------------------------------------------ */

.tabWrapper{
	margin-top: 50px;
}

.tabWrapper .container{
	position: relative;
	z-index: 0;
}
.tabWrapper .container::before{
	content: "";
	display: block;
	width: 10px;
	height: calc(100% - 20%);
	background: #ccc;
	position: absolute;
	top: 0;
	left: 95px;
	z-index: 0;
}
.tabWrapper .container2::before{
	height: calc(100% - 10%);
}

.tabWrapper .card{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-top: 40px;
	position: relative;
	z-index: 1;
}
	.tabWrapper .card .icon{
		display: block;
		width: 200px;
		height: 200px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		flex-shrink: 0;
	}
	.container .card1 .icon{
		background-image: url("../img/flow_icon_01.webp");
	}
	.container .card2 .icon{
		background-image: url("../img/flow_icon_02.webp");
	}
	.container .card3 .icon{
		background-image: url("../img/flow_icon_03.webp");
	}
	.container .card4 .icon{
		background-image: url("../img/flow_icon_04.webp");
	}
	.container2 .card1 .icon{
		background-image: url("../img/flow2_icon_01.webp");
	}
	.container2 .card2 .icon{
		background-image: url("../img/flow2_icon_02.webp");
	}
	.container2 .card3 .icon{
		background-image: url("../img/flow2_icon_03.webp");
	}
	.container2 .card4 .icon{
		background-image: url("../img/flow2_icon_04.webp");
	}
	.container2 .card5 .icon{
		background-image: url("../img/flow2_icon_05.webp");
	}

.tabWrapper .detailBox{
	border: solid 1px #cccccc;
	border-radius: 20px;
	padding: 39px;
	align-items: flex-start;
	width: calc(100% - 220px);
	background: #fff;
}
	.tabWrapper .detailBox .label{
		flex-shrink: 0;
		font-size: var(--fs-lg);
		display: block;
		width: 100px;
		line-height: 40px;
		background: #9dbe47;
		color: #fff;
		border-radius: 20px;
	}

	.tabWrapper .detailBox .txtBox{
		text-align: left;
		width: calc(100% - 120px);
	}
		.tabWrapper .detailBox .txtBox .lead{
			margin-top: 20px;
			margin-right: -20px;
			line-height: 1.875;
		}

.detailBox .txtBox .checkBox{
	background: #e5e5e5;
	margin-top: 25px;
	padding: 30px;
}

.detailBox .checkBox .ttl{
	font-size: 2.4rem;
	color: #3a520a;
}

.detailBox .checkBox .list{
	margin-top: 25px;
}
	.detailBox .checkBox .list li{
		text-indent: calc(-1.375em - 10px);
		padding-left: calc(1.375em + 10px);

	}
		.detailBox .checkBox .list li::before{
			content: "\f00c";
			display: inline;
			font-family: 'FontAwesome';
			color: #9dbe47;
			font-size: var(--fs-2xl);
			vertical-align: middle;
			margin-right: 10px;
		}

@media screen and (max-width: 1024px){
	.tabWrapper .container::before{
		left: 60px;
	}
	.tabWrapper .card .icon{
		width: 130px;
		height: 130px;
	}
	.tabWrapper .detailBox{
		padding: 25px;
		width: calc(100% - 150px);
	}
	.tabWrapper .detailBox .txtBox .lead{
		margin-right: 0;
	}
}
@media screen and (max-width: 880px){
	.tabWrapper .detailBox{
		flex-direction: column;
		position: relative;
	}
	.tabWrapper .detailBox .label{
		position: absolute;
		top: 27px;
		left: 25px;
	}
	.tabWrapper .detailBox .txtBox{
		width: 100%;
	}
	.tabWrapper .detailBox .txtBox .hd01{
		padding-left: 110px;
	}
}

@media screen and (max-width: 767px){
	.tabWrapper .container::before{
		left: calc(100% / 2 - 5px);
	}
	.tabWrapper .card{
		flex-direction: column;
		background: #fff;
	}
	.tabWrapper .card .icon{
		display: none;
	}
	.tabWrapper .detailBox{
		padding: 20px 15px;
		width: 100%;
	}
	.tabWrapper .detailBox .label{
		line-height: 29px;
		width: 85px;
		top: 22px;
		left: 15px;
	}
	.tabWrapper .detailBox .txtBox .hd01{
		padding-left: 96px;
		font-size: 2.4rem;
	}
	.detailBox .txtBox .checkBox{
		padding: 15px;
	}
	.detailBox .checkBox .ttl{
		font-size: var(--fs-2xl);
	}
	.detailBox .checkBox .list{
		margin-top: 15px;
	}
}


/* ------------------------------------------------------------------------ */

/*  ご利用時の注意事項

/* ------------------------------------------------------------------------ */

#sec_caution{
	background: #ffeae0;
	padding: 40px 36px;
}
#sec_caution .hd01{
	color: #e06024;
}

#sec_caution .flex{
	margin-top: 25px;
}

#sec_caution .box{
	text-align: left;
	width: calc(100% / 2 - 10px);
}
#sec_caution .box .ttl{
	font-size: 2.4rem;
}

#sec_caution .box ul{
	margin-top: 1em;
}
#sec_caution .box ul li{
	text-indent: -1em;
	padding-left: 1em;
	margin-bottom: 0.3em;
}


@media screen and (max-width: 767px){
	#sec_caution{
		padding: 20px 15px;
	}
	#sec_caution .flex{
		flex-direction: column;
	}
	#sec_caution .box{
		width: 100%;
	}
	#sec_caution .box + .box{
		margin-top: 25px;
	}
}