@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,500,700&display=swap&subset=japanese');

/* Preferences
----------------------------------------------------------- */
/* html5 reset css */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body {line-height:1;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}nav ul {list-style:none;}blockquote, q {quotes:none;}blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}ins {background-color:#ff9;color:#000;text-decoration:none;}mark {background-color:#ff9;color:#000; font-style:italic;font-weight:bold;}del {text-decoration: line-through;}abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}table {border-collapse:collapse;border-spacing:0;}hr {display:block;height:1px;border:0; border-top:1px solid #cccccc;margin:1em 0;padding:0;}input, select {vertical-align:middle;}
/* //html5 reset css */

body {
    font-size: 16px;
    line-height: 1.63;
    letter-spacing: 0.8px;
    color: #333;
    /*font-family: 'Noto Sans JP', sans-serif, "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体";*/
    font-family: -apple-system, BlinkMacSystemFont, 'Open Sans', YuGothic, "游ゴシック Medium", "Yu Gothic Medium" , "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
img{
    max-width: 100%;
    height: auto;
    border: 0;
	vertical-align: middle;
}

p{margin-bottom: 1em;}
ul.disc{
    list-style: disc;
    margin-left: 1.5em;
    margin-bottom: 1em;
}



/* public css
----------------------------------------------------------------*/
.clear{clear: both;}
.cf:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;overflow: hidden;}
* html .cf{ zoom: 1; } /* ie6 */
*:first-child+html .cf { zoom: 1; } /* ie7 */

.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
.red{color: #d70e19;}
.medium{font-weight: 500;}
.bold{font-weight: bold;}
.small{font-size: 12px;}

.fright{float: right;}
.fleft{float: left;}

/*space*/
.mt0{margin-top: 0;}.mt5{margin-top: 5px;}.mt10{margin-top: 10px;}.mt15{margin-top: 15px;}.mt20{margin-top: 20px;}.mt25{margin-top: 25px;}.mt30{margin-top: 30px;}.mt35{margin-top: 35px;}.mt40{margin-top: 40px;}.mt45{margin-top: 45px;}.mt50{margin-top: 50px;}.mt100{margin-top: 100px;}
.mr0{margin-right: 0;}.mr5{margin-right: 5px;}.mr10{margin-right: 10px;}.mr15{margin-right: 15px;}.mr20{margin-right: 20px;}.mr25{margin-right: 25px;}.mr30{margin-right: 30px;}.mr35{margin-right: 35px;}.mr40{margin-right: 40px;}.mr45{margin-right: 45px;}.mr50{margin-right: 50px;}.mr100{margin-right: 100px;}
.mb0{margin-bottom: 0;}.mb5{margin-bottom: 5px;}.mb10{margin-bottom: 10px;}.mb15{margin-bottom: 15px;}.mb20{margin-bottom: 20px;}.mb25{margin-bottom: 25px;}.mb30{margin-bottom: 30px;}.mb35{margin-bottom: 35px;}.mb40{margin-bottom: 40px;}.mb45{margin-bottom: 45px;}.mb50{margin-bottom: 50px;}.mb100{margin-bottom: 100px;}.ml0{margin-left: 0;}
.ml5{margin-left: 5px;}.ml10{margin-left: 10px;}.ml15{margin-left: 15px;}.ml20{margin-left: 20px;}.ml25{margin-left: 25px;}.ml30{margin-left: 30px;}.ml35{margin-left: 35px;}.ml40{margin-left: 40px;}.ml45{margin-left: 45px;}.ml50{margin-left: 50px;}.ml100{margin-left: 100px;}.pt0{padding-top: 0;}
.pt5{padding-top: 5px;}.pt10{padding-top: 10px;}.pt15{padding-top: 15px;}.pt20{padding-top: 20px;}.pt25{padding-top: 25px;}.pt30{padding-top: 30px;}.pt35{padding-top: 35px;}.pt40{padding-top: 40px;}.pt45{padding-top: 45px;}.pt50{padding-top: 50px;}.pt100{padding-top: 100px;}
.pr0{padding-right: 0;}.pr5{padding-right: 5px;}.pr10{padding-right: 10px;}.pr15{padding-right: 15px;}.pr20{padding-right: 20px;}.pr25{padding-right: 25px;}.pr30{padding-right: 30px;}.pr35{padding-right: 35px;}.pr40{padding-right: 40px;}.pr45{padding-right: 45px;}.pr50{padding-right: 50px;}.pr100{padding-right: 100px;}
.pb0{padding-bottom: 0;}.pb5{padding-bottom: 5px;}.pb10{padding-bottom: 10px;}.pb15{padding-bottom: 15px;}.pb20{padding-bottom: 20px;}.pb25{padding-bottom: 25px;}.pb30{padding-bottom: 30px;}.pb35{padding-bottom: 35px;}.pb40{padding-bottom: 40px;}.pb45{padding-bottom: 45px;}.pb50{padding-bottom: 50px;}.pb100{padding-bottom: 100px;}.pl0{padding-left: 0;}
.pl5{padding-left: 5px;}.pl10{padding-left: 10px;}.pl15{padding-left: 15px;}.pl20{padding-left: 20px;}.pl25{padding-left: 25px;}.pl30{padding-left: 30px;}.pl35{padding-left: 35px;}.pl40{padding-left: 40px;}.pl45{padding-left: 45px;}.pl50{padding-left: 50px;}.pl100{padding-left: 100px;}
.mb03e{margin-bottom: 0.3em;}.mb05e{margin-bottom: 0.5em;}.mb1e{margin-bottom: 1em;}.mb2e{margin-bottom: 2em;}.mb3e{margin-bottom: 3em;}.mb4e{margin-bottom: 4em;}.mb5e{margin-bottom: 5em;}

/* rayout
----------------------------------------------------------------*/
.section_wrap{
    padding-top: 120px;
}
.title{
    margin-bottom: 45px;
    text-align: left;
}
.title h2{
    font-size: 32px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 2px;
}
.title .en{
    /* font-weight: 500; */
    line-height: 1.22;
    letter-spacing: 0.75px;
    margin-top: 1rem;
    margin-bottom: 0;
}
.c_width{
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
}
.bg_gray{background-color: #f3f3f3;}

.img_wrap{line-height: 0;}

.br-pc{
    display: block;
}
.br-sp{
    display: none;
}
.sectionWrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.openKakau {
    display: inline-block;
    color: #A9233F;
    border: rgba(169,35,63,0.6) 2px solid;
    padding: 0.35em 1.1em;
    padding-right: 0.8em;
    margin: 0 -2em 0 1.3em;
    font-size: 16px;
    letter-spacing: 1px;
    vertical-align: 0.4em;
}

@media screen and (max-width: 1100px) {
    .section_wrap{
        padding-top: 40px;
    }
    .title{
        margin-bottom: 28px;
    }
    .title h2{
        font-size: 20px;
        letter-spacing: 1.11px;
        line-height: 1.4;
    }
    .title .en{
        font-size: 12px;
        margin-top: .4rem;
    }
    .c_width{
        /* padding-left: 1em; */
        /* padding-right: 1em; */
    }
    .openKakau {
        font-size: 13px;
        margin-left: 1.0em;
        vertical-align: 0.3em;
    }
}
@media screen and (max-width: 600px) {
    .br-pc{
        display: none;
    }
    .br-sp{
        display: block;
    }
}


/* header
----------------------------------------------------------------*/
header{
    position: relative;
    padding-top: 700px;
    background-image: url("../img/slide_new.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
#header_in{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
}
#header_in .c_width{
    padding-top: 18px;
    position: relative;
}
#logo{display: inline-block;background: #fff;padding: 10px 20px;}
#gm{
    position: absolute;
    top: 20px;
    right: 40px;
    list-style: none;
}
#gm li{
    display: block;
    float: left;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 2em;
    height: 60px;
    line-height: 20px;
    box-sizing: border-box;
}
#gm li:first-child{
    padding-left: 0;
}
#gm li a{
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}
#gm li a:hover{
    opacity: 0.6;
}
.nav-button,
.nav-wrap{
    display: none;
}

