@charset "utf-8";

/*-------------------------------------
  header ランディングページ
-------------------------------------*/
.lp .navbar{
	display: none;
}
.lp .header-icon{
	margin-left: 20%;
}

@media (min-width: 768px) {
	.lp header > .container{
		margin-bottom: 20px;
	}
	.lp header .gnav{
	  display: none;
	}
	.lp .header-icon{
		margin-left: 0;
	}
}

/*-------------------------------------
  footer ランディングページ
-------------------------------------*/
.lp .floating-btn{
	display: none;
}

/*-------------------------------------
  common ランディングページ
-------------------------------------*/
.lp h2,
.lp h3{
	color: #000;
	font-size: 24px;
	font-weight: 900;
}

@media (min-width: 768px) {
	.lp h2,
	.lp h3{
		font-size: 36px;
	}
}

.lp p{
	font-size: 18px;
}
.lp .marker{
	background: linear-gradient( transparent 20%, #FFEFB9 60% );
}

.fadeIn{
	opacity: 0;
	position: relative;
	top: 50px;
	transition: all 1s;
}
.fadeIn.is-scrollIn{
	opacity: 1;
	top: 0;
	transition: all 1s;
}

@media (min-width: 768px) {
	.fadeIn{;
		top: 100px;
	}
}

/*-------------------------------------
  main ランディングページ
-------------------------------------*/
.lp-main{
	background: #F3EBE4;
	padding-top: 40px;
}

@media (min-width: 768px) {
	.lp-main-outer{
		background: #F3EBE4;
	}
	.lp-main{
		background: none;
		padding-top: 50px;
	}
}

@media (min-width: 960px) {
	.lp-main-outer{
		background: url("../images/lp-main-bg.png") no-repeat top center / cover;
	}
}

.lp-main .catch{
	font-size: 24px;
	font-weight: 900;
}
.lp-main .round-box{
	color: #FF7150;
	border: none;
	padding: 12px 18px;
	margin-right: 10px;
}
.lp-main h1{
	font-size: 36px;
	font-weight: 900;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.lp-main .catch{
		font-size: 30px;
	}
	.lp-main h1{
		font-size: 48px;
		margin-top: 30px;
		margin-bottom: 30px;
	}
}

@media (min-width: 960px) {
	.lp-main h1{
		color: #164F51;
	}
}

.lp-main-icon{
	text-align: center;
}
.lp-main-icon img{
	width: 80px;
	margin: 20px 0;
}
.shadow-box-outer{
	padding-top: 20px;
	margin-bottom: 50px;
}
.shadow-box{
	background: #fff;
	padding: 30px 20px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, .2);
}
.lp-main-outer .shadow-box{
	position: relative;
}
.lp-main-outer .shadow-box p{
	font-size: 24px;
	font-weight: 900;
}
.lp-main-arrow{
	width: calc(100% - 40px);
	text-align: center;
	position: absolute;
	bottom: -40px;
}
.lp-main-arrow img{
	width: 23px;	
}

@media (min-width: 768px) {
	.lp-main-benefit{
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}
	.shadow-box-outer{
		padding-top: 0;
	}
	.shadow-box{
		padding: 40px 30px;
	}
	.lp-main-outer .shadow-box{
		text-align: center;
	}
}

@media (min-width: 960px) {
	main .lp-main.container{
		margin-bottom: 0;
	}
	.lp-main-benefit{
		margin-top: 50px;
		max-width: inherit;
	}
	.lp-main-outer .shadow-box{
		position: relative;
		bottom: -50px;
	}
}

.support .catch-outer{
	text-align: center;
	margin-bottom: 100px;
}
.support .catch-outer .em{
	font-size: 24px;
	font-weight: 900;
	text-align: center;
}
.support .catch-outer p{
	text-align: left;
}
.support .catch{
	font-weight: 700;
}
.support .catch b{
	background: #FFEFB9;
	border-radius: 30px;
	font-weight: 900;
	padding: 5px 10px;
	margin-right: 4px;
	line-height: 2.4;
}
.support .catch-outer h2.text-deco{
	padding-top: 0;
}
.support .catch-outer h2.text-deco img{
	display: block;
	max-width: 335px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	.support .catch-outer p.catch{
		font-size: 24px;
		text-align: center;
	}
	.support .catch-outer h2.text-deco{
		font-size: 48px;
		color: #000;
		text-align: center;
		display: inline-block;
		background: url("../images/lp-text-deco-md.png") no-repeat center 80px /580px auto;
		line-height: 1.6;
		padding-top: 20px;
	}
	.support .catch-outer h2.text-deco img{
		display: none;
	}
	.support .catch span{
		font-weight: 700;
		background: #FFEFB9;
		border-radius: 50px;
		padding: 15px 30px;
		margin-right: 8px;
	}
	.support .catch b{
		margin-right: 0;
	}
}

