@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');

@import url('extra.css');


/*config*/
:root {
    --main-width:1280px; /*メインカラム*/
    --main-color:#978969; /*金色*/
    --sub-color:#968573;
}
/* ////////////////////////////////////////////
*                 BASE
* //////////////////////////////////////////// */

/* clearfix
------------------------------------------*/
.clear{ clear: both; }
.clearfix{ zoom: 1; }
.clearfix:after{ content: ''; display: table; clear: both; }

.slider{
    opacity: 0;
    transition: opacity .3s linear;
}
.slider.slick-initialized{
    opacity: 1;
}

/* base
------------------------------------------*/

html {
    height: 100%;
    font-size: 62.5%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    background: #000;
}
@media screen and (max-width:768px) {
    html {
        font-size: 52.5%;
    }
}
body {
    text-align: center;
    font-size: 1.6rem;
    line-height: 1.8;
    font-family: 游明朝,"Yu Mincho",YuMincho, "Times New Roman", "Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;

    /*font-family: "メイリオ" ,"Meiryo", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/

    color: #111;
    font-feature-settings: "palt";
    letter-spacing: 0.07em;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;/*Chrome,Safari*/
    -ms-text-size-adjust: 100%;/*EgdeMobile*/
    -moz-text-size-adjust: 100%;/*firefox*/
}

.font-min{
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}
.font-eng{
    font-family: 'EB Garamond', serif;
}
.bold{
    font-weight: bold;
}
a {
    color:var(--main-color);
    text-decoration: none;
}

a:hover{  opacity: 0.5;}
/* use hover animation */
a, a:hover {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
img{
    max-width: 100%;
    height:auto;
    vertical-align:top;
}

/* ////////////////////////////////////////////
*                 opning
* //////////////////////////////////////////// */

#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background:#fff;
    text-align:center;
    color:#fff;
    display: none;
}
#loading-inner {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    animation: loadLogo 1s;
}
@keyframes loadLogo {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}

/* ////////////////////////////////////////////
*                 common
* //////////////////////////////////////////// */
.inner{
    max-width:var(--main-width); 
    margin:0 auto;
    padding:0;
    position: relative;
}
.inner::after{
    content: ''; display: table; clear: both;
}
@media screen and (max-width:980px) {
    .inner{
        padding:0 2vmax;
    }
    .page-id-113 .inner{
        padding:0 0;
    }
}
.main-common-tit{
    font-size: 9rem;
    line-height: 1.2;
    font-family: 'EB Garamond', serif;
    letter-spacing: 0.1em;
    margin-bottom: 5vmax;
    position: relative;
    color: var(--main-color);
}
.main-common-tit span.jp{
    font-size: 2rem;
}
@media screen and (max-width:980px) {
    .main-common-tit{
        font-size: 9vw;
    }
    .main-common-tit span.jp{
        font-size:3vw;
    }
}

.bloc{
    padding:4vmax 0;
}
.mb-1em{
    margin-bottom: 1em;
}
.mb-2em{
    margin-bottom: 2em;
}
/* ////////////////////////////////////////////
*                 header
* //////////////////////////////////////////// */
#header{
    padding:0 0 0 0;
    /*
    position: fixed;
    top:0;
    left:0;
    */
    width:100%;
    z-index: 9999;
}
#header-inner{
    height:100px;
}
@media screen and (max-width:992px) {
    #header-inner{
        height:80px;
    }
}
#header-logo{
    max-width: 180px;
    margin-left:2vmax;
}
@media screen and (max-width:992px) {
    #header-logo{
        max-width: 140px;
    }
}
#gnav{
    margin:0 ;
    height:100%;
    position: relative;
}
#gnav > ul{
    height:100%;
}
#gnav a:hover{
    text-decoration: none;
    color:var(--main-color);
    opacity: 1;
}
#gnav > ul > li{
    padding: 0 1.5vw;
    height:100%;
    position: relative;
}
#gnav > ul > li > a{
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    font-weight: bold;
    color:var(--main-color);
    line-height: 1.4;
    font-size: 1.1rem;
}
#gnav > ul > li > a span.eng{
    display: block;
    font-size: 1.7rem;
    font-family: 'EB Garamond', serif;
}
#gnav > ul > li:last-of-type{
    background:var(--sub-color);
}
#gnav > ul > li:last-of-type > a{
    color:#fff;
}
#gnav > ul > li > a::before{
    content:"";
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height: 3px;
    background:var(--main-color);
    transform: scale(0, 1);
    transform-origin: left;
    transition: 0.4s;
}
#gnav > ul > li.current > a::before,
#gnav > ul > li > a:hover::before {
    transform: scale(1);
}
#gnav li.parent > a::after {
    content: '\f107';
    font-weight: 300;
    font-family: 'Font Awesome 5 Pro';
    padding-left:0.5em;
}
#gnav li .sub-menu{
    display: none;
    position: absolute;
    z-index:999;
    width:300px;
    top: 80px;
    left: 0;
    background: rgba(255,255,255,0.95);
}
#gnav li .sub-menu li a{
    text-align: left;
    padding:0.5em 1em;
    display: block;
    border-bottom:1px solid rgba(255,255,255,0.1);
    background:var(--main-color);
    color:#fff;
}
#gnav li .sub-menu li a:hover{
    opacity: 0.8;
}
#gnav li .sub-menu li a::before {
    content: '\f105';
    font-weight: 300;
    font-family: 'Font Awesome 5 Pro';
    padding-right:0.5em;
}

