/* ブレイクポイント(目安)
スマホ:375px, タブレット: 768px, PC:1024px
*/
:root{
    --ori-gray:#171515;
}
*{
    font-family:"Noto Sans JP",sans-serif;
    margin:0;
    padding:0;
    box-sizing:border-box;
}
a{
    color:#003fa2;
}
header{
    position:fixed;
    background:rgba(0,0,0,0);
    width:100%;
    height:70px;
    transition:.5s;
    z-index:100;
}
header a{
    color:white;
    text-decoration:none;
    transition:.5s;
}
#header-container{
    width:100%;
    height:100%;
    max-width:1024px;
    margin:0 auto; /* これで中央寄せになる、知見 */
    display:flex;
    justify-content:space-between;
    align-items:center;
}
#header-container>h1{
    margin:0 0 0 30px;
}
#header-list{
    display:flex;
    list-style:none;
}
#header-list li{
    margin:0 30px 0 0;
}
#nav-btn{
    display:none;
    width:32px;
    height:32px;
    margin:0 30px 0 0;
    flex-direction:column;
    cursor:pointer;
    z-index:10;
}
.btn-line{
    background:white;
    border-radius:5px;
    width:100%;
    height:5px;
    margin:4px 0;
    transition:.5s;
}
.nav-open{
    right:0!important;
}

#headimg-container{
    height:40vh;
}
#head-img{
    width:100%;
    height:100%;
    max-height:40vh;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    object-fit:cover;
}
#headtxt-container{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
}
#headtxt-container h1{
    color:white;
    text-shadow:0px 0px 10px #f0c610;
    font-size:50px;
}
.header-scroll{
    background:white;
    box-shadow:rgba(0,0,0,0.15) 0px 1px 0px;
}
.header-scroll a{
    color:var(--ori-gray);
}
.header-scroll .btn-line{
    background:var(--ori-gray);
}
.nav-open a{
    color:white;
}
#nav-btn:has(+.nav-open) .btn-line{
    background:white;
}
#main-container{
    width:100%;
    /* margin:20px 0; */
}
#main{
    width:100%;
    height:100%;
    max-width:1024px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    padding:0 30px;
}
#main h1{
    color:#ffa500;
}
#main h1:before{
    content:"> ";
}
.body-box{
    margin:20px 0 0 0;
}
table{
    border:solid 2px orange;
    border-collapse:collapse;
}
th,td{
    border:dashed 1px orange;
    padding:10px;
}
th{
    border-bottom:solid 1px orange;
    background:#fff5e5;
}
th,td{
    border-right:solid 1px orange;
}
#map{
    width:100%;
    height:500px;
}
#totop{
    position:fixed;
    width:min(15vw,100px);
    bottom:min(5vw,30px);
    right:min(5vw,30px);
    cursor:pointer;
}
#totop:hover{
    opacity:0.7;
}
footer{
    display:flex;
    justify-content:center;
    align-items:center;
    background:var(--ori-gray);
    height:40px;
    width:100%;
}
footer p{
    color:white;
}
@media screen and (max-width:768px){
    #nav-btn{
        display:flex;
    }
    #header-container{
        /*position:relative;*/
    }
    #header-container>nav{
        background:var(--ori-gray);
        position:fixed;
        width:100%; /* 100vwにするとバグる(スクロールバー分ずれる) */
        height:100vh;
        padding:70px 0 0 0;
        top:0;
        right:-100%;
        transition:.5s;
    }
    #header-list{
        display:block;
        text-align:center;
    }
    #header-list li{
        margin:0 0 40px;
    }
    #headimg-container{
        height:30vh;
    }
    #head-img{
        max-height:30vh;
    }
    #headtxt-container h1{
        font-size:6vw;
    }
}