@charset "utf-8";
/*========= モーダル表示のためのCSS ===============*/

.modaal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;opacity:0}
.modaal-wrapper{
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:99999;
	overflow:auto;
	opacity:1;
	box-sizing:border-box;
	-webkit-overflow-scrolling:touch;
	-webkit-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out
}



.modaal-container {
   background: #fdfdfd;
   color:#545454;
   position:relative;
}

.modaal-wrapper .modaal-close {
    /*background:#675553;*/
	position:absolute;
	top:0;
	right:0;
	transform: translate(10%, -10%);
}

/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
	display: none;
}


.modaal-overlay {
/*オーバレイの色をRGBで指定*/
background: rgb(0, 0, 0) !important;

/*オーバレイの濃度を.1刻みで指定（ 0.1=10% 1=100%）*/
opacity: 0.4 !important;
}

/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#666;
}

/*確認を促すモーダル：タイトルの色を変更したい場合*/
#modaal-title{
	font-size:1.2rem;
	text-align: center;
	margin: 0 0 20px 0;
}

/*動画表示のモーダル：余白を変更したい場合*/
.modaal-video .modaal-inner-wrapper{
	padding:0;
}

/*以下はコンテンツ内のレイアウト*/
.info-list dl,
.gallery-list{
	display: flex;
}

.info-list dt{
	margin:0 10px 0 0;
}

.gallery-list li{
	margin:0 10px 0 0;
}




/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
	トップページログイン
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/

.modaal-content-container {
    padding:0;
}

.modaal-content-container .inner {
    padding: 1em 0 0;
}

.modaal-content-container ::placeholder {

color:#e4ddd8;
color:#ccc;

}

.modaal-content-container ul.form{
	width:76%;
	display:block;
	margin:0 auto 3em;
}

.modaal-content-container ul.form li{
	width:100%;
	display:block;
	margin:0 0 1.5em;
}

.modaal-content-container ul.form li p{
	font-size: 140%;
	margin-bottom:0.3em;
}

.modaal-content-container ul.form li a{
	display:block;
	text-align:center;
}

.modaal-content-container ul.form li a.btn{
	width:90%;
	background-color:#545454;
	margin:0 auto 0.5em;
	padding:0.5em 1em;
	color:#fff;
	font-size:160%;
	font-weight:700;
	border-radius:0.3em;
}
.modaal-content-container ul.form li a.uline{
	text-decoration:underline;
	font-size:120%;
}

.modaal-content-container input[type="text"]{
	
	width:100% !important;
	border:1px solid #ccc;
	padding:0.7em 1em;
	font-size: 120%;
	color: #545454;
	display:block;
	margin:0;
	background-color:#fff;
}


.modaal-content-container .signup {
	background-color:#d0c3b2;
	padding:2em 0;
	text-align:center;
}

.modaal-content-container .signup a{
	color:#fff;
	font-size:140%;
	text-decoration:underline;
	font-weight:700;
}