@charset "utf-8";

body{background-color:#000;color:#fff;font-family:'Noto Serif JP',serif;}

header h1{position:absolute;z-index:99;top:30px;left:30px;}
header h1 img{width:90%;}

.news_icon{
	background-color: #666;
    margin-right: 0;
    font-weight: bold;
    font-size: 12px;
    margin-left: 5px;
    padding: 2px 10px;
    line-height: 120%;
}



.top-start{display:flex;}

.top-start-1,
.top-start-2{width:100%;overflow:hidden;}

.top-start-bk{background-size:cover;position:relative;}

.top-start-1 .top-start-bk,
.top-start-2 .top-start-bk{padding-top:100%;}
.bottom-start-online .top-start-bk{padding-top:70%;}

.top-start-1 .top-start-bk{background-image:url(img_isun_top/kita.jpg);}
.top-start-2 .top-start-bk{background-image:url(img_isun_top/emi.jpg);}
.bottom-start-online .top-start-bk{background-image:url(img_isun_top/online.jpg);margin-bottom: 20px;}

.top-start-1,
.top-start-2,
.bottom-start-online{background-position:center center;}


.top-start-bk,
.top-start-bk .obi{transition: 0.8s;}

.top-start-bk:hover{transform:scale(1.02) translateY(0.2%);}
.top-start-bk:hover .obi{background-color:rgba(255,255,255,0);}

.obi{
	position: absolute;
    top:0;
    bottom:0;
    height:20%;
    margin:auto;
	width:100%;
	background-color:rgba(0,0,0,0.4);
	text-align: center;
	display: flex;
    align-items: center;
}

.bottom-start-online .obi{height:50%;/*height:45%;*/}

.obi:before{
	content:'';
	top: 0;
	right: 0;
	left: 0;
	width:0;
	margin:auto;
	border: 1px solid #fff;
	position:absolute;
	opacity:0;
	transition:0.4s;
	background-color:rgba(255,255,255,0.2);
}


.obi-text{margin:auto;color:#fff;text-shadow:0 0 2px black;}

.obi-text h2{font-size:1.8vw;font-family: 'M PLUS 1p', sans-serif;font-weight:300;}
.obi-text h3{font-size:1.2vw;font-family: 'Fira Sans Condensed', sans-serif;letter-spacing: 5px;}
.obi-text h4{font-size:2.0vw;font-family: 'M PLUS 1p', sans-serif;font-weight:300;}
.obi-text h5{font-size:1.4vw;font-family: 'M PLUS 1p', sans-serif;font-weight:300;}

.top-start-bk .obi p{/*text-align:center;color:#fff;opacity:0;transition:0.5s;*/}
.top-start-bk:hover .obi p{/*opacity:1;*/}

.top-start-bk:hover .obi:before{
	width:90%;
	opacity:1;
	height:100%;
}

p.sinshu{float:left;width:120px;margin-right:20px;}
p.sinshu img{width:100%;}


.bottom-start{display:flex;padding:5%;}


.bottom-start-inner{padding-right: 30px;}

.bottom-start-top{margin-bottom:40px;}
.bottom-start-online{box-sizing:border-box;overflow: hidden;}

.bottom-start-news{flex:1;}
.bottom-start-online{width:80%;}

.bottom-start-top h1{margin-bottom:20px;}
.bottom-start h1{font-weight:200;font-size:1.6rem;}
.bottom-start p{font-weight:200;font-size:1.0rem;line-height:180%;margin-bottom:10px;}


.bottom-start-news h1{border-bottom:1px solid #f00;margin-bottom:10px;padding-bottom:10px;}
.bottom-start-news a{text-decoration:none;}
.bottom-start-news a:link,
.bottom-start-news a:visited{color:#fff;}
.bottom-start-news a:hover{color:#f00;}

.dt-wrap{display:flex;margin-bottom:10px;}
.dt-wrap dt{width:6rem;}
.dt-wrap dd{flex:1;}

footer{text-align:center;padding:30px 0;background: #171717;}

footer ul,
footer li{list-style.none;margin:0;padding:0;}

footer ul{font-size:0;margin-bottom:1rem;}
footer li{display:inline-block;font-size:1rem;border-right:1px solid #aaa;}
footer li:first-child{border-left:1px solid #aaa;}
footer li i{margin-right:5px;}

footer a{position:relative;text-decoration:none;display:inline-block;margin:0 10px;}
footer a:link,
footer a:visited{color:#fff;}



footer a:before{
content:'';
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
background: #ccc;
transform: scale(0,1);
transform-origin: left;
transition: 0.2s;
}
footer a:hover:before {
transform: scale(1);
}

.copyright{text-align:center;font-size:0.8rem;margin:30px auto;}



/* ADD */
.online-box{width:80%;}

.yoyaku-parts{border:1px solid #DB1f20;box-sizing:border-box;}

@media screen and (max-width:959px) {
	header h1{position:relative;text-align:center;top:auto;left:auto;padding:20px 0;}
	header h1 img{width:30%;}
	.top-start{display:block;}
	.top-start-1, .top-start-2{width:100%;padding-top:100%;}
	.bottom-start{display:block;}
	.bottom-start-online{width:100%;}
	
	.bottom-start h1 {font-size: 1.2rem;}
	.dt-wrap {display: block;}
	
	.obi-text h2{font-size:4vw;}
	.obi-text h3{font-size:3vw;letter-spacing:1px;}
	.obi-text h4{font-size:5vw;}
	.obi-text h5{font-size:3.6vw;}
	
	.bottom-start-inner{padding-right: 0;}
	footer li{font-size:0.8rem;}
	footer ul:last-of-type li{display:block;margin-bottom:5px;}
	footer ul li{border:none;}
	footer ul:first-t-of-type li{/*border-right:1px solid #aaa;*/}
	footer li:first-child{border:none;}
	
	/* ADD */
	.online-box{width:100%;}
}