@charset "utf-8";

/* =========================
tab
========================= */
.characterTabArea {
    display: flex;
    flex-wrap: wrap;
    margin-top: 70px;
    overflow-x: hidden;
    column-gap: 5px;
}

/* hover */
.characterTabArea>label {
    order: -1;
    color: #C0C0C0;
    font-size: 1.4rem;
    cursor: pointer;

    position: relative;
    display: inline-block;
}

.characterTabArea .tabText {
    position: relative;
    display: inline-block;
    padding: 0 8px;
}

.characterTabArea .tabText::after {
    background-color: #C0C0C0;
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    transform-origin: left top;
}

.characterTabArea .tabText:hover::after {
    animation: linkLine 0.8s forwards;
}

@keyframes linkLine {
    0% {
        transform-origin: right top;
        transform: scaleX(1);
        /* 全表示 */
    }

    40% {
        transform-origin: right top;
        transform: scaleX(0);
        /* 右方向へ消える */
    }

    41% {
        transform-origin: left top;
        transform: scaleX(0);
        /* ここで起点を左に切替 */
    }

    100% {
        transform-origin: left top;
        transform: scaleX(1);
        /* 左→右へ再表示 */
    }
}

/* hover END */

.characterTabArea>label:first-of-type {
    margin-left: 7.63%;
}

.characterTabArea>label:last-of-type {
    margin-right: 7.63%;
}

.characterTabArea>.Character__memberArea {
    display: none;
}

.characterTabArea label:has(input:checked) {
    color: var(--textColor-bk);
}

.characterTabArea label:has(input:checked) .tabText::after {
    background-color: var(--textColor-bk);
    color: var(--textColor-bk);
}

.characterTabArea>.scroll {
    display: none;
}

.characterTabArea label:has(:checked)+.Character__memberArea {
    display: flex;
    justify-content: center;
}

.characterTabArea label:has(:checked)+.Character__memberArea+.scroll {
    display: block;
}

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

    .characterTabArea {
        margin-top: 100px;
        justify-content: flex-start;
    }

    .characterTabArea .tabText {
        padding: 0 15px;
    }

    .characterTabArea>label {
        font-size: 1.6rem;
    }

    .characterTabArea>label:first-of-type {
        margin-left: 80px;
    }

    .characterTabArea>label:last-of-type {
        padding: 0 6px;
    }

    .characterTabArea label:has(:checked)+.Character__memberArea+.scroll.tab2 {
        display: none;
    }
}

/* PC 769px */

/* =========================
character
========================= */
.Character__memberArea {
    margin-top: 25px;
    padding: 0 2.54%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    gap: 0;
    justify-content: space-between;
}

.character__standing {
    height: 320px;
    object-fit: contain;
    object-position: bottom center;
}

/* 各character　width調整 */
.character__standing--01 {
    width: 223px;
}

.character__standing--02 {
    width: 202px;
}

.character__standing--03 {
    width: 173px;
}

.character__standing--04 {
    width: 174px;
}

.character__standing--05 {
    width: 179px;
}

.character__standing--06 {
    width: 184px;
}

.character__standing--07 {
    width: 200px;
}

.character__standing--08 {
    width: 165px;
}

.character__standing--09 {
    width: 159px;
}

.character__standing--10 {
    width: 161px;
}

.character__standing--11 {
    width: 182px;
}

.character__standing--12 {
    width: 173px;
}

.character__standing--13 {
    width: 189px;
}

/* 各character　width調整 END */

/* 各character　hover */
/* common */
.character__hover img {
    display: block;
    position: relative;
    z-index: 1;
}

.character__hover {
    display: block;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* 01 */
.character__hover01::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--characterColor-yamabuki), #ffffff);
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.character__hover01:hover::after {
    transform: translateY(0);
}

/* 02 */
.character__hover02::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--characterColor-hanada), #ffffff);
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.character__hover02:hover::after {
    transform: translateY(0);
}

