@charset "UTF-8";

body{
    background:#cccccc;
    color:#000;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    width:100%;
    margin: 0 auto;
    padding:0;
}
@font-face {
    font-family: "aptos"; 
    src: url("../font/aptos.ttf") format("truetype"); 
    font-display: swap; 
}
@font-face {
    font-family: "bradley"; 
    src: url("../font/bradley-hand-itc.ttf") format("truetype"); 
    font-display: swap; 
}
.font-aptos {
    font-family: "aptos",sans-serif; /*上で設定したフォントファミリー名*/
}
.font-bradley {
    font-family: "bradley",sans-serif; /*上で設定したフォントファミリー名*/
}
img{
    width:100%;
    pointer-events: none;
}
a{
    text-decoration:none;
}
header{
    /*background: #000;*/
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    width: 100%;
    height: 75px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}
header a{
    color:#fff;
}
header a h1{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
}
header h1 img{
    width:120px;
}
header h1 span{
    font-size: 1.8rem;
    font-weight: 300;
    letter-spacing: 0.08rem;
    padding: 0 0 0 15px;
}
#menu{
    position:relative;
}
#menu .menu_inner ul{
    font-weight: 300;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    width:100%;
}
#menu .menu_inner ul li.menu_item{
    position:relative;
}
#menu .menu_inner ul li.menu_item a{
    color:#fff;
    font-size:1.0em;
    display:block;
    padding:0 20px;
    position:relative;
    transition: all ease 0.8s;
    top:0;
}
#menu .menu_inner ul li.menu_item a:hover{
    top:3px;
}
#menu .menu_inner ul li.menu_item:not(:last-child):after{
    content:"";
    background:#fff;
    width:1px;
    height:16px;
    position:absolute;
    top:0;
    right:0;
    transform:rotate(30deg);
}
.pNav{
    color:#fff;
    font-size:0.9em;
    margin: 0 auto 5%;
}
footer{
    width:100%;
    margin: 0 auto;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
}
footer figure{
    width: 100%;
    margin: 3% auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
footer figure img{
    width: 90px;
}
footer figure span{
    display: block;
    font-size: 1.3em;
    padding: 1% 0;
    width: 100%;
    text-align: center;
}
footer #pagetop{
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index:999;
}
footer #pagetop:before{
    content: "\f106";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
@media all and (min-width:769px){
    #menu .menu-btn{
        display:none;
    }
    .sp-disp{
        display:none;
    }
}
@media all and (max-width:768px){
    .pc-disp{
        display:none;
    }
    header{
        padding: 20px 10px;
        /*height: 90px;*/
        z-index:999999;
    }
    header h1 span{
        font-size: 1.3em;
        padding: 0 0 0 0.5rem;
    }
    header h1 img{
        width: 50px;
    }

    /*----------------------------
    * メニュー開閉ボタン
    *----------------------------*/
    #menu .menu-btn{
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 999999;
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size:24px;
    }
    #menu .menu-btn .is-hidden{
        display:none;
    }

    /*----------------------------
    * メニュー本体
    *----------------------------*/
    #menu .menu_inner{
        position: fixed;
        top: 0;
        right: 0;
        z-index: 999;
        width: 100vw;
        height: 60%;
        background: rgba(0, 0, 0, 0.8);
        overflow: scroll;
        padding: 2rem 0;
    }
    #menu .menu_inner ul{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        width: 80%;
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
    }
    #menu .menu_inner ul li.menu_item{
        border-bottom: 0.5px solid #fff;
        color: #fff;
        text-align: left;
        margin: 0 auto 20px;
        padding: 10px 0 0 20px;
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    #menu .menu_inner ul li.menu_item a{
        padding: 0 0 20px;
        text-decoration: none;
    }
    #menu .menu_inner ul li.menu_item a span{
        position: relative;
        padding:0 0 0 20px;
    }
    #menu .menu_inner ul li.menu_item a span:before{
        content:"\f054";
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        position: absolute;
        left:0;
        top:50%;
        transform:translatey(-50%);
    }

    /* アニメーション前のメニューの状態 */
    #menu .menu_inner{
        pointer-events: none;
        opacity: 0;
        transform-origin: top;
        transform: scale(.5);
        transition: all .3s ease;
    }
    /* アニメーション後のメニューの状態 */
    #menu .menu_inner.is-active{
        pointer-events: auto;
        opacity: 1;
        transform: scale(1.0);
    }

    #menu .menu_inner ul li.menu_item:not(:last-child):after{
        display:none;
    }
    footer{
        padding: 8% 0;
    }
    footer figure{
        text-align: center;
        width: 100%;
        margin: 3% auto 15%;
    }
    footer figure img{
        width: 90px;
        margin:0 0 5%;
    }
    footer figure span{
        font-size: 1.0em;
        width: 100%;
    }
}