@charset "utf-8";
::-ms-expand{display:none;}

/************************************
contactPage
*************************************/
#qaPerBnr{
	background-color: #083244;
	text-align: center;
	line-height:1.0;
}
#qaPerBnr:before,
#qaPerBnr:after{
	content: "";
	display: block;
	width:100%;
	height:1px;
}
#qaPerBnr a{
	display:block;
	position: relative;
	color: #fff;
	text-decoration: none;
}
#qaPerBnr a > *{display: block;}
#qaPerBnr a:before{
	content: "";
	display: block;
	background:url("../img/qa-bnr-ico01.png") no-repeat left top;
	background-size: contain;
	transition:all 0.4s;
}
#qaPerBnr a:hover:before{background-image:url("../img/qa-bnr-ico02.png");}
#qaPerBnr a > p.more{
	display: inline-block;
	background-color:#f35454;
	border-radius:4px;
	text-align:center;
	transition:all 0.4s;
}
#qaPerBnr a:hover p.more{opacity:0.7;}
#qaPerBnr p.more:after{
	display:inline-block;
	margin-left: 12px;
	font-family: FontAwesome;
	content: "\f105";
}

form input,
form select,
form textarea{outline: 0;}
.select{
	display: inline;
	width: auto;
}
#contact,
#maintenance{
	margin-top: 0;
	padding: 75px 0;
	background-color: #eee;
}
#contact h3+.note{
	margin:-36px 0 50px;
	text-align: center;
}
.thanks #contact h3+.note{
	max-width: 700px;
	width: 90%;
	margin:0 auto!important;
	text-align: left;
}
.thanks #contact h3+.note span{display: block;}
.thanks #contact h3+.note span+span{margin-top:1.5rem;}
.thanks #contact .sec p{
	font-size: 1.6rem;
	text-align: center;
}
#contact .sec,
#contact .contactNote,
#contact dl {
	margin:0 auto;
	width:90vw;
	max-width:700px;
	padding: 0;
}
#contact .contactNote{
	line-height: 1.6;
}
#errorMessageBox{
	margin:24px auto 36px;
	width:90vw;
	max-width:700px;
	line-height: 1.8;
	padding: 0;
	color:#C80003;
}

.privacy dt,
.form dt {
	color: #00405f;
	font-weight: bold;
	padding:0 1rem 1rem;
	font-size: 1.555rem;
}
.form dt.required:after,
.form label.required:after{
	content: "必須";
	display: inline-block;
}
html[lang="en"] .form dt.required:after,
html[lang="en"] .form label.required:after{content: "Required";}

