@charset "UTF-8";


body {
	color: #3c3c3c;
}


/*------------------------------------------------------------
	ボタン&電話番号
------------------------------------------------------------*/

.button-set {
	width: 100%;
	padding-top: 15px;
	margin: 0 auto;
}

@media only screen and (min-width: 768px) {

	.button-set {
		width: 460px;
		padding-top: 30px;
	}

}

.button-set a {
	display: block;
	width: 100%;
	height: 76px;
	font-size: 4.2vw;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-weight: 700;
	margin-bottom: 12px;
	border-radius: 4px;
    padding-top: 18px;
    position: relative;
}

.button-set a:hover {
	opacity: 0.9;
}

.button-set a.btn-blue {
	background: #1E56B0;
	box-shadow: 0 4px 0 0 #073F98;
    padding-top: 22px;
}

.button-set a.btn-grn {
	background: #00BBB0;
	box-shadow: 0 4px 0 0 #048A83;
}

@media only screen and (min-width: 768px) {

	.button-set a {
		width: 460px;
		height: 80px;
		font-size: 2.4rem;
	}

}


/*ボタン矢印*/
.button-set a:after {
	content: '';
	background: url(../img/common/angle-right-wht.svg) center center no-repeat;
	background-size: 5px 8px;
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 15px;
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	margin-top: 4px;
}

.button-set a.btn-blue:after {
	background-color: #073F98;
}

.button-set a.btn-grn:after {
	background-color: #046660;
}

@media only screen and (min-width: 768px) {

	.button-set a:after {
		background-size: 8px 12px;
		width: 30px;
		height: 30px;
		right: 10px;
		border-radius: 15px;
	}

}

/*ボタンテキスト*/
.button-set a span {
	font-weight: 700;
}

.button-set a span.small {
	display: block;
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}

.button-set a span.yel {
	color: #FFF711;
}

@media only screen and (min-width: 768px) {

	.button-set a span.small {
		font-size: 1.2rem;
	}

}

/*青ボタン装飾*/
.button-set a.btn-blue .easy60 {
	background: #fff;
	width: 160px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.8;
	text-align: center;
	color: #073F98;
	border: 2px solid #073F98;
	border-radius: 30px;
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
}

.button-set a.btn-blue .free {
	background: #FFF711;
	width: 48px;
	height: 48px;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 36px;
	text-align: left;
	padding-left: 4px;
	color: #073F98;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 4px 0 80px 0;
}

/*緑ボタン装飾*/
.button-set a.btn-grn img {
    width: 90px;
    position: absolute;
    top: -6px;
    left: 10px;
}

@media only screen and (mix-width: 767px) {

	/*STEPの中だけ調整*/
	.step-conts-inner .button-set a.btn-grn img {
	    left: 0;
	}

}

@media only screen and (min-width: 768px) {

	.button-set a.btn-grn img {
		width: 100px;
	    top: -10px;
	    left: 18px;
	}

}

.button-set .phone-call {
	background: #FFFFFF;
	border: 3px solid #073F98;
	border-radius: 4px;
	color: #073F98;
	text-align: center;
	line-height: 1;
	padding: 6px 0 8px;
}

.button-set .phone-call dl dt {
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 5px;
}

.button-set .phone-call dl dd {
	font: 700 7vw/1 'roboto';
	position: relative;
}

.button-set .phone-call dl dd:before {
	display: inline-block;
	content: '';
	background: url(../img/lp/icon_phone.svg) center center / contain no-repeat;
	width: 25px;
	height: 22px;
	margin-right: 5px;
}

.button-set .phone-call p {
	font-size: 1.2rem;
	font-weight: 700;
	color: #000;
	margin-top: 4px;
}

@media only screen and (min-width: 768px) {

	.button-set .phone-call {
		padding: 6px 0 8px;
	}

	.button-set .phone-call dl dd {
		font-size: 3.6rem;
	}

	.button-set .phone-call dl dd:before {
		width: 32px;
		height: 28px;
	}

	.button-set .phone-call p {
		margin-top: 5px;
	}
}

