@charset "utf-8";
html {
	-webkit-text-size-adjust: 100%;
}
body {
	font-family: "Noto Sans JP", sans-serif;
	font-size:4.1vw;
	color:#181824;
	text-align:center;
	line-height:1.6;
	overflow:hidden;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	display:block;
}

@media screen and (min-width:769px){
	body{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: row-reverse;
		flex-direction: row-reverse;
		font-size:1.3vw;
	}
}


a {
	transition : opacity 0.4s;
	-webkit-transition : opacity 0.4s;
	opacity:1;
	outline:none;
}
a:hover {
	opacity: 0.7;
}

.only_pc{
	display:none !important;
}
.only_pc_f{
	display:none !important;
}
.only_smart{
	display:block !important;
}
.only_smart_i{
	display:inline-block !important;
}

@media screen and (min-width:769px){
	.only_pc{
		display:block !important;
	}
	.only_pc_f{
		display:flex !important;
	}
	.only_smart,
	.only_smart_i{
		display:none !important;
	}
}


img{
	max-width:100%;
}


#wrapper{
}

@media screen and (min-width:769px){
	#wrapper{
		width:50%;
		position:relative;
	}
}



/* header */
header{
	padding-top:5%;
	display:none;
}
header.thanks{
	display:block;
}

header .wrap{
	position:relative;
}
header .wrap h1 span{
	color:#1685F4;
}
header .wrap .prev{
	width:1.3em;
	line-height:1;
	position:absolute;
	left:7%;
	top:3.2%;
	cursor:pointer;
	outline:none;
}
header .wrap .prev img{
	width:100%;
}

header .indicator{
	width:90%;
	margin:5% auto 0;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
header .indicator li{
	width:19%;
	height:4px;
	background-color:#B8B8CC;
	border-radius:100px;
}
header .indicator li.active{
	background-color:#1685F4;
}

@media screen and (min-width:769px){
	header{
		padding-top:9%;
	}
	header .indicator{
		width:55%;
		margin-top:2%;
	}
	header .indicator li{
		height:0.3vw;
	}
}


/* article */
article{
}


/* .cont */
.cont{
}


/* テキストボックス */
input[type="text"],
input[type="email"],
input[type="tel"]{
	width:100%;
	height:3.2em;
	padding:0 0.8em;
	background-color:#F2F2F8;
	border:1px solid #fff;
	border-radius:0.5em;
	outline:none;
}
input[type="text"].error,
input[type="email"].error,
input[type="tel"].error{
	background-color:#ffebe7;
	border:1px solid #ff0000;
}
@media screen and (max-width:480px){
	input[type="text"],
	input[type="email"],
	input[type="tel"]{
		font-size:16px;
	}
}


/* ラジオボタン */
input[type="radio"]{
	display:none;
}
input[type="radio"] + span{
	display:block;
	height:3.2em;
	line-height:1.2;
	padding-left:0.8em;
	font-weight:bold;
	background-color:#F2F2F8;
	border:2px solid #F2F2F8;
	border-radius:0.5em;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	cursor:pointer;
}
input[type="radio"] + span.center{
	webkit-justify-content: center;
	justify-content: center;
	padding-left:0;
}
input[type="radio"]:checked + span{
	background:#EAF5FF url(../img/check_blue.png)no-repeat right 0.5em center;
	background-size:1.2em auto;
	border:2px solid #1685F4;
}


/* チェックボックス */
input[type="checkbox"] {
	position: relative;
	-webkit-appearance: none;
	appearance: none;
	width: 21px;
	height: 21px;
	background-color: #fff;
	border: 1px solid #9090A4;
	border-radius:3px;
	vertical-align: middle;
	cursor: pointer;
}
input[type="checkbox"]:checked:after {
	display: block;
	position: absolute;
	top: 0px;
	left: 6px;
	content: "";
	width: 8px;
	height: 14px;
	border-right: 2px solid #f00;
	border-bottom: 2px solid #f00;
	-webkit-transform: rotate(52deg) skew(8deg);
	transform: rotate(52deg) skew(8deg);
	background-color:transparent;
	border-radius:0;
}
input[type="checkbox"] + span {
	display:inline-block;
	vertical-align:middle;
	margin-left:1em;
	line-height:1.5;
	font-size:3.6vw;
	font-weight:bold;
}

@media screen and (min-width:769px){
	input[type="checkbox"] + span {
		font-size:1.3vw;
	}
}


/* プレイスホルダー */
input::placeholder,
textarea::placeholder{
	color:#9090A4;
}
input:-ms-input-placeholder,
textarea::placeholder{
	color:#9090A4;
}
input::-ms-input-placeholder,
textarea::placeholder{
	color:#9090A4;
}


/* #step */
#step{
	width:100%;
	min-height:100vh;
	margin:auto;
	overflow:hidden;
}
#step form ol{
	margin:auto;
	position:relative;
}
#step form ol > li{
	padding:5% 0 20%;
	transition : transform 0.4s;
	-webkit-transition : transform 0.4s;
}
#step form ol > li:first-child{
	padding-bottom:0;
}
#step form ol > li:nth-child(n+2){
	width:100%;
	position:absolute;
	top:0;
	left:0;
}
#step form ol > li.right{
	-webkit-transform : translate(100%, 0);
	transform : translate(100%, 0);
}
#step form ol > li.left{
	-webkit-transform : translate(-100%, 0);
	transform : translate(-100%, 0);
}
#step form ol > li h1{
	font-size:7.5vw;
	letter-spacing:0.1em;
	text-indent:0.1em;
}
#step form ol > li h1 span{
	color:#1685F4;
}
#step form ol > li h1 + figure{
	margin-top:5%;
}
#step form ol > li h1 + figure figcaption{
	font-weight:500;
	letter-spacing:0.08em;
}
#step form ol > li .check{
	padding-left:12%;
}
#step form ol > li .check li{
	margin-top:1em;
	padding-left:1.5em;
	font-weight:bold;
	text-align:left;
	background:url(../img/check_brown.png)no-repeat left center;
	background-size:1.3em auto;
}