/* ////////////////////////////////////////////
*                 breadcrumbs
* //////////////////////////////////////////// */
.breadcrumbs{
    padding:1em;
    text-align: left;
    position: relative;
    border-top:1px solid rgba(255,255,255,0.1);
    font-size: 1.2rem;
    color:#fff;

}
.breadcrumbs a,
.breadcrumbs a:hover{
    color:var(--main-color); 
}
/* ////////////////////////////////////////////
*                 content
* //////////////////////////////////////////// */
.home #content{
    margin-bottom: 0vmax;
}
#content{
    margin-bottom: 10vmax;
    overflow: hidden;
}

#content.post{
    padding:2vmax 0;
}

/* mainimage
------------------------------------------*/
#mainimage {
    position: relative;
    z-index:1;
    display: block; 
    margin:0 0 6vmax 0;
}
#mainimage .mainimage-copy{
    color:var(--main-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left:4vmax;
    padding:0;
    z-index:3;
    text-align: left;
}
#mainimage .mainimage-copy .main-01{
    font-family: 'EB Garamond', serif;
    font-size: 7vw;
    letter-spacing: 0.1em;
    line-height: 1.2;
    margin-bottom: 0.2em;
    text-shadow: 0 0 4px rgb(0 0 0 / 90%);
}
#mainimage .mainimage-copy .main-02{
    font-size: 1.5vw;
    letter-spacing: 0.3em;
    color:#fff;
}
#mainimage .slick-dots{
    bottom:-3vmax;
    width:auto;
    right:20vmax;
    overflow:hidden;
}
#mainimage .slick-dotted.slick-slider {
    margin-bottom: 0px;
}

#mainimage .slick-slide {
    text-align: center;
}
#mainimage .slick-slide img {
    display: inline-block;
}
@media screen and (max-width:768px) {
    #mainimage .slick-slide {
        height:60vh;
    }

    #mainimage .mainimage-copy{
        top: auto;
        transform:none;
        bottom:4vmax;
        left:4vmax;
    }
    #mainimage .slick-slide img {
        width:100%;
        height: 100%;
        object-fit: cover;
    }
    #mainimage .mainimage-copy .main-01{
        font-size: 13vw;
        color:#fff;
    }
    #mainimage .mainimage-copy .main-02{
        font-size:4vw;
        color:#fff;
    }
    #mainimage .slick-dots{
        width: 100%;
        right:0;
        overflow:hidden;
    }
}
.mainimage-info{
    position: absolute;
    bottom:-40px;
    right:0;
    width:45vw;
    height:80px;
    line-height:80px;
    background:#968573;
    overflow:hidden;
}
@media screen and (max-width:1200px) {
    .mainimage-info{
        display: none;
    }
}
.mainimage-info-tit{
    margin:0 1em;
    color:#fff;
    float:left;
    display: inline-block;
    width:20%;
}
.mainimage-info-slide li .date{
    margin-right: 0.5em;
    
}
.mainimage-info-slide{
    display: inline-block;
    width:70%;
    float:left;
}
.mainimage-info-slide li,
.mainimage-info-slide li a{
    color:#fff;
}
.mainimage-info-slide .slick-slide{
    text-align: left !important;
}