@media (min-width: 960px) {
	.support .catch-outer .em{
		font-size: 48px;
	}
}

.support h3{
	text-align: center;
}
.support .beige-box{
	background: #F1ECD5;
	padding: 30px 20px;
	text-align: center;
	margin-bottom: 20px;
	box-shadow: 0 0 6px rgba(0, 0, 0, .2);
}
.support .beige-box .round-box{
	display: inline-block;
	background: #164F51;
	border: none;
	color: #fff;
	font-size: 24px;
	font-weight: 900;
	text-align: center;
	padding: 10px 40px;
}
.support .beige-box img{
	width: auto;
	height: 110px;
}
.support .beige-box h4{
	font-size: 24px;
	font-weight: 900;
}
.support .beige-box p{
	text-align: left;
}

@media (min-width: 768px) {
	.support .support-ex{
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}
	.support .beige-box h4{
		height: 50px;
	}
	.support .beige-box p{
		height: 200px;
	}
	.support .box2{
		margin-top: 20px;
	}
	.support .box3{
		margin-top: 40px;
	}
}

@media (min-width: 1200px) {
	.support{
		background: url("../images/lp-support-bg.png") no-repeat top center;
	}
	.support .beige-box h4{
		height: inherit;
	}
	.support .beige-box p{
		height: 160px;
	}
}

.voc{
	margin-bottom: 50px;
}
.voc .border-box{
	border: #FF7150 5px solid;
	border-radius: 20px;
	padding: 20px 10px;
}
.voc .voc-img{
	width: 142px;
	margin-top: 30px;
	margin-left: auto;
	margin-right: auto;
}
.voc h3{
	margin-top: 20px;
}

@media (min-width: 768px) {
	.voc h3{
		font-size: 24px;
	}
	.voc .border-box{
		padding: 30px 10px;
	}
	.voc .border-box > div{
		border-right: #FF7150 1px solid;
		padding-left: 20px;
		padding-right: 20px;
	}
	.voc .border-box > div:last-child{
		border-right: none;
	}
	.voc .voc-img{
		margin-top: 0;
	}
}

@media (min-width: 960px) {
	.voc h3{
		text-align: left;
	}
}

.professional{
	background: none;
}
.professional h2{
	text-align: center;	
}
.professional .row img{
	display: block;
	max-width: 272px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
}
.professional .row .name{
	text-align: center;
	font-weight: 700;
	margin-bottom: 20px;
}
.professional .attestation{
	display: block;
	margin-top: 50px;
}

@media (min-width: 768px) {
	.professional .row p{
		margin-left: 30px;
	}
}

.flow{
	background: url("../images/lp-flow-bg-sm.png") no-repeat top center / cover;
	overflow: hidden;
	margin-bottom: 50px;
}
.flow-box{
	position: relative;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 100px;
}
.flow-box::after{
	content: "▼";
	font-size: 30px;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 30px;
	right: 0;
	z-index: 2;
}
.flow-box:last-child{
	padding-bottom: 20px;
}
.flow-box:last-child::after{
	display: none;
}
.flow-img{
	margin-bottom: 20px;
}

@media (min-width: 768px) {
	.flow{
		background: url("../images/lp-flow-bg-md.png") no-repeat top center / cover;
		margin-bottom: 100px;
	}
	.flow h2{
		margin-top: 50px;
	}
	.flow h3{
		font-size: 24px;
	}
	.flow .row{
		margin-left: -25px;
		margin-right: -25px;
	}
	.flow-box{
		padding-left: 25px;
		padding-right: 25px;
		padding-bottom: 50px;
	}
	.flow-box::after{
		content: "▼";
		transform: rotate(-90deg);
		top: 50%;
		bottom: 50%;
		right: -40%;
	}
	.flow-box:last-child{
		padding-bottom: 50px;
	}
	.flow-box:last-child::after{
		display: none;
	}
}

@media (min-width: 960px) {
	main .flow .container{
		margin-bottom: 0;
	}
}

.lp .contact h2{
	color: #164f51;
}