@charset "UTF-8";

#pankuzu{
    padding: 0 0;
    height: 14px;
    margin: 0 0 40px 0;
    font-size: 90%;
}
#page_content h1{
    width:96%;
    max-width:980px;
    font-size:40px;
    text-align: center;
    margin:0 auto 78px;
    padding-bottom:60px;
    line-height: 1.4;
    border-bottom:solid 1px #666;
}
#page_content h1 span{
    font-size:14px;
    font-family: 'Open sans';
    font-weight: bold;
    color:#15336c;
    display: block;
    letter-spacing: 0.15em;
    padding-left:0.15em;
}
#page_content .catch,
#page_content .lead{
    width:90%;
    max-width: 780px;
}
#page_content .catch{
    text-align: center;
    color:#15336c;
    font-size:20px;
    font-weight: bold;
    margin:0 auto 30px;
    line-height: 1.5;
}
#page_content .lead{
    margin:0 auto 54px;
    line-height: 2;
}
#page_content .b_reserve_wrapper{
    width:88.32%;
    max-width: 740px;
    margin: 0 auto;
}
#page_content .b_reserve_wrapper a{
    max-width: 740px;
    width:49%;
    height:3em;
    margin:0 auto;
    background:#15336c;
    color:#fff;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 599px) {
    #page_content .b_reserve_wrapper{
        width:72.96%;
    }
    #page_content .b_reserve_wrapper a{
        width:100%;
    }
}
#page_content a.leaflet{
    width:220px;
    text-align: center;
    padding:14px 0;
    margin:0 auto 100px;
    border:solid 1px #666;
    display: block;
}
@media screen and (max-width: 767px) {
    #page_content h1 br{
        display: inline;
    }
}
@media screen and (max-width: 767px) {
    #page_content h1{
        font-size:6.2vw;
        margin-bottom: 10vw;
    }
}

.main_pic{
    text-align: center;
    margin-bottom:100px;
}
.main_pic img{
    max-width:1440px;
    width:100%;
}


section > .sect_container{
    padding:100px 0 80px;
    width:96%;
    max-width:980px;
    margin: 0 auto;
}
section > .sect_container h2{
    margin-bottom:70px;
    font-size:30px;
    font-family: 'Open sans';
    font-weight: bold;
    color: #15336c;
    text-align: center;
}


@media screen and (max-width: 599px) {
    section > .sect_container{
        padding:80px 0 50px;
    }
    section > .sect_container h2{
        margin-bottom:50px;
        font-size:24px;
    }
}


main section:nth-of-type(2n),
main section.gray{
    background:#f4f5f9;
}
main section.white{
    background:#fff;
}
#gallery .zoom{
    max-width:980px;
    width:100%;
    margin:0 auto 20px;
    /*height:0;*/
    padding-top:68%;
    position:relative;
    overflow: hidden;
    background:#efefef;
}
#gallery .zoom img{
    position:absolute;
    object-fit: cover;
    width:100%;
    height:100%;
    top:0;
    left:0;
}
#gallery .zoom img.tall{
    object-fit: contain;
}
#gallery .ctrl{
    text-align: center;
    margin-bottom:34px
}
#gallery .ctrl li.b_prev,
#gallery .ctrl li.b_next{
    width:90px;
    display:inline-block;
    text-align: center;
    background:#fff;
    color:#666;
    padding:3px 0;
    line-height: 1;
    margin:0 2px;
    font-size:30px;
    cursor: pointer;
}
#gallery .ctrl li.b_prev:hover,
#gallery .ctrl li.b_next:hover{
    opacity:0.5;
}
#gallery .tn_list{
    display:flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    width:96%;
    margin:0 auto;
}
#gallery .tn_list li{
    margin:0 2px 16px;
    width:calc(10% - 4px);
}
#gallery .tn_list li:not(.on):hover{
    opacity:0.7;
    cursor: pointer;
}
#gallery .tn_list li p{
    height:0;
    padding-top:66.66%;
    position:relative;
    overflow: hidden;
}
#gallery .tn_list li.on{
    position:relative;
}
#gallery .tn_list li.on:after{
    content:"";
    display:block;
    width:100%;
    height:100%;
    box-sizing: border-box;
    border:solid 3px #1d3468;
    top:0;
    left:0;
    position:absolute;
}
#gallery .tn_list p img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:104%;
    height:100%;
    height:auto;
/*    object-fit: cover;*/
}

@media screen and (max-width: 859px) {
    #gallery .tn_list li{
        width:calc(12% - 4px);
    }
}

@media screen and (max-width: 767px) {
    #gallery .zoom{
        width:100%;
        padding-top:65.76%;
    }
}

@media screen and (max-width: 699px) {
    #gallery .tn_list li{
        width:calc(16.6% - 4px);
    }
}

@media screen and (max-width: 599px) {
    #gallery .tn_list li{
        width:calc(20% - 4px);
    }
}



#plan .floor{
    border-top: solid 1px #666;
    padding:70px 1.8% 60px;
    display:flex;
    justify-content: space-between;
}
#plan .floor .pic{
    width:46.4%;
    position:relative;
    text-align: right;
}
#plan .floor .pic i{
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:50px;
    height:50px;
    background:#15336c;
    display:flex;
    justify-content:center;
    align-items: center;
    color:#fff;
    font-size:23px;
}
#plan .floor .txt{
    width:45.6%;
    text-align: justify;
}
#plan .floor .txt h3{
    color:#15336c;
    margin-bottom:22px;
    font-size:20px;
    font-weight: bold;
    letter-spacing: 0.14em;
    line-height: 1.7;
}
#plan .floor .txt p{
    line-height: 1.8;
}

