@charset "Shift_JIS";

/*--------------------------------------------------------
  共通レイアウトパーツ設定
--------------------------------------------------------*/

@charset "Shift_JIS";

/* 要素リセット */
body{
    margin: 0 0 100px 0;
    padding: 0;
    text-align: center;
    font-size: 100%;
    font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'Osaka' ,sans-serif;
    color: #666666; /* 標準文字色 */
    min-width: 980px;
}
/* Safari用ハック 文字サイズ調整 */
/*\*/
html:first-child body{
    font-size: 95%;
}

#contents{
    width: 844px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    text-align: left;
}

a:link{
    color: #6699ff;
    text-decoration: underline;
}
a:visited{
    color: #6699ff;
    text-decoration: underline;
}
a:hover{
    color: #ff66cc;
    text-decoration: underline;
}
a:active{
    color: #ccc;
    text-decoration: underline;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }

/* グローバルナビ */
#globalNavi{
    text-align:right;
    margin: 10px 0 0 0;
    padding: 0;
}

#globalNavi a{
    margin-right:1px;
    margin-bottom:0;
    padding:0;
}

#globalNavi img{
    margin:7px;
    padding:0 0 20px 0;
    vertical-align:bottom;
}

h1{
    float: left;
    height:48px;
    padding:0;
    margin:10px 0 0 0;
}

#header p{
	padding:20px;
	background-color:#feffce;
	border:dotted 5px #99cccc;
}

.text-align-center{
    text-align:center;
}

.text-align-center img{
	margin:0 auto;
}

.comingsoon{
    margin:100px auto 0 auto;
}

h2{
    margin:0;
    padding-top:20px;
}

#h2_1{
    padding-top:50px;
}

.text{
    padding:10px 20px;
}

#gaiyo{
    padding-top:20px;
}

#gaiyo dt{
    padding-left:20px;
    float:left;
}

#gaiyo dd{
    padding-left:90px;
}

.comments{
    font-size: 13px;
    padding-left:130px;  
}

table{
    border-collapse:  collapse;
    margin:20px 0 5px 30px;
}

td{
    border:solid 1px #99ccff;
    text-align:center;
    padding:5px 30px;
}

.left{
    text-align:left;
}

#advantage{
	font-size: 120%;
	text-align:center;
}

#advantage span{
	margin:0 auto;
	text-align:left;
	padding:0 0 0px 0;
}

#advantage img{
	vertical-align:bottom;
	padding:10px 10px 0 0;
}

#merit1{
	border-bottom:dotted 3px #ff6666;
}

#merit2{
	border-bottom:dotted 3px #99ccff;
}

#merit3{
	border-bottom:dotted 3px #999999;
}

#merit4{
	border-bottom:dotted 3px #ff99ff;
}

#merit5{
	border-bottom:dotted 3px #ffcc66;
}

#merit6{
	border-bottom:dotted 3px #6699ff;
}

#merit7{
	border-bottom:dotted 3px #66cc33;
}

#merit8{
	border-bottom:dotted 3px #66cccc;
}

#tel{
    border:solid 5px #99cccc;
    padding:10px;
    text-align:center;
    margin:30px;
}

#facilityPhoto{
	text-align:center;
}
#facilityPhoto img{
	padding:5px;
}

#tel iframe{
	width:600px;
	height:450px;
}

#attention{
	color:#ff6699;
	font-size:120%;
}

#attention span{
	font-size:80%;
}

#guide{
	border:dotted 5px #ffccff;
	padding:10px;
}

.question{
	border-bottom:solid 1px #999999;
}

#guide ul {
  list-style-type: square;
}




/* =======================================================
  レスポンシブ設定
======================================================= */
@media screen and (max-width: 568px) {
	body{
		min-width: 100%;
	}

	/*--------------------------------------------------------
	  レイアウト設定
	--------------------------------------------------------*/
	#contents{
		width: 100%;
		font-size:110%;
	}
	
	h1{
		width: 100%;
		padding:70px 0 0 0;
        text-align:center;
	}
	
	img {
	    max-width: 100%;
	    height: atuo;
	}
	
	p#tel iframe{
		width: 100%;
	}
	
	/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
	.pc { display: none !important; }
	.sp { display: block !important; }

	#header p{
		padding:10px;
		margin:0;
	} 

	.text{
		padding:10px;
	}
    
    .comments{
        padding:10px;  
    }

    #gaiyo{
        padding:10px;
    }

    #gaiyo dt{
        padding:0;
    }

    #gaiyo dd{
        padding-left:50px;
    }
    
    table{
        margin:10px;
    }   

    td{
        padding:5px;
    }
    
    .comingsoon{
        width: 80%;
    }

	/*--------------------------------------------------------
	  グローバルナビゲーション
	--------------------------------------------------------*/
    /* ヘッダー */
    header{
        width: 100%;
        padding: 10px 0;
        position: fixed;
        top: 0;
        z-index: 100;
        padding: 0;
        background-color: #fff;
        border-bottom:1px solid #99cccc;
    }
    
    #btn_sp{
         position: fixed;
         top:5px;
         right: 5px;
    }
    
    .header_wrapper{
        margin: auto;
        display: flex;
        align-items: center;
         justify-content: space-between;
    }

    .header_right{
        display: flex;
	}
	
	

    /* ナビゲーション */
    .gnav{
        width: 100%;
        background-color: #99cccc;
    }
    
    .gnav_wrapper{
        margin: auto;
        display: flex;
        position: fixed;
        display: table;
        top: 0;
        left: 0;
        width: 80%;
        background: #99cccc;
        visibility: hidden;
        opacity: 0;
        padding-top: 12%;
    }

    .gnav_wrapper li{
        text-align: center;
        width: calc(100%/7);
        transition: all  0.3s ease;
        max-width: 300px;
        margin: 0 auto;
        width: 100%;
        border-bottom: #888 1px solid;
        list-style:none;
    }
    
    .gnav_wrapper li img{
        padding:0 10px 0 0;
    }

    .gnav_wrapper li:hover{
        background-color: #66cccc;
    }
    
    .gnav_wrapper li a{
        display: block;
        padding: 1.0em 0;
        color: #fff;
        text-decoration: none;
    }
    
    .menu-btn{
        color: #fff;
        cursor: pointer;
        z-index: 100;
        background-color: #99cccc;
        max-width: 56px;
        width: 56px;
    }
    
    .menu-btn i{
        display: block;
        font-size: 24px;
        text-align: center;
        padding-top: 13px;
    }
    
    .menu-btn span{
        display: block;
        padding: 0 0 10px 0;
        font-size: 10px;
        text-align: center;
    }
    
    .open{
        transition: all .5s;
        visibility: visible;
        opacity: 1;
        z-index: 10;
    }
    
    .menu-btn span::after{
        content: attr(data-txt-menu);
    }
    
    .open span::after{
        content: attr(data-txt-close);
    }
}