/*------------------------------------------------------------
	共通見出し（青帯背景）
------------------------------------------------------------*/

.hedding-bar {
	background: #02A3F5;
	padding: 23px 0;
	position: relative;
	text-align: center;
	color: #fff;
	margin-bottom: 60px;
}

#flow-area .hedding-bar {
	padding: 12px 0 10px;
	margin-bottom: 80px;
}

@media only screen and (min-width: 768px) {

	.hedding-bar {
		padding: 40px 0;
		margin-bottom: 90px;
	}

	#flow-area .hedding-bar {
		padding: 25px 0;
	}

}

.hedding-bar:after {
	content: '';
	border-top: 20px solid #02A3F5;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
}

.hedding-bar hgroup p {
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 1px;
	margin-bottom: 6px;
}

.hedding-bar hgroup h2 {
	font-size: 6vw;
	font-weight: 900;
	letter-spacing: 0;
	color: #FFE711;
	margin-bottom: 0; /*Reset*/
}

#about-area .hedding-bar hgroup h2 {
    text-indent: -30px;
}

.hedding-bar hgroup h2:after {
	content: none;
}

.hedding-bar hgroup h2 span {
	font-size: 1.8rem;
	font-weight: 900;
	letter-spacing: 0;
	color: #fff;
	position: relative;
}

.hedding-bar hgroup h2 span:after {
	content: '';
	display:inline-block;
	background: url('../img/lp/h2_question.svg') center center / contain no-repeat;
	width: 30px;
	height: 30px;
	position: absolute;
	top: -10px;
	right: -35px;
}

@media only screen and (min-width: 768px) {

	.hedding-bar hgroup p {
		font-size: 1.8rem;
		margin-bottom: 15px;
	}

	.hedding-bar hgroup h2 {
		font-size: 4rem;
		letter-spacing: 0.1em;
	}

	#about-area .hedding-bar hgroup h2 {
	    text-indent: -50px;
	}

	.hedding-bar hgroup h2 span {
		font-size: 3.2rem;
	}

	.hedding-bar hgroup h2 span:after {
		width: 50px;
		height: 50px;
		top: -15px;
		right: -55px;
	}
}

.hedding-bar hgroup + p {
	font-size: 1.3rem;
	font-weight: 700;
	margin-top: 2px;
}

.hedding-bar hgroup + p span {
	background: #fff;
	font-weight: 700;
	color: #02A3F5;
	padding: 0 6px 2px;
	margin: 0 4px;
	border-radius: 2px;
}

@media only screen and (min-width: 768px) {

	.hedding-bar hgroup + p {
		font-size: 1.6rem;
		margin-top: 5px;
	}

	.hedding-bar hgroup + p span {
		padding: 1px 6px 3px;
	}

}


/*------------------------------------------------------------
	共通見出し（アイコン付き）
------------------------------------------------------------*/

hgroup.hedding-line {
	margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {

	hgroup.hedding-line {
		margin-bottom: 40px;
	}

}

hgroup.hedding-line img {
	width: 60px;
	height: auto;
	margin: 0 auto 5px;
}

hgroup.hedding-line p {
	display: inline-block;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1;
	color: #000;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 0!important;
}

#benefit-area hgroup.hedding-line p {
	color: #02A3F5;
}

hgroup.hedding-line p:before,
hgroup.hedding-line p:after {
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
}

hgroup.hedding-line p:before {
	background: url(../img/lp/h4_before_blk.svg) center center / contain no-repeat;
	top: -25px;
	left: -30px;
}

#benefit-area hgroup.hedding-line p:before {
	background-image: url(../img/lp/h4_before_blue.svg) ;
}

hgroup.hedding-line p:after {
	background: url(../img/lp/h4_after_blk.svg) center center / contain no-repeat;
	top: -25px;
	right: -30px;
}