/* about
------------------------------------------*/
.main-about{
    margin:0 0 6vmax 0;
    padding:4vmax 3vmax;
    position: relative;
    display: block; 
}
.main-about::after{
    position: absolute;
    content:"";
    background:url("../images/bg-01.png") center center /cover ;
    width:95vw;
    height:70%;
    left:0;
    top:10%;
    z-index:-1;
}
.main-about-inner{
    position: relative;
}
.main-about-image{
    margin-top:6vmax;
    margin-right:2vmax;
}
@media screen and (max-width:992px) {
    .main-about-image{
        width:100%;
        height:30vmax;
        margin-top:0vmax;
        margin-right:0vmax;
        margin-bottom:2vmax;
    }
    .main-about-image img{
        width:100%;
        height:30vmax;
        object-fit: cover;
    }
}
.main-about-tit{
    margin-bottom:0.5em;
    line-height: 1;
}
.main-about-tit::after{
    right:auto;
}
.main-about-text{
    width:80%;
    color:#fff;
    text-align:left;
    font-size: 1.8rem;
}
@media screen and (max-width:992px) {
    .main-about-text{
        width:100%;
    }
    
}
.main-about-text .ttl{
    font-size: 3rem;
    margin-bottom: 1em;
    color:var(--main-color);
}
.main-about-text .ttl span.sml{
    font-size: 2.2rem;
}
@media screen and (max-width:768px) {
    .main-about-text .ttl{
        font-size: 2.5rem;
    }
    .main-about-tit{
        margin-bottom:5vmax;
    }
}
.main-about-more{
    margin-top:4vmax;
}



/* room
------------------------------------------*/
.main-room{
    margin:0 0 6vmax 0;
    padding:4vmax 3vmax;
    position: relative;
    display: block; 
}
.main-room::after{
    position: absolute;
    content:"";
    background:url("../images/bg-02.png") center center /cover ;
    width:45vw;
    height:70%;
    left:0;
    top:0;
    z-index:-1;
}
.main-room-inner{
    position: relative;
}
.main-room-tit{
    margin-bottom:0.5em;
    line-height: 1;
}
.main-room-tit::after{
    right:auto;
}
.main-room-text{
    width:90%;
    color:#fff;
    text-align:left;
    font-size: 1.8rem;
    margin-bottom: 3vmax;
    display:inline-block;
}
.main-room-text .ttl{
    font-size: 3rem;
    margin-bottom: 1em;
    color:var(--main-color);
}
.main-room-text .ttl span.sml{
    font-size: 2.2rem;
}
@media screen and (max-width:768px) {
    .main-room-text .ttl{
        font-size: 2.5rem;
    }
    .main-room-tit{
        margin-bottom:5vmax;
    }
}

.main-room-image{
    text-align: left;
    position: relative;
    margin-bottom: 3vmax;
}
.main-room-image > img{
    width:80%;
    height:100%;
    object-fit: cover;
}
.main-room-image-copy{
    position: absolute;
    right:5%;
    bottom:30%;
    text-align: right;
    width:30%;
}
@media screen and (max-width:768px) {
    .main-room-image > img{
        width:100%;
        height:100%;
        object-fit: cover;
    }
    .main-room-image-copy{
        position: relative;
        right::auto !important;
        left:auto !important;
        right:auto;
        bottom:auto;
        text-align: center !important;
        width:60%;
        
        margin:2vmax auto;
    }
}
.main-room-more{
    margin-top:3vmax;
    display: inline-block;
}
.main-room-image:last-of-type{
    text-align: right;
}
.main-room-image:last-of-type .main-room-image-copy{
    left:5%;
    right:auto;
    text-align: left;
}

/* photo
------------------------------------------*/

.main-photo{
    text-align: center;
    margin:0 0 6vmax 0;
    display: block; 
    position: relative;
}

