@charset "utf-8";
header #myroomSpBtn a,
header #contactSpBtn a{text-decoration: none;}
footer#footer{padding: 0;}
footer#footer a{text-decoration: none;}
footer#footer .inner{
	width:90vw;
	padding: 0;
}
footer#footer #ftMenu li a{
	line-height: 1.5;
	letter-spacing: 0.05rem;
}
#main section#titleBlock{
	background:#fff;
	margin: 0 10px;
}
#main section#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;}
#titleBlock.subBefore h2 .title1{
	font-size: 2.8rem;
	line-height: 1.0;
}



/* page head */
#pagehead .wrap {
	width: calc(100% - 20px)!important;
	margin: auto;
	height: auto;
	padding:16px 0;
	position: relative;
	text-align: center;
}
#pagehead{border: none;}
#pagehead .wrap{
	margin:0 10px 10px;
	padding: 80px 0 40px;
}
#pagehead h1{
	position: relative;
	top: 0;
	width:100%;
	height: auto;
	margin: 0 auto;
	line-height: normal;
}
#pagehead h1 span{display: block;}
#pagehead h1 span.enName{
	margin: 0 auto;
	font-size:2.8rem;
	line-height:1.0;
	font-weight: normal;
	vertical-align: middle;
}
#pagehead h1 span.enName i{
	font-style: normal;
	display: inline-block;
	font-size:90%;
	vertical-align:1px;
}
#pagehead h1 span.jpName{
	margin: 15px auto 0;
	font-size: 4.5rem;
	font-weight: bold;
	line-height: 1.5;
}


/*main*/
#main{
	padding: 0;
	width: 100%;
}
#main section{
	margin: 10px;
	padding: 75px 0;
	background: #eee;
	color: #323232;
	font-size: 1.4rem;
	line-height: 1.5;
}
#main .section{margin-bottom:10px;}
#main section .inner{
	margin: 0 auto;
	width: 90vw;
	max-width: 700px;
	padding: 0;
}
#main section div.lead p{
	font-size: 1.4rem;
	line-height: 1.6;
}


/*form*/
form input,
form select,
form textarea{outline: 0;}
input[type=password],
input[type=text],
textarea{background: #fff;}
input{
	-webkit-transition: .3s ease;
	transition: .3s ease;
}
input:-webkit-autofill{
	-webkit-transition: background-color 9999s;
	transition: background-color 9999s;
}
.form dd input[type="text"]+span.caution,
.form dd input[type="password"]+span.caution{margin: -3px 0 2rem;}
.form dd input[type="text"]+span.caution.red{color: #FF0004;}
p.chBox{text-align: left;}
.chBox input[type="checkbox"]+label{
	text-align: left;
	color: #323232;
}
.chBox input[type="checkbox"]{display: none;}
.chBox input[type="checkbox"]+label{
	position: relative;
	display: inline-block;
}
.chBox 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: #eee;
}
.chBox input[type="checkbox"]+label:after{
	content: '';
	width: 30px;
	height: 24px;
	background-image: url(/common/img/form/tick-white.svg);
	background-repeat: no-repeat;
	background-position: 0;
	-webkit-background-size: 18px;
	background-size: 18px;
	position: absolute;
	left: 5px;
	bottom: 0;
}
.chBox input[type="checkbox"]:checked+label:after{background-image: url(/common/img/form/tick_act02.svg);}
#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;
}
.privacy dt strong,
.form dt strong,
.form dd strong{
	color: #cb0f0f;
	font-size: 1.25rem;
	font-style: normal;
	margin-left: 0.3rem;
}
.form dd strong{margin-right: 0.3rem;}
.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;}

.inline li {
	display: inline-block;
	margin:0 1rem 1rem 0;
}
.tilde {
	color: #00405f;
	font-size:1.666rem;
	margin:0 0.6rem;
	font-weight: bold;
}