#header_text{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    text-align: center;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
    background-color: rgba(0,0,0,0.5);
    padding: 2em;
}
#header_title{
    font-size: 48px;
    margin-bottom: 1rem;
}
#header_catch{
    font-size: 18px;
    margin-bottom: 0;
}

@media screen and (max-width: 800px) {
    header{padding-top: 52vh;}
}
@media screen and (max-width: 800px) and (orientation: landscape) {
    header{padding-top: 100vh;}
}

@media screen and (max-width: 1100px) {
    #logo{float: left;}
    #gm{
        display: none;
    }
    .nav-wrap.open {
        display: block;
    }
    .nav-wrap.close {
        display: none;
    }
    .nav-button {
        display: block;
        cursor: pointer;
        float: right;
        margin: 17px 20px 17px 0;
    }
    .nav-wrap {
        position: fixed;
        left: 0;
        top: 0;
        display: none;
        z-index: 10;
        background-color: rgba(0, 0, 0, 0.8);
        width: 100%;
        height: 100%;
        padding-top: 78px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .nav-wrap .nav {
        height: 100%;
        position: relative;
        overflow-x: hidden;
        overflow-y: auto;
        margin-left: 0;
    }
    .nav-wrap li {
        display: block;
        margin: 0 20px;
        line-height: 1.1;
        padding: 1em 0;
        border-bottom: 1px solid #fff;
        position: relative;
    }
    .nav-wrap li::after{
        content: '>';
        position: absolute;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        color: #fff;
        font-size: 16px;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }
    .nav-wrap li a {
        color: #fff;
        font-size: 16px;
        text-decoration: none;
        display: block;
    }
    .nav-wrap li a .jp{
        font-size: 10px;
    }
    /*メニューボタンのエフェクト*/
    .nav-button,
    .nav-button span {
        display: inline-block;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .nav-button {
        z-index: 20;
        position: relative;
        width: 32px;
        height: 26px;
    }
    .nav-button span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 4px;
    }
    .nav-button.active span {
        background-color: #fff;
    }
    .nav-button span:nth-of-type(1) {
        top: 0;
    }
    .nav-button span:nth-of-type(2) {
        top: 11px;
    }
    .nav-button span:nth-of-type(3) {
        bottom: 0;
    }
    .nav-button.active span:nth-of-type(1) {
        -webkit-transform: translateY(11px) rotate(-45deg);
        transform: translateY(11px) rotate(-45deg);
    }
    .nav-button.active span:nth-of-type(2) {
        opacity: 0;
    }
    .nav-button.active span:nth-of-type(3) {
        -webkit-transform: translateY(-11px) rotate(45deg);
        transform: translateY(-11px) rotate(45deg);
    }
    #header_text {
        width: 80%;
        white-space: normal;
        padding: 1em;
        box-sizing: border-box;
        top: 55%;
    }
    #header_title {
        font-size: 20px;
        margin-bottom: 1rem;
    }
    #header_catch{
        font-size: 14px;
    }
}