#benefit-area hgroup.hedding-line p:after {
	background-image: url(../img/lp/h4_after_blue.svg);
}

@media only screen and (min-width: 768px) {

	hgroup.hedding-line p {
		font-size: 2rem;
	}

}

hgroup.hedding-line h4 {
	font-size: 10vw;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	letter-spacing: 2px;
	margin: 0;/*reset*/
	color: #1E3C6B;
	position: relative;
}

hgroup.hedding-line h4 span {
	font-size: 2.8rem;
	font-weight: bold;
	color: #02A3F5;
}

#benefit-area hgroup.hedding-line h4 span {
	display: block;
}

@media only screen and (min-width: 768px) {

	hgroup.hedding-line h4 {
		font-size: 3.8rem;
	}

	hgroup.hedding-line h4 span {
		font-size: 3.2rem;
	}

	#benefit-area hgroup.hedding-line h4 span {
		display: inline-block;
	}

	hgroup.hedding-line h4:before,
	hgroup.hedding-line h4:after {
		display: block;
		content: '';
		background: #7CCCF4;
		width: 320px;
		height: 2px;
		position: absolute;
		bottom: 20px;
	}

	hgroup.hedding-line h4:before {
		left: 0;
	}

	hgroup.hedding-line h4:after {
		right: 0;
	}

}


/*------------------------------------------------------------
	KV
------------------------------------------------------------*/

#kv-area {
	padding: 10px 0 40px;
}

#kv-area .kv-inner {
	width: 90%;
	margin: 0 auto;
	position: relative;
}

#kv-area .kv-inner .kv-inner-text {
	width: 100%;
	margin-bottom: 10px;
}

@media only screen and (min-width: 768px) {

	#kv-area {
		padding: 0 0 90px;
	}

	#kv-area .kv-inner {
		width: 1240px;
		min-height: 760px; /* 画像用*/
		margin: 0 auto;
	}

	#kv-area .kv-inner .kv-inner-text {
		width: 460px;
		margin: 0 0 20px;
        padding-top: 20px;
	}

}

/*KV内 見出し*/
#kv-area .kv-inner .kv-inner-text hgroup p {
	margin-bottom: 12px;
}

#kv-area .kv-inner .kv-inner-text hgroup p span {
	display: inline-block;
	font-size: 3.32vw;
	font-weight: 700;
	letter-spacing: -0.2px;
	position: relative;
	text-align: center;
	z-index: 1;
}

#kv-area .kv-inner .kv-inner-text hgroup p span:before {
	content: '';
	display: block;
	background: rgba(255,231,17,0.50);
	width: 100%;
	height: 7px;
	position: absolute;
	bottom: 3px;
	z-index: -1;
}

@media only screen and (min-width: 768px) {

	#kv-area .kv-inner .kv-inner-text hgroup p {
		margin-bottom: 15px;
	}


	#kv-area .kv-inner .kv-inner-text hgroup p span {
		font-size: 1.5rem;
		letter-spacing: 0;
	}

}

#kv-area .kv-inner .kv-inner-text hgroup h1 {
	line-height: 1;
	color: #fff;
	margin-bottom: 30px;
}

#kv-area .kv-inner .kv-inner-text hgroup h1 span {
	font-weight: 700;
}

#kv-area .kv-inner .kv-inner-text hgroup h1 span.blue {
	display: block;
	font-size: 5vw;
	margin-bottom: 26px;
}

#kv-area .kv-inner .kv-inner-text hgroup h1 span.blue span {
	background: #073F98;
	padding: 4px 15px 5px 15px;
}

#kv-area .kv-inner .kv-inner-text hgroup h1 span.sky-blue {
	display: block;
	font-size: 10vw;
	letter-spacing: 1px;
	margin-bottom: 28px;
}

#kv-area .kv-inner .kv-inner-text hgroup h1 span.sky-blue:last-child {
	margin-bottom: 0;
}