.form dt.required:after,
.form label.required:after,
.privacy dt strong,
.form dt strong,
.form dd strong{
	color: #f35454;
	font-size: 1.25rem;
	font-style: normal;
	margin-left: 0.3rem;
}
.form dt strong.large{font-size:1.4rem;}
.form dd strong{margin-right: 0.3rem;}
.form dd p.lineCatch strong{font-size:1.4rem;}
.privacy dd {margin:0 0 1rem;}
.privacy dd p.privacyBox{
	vertical-align: middle;
	line-height:1.5;
}
.privacy dd a{
	color: #000;
	text-decoration: underline;
}
.privacy dd a:hover{color: #0056b3;}
.form dd {margin-bottom: 1rem;}
.form dd span.caution{
	display: block;
	position: relative;
	padding-left: 16px;
	font-size:1.2rem;
	color: #666;
}
.form dd span.caution:before{
	content: "※";
	position: absolute;
	top: 0;
	left:0;
}
.form dd input[type="text"]+span.caution{margin:-3px 0 2rem;}
.form.comfirm dd {margin:0 0 2rem 1rem;}
#loungeFormPage .form.comfirm dd:nth-of-type(4) p strong{display:block;}
.form.comfirm dd .decimalList,
.form.comfirm dd .cautionList{padding-left:20px;margin-top:6px;}
.form.comfirm dd .decimalList li{list-style-type:decimal;}
.form.comfirm dd .cautionList{margin-bottom:6px;color:#f35454;}
.form.comfirm dd .cautionList li{list-style-type:disc;font-size:1.25rem;}
.inline li {
	display: inline-block;
	margin:0 1rem 1rem 0;
}
.form dd ol.noteList{
	counter-reset: number 0;
	margin:8px 10px 6px;
}
.form dd ol.noteList li{
	position:relative;
	padding-left:24px;
	display:block;
}
.form dd ol.noteList li:before{
	counter-increment:number 1;
	content:"*"counter(number);
	position:absolute;
	top:0;
	left:0;
}
.tilde{
	color: #00405f;
	font-size:1.666rem;
	margin:0 0.6rem;
	font-weight: bold;
}

/* form item */
.form select,
.form input[type=text],
.form textarea {
	background-color: #fff;
	border: none;
	padding: 1rem 1rem 0.7rem;
	border-bottom: 0.3rem solid #fff;
	margin-bottom: 1rem;
}
.form select:focus,
.form input[type=text]:focus,
.form textarea:focus {
	background-color: #fff4f4;
	border-bottom: 0.3rem solid #f35454;
}
.form input[type=text] + input[type=text] {margin-left: 1rem;}
/* select */
.form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	padding-right: 5%;
	background-image: url(/common/img/pink-arrow-down.svg);
	background-repeat: no-repeat;
	background-position: 98% 50%;
	-webkit-background-size: 12px;
	background-size: 12px;
}
.form select:focus {background-image: url(/common/img/pink-arrow-up.svg);}

/* dtatepicker input */
.form input[type=text].datepicker {
	background-image: url(../img/calentar.svg);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	padding-right: 5%;
	-webkit-background-size: 20px;
	background-size: 20px;
}

/* radio , checkbox */
.form input[type=radio],
.form input[type=checkbox] {display: none;}

.form input[type=radio] + label:before {
	content: '';
	width: 0.8rem;
	height: 0.8rem;
	display: inline-block;
	margin:0 10px 0 3px;
	background-color: #fff;
	border-radius: 50%;
	-webkit-box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #fff;
		 -moz-box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #fff;
			box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #fff;
}
.form input[type=radio]:checked + label:before {
	background-color: #f35454;
	-webkit-box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #f35454;
		 -moz-box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #f35454;
			box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #f35454;
}
.form input[type=checkbox] + label,
.privacy input[type=checkbox] + label{position: relative;}
.form input[type=checkbox] + label:before,
.privacy input[type=checkbox] + label:before{
	content: '';
	width: 1.2rem;
	height: 1.2rem;
	display: inline-block;
	margin:0 0.8rem 0 3px;
	vertical-align: -0.2rem;
	background-color: #fff;
}
.form input[type=checkbox] + label:after,
.privacy input[type=checkbox] + label:after{
	content: '';
	width: 30px;
	height: 24px;
	background-image: url(/common/img/form/tick.svg);
	background-repeat: no-repeat;
	background-position: 0;
	-webkit-background-size: 18px;
	background-size: 18px;
	position: absolute;
	left: 5px;
	bottom: 0;
}
.otemachiPage .form input[type=checkbox] + label:after,
.otemachiPage .privacy input[type=checkbox] + label:after{background-image: url(/common/img/form/tick-otemachi.svg);}
.form input[type=checkbox]:checked + label:after,
.privacy input[type=checkbox]:checked + label:after{background-image: url(/common/img/form/tick_act02.svg);}
.form .hopeDate li:not(:first-child) .datepicker{margin-left:31px;}
.form .hopeDate select{width:auto;}
.form .hopeDate select[name="hope_time1_hour"],
.form .hopeDate select[name="hope_time2_hour"],
.form .hopeDate select[name="hope_time3_hour"]{
	margin-left: 1rem;
	margin-right:6px;
}
.form .hopeDate select[name="hope_time1_min"],
.form .hopeDate select[name="hope_time2_min"],
.form .hopeDate select[name="hope_time3_min"]{
	margin-right:6px;
	margin-left:6px;
}

/* form width */
.form textarea,
.form input[type=text].txt100p {width: 100%;}



/* privacy policy */
.privacy dd {position: relative;}
.privacy dd p {
	display: inline-block;
	line-height:1.5;
	padding-right:20px;
}

/* button */
.contactCorrection{
	width:50%;
	margin-top: -36px;
	text-align: right;
}
.contactForm .btn,
.thanks .btn{
	margin:80px auto 0;
	text-align:center;
}
main.form .contactForm .btn{
	padding: 0;
	text-align: center;
}
main.form .contactForm .btn p,
main.thanks .contactForm .btn li{margin:0 auto;}
.btn p,
.btn li{
	font-size:2.4rem;
	font-weight: bold;
	display: inline-block;
	margin:0;
}
.contactForm .btn p{margin-left:2rem;}
.contactCorrection .btn p{margin-right:2rem;}
.btn .btn01 > *:after,
.btn .btn02 > *:before {
	font-family: FontAwesome;
	display: inline-block;
	vertical-align: 0.3rem;
}
.btn .btn01 > *:after{
	content: '\f105';
	margin-left:16px;
}
.btn .btn02 > *:before{
	content: '\f104';
	margin-right:16px;
}

.btn .btn01 > *,
.btn .btn02 > *{
	border:none;
	padding:8px 20px 10px;
	margin: 0;
	color: #fff;
	outline: 0;
	line-height: 1.0;
	font-weight: normal;
	border-radius: 4px;
}
.btn .btn01 > *{background:#f35454;}
.btn .btn02 > *{background:#00405f;}
.btn .btn01 button:hover,
.btn .btn02 button:hover{
	text-decoration:none;
	opacity:0.7;
}

/*.ui-widget.ui-widget-content*/
.ui-widget.ui-widget-content{font-size: 1.0rem;}
.ui-datepicker-header > a{top:4px!important;}
.ui-datepicker th{padding:.2em .3em;}
.ui-datepicker td span, .ui-datepicker td a{padding: 0 .2em;}
.ui-datepicker-calendar .ui-state-default,
.ui-datepicker-calendar .ui-widget-content .ui-state-default{
	border: 1px transparent solid;
	background: transparent;
}
.ui-widget-header{background: transparent;border: 1px solid transparent;}
.ui-datepicker th.ui-datepicker-week-end span[title="日曜日"],
.ui-datepicker td.sunday span,
.ui-datepicker td.holiday span{color: rgb(255, 0, 0);}
.ui-datepicker th.ui-datepicker-week-end span[title="土曜日"],
.ui-datepicker td.saturday span{color: rgb(0, 127, 255);}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover{
	border: 0!important;
	padding: 0!important;
	top: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover{left: 2px;}
.ui-datepicker .ui-datepicker-next-hover{right: 2px;}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker-prev .ui-icon-circle-triangle-w:hover,
.ui-datepicker-next .ui-icon-circle-triangle-e:hover{
	background-position: center center!important;
	background-size: 12px auto!important;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker-prev .ui-icon-circle-triangle-w:hover{background-image:url(../img/arrow-prev.png);}
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker-next .ui-icon-circle-triangle-e:hover{background-image:url(../img/arrow-next.png);}
.otemachiPage.thanks #contact .btn a{color: #fff;}
#loungeFormPage #titleBlock.subBefore h2 .title1{
	font-size: 2.8rem;
	line-height: 1.0;
}
#loungeFormPage #titleBlock.subBefore h2 .title2{font-family: -apple-system, BlinkMacSystemFont,"Helvetica Neue",a-otf-gothic-bbb-pr6n, YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif!important;}
#loungeFormPage #securitycode{
	margin-top: 10px;
	display: inline-block;
	vertical-align:bottom;
}
#loungeFormPage .codeAboutLink{
	display: inline-block;
	margin:0 0 1rem 20px;
	vertical-align:bottom;
}
#loungeFormPage .codeAboutLink a:after{
	font-family: FontAwesome;
	content: "\f107";
	display: inline-block;
	margin-left:5px;
}
#loungeFormPage .codeAboutLink.open a:after{content: "\f106";}
#loungeFormPage .codeAboutLink+#codeAbout{
	display: block;
	width: 100%;
	max-height: 0px;
	transition: all 0.4s;
	transform-origin: center top;
	transform: scale(1,0);
}
#loungeFormPage .codeAboutLink.open+#codeAbout{
	transform: scale(1,1);
	max-height:800px;
}
#loungeFormPage .security_cord figcaption{font-size: 1.3rem;}
#loungeFormPage .wrap.cards{margin-bottom: 16px;}
#loungeFormPage .wrap.cards figcaption{
	display:block;
	margin: 16px 0 6px;
	max-width: 260px;
	padding: 2px 10px 4px;
	font-size: 1.6rem;
	font-weight: bold;
	border: 1px solid #000;
	text-align: center;
	color:#000;
}
#loungeFormPage .wrap.cards p{
	display: inline-block;
	vertical-align: middle;
}
#loungeFormPage .wrap.cards p img{width:auto;}
#loungeFormPage.conf ol.inline{margin:8px 10px 6px;}
#loungeFormPage.conf ol.inline li{
	counter-increment:num;
	margin-bottom: 3px;
}
#loungeFormPage.conf ol.inline li:before{
	content: counter(num);
	display: inline-block;
	margin-right: 5px;
}
#loungeFormPage.conf .preview{margin-top: 10px;}
#loungeFormPage.conf .preview img{
	max-width:200px;
	margin: 0;
}
#loungeFormPage.thanks #contact p,
#loungeFormPage.thanks #contact ul{
	max-width: 700px;
	width: 90%;
	margin: 0 auto!important;
	text-align: left;
}
#loungeFormPage.thanks #contact p.btn01{text-align:center;}
#loungeFormPage.thanks #contact p.btn01 a:hover{
	opacity:0.7;
	text-decoration:none;
}
#loungeFormPage.thanks #contact p strong.caution{color:#C50003;}
#loungeFormPage.thanks #contact .note+p strong{
	display: block;
	margin: 16px 0 5px;
}
#loungeFormPage.thanks #contact .note span{display: block;}

