@charset "utf-8";
/* CSS Document */

h1 { background: #000 url(../img/index/main.jpg) 50% 0 no-repeat; width: 100%; height: 800px; text-indent: -9999px; }


.modal{
    display: none;
    position:fixed;
    justify-content: center;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    z-index:9999;
}
.modal #iframes{
    position:fixed;
    opacity:1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    width:690px;
    height;500px;
    border:none;
    overflow: hidden;
    z-index:99999;
}
.modal .close{
    position:fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    width:60px;
    z-index:999999;
    margin-top:-300px;
    margin-left:380px;
}
.modal .close img{
    width:100%;
}

/*メニュー
----------------------------------------------*/
#con { position: relative; top: -50px; }
#menuline { background: url(../img/common/bg_black.svg) repeat-x; width: 100%; background-position:center bottom;height: 70px; position: relative; z-index: 999; }
#menu { 
	max-width: 960px; 
	background: #000; 
	margin: 0px auto 50px auto; 
	font-family: "futura-pt", sans-serif; 
	font-weight: 400;
	font-size: 22px; 
	display: flex; 
	justify-content: space-around; 
	color:#666;
}
.pcview{display:block}
.spview{display:none}
#menu li { width: 100%; text-align: center; border-right: 1px solid #2E2E2E; position: relative;}
#menu li:first-child { border-left: 1px solid #2E2E2E; }

#menu li a {color:#fff;}
#dot { 
	max-width: 960px; 
	display: flex; 
	justify-content: space-around; 
	margin:-20px auto 0 auto; 
	position:relative;
	z-index:999;
}
#dot li{width:137px,text-align:center;}

/*中身
----------------------------------------------*/
#info { max-width: 960px; margin: 0 auto; display: flex; justify-content: center; height:350px;}
#info_two { max-width: 960px; margin: 0 auto; display: flex; justify-content: center; }
#banner_area { max-width: 950px; margin: 0 auto; display: flex; justify-content: left; }
#banner_area .left{text-align:right; width:485px; }
#banner_area .right{text-align:left; width:390px; margin-left:20px;}
#info1 { width: 412px; position: relative; height:340px;margin:0px 20px; border:solid 1px #FF0087}
#info1 h2 { background: url(../img/index/check.jpg) repeat; font-size: 28px; color: #FF0087;	font-family: "futura-pt", sans-serif; font-weight: 600; margin-bottom: 10px; padding-left:20px;}
#info1 img {position:relative;top:5px; left:5px}
#info1 table { width: 280px;	font-family: "hiragino-kaku-gothic-pron", sans-serif; font-weight: 300; font-size: 10px; margin: 0 auto; border-collapse: collapse; position: absolute; top: 50px; left: 130px; }
#info1 th { padding: 5px; text-align: center; }
#info1 td { text-align: left; padding: 5px; }
#info1 tr:nth-child(odd) { background: #2E2E2E; }

#info2 { width: 380px; position: relative; height:340px;border:solid 1px #FF0087;padding: 0 5px;}
#info2 h2 { background: url(../img/index/check.jpg) repeat; font-size: 28px; color: #FF0087; font-family: "futura-pt", sans-serif; font-weight: 600; margin-bottom: 10px; padding-left:20px;}
#info2 img { border: 1px solid #FF0087; }
#info2 .news{
	font-family: "hiragino-kaku-gothic-pron", sans-serif;
	font-weight: 300; 
	display: flex; 
	justify-content: center;
}
#info2 .news .day{
	width:25%;
}
#info2 .news .title{
	width:75%;
}
#info3 {position:relative;left:10px;margin-top:50px;}
/*
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
ლ(╹◡╹ლ) 
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
*/
@media screen and (max-width: 700px) {	
	h1 { height: auto; padding-bottom: 62.5%; background-size: contain; }
	#menuline { background: url(../img/common/bg_black.svg) repeat-x; width: 100%; background-position:center 30px;height: 70px; position: relative; z-index: 9999; display:none;}
	
	/*メニュー
	----------------------------------------------*/
	#con { top: -75px; }
	#menu { display:none;}
	#dot { display:none;}
	#menu li { width: 30%; border: none; }
	#menu li:first-child { border-left: none; }
	.modal{
        display: none;
        position:fixed;
        justify-content: center;
        top:-100px;
        width:100%;
        height:120%;
        background:rgba(0,0,0,0.5);
        z-index:9999;
    }
	
	.modal #iframes{
        position:fixed;
        opacity:1;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
        width:100%;
        height;100vw;
        border:none;
        overflow: hidden;
    }
    .modal .close{
        position:fixed;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
        width:30px;
        margin-top:-70vw;
        margin-left:40vw;
    }
    .modal .close img{
        width:100%;
    }
	
	/*中身
	----------------------------------------------*/
	#info1 h2 {text-align:center; padding-left:0px;}
	#info { width: 100%; margin: 15vw auto 0 auto; flex-wrap: wrap;height:auto;}
	#info_two {
		width: 95%; 
		margin: auto;
		flex-wrap: wrap;
	}

	#banner_area { width: 100%; margin: 0 auto 30px auto;flex-wrap: wrap;}
	#banner_area .left{text-align:center; width: 100%; margin-bottom:50px;}
	#banner_area .right{text-align:center; width: 100%;margin-left:13px;}
	
	#info1 { width: 95%;margin:auto; height:140vw; margin:0;}
	#info1 p { text-align: center; margin-bottom: 10px; }
	#info1 img { width: 120px; }
	#info1 table { width: 100%; position: static; }
	#info2 { width: 95%; height:50vw;margin:30px auto 50px auto;}
	#info2 h2 {text-align:center; padding-left:0px;}
	#info2 li { text-align: center; }
	#info3 { width: 100%; margin: 0 auto; left:0;}
	#info2 .news{
		width:95%;
		margin:auto;
	}
	#page{margin-top:40px;}
	
	.pcview{display:none}
	.spview{display:block}
}