/* =====================================================
   1. COMMON (全デバイス共通・基本設定)
   ===================================================== */
article {
    margin: 0 auto;
}

body {
    background-color: #fffaf0e6;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* =====================================================
   2. SMARTPHONE (max-width: 767px)
   ===================================================== */
@media only screen and (max-width: 767px) {
    article h1 img {
        width: inherit;
    }

    /* HEADER */
    #header {
        width: 100%;
        padding-top: 110px;
        position: relative;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .menu_inner {
        position: relative;
        z-index: auto;
    }

    #header .header_inner {
        width: 100%;
        box-sizing: border-box;
        background-image: url(../img/mainBG.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 0;
        padding-top: 142%;
        position: relative;
    }

    #header h1 {
        text-align: center;
        position: absolute;
        right: 0;
        bottom: -3%;
    }

    #header h1 img {
        width: 90%;
    }

    .header_inner p img { width: 100%; }
    .header_inner .head_text_PC { display: none; }
    
    .header_inner .head_read {
        width: 95%;
        position: absolute;
        right: -180px;
        transform: translateX(-50%);
        top: 222px;
    }

    .header_inner .head_text_sp.hts02 {
        width: 95%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 3%;
    }

    /* SNS SHARE */
    .share_box_top {
        position: absolute;
        top: 0;
    }

    .share_box_top ul {
        display: flex;
        margin: 1em 0.5rem;
    }

    .share_box_top ul li {
        margin-right: 5px;
        width: 50px;
        height: auto;
    }

    .share_box_top img {
        width: 35px;
    }

    /* SCHEDULE */
    #schedule {
        width: 100%;
        height: auto;
        text-align: center;
    }

    .head_schedule {
        background-color: #2151b0;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
    }

    .head_start {
        background: #fff887;
    }

    #schedule img {
        width: 90%;
        margin-top: 0;
        padding: 0.5rem;
    }

    /* MENU / NAVIGATION */
    .nav {
        position: fixed;
        right: -320px;
        top: 94px;
        width: 300px;
        height: 100vh;
        padding-top: 85px;
        background-color: #fff8ded9;
        transition: all .6s;
        z-index: 50;
        overflow: hidden;
    }

    .hamburger {
        position: fixed;
        right: 10px;
        top: 125px;
        width: 40px;
        height: 40px;
        cursor: pointer;
        z-index: 50;
        background-color: #2151b0;
        border-radius: 20px;
    }

    .nav_item {
        width: 100%;
        text-align: center;
        padding: 0.5rem;
        transition: all .6s;
    }

    .nav_item a {
        font-family: 'YasashisaGothic', 'Noto Sans JP', sans-serif;
        font-weight: bold;
        font-size: 25px;
        color: #623700;
    }

    .nav_item:hover {
        background-color: #fff887;
    }

    .nav_item a:hover {
        color: #2151b0;
    }

    .hamburger_border {
        position: absolute;
        left: 11px;
        width: 18px;
        height: 3px;
        background-color: #FFF;
        transition: all .6s;
    }

    .hamburger_border_top { top: 14px; }
    .hamburger_border_center { top: 20px; }
    .hamburger_border_bottom { top: 26px; }

    .black_bg {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 10;
        background-color: #333;
        opacity: 0;
        visibility: hidden;
        transition: all .6s;
        cursor: pointer;
    }

    /* NAV OPEN */
    .nav-open .nav { right: 0; }
    .nav-open .black_bg {
        opacity: .8;
        visibility: visible;
    }
    .nav-open .hamburger_border_top {
        transform: rotate(45deg);
        top: 20px;
    }
    .nav-open .hamburger_border_center {
        width: 0;
        left: 50%;
    }
    .nav-open .hamburger_border_bottom {
        transform: rotate(-45deg);
        top: 20px;
    }

    footer #foot_menu a {
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", Meiryo, Arial, sans-serif;
    }
}