#loungeFormPage.thanks #titleBlock.subBefore.sorry h2 .title1.red {
	color: #f00;
	font-weight: bold;
	display: inline-block;
	position: relative;
	padding-left: 88px;
}
#loungeFormPage.thanks #titleBlock.subBefore.sorry h2 .title1.red .sorry-text {
	position: absolute;
	left: 0;
	top: -40px;
}
#loungeFormPage.thanks #titleBlock.subBefore.sorry h2 .title1.red .sorry-text img {
	width: auto;
}
#loungeFormPage.thanks .red {
	color: #f00;
}
#maintenance #errorMessageBox{font-size:1.6rem;}
#maintenance .btn .btn01 a{
	padding: 4px 20px 6px;
	background-color:#516159;
	text-decoration: none;
	transition:all 0.4s;
}
#maintenance .btn .btn01 a:hover{opacity:0.7;}
#maintenance .btn .btn01 a:after{vertical-align:0.1rem;}

@media screen and (min-width:769px){
	#qaPerBnr a{
		width: 528px;
		margin:22px auto 28px;
		padding:15px 0 0 134px;
	}
	#qaPerBnr a:before{
		position: absolute;
		top: 0;
		left:0;
		width:134px;
		height: 120px;
	}
	#qaPerBnr h3{font-size:3.0rem;}
	#qaPerBnr p{font-size:1.6rem;}
	#qaPerBnr p.lead{margin:12px auto 20px;}
	#qaPerBnr p.more{padding:8px 30px 9px;}
	
	#loungeFormPage .security_cord{display: flex;}
	#loungeFormPage .security_cord > div{display: block;}
	#loungeFormPage .security_cord figcaption{margin-left: 10px;}
}
@media screen and (max-width:768px){
	#qaPerBnr a{
		width:80vw;
		margin:2vw auto 4vw;
	}
	#qaPerBnr a:before{
		width:100px;
		height:90px;
		margin:0 auto 10px;
	}
	#qaPerBnr h3{font-size:2.4rem;}
	#qaPerBnr p{font-size:1.4rem;}
	#qaPerBnr p.lead{margin:2vw auto 3vw;}
	#qaPerBnr p.more{padding:6px 20px;}

	#contact h3+.note{margin:-4vw 0 6vw;}
	.privacy dd p{padding-right:60px;}
	#contact .contactNote,
	#contact dl{width:96%;}
	.form input.txt01{width:47%;}
	.form .hopeDate input[type=text].datepicker{margin-right:16px;}
	.form .hopeDate select[name="hope_time1_hour"],
	.form .hopeDate select[name="hope_time2_hour"],
	.form .hopeDate select[name="hope_time3_hour"]{margin-left:0px;}
	.thanks #contact h3{line-height: 1.5;}
	#loungeFormPage #titleBlock.subBefore h2 .title1{
		font-size: 2.0rem;
		line-height: 1.5;
	}
}
@media screen and (max-width:640px){
	#loungeFormPage.thanks #titleBlock.subBefore.sorry h2 .title1.red {
		padding-left: 0;
		padding-top: 50px;
	}
	#loungeFormPage.thanks #titleBlock.subBefore.sorry h2 .title1.red .sorry-text {
		position: absolute;
		left: 0;
		top: 0;
	}
}
@media screen and (max-width:480px){
	.form input.txt01[name$='_tel']{width:100%;}
}