#step form ol > li .point{
	margin:3em 0;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
#step form ol > li .point li{
	width:6.3em;
	margin:0 0.5%;
	font-size:3.7vw;
	font-weight:bold;
	color:#fff;
	position:relative;
	z-index:2;
}
#step form ol > li .point li:before{
	content:'';
	display:block;
	width:100%;
	padding-top:calc(100% - 4px);
	background-color:#BD9710;
	border:2px solid #88783E;
	border-radius:50%;
	position:absolute;
	left:50%;
	top:50%;
	z-index:-1;
	transform:translate(-50%,-50%);
}

#step form ol > li > h2{
	margin:0 0 9%;
	padding:0.8em 0;
	font-size:5vw;
	color:#fff;
	background-color:#1685F4;
}
#step form ol > li > h2 img{
	width:0.8em;
	margin:0 1em;
	vertical-align:0;
}

#step form ol > li > .tit{
	padding:0 5%;
	text-align:left;
}
#step form ol > li > .tit + aside{
	width:90%;
	margin:3% auto 1%;
	padding:2.5% 3%;
	font-size:3vw;
	text-align:left;
	color:#333350;
	border:1px solid #D4D4D4;
	border-radius:1em;
}
#step form ol > li > dl{
	padding:0 4%;
	text-align:left;
}
#step form ol > li > dl div:nth-child(n+2){
	display:none;
}
#step form ol > li > dl div dt{
	margin:0 0 1em;
	font-weight:bold;
}
#step form ol > li > dl div dd{
	margin-bottom:1.5em;
	position:relative;
}
@media screen and (max-width:480px){
	#step form ol > li > dl div dd{
		font-size:16px;
	}
}
#step form ol > li > dl div dd.active:after{
	content:'';
	display:block;
	width:1.2em;
	height:1.2em;
	background:url(../img/check_blue.png)no-repeat left top;
	background-size:1.2em auto;
	position:absolute;
	right:0.5em;
	top:50%;
	z-index:2;
	transform:translateY(-50%);
}
#step form ol > li > dl div dd.active input[type="text"],
#step form ol > li > dl div dd.active input[type="tel"],
#step form ol > li > dl div dd.active input[type="email"]{
	background-color:#EAF5FF;
	border:2px solid #1685F4;
}
#step form ol > li > dl div dd p.error{
	color:#f00;
}
#step form ol > li .privacy{
	display:none;
}


