@charset "UTF-8";

/*==============================================================================================
●共通
==============================================================================================*/
* {
    box-sizing: border-box;
}

:root {
    --color-black-1: #111111;
    --color-black-2: #444444;

    --color-gray-1: #f2f2f2;
    --color-gray-2: #999999;

    --color-white-1: #ffffff;

    --color-red-1: #c1272d;

    --color-prime-white: #fdf7df;
    --color-prime-white2: #dcdcc8;
    --color-prime-white3: #bebe9b;
    --color-prime-orange: #ed760b;
    --color-prime-blue: #0080bc;

    --color-sub-purple: #684696;
    --color-sub-red: #ff1d25;
    --color-sub-orange: #e69621;
    --color-sub-pink: #e76d66;
    --color-sub-blue: #1da698;
    --color-sub-green: #369348;

    --width-pc: 1200px;
    --width-tb: 90%;
    --width-sp: 90%;

    --tbmargin: 100px;
    --pdg: 30px;
    --pdg-sm: 10px;
    --bradius: 30px;
    --bradius-sm: 15px;
}

body {
    position: relative;
    color: var(--color-black-1);
    background-color: var(--color-prime-orange);
    font-family: "Zen Maru Gothic", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

body.is-play-modal-open {
    overflow: hidden;
}

body.is-play-modal-open header {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        url("../img/bg-pattern.png"),
        url("../img/bg-pattern.png");
    background-repeat:
        repeat-y,
        repeat-y;
    background-size:
        auto,
        auto;
    background-position:
        left 30px top,
        right 30px top 248px;
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}

a:link,
a:visited,
a:hover,
a:focus-visible {
    color: var(--color-black-1);
}

/*/////////////////////////共通レイアウト///////////////////////*/
:root {
    --h1: 2.5rem;
    --h2: 2rem;
    --h3: 1.8rem;
    --h4: 1.5rem;
    --h5: 1.3rem;
    --h6: 1rem;
    --header-height: 85px;
}

html {
    scroll-behavior: smooth;
}

h1 {
    font-size: var(--h1);
}

h2 {
    font-size: var(--h2);
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

h5 {
    font-size: var(--h5);
}

h6 {
    font-size: var(--h6);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    letter-spacing: 0.1em;
}

p {
    margin: 0 0 1.5em;
    line-height: 1.7;
}

p:last-child {
    margin: 0;
}

ol li {
    list-style: decimal;
}

ul li {
    list-style: disc;
}

nav ul li {
    list-style: none;
}

.txt_sml {
    font-size: 0.8em;
}

.txt_big {
    font-size: 1.2em;
}

.txt_bld {
    font-weight: bold;
    display: inline-block;
    margin-bottom: 0.5em;
}

.txt_ul {
    background:
        linear-gradient(var(--color-red-1), var(--color-red-1)) 0 calc(100% - 3px) / 0% 3px no-repeat;
    padding-bottom: 7px;
}

.txt_center {
    text-align: center;
}

u {
    text-decoration-line: underline;
    text-decoration-color: var(--color-red-1);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/*=========================
ページタグ設定
=========================*/
.pagesBaceContent {
    background: var(--color-white-1);
}

.pagesBaceContent a:link,
.pagesBaceContent a:visited {
    color: var(--color-red-1);
}

.pagesBaceContent a:hover {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 5px;
}

.pagesBaceContent :is(h1, h2, h3, h4, h5, h6) {
    line-height: 1.6em;
    margin: 2em 0;
    font-weight: 500;
}

.pagesBaceContent {
    --scale: 0.6;
}

.pagesBaceContent h1 {
    font-size: calc(var(--h1) * var(--scale));
}

.pagesBaceContent h2 {
    font-size: calc(var(--h2) * var(--scale));
}

.pagesBaceContent h3 {
    font-size: calc(var(--h3) * var(--scale));
}

.pagesBaceContent h4 {
    font-size: calc(var(--h4) * var(--scale));
}

.pagesBaceContent h5 {
    font-size: calc(var(--h5) * var(--scale));
}

.pagesBaceContent h6 {
    font-size: calc(var(--h6) * var(--scale));
}

.pagesBaceContent :is(p, ul, ol) {
    margin: 1em 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.pagesBaceContent :is(em, i) {
    font-style: italic;
}

.pagesBaceContent ul li,
.accordion-body-inner ul li {
    margin: 0.8em 0;
    list-style-position: outside;
    margin-left: 20px;
}

.pagesBaceContent ol li,
.accordion-body-inner ol li {
    margin: 0.8em 0;
    list-style-position: outside;
    margin-left: 20px;
}

.pagesBaceContent hr {
    width: 100%;
    height: 1px;
    border-top: 1px solid var(--color-gray-2);
    margin: 60px 0;
}

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

.pagesBaceContent table {
    width: 100%;
    border-collapse: collapse;
}

.pagesBaceContent :is(th, td) {
    border: 1px solid var(--color-gray-3);
    padding: 8px;
    text-align: left;
}

.pagesBaceContent thead {
    background-color: var(--color-gray-1);
}


/*=========================
ボタン
=========================*/
.button,
.button2 {
    position: relative;
    border-radius: 9999px;
    display: inline-block;
    text-align: center;
    letter-spacing: 0.1em;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.button {
    max-width: 300px;
    font-size: 24px;
    line-height: 24px;
    padding: 15px 30px;
    background-color: var(--color-prime-orange);
    box-shadow: 3px 3px rgba(0, 0, 0, 0.3);
}

.button2 {
    font-size: 11px;
    line-height: 11px;
    padding: 10px 30px;
    background-color: var(--color-prime-blue);
}

.button:link,
.button:visited,
.button2:link,
.button2:visited {
    color: var(--color-white-1);
}

.button:hover {
    background-color: var(--color-prime-orange);
    box-shadow: 1px 1px rgba(0, 0, 0, 0.3);
    transform: translate(2px, 2px);
}

.button2:hover {
    background-color: var(--color-prime-orange);
}

.button::after,
.button2::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: var(--color-prime-white);
    -webkit-mask: url("../img/arrow.svg") no-repeat center / contain;
    mask: url("../img/arrow.svg") no-repeat center / contain;
    transition: transform .3s ease;
}

.button::after {
    width: 16px;
    height: 16px;
}

.button2::after {
    width: 12px;
    height: 12px;
}


.button:hover::after,
.button2:hover::after {
    background-color: var(--color-prime-white);
    transform: translateY(-50%) translateX(4px);
}

.button-area {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 30px auto 0 auto;
}

/* テキストリンク専用 */
.link {
    transition: opacity 0.25s ease-out;
}

.link:hover {
    opacity: 0.7;
}






/*/////////////////////////Gsap用///////////////////////*/


/*/////////////////////////ヘッダー///////////////////////*/

header {
    --header-main-height: 60px;
    --header-wave-block: 60px;
    --header-wave-height: var(--header-wave-block);
    --header-wave-step: calc(var(--header-wave-block) + var(--header-wave-block));
    --header-wave-shadows: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    isolation: isolate;
    width: 100%;
    min-width: 0;
    background:
        linear-gradient(to bottom,
            var(--color-prime-orange) 0 var(--header-main-height),
            transparent var(--header-main-height));
}

header::before,
header::after {
    content: "";
    position: absolute;
    bottom: 0;
    z-index: 0;
    width: var(--header-wave-block);
    height: var(--header-wave-height);
    border-radius: 0 0 9999px 9999px;
    background: currentColor;
    box-shadow: var(--header-wave-shadows);
    pointer-events: none;
}

header::before {
    left: var(--header-wave-block);
    color: var(--color-prime-blue);
}

header::after {
    left: 0;
    color: var(--color-prime-orange);
}

header a:link,
header a:visited {
    color: var(--color-prime-white);
}

.header-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: var(--header-main-height) var(--header-wave-height);
    align-items: center;
    width: 100%;
    height: calc(var(--header-main-height) + var(--header-wave-height));
    margin: 0 auto;
    padding: 0 30px;
}

.logo {
    grid-column: 2;
    grid-row: 1;
    z-index: 3;
    display: block;
    width: 190px;
    justify-self: center;
}

.logo img {
    display: block;
    width: 100%;
    height: auto;
}

.global-nav {
    grid-column: 3;
    grid-row: 1;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
}

.global-nav ul {
    display: flex;
    align-items: center;
    gap: 24px;
}

.global-nav a {
    display: block;
    color: var(--color-prime-white);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.global-nav a:hover,
.global-nav a:focus-visible {
    opacity: 0.75;
}

.hamburger {
    display: none;
}

.hamburger:focus-visible {
    outline: 2px solid var(--color-prime-white);
    outline-offset: 2px;
}

@media screen and (max-width: 1000px) {
    header {
        --header-main-height: 56px;
        --header-wave-block: 57px;
    }

    .header-wrap {
        height: calc(var(--header-main-height) + var(--header-wave-height));
        padding: 0 16px;
    }

    .logo {
        width: 150px;
    }

    .hamburger {
        grid-column: 3;
        grid-row: 1;
        z-index: 5;
        display: flex;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        background: transparent;
        align-items: center;
        justify-content: center;
        justify-self: end;
        flex-direction: column;
        gap: 5px;
    }

    .hamburger span {
        display: block;
        width: 22px;
        height: 3px;
        border-radius: 9999px;
        background: var(--color-prime-white);
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    header.is-menu-open .hamburger span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    header.is-menu-open .hamburger span:nth-child(2) {
        opacity: 0;
    }

    header.is-menu-open .hamburger span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .global-nav {
        position: fixed;
        top: calc(var(--header-main-height) + var(--header-wave-height) + 8px);
        left: 16px;
        right: 16px;
        z-index: 4;
        display: block;
        height: auto;
        margin: 0;
        padding: 14px 16px;
        border-radius: 8px;
        background: var(--color-prime-white);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.14);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    }

    header.is-menu-open .global-nav {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .global-nav ul {
        display: block;
    }

    .global-nav li+li {
        border-top: 1px solid rgba(237, 118, 11, 0.25);
    }

    .global-nav a {
        padding: 12px 4px;
        color: var(--color-prime-orange);
        font-size: 14px;
        line-height: 1.4;
    }

    .global-nav a:link,
    .global-nav a:visited {
        color: var(--color-prime-orange);
    }
}




/*/////////////////////////フッター///////////////////////*/
.footer {
    --footer-wave-block: 60px;
    --footer-wave-height: var(--footer-wave-block);
    --footer-wave-step: calc(var(--footer-wave-block) + var(--footer-wave-block));
    --footer-wave-shadows: none;
    position: relative;
    isolation: isolate;
    background: var(--color-prime-white);
    color: var(--color-black-1);
    margin-top: 200px;
    padding: 80px 0;
    font-size: 12px;
}

.footer::before,
.footer::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--footer-wave-height));
    z-index: 0;
    width: var(--footer-wave-block);
    height: var(--footer-wave-height);
    border-radius: 9999px 9999px 0 0;
    background: currentColor;
    box-shadow: var(--footer-wave-shadows);
    pointer-events: none;
}

.footer::before {
    left: var(--footer-wave-block);
    color: var(--color-prime-white);
}

.footer::after {
    left: 0;
    color: var(--color-prime-blue);
}

.footer a:link,
.footer a:visited {
    color: var(--color-black-1);
}

.footer a:hover {
    opacity: 0.7;
}

.footer-wrap {
    position: relative;
    z-index: 1;
    width: min(var(--width-pc), calc(100% - 60px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: end;
    gap: 40px;
}

.footer-left {
    display: grid;
    justify-items: start;
    text-align: left;
    gap: 5px;
}

.footer-logo-main {
    width: min(160px, 36vw);
    height: auto;
}

.footer-logo-kids {
    width: min(110px, 30vw);
    height: auto;
    margin: 80px 0 10px 0;
}

.footer-text {
    margin: 0;
    line-height: 1.6;
    font-weight: 600;
}

.footer-right {
    display: grid;
    justify-items: start;
    align-content: end;
    text-align: left;
    gap: 22px;
}

.footer-logo-sub {
    width: min(110px, 24vw);
    height: auto;
}

.footer-nav {
    display: grid;
    gap: 14px;
    text-align: left;
    font-weight: 600;
}

.footer-copy {
    margin: 0;
    font-weight: 600;
}

@media screen and (max-width: 489px) {
    .footer {
        margin-top: 140px;
        padding: 150px 0 70px;
    }

    .footer-wrap {
        width: var(--width-sp);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 70px;
    }

    .footer-left,
    .footer-right {
        width: 100%;
        max-width: 420px;
        justify-items: center;
        text-align: center;
    }

    .footer-right {
        align-content: start;
    }

    .footer-logo-main {
        width: min(150px, 46vw);
    }

    .footer-logo-kids {
        width: min(116px, 38vw);
        margin-top: 150px;
    }

    .footer-logo-sub {
        width: min(96px, 30vw);
    }

    .footer-nav {
        text-align: center;
        gap: 10px;
        width: 100%;
    }

    .footer-text,
    .footer-nav a {
        display: block;
        width: 100%;
        text-align: center;
    }

    .footer-copy,
    .footer-logo-sub {
        margin-inline: auto;
        text-align: center;
    }
}



/*/////////////////////////TOPページ///////////////////////*/
main {
    position: relative;
    z-index: 0;
    padding-top: 0;
}

.card {
    box-shadow: 0 5px rgba(0, 0, 0, 0.3);
}

.card2 {
    box-shadow: 5px 5px rgba(0, 0, 0, 0.3);
}

/* ===== FV ===== */
.fv {
    position: sticky;
    top: 0;
    transform: translateY(var(--fv-release-offset, 0px));
    will-change: transform;
    z-index: 0;
    overflow: hidden;
    margin: 0 auto;
    background-size: cover;
    background-position: center center;
    background-color: var(--color-prime-white);
    border-radius: 0 0 80px 80px;
}

.fv-top {
    background-image: url(../img/3.jpg);
}

.fv-play {
    background-image: url(../img/8.jpg);
}

.fv-item {
    background-image: url(../img/2.jpg);
}

.fv-contact {
    background-image: url(../img/7.jpg);
}

.fv-wrap,
.fv-wrap2 {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    padding: 120px 24px 230px;
}

.fv-logo {
    --fv-logo-scale: 1;
    --fv-logo-base-width: 272px;
    --fv-logo-part-height-base: 84px;
    --fv-logo-gap-base: 10px;
    --fv-logo-catch-width-base: 260px;
    --fv-logo-powered-width-base: 66px;
    --fv-logo-main-margin-top-base: 6px;
    --fv-logo-powered-margin-top-base: 16px;
    --fv-logo-optical-offset-x-base: 2px;
    --fv-logo-part-height: calc(var(--fv-logo-part-height-base) * var(--fv-logo-scale));
    --fv-logo-gap: calc(var(--fv-logo-gap-base) * var(--fv-logo-scale));
    --fv-logo-catch-width: calc(var(--fv-logo-catch-width-base) * var(--fv-logo-scale));
    --fv-logo-powered-width: calc(var(--fv-logo-powered-width-base) * var(--fv-logo-scale));
    --fv-logo-main-margin-top: calc(var(--fv-logo-main-margin-top-base) * var(--fv-logo-scale));
    --fv-logo-powered-margin-top: calc(var(--fv-logo-powered-margin-top-base) * var(--fv-logo-scale));
    --fv-logo-optical-offset-x: calc(var(--fv-logo-optical-offset-x-base) * var(--fv-logo-scale));
    --fv-logo-shadow: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
    display: grid;
    justify-items: center;
    gap: var(--fv-logo-gap);
    width: max-content;
    margin-top: calc(var(--header-height, 0px) * 0.5);
}

.fv-logo img {
    display: block;
    height: auto;
    -webkit-filter: var(--fv-logo-shadow);
    filter: var(--fv-logo-shadow);
}

.fv-logo__catch {
    width: var(--fv-logo-catch-width);
}

.fv-logo__main {
    position: relative;
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: end;
    justify-content: center;
    gap: 0;
    margin-top: var(--fv-logo-main-margin-top);
    left: var(--fv-logo-optical-offset-x);
}

.fv-logo__ru {
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    gap: calc(var(--fv-logo-part-height) * 0.04);
}

.fv-logo__ra {
    display: grid;
    justify-items: center;
    align-items: end;
    align-content: end;
    gap: calc(var(--fv-logo-part-height) * 0.06);
}

.fv-logo__ru,
.fv-logo__piece--ku,
.fv-logo__ra {
    height: var(--fv-logo-part-height);
}

.fv-logo__ru .fv-logo__piece {
    width: auto;
    height: 100%;
}

.fv-logo .fv-logo__piece--ku {
    width: auto;
    height: var(--fv-logo-part-height);
}

.fv-logo .fv-logo__piece--ra1 {
    width: auto;
    height: calc(var(--fv-logo-part-height) * 0.356);
}

.fv-logo .fv-logo__piece--ra2 {
    width: auto;
    height: calc(var(--fv-logo-part-height) * 0.584);
}

.fv-logo__poweredby {
    position: relative;
    justify-self: center;
    width: var(--fv-logo-powered-width);
    margin-top: var(--fv-logo-powered-margin-top);
    left: var(--fv-logo-optical-offset-x);
}




/* ===== ABOUT ===== */

.pageBody {
    position: relative;
    z-index: 1;
    margin: -130px auto 0;
    width: min(var(--width-pc), calc(100% - 60px));
    display: grid;
    grid-template-columns: 1fr;
    gap: 100px;
}

.about,
.item,
.items,
.contact {
    background-color: var(--color-prime-white);
    border-radius: var(--bradius);
    display: grid;
    grid-template-columns: auto;
    justify-items: center;
}

.about,
.item {
    padding: 100px 10px 30px 10px;
}

.about {
    padding: 100px var(--pdg-sm) 30px var(--pdg-sm);
    gap: clamp(50px, 12vw, 200px);
}

.maintitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vw, 24px);
    margin: 0;
    text-align: center;
}

.maintitle::before,
.maintitle::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.maintitle::before {
    width: clamp(40px, 8vw, 90px);
    aspect-ratio: 70 / 22;
    background-image: url("../img/title-l.png");
}

.maintitle::after {
    width: clamp(40px, 8vw, 90px);
    aspect-ratio: 70 / 22;
    background-image: url("../img/title-r.png");
}

.maintitle span {
    display: inline-block;
    font-size: clamp(16px, 7vw, 36px);
    font-weight: 700;
    line-height: 1.2;
}

.about1 {
    --about1-before-opacity: 1;
    --about1-after-opacity: 1;
    --about1-before-y: 0px;
    --about1-after-y: 0px;
    position: relative;
    background-color: var(--color-prime-orange);
    border-radius: var(--bradius);
    justify-content: center;
    color: var(--color-prime-white);
    font-size: clamp(16px, 3vw, 20px);
    margin-top: 200px;
    width: 100%;
}

.about1:before,
.about1:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    background-size: cover;
}

.about1:before {
    aspect-ratio: 252/230;
    background-image: url('../img/about1-img1.png');
    opacity: var(--about1-before-opacity);
    transform: translateY(var(--about1-before-y));
}

.about1:after {
    aspect-ratio: 241/246;
    background-image: url('../img/about1-img2.png');
    opacity: var(--about1-after-opacity);
    transform: translateY(var(--about1-after-y));
}

.about1 p {
    text-align: center;
    line-height: 2em;
}

.about2 {
    font-size: clamp(26px, 4vw, 36px);
    color: var(--color-prime-blue);
}

.about3 {
    max-width: 850px;
    display: grid;
    gap: 50px;
}

.about3-1 img {
    width: 100%;
    height: auto;
}

.about3-1-txt {
    margin-top: 100px;
}

.about3-1-txt p {
    text-align: center;
}

.about3-2 {
    border: 3px solid var(--color-prime-orange);
    border-radius: var(--bradius-sm);
    position: relative;
    padding: 60px 30px 30px 30px;
    font-size: 0.8em;
}

.about3-2:before {
    position: absolute;
    content: '';
    --title-w: 80%;
    width: var(--title-w);
    height: auto;
    aspect-ratio: 500 / 84;
    background-image: url(../img/about3-2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.about3-2-1,
.about3-2-3 {
    color: var(--color-prime-white);
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    gap: 1em;
    padding: 30px 15px;
    border-radius: 3px;
    margin: 30px auto;
}

.about3-2-1 {
    background-color: var(--color-prime-blue);
}

.about3-2-3 {
    background-color: var(--color-prime-orange);
    margin-bottom: 0px;
}

.about3-2-2 {
    --arrow-w: 30px;
    width: var(--arrow-w);
    aspect-ratio: 50 / 46;
    margin: 0 auto;
    background-image: url('../img/arw-down-blue.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.play {
    background-color: var(--color-prime-blue);
    padding: 100px 30px;
    border-radius: var(--bradius);
    display: grid;
    grid-template-columns: auto;
    gap: clamp(50px, 12vw, 200px);
    justify-items: center;
}

.play_txt {
    font-size: 1.4em;
    color: var(--color-prime-white);
}

.play-mv {
    position: relative;
    width: min(100%, 920px);
    aspect-ratio: 16 / 9;
    border-radius: var(--bradius-sm);
    overflow: hidden;
    background: var(--color-black-1);
    border: 5px solid var(--color-prime-white);
}

.play-mv__video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.play-mv__button {
    position: absolute;
    inset: 0;
    margin: auto;
    width: clamp(64px, 8vw, 92px);
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.play-mv__fullscreen {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    width: clamp(40px, 5vw, 46px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.play-mv__close {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    width: clamp(40px, 5vw, 46px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.play-mv__fullscreen:hover,
.play-mv__fullscreen:focus-visible,
.play-mv__close:hover,
.play-mv__close:focus-visible {
    opacity: 1;
}

.play-mv__fullscreen-icon {
    width: 16px;
    height: 16px;
    background:
        linear-gradient(#fff, #fff) 0 0 / 7px 2px no-repeat,
        linear-gradient(#fff, #fff) 0 0 / 2px 7px no-repeat,
        linear-gradient(#fff, #fff) 100% 0 / 7px 2px no-repeat,
        linear-gradient(#fff, #fff) 100% 0 / 2px 7px no-repeat,
        linear-gradient(#fff, #fff) 0 100% / 7px 2px no-repeat,
        linear-gradient(#fff, #fff) 0 100% / 2px 7px no-repeat,
        linear-gradient(#fff, #fff) 100% 100% / 7px 2px no-repeat,
        linear-gradient(#fff, #fff) 100% 100% / 2px 7px no-repeat;
}

.play-mv__close-icon {
    position: relative;
    width: 18px;
    height: 18px;
}

.play-mv__close-icon::before,
.play-mv__close-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: 9999px;
    background: #fff;
}

.play-mv__close-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.play-mv__close-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.play-mv__icon {
    width: 0;
    height: 0;
    border-top: clamp(10px, 1.3vw, 14px) solid transparent;
    border-bottom: clamp(10px, 1.3vw, 14px) solid transparent;
    border-left: clamp(16px, 2vw, 22px) solid #fff;
    margin-left: 4px;
}

.play-mv.is-playing .play-mv__button {
    opacity: 0;
    pointer-events: none;
}

.play-mv:not(.is-playing):hover .play-mv__button,
.play-mv__button:focus-visible {
    opacity: 0.9;
}

.play-mv.is-modal-active {
    position: fixed;
    inset: 0;
    z-index: 10000;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: #000;
}

.play-mv.is-modal-active .play-mv__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.play-mv.is-modal-active .play-mv__button,
.play-mv.is-modal-active .play-mv__fullscreen {
    opacity: 0;
    pointer-events: none;
}

.play-mv.is-modal-active .play-mv__close {
    opacity: 0.95;
    pointer-events: auto;
}

.play2 {
    width: min(100%, 920px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 32px);
    align-items: end;
}

.play2 img {
    width: 100%;
    height: auto;
    display: block;
}

.play2-2 {
    transform: translateY(-30%);
}

.item {
    padding: 100px clamp(10px, 3vw, 30px) clamp(10px, 3vw, 30px) clamp(10px, 3vw, 30px);
    gap: 100px;
}

.item>.maintitle {
    color: var(--color-prime-orange);
}

.item-card {
    background-color: var(--color-prime-orange);
    width: 100%;
    padding: 30px var(--pdg-sm) var(--pdg-sm) var(--pdg-sm);
    border-radius: var(--bradius);
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    justify-items: center;
    text-align: center;
}

.item-subti {
    font-size: 1.5em;
    color: var(--color-prime-white);
}

.item-card1 {
    width: 100%;
    background-color: var(--color-prime-white);
    color: var(--color-prime-orange);
    border-radius: 20px;
    padding: 10px;
}

.item-card1-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.item-card1>div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
    justify-items: center;
    text-align: center;
    align-content: start;
    margin: 30px 0;
    padding: 20px 0;
}

.item-card1>div h6 {
    font-size: 1.2em;
}

.item-card1>div img {
    max-width: 250px;
}

.item-card1>div>div {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.item-card1>div>div>.item-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
    margin: 10px 0 0;
    padding: 0;
}

.item-card1>div>div>.item-links>li {
    list-style: none;
    margin: 0;
    font-size: 12px;
    text-align: center;
}

.item-card1>div>div>.item-links>li>a {
    color: var(--color-prime-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.item-card1>div>div>.item-links>li>a:hover {
    color: var(--color-prime-orange);
}

.item-card1>*:nth-child(2) {
    border-left: 5px solid var(--color-prime-white2);
}

/*/////////////////////////ページ///////////////////////*/
.fv-logo2 {
    display: grid;
    justify-items: center;
    width: max-content;
    margin-top: calc(var(--header-height, 0px) * 0.5);
}

.fv-logo2 img {
    max-width: 300px;
}

.howtosubmenu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: min(100%, var(--width-pc));
    margin: 30px auto 0;
    padding: 0;
}

.howtosubmenu li {
    list-style: none;
    margin: 0;
    flex: 1 1 220px;
    max-width: 280px;
}

@media screen and (max-width: 1000px) {
    .howtosubmenu li {
        flex: 0 0 calc((100% - 12px) / 2);
        max-width: none;
    }
}

@media screen and (max-width: 450px) {
    .howtosubmenu li {
        flex: 0 0 100%;
    }
}

.howtosubmenu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--color-prime-white);
    border: 5px solid var(--color-sub-blue);
    color: var(--color-sub-blue);
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
    transition: 0.2s ease;
}

.howtosubmenu li a:hover {
    background: var(--color-prime-blue);
    color: var(--color-prime-white);
}

.howtoplay {
    --howtoplay-gap: clamp(20px, 4vw, 50px);
    --howtoplay-subti-base: clamp(240px, 32vw, 400px);
    --howtoplay-subti-width: min(var(--howtoplay-subti-base), calc((100% - var(--howtoplay-gap)) / 2));
    display: flex;
    gap: var(--howtoplay-gap);
    position: relative;
}

.howtoplay[id] {
    scroll-margin-top: 136px;
}

.howtoplay_subti {
    flex: 0 1 var(--howtoplay-subti-width);
    width: var(--howtoplay-subti-width);
    min-width: 0;
}

.howtoplay_content,
.howtoplay_content2 {
    flex: 1 1 0;
    min-width: 0;
}

.howtoplay_subti_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 100px;
    padding: 30px;
    border-radius: var(--bradius);
    background: var(--color-prime-white);
    border: 5px solid var(--color-sub-blue);
    color: var(--color-sub-blue);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    line-height: 1.4;
}

.howtoplay_subti_title span {
    font-size: 0.8rem;
    font-weight: 500;
}

.howtoplay_content {
    background-color: var(--color-prime-white);
    border-radius: var(--bradius);
    border: 5px solid var(--color-prime-blue);
    padding: var(--pdg);
    padding-top: 200px;
}

.howtoplay_content_sec_deco {
    position: absolute;
    top: 96px;
    right: 50px;
    width: 96px;
    height: auto;
    z-index: 3;
    pointer-events: none;
}

.howtoplay_content_sec {
    background-color: var(--color-prime-blue);
    color: var(--color-prime-white);
    border-radius: 0 var(--bradius-sm) var(--bradius-sm) var(--bradius-sm);
    padding: 60px var(--pdg);
    margin-bottom: 60px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 50px;
}

.howtoplay_content_sec:last-child {
    margin-bottom: 0px;
}

.howtoplay_content_sec_title_wrap_flow {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    justify-self: stretch;
    width: 100%;
    gap: 50px;
}

.howtoplay_content_sec_title {
    position: absolute;
    left: 0;
    width: min(calc(var(--howtoplay-subti-width) + var(--howtoplay-gap) + var(--pdg) + 5px), calc(100% - 5px));
    max-width: calc(100% - 5px);
    box-sizing: border-box;
    transform: translateY(calc(-2 * var(--pdg)));
    background-color: var(--color-prime-blue);
    color: var(--color-prime-white);
    border-radius: var(--bradius-sm) 0 0 var(--bradius-sm);
    padding: 5px;
    z-index: 2;
}

.howtoplay_content_sec_title_wrap {
    display: flex;
    align-items: stretch;
    gap: 0.6em;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.howtoplay_content_sec_title_num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex: 0 0 48px;
    align-self: stretch;
    border-radius: 10px;
    background-color: var(--color-prime-white);
    color: var(--color-prime-orange);
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1;
}

.howtoplay_content_sec_title_text {
    display: block;
    flex: 0 1 auto;
    width: clamp(100px, 35vw, 340px);
    max-width: calc(100% - 48px - 0.6em);
    min-width: 0;
    padding: 10px 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

ol.howtoplay_ol,
ul.howtoplay_ul {
    display: grid;
    gap: 50px;
    width: 100%;
    justify-self: stretch;
}

.howtoplay_ol li,
.howtoplay_ul li {
    display: list-item;
    text-align: left;
}

.howtoplay_ol li {
    --howtoplay-ol-indent: 1.6em;
    list-style: decimal inside;
    padding-left: var(--howtoplay-ol-indent);
    text-indent: calc(-1 * var(--howtoplay-ol-indent));
}

.howtoplay_ul li {
    --howtoplay-ul-indent: 1em;
    list-style: none;
    position: relative;
    padding-left: var(--howtoplay-ul-indent);
}

.howtoplay_ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
}

.howtoplay_ol li p,
.howtoplay_ul li p {
    display: inline;
    margin: 0;
}

.howtoplay_ol li>*+*,
.howtoplay_ul li>*+* {
    margin-top: 50px;
}

.howtoplay_ol li img {
    display: block;
    margin-inline: auto;
    position: relative;
    left: calc(var(--howtoplay-ol-indent) / -2);
}

.howtoplay_ul li img {
    display: block;
    margin-inline: auto;
    position: relative;
    left: calc(var(--howtoplay-ul-indent) / -2);
}

@media screen and (max-width: 1000px) {
    .howtoplay[id] {
        scroll-margin-top: 129px;
    }

    .howtoplay {
        --howtoplay-gap: 24px;
        --howtoplay-subti-width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .howtoplay_subti,
    .howtoplay_content {
        width: 100%;
    }

    .howtoplay_content {
        position: relative;
        padding: calc(var(--pdg) / 2);
        padding-top: 200px;
    }

    .howtoplay_content_sec_deco {
        top: 90px;
        right: 30px;
        width: 96px;
    }

    .howtoplay_content_sec {
        border-radius: var(--bradius-sm);
    }

    .howtoplay_content_sec_title {
        position: static;
        left: auto;
        width: 100%;
        max-width: 100%;
        transform: none;
        border-radius: var(--bradius-sm);
        margin-bottom: var(--pdg-sm);
        z-index: auto;
    }

    .howtoplay_content_sec_title_text {
        flex: 1 1 auto;
        width: auto;
        max-width: none;
    }
}

.howtoplay_content_sec2 {
    padding-left: 0px;
    padding-right: 0px;
}

.flows_ti {
    font-size: 1.2em;
    padding-left: 10px;
}

@media screen and (max-width: 1000px) {
    .flows_ti {
        text-align: center;
    }
}

.howtoplay_content_sec_title_wrap_flow_left {
    width: 100%;
    justify-self: stretch;
    text-align: left;
    padding: 0 var(--pdg);
}

.howtoplay_content_sec_title_wrap_flow_subsec {
    width: 100%;
    justify-self: stretch;
}

.howtoplay_content_sec_title_wrap_flow_subsec_ti {
    --flow-subsec-overhang: 200px;
    border: 5px solid var(--color-prime-blue);
    border-radius: 10px 0 0 10px;
    background-color: var(--color-prime-white);
    color: var(--color-prime-blue);
    font-weight: 600;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    position: relative;
    left: calc(-1 * var(--flow-subsec-overhang));
    width: calc(100% + var(--flow-subsec-overhang));
}

.howtoplay_content_sec_title_wrap_flow_subsec_ti_num {
    border-right: 5px solid var(--color-prime-blue);
    border-radius: 10px 0 0 10px;
    background-color: var(--color-prime-white);
    color: var(--color-prime-blue);
    min-width: 48px;
    aspect-ratio: auto;
    display: inline-flex;
    align-self: stretch;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    color: var(--color-prime-orange);
    font-weight: 600;
    font-size: 1.3em;
}

.howtoplay_content_sec_title_wrap_flow_subsec_ti_txt {
    padding: 10px 0;
}

.howtoplay_content_sec_title_wrap_flow_subsec_main {
    border: 5px solid var(--color-prime-blue);
    border-top: none;
    background-color: var(--color-prime-white);
    color: var(--color-prime-blue);
    padding: 60px var(--pdg);
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.howtoplay_content_sec_title_wrap_flow_next {
    width: 100%;
    height: 80px;
    background-image: url("../img/howto_next.png");
    background-repeat: no-repeat;
    background-position: center center;
}

@media screen and (max-width: 1000px) {
    .howtoplay_content_sec_title_wrap_flow_subsec_ti {
        --flow-subsec-overhang: 0px;
    }

    .howtoplay_content_sec_title_wrap_flow_subsec_main {
        padding: 60px var(--pdg-sm);
    }
}

.howtoplay_content_sec_title_wrap_flow_subsec_main_etc {
    border-radius: var(--bradius-sm);
    border: 2px dashed var(--color-prime-blue);
    background-color: var(--color-prime-white);
    color: var(--color-prime-blue);
    padding: 50px var(--pdg-sm);
}

.howtoplay_content_sec_title_wrap_flow_subsec_main_etc h6 {
    text-align: center;
    margin-bottom: 50px;
}

.katsu {
    display: block;
    text-align: center;
}

.howtoplay_ul {
    margin-bottom: 30px;
}

.howtoplay a:link,
.howtoplay a:visited {
    color: var(--color-prime-orange);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.howtoplay_content_sec_title_wrap_flow_next2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.howtoplay_content_sec_title_wrap_flow_next2 span {
    border-radius: 5px;
    background-color: var(--color-prime-white);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    aspect-ratio: 1;
    color: var(--color-sub-orange);
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1em;
}


.howtoplay_content2 {
    background-color: var(--color-prime-white);
    border-radius: var(--bradius);
    border: 5px solid var(--color-prime-blue);
    padding: var(--pdg);
    display: grid;
    justify-items: center;
    gap: 50px;
    color: var(--color-prime-blue);
}

.howtoplay_rp_table {
    width: 100%;
    color: var(--color-prime-blue);
    font-size: 0.95rem;
}

.howtoplay_rp_table_head,
.howtoplay_rp_table_row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.45fr) minmax(0, 0.7fr) minmax(0, 3.05fr);
}

.howtoplay_rp_table_head {
    margin-bottom: 20px;
    padding: 0 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
}

.howtoplay_rp_table_head span {
    text-align: center;
}

.howtoplay_rp_table_row {
    overflow: hidden;
    border: 3px solid var(--color-prime-blue);
    border-radius: 15px;
    background-color: var(--color-prime-white);
}

.howtoplay_rp_table_row+.howtoplay_rp_table_row {
    margin-top: 20px;
}

.howtoplay_rp_table_row>div {
    padding: 15px;
    line-height: 1.8;
    display: flex;
    align-items: center;
    min-width: 0;
}

.howtoplay_rp_table_row>div+div {
    border-left: 3px solid var(--color-prime-blue);
}

.howtoplay_rp_table_action {
    justify-content: center;
    text-align: center;
    font-size: clamp(0.7rem, 1.2vw, 0.8rem);
    font-weight: 600;
    background-color: var(--color-prime-blue);
    color: var(--color-prime-white);
}

.howtoplay_rp_table_timing,
.howtoplay_rp_table_desc {
    text-align: left;
    font-size: 0.9em;
}

.howtoplay_rp_table_cost {
    justify-content: center;
    text-align: center;
    font-size: clamp(0.9rem, 1.4vw, 1rem);
    font-weight: 600;
}

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

    .howtoplay_rp_table_head {
        display: none;
    }

    .howtoplay_rp_table_row {
        grid-template-columns: 1fr;
        border-radius: 15px;
    }

    .howtoplay_rp_table_row>div {
        padding: 10px var(--pdg-sm);
    }

    .howtoplay_rp_table_row>div+div {
        border-left: none;
        border-top: 3px solid var(--color-prime-blue);
    }

    .howtoplay_rp_table_action,
    .howtoplay_rp_table_timing,
    .howtoplay_rp_table_cost,
    .howtoplay_rp_table_desc {
        justify-content: flex-start;
        text-align: left;
        font-size: 0.92rem;
    }

    .howtoplay_rp_table_cost {
        gap: 0.25em;
    }

    .howtoplay_rp_table_cost::before {
        content: "必要RP：";
    }
}

.howtoplay_content2_blue {
    background-color: var(--color-prime-blue);
    color: var(--color-prime-white);
    border: 5px solid var(--color-prime-white);
    padding-top: 60px;
    padding-bottom: 60px;
}

.howtoplay_end {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.howtoplay_end_sec {
    width: 100%;
    background-color: var(--color-prime-white);
    color: var(--color-prime-blue);
    border-radius: var(--bradius-sm);
    position: relative;
    padding: var(--pdg);
}

.howtoplay_end_sec span {
    width: 40px;
    height: auto;
    aspect-ratio: 1;
    border: 2px solid var(--color-prime-white);
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-prime-blue);
    color: var(--color-prime-white);
    position: absolute;
    top: -20px;
    left: -20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.howtoplay_end_sec img {
    display: block;
    margin-inline: auto;
}

.items {
    padding: 60px var(--pdg) var(--pdg) var(--pdg);
}

.items[id],
.item_card_wrap[id] {
    scroll-margin-top: calc(var(--header-height) + 24px);
}

.item_title,
.item_title2 {
    font-size: 1.8em;
    color: var(--color-prime-orange);
    align-items: center;
    margin-bottom: 60px;
}

.item_title {
    display: inline-flex;
}

.item_title2 {
    display: flex;
    justify-content: center;
    text-align: center;
}

.item_title span,
.item_title2 span {
    font-size: 0.5em;
    display: inline-block;
}

.item_txt a:link,
.item_txt a:visited {
    color: var(--color-prime-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.item_merch_submenu {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 50px 0 0;
    overflow: hidden;
}

.item_merch_submenu_line {
    display: block;
    flex: 1 1 30px;
    min-width: 30px;
    height: 4px;
    border-radius: 9999px;
    background-color: var(--color-prime-white2);
    width: 100%;
}

.item_merch_submenu_links {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(6, max-content);
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.item_merch_submenu_links li {
    list-style: none;
    margin: 0;
    display: flex;
    justify-content: center;
}

.item_merch_submenu_links li a:link,
.item_merch_submenu_links li a:visited {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 34px;
    padding: 0 20px;
    border-radius: 9999px;
    color: var(--color-prime-white);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.item_merch_submenu_links li:nth-child(1) a {
    background-color: var(--color-sub-purple);
}

.item_merch_submenu_links li:nth-child(2) a {
    background-color: var(--color-sub-red);
    min-width: 42px;
    padding: 0;
}

.item_merch_submenu_links li:nth-child(3) a {
    background-color: var(--color-sub-orange);
    min-width: 42px;
    padding: 0;
}

.item_merch_submenu_links li:nth-child(4) a {
    background-color: var(--color-sub-pink);
}

.item_merch_submenu_links li:nth-child(5) a {
    background-color: var(--color-sub-blue);
}

.item_merch_submenu_links li:nth-child(6) a {
    background-color: var(--color-sub-green);
}

.item_merch_submenu--chip .item_merch_submenu_links li:nth-child(1) a {
    background-color: var(--color-sub-orange);
}

.item_merch_submenu--chip .item_merch_submenu_links li:nth-child(2) a {
    background-color: var(--color-prime-orange);
}

.item_merch_submenu--chip .item_merch_submenu_links li:nth-child(3) a {
    background-color: var(--color-sub-green);
}

.item_merch_submenu_links li a:hover {
    filter: brightness(1.06);
}

.item_merch_stage_wrap {
    position: relative;
    width: 100%;
    margin-top: 60px;
}

.item_merch_stage {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 0;
}

.item_merch_nav {
    position: absolute;
    top: 50%;
    width: 58px;
    height: 64px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 5;
}

.item_merch_nav::before,
.item_merch_nav::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-prime-white);
    -webkit-mask: url("../img/slide_arw.svg") center / contain no-repeat;
    mask: url("../img/slide_arw.svg") center / contain no-repeat;
}

.item_merch_nav::after {
    inset: 5px;
    background: var(--item-merch-accent, var(--color-sub-purple));
}

.item_merch_nav--prev {
    left: 0;
    transform: translate(-50%, -50%) rotate(180deg);
}

.item_merch_nav--next {
    right: 0;
    transform: translate(50%, -50%);
}

.item_merch_nav:focus-visible {
    outline: 3px solid rgba(17, 17, 17, 0.35);
    outline-offset: 3px;
}

.item_merch_stage .item_card_wrap {
    margin-top: 0;
    width: 100%;
}

.item_merch_panel {
    width: 100%;
}

.item_card_wrap {
    border-radius: var(--bradius-sm);
    background-color: var(--color-prime-white);
    padding: 60px;
    width: 100%;
    color: var(--color-black-1);
    margin-top: 60px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
}

.item_card_wrap_customer {
    border: 5px solid var(--color-prime-orange);
}

.item_card_wrap_acc {
    border: 5px solid var(--color-sub-purple);
}

.item_card_wrap_book {
    border: 5px solid var(--color-sub-red);
}

.item_card_wrap_cloth {
    border: 5px solid var(--color-sub-orange);
}

.item_card_wrap_nui {
    border: 5px solid var(--color-sub-pink);
}

.item_card_wrap_sta {
    border: 5px solid var(--color-sub-blue);
}

.item_card_wrap_toy {
    border: 5px solid var(--color-sub-green);
}

.color_acc {
    color: var(--color-sub-purple);
}

.color_book {
    color: var(--color-sub-red);
}

.color_cloth {
    color: var(--color-sub-orange);
}

.color_nui {
    color: var(--color-sub-pink);
}

.color_sta {
    color: var(--color-sub-blue);
}

.color_toy {
    color: var(--color-sub-green);
}

.item_card_wrap_cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    width: 100%;
}

@media screen and (min-width: 1200px) {
    .item_card_wrap_cards:has(> .item_card_wrap_cards_sec:nth-child(1):last-child) {
        grid-template-columns: minmax(0, 300px);
        justify-content: center;
    }

    .item_card_wrap_cards:has(> .item_card_wrap_cards_sec:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 300px));
        justify-content: center;
    }

    .item_card_wrap_cards:has(> .item_card_wrap_cards_sec:nth-child(3):last-child) {
        grid-template-columns: repeat(3, minmax(0, 300px));
        justify-content: center;
    }

    .item_card_wrap_cards:has(> .item_card_wrap_cards_sec:nth-child(4):last-child) {
        grid-template-columns: repeat(4, minmax(0, 300px));
        justify-content: center;
    }
}

.item_card_wrap_cards_sec {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    justify-items: center;
    gap: 20px;
    height: 100%;
    text-align: center;
}

.item_card_wrap_cards_sec :is(.item_card_detail, .item_card_detail2, .item_card_detail3) {
    width: 100%;
}

.item_card_detail,
.item_card_detail2 {
    border: 5px solid var(--color-prime-white3);
    border-radius: 8px;
    padding: 40px 10px 10px 10px;
    font-size: 1em;
    position: relative;
    height: 100%;
}

.item_card_detail p,
.item_card_detail2 p {
    margin: 0 0 10px;
}

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

.item_card_detail>div:last-child {
    margin-top: auto;
}

.item_card_detail2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.item_card_detail2>div {
    display: grid;
    place-items: center;
    text-align: center;
    padding: 10px 0;
}

.item_card_detail2>div+div {
    border-left: 3px solid var(--color-prime-white3);
}

.item_card_wrap_cards_sec_card,
.item_card_wrap_cards_sec_card2,
.item_card_wrap_cards_sec_chip1,
.item_card_wrap_cards_sec_chip2,
.item_card_wrap_cards_sec_chip3,
.item_card_wrap_cards_sec_chip4,
.item_card_wrap_cards_sec_leader,
.item_card_wrap_cards_sec_rp {
    display: block;
    transform-origin: center center;
    backface-visibility: hidden;
    will-change: transform;
}

.item_card_wrap_cards_sec_chip1,
.item_card_wrap_cards_sec_chip2,
.item_card_wrap_cards_sec_chip3,
.item_card_wrap_cards_sec_chip4,
.item_card_wrap_cards_sec_leader,
.item_card_wrap_cards_sec_rp {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    height: auto;
}

.item_card_wrap_cards_sec_card.is-card-flip-out,
.item_card_wrap_cards_sec_card2.is-card-flip-out,
.item_card_wrap_cards_sec_chip1.is-card-flip-out,
.item_card_wrap_cards_sec_chip2.is-card-flip-out,
.item_card_wrap_cards_sec_chip3.is-card-flip-out,
.item_card_wrap_cards_sec_chip4.is-card-flip-out,
.item_card_wrap_cards_sec_leader.is-card-flip-out,
.item_card_wrap_cards_sec_rp.is-card-flip-out {
    animation: item-card-flip-out 0.34s ease-in forwards;
}

.item_card_wrap_cards_sec_card.is-card-flip-in,
.item_card_wrap_cards_sec_card2.is-card-flip-in,
.item_card_wrap_cards_sec_chip1.is-card-flip-in,
.item_card_wrap_cards_sec_chip2.is-card-flip-in,
.item_card_wrap_cards_sec_chip3.is-card-flip-in,
.item_card_wrap_cards_sec_chip4.is-card-flip-in,
.item_card_wrap_cards_sec_leader.is-card-flip-in,
.item_card_wrap_cards_sec_rp.is-card-flip-in {
    animation: item-card-flip-in 0.34s ease-out forwards;
}

@keyframes item-card-flip-out {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(90deg);
    }
}

@keyframes item-card-flip-in {
    from {
        transform: rotateY(-90deg);
    }

    to {
        transform: rotateY(0deg);
    }
}

.item_card_detail span,
.item_card_detail2 span {
    color: var(--color-prime-white3);
    font-size: 0.5em;
}

.item_card_detail:before,
.item_card_detail2:before {
    content: '詳細';
    position: absolute;
    top: -6px;
    left: -6px;
    background-color: var(--color-prime-white3);
    border: 5px solid var(--color-prime-white);
    color: var(--color-prime-white);
    border-radius: 10px;
    padding: 5px 10px;
    font-size: 0.5em;
}

.item_card_detail3 {
    border: 5px solid var(--color-prime-white3);
    border-radius: 8px;
    padding: 10px;
    font-size: 1.2em;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item_card_wrap_money {
    border: 5px solid var(--color-sub-orange);
}

.item_card_wrap_leader {
    border: 5px solid var(--color-prime-orange);
}

.item_card_wrap_rp {
    border: 5px solid var(--color-sub-green);
}

.color_money {
    color: var(--color-sub-orange);
}

.color_leader {
    color: var(--color-prime-orange);
}

.color_rp {
    color: var(--color-sub-green);
}





/*==========================
　　　　　　フォーム
==========================*/
.contact {
    width: 100%;
    max-width: 800px;
    padding: var(--pdg);
    margin: 0 auto;
}

.section__inner {
    width: 100%;
}

.contact-form-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
}

.contact-form-wrap a:link,
.contact-form-wrap a:visited {
    color: var(--color-prime-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.contact-form-wrap>h2,
.contact-form-wrap>p {
    width: 100%;
    text-align: center;
}

.contact-form {
    display: grid;
    gap: 20px;
    margin-top: 8px;
}

.form-field {
    display: grid;
    gap: 20px;
    text-align: left;
}

.form-field2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    margin: 10px 0;
    line-height: 1.4;
    font-size: 12px;
}

.form-field2 input[type="checkbox"] {
    accent-color: var(--color-prime-orange);
    width: 20px;
    height: 20px;
    margin-right: 0;
    flex-shrink: 0;
}

.form-field span {
    color: var(--color-black-1);
    font-size: 14px;
    letter-spacing: 0.04em;
}

.form-field input,
.form-field textarea {
    width: 100%;
    border: 1px solid rgba(234, 234, 234, 0.18);
    border-radius: 5px;
    padding: 15px;
    background: var(--color-prime-white2);
    color: var(--color-black-1);
    font: inherit;
    outline: none;
}

.form-field textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 180px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--color-prime-white);
    border: 1px solid rgba(234, 234, 234, 0.18);
    background: var(--color-prime-orange);
    cursor: pointer;
}

.contact-link:hover {
    background: var(--color-prime-blue);
}

.form-status {
    display: none;
    margin: 30px 0;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.6;
}

.form-status.is-error {
    display: block;
    color: #b42318;
    background: rgba(180, 35, 24, 0.1);
    border: 2px solid rgba(180, 35, 24, 0.2);
}

.form-status.is-success {
    display: block;
    color: var(--color-prime-blue);
    background: rgba(184, 164, 106, 0.1);
    border: 2px solid rgba(184, 164, 106, 0.2);
}

.form-field em {
    font-style: normal;
    font-size: 10px;
    color: var(--color-prime-white);
    margin-right: 6px;
    padding: 3px 6px;
    background-color: var(--color-prime-orange);
    border-radius: 3px;
}

.field-error {
    display: block;
    min-height: 1.4em;
    margin-top: 6px;
    color: #b42318;
    font-size: 12px;
    line-height: 1.5;
}

.form-field input.is-error,
.form-field textarea.is-error {
    border: 2px solid var(--color-prime-orange);
}

.contact-link[disabled] {
    opacity: 0.6;
    pointer-events: none;
}

.turnstile-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}


/*プライバシーポリシー*/
.privacy-panel {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

.privacy-panel__overlay {
    position: absolute;
    inset: 0;
    background: rgba(20, 24, 30, 0.35);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.privacy-panel__body {
    position: absolute;
    top: 0;
    right: 0;
    width: min(680px, 100%);
    height: 100%;
    background: var(--color-prime-white);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.45s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.privacy-panel__inner {
    padding: 80px 40px 48px;
    font-size: 14px;
}

.privacy-panel__eyebrow {
    margin: 0 0 10px;
    font-size: 0.9em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.6;
}

.privacy-panel__inner a:link,
.privacy-panel__inner a:visited {
    color: var(--color-prime-blue);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.privacy-panel__inner h2 {
    margin: 0 0 24px;
    font-size: 2.2em;
    line-height: 1.3;
}

.privacy-panel__inner h3 {
    margin: 28px 0 10px;
    font-size: 1.4em;
    line-height: 1.5;
}

.privacy-panel__inner h5 {
    margin: 28px 0 10px;
    line-height: 1.5;
    font-size: 1em;
}

.privacy-panel__inner p {
    margin: 0 0 14px;
    line-height: 2;
}


.privacy-panel__inner ul li {
    margin: 0.8em 0;
    list-style-position: outside;
    margin-left: 20px;
}

.privacy-panel__inner ol li {
    margin: 0.8em 0;
    list-style-position: outside;
    margin-left: 20px;
}

.privacy-panel__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.privacy-panel.is-open {
    pointer-events: auto;
}

.privacy-panel.is-open .privacy-panel__overlay {
    opacity: 1;
}

.privacy-panel.is-open .privacy-panel__body {
    transform: translateX(0);
}

body.is-privacy-open {
    overflow: hidden;
}

@media (max-width: 767px) {
    .privacy-panel__body {
        width: 100%;
    }

    .privacy-panel__inner {
        padding: 72px 20px 32px;
    }

    .privacy-panel__inner h2 {
        font-size: 24px;
    }

    .privacy-panel__inner h3 {
        font-size: 16px;
    }

    .privacy-panel__inner p {
        font-size: 13px;
        line-height: 1.9;
    }
}




/*==============================================================================================
●PCサイズ
==============================================================================================*/

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

    .sp,
    .tb {
        display: none !important;
    }

    .pc {
        display: block !important;
    }

    /*/////////////////////////ヘッダー///////////////////////*/


    /*/////////////////////////共通レイアウト///////////////////////*/


    /*/////////////////////////TOPページ///////////////////////*/
    .fv-wrap {
        height: 800px;
    }

    .fv-logo {
        --fv-logo-part-height-base: 100px;
        --fv-logo-gap-base: 12px;
        --fv-logo-catch-width-base: 320px;
        --fv-logo-powered-width-base: 78px;
        --fv-logo-powered-margin-top-base: 18px;
    }

    .about1 {
        padding: var(--pdg) 25%;
    }

    .about1:before,
    .about1:after {
        width: 25%;
    }

    .about1:before {
        top: -150px;
        left: 30px;
    }

    .about1:after {
        top: -150px;
        right: 30px;
    }

    .about3 {
        grid-template-columns: 1fr 1fr;
    }

    /*/////////////////////////ページ///////////////////////*/
    .fv-wrap2 {
        height: 600px;
    }


}


/*==============================================================================================
●タブレットサイズ
==============================================================================================*/

@media screen and (min-width: 490px) and (max-width: 1199px) {

    .sp,
    .pc {
        display: none !important;
    }

    .tb {
        display: block !important;
    }

    /*/////////////////////////ヘッダー///////////////////////*/


    /*/////////////////////////フッター///////////////////////*/


    /*/////////////////////////TOPページ///////////////////////*/
    .fv-wrap {
        height: 800px;
    }

    .about1 {
        padding: 100px 30px 150px 30px;
        margin-bottom: 200px;
    }

    .about1:before,
    .about1:after {
        width: 250px;
        max-width: 250px;
        left: 50%;
    }

    .about1:before {
        top: -150px;
        transform: translateX(-50%) translateY(var(--about1-before-y));
    }

    .about1:after {
        bottom: -150px;
        transform: translateX(-50%) translateY(var(--about1-after-y));
    }

    .about3 {
        grid-template-columns: 1fr;
        gap: clamp(100px, 6vw, 200px);
    }



    /*/////////////////////////ページ///////////////////////*/
    .fv-wrap2 {
        height: 600px;
    }

    .item-card1 {
        grid-template-columns: 1fr;
    }

    .item_card_wrap {
        padding: 30px;
        width: 100%;
        max-width: 600px;
        margin-inline: auto;
    }

    .item_card_wrap_cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .item_card_wrap_cards_sec {
        width: 100%;
        max-width: none;
    }

    .item_merch_submenu_links {
        grid-template-columns: repeat(3, max-content);
    }

    .item-card1>*:nth-child(2) {
        border-left: 0;
        border-top: 5px solid var(--color-prime-white2);
        margin-top: 50px;
        padding-top: 50px;
    }

}


/*==============================================================================================
●スマホサイズ
==============================================================================================*/

@media screen and (max-width: 489px) {
    :root {
        --pdg: 20px;
    }

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

    .sp,
    .tb {
        display: block !important;
    }

    .pc {
        display: none !important;
    }

    /*/////////////////////////ヘッダー///////////////////////*/


    /*/////////////////////////フッター///////////////////////*/


    /*/////////////////////////TOPページ///////////////////////*/
    .fv-wrap {
        height: 100svh;
    }

    .fv-logo {
        --fv-logo-scale: clamp(0, calc((100vw - 60px) / var(--fv-logo-base-width)), 1);
    }

    .pageBody {
        width: var(--width-sp);
    }

    .about1 {
        padding: 100px 30px 150px 30px;
        margin-bottom: 200px;
    }

    .about1:before,
    .about1:after {
        width: 200px;
        left: 50%;
    }

    .about1:before {
        top: -100px;
        transform: translateX(-50%) translateY(var(--about1-before-y));
    }

    .about1:after {
        bottom: -100px;
        transform: translateX(-50%) translateY(var(--about1-after-y));
    }

    .about3 {
        grid-template-columns: 1fr;
        gap: clamp(100px, 6vw, 200px);
    }

    .about3-2 {
        margin: 0 auto;
        padding: 50px 10px 10px 10px;
    }





    /*/////////////////////////ページ///////////////////////*/
    .fv-wrap2 {
        height: 80svh;
    }

    .play2 {
        width: 80%;
        grid-template-columns: 1fr;
        gap: 30px;
        justify-items: center;
    }

    .play2-1,
    .play2-3 {
        transform: translateX(-15px);
    }

    .play2-2 {
        transform: translateX(15px);
    }

    .item-card1 {
        grid-template-columns: 1fr;
    }

    .item_card_wrap {
        padding: 30px 15px 15px 15px;
    }

    .item_card_wrap_cards {
        grid-template-columns: 1fr;
    }

    .item_merch_submenu_links {
        width: calc(100% - 76px);
        max-width: 100%;
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .item_merch_submenu {
        gap: 8px;
        align-items: center;
    }

    .item_merch_submenu_line {
        margin-top: 0;
    }

    .item_merch_submenu_links li {
        min-width: 0;
    }

    .item_merch_submenu_links li a:link,
    .item_merch_submenu_links li a:visited {
        width: 100%;
        padding: 0 12px;
        font-size: 0.8rem;
    }

    .item_merch_submenu_links li:nth-child(2) a,
    .item_merch_submenu_links li:nth-child(3) a {
        min-width: 0;
    }

    .item_merch_nav {
        width: 41px;
        height: 45px;
        top: 60px;
    }

    .item-card1>*:nth-child(2) {
        border-left: 0;
        border-top: 5px solid var(--color-prime-white2);
        margin-top: 50px;
        padding-top: 50px;
    }

    .item-card1>div>div {
        width: 100%;
    }

    .item-card1>div>div>.item-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px 18px;
        margin: 10px 0 0;
        padding: 0;
    }

    .item-card1>div>div>.item-links::before {
        content: "";
        flex-basis: 100%;
        width: 0;
        order: 1;
    }

    .item-card1>div>div>.item-links>li:nth-child(-n+3) {
        order: 0;
    }

    .item-card1>div>div>.item-links>li:nth-child(n+4) {
        order: 2;
    }

    .item_card_detail,
    .item_card_detail2 {
        font-size: 1.2em;
    }

}