/* contents
----------------------------------------------------------------*/
#con01{padding-top: 80px; position: relative;}
.con01_content {
    /*position: relative;*/
    padding-bottom: 130px;
}
.con01_content .img {
    text-align: right;
    position: absolute;
    right: 0;
    top: calc(50% + 50px);
    transform: translate(0%, -50%);
    /*bottom: 30px;*/
}
.con01_content .c_text{
    /*position: absolute;
    top: 0;
    left: 0;*/
    width: 100%;
}
.con01_content .c_text .c_width{
    padding: 0 20px;
}
.con01_content .c_text .c_width p{
    width: 48%;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 1.5em;
    /* background: #fff; */
}

@media screen and (max-width: 1100px) {
    #con01{
        padding-top: 38px;
    }
    .con01_content .img{
        position: relative;
        right: auto;
        top: auto;
        transform: translate(0, 0);
        text-align: center;
        bottom: 0;
        margin-bottom: 15px;
    }
    .con01_content .img img{
        width: 100%;
    }
    .con01_content .c_text{
        position: relative;
    }
    .con01_content .c_text .c_width p{
        width: 100%;
        font-size: 14px;
    }
    .con01_content {
        padding-bottom: 0px;
        margin-top: -10px;
    }
    
}

#con02{
    padding-top: 0;
}
.floor_map {
    background: #cccccc;
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 40px;
}
table.floor_table {
    width: 100%;
    margin-bottom: 50px;
}
table.floor_table tr{
    border: 1px solid #f9f9f9;
}
table.floor_table tr span{
    display: block;
    padding: 12px 20px 12px;
}
table.floor_table th {
    width: 25%;
    background: #f1f1f1;
    text-align: center;
    vertical-align: middle;
}
ul.facility_list {
    /* padding-top: 30px; */
    /* padding-bottom: 70px; */
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
}
ul.facility_list li{
    width: 29.6%;
    margin: 0 5.6% 4% 0;
}
ul.facility_list li:nth-child(3n) {
    margin-right: 0;
}
ul.facility_list li p {
    font-size: 15px;
    margin: 0.7em 0.2em 0;
    line-height: 1.6;
}
ul.facility_list li p .kome {
    font-size: 14px;
    margin-left: 0.5em;
}
.floor_name{
    font-size: 18px;
    margin-bottom: 12px;
}
.place_icon {
    margin-bottom: 45px;
    width: 86%;
    margin: 0 auto 50px;
}
.floor_overview h3 {
    font-size: 20px;
    margin-bottom: 15px;
    letter-spacing: 2px;
}
.floor_facility h3 {
    font-size: 20px;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

@media screen and (max-width: 1100px) {
    #con02{
    padding-top: 48px;
    }
    .floor_name{
        font-size: 14px;
    }
    .place_icon{
        width: 100%;
    }
    .floor_map{
        margin-bottom: 20px;
    }
    .floor_overview h3{
        font-size: 16px;
    }
    table.floor_table tr{
        font-size: 14px;
    }
    table.floor_table th{
        width: 100%;
        display: block;
    }
    table.floor_table td{
        width: 100%;
        display: block;
    }
    .floor_facility h3{
        font-size: 16px;
    }
    ul.facility_list{
        width: 75%;
        margin: 0 auto;
    }
    ul.facility_list li{
        width: 100%;
        margin: 0 0 30px;
    }
    ul.facility_list li p{
        font-size: 13px;
    }
}

