/* 今回だけ */
    /* パララックスの背景がフッターに潜るようにする */
    .page-footer {
        z-index: 0;
    }

    /* header none */
    .page-header {
        display: none;
    }

    /* ===== loading Animation ===== */

    .ggs2507-lp_wrap {
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        position: relative;
        font-family: serif;
        color: #454545;
        font-size: clamp(15px, 1.105vw, 28px);
        font-weight: 500;
    }

    /* PC時の背景 */
    .ggs2507-lp_wrap::before {
        background-color: #3B3C59;
        content: "";
        display: block;
        z-index: -1;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .ggs2507-lp_wrap #loading {
        position: fixed;
        z-index: 999;
        width: 100vw;
        height: 100%;
        background-color: #fff;
        text-align: center;
        color: #fff;
        top: 0;
        left: 0;
        overflow: hidden;
    }

    #loading #loading__logo {
        position: absolute;
        top: calc((100% - 35%) / 2);
        left: calc((100% - 20%) / 2);
        width: 20%;
        max-width: 800px;
        background: url("../../..//img/event/cp250709-tgaa-10th/TGAA_logo.png") no-repeat top center;
        background-size: contain;
        opacity: 0;
    }

    #loading #loading__logo.action {
        /* （下からのfadein）ver */
        aspect-ratio: 1;
        animation: loading-animation 2500ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
        animation-iteration-count: 1;
        opacity: 0;
    }

    /* loadingのアニメーション（下からのfadein） */
    @keyframes loading-animation {

        0% {
            opacity: 0;
            transform: translateY(100px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

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

        #loading #loading__logo {
            top: calc((100% - 25%) / 2);
            left: calc((100% - 28%) / 2);
            width: 30%;
        }

    }

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

        #loading #loading__logo {
            top: calc((100% - 25%) / 2);
            left: calc((100% - 28%) / 2);
            width: 30%;
        }

    }

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

        #loading #loading__logo {
            top: calc((100% - 25%) / 2);
            left: calc((100% - 48%) / 2);
            width: 50%;
        }

        #loading #loading__logo.action {
            animation: loading-animation 3000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

    }

    /* ===== loading After FV ===== */
    #container {
        opacity: 0;
    }

    .ggs2507-lp_wrap.look #container {
        display: block;
        animation-name: PageAnimeAppear;
        padding: 0;
        background: transparent;
        margin: 0;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        position: relative;
        animation-duration: 1s;
        animation-delay: 0.3s;
        animation-fill-mode: forwards;
        opacity: 0;
        position: relative;
        left: 0;
        z-index: 2;
        max-width: 900px;
        margin: auto;
    }


    @keyframes PageAnimeAppear {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    /* ggs2507- CSS */
    /* パララックスする背景 */
    .ggs2507_fv {
        background: url("../../../img/event/cp250709-tgaa-10th/bg_re02.jpg");
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        content: "";
        display: block;
        z-index: -1;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 50px;
        left: 0;
        max-width: 1150px;
        margin: auto;
        aspect-ratio: 9 / 16;
    }

    @media screen and (max-height:1599px) {
        .ggs2507_fv {
            background-size: cover;
            max-width: 1150px;
            background-position: 100% 65%;
        }

    }

    @media screen and (max-height:1349px) {
        .ggs2507_fv {
            background-size: contain;
            max-width: 1000px;
            background-position: 100% 80%;
        }

    }

    @media screen and (max-height:1024px) {

        .ggs2507_fv {
            max-width: 710px;
        }

        .ccontent {
            max-width: 690px;
            margin: auto;
        }
    }

    @media screen and (max-height:879px) {

        .ggs2507_fv {
            max-width: 510px;
            background-size: 110%;
            background-position: 45% 100%;
        }

        .ccontent {
            max-width: 490px;
            margin: auto;
        }

    }

    @media screen and (max-height:600px) {

        .ggs2507_fv {
            max-width: 410px;
        }

        .ccontent {
            max-width: 390px;
            margin: auto;
        }
    }

    @media screen and (max-height:555px) {

        .ggs2507_fv {
            max-width: 510px;
            background-size: 110%;
            background-position: 45% 100%;
        }

        .ccontent {
            max-width: 490px;
            margin: auto;
        }

    }

    @media screen and (max-width:767px) {
        .ggs2507_fv {
            background: url("../../../img/event/cp250709-tgaa-10th/bg_re02.jpg") no-repeat 50% top;
            background-size: cover;
            content: "";
            display: block;
            z-index: -1;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            aspect-ratio: auto;
            max-width: 100%;
        }

    }

    /* === slider - swiper === */
    .swiper.slider1,
    .swiper.slider2,
    .swiper.slider3 {
        width: 100%;
        height: auto;
        margin: auto;
        text-align: center;
        padding: 30px 0 15px;
    }

    .slider1 img,
    .slider2 img,
    .slider3 img {
        width: 95%;
        box-shadow: 0 0 10px #999;
        margin-bottom: 10px;
    }

    .slider1 img a:hover,
    .slider2 img a:hover,
    .slider3 img a:hover,
    .slider1 img a:active,
    .slider2 img a:active,
    .slider3 img a:active,
    .slider1 img a:visited,
    .slider2 img a:visited,
    .slider3 img a:visited {
        color: transparent !important;
    }

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

        .swiper.slider1,
        .swiper.slider2,
        .swiper.slider3 {
            padding: 15px 0 5px;
        }

    }

    /* === lp - all === */
    #area02,
    #area03,
    #column,
    #area05,
    #area06,
    #area07,
    #area08,
    #area09,
    #area10,
    #area11,
    #area12,
    #trialVersionDLBonus {
        margin: 75px auto;
        text-align: center;
    }

    #column p,
    #area07 p {
        margin-bottom: 0;
    }

    #trialVersionDLBonus a, #trialVersionDLBonus a:hover, #trialVersionDLBonus a:visited {
        color: #454545 !important;
        text-decoration: underline;
        text-decoration-color: #454545;
    }

    .sec_bg-top,
    .sec_bg-middle,
    .sec_bg-bottom {
        background: transparent;
        text-align: center;
        color: #454545;
        max-width: 1400px;
        margin: auto;
    }

    .sec_bg-middle {
        max-width: 880px;
        background: url("../../../img/event/cp250709-tgaa-10th/bg-middle.png") repeat-y;
        background-size: 100%;
        margin: auto;
        padding: 0 3.5%;
    }

    .sec_intro-txt p {
        font-size: clamp(17px, 1.15vw, 34px);
        letter-spacing: 1px;
        font-weight: 600;
    }

    .sec_intro-txt span {
        color: #733826;
    }

    .sec_itemName p {
        font-size: clamp(20px, 1.29vw, 36px);
        font-weight: 700;
    }

    #area08 .sec_itemName p {
        font-weight: 800;
    }

    .couponPeriod p,
    .deadline p,
    .price p,
    .period p {
        font-size: clamp(25px, 2.2vw, 50px);
        letter-spacing: 1px;
        font-weight: 700;
    }

    .howToApply p,
    .target p {
        font-size: clamp(14px, 1.2vw, 30px);
        font-weight: 500;
    }

    .couponPeriod span,
    .deadline span,
    .price span,
    .period span {
        font-size: clamp(15px, 1.2vw, 30px);
        font-weight: 500;
    }

    .annotation p {
        font-size: clamp(13px, .75vw, 18px);
    }

    .columnBtn,
    .columnImg,
    .storeBtn,
    .ecBtn,
    .buyBtn,
    .sampleBtn,
    .xInductionBtn,
    .passwordBtn,
    .benefitsImg,
    .voiceBtn-area {
        margin: auto;
        width: 80%;
    }

    .period img,
    .price img,
    .delivery img,
    .target img,
    .couponPeriod img,
    .deadline img {
        margin: 25px auto auto;
    }

    .howToApply img,
    .period img,
    .price img,
    .delivery img,
    .deadline img {
        width: 65%;
    }

    .howToApply img {
        margin: 25px auto 10px;
    }

    .target img {
        width: 70%;
    }

    .couponPeriod img {
        width: 80%;
    }

    #area08 .price img,
    #area09 .price img,
    #area10 .period img {
        margin: auto;
    }

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

        .sec_intro-txt {
            letter-spacing: 0;
        }

        .columnBtn,
        .columnImg,
        .storeBtn,
        .ecBtn,
        .buyBtn,
        .xInductionBtn,
        .passwordBtn,
        .benefitsImg,
        .voiceBtn-area {
            width: 90%;
        }

        .benefitsImg {
            margin-bottom: 25px;
        }

        .price p,
        .period p,
        .couponPeriod p,
        .deadline p {
            letter-spacing: 0;
        }

        .howToApply img,
        .period img,
        .price img,
        .delivery img,
        .target img,
        .couponPeriod img,
        .deadline img {
            margin: auto;
        }

        .howToApply img,
        .period img,
        .price img,
        .delivery img,
        .deadline img,
        .target img {
            width: 80%;
        }

        .couponPeriod img {
            width: 95%;
        }

    }

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

        .howToApply img,
        .period img,
        .price img,
        .delivery img,
        .target img,
        .couponPeriod img,
        .deadline img {
            margin: auto;
        }

    }

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

        .sec_intro-txt p {
            font-size: 16px;
        }

        .annotation p {
            font-size: 12px;
        }

        .sec_itemName p {
            font-size: 19px;
        }

    }


    /* === fv === */

    #area01 {
        height: 125svh;
        position: relative;
    }

    #area01 .main--ttl {
        padding-top: 15px;
        text-align: center;
    }

    #area01 .main--ttl img {
        width: 32%;
    }

    .scroll_area {
        height: 50svh;
    }

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

        #area01 {
            height: 90vh;
        }

        .scroll_area {
            height: 50svh;
        }

    }

    /* === order === */
    #area03 .order--period_txt {
        padding-top: 25px;
    }

    /* === delivery === */
    .schedule__list {
        margin: 15px auto;
        padding-left: 100px;
        text-align: left;
        font-weight: 900;
        font-size: clamp(14px, 1.105vw, 27px);
    }

    @media screen and (max-height:1024px) {
        .schedule__list {
            padding-left: 0;
            width: 90%;
        }
    }

    @media screen and (max-height:850px) {
        .schedule__list {
            width: 95%;
        }
    }

    @media screen and (max-width:1280px) {
        .schedule__list {
            width: 75% !important;
        }
    }

    @media screen and (max-width:884px) {
        .schedule__list {
            width: 70% !important;
        }
    }

    @media screen and (max-width:768px) {
        .schedule__list {
            width: 60% !important;
        }
    }

    @media screen and (max-width:767px) {
        .schedule__list {
            padding-left: 0 !important;
        }
    }

    @media screen and (max-width:428px) {
        .schedule__list {
            width: 90% !important;
        }
    }

    @media screen and (max-width:395px) {
        .schedule__list {
            width: 95% !important;
        }
    }

    @media screen and (max-width:375px) {
        .schedule__list {
            width: 100% !important;
        }
    }

    /* === COCORO VOICE === */
    .voice_detail-area {
        border-bottom: 5px dotted #c6a962;
        padding: 15px 0;
        margin-bottom: 25px;
    }

    .voice_detail-area .buyBtn {
        margin: auto auto 15px;
    }

    .voice_detail-area .detail_ttl {
        padding-bottom: 15px;
    }

    .voiceKaden-img {
        margin: auto;
    }

    .sampleVoice-ttl p {
        font-size: clamp(16px, 1.15vw, 28px);
        font-weight: 700;
        letter-spacing: 1px;
        line-height: 1.2;
    }

    .sampleVoice-ttl span {
        font-size: clamp(14px, 1.105vw, 28px);
    }

    .compatibleModels__list {
        border: 2px solid #fff;
        background: rgba(255, 255, 255, .65);
        width: 95%;
        height: 200px;
        margin: auto auto 15px;
        padding: 20px;
        overflow-y: scroll;
        font-size: clamp(21px, 2.25vw, 28px);
        text-align: center;
        line-height: 3.25rem;
    }

    .compatibleModels__list .modelName {
        font-weight: 700;
        margin-bottom: 10px;
    }

    .compatibleModels__list .modelSKU {
        font-size: clamp(15px, 1.25vw, 23px);
        font-weight: 600;
        line-height: 1.45;
    }

    .compatibleModels__list .modelSKU span {
        white-space: nowrap;
    }

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

        .voice_detail-area {
            padding: 15px 0;
            margin-bottom: 25px;
        }

        .sampleVoice-area .col-8 {
            padding-left: 0;
        }

        .voice_detail-area .detail_ttl {
            padding-bottom: 5px;
        }

        .compatibleModels__list {
            padding: 10px;
            line-height: 1.6;
            height: 170px;
        }

        .compatibleModels__list .modelName {
            margin-bottom: 5px;
        }

    }

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

        .sampleVoice-ttl p {
            letter-spacing: 0;
        }

        .compatibleModels__list {
            font-size: 20px;
        }
    }




    /* === original goods === */
    .goodsCharacter__list {
        border: 2px solid #fff;
        background: rgba(255, 255, 255, .65);
        width: 95%;
        height: 200px;
        margin: auto auto 25px;
        padding: 20px;
        overflow-y: scroll;
        text-align: left;
        font-size: clamp(13px, 1.105vw, 23px);
    }

    @media screen and (max-width:767px) {
        .goodsCharacter__list {
            padding: 10px;
        }
    }

    @media screen and (max-width:375px) {
        .goodsCharacter__list {
            font-size: 13px;
        }
    }

    /* === early purchase benefits === */
    .voiceActor__list {
        width: 80%;
        margin: 15px auto;
        text-align: left;
        font-size: clamp(16px, 1.105vw, 28px);
        padding-left: 40px;
    }

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

        .voiceActor__list {
            width: 90%;
        }
    }

    @media screen and (max-width: 1279px) {
        .voiceActor__list {
            width: 50%;
        }
    }

    @media screen and (max-width: 1023px) {
        .voiceActor__list {
            width: 75%;
        }
    }

    @media screen and (max-width:767px) {
        .voiceActor__list {
            width: 100%;
            padding-left: 15px;
        }
    }

    @media screen and (max-width:375px) {
        .voiceActor__list {
            font-size: 15px;
        }
    }

    /* === Early Purchase benefits - home appliance === */
    .annotation__list {
        max-width: 90%;
        margin: 15px auto;
        text-align: left;
        font-size: clamp(13px, .75vw, 18px);
    }

    ul.annotation__list,
    ul.annotation__list li.last {
        margin-bottom: 0 !important;
    }

    ul.annotation__list li::marker {
        content: "※";
        -webkit-appearance: none;
    }

    @media screen and (max-width:767px) {
        ul.annotation__list li::marker {
            content: "※";
            -webkit-appearance: none;
        }
    }

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

    /* === Purchaser benefits - COCORO VOICE === */

    .target table,
    .delivery table {
        margin: auto;
        width: 90%;
    }

    .target table>tbody>tr>th,
    .target table>tbody>tr>td,
    .delivery table>tbody>tr>th,
    .delivery table>tbody>tr>td {
        padding: 0 10px 10px;
    }

    .target table>tbody>tr>th {
        text-align: right;
        font-size: clamp(25px, 1.75vw, 40px);
    }

    .target table>tbody>tr>td {
        text-align: left;
    }

    .target table>tbody>tr>td,
    .delivery table>tbody>tr>th,
    .delivery table>tbody>tr>td {
        font-size: clamp(17px, 1.05vw, 28px);
    }

    .target table>tbody>tr>td span,
    .delivery table>tbody>tr>td span {
        white-space: nowrap;
    }

    .delivery table>tbody>tr>th {
        text-align: left;
        vertical-align: top;
    }

    .delivery table>tbody>tr>td {
        width: 72%;
        text-align: left;
        padding: 0 0 5px 0;
    }

    .delivery table>tbody>tr>th::after {
        content: '：';
    }

    .delivery table>tbody>tr.date>th::after {
        content: '　：';
    }

    @media screen and (max-height:1080px) {

        .delivery table>tbody>tr>td span {
            white-space: unset;
        }
    }

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

        .target table,
        .delivery table {
            width: 90%;
        }

        .target table>tbody>tr>th,
        .target table>tbody>tr>td,
        .delivery table>tbody>tr>th,
        .delivery table>tbody>tr>td {
            padding: 0 0 10px 5px;
        }

        .delivery table>tbody>tr>td {
            width: 72%;
            text-align: left;
            padding: 0 0 10px 0;
        }
    }

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

        .target table,
        .delivery table {
            width: 95%;
        }

    }

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

        .target table,
        .delivery table {
            width: 98%;
        }

    }


    /* === x-induction_area === */
    /* .x-induction_area .ttl {
        border-bottom: 3px dotted #8c8c8c;
        padding-bottom: 10px;
    } */

    .x-induction_area .ttl p {
        font-size: clamp(25px, 1vw, 30px);
        font-weight: bold;
        color: #454545;
    }

    /* === copyright === */
    .copyright {
        color: #454545;
        text-shadow: 0 0 10px #fff;
        font-size: clamp(25px, 2.0vw, 45px);
        text-align: center;
        font-weight: bold;
        margin-bottom: 50px;
        -webkit-text-stroke: 5px #ffffff;
        text-stroke: 5px #fff;
        paint-order: stroke;
        font-family: 'Noto Sans JP';
    }


    /* === audio === */
    audio {
        margin: auto;
    }

    .audio--wrap p {
        font-size: clamp(25px, 1vw, 25px);
        text-align: start;
    }

    .ryunosuke .audio-player,
    .susato .audio-player,
    .holmes .audio-player,
    .iris .audio-player {
        position: relative;
        margin: 0px auto 10px;
        width: 100%;
        max-width: 320px;
        padding: 8px;
        background-color: #F6F3EA;
        color: #454545;
        box-shadow: 0 1px 3px #888;
        outline-offset: -10px;
    }

    .ryunosuke .audio-player {
        border: 4px solid #7183BE;
        outline: 2px solid #7183BE;
    }

    .susato .audio-player {
        border: 4px solid #CB8291;
        outline: 2px solid #CB8291;
    }

    .holmes .audio-player {
        border: 4px solid #A284BC;
        outline: 2px solid #A284BC;
    }

    .iris .audio-player {
        border: 4px solid #9AB47B;
        outline: 2px solid #9AB47B;
    }

    .audio-player .controls {
        display: block;
    }

    .audio-player .controls button {
        cursor: pointer;
        border: none;
        background-color: transparent;
    }

    .audio-player .controls button.play-btn {
        /* margin-right: -20px; */
        outline: none;
        padding: 0;
    }

    @media screen and (min-width: 480px) {
        .audio-player {
            padding: 10px 10px;
            margin: 15px auto;
            max-width: 350px;
        }

        .audio--wrap p {
            font-size: medium;
            margin-bottom: 0;
        }

    }

    .audio-player .controls button::before {
        content: "";
        display: inline-block;
        height: 25px;
        width: 25px;
        vertical-align: -5px;
        background-repeat: no-repeat;
    }

    .audio-player .controls .time {
        font-size: 15px;
        line-height: 36px;
    }

    .ryunosuke .audio-player button.play-btn::before {
        background-image: url("../../../img/event/cp250709-tgaa-10th/voice_icon_ryunosuke_play.png");
        background-size: contain;
    }

    .susato .audio-player button.play-btn::before {
        background-image: url("../../../img/event/cp250709-tgaa-10th/voice_icon_susato_play.png");
        background-size: contain;
    }

    .holmes .audio-player button.play-btn::before {
        background-image: url("../../../img/event/cp250709-tgaa-10th/voice_icon_holmes_play.png");
        background-size: contain;
    }

    .iris .audio-player button.play-btn::before {
        background-image: url("../../../img/event/cp250709-tgaa-10th/voice_icon_iris_play.png");
        background-size: contain;
    }

    .ryunosuke .audio-player button.play-btn.playing::before {
        background-image: url("../../../img/event/cp250709-tgaa-10th/voice_icon_ryunosuke_stop.png");
        background-size: contain;
    }

    .susato .audio-player button.play-btn.playing::before {
        background-image: url("../../../img/event/cp250709-tgaa-10th/voice_icon_susato_stop.png");
        background-size: contain;
    }

    .holmes .audio-player button.play-btn.playing::before {
        background-image: url("../../../img/event/cp250709-tgaa-10th/voice_icon_holmes_stop.png");
        background-size: contain;
    }

    .iris .audio-player button.play-btn.playing::before {
        background-image: url("../../../img/event/cp250709-tgaa-10th/voice_icon_iris_stop.png");
        background-size: contain;
    }