/* CSS Document */

/**
 * uaplus.css version 0.0.1
 */
*,
*::after,
*::before {
    box-sizing: border-box
}

:focus-visible {
    outline-offset: 3px
}

:where(html) {
    -webkit-text-size-adjust: none;
    text-size-adjust: none
}

:where(html) {
    line-height: 1.5
}

:where(html) {
    scrollbar-gutter: stable
}

:where(h1) {
    font-size: 2em;
    margin-block: .67em
}

:where(abbr[title]) {
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted
}

@media (forced-colors:active) {
    mark {
        color: HighlightText;
        background-color: Highlight
    }
}

:where(del, ins, s)::before,
:where(del, ins, s)::after {
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    content: "test"
}

:where(s)::before {
    content: "stricken text start "
}

:where(s)::after {
    content: " stricken text end"
}

:where(del)::before {
    content: "deletion start "
}

:where(del)::after {
    content: " deletion end"
}

:where(ins)::before {
    content: "insertion start "
}

:where(ins)::after {
    content: " insertion end"
}

:where(audio, iframe, img, svg, video) {
    max-block-size: 100%;
    max-inline-size: 100%
}

:where(fieldset) {
    min-inline-size: 0
}

:where(label):has(+:where(textarea, input, select)) {
    display: block
}

:where(textarea:not([rows])) {
    min-block-size: 6em
}

:where(button, input, select, textarea) {
    font-family: inherit;
    font-size: inherit
}

:where([type="search"]) {
    -webkit-appearance: textfield;
    appearance: textfield;
}

@supports (-webkit-touch-callout:none) {
    :where([type="search"]) {
        border: 1px solid -apple-system-secondary-label;
        background-color: canvas
    }
}

:where([type="tel"], [type="url"], [type="email"], [type="number"]):not(:placeholder-shown) {
    direction: ltr
}

:where(table) {
    border-collapse: collapse;
    border: 1px solid
}

:where(th, td) {
    border: 1px solid;
    padding: .25em .5em
}

:where(dialog)::backdrop {
    background: oklch(0% 0 0 / .3)
}

:where(dialog),
:where(dialog)::backdrop {
    opacity: 0;
    transition: opacity 300ms ease-out, display 300ms allow-discrete, overlay 300ms allow-discrete
}

:where(dialog[open]),
:where(dialog[open])::backdrop {
    opacity: 1
}

@starting-style {

    :where(dialog[open]),
    :where(dialog[open])::backdrop {
        opacity: 0
    }
}

[hidden]:not([hidden="until-found"]) {
    display: none !important
}

/* 画面サイズ取得 */
@property --screen-width {
    syntax: '<length>';
    inherits: true;
    initial-value: 100vw;
}

@property --screen-height {
    syntax: '<length>';
    inherits: true;
    initial-value: 100vh;
}

:root {
    --screen-width-px: tan(atan2(var(--screen-width), 1px));
    /* ウィンドウの横幅 */
    --screen-height-px: tan(atan2(var(--screen-height), 1px));
    /* ウィンドウの高さ */
}


/* 基本スタイル */

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-image: url(../images/uriba2025_bg1_sp.png);
    background-repeat: repeat-y;
    background-size: contain;
}


/* PC用 */
@media screen and (min-width: 768px) {

    html {
        font-size: 1.4vw;
    }

    body {
        margin: 0;
        padding: 0;
        background-image: url(../images/uriba2025_bg1_pc.png);
        background-repeat: repeat;
        background-size: auto;
    }

}

img {
    vertical-align: top;
}


/* スマホ・タブレット用 */
@media screen and (max-width: 767px) {

    .is-pc {
        display: none !important;
    }

}

/* PC用 */
@media screen and (min-width: 768px) {

    .is-sp {
        display: none !important;
    }

}

/* スクロールスナップ PC用 */

