@charset "utf-8";

/* contact */

#comment { padding: 60px 0;}
#comment .box { width: 100%; max-width: 840px; padding: 30px 80px; margin: 0 auto; border: 1px #48C4CB solid; border-radius: 7px; text-align: left;}

#form { margin-bottom: 100px;}
.formWrap { width: 100%; background: #f4f4f4; padding: 20px 50px; margin-bottom: 60px;}
.contactTable { width: 100%;}
.contactTable tr { border-bottom: 1px #222 solid;}
.contactTable tr:last-child { border-bottom: none;}
.contactTable th, .contactTable td { padding: 30px 20px; font-size: 20px; text-align: left; vertical-align: top; line-height: 42px;}
.contactTable th { width: 300px; font-weight: bold;}
.contactTable tr.mail2 th { line-height: 24px;}

.contactTable p + p { margin-top: 5px;}
.contactTable p.select span.name { display: inline-block; width: 180px;}
.contactTable span.h { padding: 2px 8px; margin-left: 10px; background: #48C4CB; border-radius: 5px; color: #fff; font-size: 16px;}
.contactTable .cap { display: inline-block; width: 120px;}
.contactTable .sub { margin-left: 5px; font-size: 13px; color: #999;}

.contactTable input[type="text"], .contactTable textarea, .contactTable select, .contactTable option { width: 100%; height: 42px; padding: 0 12px; border:1px #48C4CB solid; border-radius: 7px; font-size: 20px; vertical-align: middle;}
.contactTable textarea { height: 200px; padding: 12px;}
.contactTable select, .contactTable option { max-width: 240px;}

.contactTable input[type="radio"] { display: none;}
.contactTable input[type="radio"] + label{ position:relative; padding-left: 40px; margin-right: 40px; line-height: 42px;}
.contactTable input[type="radio"] + label::before{ content: ""; display: block; position: absolute; top: -1px; left: 0; width: 30px; height: 30px; background: #fff; border: 1px solid #48C4CB; border-radius: 50%;}
.contactTable input[type="radio"]:checked + label::after{ content: ""; display: block; position: absolute; top: 2px; left: 3px; width: 26px; height: 26px; background: #48C4CB; border-radius: 50%;}

.contactTable input[name="郵便番号"], .contactTable input[name="ご年齢"] { width: 100%; max-width: 180px;}

.contactTable label > input { margin-right: 0.5em; font-size: 20px;}
.contactTable label + label { margin-left: 1em;}
.formNotice { display:none; color:#f00;}

.privacyBox { width: 100%; height: 200px; padding: 20px; background: #fff; border:1px #48C4CB solid; border-radius: 7px; font-size: 15px; overflow-y: scroll; line-height: 150%;}
.privacyBox h3 { margin-bottom: 15px; font-size: 18px; font-weight: bold;}
.privacyBox p { margin-bottom: 15px;}
.privacyBox dl dt { margin-bottom: 15px; padding-left: 8px; border-left: 4px #333 solid; font-weight: bold;}
.privacyBox dl dd { margin-bottom: 15px;}
.privacyBox ul { list-style-type: disc; margin-top: 15px; margin-left: 2em;}

.privacyWrap { margin-bottom: 60px;}
.privacyWrap input { display: none;}
.privacyWrap input + label{ position:relative; padding-left: 40px; margin-right: 40px; font-size: 20px; line-height: 42px;}
.privacyWrap input + label::before{ content: ""; display: block; position: absolute; top: -1px; left: 0; width: 26px; height: 26px; background: #fff; border: 1px solid #48C4CB;}
.privacyWrap input:checked + label::after{ content: ""; display: block; position: absolute; top: 0px; left: 7px; width: 11px; height: 16px; transform: rotate(40deg); border-bottom: 3px solid #48C4CB; border-right: 3px solid #48C4CB;}

button[type="submit"] { width:100%; max-width: 440px; height: 80px; background: #fff; color: #48C4CB; border: 1px #48C4CB solid; font-size: 24px; text-align: center; border-radius: 7px;}
button[type="button"] { width:100%; max-width: 440px; height: 80px; background: #999; color: #fff; font-size: 18px; text-align: center; border: none; border-radius: 7px;}
button:hover { cursor: pointer;}

@media screen and (max-width: 767px){
	#comment { padding: 40px 10px;}
	#comment .box { padding: 30px;}
	.formWrap { padding: 20px;}
	.contactTable th, .contactTable td { display: block; width: 100%;}
	.contactTable th { padding-bottom: 0;}
}
@media screen and (max-width: 479px){
	#comment { padding: 20px 10px;}
	#comment .box { padding: 15px;}
	.formWrap { padding: 10px;}
	.contactTable th, .contactTable td { padding: 20px 10px;}
	.contactTable th { padding-bottom: 0;}
	.contactTable label { display: block;}
}


#line { margin-bottom: 100px;}
#line .lineWrap { width: 100%; background: #f4f4f4; padding: 25px 60px; margin-bottom: 60px;}
#line .lineWrap img { border: none; border-radius: 0; vertical-align: middle;}
#line .lineWrap .text { padding: 40px 0;}
#line .lineWrap .text p { margin-bottom: 40px;}
#line .lineWrap .text .id { color: #06B900; font-size: 32px; font-weight: bold; line-height: 64px;}
#line .lineWrap .text .bn { float: right;}
#line .lineWrap .text .bn a { display: block; height: 64px; padding: 0 20px; background: #06B900; border-radius: 9px; color: #fff; font-size: 28px; font-weight: bold; line-height: 64px; text-align: center;}
#line .lineWrap .qr { width: 300px; text-align: right;}

#phone { margin-bottom: 100px;}
#phone .phoneWrap { width: 100%; background: #f4f4f4; padding: 60px 120px; margin-bottom: 60px; text-align: left;}
#phone .phoneWrap .number { margin-bottom: 40px; text-align: center;}
#phone .phoneWrap .number a { color: #48C4CB; font-size: 72px; line-height: 80px;}

@media screen and (max-width: 767px){
	#line .lineWrap { padding: 20px; margin-bottom: 50px;}
	#line .lineWrap .text { padding: 0; margin-bottom: 10px;}
	#line .lineWrap .text p { margin-bottom: 10px;}
	#line .lineWrap .text .id { font-size: 26px;}
	#line .lineWrap .text .bn { float: none;}
	#line .lineWrap .qr { width: 100%; text-align: center;}
	#phone { margin-bottom: 0px;}
	#phone .phoneWrap { padding: 30px 20px; margin-bottom: 0px;}
	#phone .phoneWrap .number { margin-bottom: 10px;}
}
@media screen and (max-width: 639px){
	#phone .phoneWrap .number a { font-size: 48px; line-height: 56px;}
}
@media screen and (max-width: 479px){
	#phone .phoneWrap .number a { font-size: 36px; line-height: 56px;}
}