/* form item */
.form select,
.form input[type=text],
.form input[type=password],
.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 input[type=password]:focus,
.form textarea:focus {
	background-color: #fff4f4;
	border-bottom: 0.3rem solid #cb0f0f;
}
.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: #cb0f0f;
	-webkit-box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #cb0f0f;
		 -moz-box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #cb0f0f;
			box-shadow: 0px 0px 0px 2px #eee, 0px 0px 0px 3px #cb0f0f;
}
.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 a,
.btn .btn02 a{
	text-decoration: none;
	padding:2px 20px 5px;
	line-height: 1.0;
}

.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:#cb0f0f;}
.btn .btn02 > *{background:#00405f;}
.btn .btn01 button:hover,
.btn .btn02 button:hover{
	text-decoration:none;
	opacity:0.7;
}
#myroomLoginRegister main.contents .btn{margin: 80px auto 0;}
#myroomLoginRegister main.contents .btn ul{text-align: center;}
#myroomLoginRegister main.contents .btn li{margin: 0 10px;}
.btn .btn01 > * {background: #cb0f0f;}

#ftBanner {
	width: 100%;
	max-width: initial;
	padding: 62px 0;
	background: #fff;
	text-align: center;
}




#glnavi .myroom a::before{background-image:url(/myroom/images/logout-ico.png);}
#login .wrap_bd[data-category] h2{
	color: #000;
	border: 1px solid #2d2726;
	border-bottom: none;
	box-sizing: content-box;
}
#login .wrap_bd[data-category="workroom"] h2{background:#99adb4;}
#login .wrap_bd[data-category="share"] h2{background:#ddd6cd;}
#login .wrap_bd[data-category="space"] h2{background:#bac0bd;}
#form #errorMessageBox{
	margin:36px 2%;
	color:#f00;
	font-size: 1.8rem;
	font-weight: bold;
}
#login .wrap_bd[data-category] .wrap{box-sizing: content-box;}


/****************************************
content
******************************************/


#goTop{display: none;}

.submit01, .button01, .btn01 a,input[type="button"].button01{padding:8px 20px;}

#myroomLoginRegister.fixed #pagehead{
	position: static;
	padding-top: 56px;
}
#myroomLoginRegister #pagehead h1 span{margin-left: 0;}
#myroomLoginRegister.thanks #main h2{
	font-weight: bold;
	font-size:2.4rem;
	padding: 16px 0;
	text-align: center;
}

#myroomLoginRegister.thanks #main .btn-c{margin-top:36px;}
#myroomLoginRegister.thanks #main .btn-c li.btn01.bttn_1:first-child a{background-color:#aaa;}

@media screen and (min-width:1081px){
	#main section#titleBlock{padding: 80px 0 40px;}
}
@media screen and (min-width:769px) and (max-width:1080px){
	#main section#titleBlock{
		padding-top: calc(40px + 4vw);
		padding-bottom: 5vw;
	}
}
@media screen and (max-width:768px){
	#main section{
		margin-left: 0;
		margin-right: 0;
	}
	#main section .inner{
		width:96%;
		margin: 0 2%;
	}
	#footer {padding-top:6vw;}
	#footer .copyrights{margin-top: 0;}
	body#myroomLoginRegister #footer{
		padding: 18px 0 48px;
		height: auto;
	}
	.form textarea, .form input[type=text].txt100p{margin-right: 0;}
	#myroomLoginRegister main.contents .btn ul li+li{margin-top: 16px;}
}
@media screen and (min-width:641px){
	body#myroomLoginRegister #glnavi .sp.myroom{display: none;}
}
@media screen and (max-width:640px){
	#pagehead .wrap {
		height: auto;
		padding-top: calc(40px + 6vw);
		padding-bottom: 10.4vw;
	}
	#pagehead h1,
	#pagehead .name {
		position: relative;
		height: auto;
		width: 100%;
		margin: 0;
	}
	body#myroomLoginRegister #footer .copyrights{line-height: 1.2;}
	body#myroomLoginRegister #footer #btmNavi li{line-height: 1.8;}
}