/* =====================================================
   3. TABLET (768px - 1024px)
   ===================================================== */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #header {
        width: 100%;
        padding-top: 130px;
        position: relative;
    }

    #header .header_inner {
        width: 100%;
        box-sizing: border-box;
        background-image: url(../img/mainBG.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        height: 0;
        padding-top: 142%;
        position: relative;
    }

    #header h1 {
        text-align: center;
        position: absolute;
        bottom: 0;
    }

    #header h1 img {
        width: 80%;
    }

    .header_inner .head_read {
        width: 95%;
        position: absolute;
        right: -340px;
        transform: translateX(-50%);
        top: 455px;
    }

    .header_inner .head_text_sp.hts02 {
        width: 95%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 3%;
    }

    .share_box_top {
        position: absolute;
        top: 0;
    }

    .share_box_top ul {
        display: flex;
        margin: 1em;
    }

    .share_box_top ul li {
        margin-right: 10px;
        width: 50px;
    }

    .share_box_top img {
        width: 45px;
    }

    /* NAV / HAMBURGER */
    .nav {
        position: fixed;
        right: -400px;
        top: 94px;
        width: 400px;
        height: 100vh;
        padding-top: 85px;
        background-color: #fff8ded9;
        transition: all 0.6s ease;
        z-index: 50;
        overflow: hidden;
    }

    .nav_item {
        width: 100%;
        text-align: center;
        padding: 1rem;
        transition: all .6s;
    }

    .nav_item a {
        font-family: 'YasashisaGothic', 'Noto Sans JP', sans-serif;
        font-weight: bold;
        font-size: 25px;
        color: #623700;
    }

    .nav_item:hover {
        background-color: #fff887;
    }

    .nav_item a:hover {
        color: #2151b0;
    }

    .hamburger {
        position: fixed;
        right: 15px;
        top: 140px;
        width: 55px;
        height: 55px;
        cursor: pointer;
        z-index: 50;
        background-color: #2151b0;
        border-radius: 50%;
    }

    .hamburger_border {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 30px;
        height: 4px;
        background-color: #fff;
        transform: translate(-50%, -50%);
        transition: transform 0.6s ease, opacity 0.6s ease, top 0.6s ease;
    }

    .hamburger_border_top { transform: translate(-50%, calc(-50% - 10px)); }
    .hamburger_border_center { transform: translate(-50%, -50%); }
    .hamburger_border_bottom { transform: translate(-50%, calc(-50% + 10px)); }

    .nav-open .nav { right: 0; }
    .nav-open .hamburger_border_top {
        transform: translate(-50%, -50%) rotate(45deg);
        top: 27px;
    }
    .nav-open .hamburger_border_center { opacity: 0; }
    .nav-open .hamburger_border_bottom {
        transform: translate(-50%, -50%) rotate(-45deg);
        top: 27px;
    }

    .head_schedule { background: #2151b0; text-align: center; }
    .head_start { background: #fff887; text-align: center; }
}

/* =====================================================
   4. PC (min-width: 1025px)
   ===================================================== */
@media only screen and (min-width: 1025px) {
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
        scroll-behavior: smooth;
        background: #fff;
        color: #222;
        box-sizing: border-box;
    }

    /* PC MENU */
    #header #menu {
        width: 100%;
        background: #2151b0;
        position: absolute;
        top: 0;
        height: 60px;
        z-index: 1;
    }

    .nav_list {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .nav_item {
        margin: 0.5rem 1rem;
    }

    .nav_list a {
        font-family: 'YasashisaGothic', 'Noto Sans JP', sans-serif;
        font-weight: bold;
        font-size: 25px;
        color: #fff;
        display: inline-block;
        perspective: 1000px;
        transform-style: preserve-3d;
        transition: transform 0.6s;
    }

    @keyframes nav-rotate-x {
        0% { transform: rotateX(0deg); }
        100% { transform: rotateX(360deg); }
    }

    .nav_list a:hover {
        animation: nav-rotate-x 0.6s ease-out forwards;
    }

    /* PC HEADER BG */
    #header {
        width: 100%;
        position: relative;
        margin: 130px auto 0 auto;
        background-image: url(../img/mainBG_pc.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center 60px;
        display: block;
        aspect-ratio: 2.93/1.15;
    }

    .header_inner {
        width: 100%;
        max-width: 1920px;
        position: relative;
        margin: 0 auto;
        height: 100%;
    }

    #header h1 img {
        position: absolute;
        left: 24vw;
        top: 16vh;
        width: 26vw;
        max-width: 700px;
        z-index: 10;
    }

    .header_inner .head_text_sp {
        display: none;
    }

    .header_inner .head_text_PC.htp02 {
        position: absolute;
        right: 0;
        top: 20px;
        text-align: right;
    }

    .header_inner .head_read {
        position: absolute;
        left: 5vw;
        top: 45vh;
        width: 35vw;
        max-width: 720px;
        z-index: 10;
    }

    .header_inner .head_tw {
        position: absolute;
        top: 12vw;
        right: 1vw;
        max-width: 20vw;
        width: 100%;
        z-index: 10;
        padding: 1vh 0;
    }

    /* PC SNS SHARE */
    .share_box_top {
        position: absolute;
        top: 9vh;
        right: 2vh;
        max-width: 200px;
        width: 100%;
        z-index: 10;
    }

    .share_box_top ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .share_box_top ul li {
        margin-right: 10px;
        margin-bottom: 10px;
    }

    .share_box_top img {
        width: 40px;
    }

    #schedule {
        display: none;
    }
}