:root{
    --myblack: #2e2e2e;
    --myivory: #f6f2e8;
    --myorange: #b86e3c;
    --mygold: #d8b36a;
    --myred: #830003;
}
html { scroll-behavior: smooth;}
html, body {
    font-family: "Noto Sans JP",sans-serif;
    font-weight: 100%;
    font-size: 100%;
    color: var(--myblack);
    width: 100%;
    height: 100%;
    background-color: var(--myivory);
}
a{
    text-decoration: none;
}
.reverse{
    flex-direction: row-reverse;
}
img{
    max-width: 100%;
}
header h1 a{
    color: var(--myblack);
}
h1, h2, h3, nav, .heroText, .skillMidashi, .footLogo{
    /* font-family: "Cinzel", serif; */
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    /* font-style: italic; */
}
a[target="_blank"]::after{
    content: '\f08e';
    font-family: FontAwesome;
    margin-left: 0.5em;
}

/* -*-*-*-*- SP -*-*-*-*- */
@media screen and (max-width:599px) , print{
    .pcOnly{
        display: none;
    }
    html, body {
        overflow-x: hidden;
    }
    .wrap{
        width: 84%;
        margin: 0 auto;
    }
    /* ----- HEADER ----- */
    header{
        background-color: #fff;
        color: var(--myblack);
        height: 80px;
        width: 100%;
    }
    header h1{
        font-size: 1.5rem;
    }
    .headerTop{
        margin: 0;
        display: flex;
        width: 84%;
        height: 80px;
        margin: 0 auto;
        align-items: center;
    }

    /* ----- ham ----- */
    #ham{
        position: fixed;
        width: 40px;
        height: 30px;
        top: 25px;
        right: 20px;
        z-index: 2000;
    }
    .inner_line{
        position: absolute;
        width: 40px;
        height: 2px;
        background: var(--myorange);
        transition: 0.3s;
    }
    .hamMenu{
        position: absolute;
        display: block;
        color: var(--myorange);
        width: 40px;
        font-size: 0.9rem;
    }
    #line1{
        top: 0px;
    }
    #line2{
        top: 14px;
    }
    #line3{
        bottom: 0px;
    }
    #line4{
        top: 6px;
    }
    .line_1{
        margin-top: 14px;
        transform: rotate(-45deg);
        background: #fff;
    }
    .line_2{
        opacity: 0;
    }
    .line_3{
        margin-bottom: 15px;
        transform: rotate(45deg);
        background: #fff;
    }

    /* ----- topNav ----- */
    nav{
        /* position: relative; Geminiにより変更*/
        position: fixed;/* 追加 */
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100vh;
        background: rgb(65, 74, 82, 0.7);
        opacity: 0;
        transition: 0.3s;
        /* visibility: collapse; Geminiにより変更 */
        visibility: hidden;/* 追加 */
        z-index: 1900; /* 追加 */
    }
    nav ul{
        width: 84%;
        margin: 0 auto;
        padding-top: 40px;
    }
    nav li{
        display: block;
        background: #fff;
        border-radius: 20px;
        margin: 2rem 0;
        text-align: right;
        padding: 0.5rem 0;
        transition: 0.3s;
    }
    .topNav{
        width: 84%;
        margin: 0 auto;
        transform: translateX(100vw);
        transition: all .3s linear;
    }
    .navLink{
        display: block;
        padding: 0 1rem;
        color: var(--myblack);
        text-align: center;
    }
    .in{
        visibility: visible;
        opacity: 1;
        width: 100%;
        transform: translateX(0);
    }

    /* ----- main ----- */
    section{
        margin-bottom: 60px;
    }
    h2{
        color: var(--myorange);
        font-size: 3rem;
        text-align: center;
        margin-bottom: 20px;
    }
    h3{
        color: var(--myorange);
        font-size: 2rem;
        text-align: center;
        margin-bottom: 15px;
    }

    /* ----- footer ----- */
    footer{
        width: 100%;
        height: 50px;
        background-color: #fff;
        text-align: center;
    }
    .footerBottom{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
    }
    .footNav{
        display: none;
    }
}



/* -*-*-*-*- PC -*-*-*-*- */
@media screen and (min-width: 600px) , print{
    .spOnly{
        display: none;
    }
    .wrap{
        width: 84%;
        max-width: 1000px;
        margin: 0 auto;
    }

    /* ----- HEADER ----- */
    header{
        background-color: #fff;
        color: var(--myblack);
        height: 80px;
        width: 100%;
    }
    header h1{
        font-size: 1.5rem;
    }
    .headerTop{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 84%;
        max-width: 1000px;
        margin: 0 auto;
    }

    /* ----- nav ----- */
    nav{
        display: flex;
        justify-content: flex-end;
    }
    nav ul{
        display: flex;
        height: 80px;
        align-items: center;
        list-style: none;
    }
    nav li{
        margin-left: 2rem;
        font-size: 2rem;
    }
    nav a{
        color: var(--myblack);
    }
    .topNav a:hover{
        color: var(--mygold);
    }
    .navLink{
        display: block;
        letter-spacing: 3px;
    }
    .navLink:hover{
        transform: translateY(-5px);
        transition:0.3s;
    }
    .hamMenu{
        display: none;
    }

    /* ----- main ----- */
    section{
        margin-bottom: 100px;
    }
    h2{
        color: var(--myorange);
        font-size: 3rem;
        text-align: center;
        margin-bottom: 15px;
    }
    h3{
        color: var(--myorange);
        font-size: 2rem;
        text-align: center;
        margin-bottom: 15px;
    }

    /* ----- footer ----- */
    footer{
        height: 50px;
        background-color: #fff;
    }
    .footLogo{
        align-items: center;
    }
    .footerBottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    nav{
        display: flex;
        justify-content: flex-end;
    }
    .footNav ul{
        display: flex;
        height: 50px;
        align-items: center;
        list-style: none;
    }
    .footNav li{
        margin-left: 2rem;
        font-size: 1rem;
    }
    nav a{
        color: var(--myblack);
    }
    .footNav a:hover{
        color: var(--mygold);
    }
    .navItem-f{
        letter-spacing: 1px;
    }
    .navItem-f:hover{
        transform: translateY(-5px);
        transition:0.3s;
    }
}