@charset "UTF-8";

.article{
	margin-bottom:80px;
}
.subtitle{
	font-size:1.2em;
	color:#0067CD;
	font-weight:500;
	margin-bottom:30px;
}
.article .fl1,
.article .fl2{
	display:flex;
	align-items:flex-start;
	gap:30px;
}
.tcarea{
	width:540px;
}
.tcarea p{
	margin-bottom:30px;
}
.article .fl1 .splide,
.article .fl2 .splide{
	width:536px;
}

.article .tasksample{
	margin-top:20px;
}
.article .tasksample p{
	background-color:#F6F5FC;
	padding:15px;
	margin-bottom:10px;
	border-radius:8px;
	width:600px;
	color:#0067CD;
	font-weight:500;
	padding-left:50px;
	position:relative;
}
.article .tasksample p:before{
	content: url(/assets/images/common/check.svg);
	display: inline-block;
	width: 20px;
	height: 20px;
	position: absolute;
    left: 20px;
	top:50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);	
	-ms-transform: translateY(-50%);
}


.tabbtnarea{
	display:flex;
	justify-content:center;
	gap:30px;
	margin-bottom: 40px;
}

.tabbtnarea h3{
	border:1px solid #ccc;
	padding:10px 70px 10px 40px;;
	border-radius:30px;
	background-color:#DEDEDE;
	position:relative;
	cursor:pointer;
}
.tabbtnarea h3:after{
	content: url(/assets/images/common/slidedown.svg);
    display: inline-block;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 40%;
    right: 28px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.tabbtnarea h3.is-active{
	background-color: #0067cd;
    color: #fff;
}
.tabbtnarea h3.is-active:after{
	content: url(/assets/images/common/slidedown-w.svg);
}
.tabbtnarea h3:hover{
	background-color: #0067cd;
	color: #fff;
	transition: all 0.3s ease;
}
.tabbtnarea h3:hover:after{
	content: url(/assets/images/common/slidedown-w.svg);
}


.tab-content{
	background-color:#F6F5FC;
	border-radius:18px;
	padding: 56px 85px;
}

.article .flow{
	display: flex;
    gap: 22px;
    align-items: center;
    margin-bottom: 35px;
    padding-bottom: 25px;
    position: relative;
    border-bottom: 1px solid #0067cd;
}
.article .flow.top .txt{
	width:500px;
}
	
.article .flow p.step{
	color:#0067CD;
	font-size:1.2em;
	font-weight:bold;
}
.article .flow p.step2{
	font-weight:bold;
	border-top:1px solid #ccc;
	margin-top:20px;
	padding-top:10px;
}
.article .flow:after{
	content: "▼";
    color: #0067cd;
    font-size: 25px;
    position: absolute;
    bottom: -27px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.article  .flowlast{
	background-color:#e2eaf8;
	padding:20px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:15px;
}
.article  .flowlast p{
	text-align:center;
}
.article  .flowlast img{
	width:100px;
}




.movebtn{
	position: relative;
    font-size: 0.8em;
    font-weight: bold;
    border: 1px solid #0067cd;
    border-radius: 30px;
    padding: 10px 16px 10px 24px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 52px;
    color: #0067cd;
}
.movebtn:before{
	content: url(/assets/images/common/arrow.svg);
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 20px;
    top: 24%;
}
.movebtn:hover:before{
	content: url(/assets/images/common/arrow-w.svg);
}
.movebtn:after{
    content: "";
    position: absolute;
    top: 6px;
    right: 45px;
    width: 1px;
    height: 30px;
    background-color: #0067cd;
    display: block;
}
.movebtn:hover{
	color: #fff;
	background-color:#0067cd;
}
.movebtn:hover:after{
    background-color: #fff;
}


/* タブレット・PC向けの上書き (例: 1028px以上) */
@media (max-width: 1028px) {
	.fl1 img{
		width: 50%;
	}

}/*@media */

@media (max-width: 856px) {
	.article .fl1, .article .fl2 {
		flex-direction: column;
		align-items: center;
	}
	.fl1 img {
        width: 100%;
		max-width:640px;
    }
	.tcarea {
		width: 100%;
	}
	.article .fl1 .splide, .article .fl2 .splide {
		width: 100%;
		max-width:640px;
	}
	.article .tasksample p {
		width:100%
	}
	.article .flow,
	.tabbtnarea { 
		flex-direction: column;
	}
	.article .flow.top .txt {
		width: 100%;
	}

}/*@media */

@media (max-width: 500px) {
	.tab-content {
		padding: 40px 20px;
	}
}/*@media */