#step form ol > li > ul{
	padding:0 4%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#step form ol > li > ul.radio_list li{
	width:48%;
	margin-top:0.8em;
}
#step form ol > li > ul.radio_list li.w100{
	width:100%;
}
#step form ol > li > ul.radio_list li:nth-child(2n+2){
	margin-left:4%;
}

#step form ol > li > .region{
	display:block;
	margin:5% 0 -2.5%;
	padding:0 5%;
	font-size:3.2vw;
	text-align:left;
}

#step form ol > li .btns{
	margin-top:9%;
}
#step form ol > li .btns .next{
	width:65%;
	line-height:3.4;
	font-weight:bold;
	color:#fff;
	background-color:#B8B8CC;
	border-radius:100px;
	outline:none;
	box-shadow:0 8px 32px rgba(0,0,0,0.24);
}
#step form ol > li .btns .next img{
	width:1.3em;
	margin-left:0.5em;
	vertical-align:-0.2em;
}
#step form ol > li .btns .next.active{
	background-color:#1685F4;
	cursor:pointer;
}
#step form ol > li .btns button[type="submit"]{
	width:65%;
	line-height:3.4;
	font-weight:bold;
	color:#fff;
	background-color:#1685F4;
	border-radius:100px;
	outline:none;
	box-shadow:0 8px 32px rgba(0,0,0,0.24);
	cursor:pointer;
}
#step form ol > li .btns button[type="submit"]:disabled{
	background-color:#B8B8CC;
	cursor:default;
}
#step form ol > li .bottom_link {
	margin-top:18%;
  display:none;
}
#step form ol > li .bottom_link a {
	text-decoration:underline;
	font-size:2.87vw;
	color:#666;
}

@media screen and (min-width:769px){
	#step{
		width:100%;
		min-height:100vh;
		margin:auto;
		overflow:hidden;
	}
	#step form ol{
		margin:auto;
		position:relative;
	}
	#step form ol > li{
		min-height:100vh;
		padding:5% 0 20%;
		transition : transform 0.4s;
		-webkit-transition : transform 0.4s;
	}
	#step form ol > li:first-child{
		padding:12% 0 40%;
	}
	#step form ol > li > h2{
		margin:0 0 5%;
		font-size:1.3vw;
	}
	#step form ol > li > .tit{
		padding:0 8%;
		text-align:left;
	}
	#step form ol > li > .tit + aside{
		width:84%;
		margin:3% auto 1%;
		padding:2.5% 3%;
		font-size:0.95vw;
	}
	#step form ol > li > dl{
		padding:0 8%;
		text-align:left;
	}
	#step form ol > li > dl div:nth-child(n+2){
		display:none;
	}
	#step form ol > li > dl div dt{
		margin:0 0 1em;
		font-weight:bold;
	}
	#step form ol > li > dl div dd{
		margin-bottom:1.5em;
		position:relative;
	}
	#step form ol > li > dl div dd.active:after{
		content:'';
		display:block;
		width:1.2em;
		height:1.2em;
		background:url(../img/check_blue.png)no-repeat left top;
		background-size:1.2em auto;
		position:absolute;
		right:0.5em;
		top:50%;
		z-index:2;
		transform:translateY(-50%);
	}
	#step form ol > li > dl div dd.active input[type="text"],
	#step form ol > li > dl div dd.active input[type="tel"],
	#step form ol > li > dl div dd.active input[type="email"]{
		background-color:#EAF5FF;
		border:2px solid #1685F4;
	}

	#step form ol > li > ul{
		padding:0 8%;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	#step form ol > li > ul.radio_list li{
		width:48%;
		margin-top:0.8em;
	}
	#step form ol > li > ul.radio_list li.w100{
		width:100%;
	}
	#step form ol > li > ul.radio_list li:nth-child(2n+2){
		margin-left:4%;
	}

	#step form ol > li > .region{
		margin-bottom:-1.5%;
		padding:0 8%;
		font-size:1vw;
	}

	#step form ol > li .btns{
		margin-top:9%;
	}
	#step form ol > li .btns .next{
		width:45%;
		box-shadow:0 4px 16px rgba(0,0,0,0.24);
	}
	#step form ol > li .btns button[type="submit"]{
		width:45%;
		box-shadow:0 4px 16px rgba(0,0,0,0.24);
	}
	#step form ol > li .bottom_link a {
		font-size:0.9vw;
	}
}



