@charset "utf-8";


/*----------------------------------------------
	Overall settings
-----------------------------------------------*/

body{ min-width: 1100px; color: #111; text-align: left;}
body.ovh{ position: fixed; left: 0; top: 0; width: 100%; height: 100vh;}
a{ color: #111; text-decoration:none; -webkit-transition: all .2s; transition: all .2s;}
a:hover{ opacity: .7; text-decoration:none;}
.underline{ text-decoration: underline;}
/* font */
.gothic{ font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;}
.mincho{ font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;}
/* bg */
.bg-white{ background: #fff;}
/* color */
.white{ color: #fff;}
.red{ color: #c00;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 540px) {
	body{ min-width: inherit;}
	a:hover{ opacity: 1;}
}
@media screen and (max-width: 350px) {
	html{ font-size: 50%;}
}



/*----------------------------------------------
	header
-----------------------------------------------*/

header{
	text-align: center;
	padding: 20px 5% 35px;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 540px) {
	header{ padding: 20px 5%;}
	header img{ width: 184px;}
}



/*----------------------------------------------
	section
-----------------------------------------------*/

section{ font-weight: bold;}
section h2{
	text-align: center;
	padding: 160px 5%;
	border: 1px solid #ccc;
	max-width: 1100px;
	margin: 0 auto 100px;
}
section .read{ margin-bottom: 60px;}
section .amount{
	display: flex;
	justify-content: center;
	align-items: center;
}
section .amount p{
	font-size: 36px;
	margin-right: 30px;
}
section .amount select{
	font-size: 24px;
	width: 510px;
	height: 90px;
	padding: 5px 20px;
	border: 1px solid #ccc;
	border-radius: 25px;
	background: #fff;
}
section input[type="text"]{
	font-size: 24px;
	border: 1px solid #ccc;
	width: 300px;
}
section ul.list{
	font-weight: normal;
	padding: 30px;
	background: #f9f8f8;
	max-width: 1100px;
	margin: 0 auto 65px;
}
section .bg-gray{
	font-weight: normal;
	padding: 30px;
	max-width: 1100px;
	background: #f9f8f8;
	margin-right: auto;
	margin-left: auto;
}
section .agree{
	text-align: center;
	margin-bottom: 70px;
}
section .agree label{
	display: flex;
	justify-content: center;
	align-items: center;
}
section .agree input[type="checkbox"]{
	position: relative;
	width: 80px;
	height: 85px;
	border: 1px solid #ccc;
	border-radius: 25px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
	margin: 0 50px 0 0;
}
section .agree input[type="checkbox"]:checked:before{
	position: absolute;
	top: 12px;
	left: 30px;
	transform: rotate(42deg);
	width: 20px;
	height: 45px;
	border-right: 5px solid #000;
	border-bottom: 5px solid #000;
	content: "";
}
section .agree span{ display: inline-block; vertical-align: middle;}
.btn{
	color: #fff;
    font-size: 20px;
	font-family: 'M PLUS 1p', sans-serif,"游ゴシック", YuGothic, "メイリオ", Meiryo, "Gothic A1","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    background-color: #4872ae;
    border-radius: 4px;
    letter-spacing: .5px;
    text-transform: none;
    border-width: 0px;
    padding: 15px 20px;
    -webkit-transition: all .1s ease;
    transition: all .1s ease;
    display: inline-block;
    min-width: 162px;
}
.btn-paypay{
	color: #fff;
	background: #f00;
	border-radius: 15px;
	padding: 20px;
	max-width: 820px;
	width: 100%;
	display: inline-block;
	cursor: pointer;
	-webkit-transition: all .2s; transition: all .2s;
}
.btn-paypay:before{
	content: "";
	background: url("../img/ic-paypay.svg") center / 43px auto no-repeat;
	display: inline-block;
	vertical-align: middle;
	width: 43px;
	height: 43px;
	margin-right: 15px;
}
.btn-paypay:hover{ opacity: .7;}
.btn-paypay span{
	display: inline-block;
	vertical-align: middle;
}

.wrap{ clear: both; box-sizing: content-box; max-width: 1100px; margin-left: auto; margin-right: auto; padding-left: 5%; padding-right: 5%;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 540px) {
	section h2{
		padding: 40px 3%;
		margin: 0 auto 25px;
	}
	section h2 img{ width: 150px;}
	section .read{ margin-bottom: 45px;}
	section .amount{
		display: block;
	}
	section .amount p{
		font-size: 24px;
		text-align: center;
		margin: 0 0 10px;
	}
	section .amount select{
		font-size: 20px;
		width: 100%;
		height: 65px;
		border-radius: 20px;
		padding: 5px 20px;
	}
	section input[type="text"]{
		width: 200px;
		font-size: 20px;
	}
	section ul.list{
		padding: 20px;
		margin: 0 auto 60px;
	}
	section .bg-gray{ padding: 20px;}
	section .agree{ margin-bottom: 50px;}
	section .agree input[type="checkbox"]{
		width: 48px;
		height: 48px;
		border-radius: 10px;
		margin: 0 20px 0 0;
		vertical-align: top;
	}
	section .agree input[type="checkbox"]:checked:before{
		top: 7px;
		left: 19px;
		transform: rotate(42deg);
		width: 12px;
		height: 30px;
		border-right: 3px solid #000;
		border-bottom: 3px solid #000;
	}
	section .agree span{ text-align: left;}
	.btn{
		font-size: 15px;
		padding: 8px 14px;
	}
	.btn-paypay{
		border-radius: 10px;
		padding: 15px;
	}
	.btn-paypay:before{
		background: url("../img/ic-paypay.svg") center / 32px auto no-repeat;
		width: 32px;
		height: 32px;
		margin-right: 10px;
	}
}



/*----------------------------------------------
	footer
-----------------------------------------------*/

footer{
	font-size: 14px;
	text-align: center;
	font-weight: normal;
	padding: 50px 3% 90px;
}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 540px) {
	footer{ padding: 50px 3% 30px;}
}