#kv-area .kv-inner .kv-inner-text hgroup h1 span.sky-blue span {
	background: #02A3F5;
	padding: 0 8px 2px 8px;
}

@media only screen and (min-width: 768px) {

	#kv-area .kv-inner .kv-inner-text hgroup h1 {
		margin-bottom: 40px;
	}

	#kv-area .kv-inner .kv-inner-text hgroup h1 span.blue {
		display: block;
		font-size: 2rem;
        letter-spacing: 1.5px;
		margin-bottom: 38px;
	}

	#kv-area .kv-inner .kv-inner-text hgroup h1 span.blue span {
		padding: 4px 20px 7px 20px;
	}

	#kv-area .kv-inner .kv-inner-text hgroup h1 span.sky-blue {
		font-size: 6rem;
		letter-spacing: 1px;
		margin-bottom: 45px;
	}

	#kv-area .kv-inner .kv-inner-text hgroup h1 span.sky-blue span {
		padding: 0 13px 4px 13px;
	}

}

#kv-area .kv-inner .kv-inner-text hgroup + p {
	font-size: 3.6vw;
	font-weight: 500;
	line-height: 1.8;
}

@media only screen and (min-width: 768px) {

	#kv-area .kv-inner .kv-inner-text hgroup + p {
		font-size: 1.5rem;
	}

}

/*KV内 画像*/
#kv-area .kv-inner .key-vis {
	width: 100%;
	margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {

	#kv-area .kv-inner .key-vis {
		width: 900px;
		height: 720px;
		margin: 0;
		position: absolute;
		top: 0;
		left: 500px;
	}

}

#kv-area .kv-inner .button-set {
	margin: 0;
}


/*------------------------------------------------------------
	ライフプラン表で出来ること
------------------------------------------------------------*/

#benefit-area {
 	background:
    url(../img/lp/bg_blue.svg) center top / cover no-repeat,
    linear-gradient(121deg, #F2FBFF 0%, #E0F5FF 19%, #F5FAFD 72%, #E4F6FF 100%);
	padding: 30px 0 60px;
}

#benefit-area .benefit-box {
	background: #fff;
	width: 100%;
	border: 2px solid #7CCCF4;
	border-radius: 8px;
	padding: 30px 40px;
	margin-bottom: 30px;
}

@media only screen and (min-width: 768px) {

	#benefit-area {
		padding: 30px 0 90px;
	}

	#benefit-area .benefit-box {
		width: 23.729%;
		margin-right: 1.694666%;
		padding: 20px;
	}

	#benefit-area .benefit-box:nth-child(4n) {
		margin-right: 0;
	}

}

#benefit-area .benefit-box img {
	max-width: 240px;
	margin: 0 auto 20px;
}


@media only screen and (min-width: 768px) {

	#benefit-area .benefit-box img {
		max-width: 210px;
		margin: 0 auto 15px;
	}
}

#benefit-area .benefit-box dl dt {
	text-align: center;
	line-height: 1.8;
	margin-bottom: 10px;
}

#benefit-area .benefit-box dl dt span {
	display: inline-block;
	font-size: 1.8rem;
	font-weight: 700;
	color: #1E3C6B;
	position: relative;
}

#benefit-area .benefit-box dl dt span:before {
	content: '';
	display: block;
	background: rgba(2,163,245,0.15);
	width: 100%;
	height: 10px;
	position: absolute;
	bottom: 5px;
}

#benefit-area .benefit-box dl dd {
	font-size: 1.3rem;
	line-height: 1.8;
}


/*------------------------------------------------------------
	ライフプラン表作成サービスとは
------------------------------------------------------------*/

#about-area {
	padding-bottom: 40px;
}

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

	#about-area .one-half:last-child {
		margin-bottom: 20px;
	}

}

@media only screen and (min-width: 768px) {

	#about-area {
		padding-bottom: 90px;
	}

	#about-area .contents {
		width: 1240px;
	}

	#about-area .one-half {
		width: 50%;
		margin: 0;
	}

}