/* #thanks */
#thanks{
	padding:9% 0 20%;
}
#thanks h2{
	font-size:6.5vw;
}
#thanks h2 img{
	display:block;
	width:2.5em;
	margin:1em auto;
}
#thanks p{
	margin-top:1.5em;
	padding:0 5%;
	font-weight:500;
}
#thanks .check{
	padding:0.5em 5% 0;
}
#thanks .check li{
	margin-top:1em;
	padding-left:1.5em;
	font-weight:bold;
	text-align:left;
	background:url(../img/check_brown.png)no-repeat left center;
	background-size:1.3em auto;
	white-space:nowrap;
}

@media screen and (min-width:769px){
	#thanks{
		min-height:100vh;
		padding:15% 9% 40%;
	}
	#thanks h2{
		font-size:1.5vw;
	}
	#thanks h2 img{
		display:block;
		width:2.5em;
		margin:1em auto;
	}
	#thanks p{
		margin-top:1.5em;
		padding:0 5%;
		font-size:1.03vw;
		font-weight:500;
	}
	#thanks .check{
		display:inline-block;
		padding:1em 5%;
	}
	#thanks .check li{
		margin-top:1em;
		padding-left:1.5em;
		font-size:1.1vw;
		font-weight:bold;
		text-align:left;
		background:url(../img/check_brown.png)no-repeat left center;
		background-size:1.3em auto;
		white-space:nowrap;
	}
}


/* #overlay */
html.overlay {
	overflow: hidden;
	height: 100%;
}
#overlay {
	position: fixed;
	width: 100%;
	height: 100vh;
	padding: 25vh 3% 20vh;
	top: 0;
	left: 0;
	z-index: 102;
	background-color: rgba(0, 0, 0, 0.5);
	display: none;
}
#overlay > div {
	height:55vh;
	padding: 5%;
	background-color: rgba(255, 255, 255, 1);
	overflow:auto;
	position:relative;
}
#overlay > div a{
	color:#0066ff;
	text-decoration:underline;
}
#overlay > div .right{
	margin-top:1.5em;
	font-size:3.4vw;
	text-align:right;
}
#overlay > div h2{
	margin-bottom:1em;
}
#overlay > div h2 + p{
	margin-bottom:1em;
	font-size:3.4vw;
	text-align:left;
}
#overlay > div table{
	width:100%;
}
#overlay > div table tr{
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
#overlay > div table th,
#overlay > div table td{
	font-size:3.4vw;
	text-align:left;
}
#overlay > div table th{
	padding:1em 0;
	vertical-align:top;
	white-space:nowrap;
}
#overlay > div table td{
	padding:1em;
}

#overlay > div dl{
	font-size:3.4vw;
	text-align:left;
}
#overlay > div dl dt{
	margin-top:1.5em;
	font-weight:bold;
}
#overlay > div dl dd .dot{
	padding-left:1.5em;
}
#overlay > div dl dd .dot li{
	list-style:disc;
}
#overlay > div dl dd .num{
	padding-left:1.5em;
}
#overlay > div dl dd .num li{
	list-style:decimal;
}

#overlay .close {
	display: block;
	width: 1.2em;
	line-height: 1.2;
	font-size: 6vw;
	font-weight:500;
	color:#fff;
	background-color: #666666;
	border-radius: 50%;
	cursor: pointer;
	position: absolute;
	z-index:10;
	right: 3%;
	bottom: 20vh;
	transform:translateY(120%);
}