#con03{
}

@media screen and (max-width: 1100px) {
    #con03{
    }
}

#con33{
}

@media screen and (max-width: 1100px) {
    #con33{
    }
}

#con04{
    padding-bottom: 120px;
}
table.system_table {
    width: 100%;
    margin-bottom: 1em;
}
table.system_table tr{
    border: 1px solid #f9f9f9;
}
table.system_table tr span{
    display: block;
    padding: 12px 20px 12px;
}
table.system_table th {
    width: 25%;
    background: #f1f1f1;
    text-align: center;
    vertical-align: middle;
}

@media screen and (max-width: 1100px) {
    #con04{
        padding-bottom: 40px;
    }
    table.system_table tr{
        font-size: 14px;
    }
    table.system_table th{
        width: 100%;
        display: block;
    }
    table.system_table td{
        width: 100%;
        display: block;
    }
}


#con05{
    padding: 80px 0;
    background: #f1f1f1;
}
#con05 .title{
    text-align: center;
}
#con05 .title h2{
    font-size: 26px;
}
.scr_box {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 2em;
    max-height: 500px;
    overflow-y: auto;
    box-sizing: border-box;
    background: #fff;
    font-size: 14px;
    line-height: 1.8;
}
.scr_inner{
    padding-bottom: 0;
}
.scr_inner > :last-child{
    margin-bottom: 0;
}
.terms_section{
    margin-bottom: 2em;
}
.terms_section h3{
    font-weight: normal;
}
.terms_section > :last-child{
    margin-bottom: 0;
}

@media screen and (max-width: 1100px) {
    #con05{
        width: 100%;
        padding: 40px 0;
    }
    #con05 .section_inner{
        width: 100%;
        padding: 45px 0;
    }
    #con05 .title{
        text-align: left;
    }
    #con05 .title h2{
        font-size: 20px;
    }
    .scr_box{
        max-height: 350px;
    }
}
@media screen and (max-width: 560px) {
    .scr_box { padding: 1.3em 1.1em; font-size: 13px; line-height: 1.7;} 
    
}

/* footer
----------------------------------------------------------------*/
footer{
    text-align: center;
    padding: 24px 0 30px;
    color: #fff;
    background-color: #333;
    font-size: 14px;
}
}
footer p { margin-bottom: 0;}
footer .bnrList { width: 86%; max-width: 754px; margin: 40px auto 0; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content:space-between; list-style: none;}
footer .bnrList li { width:48.5%; max-width: 370px;}
footer .bnrList li img { width: 100%;}
footer .bnrList a:hover { opacity: 0.8;}
@media screen and (max-width: 1100px) {
    footer{
        padding: 16px 0 20px;
        font-size: 12px;
    }
    footer .bnrList { margin-top: 25px;}
}
@media screen and (max-width: 560px) {
    footer{
        padding: 20px 0 12px;
    }
    footer .bnrList { -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 84%;}
    footer .bnrList li { width:100%; max-width: none; margin-bottom: 10px;}
}