/* 03 */
.character__hover03::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--characterColor-shinbashi), #ffffff);
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.character__hover03:hover::after {
    transform: translateY(0);
}

/* 04 */
.character__hover04::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--characterColor-asahi), #ffffff);
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.character__hover04:hover::after {
    transform: translateY(0);
}

/* 05 */
.character__hover05::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--characterColor-kaedeko), #ffffff);
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.character__hover05:hover::after {
    transform: translateY(0);
}

/* 06 */
.character__hover06::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--characterColor-toba), #ffffff);
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.character__hover06:hover::after {
    transform: translateY(0);
}

/* 07 */
.character__hover07::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--characterColor-asagi), #ffffff);
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.character__hover07:hover::after {
    transform: translateY(0);
}

/* 08 */
.character__hover08::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--characterColor-beni), #ffffff);
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.character__hover08:hover::after {
    transform: translateY(0);
}


/* 09 */
.character__hover09::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--characterColor-aoba), #ffffff);
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.character__hover09:hover::after {
    transform: translateY(0);
}


/* 10 */
.character__hover10::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--characterColor-kaoru), #ffffff);
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.character__hover10:hover::after {
    transform: translateY(0);
}


/* 11 */
.character__hover11::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--characterColor-himari), #ffffff);
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.character__hover11:hover::after {
    transform: translateY(0);
}


/* 12 */
.character__hover12::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--characterColor-satsuki), #ffffff);
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.character__hover12:hover::after {
    transform: translateY(0);
}


/* 13 */
.character__hover13::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateY(-100%);
    background: linear-gradient(to bottom, var(--characterColor-uzuki), #ffffff);
    transition: transform 0.45s ease-out;
    pointer-events: none;
}

.character__hover13:hover::after {
    transform: translateY(0);
}

/* 各character　hover END */

.scroll {
    text-align: center;
    position: relative;
    margin: 20px auto 0;
}

