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

body {
    width: 100vw;
    height: 100vh;
    font-family: "Noto Sans Japanese", sans-selif;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#container{
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    margin: auto
}

.wide{
    font-size: 2.2em;
    text-align: center;
    padding-left: 2em;
    
}

h2{
    font-size:2em;
    text-align: center;
    border-bottom: solid 5px #DEF2FD;
    border-left: solid 10px #92E0F5;
    width: 90%;
    margin: auto;
    margin-top: 60px;
    margin-bottom: 20px
}

a {
    text-decoration-line: none;
    color: #1954CA
}

.title {
    display: flex;
    border-bottom: dashed 3px #92E0F5
    
}

.title figure {
    margin: 20px 0 20px 0
}

.menu {
    width: 30%;
    height: 100%
}

.menu figure{
    width: 60%;
    margin: auto;
    margin-top: 20px
}

.menu img {
    width: 100%
}

.menu ul{
    width: 90%;
    margin: auto;
    padding-left: 0;
    font-weight: bold;
    font-size:1.1em;
    
    
}

.menu li {
    width: 100%;
    list-style: none;
    height: 5em;
    display: flex;
    align-items: center;  /* 縦中央 */;
    border-bottom: dashed 3px #92E0F5
}

.menu li a{
    color: #333
}
.menu li a:hover{
    color: #1954CA
}


/*ハンバーガーメニューの内容----------------------------*/

.openbtn{
	position: relative;/*ボタン内側の基点となるためrelativeを指定*/
	cursor: pointer;
    width: 30px;
    height:40px;
	border-radius: 5px;
    z-index: 9999;
    margin-right: 30px;
    margin-top: 30px
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    
    height: 3px;
    border-radius: 2px;
	background: #51A3E5;
  	width: 100%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

/*activeクラスが付与されると線が回転して×に*/

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 0px;
    transform: translateY(6px) rotate(-45deg);
    width: 100%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 0px;
    transform: translateY(-6px) rotate(45deg);
    width: 100%;
}


/*ハンバーガーメニューの中身----------------------------*/

#g-nav-min {
    position: fixed;
    z-index: -10;
    display: none;
    top:0 ;
    width: 100%;
    height: 100vh;
    background: #DEF2FD;
    transition: all 0.3s;
    overlay:none;
    background-size: cover;
    padding-left: none
}

#g-nav-min.panelactive{
    display: block;
    z-index: 999
}

#g-nav-min ul {
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    
}

#g-nav-min.panelactive #g-nav-list {
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling:touch;
}

#g-nav-min.panelactive ul {
    display: block;
    width: 80%;
    margin: auto;
    padding-left: 0
}

#g-nav-min li {
    list-style: none;
    text-align: center;
    line-height: 3em;
    font-weight: bold
}

#g-nav-min li a {
    display: inline-block;
    text-decoration: none;
    color: #666;
    padding-bottom: 10px
}


#main {
    position: relative;
    height: 100vh;
    width: 70%;
    margin: auto;
    background-color: #FFFFFF;
    padding-top: 70px;
    z-index: 100
}


.content {
    width: 70%
}

.top {
    width: 100%;
    padding-top: 0;
    margin: auto;
    max-height: 70vh;
    overflow: hidden
}

.content .top img {
    width: 100%
}


.bottom {
   width: 100vw;
    margin: 0 calc(50% - 50vw)
   
}

.bottom img {
    width: 100%;
    vertical-align: bottom
}

.footer {
   
    background: #DEF2FD;
    padding-bottom: 2em
}

.footer figure{
    width: 250px;
    margin: auto
}

.footer figure img {
    width: 100%
}


.footer p{
    text-align: center;
    font-size: 0.9em;
    width: 80%;
    margin: auto
}



/*各会議室詳細----------------------------------------------------------------------------------------------------------------------*/

h3 {
    border-bottom: dashed 2px #1954CA;
    width: 90%;
    margin: auto;
    margin-top: 3em;
    margin-bottom: 2em
    
}

h3 span {
    color: #1954CA
}

.roomlist {
    width: 95%;
    margin: auto
}

.roomlist ul {
    
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-left: 0
}


.roomlist ul li {
    list-style: none;
    width: 30%;
    font-weight: bold;
    background: #DEF2FD;
    display: flex;
    align-items: center;  /* 縦中央 */;
    text-align: center;
    margin-bottom: 1em;
    padding: 0.3em;
    border-radius: 5px
}

.roominfo table{
    width: 90%;
    margin: auto;
    border-collapse: collapse;
    margin-bottom: 5em
}