@media screen and (min-width: 768px) and (min-height: 601px) {

    .scroll-container {
        /* scroll-snap-type: y mandatory; */
        scroll-snap-type: none;
        overflow-y: scroll;
        /* 縦スクロールを有効にする */
        height: 100svh;
    }

    .scroll-item {
        scroll-snap-align: start;
        width: 100vw;
        /*height: 100svh;*/
        /* inview 
        opacity: 0;
        transform: translate(0, 50%);
        transition: 2s;
        */
    }

    .scroll-item.is-show {
        transform: translate(0, 0);
        opacity: 1;
    }

    .scroll-container .sc2 {
        background-image: url(../images/uriba2025_schedule_bg_pc.png);
        background-size: cover;
        background-position: 100% 50svh;
        background-repeat: no-repeat;
    }

    .scroll-container .sc3 {
        background-color: #efbcd6;
        background-image: url(../images/uriba2025_schedule_bg2_pc.png);
        background-size: cover;
        background-position: 100% 30svh;
        background-repeat: no-repeat;
    }

    .scroll-container .sc4 {
        background-color: #efa7c8;
        background-image: url(../images/uriba2025_schedule_bg3_pc.png);
        background-size: cover;
        background-position: 100% 40svh;
        background-repeat: no-repeat;
    }

    .scroll-container .sc5 {
        background-color: transparent;
        background-image: url(../images/uriba2025_schedule_bg4_pc.png);
        background-size: cover;
        background-position: 100% 60svh;
        background-repeat: no-repeat;
    }

    .scroll-container .sc6 {
        background-color: #efa7c8;
        background-image: url(../images/uriba2025_about_bg1_pc.png);
        background-size: cover;
        background-position: 100% 10svh;
        background-repeat: no-repeat;
    }

    .scroll-container .sc7 {
        background-color: white;
        background-image: url(../images/uriba2025_about_bg2_pc.png);
        background-size: cover;
        background-position: 100% 50svh;
        background-repeat: no-repeat;
    }

    .scroll-container .sc8 {
        background-color: none;
        background-image: url(../images/uriba2025_about_bg3_pc.png);
        background-size: contain;
        background-position: bottom;
        background-repeat: no-repeat;
    }

    .no-snap {
        scroll-snap-align: start;
        height: auto;
    }

}

@media (min-width: 768px) and (max-height: 600px) {
    .scroll-container {
        scroll-snap-type: none !important;
    }

    .scroll-item {
        padding-bottom: 3svh !important;
    }
}