.main-photo::after{
    position: absolute;
    content:"";
    background:url("../images/bg-01.png") center center /cover ;
    width:80vw;
    height:70%;
    right:0;
    bottom:0%;
    z-index:-1;
}
.main-photo-tit{
    font-size: 5.5rem;
    font-family: 'EB Garamond', serif;
    letter-spacing: 0.1em;2
    margin-bottom: 5vmax;
    position: relative;
    color: var(--main-color);
}
.main-photo-tit::before{
    content: '\f00a';
    font-weight: 700;
    font-family: 'Font Awesome 5 Pro';
    margin-right: 0.5em;
}
@media screen and (max-width:980px) {
    .main-photo-tit{
        font-size: 6vw;
    }
}
.main-photo .slick-dots {
    position: absolute;
    bottom:auto;
    right:3vmax;
    top:-8vmax;
    text-align: right;
}
@media screen and (max-width:768px) {
    .main-photo .slick-dots {
        position: relative;
        bottom:auto;
        right:auto;
        top:auto;
        text-align: center;
    }
}
.main-photo-once{
    margin:0 10px;
}

.main-photo-once img{
}

/* info
------------------------------------------*/

.main-info{
    text-align: center;
    margin:0 0 6vmax 0;
    display: block; 
    position: relative;
}

.main-info-once{
    max-width:46%;
    margin:0 2% 2vmax 2%;
}
.main-info-image{
    position:relative;
}
.main-info-image .date{
    position:absolute;
    left:0;top:0;
    background: var(--main-color);
    color:#fff;
    display: inline-block;
    padding:0 1em;
}
.main-info-txt,
.main-info-txt a{
    color:#fff;
    text-align: left;
    padding:1em 0;
    
}
/* recruit
------------------------------------------*/
.main-recruit{
    position: relative;
    margin:0 0 8vmax 0;
    padding:0 3vmax;

}
.main-recruit::after{
    position: absolute;
    content:"";
    background:url("../images/bg-02.png") center center /cover ;
    width:90vw;
    height:90%;
    left:0;
    top:10%;
    z-index:-1;
}
.main-recruit .main-common-tit{
    margin-left:3vmax;

}
.main-recruit .main-common-tit::after{
    display: none;

}
.main-recruit-inner{
    position: relative;
    z-index:1;

}
.main-recruit-img{
    margin-bottom: 3vmax;
}
.main-recruit-text{
    padding:0 5vmax;
    color:#fff;
    text-align:left;
    display: inline-block;

}
@media screen and (max-width:768px) {
    .main-recruit .main-common-tit{
        margin-left:0;

    }
    .main-recruit-text{
        position: relative;
        left:0;
        bottom:0;
        width:100%;
        text-align: center;
    }
}

/* insta
------------------------------------------*/

.main-insta{
    text-align: center;
    margin:0 0 10vmax 0;
    display: block; 
    position: relative;
}

.main-insta-tit{
    font-size: 5.5rem;
    font-family: 'EB Garamond', serif;
    letter-spacing: 0.1em;2
    margin-bottom: 5vmax;
    position: relative;
    color: var(--main-color);
}

/* contact
------------------------------------------*/
/* ////////////////////////////////////////////
*                 footer
* //////////////////////////////////////////// */
#footer{
    padding:4vmax 2vmax 2vmax 2vmax;
    font-size: 1.4rem;
    background: url("../images/footer-bg.png") no-repeat center center /cover;
    color:#fff;
    text-align:left;
}
#footer a{
    color:#fff;
}
.footer-nav li{
    padding:0.5em 1em;

}
.footer-nav li a{
    white-space: nowrap;

}
.footer-nav li:not([class]):before{
    content: '\f0a9';
    font-weight: 700;
    font-family: 'Font Awesome 5 Pro';
    color:var(--main-color);
    margin-right: 0.5em
    
}
@media screen and (max-width:768px) {
.footer-logo img{
    width:100px;
}
}
#copyright{
    padding:4vmax 2vmax;
    font-size: 10px;
    text-align: center;
}

.pagetop-btn-wrap {
    display: none;
    position: fixed;
    bottom: 3vmax;
    right: 3vmax;
    z-index: 99;
}
.pagetop-btn{
    position: relative;

}
.pagetop-btn::before{
    content: '\f062';
    font-weight: 300;
    font-family: 'Font Awesome 5 Pro';
    display: block;
    width:50px;
    height:50px;
    line-height:50px;
    border-radius: 50px;
    background: var(--main-color); 
    color:#fff;
}
.footer-sns i{
    font-size:30px;
    margin-top:1em;
}