/*カルーセル*/
.slick-holder {
	background: url(../img/lp/bg_slick.jpg) center center / contain no-repeat;
	width: 90vw;
	height: 66vw;
	padding: 20px;
	margin-bottom: 25px;
}

@media only screen and (min-width: 768px) {

	/*カルーセル*/
	.slick-holder {
		background: url(../img/lp/bg_slick.jpg) center center / contain no-repeat;
		width: 620px;
		height: 451px;
		padding: 30px;
		margin-bottom: 35px;
	}

}

.slick-conts p {
	font-size: 4vw;
	font-weight: 700;
	line-height: 1;
	text-align: center;
}

.slick-conts .slick-holder + p {
	font-size: 1.4rem;
	font-weight: 500;
	line-height: 1.8;
	text-align: left;
}


@media only screen and (min-width: 768px) {

	.slick-conts p {
		font-size: 1.8rem;
	}

	.slick-conts .slick-holder + p {
	text-align: center;
	}

}



@media only screen and (min-width: 768px) {

	.about-inner {
		width: 426px;
		margin: 0 auto;
	}

}

#about-area h3 span {
	display: inline-block;
	font-size: 7.4vw;
	font-weight: 700;
	color: #1E3C6B;
	position: relative;
	z-index: 10;
}

#about-area h3 span:before {
	content: '';
	display: block;
	background: rgba(255,231,17,0.50);
	width: 100%;
	height: 15px;
	position: absolute;
	bottom: 2px;
	z-index: -1;
}

@media only screen and (min-width: 768px) {

	#about-area h3 {
		margin-bottom: 20px;
	}

	#about-area h3 span {
		font-size: 4.2rem;
	}

	#about-area h3 span:before {
		height: 20px;
	}

}

#about-area hgroup p {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	color: #02A3F5;
	position: relative;
	margin-bottom: 10px;
}

#about-area hgroup p:after {
	content: '';
	background: url('../img/lp/h3_about_after.svg') center center / contain no-repeat;
	position: absolute;
    width: 52px;
    height: 52px;
    top: -34px;
    right: 20px;
}

@media only screen and (min-width: 768px) {

	#about-area hgroup p {
		font-size: 1.8rem;
	}

	#about-area hgroup p:after {
		width: 62px;
		height: 62px;
	    top: -40px;
	    right: 40px;
	}

}

.about-inner img {
	margin: 0 0 20px;
}

@media only screen and (min-width: 768px) {

	.about-inner img {
		margin: 20px 0 0;
	}

}


/*------------------------------------------------------------
	なんでもご相談ください！
------------------------------------------------------------*/

#icons-area {
	padding: 40px 0;
}

@media only screen and (min-width: 768px) {

	#icons-area {
		padding: 60px 0 90px;
		text-align: center;
	}

}

#icons-area h3 {
	margin-bottom: 15px;
}

#icons-area h3 span {
	display: inline-block;
	font-size: 2.8rem;
	font-weight: 700;
	color: #1E3C6B;
	position: relative;
	z-index: 10;
}

#icons-area h3 span:before {
	content: '';
	display: block;
	background: rgba(255,231,17,0.50);
	width: 100%;
	height: 15px;
	position: absolute;
	bottom: 2px;
	z-index: -1;
}

#icons-area hgroup {
	text-align: center;
}

#icons-area p {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.8;
	margin-bottom: 30px;
}

@media only screen and (min-width: 768px) {

	#icons-area h3 {
		margin-bottom: 20px;
	}

	#icons-area h3 span {
		font-size: 4.2rem;
	}

	#icons-area h3 span:before {
		height: 20px;
	}

	#icons-area p {
		font-size: 1.6rem;
		font-weight: 500;
		line-height: 2;
		margin-bottom: 40px;
	}

}



#icons-area .slick-carusel-02 {
	width: 110vw;
	position: relative;
	left: -5vw;
	margin-bottom: 10px;
}

