@charset "utf-8";


/* ------------------------------------------------------------ common */
body{ background: #37C655; }
header,
footer{ background: #fff; }


.line_inner{ width: 1100px; padding: 0 50px; margin: 0 auto; }

/* ------------------------------------------------------------ fv */
#fv{ padding: 70px 0 220px; background: url(../images/line/bg_fv.svg) center bottom/cover no-repeat; }
#fv h2{ width: 633px; margin: 0 auto; }
#fv h2 img{ width: 100%; height: auto; }



/* ------------------------------------------------------------ howto */
#howto{ padding: 100px 0; }

#howto ul li{ position: relative; width: 100%; /* height: 790px; */ margin: 0 0 140px; padding: 110px 100px 75px; background: #fff; border-radius: 20px; box-sizing: border-box; }
#howto ul li:last-of-type{ margin: 0; }

#howto ul li .num{ position: absolute; top: -80px; left: 50%; transform: translate(-50%,0); width: 160px; height: 160px; padding: 30px 0 0; box-sizing: border-box; border-radius: 50%; background: #FFE400; font-size: 70px; font-family: din-2014,sans-serif; font-weight: 600; font-style: normal; letter-spacing: 0.07em; line-height: 100%; }
#howto ul li .num span{ display: block; font-size: 30px; letter-spacing: 0.1em; font-family: din-2014,sans-serif; font-weight: 600; }

#howto ul li h3{ padding: 0 0 40px; border-bottom: 1px solid #B1B1B1; font-size: 48px; font-family: 'Noto-Sans-JP-Bold'; text-align: center; }
#howto ul li h4{ font-size: 30px; font-family: 'Noto-Sans-JP-Bold'; text-align: center; line-height: 170%; }
#howto ul li p{ line-height: 200%; text-align: center; }


/* step01 */
#howto ul li.step01 .float{ padding: 80px 0 0; }
#howto ul li.step01 .float div.right_arrow { position: relative; width: 50%; float: left; padding-left: 20px; box-sizing: border-box; }
#howto ul li.step01 .float div.right_arrow:first-of-type:after{ position: absolute; content: ""; top: 50%; right: 0; transform: translate(0,-50%); border-left: 25px solid #B1B1B1; border-bottom: 46px solid transparent; border-top: 46px solid transparent; }

#howto ul li.step01 .float div.right_arrow dl{ display: flex; align-items: center; padding: 0 0 45px; }
#howto ul li.step01 .float div.right_arrow dl dt{ padding: 0 25px 0 0; border-right: 2px solid #727272; font-size: 70px; font-family: din-2014,sans-serif; font-weight: 600; }
#howto ul li.step01 .float div.right_arrow dl dd{ padding: 0 0 0 30px; }
#howto ul li.step01 .float div.right_arrow dl dd h4{ font-size: 30px; line-height: 150%; font-family: 'Noto-Sans-JP-Bold'; text-align: left; }

#howto ul li.step01 .float div.right_arrow img.step1_img { display: block; margin: 0 auto 45px; }
#howto ul li.step01 .float div.right_arrow:first-of-type img.step1_img { width: 210px; height: auto; margin: 0 auto 30px; }


/* step02 */
#howto ul li.step02 .first{ padding: 60px 0 0; }
#howto ul li.step02 .first h4{ padding: 0 0 10px; }
#howto ul li.step02 .first .float{ padding: 40px 0 0; }

#howto ul li.step02 .first .box{ float: left; position: relative; width: 644px; height: 400px; padding: 35px 70px 43px; border-radius: 30px; background: #EFEA50; box-sizing: border-box; }
#howto ul li.step02 .first .box::before{ position: absolute; content: ""; top: 30px; right: -30px; width: 64px; height: 41px; background: url(../images/line/bubble.svg) center/cover no-repeat; }
#howto ul li.step02 .first .box h5{ font-size: 20px; line-height: 150%; font-family: 'Noto-Sans-JP-Bold'; }
#howto ul li.step02 .first .box p:first-of-type{ width: 330px; margin: 20px auto 30px; padding: 1px 0 2px; box-sizing: border-box; font-size: 14px; text-align: center; border: 1px solid #000; }
#howto ul li.step02 .first .box p:last-of-type{ line-height: 170%; text-align: left; font-family: 'Noto-Sans-JP-Medium'; }

#howto ul li.step02 .first img{ float: right; }


#howto ul li.step02 .second{ padding: 60px 0 0; }
#howto ul li.step02 .second h4{ padding: 0 0 4px; }
#howto ul li.step02 .second h4 span{ display: inline-block; padding: 6px 8px; font-size: 12px; text-align: center; color: #707070; border: 1px solid #707070;  border-radius: 7px; vertical-align: middle; margin: -4px 0 0 10px; }

#howto ul li.step02 .second div{ display: flex; padding: 40px 0 0; }
#howto ul li.step02 .second div figure{ width: 287px; padding: 0 20px 0 0; margin: 0; }
#howto ul li.step02 .second div figure:last-of-type{ padding: 0; }
#howto ul li.step02 .second div figure figcaption{ padding: 20px 0 0; text-align: center; }


/* step03 */
#howto ul li.step03 h4{ padding: 37px 0 47px; font-family: 'Noto-Sans-JP-Medium'; font-size: 20px; }

#howto ul li.step03 .flex{ display: flex; align-items: center; }
#howto ul li.step03 .flex dl{ width: 463px; padding: 0 64px 0 0; text-align: center; }
#howto ul li.step03 .flex dl dt{ background: #F2F2F2; border: 1px solid #707070; border-radius: 10px; padding: 11px 0 10px; font-size: 20px; font-family: 'Noto-Sans-JP-Medium'; }
#howto ul li.step03 .flex dl dd{ padding: 20px 0 0; font-size: 30px; font-weight: 600; }
#howto ul li.step03 .flex dl dd:first-of-type{ padding-bottom: 20px; font-size: 36px; }
#howto ul li.step03 .flex dl small { padding-bottom: 15px; display: inline-block; line-height: 150%; }



/* ------------------------------------------------------------ line_contact */
#line_contact{ background: url(../images/line/bg_contact.svg) center/cover no-repeat; }
#line_contact .bg{ padding: 110px 0; background: url(../images/line/img_05.svg) calc(50% + 400px) 110px/300px no-repeat; }

#line_contact .flex{ display: flex; align-items: center; }
#line_contact .flex .pic{ margin: 0 50px 0 0; }
#line_contact .flex h3{ padding: 0 0 12px; font-size: 36px; font-family: 'Noto-Sans-JP-Bold'; }
#line_contact .flex p{ padding: 0 0 30px; font-size: 20px; line-height: 170%; }
#line_contact .flex small{ font-size: 14px; font-family: 'Noto-Sans-JP-Medium'; }


/* line_btn */
#wrapper .line_btn { position: relative; text-align: center; }
#wrapper .line_btn a { display: block; background: #37C655; width: 212px; height: 46px; line-height: 46px; margin: 0 auto; border-radius: 10px; -webkit-border-radius: 10px; }

#wrapper #line_contact .line_btn { margin-top: 20px; }

/* ------------------------------------------------------------
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {
	
	/* ------------------------------------------------------------ common */
	
	.line_inner{ width: 90%; padding: 0; }
	
	/* ------------------------------------------------------------ fv */
	
	#fv{ padding: 40px 0 100px; background: url(../images/line/bg_fv-sp.svg) center bottom/cover no-repeat; }
	#fv h2{ width: 100%; }
	
	/* ------------------------------------------------------------ howto */
	
	#howto{ padding: 70px 0 80px; }
	#howto ul li{ margin: 0 0 70px; padding: 60px 0px 30px; border-radius: 10px; }
	#howto ul li .num{ top: -40px; width: 80px; height: 80px; padding: 17px 0 0; font-size: 35px; letter-spacing: 0; }
	#howto ul li .num span{ font-size: 15px; }
	#howto ul li h3{ padding: 0 0 25px; font-size: 24px; }
	#howto ul li h4{ font-size: 20px; }
	#howto ul li p{ line-height: 170%; font-size: 13px; }
	
	/* step01 */
	#howto ul li.step01 .float{ padding: 25px 10% 0; }
	#howto ul li.step01 .float div.right_arrow{ width: 100%; float: none; padding: 0 0 80px;  }
	
	#howto ul li.step01 .float div.right_arrow:first-of-type:after{ top: initial; bottom: 10px; right: initial; left: 50%; transform: translate(-50%,-50%); border-top: 25px solid #B1B1B1; border-bottom: none; border-right: 46px solid transparent; border-left: 46px solid transparent; }
	#howto ul li.step01 .float div.right_arrow:last-of-type{ padding: 0; }
	
	#howto ul li.step01 .float div.right_arrow dl{ padding: 0 0 15px; }
	#howto ul li.step01 .float div.right_arrow dl dt{ padding: 0 15px 0 0; border-right: none; font-size: 35px; }
	#howto ul li.step01 .float div.right_arrow dl dd{ padding: 0 0 0 15px; border-left: 2px solid #727272; }
	#howto ul li.step01 .float div.right_arrow dl dd h4{ font-size: 19px; }
	
	#howto ul li.step01 .float div.right_arrow img.step1_img{ margin: 0 auto 20px; width: 70%; height: auto; }
	#howto ul li.step01 .float div.right_arrow:first-of-type img.step1_img{ padding: 0 0 10px; width: 50%; height: auto; margin: 0 auto; }

	/* step02 */
	#howto ul li.step02 .first{ padding: 25px 0 0; }
	#howto ul li.step02 .first .float{ padding: 25px 0 0; }
	#howto ul li.step02 .first .box{ float: none; width: 90%; margin: 0 auto; height: auto; padding: 25px 5% 20px; border-radius: 15px; z-index: 1; }
	#howto ul li.step02 .first .box::before{ top: initial; right: initial; left: 30px; z-index: -1; bottom: -10px; transform: rotate(90deg); }
	#howto ul li.step02 .first .box h5{ font-size: 15px; text-align: center; }
	#howto ul li.step02 .first .box p:first-of-type{ width: 100%; margin: 15px auto; font-size: 12px; }
	#howto ul li.step02 .first .box p:last-of-type{ padding: 0; }

	#howto ul li.step02 .first img{ float: none; width: 33%; height: auto; padding: 25px 0 0; margin: 0 auto; display: block; }
	
	
	#howto ul li.step02 .second{ padding: 30px 0 0; }
	#howto ul li.step02 .second h4{ padding: 0; }
	#howto ul li.step02 .second h4 span{ padding: 2px 6px; font-size: 10px; border-radius: 3px; }

	#howto ul li.step02 .second div{ flex-direction: column; padding: 15px 0 0; }
	#howto ul li.step02 .second div figure{ width: 80%; margin: 0 auto; padding: 0 0 20px; }
	#howto ul li.step02 .second div figure img{ width: 100%; height: auto; }
	#howto ul li.step02 .second div figure figcaption{ padding: 10px 0 0; font-size: 13px; }

	/* step03 */
	#howto ul li.step03{ padding-bottom: 130px; }
	#howto ul li.step03 h4{ padding: 19px 0 20px; font-size: 13px;  }
	
	#howto ul li.step03 .flex{ flex-direction: column; }
	#howto ul li.step03 .flex dl{ width: 80%; padding: 0; }
	#howto ul li.step03 .flex dl dt{ border-radius: 5px; padding: 6px 0 8px; font-size: 15px; }
	#howto ul li.step03 .flex dl dd{ padding: 13px 0 0; font-size: 15px; }
	#howto ul li.step03 .flex dl dd:first-of-type{ padding-bottom: 19px; font-size: 18px; }
	
	#howto ul li.step03 .flex img { position: absolute; bottom: -60px; width: 38%; height: auto; margin: 0 auto; }

	
	/* ------------------------------------------------------------ line_contact */
	#line_contact{ background: url(../images/line/bg_contact-sp.svg) center/cover no-repeat; }
	#line_contact .bg{ padding: 25px 0 0; background: url(../images/line/img_05-sp.svg) calc(50% + 400px) bottom/300px no-repeat; }
	
	#line_contact .flex{ flex-direction: column-reverse; }
	#line_contact .flex h3{ padding: 0 0 16px; font-size: 25px; text-align: center; line-height: 150%; }
	#line_contact .flex p{ padding: 0 0 10px; font-size: 13px; text-align: center; }
	#line_contact .flex small{ font-size: 10px; line-height: 170%; display: block; text-align: center; }
	
	#line_contact .flex .pic{ margin: 20px auto 0; width: 80%; height: auto; }
	#line_contact .flex .pic img { width: 100%; height: auto; padding-bottom: 60px; }
	
	#wrapper .line_btn a { width: 210px; height: 45px; line-height: 45px; }
	#wrapper #line_contact .line_btn { margin-top: -85px; padding: 0 0 25px; }
	#wrapper #line_contact .line_btn a { width: 32vw; margin: 0 auto 0 0; }
	#wrapper #line_contact .line_btn a img { width: 23px; height: 22px; padding: 0; }

}