/* ////////////////////////////////////////////
*                 lower-common
* //////////////////////////////////////////// */
.local-nav{
    display: flex;
    justify-content: center;
    margin:2vmax 2vmax 4vmax;
    flex-wrap:wrap;
}
@media screen and (max-width:768px) {
    .local-nav{
        margin:2vmax 0 4vmax;
    }
}
.local-nav li a{
    margin:0 0.5em;
    padding:0.5em 2em;
    background:var(--sub-color); 
    border:2px solid #fff; 
    border-radius: 30px;
    display: block;
}
.local-nav li a:hover{
    border:2px solid var(--main-color); 
    opacity: 1;
    text-decoration: none;
}
.local-nav li a::before{
    content: '\f0a9';
    font-weight: 700;
    font-family: 'Font Awesome 5 Pro';
    color:var(--main-color); 
}
.local-nav li.current a{
    border:2px solid var(--main-color); 
    background:var(--main-color); 
    color:#fff;
}
.local-nav li.current a::before{
    color:#fff;
}
@media screen and (max-width:768px) {
    .local-nav li{
        width:50%;
    }
    .local-nav li a{
        margin:0.5em;
        font-size: 1.2rem;
    }
}
/* ////////////////////////////////////////////
*                 lower-entry
* //////////////////////////////////////////// */
.page-header{
    padding:5vmax 0;
    background:url("../images/bg-01.png") center center /cover ;
}
.page-header .main-common-tit{
    font-size: 7rem;
    margin-bottom: 0;
}
@media screen and (max-width:768px) {
    .page-header .main-common-tit{
        font-size: 10vw;
    }
}

/* ////////////////////////////////////////////
*               sidenav
* //////////////////////////////////////////// */

.side-nav-title{
    background:var(--main-color); 
    padding:0.5em 1em;
    border-radius: 5px;

}
.side-nav-list{
    margin:1em;
}
.side-nav-list li{
    margin:1em;
}
.side-nav-list li a::before{
    content: '\f105';
    font-weight: 300;
    font-family: 'Font Awesome 5 Pro';
    margin-right: 0.5em;
}
/* ////////////////////////////////////////////
*                 post
* //////////////////////////////////////////// */