/* flex */

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-center {
    justify-content: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

/* PC用 横幅指定 */

@media screen and (min-width: 768px) {

    .w40 {
        width: 40%;
    }

    .w50 {
        width: 50%;
    }

    .vw50 {
        width: 50vw;
    }

    .w60 {
        width: 60%;
    }

    .w70 {
        width: 70%;
    }

    .w75 {
        width: 75%;
    }

    .w80 {
        width: 80%;
    }

    .w90 {
        width: 90%;
    }

    .w100 {
        width: 100%;
    }

    .wrap1200 {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 3vw;
    }

}

/* 本文 */

header {

    width: 100vw;
    height: 100px;
    background-image: url(../images/uriba2025_header_sp.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: fixed;
    z-index: 999;

    .menu {
        position: absolute;
        top: 1vh;
        right: 4%;
        display: flex;
        flex-direction: column;
        cursor: pointer;

        & p {
            font-size: 0.4rem;
            font-weight: bold;
            color: white;
            margin: 0;
            margin-top: 5px;
            text-align: center;
        }

    }

    .menu_int {
        position: relative;
        height: 20px;
        width: 28px;
        display: inline-block;
        box-sizing: border-box;
    }

    .menu_int div {
        position: absolute;
        left: 0;
        height: 2px;
        width: 28px;
        background-color: white;
        border-radius: 2px;
        display: inline-block;
        box-sizing: border-box;
    }

    .menu_int div:nth-of-type(1) {
        bottom: 16px;
    }

    .menu_int div:nth-of-type(2) {
        bottom: 8px;
    }

    .menu_int div:nth-of-type(3) {
        bottom: 0;
    }

}

@media screen and (min-width: 768px) {

    header {

        width: 100vw;
        height: calc((198 / 2398) * 100vw);
        position: fixed;
        background-image: url(../images/uriba2025_header_pc.png);
        background-size: 100%;
        background-repeat: no-repeat;
        z-index: 999;
        filter: drop-shadow(5px 5px 7px rgba(140, 139, 139, 0.6));
        /* display: none; */

        .menu {
            position: absolute;
            top: 1svh;
            right: 10%;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            z-index: 20;

            & p {
                font-size: 0.7rem;
                font-weight: bold;
                color: white;
                margin: 0;
                margin-top: 7px;
                text-align: center;
            }

        }

        .menu_int {
            position: relative;
            height: 5svh;
            width: 2.5vw;
            display: inline-block;
            box-sizing: border-box;
        }

        .menu_int div {
            position: absolute;
            left: 0;
            height: 4px;
            width: 135%;
            background-color: white;
            border-radius: 2px;
            display: inline-block;
            box-sizing: border-box;
        }

        .menu_int div:nth-of-type(1) {
            bottom: 28px;
        }

        .menu_int div:nth-of-type(2) {
            bottom: 14px;
        }

        .menu_int div:nth-of-type(3) {
            bottom: 0;
        }

    }

}


.top {
    width: 100vw;
    height: 100svh;
    position: relative;

    .logotext {
        width: 95vw;
        position: absolute;
        top: 12svh;
        left: 3vw;
        z-index: 800;
    }

    .mainart {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100vw;
        height: 100svh;
        padding: 0;
        margin: 0;
        background-image: url(../images/uriba2025_mainart1_sp.png), url(../images/uriba2025_mainart2_sp.png);
        background-size: 48svh, 58.5svh;
        background-repeat: no-repeat, no-repeat;
        background-position: center bottom, center 115%;
        z-index: 1;
        overflow: hidden;
        /* これを追加 */
        /*        animation: popupAnimation 1s ease-out forwards;*/

        & img {
            position: absolute;
            bottom: 0;
            width: 120%;
        }

    }

    @keyframes popupAnimation {
        0% {
            background-position: center bottom;
            /* 初期位置 */
            transform: scale(0.5);
            /* 初期状態では小さく */
        }

        100% {
            background-position: center center;
            /* 最終的な位置 */
            transform: scale(1);
            /* 最終的なサイズ */
        }
    }

}

@media screen and (min-width: 768px) {

    .top {
        width: 100%;
        height: 100svh;
        position: relative;
        background-image: url(../images/uriba2025_mainart2_pc.png);
        background-size: cover;
        background-repeat: no-repeat;

        .top_int {
            max-width: 1920px;
            min-width: 1000px;
            height: 100svh;
            margin: 0 auto;
            position: relative;
        }

        /* PC版TOP タイトル位置 */

        @media screen and (max-height: 830px) {
            .logotext {
                width: 60%;
                box-sizing: border-box;
                position: absolute;
                top: 3svh;
                left: 5%;
                z-index: 800;
            }
        }

        @media screen and (min-height: 831px) {
            .logotext {
                width: 60%;
                box-sizing: border-box;
                position: absolute;
                top: 5%;
                left: 5%;
                z-index: 800;
            }
        }

        .mainart {
            position: absolute;
            bottom: 0;
            width: 100%;
            min-width: 1000px;
            height: calc((1174 / 2308) * 100vw + 100px);
            padding: 0;
            margin: 0 auto;
            background-image: url(../images/uriba2025_mainart1_pc.png);
            background-repeat: no-repeat;
            background-position: center bottom;
            z-index: 1;
            overflow: hidden;

            & img {
                position: absolute;
                bottom: 0;
                width: 120%;
            }

        }

        /* PC版TOP スヌーピーサイズ */

        @media screen and (max-width: 1200px) {
            .mainart {
                height: calc((1174 / 2308) * 100vw + 100px);
                background-size: 1200px;
            }
        }



        @media screen and (min-width: 1201px) {
            .mainart {
                background-size: 95%;
            }
        }

        @media screen and (max-height: 750px) {
            .mainart {
                height: calc((1174 / 2308) * 100vw + 100px);
                background-size: calc((1174 / 2308) * 160vw);
            }
        }

        /* PC版TOP スヌーピーサイズ ここまで */

        .top_btn {
            position: relative;
            width: 24%;
            height: calc((768 / 900) * 60svh);
            top: 25svh;
            left: 60vw;
            z-index: 1;

            & ul {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                height: calc((768 / 900) * 60svh);
                position: relative;
                margin: 0 auto;
                padding: 0;
                padding-top: 20%;
                z-index: 2;

                & li {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: black;
                    background-color: #efbcd6;
                    text-decoration: none;
                    font-size: 1.5vw;
                    font-weight: bold;
                    letter-spacing: 0vw;
                    width: 100%;
                    height: 7svh;
                    border-radius: 5svh;
                    box-shadow: 4px 4px 0px 0px rgba(155, 30, 134, 1);
                    margin: 5% auto;
                    list-style: none;
                    position: relative;
                    z-index: 3;

                    .wd1 {
                        position: absolute;
                        top: -12svh;
                        left: -10%;
                        width: 120%;
                        height: calc((768 / 169) * 70svh);
                        background-image: url(../images/uriba2025_topmenu_wd1_pc.png);
                        background-size: contain;
                        background-repeat: no-repeat;
                        pointer-events: none;
                    }

                    .wd2 {
                        position: absolute;
                        top: -9svh;
                        left: -10%;
                        width: 120%;
                        height: calc((768 / 174) * 70svh);
                        background-image: url(../images/uriba2025_topmenu_wd2_pc.png);
                        background-size: contain;
                        background-repeat: no-repeat;
                        pointer-events: none;
                    }

                    .wd3 {
                        position: absolute;
                        top: -8svh;
                        left: -12%;
                        width: 120%;
                        height: calc((768 / 169) * 70svh);
                        background-image: url(../images/uriba2025_topmenu_wd3_pc.png);
                        background-size: contain;
                        background-repeat: no-repeat;
                        pointer-events: none;
                    }

                    .wd4 {
                        position: absolute;
                        top: -10svh;
                        left: -12%;
                        width: 120%;
                        height: calc((768 / 161) * 70svh);
                        background-image: url(../images/uriba2025_topmenu_wd4_pc.png);
                        background-size: contain;
                        background-repeat: no-repeat;
                        pointer-events: none;
                    }

                    .wd5 {
                        position: absolute;
                        top: 6svh;
                        left: -12%;
                        width: 120%;
                        height: calc((768 /76) * 70svh);
                        background-image: url(../images/uriba2025_topmenu_wd5_pc.png);
                        background-size: contain;
                        background-repeat: no-repeat;
                        pointer-events: none;
                    }

                }

                & li a {
                    display: block;
                    width: 100%;
                    padding: 5% 0;
                    padding-bottom: 5%;
                    box-sizing: border-box;
                    color: black;
                    text-decoration: none;
                    text-align: center;
                    cursor: pointer;
                    z-index: 4;
                }

            }

            .overlay {
                position: absolute;
                width: 120%;
                height: calc((768 / 900) * 100svh);
                top: 0;
                left: -10%;
                background-image: url(../images/uriba2025_topmenu_wd_pc.png);
                background-size: contain;
                background-repeat: no-repeat;
                z-index: 10;
                display: none;
            }

        }

        /* PC版TOP メニュー */

        .menu {
            position: absolute;
            top: 4vh;
            right: 7%;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            z-index: 20;

            & p {
                font-size: 0.83rem;
                font-weight: bold;
                color: white;
                margin: 0;
                margin-top: 7px;
                text-align: center;
            }

        }

        .menu_int {
            position: relative;
            height: 5svh;
            width: 3vw;
            display: inline-block;
            box-sizing: border-box;
        }

        .menu_int div {
            position: absolute;
            left: 0;
            height: 4px;
            width: 135%;
            background-color: white;
            border-radius: 2px;
            display: inline-block;
            box-sizing: border-box;
            z-index: 25;
        }

        .menu_int div:nth-of-type(1) {
            bottom: 32px;
        }

        .menu_int div:nth-of-type(2) {
            bottom: 16px;
        }

        .menu_int div:nth-of-type(3) {
            bottom: 0;
        }

    }

}

.schedule {

    margin-bottom: -12svh;

    @media screen and (min-width: 768px) {
        margin-bottom: 0;
    }

    .intro {
        width: 100vw;
        margin: 7vh auto;
        margin-top: 5svh;

        & p {
            text-align: center;
            font-size: 0.9rem;
            letter-spacing: 0.1rem;
            font-weight: bold;
        }
    }

    @media screen and (min-width: 768px) {

        .intro {
            width: 100vw;
            margin: 0 auto;
            padding-top: 20svh;

            & p {
                text-align: center;
                font-size: 1.2rem;
                letter-spacing: -0.03rem;
                line-height: 1.5;
                font-weight: bold;
            }

        }

    }

    .schedule_top {
        background-image: url(../images/uriba2025_schedule_bg-head_sp.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
        height: calc((203 / 800) * 100vw);
        z-index: 2;
    }

    .schedule_top2 {
        background-color: #efa7c8;
        background-image: url(../images/uriba2025_schedule_bg2-head_sp.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
        height: calc((215 / 800) * 100vw);
        z-index: 4;
    }

    .schedule_top3 {
        background-color: #efbcd6;
        background-image: url(../images/uriba2025_schedule_bg-head_sp.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
        height: calc((203 / 800) * 100vw);
        z-index: 6;
    }

    .schedule_int {
        width: 100vw;
        background-color: #efa7c8;
        padding: 0 3vw;
        z-index: 3;
        margin-bottom: -5svh;
    }

    @media screen and (min-width: 768px) {

        .schedule_int {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            background-color: transparent;
            padding: 0 3vw;
            z-index: 3;
            margin-bottom: 0;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: center;
            font-size: 1.3rem;
        }

    }

    .bigsticker {
        font-size: 1.2rem;
    }

    .sticker {
        width: 100%;
    }

    .schedule_int2 {
        width: 100vw;
        background-color: #efbcd6;
        padding: 0 3vw;
        z-index: 5;
        padding-bottom: 1svh;
    }

    @media screen and (min-width: 768px) {

        .schedule_int2 {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            background-color: transparent;
            padding: 0 3vw;
            z-index: 3;
            margin-bottom: 0svh;

            .logo75th {
                width: 100%;
                height: 60svh;
                min-height: 450px;
                margin: 0 auto;
                margin-top: -3svh;
                background-image: url(../images/uriba2025_schedule_75logo_pc.png);
                background-size: contain;
                background-position: bottom center;
                background-repeat: no-repeat;
                font-size: 1.2rem;
            }

        }

    }

    .schedule_int3 {
        width: 100vw;
        background-color: #efa7c8;
        padding: 0 3vw;
        z-index: 7;
    }

    @media screen and (min-width: 768px) {

        .schedule_int3 {
            width: 100%;
            max-width: 1300px;
            margin: 0 auto;
            background-color: transparent;
            padding: 0 3vw;
            z-index: 3;
            margin-bottom: 0;
        }

    }

    .schedule_int4 {
        background-color: #efa7c8;
        background-image: url(../images/uriba2025_schedule_bg3_sp.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
        height: 26svh;
        padding: 0 3vw;
        padding-top: 7svh;
        padding-left: 10vw;
        z-index: 8;
    }

    @media screen and (min-width: 768px) {

        .schedule_int4 {
            background-color: transparent;
            background-image: none;
            width: 100vw;
            height: 0svh;
            padding: 0;
            margin-top: -19svh;
            z-index: 8;
        }

    }

    .schedule_head_1 {
        width: 100%;
        min-width: 100%;
        content: url(../images/uriba2025_schedule_header1_sp.png);
    }

    @media screen and (min-width: 768px) {

        .schedule_head_1 {
            width: 80%;
            min-width: 80%;
            height: calc((206/1770)*80vw);
            content: '';
            background-image: url(../images/uriba2025_schedule_header1_pc.png);
            background-size: contain;
            background-position: top center;
            background-repeat: no-repeat;
            margin: 0 auto;
            margin-top: 0;
            margin-bottom: 3svh;
        }

    }



    .schedule_head_2 {
        width: 100%;
        min-width: 100%;
        content: url(../images/uriba2025_schedule_header2_sp.png);
        position: relative;
        top: -4svh;
        margin-bottom: -2svh;
    }

    @media screen and (min-width: 768px) {

        .schedule_head_2 {
            width: 90%;
            min-width: 90%;
            height: auto;
            content: url(../images/uriba2025_schedule_header2_pc.png);
            margin: 0 auto;
            padding-top: 100px;
        }

    }

    @media screen and (max-height: 830px) {
        .schedule_head_2 {
            width: calc((202/1770)*550vw);
        }
    }

    .schedule_head_3 {
        width: 100%;
        min-width: 95vw;
        text-align: center;
        position: relative;
        top: -4svh;
        margin: 0 auto;
        margin-bottom: -8svh;
    }

    @media screen and (min-width: 768px) {
        .schedule_head_3 {
            width: 96%;
            min-width: 96%;
            text-align: center;
            position: relative;
            margin: 0 auto;
            margin-bottom: -6svh;
            padding-top: 20svh;
        }
    }

    @media screen and (max-height: 830px) {
        .schedule_head_3 {
            width: calc((202/1770)*550vw);
        }
    }

    .schedule_head_4 {
        width: 100%;
        min-width: 95vw;
        content: url(../images/uriba2025_schedule_header4_sp.png);
        position: relative;
        top: -2svh;
        margin-bottom: -2svh;
    }

    @media screen and (min-width: 768px) {

        .schedule_head_4 {
            width: 80%;
            min-width: 80%;
            content: url(../images/uriba2025_schedule_header4_pc.png);
            position: relative;
            margin: 0 auto;
            padding-top: 18svh;
            margin-bottom: 0svh;
        }

    }

    @media screen and (max-height: 830px) {
        .schedule_head_4 {
            width: calc((202/1770)*550vw);
        }
    }

    & h2 {
        color: #E4006E;
        font-size: 1rem;
        text-align: center;
        margin: 3vh auto;
    }

    & h3 {
        font-size: 1rem;
        text-align: center;
        margin: 1vh auto;
    }

    & p {
        color: black;
        text-align: center;
        font-size: 4vw;
        margin: 2vh 5vw;
        letter-spacing: -0.05rem;
        line-height: 1.7;
    }

    & p.small {
        color: black;
        text-align: left;
        font-size: 3vw;
        margin: 2vh 5vw;
        letter-spacing: -0.05rem;
        line-height: 1.7;
    }

    @media screen and (min-width: 768px) {

        & h2 {
            color: #E4006E;
            font-size: 1.2rem;
            text-align: center;
            margin: 3vh auto;
        }

        & h3 {
            font-size: 1.1rem;
            text-align: center;
            margin: 1vh auto;
        }

        & p {
            color: black;
            text-align: center;
            font-size: 1rem;
            margin: 0 auto;
            letter-spacing: -0.05rem;
            line-height: 1.7;
        }

        & p.small {
            color: black;
            text-align: left;
            font-size: 0.9rem;
            margin: 0 auto;
            letter-spacing: -0.05rem;
            line-height: 1.7;
        }
    }

    & span.pink {
        color: #E4006E;
        font-weight: bold;
    }

    .schedule_greetings {
        width: 90vw;
        height: calc((828 / 718) * 90vw);
        background-image: url(../images/uriba2025_schedule_greeting_sp.png);
        background-size: contain;
        background-repeat: no-repeat;
        position: relative;
        top: -3svh;

        .txt {
            position: absolute;
            bottom: 5svh;
            right: -3vw;
            text-align: right;
        }

    }

    @media screen and (min-width: 768px) {

        .schedule_greetings {
            width: 100%;
            max-width: 1400px;
            height: calc((780/2039)*100vw);
            min-height: 550px;
            background-image: url(../images/uriba2025_schedule_greeting_pc.png);
            background-size: 105%;
            background-repeat: no-repeat;
            position: relative;
            margin: 0 auto;
            margin-top: 4%;

            & p {
                font-size: min(1.2rem, 20px);
            }

            .txt {
                position: absolute;
                bottom: 5svh;
                right: -3vw;
                text-align: right;
            }

        }

    }

    & p.sg {
        text-align: left;
        font-size: 4.5vw;
    }

    @media screen and (min-width: 768px) {

        & p.novelty {
            width: auto;
            min-width: 50%;
            height: calc((540/634)*45vw);
            padding-right: 0%;
            box-sizing: border-box;
            background-image: url(../images/uriba2025_schedule_novelty_sp.png);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: top center;
            margin: 0;
        }

        & p.notice {
            margin-top: 23%;
            margin-bottom: 22%;
        }

    }

    .shoplist_btn a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        background-color: #E63178;
        text-decoration: none;
        cursor: pointer;
        font-size: 1.1rem;
        font-weight: bold;
        letter-spacing: -0.1vw;
        width: 55vw;
        height: 5svh;
        border-radius: 2.5svh;
        box-shadow: 4px 4px 0px 0px rgba(155, 30, 134, 1);
        z-index: 100;
    }

    @media screen and (min-width: 768px) {

        .shoplist_btn a {
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            background-color: #E63178;
            text-decoration: none;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: bold;
            letter-spacing: -0.1vw;
            width: 20vw;
            height: 50px;
            border-radius: 25px;
            box-shadow: 4px 4px 0px 0px rgba(155, 30, 134, 1);
            position: absolute;
            left: 70%;
            bottom:6svh;
        }
    }

}

.about {

    & h2 {
        color: black;
        font-size: 1.6rem;
        text-align: center;
        margin: 0 auto;
        padding-top: 5svh;
    }

    & h3 {
        color: #E4006E;
        text-align: center;
        background-image: url(../images/uriba2025_about_h3bg_sp.png);
        background-size: cover;
        width: 90vw;
        height: calc((244 / 730) * 90vw);
        padding-top: 6.4svh;
        margin: 0 auto;
        font-size: 1.1rem;

    }

    & p {
        color: black;
        font-size: 1rem;
        text-align: center;
        margin: 3vh auto;
        letter-spacing: normal;
        line-height: 1.5;
    }

    & p.forshop {
        color: black;
        text-align: left;
        font-size: 4vw;
        margin: 2vh auto;
        letter-spacing: -0.05rem;
        line-height: 1.7;
    }

    @media screen and (min-width: 768px) {
        & h2 {
            color: black;
            font-size: 1.rem;
            text-align: center;
            margin: 0 auto;
            padding-top: 2svh;
        }

        & h3 {
            text-align: center;
            background-image: none;
            height: auto;
            width: 100%;
            margin: 3svh auto;
            padding-top: 0;
            font-size: 1.1rem;

        }

        & p {
            color: black;
            font-size: 1.2rem;
            margin: 1vh auto;
            letter-spacing: normal;
            line-height: 1.5;
        }

        & p.forshop {
            color: black;
            text-align: left;
            font-size: 4vw;
            margin: 2vh auto;
            letter-spacing: -0.05rem;
            line-height: 1.7;
        }
    }

    & span.pink {
        color: #E4006E;
        font-weight: bold;
    }

    .about_top1 {
        background-image: url(../images/uriba2025_about_bg1-head_sp.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
        height: 23svh;
        z-index: 9;
    }

    .about_top2 {
        background-color: white;
        background-image: url(../images/uriba2025_schedule_bg2-head_sp.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
        height: calc((215 / 800) * 100vw);
        z-index: 10;
    }

    .about_top3 {
        background: #efbcd6;
        background-image: url(../images/uriba2025_about_bg2-head_sp.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100vw;
        height: calc((210 / 800) * 100vw);
        z-index: 11;
    }

    .about_int1 {
        width: 100vw;
        background-color: white;
        padding: 0 3vw;
        padding-bottom: 3svh;
        z-index: 9;
    }

    @media screen and (min-width: 768px) {

        .about_int1 {
            width: 100%;
            max-width: 1200px;
            background-color: transparent;
            padding: 0 3vw;
            padding-top: 15svh;
            z-index: 10;

            .art {
                width: 45%;
                height: calc((402/586)*24vw);
                box-sizing: border-box;
                padding: 0 2.5%;
                margin-top: 5svh;
                background-image: url(../images/uriba2025_about_art1_pc.png);
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
            }

            .txt {
                width: 55%;
                font-size: min(1.25rem, 22px);
                box-sizing: border-box;
                text-align: left;
            }

            & h2 {
                font-size: 2.3rem;
                text-align: left;

                .small {
                    font-size: 1.2rem;
                }
            }

        }

    }

    .about_int2 {
        width: 100vw;
        background-color: #efbcd6;
        padding: 0 3vw;
        z-index: 10;
        padding-bottom: 1svh;
    }

    @media screen and (min-width: 768px) {
        .about_int2 {
            width: 100%;
            max-width: 1400px;
            background-color: transparent;
            padding: 0 3vw;
            padding-top: 15svh;
            position: relative;
            z-index: 9;

            .art {
                width: 60vw;
                box-sizing: border-box;
                margin: 0 auto;
                margin-top: 4svh;
            }

            .art2 {
                position: absolute;
                top: 17svh;
                right: 3vw;
                width: 14vw;
            }

            .txt {
                width: 60%;
                box-sizing: border-box;
                text-align: left;
            }

            & h2 {
                font-size: 2.2rem;
                text-align: left;

                .small {
                    font-size: 1.2rem;
                }
            }

            & h3 {
                font-size: 2rem;
                text-align: center;
                line-height: 1.1;

                .small {
                    font-size: 1.4rem;
                }
            }

            & p {
                text-align: center;
                margin: 0 auto;
            }


        }
    }

    .about_int3 {
        width: 100vw;
        background-image: url(../images/uriba2025_about_bg2_sp.png);
        background-repeat: repeat-y;
        background-size: cover;
        padding: 0 3vw;
        z-index: 11;
        padding-bottom: 3svh;
    }

    @media screen and (min-width: 768px) {
        .about_int3 {
            width: 100vw;
            background-color: transparent;
            background-image: none;
            padding: 0 3vw;
            padding-top: 15svh;
            position: relative;
            z-index: 9;

            & h2 {
                font-size: 2.2rem;
                text-align: left;

                .small {
                    font-size: 1.2rem;
                }
            }

            & h3 {
                font-size: 2rem;
                text-align: center;
                line-height: 1.1;

                .small {
                    font-size: 1.4rem;
                }
            }

            & p {
                text-align: center;
                margin: 2svh auto;
            }

            & p.forshop {
                font-size: 1.2rem;
            }

        }
    }

    .art1 {
        width: 84vw;
        margin: 0 auto;
        position: relative;
        top: -3.5svh;
        padding-bottom: 3.5svh;
        margin-bottom: -3.5svh;
    }

    .comic {
        display: flex;
        overflow: scroll;
    }

    .comicarea {
        min-width: 200vw;
    }

    @media screen and (min-width: 768px) {
        .comic {
            display: flex;
        }

        .comicarea {
            min-width: 0px;
            width: 100vw;
            margin: 0 auto;
            overflow: hidden;
        }
    }

    .shoplist_btn a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        background-color: #E63178;
        text-decoration: none;
        cursor: pointer;
        font-size: 1.1rem;
        font-weight: bold;
        letter-spacing: -0.1vw;
        width: 70vw;
        height: 5svh;
        border-radius: 2.5svh;
        box-shadow: 4px 4px 0px 0px rgba(155, 30, 134, 1);
        margin: 5svh auto;
    }

    @media screen and (min-width: 768px) {
        .shoplist_btn a {
            width: 30vw;
        }
    }

    .footer_sp {

        padding-top: 10svh;
        padding-bottom: 6svh;

        .share {
            width: 55vw;
            margin: 4svh auto;
            display: flex;
            justify-content: space-around;

            & img {
                width: 7vw;
            }

        }

        & p {
            text-align: center;
            font-size: 0.6rem;
            margin: 0 auto;
            margin-top: 2svh;
            letter-spacing: normal;
        }

        & p.logo {
            width: 40vw;
        }

    }

    @media screen and (min-width: 768px) {
        .footer_sp {

            margin-top: 40svh;
            padding-bottom: 6svh;

            .share {
                width: 20vw;
                margin: 4svh auto;
                display: flex;
                justify-content: space-around;

                & img {
                    width: 3vw;
                }

            }

            & p {
                text-align: center;
                font-size: 0.6rem;
                margin: 0 auto;
                margin-top: 2svh;
                letter-spacing: normal;
            }

            & p.logo {
                width: 10vw;
            }

        }

    }

}


nav.globalnavi {
    width: 100vw;
    min-height: 100svh;
    background-color: white;
    z-index: 1000;
    position: fixed;
    left: 100vw;
    top: 0;
    transition: 0.3s;
    margin: 0;

    & ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        & li {
            width: 100%;
            text-align: center;
            padding: 2vh 0;
            border-bottom: 1px solid #ccc;

            & a {
                display: block;
                color: #333;
                text-decoration: none;
                font-size: 1.2rem;
            }
        }

        & li:first-child {
            background-image: url(../images/uriba2025_menu_header_sp.png);
            background-size: cover;
            background-repeat: no-repeat;
            width: 100vw;
            height: calc((159 / 800) * 100vw);
            font-size: 1.3em;
            color: white;
            line-height: 1.4;
            letter-spacing: -0.1rem;
            content: '';
            position: relative;

            .close {
                width: 10vw;
                /* 線の長さ */
                position: relative;
                /* 基準位置に指定 */
                top: 1.05svh;
                left: 87vw;
                font-size: 0.7rem;
                letter-spacing: normal;
                padding-top: 2.6svh;
            }

            .close::before,
            .close::after {
                content: "";
                /* 疑似要素に必須 */
                width: 100%;
                /* 幅いっぱいを指定 */
                height: 4px;
                /* 適度な太さを指定 */
                display: inline-block;
                /* 高さを持たせるためにinline-blockを指定 */
                background: white;
                /* 線の色を指定 */
                border-radius: 2px;
                /* 線の端を丸くしたいなら指定する */
                position: absolute;
                /* 相対位置に指定 */
                top: 0.2svh;
                /* 表示位置を上から0pxに指定 */
                left: 0;
                /* 表示位置を左から0pxに指定 */
            }

            .close::before {
                transform: rotate(45deg);
                /* 時計回りに45度回転させる */
            }

            .close::after {
                transform: rotate(-45deg);
                /* 反時計回りに45度回転させる */
            }

        }
    }

}

nav.active {
    left: 0vw;
    transition: 0.3s;
}

/* メニュー PC用 */

@media screen and (min-width: 768px) {

    nav.globalnavi {
        width: 30vw;
        min-height: 100svh;
        background-color: white;
        z-index: 1000;
        position: fixed;
        left: 100vw;
        top: 0;
        transition: 0.3s;
        margin: 0;

        & ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;

            & li {
                width: 100%;
                text-align: center;
                padding: 2vh 0;
                border-bottom: 1px solid #ccc;

                & a {
                    display: block;
                    color: #333;
                    text-decoration: none;
                    font-size: 1.2rem;
                }
            }

            & li:first-child {
                background-image: url(../images/uriba2025_menu_header_sp.png);
                background-size: cover;
                background-repeat: no-repeat;
                width: 30vw;
                height: calc((159 / 800) * 30vw);
                font-size: 1.3em;
                color: white;
                line-height: 1.4;
                letter-spacing: -0.1rem;
                content: '';
                position: relative;

                .close {
                    width: 3vw;
                    /* 線の長さ */
                    position: relative;
                    /* 基準位置に指定 */
                    top: 1.8svh;
                    left: 26vw;
                    font-size: 0.7rem;
                    letter-spacing: normal;
                    padding-top: 2.6svh;
                    z-index: 1200;
                    cursor: pointer;
                }

                .close::before,
                .close::after {
                    content: "";
                    /* 疑似要素に必須 */
                    width: 100%;
                    /* 幅いっぱいを指定 */
                    height: 4px;
                    /* 適度な太さを指定 */
                    display: inline-block;
                    /* 高さを持たせるためにinline-blockを指定 */
                    background: white;
                    /* 線の色を指定 */
                    border-radius: 2px;
                    /* 線の端を丸くしたいなら指定する */
                    position: absolute;
                    /* 相対位置に指定 */
                    top: 0.2svh;
                    /* 表示位置を上から0pxに指定 */
                    left: 0;
                    /* 表示位置を左から0pxに指定 */
                }

                .close::before {
                    transform: rotate(45deg);
                    /* 時計回りに45度回転させる */
                }

                .close::after {
                    transform: rotate(-45deg);
                    /* 反時計回りに45度回転させる */
                }

            }
        }

    }

    nav.active {
        left: calc(100vw - 30vw);
    }

}