.scroll_text {
    font-size: 1.35rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.scroll_arrow {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.scroll_arrow:hover {
    transform: scale(1.5);
}

.scroll_arrow--prev {
    background-image: url('../images/icon/arrow-left.svg');
}

.scroll_arrow--next {
    background-image: url('../images/icon/arrow-right.svg');
}

.character__mainTextArea {
    margin: 50px 10px 0 10px;
    text-align: center;
}

/* PC 769px */
@media screen and (min-width: 769px) {
    .Character__memberArea {
        margin: 50px 0 0;
        padding: 0 1.31%;
        display: flex;
        gap: 0;
        justify-content: flex-start;
    }

    .Character__memberArea.tab2 {
        margin-bottom: 26px;
    }

    .character__standing {
        height: 650px;
    }

    .character__standing--09,
    .character__standing--10,
    .character__standing--11,
    .character__standing--12,
    .character__standing--13 {
        height: 600px;
    }

    /* 各character　width調整 */
    .character__standing--01 {
        width: 416px;
    }

    .character__standing--02 {
        width: 377px;
    }

    .character__standing--03 {
        width: 324px;
    }

    .character__standing--04 {
        width: 325px;
    }

    .character__standing--05 {
        width: 335px;
    }

    .character__standing--06 {
        width: 343px;
    }

    .character__standing--07 {
        width: 372px;
    }

    .character__standing--08 {
        width: 308px;
    }

    .character__standing--09 {
        width: 258px;
    }

    .character__standing--10 {
        width: 261px;
    }

    .character__standing--11 {
        width: 294px;
    }

    .character__standing--12 {
        width: 282px;
    }

    .character__standing--13 {
        width: 307px;
    }

    /* 各character　width調整 END */

    .character__mainTextArea {
        margin: 50px auto 0;
        text-align: center;
        font-size: 1.8rem;
        letter-spacing: 0.10em;
    }

    .brSP {
        display: none;
    }
}

/* PC 769px */

/* =========================
footer
========================= */
.footer {
    margin-top: 62px;
}

/* PC 769px */
@media screen and (min-width: 769px) {
    .footer {
        margin-top: 105px;
    }
}

/* PC 769px */

/* =========================
modal
========================= */
.modal__area {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(255, 255, 255, 0.9);
}

/* common */
.modal__close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 15px;
    right: 15px;
    transition: transform 0.2s ease;
}

.modal__close:hover {
    transform: scale(1.5);
}

.modal__close span {
    width: 12.23px;
    height: 0.5px;
    background-color: var(--btnColor-bk);
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    display: block;
}

.modalClose__line1 {
    transform: translate(-50%, -50%) rotate(45deg);
}

.modalClose__line2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modal__textArea {
    font-family: "Noto Serif JP";
    text-align: left;
    display: block;
    width: 84.73%;
    margin: 0 auto;
}

.modal__title {
    font-size: 2.0rem;
    letter-spacing: 0.10em;
}

.modal__text {
    margin-top: 30px;
    line-height: 1.4;
    letter-spacing: 0.10em;
}

.modal__img {
    margin: 50px auto 0;
    width: 313px;
    height: 378px;
    position: relative;
}

.modal__charaImg--01 {
    width: 206px;
    height: 239px;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.modal__charaImg--01.tab2 {
    width: 267px;
    height: 378px;
    left: 50%;
    transform: translateX(-50%);
}

.modal__charaImg--02 {
    width: 163px;
    height: 189px;
    object-fit: cover;
    position: absolute;
    top: 189px;
    right: 0;
}

/* modal kaedeko */
.modal__kaedeko {
    background-color: #fff;
    margin: 10% auto;
    padding: 50px 20px;
    border-radius: 30px;
    width: 94.9%;
    position: relative;
    border: 0.5px dashed var(--characterColor-kaedeko);
    box-shadow: 0 4px 20px rgba(255, 168, 69, 0.2);
}

.modal__title__kaedeko {
    text-shadow: 0 4px 4px rgba(255, 168, 69, 0.5);
}

/* modal kaedeko END */

/* modal toba */
.modal__toba {
    background-color: #fff;
    margin: 10% auto;
    padding: 50px 20px;
    border-radius: 30px;
    width: 94.9%;
    position: relative;
    border: 0.5px dashed var(--characterColor-toba);
    box-shadow: 0 4px 20px rgba(191, 126, 217, 0.2);
}

.modal__title__toba {
    text-shadow: 0 4px 4px rgba(191, 126, 217, 0.5);
}

/* modal toba END */

/* modal shinbashi */
.modal__shinbashi {
    background-color: #fff;
    margin: 10% auto;
    padding: 50px 20px;
    border-radius: 30px;
    width: 94.9%;
    position: relative;
    border: 0.5px dashed var(--characterColor-shinbashi);
    box-shadow: 0 4px 20px rgba(98, 195, 196, 0.2);
}

.modal__title__shinbashi {
    text-shadow: 0 4px 4px rgba(98, 195, 196, 0.5);
}

/* modal shinbashi END */

/* modal hanada */
.modal__hanada {
    background-color: #fff;
    margin: 10% auto;
    padding: 50px 20px;
    border-radius: 30px;
    width: 94.9%;
    position: relative;
    border: 0.5px dashed var(--characterColor-hanada);
    box-shadow: 0 4px 20px rgba(92, 139, 204, 0.2);
}

.modal__title__hanada {
    text-shadow: 0 4px 4px rgba(92, 139, 204, 0.5);
}

/* modal hanada END */

/* modal asahi */
.modal__asahi {
    background-color: #fff;
    margin: 10% auto;
    padding: 50px 20px;
    border-radius: 30px;
    width: 94.9%;
    position: relative;
    border: 0.5px dashed var(--characterColor-asahi);
    box-shadow: 0 4px 20px rgba(255, 89, 89, 0.2);
}

.modal__title__asahi {
    text-shadow: 0 4px 4px rgba(255, 89, 89, 0.5);
}

/* modal asahi END */

/* modal asagi */
.modal__asagi {
    background-color: #fff;
    margin: 10% auto;
    padding: 50px 20px;
    border-radius: 30px;
    width: 94.9%;
    position: relative;
    border: 0.5px dashed var(--characterColor-asagi);
    box-shadow: 0 4px 20px rgba(62, 178, 163, 0.2);
}

.modal__title__asagi {
    text-shadow: 0 4px 4px rgba(62, 178, 163, 0.5);
}

/* modal asagi END */

/* modal yamabuki */
.modal__yamabuki {
    background-color: #fff;
    margin: 10% auto;
    padding: 50px 20px;
    border-radius: 30px;
    width: 94.9%;
    position: relative;
    border: 0.5px dashed var(--characterColor-yamabuki);
    box-shadow: 0 4px 20px rgba(229, 184, 62, 0.2);
}

.modal__title__yamabuki {
    text-shadow: 0 4px 4px rgba(229, 184, 62, 0.5);
}

/* modal yamabuki END */

/* modal beni */
.modal__beni {
    background-color: #fff;
    margin: 10% auto;
    padding: 50px 20px;
    border-radius: 30px;
    width: 94.9%;
    position: relative;
    border: 0.5px dashed var(--characterColor-beni);
    box-shadow: 0 4px 20px rgba(178, 62, 92, 0.2);
}

.modal__title__beni {
    text-shadow: 0 4px 4px rgba(178, 62, 92, 0.5);
}

/* modal beni END */

/* modal aoba */
.modal__aoba {
    background-color: #fff;
    margin: 10% auto;
    padding: 50px 20px;
    border-radius: 30px;
    width: 94.9%;
    position: relative;
    border: 0.5px dashed var(--characterColor-aoba);
    box-shadow: 0 4px 20px rgba(2, 110, 121, 0.2);
}

.modal__title__aoba {
    text-shadow: 0 4px 4px rgba(2, 110, 121, 0.5);
}

/* modal aoba END */

/* modal kaoru */
.modal__kaoru {
    background-color: #fff;
    margin: 10% auto;
    padding: 50px 20px;
    border-radius: 30px;
    width: 94.9%;
    position: relative;
    border: 0.5px dashed var(--characterColor-kaoru);
    box-shadow: 0 4px 20px rgba(62, 48, 85, 0.2);
}

.modal__title__kaoru {
    text-shadow: 0 4px 4px rgba(62, 48, 85, 0.5);
}

/* modal kaoru END */

/* modal himari */
.modal__himari {
    background-color: #fff;
    margin: 10% auto;
    padding: 50px 20px;
    border-radius: 30px;
    width: 94.9%;
    position: relative;
    border: 0.5px dashed var(--characterColor-himari);
    box-shadow: 0 4px 20px rgba(222, 171, 79, 0.2);
}

.modal__title__himari {
    text-shadow: 0 4px 4px rgba(222, 171, 79, 0.5);
}

/* modal himari END */

/* modal satsuki */
.modal__satsuki {
    background-color: #fff;
    margin: 10% auto;
    padding: 50px 20px;
    border-radius: 30px;
    width: 94.9%;
    position: relative;
    border: 0.5px dashed var(--characterColor-satsuki);
    box-shadow: 0 4px 20px rgba(232, 186, 201, 0.2);
}

.modal__title__satsuki {
    text-shadow: 0 4px 4px rgba(232, 186, 201, 0.5);
}

/* modal satsuki END */

/* modal uzuki */
.modal__uzuki {
    background-color: #fff;
    margin: 10% auto;
    padding: 50px 20px;
    border-radius: 30px;
    width: 94.9%;
    position: relative;
    border: 0.5px dashed var(--characterColor-uzuki);
    box-shadow: 0 4px 20px rgba(209, 178, 223, 0.2);
}

.modal__title__uzuki {
    text-shadow: 0 4px 4px rgba(209, 178, 223, 0.5);
}

/* modal uzuki END */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-5px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.95) translateY(5px);
    }
}