@media screen and (min-width:769px){
	#overlay {
		position: fixed;
		width: 100%;
		height: 100vh;
		padding: 25vh 3% 20vh 53%;
		overflow:auto;
		top: 0;
		left: 0;
		z-index: 102;
		background-color: rgba(0, 0, 0, 0.5);
		display: none;
	}
	#overlay > div {
		height:55vh;
		padding: 5%;
		background-color: rgba(255, 255, 255, 1);
		overflow:auto;
		position:relative;
	}
	#overlay > div a{
		color:#0066ff;
		text-decoration:underline;
	}
	#overlay > div .right{
		margin-top:1.5em;
		font-size:1vw;
		text-align:right;
	}
	#overlay > div h2{
		margin-bottom:1em;
	}
	#overlay > div h2 + p{
		margin-bottom:1em;
		font-size:1vw;
		text-align:left;
	}
	#overlay > div table{
		width:100%;
	}
	#overlay > div table tr{
		border-top:1px solid #ccc;
		border-bottom:1px solid #ccc;
	}
	#overlay > div table th,
	#overlay > div table td{
		font-size:1vw;
		text-align:left;
	}
	#overlay > div table th{
		padding:1em 0;
		vertical-align:top;
		white-space:nowrap;
	}
	#overlay > div table td{
		padding:1em;
	}
	
	#overlay > div dl{
		font-size:1vw;
		text-align:left;
	}
	#overlay > div dl dt{
		margin-top:1.5em;
		font-weight:bold;
	}
	#overlay > div dl dd .dot{
		padding-left:1.5em;
	}
	#overlay > div dl dd .dot li{
		list-style:disc;
	}
	#overlay > div dl dd .num{
		padding-left:1.5em;
	}
	#overlay > div dl dd .num li{
		list-style:decimal;
	}
	
	#overlay .close {
		display: block;
		width: 1.2em;
		line-height: 1.2;
		font-size: 3vw;
		font-weight:500;
		color:#fff;
		background-color: #666666;
		border-radius: 50%;
		cursor: pointer;
		position: absolute;
		z-index:10;
		right: 3%;
		bottom: 20vh;
		transform:translateY(120%);
	}
}

/* footer */
footer{
	margin-top:15%;
	padding:7% 0;
	color:#9090A4;
	background-color:#333350;
}
footer ul{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
}
footer ul li{
	line-height:1;
	padding:0 1em;
	font-size:3vw;
}
footer ul li:nth-child(n+2){
	border-left:1px solid;
}
footer ul li a{
	font-weight:bold;
	color:#fff;
	letter-spacing:0.1em;
	text-indent:0.1em;
}
footer p{
	margin-top:7%;
	font-size:3vw;
	letter-spacing:0.1em;
	text-indent:0.1em;
}

@media screen and (min-width:769px){
	footer{
		width:100%;
		position:absolute;
		bottom:0;
	}
	footer ul li{
		font-size:1.1vw;
	}
	footer p{
		font-size:1.1vw;
	}
}

/* #pc_left */
@media screen and (min-width:769px){
	#pc_left{
		width:50%;
		padding-top:6%;
		background-color:#F5F8FE;
	}
	#pc_left section h1{
		line-height:1.22;
		font-size:3.4vw;
		letter-spacing:0.1em;
		text-indent:0.1em;
	}
	#pc_left section h1 span{
		color:#1685F4;
	}
	#pc_left section h1 + figure{
		margin-top:5%;
	}
	#pc_left section h1 + figure figcaption{
		font-weight:500;
		letter-spacing:0.08em;
	}
	#pc_left section h1 + figure img{
		width:50%;
	}
	#pc_left section .check{
		padding-left:33%;
	}
	#pc_left section .check li{
		margin-top:1em;
		padding-left:1.5em;
		font-size:1.2vw;
		font-weight:bold;
		text-align:left;
		background:url(../img/check_brown.png)no-repeat left center;
		background-size:1.3em auto;
	}

	#pc_left section .point{
		margin:3em 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-align-items: center;
		align-items: center;
	}
	#pc_left section .point li{
		width:6.3em;
		margin:0 0.5%;
		font-size:1vw;
		font-weight:bold;
		color:#fff;
		position:relative;
		z-index:2;
	}
	#pc_left section .point li:before{
		content:'';
		display:block;
		width:100%;
		padding-top:calc(100% - 4px);
		background-color:#E5A500;
		border:2px solid #BE9F32;
		border-radius:50%;
		position:absolute;
		left:50%;
		top:50%;
		z-index:-1;
		transform:translate(-50%,-50%);
	}
}