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


html,body {
    /*font-size:clamp(10px, 1.33vw, 20px);*/
    font-size:clamp(10px, 1.42vw, 22px);
    font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif !important;
    position:relative;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.en-font {
    font-family: 'EB Garamond',serif !important;
}
/*----- header -----*/
#header {
    position:fixed;
    left:0;
    right:0;
    top:1.5rem;
    margin:0 auto;
    max-width:234vh;
    width:100%;
    z-index:10;
}
#site-logo {
    width:7rem;
    position:absolute;
    top:0;
    left:1.5rem;
    z-index:10;
}
#site-logo img { opacity:1; width:100%; }

#main-nav {
    position:absolute;
    top:0;
    right:2rem;
}
#main-nav .nav {
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
}
#main-nav .nav >  li {
    margin-left:1rem;
    font-size:.9rem;
    position:relative;
    /*padding-bottom:3em;*/
    letter-spacing:.05em;
}
#main-nav .nav >  li > a {
    display:block;
    padding:.5rem;
    text-align:center;
}
#main-nav .nav >  li a:hover { background:#fff; }
#main-nav .nav li.hav-child:hover { padding-bottom:3em; }
#main-nav .nav li.hav-child:hover a { background:#fff; }
#main-nav .nav ul.child-list {
    position:absolute;
    top:3em;
    left:-1rem;
    width:12rem;
    padding:1rem;
    background:#fff;
    display:none;
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif !important;
    z-index:10;
}
#main-nav .nav li.hav-child:hover ul.child-list { display:block; }
#main-nav .nav ul.child-list::before {
    content:"";
    width:0;
    height:0;
    border-left:.6rem solid transparent;
    border-right:.6rem solid transparent;
    border-bottom:.5rem solid white;
    display:block;
    position:absolute;
    top:-.5rem;
    left:2.2rem;
}
#main-nav .nav .menu3 ul.child-list::before { left:2.8rem; }
#main-nav .nav ul.child-list li {
    margin-bottom:.8rem;
    font-size:.8rem;
}
#main-nav .nav ul.child-list li:last-child { margin-bottom:0; }
#main-nav .nav ul.child-list li:nth-child(n + 2) { margin-left:1em; }
#main-nav .nav ul.child-list li::before {
    content:"-";
    display:inline-block;
    margin-right:.5em;
}
#main-nav .nav ul.child-list li .link-icon { width:.5rem; }
#main-nav .nav ul.child-list li a { width:calc(100% - 1.5em); display:inline-block; }
#main-nav .nav ul.child-list li a:hover { opacity:.5; }

#hamburger {
    display:none;
    position:fixed;
    right:1.5rem;
    top:1.5rem;
    width:30px;
    height:30px;
    cursor:pointer;
    z-index:100;
}
#hamburger .inner_line {
    display:block;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    width:30px;
    height:1.5px;
    background:#000;
    transition:1s;
}
#hamburger .inner_line span { transition:all .4s; }
#hamburger #line1 { top:5px; }
#hamburger #line2 { top:14px; }
#hamburger #line3 { bottom:5px; }
#hamburger.open #line1 { transform:translateY(10px) rotate(-45deg); }
#hamburger.open #line2 { opacity:0; }
#hamburger.open #line3 { transform:translateY(-8px) rotate(45deg); }

@media screen and (max-width: 1000px) {
    #site-logo { opacity:1; transition:none; width:100px; }
    #hamburger { display:block; opacity:1; }
    #main-nav { display:none; opacity:1; }
    #header.open #main-nav { display:block; width:100%; height:auto; position:fixed; top:0; left:0; background:#fff; padding:125px 0 30px; }
    #header.open #main-nav .nav { display:block; width:180px; margin:0 auto; }
    #header.open #main-nav .nav > li { font-size:18px; margin-left:0; padding-bottom:0; margin-bottom:20px; }
    #header.open #main-nav .nav > li > a { text-align:left; }
    #header.open #site-logo { width:120px; top:30px; left:0; right:0; margin:0 auto; }
    #header.open #main-nav .nav ul.child-list { display:block; width:100%; padding:0 0 0 15px; position:initial; }
    #header.open #main-nav .nav ul.child-list li { font-size:16px; margin-top:13px; }
    #header.open #main-nav .nav ul.child-list::before { display:none; }
    #main-nav .nav ul.child-list li .link-icon { width:13px; }
}