@charset "utf-8";
/* ------------------------------------------------------------ common */

body{ min-width: 1500px; margin: 0 auto; font-family: 'Noto-Sans-JP-Regular'; }
a{ display: block; color: #fff; text-decoration: none; }

.inner{ width: 1030px; margin: 0 auto; padding: 0 30px; }
.s_inner{ width: 710px; margin: 0 auto; }

.SP{ display: none; }

.w_box{ background: #fff; border-radius: 10px; box-shadow: 4.95px 4.95px 7px 0px rgba(0, 0, 0, 0.15); }
.orange{ background: linear-gradient(90deg, rgba(253,100,79,1) 0%, rgba(242,141,41,1) 100%); }
.green{ background: linear-gradient(90deg, rgba(41,184,51,1) 0%, rgba(84,201,93,1) 100%); }

.btn{ position: relative; border-radius: 50px; font-size: 14px; width: 100%; height: 40px; text-align: center; line-height: 280%; }
.btn:after{ position: absolute; content: ""; top: 15px; right: 20px; width: 7px; height: 7px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }

.dot{ position: relative; padding: 7px 0 0; }
.dot:before{ position: absolute; content: ""; top: 0; left: 50%; transform: translate(-50%,0); width: 7px; height: 7px; border-radius: 50px; background: #fff; }


/* font */
.futura{ font-family: futura-pt,sans-serif; font-weight: 500; font-style: normal; }
.din{ font-family: din-2014,sans-serif; font-weight: 400; font-style: normal; }



/* ------------------------------------------------------------ header */
header{ padding: 20px 5% 25px; }
header .flex{ display: flex; justify-content: space-between; }

header .left{ display: flex; align-items: center; }
header .left p{ width: 200px; padding: 0 12px 0 0; }
header .left h1{ font-size: 13px; }

header .right{ width: 275px; }
header .right a{ padding: 0 0 0 50px; color: #000; font-weight: 600; font-size: 34px; background: url(../images/icn_01.svg) left center/42px no-repeat; }
header .right small{ font-size: 13px; padding: 13px 0 0; }


#wrapper{ position: relative; }



/* ------------------------------------------------------------ footer */
footer{ padding: 30px 0; }
footer .f_inner{ padding: 0 5%; }
footer .flex{ display: flex; justify-content: space-between; align-items: center; }

footer .top{ padding: 0 0 30px; border-bottom: 1px solid #c9c9c9; }
footer .top h3{ width: 170px; font-size: 18px; font-family: 'Noto-Sans-JP-Medium'; }

footer .top .btns{ width: 575px; }
footer .top .btns .btn{ position: relative; float: left; width: 280px; height: 50px; padding: 6px 0 0 10px; box-sizing: border-box; margin: 0 12px 0 0; font-family: 'Noto-Sans-JP-Bold'; }
footer .top .btns .btn:last-of-type{ margin: 0; }
footer .top .btns .btn:after{ top: 20px; right: 24px; }

footer .top .btns .btn:before{ position: absolute; content: ""; width: 21px; height: 15px; top: 50%; left: calc(50% - 110px); transform: translate(0,-50%); background: url(../images/icn_pc.png) center/cover no-repeat; }
footer .top .btns .btn:last-of-type:before{ width: 21px; height: 19px; background: url(../images/icn_line.png) center/cover no-repeat; }


footer .bottom{ padding: 30px 0 0; }
footer .bottom .logo{ width: 430px; }
footer .bottom .logo a{ display: flex; flex-direction: row-reverse; align-items: center; }
footer .bottom .logo a p{ padding: 0 0 0 35px; color: #000; font-size: 13px; line-height: 160%; }

footer .bottom .f_nav{ width: 400px; }
footer .bottom .f_nav a{ display: inline; font-size: 13px; padding: 0 20px 0 0; color: #000; }
footer .bottom .f_nav a:last-of-type{ padding: 0; }

footer small{ display: block; font-size: 12px; padding: 60px 0 0; }


.pagetop{ position: fixed; bottom: 100px; left: 100px; width: 50px; z-index: 100; }
.pagetop img{ width: 100%; height: auto; }


/* ------------------------------------------------------------ form error */

.error { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 0; }
.error span { color: red; padding: 10px 0; }



/* ------------------------------------------------------------
	mobile 
------------------------------------------------------------ */
@media only screen and (max-width: 640px) {
	/* ------------------------------------------------------------ common */
	body{ min-width: 100%; }
	
	.inner{ width: 90%; padding: 0; }
	.s_inner{ width: 85%; }
	
	.PC{ display: none; }
	.SP{ display: block; }
	
	.dot{ padding: 3px 0 0; }
	.dot:before{ width: 4px; height: 4px; }

	
	/* ------------------------------------------------------------ header */
	header{ padding: 15px 2%; }
	
	header .right{ width: 160px; display: flex; align-items: center; }
	header .right img{ width: 100%; height: auto; }
	header .right a{ font-size: 14px; padding: 0; background: url(../images/icn_01.svg) left top/31px no-repeat; }
	header .right a p { font-size: 20px; padding-left: 35px; }
	header .right small { font-size: 12px; display: inline-block; padding-top: 2px; }
	
	header .left{ display: flex; flex-direction: column-reverse; align-items: baseline; }
	header .left h1{ font-size: 10px; }
	header .left p{ width: 190px; padding: 10px 0 0; }
	header .left p img{ width: 100%; height: auto; }

	/* ------------------------------------------------------------ footer */
	footer{ padding: 40px 0 80px; }
	footer .flex{ flex-direction: column; }
	
	footer .top{ padding: 0 0 50px; }
	footer .top h3{ width: 100%; font-size: 14px; text-align: center; }
	footer .top .btns{ width: 100%; padding: 20px 0 0; font-size: 13px; }
	footer .top .btns .btn{ float: none; width: 80%; padding: 7px 0 0 15px; margin: 0 auto; box-sizing: border-box; }
	footer .top .btns .btn:before{ width: 23px; height: 17px; }
	footer .top .btns .btn:last-of-type:before{ width: 24px; height: 23px; }
	footer .top .btns .btn:last-of-type{ margin: 10px auto 0; }
	footer .top .btns .btn:after{ top: 21px; right: 20px; }
	
	
	footer .bottom{ padding: 50px 0 0; }
	footer .bottom .logo{ width: 100%; }
	footer .bottom .logo a{ flex-direction: column; }
	footer .bottom .logo a p{ padding: 0 0 25px; }
	footer .bottom .logo img{ width: 250px; height: auto; }
	
	footer .bottom .f_nav{ width: 50%; margin: 0 auto; padding: 40px 0 0; text-align: center; }
	footer .bottom .f_nav a{ display: block; padding: 0 0 30px; font-size: 15px;}

	footer small{ font-size: 10px; padding: 50px 0 0; text-align: center; }


	.pagetop{ display: none!important; }
	
	.sp_float{ position: fixed; left: 0; right: 0; bottom: 0; width: 100%; z-index: 700; }
	.sp_float a{ float: left; position: relative; width: 50%; padding: 19px 0 19px 22px; box-sizing: border-box; font-size: 14px; color: #fff; border-radius: 0; font-family: 'Noto-Sans-JP-Medium'; text-align: center; }
	
	.sp_float a:before{ position: absolute; content: ""; width: 20px; height: 14px; top: 50%; left: calc(50% - 60px); transform: translate(0,-50%); background: url(../images/icn_pc.png) center/cover no-repeat; }
	.sp_float a:last-of-type:before{ width: 20px; height: 19px; background: url(../images/icn_line.png) center/cover no-repeat; }


	

}