.roominfo table tr {
    height: 5em;
    border: solid 2px #92E0F5
}

.roominfo table th {
    width: 25%;
    background:#DEF2FD 
}

.roominfo table td {
    padding: 0.5em
}



.roominfo img {
    width: 100%;
	height: auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/
.gallery{
	margin:auto;
    width: 90%;
    padding-left: 0
    
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/

.choice-btn {
    width: 90%;
    margin: auto;
    padding-left: 0
}

.choice-btn li{
	cursor: pointer;
	outline: none;
	background:#333;
}

.choice-btn li img{
	opacity: 0.4;/*選択されていないものは透過40%*/
}

.choice-btn li.slick-current img{
	opacity: 1;/*選択されているものは透過しない*/
}

/*========= レイアウトのためのCSS ===============*/
/*エリア全体を中央寄せ*/
.wrapper{
	width:94%;
	max-width:900px;
	margin:0 auto;
}




/*空き状況----------------------------------------------------------------------------------------------------------------------*/

.sheet {
    width: 90%;
    margin: auto
}

.sheet iframe{
    width: 100%;
    height: 700px;
    
}

.sheet p{
    font-weight: bold
}


.yoyaku table {
    width: 90%;
    margin: auto;
    border-collapse: collapse;
   
}

.yoyaku table tr {
     border: solid 2px #92E0F5
}
.yoyaku table th {
    width: 30%;
    background: #DEF2FD
    
}
.yoyaku table td {
    padding: 0.5em
}

.yoyaku p {
    width: 90%;
    margin: auto;
    font-weight: bold;
    font-size: 1.1em
}



/*申込み方法----------------------------------------------------------------------------------------------------------------------*/

.wey p {
   width: 90%;
    margin: auto;
    font-weight: bold;
}


.btn2 {
margin: 45px;
    display: block;
    text-align: center;
}


.btn {
   width: auto;
    padding: 1em;
    background: #DEF2FD;
    border-radius: 50px;
margin: auto;
}

.btn:hover{
    background: #92E0F5;
    color: #fff
}

.wey table {
    width: 90%;
    margin: auto;
    border-collapse: collapse;
   
}

.wey table tr {
     border: solid 2px #92E0F5
}
.wey table th {
    width: 30%;
    background: #DEF2FD
    
}
.wey table td {
    padding: 0.5em
}




@media screen and (min-width:1600px){
    .sheet{
        width: 1140px;
        margin: auto
    }
}


@media screen and (min-width:1500px){
    
    .menu {
        width: 20%
    }  
    
    .content {
        width: 80%
    }
    
    
.info{
    display: flex;
    flex-direction: row;
    align-items: center
}

    .map {
        width: 60%;
        
    }  
    
    .root {
        
        background: #DEF2FD;
        width: 35%;
        margin: auto;
        border-radius: 15px
        
    }
    
    .root p {
        line-height: 3em;
        font-weight: bold;
        padding: 2em 2em 2em 3em;
    }
    
    h2 {
        width: 100%
    }
    
    .roomlist ul {
        flex-direction: row
    }
    
    .roomlist ul li {
        width:15% 
    }
    
    
    .room {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap
    }
    .roominfo {
        width: 50%
    }
    
  
}


@media screen and (max-width:1499px){
    
    .info{
    display: flex;
    flex-direction: column;
    align-items: center
}

    .map {
        width: 90%;
        margin: auto
        
    }  
    
    .root {
        
        background: #DEF2FD;
        width: 90%;
        margin: auto;
        border-radius: 15px
        
    }
    
    .root p {
        line-height: 2.5em;
        font-weight: bold;
        padding: 2em 2em 2em 3em;
    }
       
    
    
}


@media screen and (min-width:850px){
    .openbtn {
        display: none
    }
    
    .min {
        display: none
    }
}

@media screen and (max-width:849px){
    .menu {
        display: none
    }
    
    .content {
        width: 100%
    }
    
    .min {
        font-size: 1.8em;
        text-align: center
    }
    
    .wide {
        display: none
    }
    
    .title {
    display: flex;
    justify-content: space-between
}
    
    h2 {
        font-size: 1.5em
    }
    
    .footer figure{
        width: 200px
    }
    
    
}

@media screen and (max-width:500px){
    .min {
        font-size:1.2em;
        display: flex;
    align-items: center;  /* 縦中央 */;
    }
    
    .title figure {
        width: 20%
    }
    
    .title figure img {
        width: 100%
    }
    
    .openbtn {
        left: 5px
    }
    
    .h2 {
        font-size: 1em
    }
    
    body {
        font-size: 0.9em
    }
}