#icons-area .slick-carusel-02 .slick-slide {
	padding: 0 5px;
	height: 160px;
}

#icons-area .slick-carusel-02 div img {
	height: 100%;
}

@media only screen and (min-width: 768px) {

	#icons-area .slick-carusel-02 {
		display: block;
		width: 100%;
		position: relative;
		left: auto;
		margin: 0;
	}

	#icons-area .slick-carusel-02 div {
		display: block;
		padding: 0;
		height: auto;
		position: absolute;
	}
	#icons-area .slick-carusel-02 div:nth-child(1) {
		height: 240px;
		top: -93px;
		left: -84px;
	}

	#icons-area .slick-carusel-02 div:nth-child(2) {
		height: 200px;
		top: -40px;
		right: -204px;
	}

	#icons-area .slick-carusel-02 div:nth-child(3) {
		height: 270px;
		top: 217px;
		left: -194px;
	}

	#icons-area .slick-carusel-02 div:nth-child(4) {
		height: 240px;
		top: 230px;
		right: -120px;
	}


}



#icons-area .icons li {
	background: #fff;
	width: 47.5%;
	text-align: center;
	margin: 0 5% 20px 0;
	padding: 20px 0;
	border: 2px solid #02A3F5;
	border-radius: 8px;
}

#icons-area .icons li:nth-child(2n) {
	margin-right: 0;
}

@media only screen and (min-width: 768px) {

	#icons-area .icons {
		width: 870px;
		margin: 0 auto;
	}

	#icons-area .icons li,
	#icons-area .icons li:nth-child(2n) {
		width: 150px;
		margin: 0 30px 25px 0;
	}

	#icons-area .icons li:nth-child(5n) {
		margin-right: 0;
	}

	#icons-area .icons li:nth-child(n+6) {
		margin-bottom: 0;
	}

}

#icons-area .icons li img {
	width: 100px;
	margin: 0 auto 10px;
}

@media only screen and (min-width: 768px) {

	#icons-area .icons li img {
		width: 100px;
		margin: 0 auto 10px;
	}

}

#icons-area .icons li p {
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: #1E3C6B;
	margin-bottom: 0!important;
}


/*------------------------------------------------------------
	お客様の声
------------------------------------------------------------*/

#voice-area {
	padding-bottom: 40px;
}

#voice-area .voice-conts {
	background: #fff;
	width: 100%;
	padding: 30px 15px;
	margin-bottom: 30px;
	box-shadow: 0 0 14px 0 rgba(0,0,0,0.15);
}

@media only screen and (min-width: 768px) {

	#voice-area {
		padding-bottom: 90px;
	}

	#voice-area .voice-conts {
		width: calc(50% - 20px);
		margin: 0 40px 40px 0;
	}

	#voice-area .voice-conts:nth-child(2n) {
		margin-right: 0;
	}

}

#voice-area .voice-conts img {
	width: 160px;
	margin: 0 auto 15px;
}

@media only screen and (min-width: 768px) {

	#voice-area .voice-conts img {
		width: 140px;
		margin: 0;
	}

}

#voice-area .voice-conts .voice-text {
	width: 100%;
}

@media only screen and (min-width: 768px) {

	#voice-area .voice-conts .voice-text {
		width: calc(100% - 140px);
		padding-left: 30px;
	}

	#voice-area .voice-conts .voice-text .voice-text-inner {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}

}

#voice-area .voice-conts .voice-text p {
	font-size: 1.4rem;
	line-height: 1.8;
}

#voice-area .voice-conts .voice-text p.user {
	font-weight: 700;
	color: #1E3C6B;
	margin-top: 10px;
}

@media only screen and (min-width: 768px) {

	#voice-area .voice-conts .voice-text p {
		font-size: 1.5rem;
	}

	#voice-area .voice-conts .voice-text p.user {
		margin-top: 15px;
	}

}




/*------------------------------------------------------------
	ご予約の流れ
------------------------------------------------------------*/

