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

/*------------------------------------------------------------------------------------------------
    feature2
--------------------------------------------------------------------------------------------------*/
.mv-inn {padding-bottom:10%}
.h1-wrap{
	margin: 0 auto;
	font-weight: 700;
	position: relative;
	z-index: 2;
}
.h1-wrap .mv-ttl{
	color:#3D62AD;
	font-size:3.6rem;
	letter-spacing: 0;
	line-height: 1.2
}
.h1-wrap .mv-sub{
	color:#4CAEE7;
	font-size:1.6rem;
	margin-top: 1em
	
}


@media screen and (max-width: 1200px) {
	.h1-wrap .mv-sub{
		font-size:1.4vw;
	}
	.h1-wrap .mv-ttl{
		font-size:3vw;
	}
}

@media screen and (max-width: 768px) {
	.mv-inn {padding-bottom:5%}
	.mv.f2{
		position: relative
	}
	.mv.f2::before{
		position: absolute;
		content:'';
		width:100%;
		height:100%;
		background-image: linear-gradient(90deg, rgba(252,252,252,0.75) 10%, rgba(252,252,252,0) 70%);
	}
	.h1-wrap .mv-sub{
		font-size:3vw;
		margin-top: 0.2em;
		-webkit-text-stroke: 1vw #fff;
		text-stroke: 1vw #fff;
		paint-order: stroke;
	}
	.h1-wrap .mv-ttl{
		font-size:4.6vw;
		-webkit-text-stroke: 1vw #fff;
		text-stroke: 1vw #fff;
		paint-order: stroke;
		
	}

}



.article-wrap p{
	line-height: 2.5;
}
.article-wrap p .note-txt{
	line-height: 2
}

.article-wrap + .article-wrap {
	margin-top: 100px;
}


.flex-box.fb_icon1 .sec-lead{
	width:calc(100% - 30px - 60px);
}


.flex-box.fb1 {
	margin-top: 20px;
	margin-bottom: 80px
}
.flex-box.fb1 .box{
	width:48%
}

.flex-box.fb2{
	margin-top: 20px;

}
.flex-box.fb2 .box.l{
	width:calc(50% + 40px)
}
.flex-box.fb2 .box.r{
	width:calc(50% - 40px)
}

.flex-box.mr .box.l{
	display: flex;
	flex-direction: column;
	align-content: space-between;
	justify-content: space-between
}
.in-image{
	width:50%;
	margin: 0 0 0 auto
}



.image-wrap > div{
	width:calc((100% - 40px) /3);
	margin-bottom: 20px
}

.flex-box.fb_icon6{
	align-items: flex-start
}
.flex-box.fb_icon6 .sec-lead{
	width:calc(100% - 40px - 180px);
	
}


.image-wide img{
	width:80%;
	margin: 20px auto 0
}
.image-half img{
	width:48%;
	margin: 20px 0 0 auto
}
.float img {
  float: right;
  max-width: 25%;
  height: auto;
  margin: -50px 0 10px 0;
  vertical-align: bottom;
}
.float:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}




@media screen and (max-width:1023px) {


}
@media screen and (max-width: 768px) {
	.article-wrap{
		line-height: 2;
	}

	.article-wrap + .article-wrap {
		margin-top: 10vw;
	}


	.flex-box.fb_icon1 .sec-lead{
		width:calc(100% - 3vw - 10vw);
	}


	.flex-box.fb1 {
		margin-top: 4vw;
		margin-bottom: 6vw
	}
	.flex-box.fb1 .box{
		width:48%
	}

	.flex-box.fb2{
		margin-top: 4vw;

	}
	.flex-box.fb2 .box.l{
		width:100%;
		order: 2
	}
	.flex-box.fb2 .box.r{
		width:80%;
		margin: 0 auto;
		order: 1
	}

	.flex-box.mr .box.l{
		width:100%;
		display: flex;
		flex-direction:row;
		align-content:flex-end;
		justify-content: space-between
	}
	.flex-box.mr .box .note-txt{
		width:70%
	}
	.in-image{
		width:30%;
		margin: auto 0 2vw 0
	}
	.flex-box.mr .box.r{
		margin: 0 0 0 auto
	}



.image-wrap > div{
	width:calc((100% - 4vw) /2);
		margin-bottom: 4vw
}
	.image-wrap .f1{order:1}
	.image-wrap .f2{order:2}
	.image-wrap .f3{order:4}
	.image-wrap .f4{order:6}
	.image-wrap .f5{order:5}
	.image-wrap .f6{order:3}

.flex-box.fb_icon6{
	align-items: flex-start
}
.flex-box.fb_icon6 .sec-lead{
	width:calc(100% - 4vw - 20vw);
	
}


.image-wide img{
	width:100%;
	margin: 4vw auto 0
}
.image-half img{
	width:48%;
	margin: 4vw 0 0 auto
}


.float img {
  float: right;
  max-width: 35%;
  height: auto;
  margin: 0 0 4vw 0;
  vertical-align: bottom;
}
	
	
}


.arrow1,
.arrow2{position: relative}
.arrow1::after{
	position: absolute;
	content:'';
	background-color: #ccc;
	  
	width: 12px;
	height: 30px;
	 clip-path: polygon(0 0, 0% 100%, 100% 50%);
	right:-22px;
	top:0;
	bottom:0;
	margin: auto

}
.arrow2::after{
	position: absolute;
	content:'';
	background-color: #ccc;	  
	width: 9px;
	height: 22px;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	right:-15px;
	top:0;
	bottom:0;
	margin: auto
}
.arrow2.re::after{
	transform: rotate(180deg)
}
.arrow2.bot::after{
	transform: rotate(90deg);
	right:0;
	left:0;
	top:auto;
	bottom:-22px;
}
.arrow2.f6::after{
	display: none
}

@media screen and (max-width: 768px) {
	.arrow1::after{
		position: absolute;
		content:'';
		background-color: #ccc;

		width: 2vw;
		height: 5vw;
		clip-path: polygon(0 0, 0% 100%, 100% 50%);
		right:-3vw;
		top:0;
		bottom:3vw;
		margin: auto

	}
	.arrow2::after{
		position: absolute;
		content:'';
		background-color: #ccc;	  
		width: 1.8vw;
		height: 4vw;
		clip-path: polygon(0 0, 0% 100%, 100% 50%);
		right:-3vw;
		top:0;
		bottom:0;
		margin: auto
	}

	.arrow2.f2::after,
	.arrow2.f6::after{
		transform: rotate(90deg);
		right:0;
		left:0;
		top:auto;
		bottom:-4vw;
		display: block

	}
	.arrow2.f3::after{
		transform: rotate(180deg);
		right:auto;
		left:-3vw;
		top:0;
		bottom:0;
	}
	.arrow2.f5::after{
		transform: rotate(0deg);
	}
	.arrow2.f4::after{
		display: none;
	}

}