[data-modal-target].show {
    animation: fadeIn 0.5s forwards;
}

[data-modal-target].hide {
    animation: fadeOut 0.5s forwards;
}

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

    /* common */
    .modal__close {
        width: 36px;
        height: 36px;
        position: absolute;
        top: 25px;
        right: 25px;
        transition: transform 0.2s ease;
    }

    .modal__close span {
        width: 18.34px;
    }

    .modal__textArea {
        width: 466px;
        margin: 111px 0 110px;
    }

    .modal__title {
        font-size: 3.2rem;
    }

    .modal__text {
        margin-top: 50px;
        font-size: 1.8rem;
    }

    .modal__img {
        margin: 0;
        width: 391px;
        height: 458px;
    }

    .modal__charaImg--01 {
        width: 255px;
        height: 296px;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }

    .modal__charaImg--01.tab2 {
        width: 323px;
        height: 458px;
        left: 50%;
        transform: translateX(-50%);
    }

    .modal__charaImg--02 {
        width: 201px;
        height: 233px;
        object-fit: cover;
        position: absolute;
        top: 225px;
        right: 0;
    }

    /* modal kaedeko */
    .modal__kaedeko {
        padding: 50px 75px;
        width: 75.13%;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 75px;
    }

    /* modal kaedeko END */

    /* modal toba */
    .modal__toba {
        padding: 50px 75px;
        width: 75.13%;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 75px;
    }

    /* modal toba END */

    /* modal shinbashi */
    .modal__shinbashi {
        padding: 50px 75px;
        width: 75.13%;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 75px;
    }

    /* modal shinbashi END */

    /* modal hanada */
    .modal__hanada {
        padding: 50px 75px;
        width: 75.13%;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 75px;
    }

    /* modal hanada END */

    /* modal asahi */
    .modal__asahi {
        padding: 50px 75px;
        width: 75.13%;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 75px;
    }

    /* modal asahi END */

    /* modal asagi */
    .modal__asagi {
        padding: 50px 75px;
        width: 75.13%;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 75px;
    }

    /* modal asagi END */

    /* modal yamabuki */
    .modal__yamabuki {
        padding: 50px 75px;
        width: 75.13%;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 75px;
    }

    /* modal yamabuki END */

    /* modal beni */
    .modal__beni {
        padding: 50px 75px;
        width: 75.13%;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 75px;
    }

    /* modal beni END */

    /* modal aoba */
    .modal__aoba {
        padding: 50px 75px;
        width: 75.13%;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 75px;
    }

    /* modal aoba END */

    /* modal kaoru */
    .modal__kaoru {
        padding: 50px 75px;
        width: 75.13%;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 75px;
    }

    /* modal kaoru END */

    /* modal himari */
    .modal__himari {
        padding: 50px 75px;
        width: 75.13%;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 75px;
    }

    /* modal himari END */

    /* modal satsuki */
    .modal__satsuki {
        padding: 50px 75px;
        width: 75.13%;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 75px;
    }

    /* modal satsuki END */

    /* modal uzuki */
    .modal__uzuki {
        padding: 50px 75px;
        width: 75.13%;
        flex-direction: row-reverse;
        justify-content: center;
        gap: 75px;
    }

    /* modal uzuki END */

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scale(0.95) translateY(-5px);
        }

        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
            transform: scale(1) translateY(0);
        }

        to {
            opacity: 0;
            transform: scale(0.95) translateY(5px);
        }
    }

    [data-modal-target].show {
        animation: fadeIn 0.5s forwards;
    }

    [data-modal-target].hide {
        animation: fadeOut 0.5s forwards;
    }
}

/* PC 769px */