#flow-area {
 	background:
    url(../img/lp/bg_blue.svg) center top / cover no-repeat,
    linear-gradient(121deg, #F2FBFF 0%, #E0F5FF 19%, #F5FAFD 72%, #E4F6FF 100%);
	padding-bottom: 50px;
}

@media only screen and (min-width: 768px) {

	#flow-area {
		padding-bottom: 90px;
	}

}

/*STEP：白枠*/
#flow-area .step-conts {
	background: #fff;
	width: 100%;
	margin: 0 auto 60px;
	padding: 15px;
	position: relative;
}

@media only screen and (min-width: 767px) {
	#flow-area .step-conts:first-child {
		padding-top: 30px;
	}
}

#flow-area .step-conts:last-child {
	margin-bottom: 0;
}

@media only screen and (min-width: 768px) {

	#flow-area .step-conts {
		width: 900px;
		margin: 0 auto 30px;
		padding: 30px 40px;
	}

}

/*STEP番号*/
#flow-area .step-conts .step-number {
	background: #02A3F5;
	width: 80px;
	height: 80px;
	line-height: 1;
	text-align: center;
	color: #fff;
	border-radius: 50%;
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
}

#flow-area .step-conts .step-number span {
	font: 600 2.6rem/80px Roboto-BoldItalic;
	text-align: center;
	color: #FFFFFF;
	position: relative;
	top: 14px;
}

#flow-area .step-conts .step-number span:before {
	content: 'STEP';
	font-size: 1.8rem;
	line-height: 1;
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
}

@media only screen and (min-width: 768px) {

	#flow-area .step-conts .step-number {
		width: 100px;
		height: 100px;
		top: 50%;
		left: -50px;
		transform: translateY(-50%);
	}

	#flow-area .step-conts .step-number span {
		font-size: 3rem;
		line-height: 100px;
	}

	#flow-area .step-conts .step-number span:before {
		font-size: 2rem;
	}

}


#flow-area .step-conts .step-conts-inner:nth-of-type(2n) {
	margin-top: 25px;
}

#flow-area .step-conts .step-conts-inner:nth-of-type(2n) .step-img {
	border-top: 1px dashed #ccc;
	padding-top: 30px;
}

@media only screen and (min-width: 768px) {

	#flow-area .step-conts .step-conts-inner:nth-of-type(2n) {
		margin-top: 15px;
	}

	#flow-area .step-conts .step-conts-inner:nth-of-type(2n) .step-text {
		border-top: 1px dashed #ccc;
		padding-top: 15px;
	}

	#flow-area .step-conts .step-conts-inner:nth-of-type(2n) .step-img {
		border: none;
		padding-top: 15px;
	}

}

#flow-area .step-conts .step-text {
	width: 100%;
}

@media only screen and (min-width: 768px) {

	#flow-area .step-conts .step-text {
	    width: calc(100% - 260px - 90px);
	    padding: 0;
	    margin: 0 40px 0 50px;
	}

	#flow-area .step-conts:first-child .step-text {
	    /* width: calc(100% - 460px - 90px); */
			width: 100%;
	}

	#flow-area .step-text-inner {
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}

}


/*STEP：テキスト*/
#flow-area .step-conts .step-text h5 {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	color: #1E3C6B;
}

#flow-area .step-conts:first-child .step-text h5 {
	margin: 20px 0 15px;
	line-height: 2;
}

#flow-area .step-conts .step-text p {
	font-size: 1.4rem;
	margin-top: 10px;
}

#flow-area .step-conts .step-text p span {
	display: block;
	font-size: 1.1rem;
	color: #6C6C6C;
	margin-top: 5px;
    text-indent: -1em;
    padding-left: 1em;
}

@media only screen and (min-width: 768px) {

	#flow-area .step-conts .step-text h5 {
		font-size: 2rem;
		text-align: left;
	}

	#flow-area .step-conts:first-child .step-text h5 {
		margin: 0;
	}

}


