@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

@media (min-width: 1024px) {
    .sp-none {
        display: none !important;
    }

    .header-parent {
        position: fixed;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 850px;
        height: 70px;
        margin: auto;
        border-radius: 10px;
        /* overflow: hidden; */
        background: white;
        z-index: 3;
        top: 5%;
        box-shadow: 3px 4px 16px #191818a8;
        transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
        font-family: 'Noto Sans JP', sans-serif;
        left: calc(-50vw + 50%);
        right: calc(-50vw + 50%);
        align-items: center;
    }

    .header-parent a.logo{margin-left: 1%; padding: 1%;}

    .scroll-down .header-parent {
        position: fixed;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        height: 70px;
        margin: auto;
        border-radius: 0px;
        /* overflow: hidden; */
        background: white;
        z-index: 3;
        left: 0;
        top: 0;
        box-shadow: 3px 4px 16px #191818a8;
        transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
        margin: 0;
    }

    .scroll-down .header-parent .logo {
        display: flex;
        padding: 1% 5%;
        width: 10%;
        height: auto;
        box-sizing: content-box;
    }

    .scroll-down .header-content-center {
        width: 50%;
        text-align: center;
    }

    .header-content-center {
        /* width: max-content; */
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    .header-bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: 12px;
        transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
        line-height: 1;
        font-family: 'Noto Sans JP', sans-serif;
        margin-top: 8px;
        width: 470px;
        /* background: blue; */
        margin: 0% auto;
        text-align: center;
    }

    .scroll-down .header-bottom {width: 100%;}

    a.navlink {
        position: relative;
        text-decoration: none;
        height: 80px;
        max-height: 31px;
        padding-top: 12px;
        /* margin-bottom: 5px; */
        overflow: hidden;
    }

    a.navlink:hover::after {
        width: 100%;
        height: 2px;
    }

    a.op09:hover{opacity:0.9;}

    a.navlink::after {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        content: "";
        width: 0%;
        height: 2px;
        background: #bd1821;
        transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }

    .header-top p {
        font-size: 10px;
        margin: 0px;
        text-align: center;
        padding-top: 12px;
    }

    .header-bottom p {
        margin: 0;
        margin-top: 0%;
        font-size: 12px;
        /* font-size: clamp(10px, 0.8vw, 12px); */
        color: black;
        width: 84px;
        /* background: blue; */
    }

    .header-content-right {
        background: #bd1821;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70px;
        width: 20%;
        margin-right: -1%;
        border-radius: 0px 10px 10px 0px;
        position: relative;
    }

    .header-content-right a {
        padding: 0px 20px;
        color: white;
        margin: 11px auto;
        text-align: center;
        letter-spacing: 2px;
        text-decoration: none;
        font-size: 1.6rem;
        line-height: 1.5;
    }

    span.hcr2 {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 11px;
        letter-spacing: 2px;
        border-top: 1px solid white;
        padding-top: 2px;
    }

    .scroll-down .header-content-right a {
        width: 220px;
        padding: 0px 20px;
        color: white;
        margin: 11px auto;
        text-align: center;
        position: relative;
        text-decoration: none;
        line-height: 1.5;
        font-size: 1.6rem;
    }

    .header-content-right::after {
        border-bottom: solid 1px #fff;
        bottom: 10px;
        content: "";
        position: absolute;
        left: 24%;
        background: #fff;
        transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
        width: 0;
    }

    .header-content-right:hover::after {
        width: 50%;
    }

    .header-parent img {
        display: flex;
        width: 146px;
    }

    .header-parent img:hover{opacity: 0.6;}

    .header-bottom p::after {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        content: "";
        width: 0%;
        height: 2px;
        background: #c73a2e;
        transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }

    li.header-bottom-parent {
        text-decoration: none;
        display: flex;
        height: 150%;
    }

    ul.header-dropdown {
        position: fixed;
        background: #bd1821;
        text-decoration: none;
        display: none;
        flex-direction: column;
        top: 92px;
        opacity: 0;
        transform: translateY(40px);
        padding: 15px;
        width: max-content;
        height: max-content;
        text-align: left;
        border-radius: 5px;
        transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }

    li.dropdown-items {
        text-decoration: none;
        list-style-type: none;
        color: #fff;
        line-height: 2;
    }

    a.dropdown-items-link {
        color: white;
        line-height: 2;
        text-decoration: none;
    }

    a.dropdown-items-link:hover{border-bottom: 1px solid #d6878b; padding-bottom: 2px;}

    li.header-bottom-parent:hover ul.header-dropdown {
        display: block;
        animation: appear 0.2s forwards;
    }

    .scroll-down .header-parent .header-bottom-parent:hover ul.header-dropdown {
        display: block;
        animation: appear-scroll-down 0.2s forwards;
    }

    @keyframes appear-scroll-down {
        0%   { opacity: 0;    transform: translateY(5px);  }
        25%  { opacity: 0.25; transform: translateY(-0px); }
        50%  { opacity: 0.5;  transform: translateY(-5px); }
        75%  { opacity: 0.75; transform: translateY(-10px);}
        100% { opacity: 1;    transform: translateY(-15px);}
    }

    @keyframes appear {
        0%   { opacity: 0;    transform: translateY(40px); }
        25%  { opacity: 0.25; transform: translateY(35px); }
        50%  { opacity: 0.5;  transform: translateY(30px); }
        75%  { opacity: 0.75; transform: translateY(25px); }
        100% { opacity: 1;    transform: translateY(20px); }
    }
}

@media (max-width: 1023px) {
    .pc-none {
        display: none !important;
    }

    .header-parent {
        position: fixed;
        top: 0;
        left: 0;
        background: white;
        z-index: 11;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 101%;
        height: 14vw;
        max-height: 130px;
        transition: all 0ms 300ms;
    }

    .header-parent .logo {
        width: 36%;
        height: auto;
        padding-left: 15px;
        margin: 0 auto;
        box-sizing: content-box;
    }

    .header-parent .logo img{max-width: 100%; height: auto;}

    .header-content-center {
        width: 50%;
    }

    .header-content-center p {
        font-size: 2.5vw;
        padding: 0% 5%;
        font-size: clamp(5px, 2.5vw, 20px);
    }

    .header-content-right {
        width: 15%;
        height: 100%;
        background: #bd1821;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .header-hr,
    .header-hr::before,
    .header-hr::after {
        content: '';
        height: 0.1vw;
        max-height: 2px;
        width: 6vw;
        max-width: 100px;
        background-color: #fff;
        position: absolute;
        transform-origin: 50% 50%;
    }

    /* .header-hr {
        top: 25px;
        right: 5%;
    } */

    .header-hr::before {
        top: -2vw;
        right: 0%;
        transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .header-hr::after {
        top: 2vw;
        right: 0%;
        transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .header-hr.animate {
        background-color: #bd1821;
        transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .header-hr.animate::after {
        top: 0 !important;
        transform: rotate(45deg);
        transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .header-hr.animate::before {
        top: 0 !important;
        transform: rotate(-45deg);
        transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
    }

    .navigation-menu {
        width: 100%;
        height: max-content;
        position: fixed;
        background: #bd1821;
        z-index: 10;
        top: -100%;
        padding: 6vw 0px;
        bottom: 0%;
        display: flex;
        flex-direction: column;
        transition: all 2000ms 300ms;
        box-shadow: 3px 4px 16px #191818a8;
        text-align: center;
        justify-content: space-around;
    }

    .is-active {
        top: 14vw !important;
        transition: all 2000ms 300ms;
    }

    .navigation-menu-content {
        width: 80%;
        height: max-content;
        display: block;
        justify-content: space-evenly;
        color: white;
        font-size: 20px;
        flex-direction: column;
        padding-bottom: 3vw;
        text-align: left;
        margin: auto;
    }

    .navigation-menu-content a{color: #fff; text-decoration: none;}

    .navigation-menu-content-1 {
        letter-spacing: 1px;
        /* text-decoration: underline;
        text-underline-offset: 5px; */
        text-align: left;
        width: 100%;
    }

    .navigation-menu-content-1 a{text-decoration: none; color: #fff;}

    .navigation-menu-content-2,
    .navigation-menu-content-3 {
        display: grid;
        flex-direction: row;
        width: 100%;
        height: max-content;
        grid-template-columns: auto auto;
        grid-gap: 3vw;
        letter-spacing: 1px;
        text-align: center;
        align-items: center;
        justify-content: start;
        justify-items: start;
    }

    .navigation-menu-content-2 {
        padding: 5% 0%;
    }

    .navigation-menu-content-3 {
        padding-top: 5%;
    }

    .navigation-menu-sub-content {
        font-size: clamp(10px, 3vw, 15px);
        width: 37vw;
        display: flex;
        align-items: center;
        border-left: 1px solid white;
        padding-left: 4vw;
        justify-content: flex-start;
        line-height: 100%;
    }

    .navigation-menu-sub-content a{text-decoration: none; color: #fff;}
}