@media screen and (max-width:767px){

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }
    
    body 
    {
        font-size: calc(14px * var(--font-scale));
        line-height:1.6rem;
        width:100vw;
        max-width:1200px;
    }
    main {
        margin: 118px 0 0 0;
    }
    .index main {
        margin: 74px 0 0 0 !important;
    }
    .header-wrap.upper {
        flex-direction: row;
    }

    .menu-btn-wrap {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
    }

    .menu-btn span {
        background-color: var(--control-color);
    }

    /* 親のはみ出し制限でメニューが切れないようにする */
    header,
    .header-container,
    .header-wrap.upper {
        overflow: visible;
        
    }
    .header-wrap.upper
    {
        padding: 10px 15px;
    }
    .header-menu {
        position: fixed;
        top: 67px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;

        display: none;
        box-sizing: border-box;

        width: 100vw;
        max-width: none;
        min-width: 0;
        height: auto;
        margin: 0;
        padding: 20px 20px 40px;

        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;

        transform: none;
    }

    .header-menu.is-open {
        display: block;
    }

    body.menu-open {
        overflow: hidden;
    }

    .header-menu ul {
        margin: 0 0 24px;
        padding: 0;
        list-style: none;
    }

    .header-menu li {
        padding: 0 0 15px 25px;
        margin: 0 0 18px;
        border-bottom: 1px solid #46966e;
    }

    .header-menu a {
        display: inline-block;
        font-size: 18px;
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        position: relative;
    }

    .header-menu li a:before {
        content: "";
        position: absolute;
        left: -25px;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        width: 18px;
        border-radius: 50%;
        aspect-ratio: 1 / 1;
        background-color: var(--yellow);
    }

    .header-menu li a:after {
        content: "";
        position: absolute;
        left: -18px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 6px solid #0b6a57;
    }

    header .sns-list {
        display: flex;
        flex-direction: row;
        gap: 10px;
        pointer-events: auto;
        align-items: center;
        justify-content: center;
        margin: 0 0 25px;
    }

    header .sns-list i {
        background-color: #ece8de;
        color: var(--control-color);
    }

    header .more-btn-g {
        display: flex;
        margin: 25px auto 0;
    }
    .logo
    {
        max-width: 200px;
    }
    
    h2.type-line {
        gap: 10px;
        flex-direction: column;
        align-items: flex-start;
    }
    h2.vertical
    {
        line-height: 1.5;
    }
    
    .event-slider-control .slick-next.slick-arrow
    {
        display: none !important;
    }
    .event-slider-control
    {
        width:90%;
        left:2%;
        
    }
    .event-slider-control button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--yellow);
        background: var(--yellow);
        cursor: pointer;
        position: relative;
        padding: 0;
    }
    .event-clip {

        padding-left: 40px;
        margin-right: -50px;
    }
    .sec.eve:after
    {
        aspect-ratio: 6 / 5;
        z-index: -1;
    }
    .box-text h4
    {
       font-size: calc(18px * var(--font-scale)); 
    }
    .event-slide .photo
    {
        border-radius: 25px 0 25px 0;
    }
    
    /*footer*/
    .footer-wrap
    {
        flex-direction: column;
        gap: 50px;
    }
    .footer-lower
    {
        width: 100%;
        
    }
    .footer-logo
    {
        width: 80%;
    }
    footer .more-btn-g
    {
        margin-top: 25px;
    }
    footer small
    {
        position: relative;
        font-size: calc(10px * var(--font-scale));
    }
    
    .page-header
    {
        aspect-ratio:7/5;
        background-image:url(../images/story/page-header-sp.webp);
    }
    .page-header h1
    {
        font-size: calc(1.5rem * var(--font-scale));
        letter-spacing: 0.3em;
    }
    
    .bg-illust
    {
        background-image: url(../images/common/bg-illust-sp.webp);
        aspect-ratio: 21/10;
        z-index: 1;
        margin-top: -50%;
    }
    
    
    /*サブページ*/
    .sub-page main
    {
        z-index: 0;
    }
    .sub-page-content
    {
        padding: 50px 5% 50px;
    }
    .sub-page-content h2
    {
        margin-bottom: 80px;
    }
    .sub-page-content h3
    {
        font-size: calc(1.5rem * var(--font-scale));
        color: var(--control-color);
    }
}