@media screen and (max-width: 1000px) {
    #plan .floor .pic{
        padding-top:60px;
    }
}
@media screen and (max-width: 840px) {
    #plan .floor .pic img{
        width:95%
    }
}

@media screen and (max-width: 699px) {
    #plan .floor{
        display:block;
    }
    #plan .floor .pic{
        text-align: center;
        width:100%;
        margin-bottom:30px;
        box-sizing: border-box;
        padding:0 50px 0;
    }
    #plan .floor .pic img{
        width:100%;
        max-width: 384px;
    }
    #plan .floor .pic i{
        width:40px;
        height:40px;
        font-size:20px;
    }
    #plan .floor .txt{
        width:100%;
    }
}


#view360 iframe{
    width:100%!important;
}
#view360 .ricoh-theta-tour-image{
    width:100%!important;
}


#info table{
    max-width:820px;
    width:92%;
    margin:0 auto 40px;
}
#info table tr{
    border-bottom:8px solid #fff;
}
#info table tr.teikyubi td,
#info table tr.eigyoujikan td{
    font-size: 90%;
}
#info table tr.teikyubi .big,
#info table tr.eigyoujikan .big{
    padding-right: 1.1em;
    font-size: 130%;
}
main section:nth-child(2n) table tr{
    border-bottom:8px solid #f4f5f9!important;
}
main section.white table tr{
    border-bottom:8px solid #fff!important;
}
#info table th{
    vertical-align: middle;
    background:#15336c;
    color:#fff;
    width:24%;
    text-align: center;
}
#info table td{
    vertical-align: middle;
    padding:22px;
    background:#f4f5f9;
}
#info table td .big{
    font-size:130%;
    margin-bottom:14px;
}
#info table td ul li{
    line-height: 1.5;
    margin-bottom:0.6em;
}
#info table td small{
    padding-left:1em;
    font-size:90%;
}

@media screen and (max-width: 699px) {
    #info table th,
    #info table td{
        padding:14px;
        display:block;
        width:auto;
        text-align: left;
    }
}



#info .mapset{
    max-width:780px;
    width:92%;
    margin:0 auto;
    display:flex;
}
#info .mapset .txt{
    max-width:384px;
    width:50%;
}
#info .mapset .txt > div{
    padding:0 10%;
    margin:0 0 30px;
}
#info .mapset .txt > div .tel{
    font-size:38px;
    margin-bottom:30px;
}
#info .mapset .txt > div .address{
    margin-bottom:40px;
    line-height: 1.6;
    padding:0 12px;
}
#info .mapset .txt > div a.reserve{
    border:solid 1px #666;
    padding:20px;
    box-sizing: border-box;
    display:block;
    font-size:130%;
    position:relative;
}
#info .mapset .txt > div a.reserve i{
    display: block;
    width: 1.2em;
    height: 1.2em;
    content: "";
    background: url(/common2021/img/i_arrow1.svg) no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 0.8em;
    transform: translateY(-50%);
}
#info .mapset .txt .msg_reserve{
    text-align: center;
}
#info .mapset .map{
    text-align:center;
    flex:1;
}
#info .mapset .map img{
    width:100%;
    max-width:348px;
    margin-bottom:10px;
}

@media screen and (max-width: 767px) {
    #info .mapset .txt > div{
        padding:0 5%;
        margin:0 0 30px;
    }
    #info .mapset .txt > div a.reserve{
        padding:15px;
    }
    #info .mapset{
        display:block;
    }
    #info .mapset .txt{
        max-width:100%;
        width:100%;
        margin-bottom:40px;
    }
    #info .mapset .map img {
        width: 90%;
    }
}

@media screen and (max-width: 599px) {
    #info .mapset .txt > div .tel{
        font-size:30px;
        margin-bottom:20px;
    }
}




/*
#info.type2
*/
#info.type2 table th,
#info.type2 table td{
    display:block;
    width:100%;
    /*background:#fff;*/
    background:transparent;
    padding:0.4em;
}
#info.type2 table th{
    border-bottom:solid 1px #666;
    font-size:120%;
    color:#333;
}
#info.type2 table td{
    margin-bottom:2em;
    text-align: center;
}
#info.type2 .mapset{
    margin-bottom:2em;
}
#info.type2 .btns{
    max-width: 740px;
    width: 92%;
    margin:0 auto;
    display:flex;
    justify-content: space-between;
}
#info.type2 .btns li{
    width:49%;
}
#info.type2 .btns li a{
    height:3em;
    text-align: center;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.4em;
}
#info.type2 .btns li a.reserve{
    background:#15336c;
    color:#fff;
}
#info.type2 .btns li a.pdf{
    border:solid 1px #15336c;
    color:#15336c;
}
#info.type2 .btns li .msg_reserve{
    font-size:90%;
}

@media screen and (max-width: 599px) {
    #info.type2 table td{
        text-align: left;
    }
    #info.type2 .btns{
        width: 76%;
        margin:0 auto;
        display:block;
    }
    #info.type2 .btns li{
        width:100%;
        margin-bottom:1.6em;
    }
}