/******************************************
main visual
******************************************/
body{
	overflow-x: hidden;
}
#main{
	position: relative;
	width:100%;
	padding:85px 0 0 0;
}
#main .mainCont{
	position: relative;
	background-color: #E1EFF0;
}
#main .mainCont .contents{
	position: relative;
	margin:0 auto;
	padding:40px 0 0 0;
	background-color: #EFF5F5;
	text-align: center;
}
#main .mainCont .contents h1{
	margin:0;
	padding:0;
}
#main .mainCont .contents img{
	display: block;
	width: 90%;
	max-width: 777px;
	margin:0 auto;
}

@media screen and (max-width: 768px) {
	#main .mainCont{
		height:auto;
	}
	#main .mainCont .contents{
		position: relative;
		width:100%;
		margin:0 auto;
	}
}
@media screen and (min-width: 1025px) {
	#main{
		padding:145px 0 0 0;
	}
	#main .mainCont .contents{
		width:1024px;
	}
}

/******************************************
introduction
******************************************/
#introduction{
	background-color: #3A5B5F;
}

#introduction .wrapper{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	max-width:880px;
	margin:0 auto;
	padding:0;
}

#introduction .title{
	margin: 0 3rem 0 0;
}

#introduction .title img{
	display: block;
	margin: 0 auto;
}

#introduction h2{
	margin: 0 0 3.5rem 0;
	padding:3rem 0 0 1.7rem;
	color:#FFF;
	font-size: 3.5rem;
	font-weight: bold;
	text-align: left;
	line-height: 1.2;
	letter-spacing: 0.1rem;
	border-left: 9px solid #FFF;

}
#introduction h2 span{
	font-size: 2.25rem;
	font-weight: normal;
}

#introduction ul{
	padding:7rem 2rem 0 0;
	margin:0;
	list-style: none;
}

#introduction ul li{
	padding:1.2rem 2rem;
	margin: 0 0 1.125rem 0;
	color:#000;
	font-size: 1.125rem;
	text-align: center;
	line-height: 1.5;
	border-radius: 10px;
	background-color: #E0E3E3;
}
#introduction ul li:nth-child(2n){
	background-color: #FFF;
}

#introduction .msg{
	padding:2rem 0 4rem 0;
	width: 100%;
	text-align: center;
}
#introduction .msg p{
	position: relative;
	color:#FFF;
	font-size: 2.25rem;
	font-weight: bold;
}
#introduction .msg p::before{
	display: inline-block;
	content: '';
	width: 0.9em;
	height: 1.2em;
  	background-image: url(../images/construction/img-deco.png);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: -0.2em;

}
#introduction .msg p::after{
	display: inline-block;
	content: '';
	width: 0.9em;
	height: 1.2em;
  	background-image: url(../images/construction/img-deco.png);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: -0.2em;
	transform: scale(-1, 1);

}
#introduction .msg p span{
	color:#FFCF00;
}

.introduction-arrow {
	margin:0 auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 50px solid transparent;
	border-left: 50px solid transparent;
	border-top: 40px solid #3A5B5F;
	border-bottom: 0;
}

@media screen and (max-width: 768px) {
	#introduction .wrapper{
		display: block;
		padding:0 0.5rem;
	}
	#introduction h2{
		padding-top:0.4em;
		margin-bottom: 1em;
		font-size: 2.2rem;
		font-weight: 550;
	}
	#introduction h2 span{
		font-size: 1.3rem;
	}
	#introduction .title{
		margin-right:0;
	}
	#introduction .title img{
		max-width:50%;
	}
	#introduction ul{
		padding:0;
	}
	#introduction ul li{
		padding:1.2rem 1rem;
		font-size: 1rem;
	}
	#introduction .msg{
		padding-top:1rem;
	}
	#introduction .msg p{
		font-size: 1.25rem;
	}
}

/******************************************
solution
******************************************/
#solution .wrapper{
	position: relative;
	padding:0 0.5rem;
}
#solution h2{
	margin-bottom: 0.8em;
	padding: 0;
	color: #1AA8B8;
	font-size: 2.8rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
}
#solution h2 span{
	font-size: 2rem;
	font-weight: normal;
}

#solution ul{
	margin:0 auto;
	padding: 0 0 2rem 0;
	width:90%;
	max-width:620px;
	list-style: none;
}
#solution ul li{
	margin:0 0 1.2rem 0;
	padding:1em 2em;
	color: #3A5B5F;
	font-size: 1.12rem;
	line-height: 1.5;
	text-align: center;
	border:1px solid #CCCCCC;
	border-radius: 5px;
}
#solution ul li span{
	color: #EA5377;
	font-weight: bold;
}