.morebtn{
    color:#fff;
    font-size: 1.4rem;
    display: inline-block;
    position: relative;
    padding-left:180px;
}
.morebtn::before{
    position: absolute;
    left:0;
    width:160px;
    height:2px;
    background:rgba(255,255,255,0.2);
    top: 50%;
    transform: translateY(-50%);
    content:"";
    display: inline-block;
}
.morebtn::after{
    position: absolute;
    left:0;
    width:30px;
    height:2px;
    background:var(--main-color); 
    top: 50%;
    transform: translateY(-50%);
    content:"";
    display: inline-block;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
.morebtn:hover{
    opacity: 1;
    color:var(--main-color); 
}
.morebtn:hover::after{
    width:160px;
}
@media screen and (max-width:768px) {
    .morebtn{
        padding-left:100px;
    }
    .morebtn::before{
        width:80px;
    }
    .morebtn:hover::after{
        width:80px;
    }
}
/*==========
CONTENTS WORKS ID:1844
==========*/
.cw-morebtn {
    display: inline-block;
    border: 1px solid;
    position: relative;
    background: #fff;
    color:#fff;
    background:transparent;
    border:1px solid #fff;
    padding:0.8em 5vw;
    font-size: 1.4rem;
    transition: all .3s;
    text-decoration: none !important;
    font-family: 'EB Garamond', serif;
}
@media screen and (max-width:768px) {
    .cw-morebtn {
        padding:0.8em 10vw !important;
    }
}
.cw-morebtn::after{
    content:"";
    position:absolute;
    display: block;
    transition: all .3s;
    width: 7px;
    height: 12px;
    top:50%;
    right: 2rem;
    box-shadow:1px -1px 0 transparent;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    transform: translateY(-50%) rotate(45deg) skewX(-45deg);;
}
.cw-morebtn:hover::after {
    right:5px;
    height: 40px;
    text-decoration: none !important;
}
.cw-morebtn.blk {
    display: inline-block;
    border: 1px solid;
    position: relative;
    background: #111;
    color:#111;
    background:transparent;
    border:1px solid #111;
    padding:0.8em 5vw;
    font-size: 1.4rem;
    transition: all .3s;
    text-decoration: none !important;
    font-family: 'EB Garamond', serif;
}
.cw-morebtn.blk::after{
    content:"";
    position:absolute;
    display: block;
    transition: all .3s;
    width: 7px;
    height: 12px;
    top:50%;
    right: 2rem;
    box-shadow:1px -1px 0 transparent;
    border-top: solid 1px #111;
    border-right: solid 1px #111;
    transform: translateY(-50%) rotate(45deg) skewX(-45deg);;
}
.cw-morebtn.blk:hover::after {
    right:5px;
    height: 40px;
    text-decoration: none !important;
}


.cw-morebtn.wht {
    display: inline-block;
    border: 1px solid;
    position: relative;
    background: #fff !important;
    color:#111;
    mix-blend-mode: screen;
    background:transparent;
    border:none !important;
    padding:0.8em 5vw;
    font-size: 1.4rem;
    transition: all .3s;
    text-decoration: none !important;
    font-family: 'EB Garamond', serif;
}
.cw-morebtn.wht::after{
    content:"";
    position:absolute;
    display: block;
    transition: all .3s;
    width: 7px;
    height: 12px;
    top:50%;
    right: 2rem;
    box-shadow:1px -1px 0 transparent;
    border-top: solid 1px #111;
    border-right: solid 1px #111;
    transform: translateY(-50%) rotate(45deg) skewX(-45deg);;
}
.cw-morebtn.wht:hover::after {
    right:5px;
    height: 40px;
    text-decoration: none !important;
}


/* ////////////////////////////////////////////
*                sphone-nav
* //////////////////////////////////////////// */
#gnav-trigger {
    position: fixed;
    top:0;
    right:0;
    width: 80px;
    height:80px;
    z-index: 999;
    flex-basis: 80px;
    flex-shrink: 0;
    cursor: pointer;
    background: var(--main-color);
}

#gnav-trigger::before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

#panel-btn {
    background: #fff
}
#panel-btn:hover{
    color: #fff;
    opacity: 1;
}

#panel-btn-text {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 20px;
    width: 100%;
    font-size: 10px;
    text-align: center;
}
#panel-btn-text::before{
    content:"MENU";
    color:#fff;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
}
.is-drawer-open #panel-btn-text::before{
    content:"CLOSE"
}
#panel-btn-icon {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top:30px;
    width: 30px;
    height: 2px;
    background: #fff;
    transition: .2s
}

#panel-btn-icon:after,
#panel-btn-icon:before {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 30px;
    height: 2px;
    background: #fff;
    transition: .3s
}

#panel-btn-icon:before {
    margin-top: -8px
}

#panel-btn-icon:after {
    margin-top: 6px
}

#panel-btn .close {
    background: 0 0
}

#panel-btn .close:after,
#panel-btn .close:before {
    margin-top: 0
}

#panel-btn .close:before {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}

#panel-btn .close:after {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}


#drawer-bg {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index:998;
    background:var(--sub-color);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}
#drawer-menu {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 80px;
    z-index: 101
}


#drawer-menu li{
    display:block;
    padding:0 1em;
    position: relative;
    border-bottom:1px solid rgba(255,255,255,0.05);
    text-align: left;
}
#drawer-menu li a{
    display:block;
    padding:0.85em 1em;
    font-size:1.2rem;
    font-weight: bold;
    color:#fff;
}
#drawer-menu li a .eng{
    font-size:2.4rem;
    margin-right: 0.54em;
}
#drawer-menu li a .areaname {
}
#drawer-menu li a::before{
    content: '\f138';
    font-weight: bold;
    font-family: 'Font Awesome 5 Pro';
    padding-right:0.5em;
    color:var(--main-color); 
}
.is-drawer-open #drawer-bg {
    display: block;
    animation-duration: .5s;
    animation-name: fadein
}
.is-drawer-open #drawer-menu {
    display: block;
}