/*STEP：画像*/
#flow-area .step-conts .step-img {
	margin-bottom: 20px;
}

@media only screen and (min-width: 768px) {

	#flow-area .step-conts .step-img {
		width: 260px;
		margin: 0;
	}

}



/*------------------------------------------------------------
	FAQ
------------------------------------------------------------*/

#faq-area {
	padding: 20px 0 60px;
}

@media only screen and (min-width: 768px) {

	#faq-area {
		padding: 60px 0 90px;
	}

}

#faq-area h6 {
	font-size: 2.8rem;
	font-weight: 700;
	color: #1E3C6B;
	text-align: center;
	position: relative;
	margin-bottom: 20px;
}

#faq-area h6:before {
	content: '';
	display: inline-block;
	background: url(../img/lp/icon_faq.svg) center center / contain no-repeat;
	width: 56px;
	height: 56px;
	margin-right: 5px;
	position: relative;
	top: 12px;
}

@media only screen and (min-width: 768px) {

	#faq-area h6 {
		font-size: 3.8rem;
	}

	#faq-area h6:before {
		width: 68px;
		height: 60px;
		margin-right: 10px;
		top: 10px;
	}

}

#faq-area .accordion-menu {
	border: 1px solid #3C3C3C;
	margin: 0 auto 15px;
	padding: 15px 15px 15px 60px;
}

#faq-area .accordion-menu:last-of-type {
	margin-bottom: 40px;
}

@media only screen and (min-width: 768px) {

	#faq-area .accordion-menu {
		width: 800px;
		margin: 0 auto 20px;
		padding: 30px 30px 30px 90px;
	}

	#faq-area .accordion-menu:last-of-type {
		margin-bottom: 60px;
	}

}

#faq-area .accordion-menu dt {
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.6;
	padding-right: 30px;
	cursor: pointer;
	position: relative;
}

#faq-area .accordion-menu dt:before {
	content: '';
	display: inline-block;
	background: url(../img/lp/icon_question.svg) center center / contain no-repeat;
	width: 30px;
	height: 30px;
	margin-right: 5px;
	position: absolute;
	top: 50%;
	left: -45px;
	transform: translateY(-50%);
}

#faq-area .accordion-menu dt:after {
	content: '';
	display: inline-block;
	background: url(../img/lp/icon_plus.svg) center center / contain no-repeat;
	width: 15px;
	height: 15px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}

#faq-area .accordion-menu dt.active:after {
	background: url(../img/lp/icon_minus.svg) center center / contain no-repeat;
}

@media only screen and (min-width: 768px) {

	#faq-area .accordion-menu dt {
		font-size: 1.8rem;
		line-height: 2;
		padding-right: 100px;
	}

	#faq-area .accordion-menu dt:before {
		width: 40px;
		height: 40px;
		top: -2px;
		left: -60px;
		transform: none;
	}

	#faq-area .accordion-menu dt:after {
		width: 20px;
		height: 20px;
	}

	#faq-area .accordion-menu dt:hover {
		color: #02A3F5;
		text-decoration: underline;
	}

}

#faq-area .accordion-menu dd {
	display: none;
	font-size: 1.4rem;
	line-height: 1.7;
	padding: 20px 0 0 0;
	margin-top: 20px;
	border-top: 1px dashed #3B609A;
	position: relative;
}

#faq-area .accordion-menu dd:before {
	content: '';
	display: inline-block;
	background: url(../img/lp/icon_answer.svg) center center / contain no-repeat;
	width: 30px;
	height: 30px;
	margin-right: 5px;
	position: absolute;
	top: 18px;
	left: -45px;
}

@media only screen and (min-width: 768px) {

	#faq-area .accordion-menu dd {
		font-size: 1.5rem;
		padding: 30px 0 0 0;
		margin-top: 20px;
	}

	#faq-area .accordion-menu dd:before {
		width: 42px;
		height: 42px;
		top: 24px;
		left: -60px;
	}

}