#solution .img-solution{
	position: absolute;
	bottom:0;
	right: 1rem;
	display: block;
}

@media screen and (max-width: 800px) {
	#solution h2{
		font-size: 2rem;
	}
	#solution h2 span{
		font-size: 1.2rem;
	}
	#solution ul{
		padding: 0;
		width: 100%;
	}
	#solution ul li{
		padding:1em 1em;
		font-size: 1rem;
	}
	#solution .img-solution{
		position: relative;
		right: inherit;
		margin:0 auto;
		max-width: 50%;
	}
}

/******************************************
contents
******************************************/
#contents{
	text-align: center;
	background-color: #EFF5F5;
}
.roundflame{
	position: relative;
	margin:0 auto 6em auto;
	padding:1.2em 0;
	width:90%;
	max-width: 945px;
	background-color: #FFFFFF;
	border:1px solid #B4B4B4;
	border-radius: 15px;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, .16);
}
#contents .wrapper{
	padding-bottom: 1rem;
}

.roundflame .chapter{
	position: absolute;
	top:0;
	left:1.7rem;
	font-size:12.8rem;
	font-weight: 500;
	color: rgba(26,168,184,0.22);
	letter-spacing: -0.05em;
	line-height: 1;
	z-index: 0;
}
.roundflame:nth-child(2n) .chapter{
	left:inherit;
	right: 3rem;
	text-align: right;
}

.roundflame h2{
	margin:1.8em 0 2.3em 5em;
	padding:0 1em 0.2em 0;
	font-size: 1.87rem;
	font-weight: 500;
	text-align: left;
	line-height: 1.4;
	color: #3A5B5F;
	border-bottom: 7px #FFF180 solid;
}
.roundflame:nth-child(2n) h2{
	margin:1.8em 5em 2.3em 0;
	padding:0 0 0.2em 1.7em;
}

.roundflame h2 span{
	color:#EA5377;
}

.roundflame .flex{
	display: flex;
	width: 86%;
	margin: 0 auto 3rem auto;
}
.roundflame .flex .text{
	flex-shrink:1;
	margin-right: 1.2em;
	font-size: 1rem;
	text-align: left;
}
.roundflame .flex p{
	margin:0 0 1.7em 0;
	font-weight: normal;
	line-height: 1.5;
}
.roundflame .flex p.heading1{
	margin:0 0 1.5em 0;
	font-size: 1.2rem;
	font-weight: 500;
	color: #3A5B5F;
}
.roundflame .flex .textRoundGreen{
	margin: 0 0.7em 0 0;
	padding:0.15em 0.4em;
	color:#FFF;
	background-color: #1AA8B8;
	border-radius: 5px;
}
.roundflame .flex p.heading2{
	margin:0 0 0.2em 0;
	font-size: 1.12rem;
	font-weight: 500;
	color: #408287;
}
.roundflame .flex .img{
	width:100%;
	max-width:250px;
}
.roundflame .flex .img img{
	width: 100%;
}

.roundflame h3{
	width: 86%;
	margin:0 auto 1.5em auto;
	font-size:1.6rem;
	font-weight: 500;
	line-height: 1.5;
	color:#1AA8B8;
	text-align: center;
}
.roundflame h3 span{
	color: #EA5377;
}
.roundflame .lead{
	margin:0 0 2rem 0;
	color:#408287;
	font-size: 1.25rem;
}

.roundflame img.fig{
	width: 86%;
	max-width: 840px;
}

