@charset="UTF-8";

:root{/*変数*/
--main-color:#565656;/*全ての色を変えられるので楽*/
}

html,body,h1,h2,h3,p,p,ul,li,dl,dt,dd{
margin:0;
padding:0;
line-height: 1.0;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
img{
vertical-align:bottom;
}
header{
width:100%;
height:calc(100vh - 50px);/*navの50px分を入れるために計算していれる*/
background:url(../img/01.jpg)no-repeat 0 center /cover;
}
h1{
width:380px;
height:250px;
background:url(../img/logo2.svg)no-repeat center top/contain;
text-indent:100%;
white-space: nowrap;
overflow:hidden;
}
.g-nav{
width:100%;
height:50px;
margin-bottom:120px;
position:sticky;/*navを固定する*/
top:0;
background-color:#fff;/*色が入ることでぺ時の中に文字がもぐりこまない。*/
z-index:9999;/*Facebookのうめこみにpositionの指定があるので、潜り込まないようにg-navに対してz-indexで上に来させる・*/

}
.g-nav>ul{
display:flex;
justify-content:center;
}
.g-nav li{
margin:0 30px;
}
.g-nav a{
line-height:50px;
padding:10px;
font-weight:bold;
color:var(--main-color);
}
.g-nav a:hover{
text-decoration:underline;/*underlineがでる*/
opacity:0.7;/*すこしだけ薄くなる*/
}
h2{
text-align: center;
color:var(--main-color);
font-size:30px;
margin-bottom:50px;
}
/*movie部分*/
#movie{/*idはCSSでは＃で記述*/

}
.movie-inner{
width:960px;
height:500px;
margin:0 auto 150px;
}
video{
object-fit: cover;/*movieの幅高さに合わせる*/
width:100%;
height:100%;
}
/*メニュー部分*/
#live{
}
.live-inner{
width:960px;
margin:0 auto 150px;
display:flex;
justify-content: space-between;
}
.live-inner>p{
width:300px;
}
.live-inner img{
max-width:100%;/*フルードイメージで表示　300pxの中に納まる画像になる*/
}


/*info部分*/
#info{
margin-bottom: 150px;
}
.info-inner{
width:960px;
margin:0 auto;
display:flex;
justify-content: space-between;
}
.info-box{
width:48%;
}
.info-box>dl{
display:flex;
flex-wrap:wrap;/*改行の設定*/
border:1px solid var(--main-color);
margin-bottom: 20px;
}
.info-box dt{
width:40%;
padding:20px;
border-right:1px solid var(--main-color);
box-sizing:border-box;/*ボーダーを内側にいれてサイズを４０％のままにする*/
text-align:center;
}
.info-box dd{
width:60%;
padding:20px;
box-sizing:border-box;
}
.info-box dt:nth-of-type(-n+3),.info-box dd:nth-of-type(-n+3){
border-bottom:1px solid var(--main-color);
}
/*SNS部分*/
#sns{
margin-bottom:150px;
}
.sns-inner{
width:780px;
margin:0 auto;
display:flex;
justify-content:space-between;
}
/*google-map部分*/
.map-box{
width:48%;
height:300px;
}
.g-map{
width:100%;
height:100%;
}
/*calendarの部分*/
.calendar-inner{
width:800px;
height:600px;
margin:0 auto 150px;
}
.g-calendar{
width:100%;
height:100%;
}
/*お問い合わせフォーム*/
#form{
margin-bottom:50px;
}
.form-inner{
width:600px;
height:1200px;/*スクロールバーが出ない高さに設定*/
margin:0 auto ;
}
.g-form{
width:100%;
height:100%;
}
footer{
width:100%;
height:150px;
background:var(--main-color) url(../img/11.jpg)no-repeat 0 0 /cover;
}
footer>p{
color:#fff;
padding:20px 20px ;
}
footer>p small{
font-size:20px;
}