/* has children
------------------------------------------*/
#drawer-menu li.parent a{
    display:inline-block;
    position: relative;
}

#drawer-menu li.parent::after {
    position: absolute;
    right: 2vmax;
    top: 0;
    content: '\f107';
    font-weight: 300;
    font-family: 'Font Awesome 5 Pro';
    padding-right:0.5em;
    font-size:4vmax;
}
#drawer-menu li.parent.open::after {
    content: '\f106';
}
#drawer-menu ul.sub-menu{
    display:none;
    margin:0 1em;
}
#drawer-menu ul.sub-menu li{
    display:block;
    position: relative;
}
#drawer-menu ul.sub-menu li a::before{
    content: '\f105';
    font-weight: 300;
    font-family: 'Font Awesome 5 Pro';
    padding-right:0.5em;
    color:var(--main-color); 
}

/* ////////////////////////////////////////////
*                entry
* //////////////////////////////////////////// */
.post main{
    margin-bottom: 5vmax;
}

.blog-title{
    font-size: 1.8rem;
    margin:0 0 1.5em 0;
    padding:2em 0;
    border-top:1px solid rgba(150,150,150,0.3);
    border-bottom:1px solid rgba(150,150,150,0.3);
    position: relative;
    text-align: left;
}
.blog-title .ttl::before{
    content: '\f0a9';
    font-weight: bold;
    font-family: 'Font Awesome 5 Pro';
    margin-right:0.5em;
    color: var(--main-color);
}
.blog-title .post-date{
    font-size: 1.2rem;
    color: var(--main-color);
}

.post .entry-content{
    margin-bottom: 8vmax;
}

.post .entry-content p{
    margin-bottom: 1em;
}
.post-nav a{
    color: var(--main-color);

}

.entry-content a:hover,
.entry-content a:focus {
    color: inherit;
    text-decoration: underline;
}
.entry-content .page-title{
    color: var(--main-color);
    font-size: 3rem;
    margin:0 0 1.5em 0;
    padding:1em 0;
    border-top:1px solid rgba(0,0,0,0.3);
    border-bottom:1px solid rgba(0,0,0,0.3);
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.entry-title,
.entry-content h2:not([class]){
    font-size: 2.6rem;
    margin:1.5em 0;
    padding:1em 0;
    position: relative;
}
.entry-title::after,
.entry-content h2:not([class])::after{
    position: absolute;
    bottom: -0em;
    left: 0;
    margin: auto;
    width: 30px;
    height: 2px;
    content: "";
    background: var(--main-color);
}
.entry-content h3:not([class]){
    color: var(--color-gold);
    font-size: 2.4rem;
    margin:0 0 1em 0;
    padding:0.5em 0;
    border-bottom:1px dotted var(--color-gold);
    position: relative;
    text-align: left;
    font-family: 游明朝,"Yu Mincho",YuMincho, "Times New Roman", "Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
    font-weight: 900;
}
.entry-content h3:not([class])::before,
.entry-content .title-h3::before{
    content: '\f7a5';
    font-weight: 300;
    font-family: 'Font Awesome 5 Pro';
    color: var(--color-gold);
    margin-right: 0.5em;
}
.entry-content h4:not([class]){
    color:#715959;
    padding:0 1em 0.5em 0.2em;
    font-size: 2.4rem;
    margin:0vmax 0 1em 0;
    position: relative;
}
.entry-content h4:not([class])::after{
    position: absolute;
    bottom:0;
    left:0;
    height:2px;
    width:100%;
    background: #ccc;
    content:"";
    display: block;
}
.entry-content h4:not([class])::before{
    position: absolute;
    bottom:0;
    left:0;
    height:2px;
    width:25%;
    background: -webkit-linear-gradient(25deg, rgba(244,174,50,1) 0%, rgba(253,62,99,1) 100%);
    content:"";
    display: block;
    z-index:2;
}
.entry-content h5:not([class]){
    color:#715959;
    font-size:1.8rem;
    margin:1vmax 0 0.5em 0;
    position: relative;
}
.entry-content h5:not([class])::before{
    content: '\f138';
    font-weight: 300;
    font-family: 'Font Awesome 5 Pro';
    color:#5f89d2;
    margin-right: 0.5em;
}