@media screen and (max-width: 768px) {
	.roundflame{
		margin-bottom: 3rem;
	}

	.roundflame .chapter{
		position: absolute;
		top:0;
		left:1rem;
		font-size:5rem;
		letter-spacing: 0;
	}
	.roundflame:nth-child(2n) .chapter{
		left:1rem;
		right: inherit;
	}
	.roundflame h2{
		padding-top:0;
		margin-top:2rem;
		margin-left:0;
		margin-bottom:1.5rem;
		font-size:1.125rem;
	}
	.roundflame:nth-child(2n) h2{
		margin:2rem 0 1.5rem 0;
		padding-left: 0;
	}
	
	.roundflame .flex{
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.roundflame .flex p.heading1{
		margin:0 0 1.5em 0;
		font-size: 1rem;
	}
	.roundflame .flex p.heading2{
		font-size: 1rem;
	}
	.roundflame .flex .img{
		width:100%;
		margin:0 auto;
	}
	.roundflame h3{
		width:90%;
		font-size: 1.125rem;
	}
	.roundflame .lead{
		font-size: 1rem;
	}
	.roundflame img.fig{
		width: 100%;
	}
}

/******************************************
recommend
******************************************/
#recommend .wrapper{
	position: relative;
	padding:6rem 0.5rem 0 0.5rem;
}
#recommend h2{
	margin: 0.5em auto 0.8em auto;
	padding: 0;
	color: #1AA8B8;
	font-size: 2.8rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.2;
}
#recommend h2 span{
	font-size: 2rem;
	font-weight: normal;
}
#recommend .catchimg{
	margin:0 auto;
	width:90%;
	max-width: 450px;
	text-align: center;
}
#recommend .catchimg img{
	display: block;
	width: 100%;
}
#recommend .lead{
	margin:0 0 2rem 0;
	font-size: 1.25rem;
	font-weight: 550;
	text-align: center;
	color:#3A5B5F;
}
#recommend ul{
	width: 90%;
	max-width: 895px;
	margin:0 auto 3rem auto;
	padding:0;
	list-style: none;
}
#recommend ul li{
	width: 100%;
	margin:0 0 1.2rem 0;
	padding:0.7em 1em;
	line-height: 1.6;
	border:2px solid #DDDDDD;
}
#recommend ul li h3{
	display: inline-block;
	padding:0 0 0.4rem 0;
	margin:0 0 0.3em 0;
	color: #408287;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.4;
	border-bottom: 2px solid #6EA0A4;
}
#recommend ul li h3::before{
	display: inline-block;
	content: '';
	width: 0.9em;
	height: 1.2em;
	margin-right: 0.3em;
  	background-image: url(../images/construction/icon-recommend.png);
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: -0.1em;

}
#recommend ul li h3:last-child{
	padding:0;
	margin:0;
	border-bottom:none;
}
#recommend .textRed{
	padding:0 1rem;
	margin-bottom: 4rem;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 500;
	color: #EA5377;
}

mark,
mark {
	background: linear-gradient(transparent 50%, #fff799 50%);
	font-weight: bold;
	color: #EA5377;
	border-radius: 6px;

	background-image:-webkit-linear-gradient(left,transparent 50%,#fff799 50%);
	background-repeat:repeat-x;
	background-position:0 1em;
	background-size:200% .8em;
	transition:background-position 1s ease;
	font-weight:bold;
}
mark.marker-animation,
mark.marker-animation{
	background-position:-100% .8em;
}

@media screen and (max-width: 768px) {
	#recommend .catchimg{
		width:50%;
	}
	#recommend h2{
		font-size: 2rem;
	}
	#recommend h2 span{
		font-size: 1.2rem;
	}
	#recommend ul{
		width: 100%;
	}
	#recommend .lead,
	#recommend ul li,
	#recommend ul li h3{
		font-size: 1rem;
	}
	#recommend .textRed{
		font-size: 1.25rem;
	}
}

/******************************************
contact
******************************************/

#contact{
	padding-top:0;
}

.contact-arrow {
	margin:0 auto 4rem auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 50px solid transparent;
	border-left: 50px solid transparent;
	border-top: 40px solid #FFF;
	border-bottom: 0;
}

@media screen and (max-width: 768px) {
	.contact-arrow {
		margin:0 auto 2rem auto;
	}
}

/******************************************
parts
******************************************/

.paddingBottom_m{
	padding-bottom:7rem !important;
}

.paddingBottom_l{
	padding-bottom:10rem !important;
}

.paddingBottom_xl{
	padding-bottom:15rem !important;
}

.textAlignCenter{
	text-align: center !important;
}

@media screen and (max-width: 768px) {
	#contents section .wrapper.paddingBottom_m{
		padding-bottom:4rem !important;
	}
	
	.roundflame {
		width:100%;
		padding:1.2em;
	}

	.paddingBottom_xl{
		padding-bottom:7rem !important;
	}
	.marginBottom_l{
		margin-bottom:1em !important; 
	}
}

@media screen and (min-width: 768px) {
	.lbr{
		display: block;
	}
}


/******************************************
inview
******************************************/

/* フェードイン(初期値) */
.js-fadeUp {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(30px); /* 下に30pxの位置から */
  transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: 0.2s; /* フェード開始を0.5秒遅らせる */
}