/*上部初回CSS*/
    /*============================================================== scriptアニメーション*/
        .fadein-script {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease;
        }

        .fadein-script.is-show {
            opacity: 1;
            transform: translateY(0);
        }

    /*============================================================== CSSアニメーション*/
        /* 背景スライド（3枚クロスフェード） */
        #product-page_auen-first .behind-img {
          position: relative;
        }
        #product-page_auen-first .behind-img .animation-img {
          position: absolute;
          opacity: 0;
          animation: auenCrossfade 12s infinite; /* 16s → 12s に変更 */
          will-change: opacity; /* なめらか＆省電力 */
        }
        /* 各枚の開始タイミング（4秒刻み） */
        #product-page_auen-first .behind-img .animation-img:nth-child(1) { animation-delay: 0s; }
        #product-page_auen-first .behind-img .animation-img:nth-child(2) { animation-delay: 4s; }
        #product-page_auen-first .behind-img .animation-img:nth-child(3) { animation-delay: 8s; }
        /* 4枚目削除 */

        /* 次の画像だけがふわっと出て、前の画像は同時に薄くなる */
        @keyframes auenCrossfade {
          /* 0%時点では非表示 */
          0%   { opacity: 0; }
          /* 約8.3%でフル表示までフェードイン（= 1秒 / 12sの約8.3%） */
          8.3% { opacity: 1; }
          /* 33.3%まで表示維持（= 4秒間の各スロット） */
          33.3% { opacity: 1; }
          /* 41.6%でスッと消える（次の画像が入ってくる側が主役） */
          41.6% { opacity: 0; }
          100% { opacity: 0; }
        }

    /*============================================================== テキスト*/
        #product-page_auen-first p {
            line-height: 1.8;
            letter-spacing: .1rem;
            word-break: break-all;
        }
        .text-contents p, .sec-main-text-box p {
            margin: 0;
        }
        .sec-main-text-box {
            margin-block: 3rem;
        }
        .text-contents.below-img {
            margin-top: 1.5rem;
        }

    /*============================================================== 見出し*/
        #product-page_auen-first h2, 
        #product-page_auen-first h3, 
        #product-page_auen-first h4 {
            line-height: 1.7;
            letter-spacing: .1rem;
        }
        .sec-main-title {
            text-align: center;
            font-size: 1.9rem;
        }
        .sec-main-title span {
            display: block;
            font-size: 1.3rem;
        }
        

    /*============================================================== 背景色*/
        .bg-col-brown {
            background: #866761;
            color: #fff;
            margin-inline: calc(50% - 50vw);
            padding: 3rem;
        }
        .bg-col-red {
            background: #cb333b;
            color: #fff;
            margin-inline: calc(50% - 50vw);
            padding: 3rem;
        }
        @media screen and (min-width: 769px) {
            .bg-col-brown {
                margin-inline: unset;
            }
            .bg-col-red {
                margin-inline: unset;
            }
        }

    /*============================================================== フラッグ*/
        #product-page_auen-first .flag-img-2, 
        #product-page_auen-first .flag-img-1 {
            margin-inline: calc(50% - 50vw);
        }
        @media screen and (min-width: 769px) {
            #product-page_auen-first .flag-img-2, 
            #product-page_auen-first .flag-img-1 {
                margin-inline: unset;
            }
        }

    /*============================================================== 冒頭パンツについて*/
        #product-page_auen-first .auen-logo {
            filter: invert(1) brightness(200%);
            opacity: 1;
            width: 30%;
            margin-inline: auto;
            display: block;
        }
        .left-simple-title {
            font-size: 1.6rem;
            margin-block: 3rem;
        }
        .second-main-image {
            margin-top: 5rem;
        }
        .second-main-image h3 {
            text-align: center;
            font-size: 1.5rem;
        }
        .copy-wrapper {
            margin-block: 2rem;
        }
        #product-page_auen-first .copy {
            background: #fff;
            color: #1c1c1c;
            width: fit-content;
            margin-inline: auto;
            padding-inline: 1rem;
            margin-block: .4rem;
        }

    /*============================================================== CODEパンツとは*/
        .about-code-pants {
            margin-block: 4rem 15rem;
        }
        .about-code-pants h4 {
            text-align: center;
            font-size: 1.5rem;
            margin-bottom: 2rem;
        }
        .about-code-pants .text-contents {
            width: 80%;
            margin-inline: auto;
        }

    /*============================================================== 選ばれる理由*/
        /*見出し*/
        .reason-title h3 {
            margin-block: 0 1rem;
            font-size: 1.6rem;
        }
        .reason-title .sub {
            display: flex;
            align-items: center;
        }
        .reason-title .sub::before {
            content: "";
            display: block;
            border-top: solid 1px;
            width: 4rem;
            height: 1px;
            margin-right: 1rem;
        }
        /*リスト*/
        .choose-reasons-list:not(:last-child) {
            margin-bottom: 8rem;
        }
          
        }@media screen and (min-width: 769px) {
            .reason-title h3 {
                font-size: 1.8rem;
                margin-bottom: 2rem;
            }
        }

    /*============================================================== セットアップ紹介*/
        .pick-style_setup-coord {
            margin-block: 5rem;
        }
        /*見出し*/
        .setup-title-wrapper {
            text-align: center;
        }
        .setup-title-wrapper h2 {
            font-size: 2.5rem;
        }
        .setup-title-wrapper span {
            color: #e2bfb8;
        }
        .detail-comment h3 {
            font-size: 1.4rem;
            margin-block: 2rem;
        }
        .detail-comment .text-contents {
            color: #d7d7d7;
        }
        /*BA*/
        .setup_before-after {
            margin-top: 4rem;
        }
        .setup_before-after ul {
            display: flex;
            align-items: center;
            gap: 1rem;
            text-align: center;
            margin: 0;
        }
        .setup_before-after h4 {
            text-align: center;
            font-size: 1.4rem;
            border-bottom: solid 1px;
            width: fit-content;
            margin-inline: auto;
            padding-bottom: 1rem;
        }
        .setup_before-after ul h5 {
            margin-block: 2rem 1rem;
            letter-spacing: .1rem;
        }

    /*============================================================== ストレスフリー部分*/

        .maintenance-lists::before {
            content: "";
            border-left: solid 1px #866761;
            width: 1px;
            height: 5rem;
            display: block;
            margin-inline: auto;
            margin-block: 3rem;
        }
        .maintenance-lists li {
            width: 90%;
            background: #fff;
            padding: 2rem;
            margin-bottom: 1rem;
            margin-inline: auto;
        }
        .maintenance-lists li .text-wrapper .below-title {
            text-align: justify;
        }
        .feature-bottom_maintenance .point-title {
            display: block;
            margin-top: 0;
            text-align: center;
            color: #866761;
        }
        .feature-bottom_maintenance .point-title h3 {
            margin: 0;
            font-size: 1.4rem;
        }
        .feature-bottom_about-cloth {
            background: #fff;
            padding: 2rem;
        }
        .feature-bottom_about-cloth .text-contents.below-title {
            margin-block: 2.5rem;
        }


        @media screen and (min-width: 769px) {
            .maintenance-lists li {
                align-items: center;
                display: flex;
                gap: 2rem;
            }
            .maintenance-lists li .text-wrapper, 
            .maintenance-lists img, 
            .maintenance-lists video {
                width: 50%;
            }
        }

    /*============================================================== カラーバリエーション紹介*/
        .pickup_color-variation {
            margin-block: 10rem;
        }
        .simple-table caption {
            caption-side: unset;
            padding: 0;
            margin-block: 0 2rem;
            text-align: center;
            color: #1c1c1c;
        }
        .color-list-wrapper {
            width: 100%;
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            /*scrollbar-width: none;*/
            -ms-overflow-style: none;
        }
        .color-list-contents {
            display: inline-flex;
            width: 90%;
            gap: 3rem;
        }
        .color-list-contents .color-item {
            flex: 0 0 90%;
            scroll-snap-align: start;
        }
        .color-list-contents .color-item figcaption {
            text-align: center;
            margin-top: 2rem;
            font-weight: 600;
            font-size: 1.5rem;
        }

    /*============================================================== table*/
        .simple-table th, .simple-table td,
        .pants-table th, .pants-table td {
            border: solid 1px;
            padding: .7rem;
            text-align: center;
        }
        .simple-table {
            width: 100%;
        }

    /*============================================================== ディレクター話*/
        .product-develop-episode .text-contents {
            margin-block: 3rem 0;
        }

    /*============================================================== お客様の声*/
        .user-voice-contents {
            margin-top: 6rem;
        }
        .user-voice-list {
            background: #fff;
            margin: 0 0 2rem;
            padding-block: 3rem;
        }
        .user-voice-contents .below-title {
            text-align: center;
            margin: 1rem 0 3rem;
        }
        .user-voice-list h3 {
            position: relative;
            width: fit-content;
            padding: 1.2rem 4rem;
            border-bottom: 1px solid #333;
            background-color: #fff;
            margin-inline: auto;
            margin-bottom: 3rem;
            font-size: 1.4rem;
        }
        .user-voice-list h3::before, 
        .user-voice-list h3::after {
            position: absolute;
            top: 100%;
            left: 50%;
            content: "";
            height: 0;
            width: 0;
        }
        .user-voice-list h3::before {
            border: 12px solid;
            border-color: transparent;
            border-top-color: black;
            margin-left: -12px;
        }
        .user-voice-list h3::after {
            border: 10px solid;
            border-color: transparent;
            border-top-color: white;
            margin-left: -10px;
        }
        .user-voice-list li {
            padding-inline: 3rem;
        }
        .user-voice-list li:nth-of-type(1) {
            margin-bottom: 3rem;
        }
        .user-voice-list li p {
            text-align: justify;
            margin-bottom: 0;
        }
        .review-meta {
            text-align: end;
            color: #999;
        }

    /*============================================================== サービス紹介*/
        .auen-service {
            margin-block: 7rem;
        }
        .service-list .service-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2rem;
        }
        .service-title h3 {
            font-size: 1.8rem;
            color: #866761;
        }
        .service-list .below-title {
            width: 80%;
            margin-inline: auto;
        }
        @media screen and (min-width: 769px) {
            .service-list {
                display: flex;
                margin-block: 5rem;
                align-items: flex-start;
            }
            .service-list li {
                width: 50%;
            }
        }

    /*============================================================== シルエットラインナップ*/
        .pants-table {
            width: 100%;
        }
        .bottoms-lineup .sec-main-title {
            margin-block: 2rem 0;
        }

        .bottoms-lineup .sec-main-text-box {
            text-align: center;
            margin-bottom: 5rem;
        }
        .bottoms-image {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin: 0;
            text-align: center;
        }
        .bottoms-image h3 {
            color: #e2bfb8;
            font-size: 1.4rem;
        }
        .bottoms-lineup-wrapper {
            margin-bottom: 2rem;
        }   

    /*============================================================== 旧新デザイン比較*/
        .simple-table.comparison td:nth-of-type(3) {
            text-align: left;
        }
        .simple-table.comparison td:nth-of-type(2) {
            width: 15%;
        }
        .bg-col-gray {
            background: #dfd4ce;
        }
        .old-new-comparison {
            margin-block: 8rem;
        }
        .old-new-comparison-img {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }
        .old-new-comparison-img figcaption {
            text-align: center;
            margin-block: 1rem;
            font-weight: 600;
        }

/*上部初回CSSここまで*/




/* --------------------------------------------------------------------------------------------------------その他補足 */
    ruby {
        ruby-align: center;
    }

/* --------------------------------------------------------------------------------------------------------メイン見出し */
    .sec-main-title {
        font-weight: 600;
        font-family: 'FP-こぶりなゴシック StdN W6';
        color: #384967;
        margin-bottom: 1.5rem;
    }
    .sec-main-title span {
        font-weight: 300;
        font-family: 'FP-こぶりなゴシック StdN W3';
    }
    #product-page_auen-first .sec-main-title.nocolor {
        color: #212721;
        font-size: 2.8rem;
        line-height: 1.3;
    }
    .sec-main-title.nocolor span {
        font-size: 1.7rem;
    }

    @media screen and (min-width: 769px) {
        .sec-main-title {
            font-size: 30px;
            margin-bottom: 2rem;
        }
        .sec-main-title span {
            font-size: 16px;
        }
        #product-page_auen-first .sec-main-title.nocolor {
            font-size: 4rem;
        }
        .sec-main-title.nocolor span {
            font-size: 2.2rem;
        }
    }

/* --------------------------------------------------------------------------------------------------------見出し直下テキスト */
    #product-page_auen-first .title-under-text {
        margin-block: 1.2rem 2rem;
    }
    #product-page_auen-first .title-under-text p {
        text-align: center;
        font-size: 1.4rem;
        letter-spacing: 0;
        line-height: 1.5;
        margin: 0;
    }
    #product-page_auen-first .easy-pants-key-features .title-under-text p {
        text-align: left;
    }
    @media screen and (min-width: 769px) {
        #product-page_auen-first .title-under-text {
            margin-block: 4rem 8rem;
        }
        #product-page_auen-first .easy-pants-key-features .title-under-text {
            margin: 0;
        }
        #product-page_auen-first .title-under-text p {
            font-size: 1.8rem;
        }
        #product-page_auen-first .title-under-text p {
            line-height: 1.8;
        }
    }

/* --------------------------------------------------------------------------------------------------------メインビジュアル */
    .first-mainv {
        margin-inline: calc(50% - 50vw);
        padding-block: 5rem 2rem;
        background: #e6f0f9;
    }
    @media screen and (min-width: 769px) { 
        .first-mainv img {
            width: 700px;
            margin-inline: auto;
            display: block;
        }
    }

/* --------------------------------------------------------------------------------------------------------売れている理由 */
    .easy-pants-key-features {
        margin-top: 2rem;
    }
    .easy-pants-key-features::after {
        content: "";
        height: 80px;
        border-left: solid 1px;
        display: block;
        margin-inline: auto;
        margin-block: 5rem;
        width: 1px;
    }
    .easy-pants-key-features .left-title span {
        font-size: 2.85rem;
        display: block;
    }
    #product-page_auen-first .easy-pants-key-features .left-title {
        font-weight: 600;
        font-family: 'FP-こぶりなゴシック StdN W6';
        margin: 0;
        font-size: 2rem;
        line-height: 1.3;
    }
    #product-page_auen-first .reason-list {
        counter-reset: number 0;
    }
    #product-page_auen-first .reason-list li {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin: 0;
    }
    #product-page_auen-first .reason-list li:nth-child(2) {
        margin-block: 1rem;
    }
    #product-page_auen-first .reason-list li img, 
    #product-page_auen-first .reason-list li .reason-title {
        width: 50%;
    }
    #product-page_auen-first .reason-list li .reason-title {
        font-size: 1.65rem;
        margin: 0;
        line-height: 1.4;
    }
    #product-page_auen-first .reason-list li .reason-title::before {
        counter-increment: number 1;
        content: "reason" counter(number);
        display: block;
        margin-bottom: 10px;
        font-size: 1.4rem;
        font-family: 'Butler';
        color: #6684ba;
        letter-spacing: 1px;
    }

    @media screen and (min-width: 769px) {
        .key-feature-flexbox {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-block: 5rem;
            gap: 30px;
            margin-inline: calc(20% - 20vw);
        }
        #product-page_auen-first .easy-pants-key-features .left-title {
            font-size: 2.5rem;
        }
        .easy-pants-key-features .left-title span {
            font-size: 4.8rem;
        }
        
        #product-page_auen-first .reason-list {
            display: flex;
            margin-inline: calc(20% - 20vw);
            justify-content: center;
            gap: 2rem;
            align-items: baseline;
        }
        #product-page_auen-first .reason-list li {
            flex-direction: column;
        }
        #product-page_auen-first .reason-list li .reason-title {
            text-align: center;
        }
        #product-page_auen-first .reason-list li img, 
        #product-page_auen-first .reason-list li .reason-title {
            width: 80%;
        }
        #product-page_auen-first .reason-list li .reason-title::before {
            font-size: 1.8rem;
        }
        #product-page_auen-first .reason-list li .reason-title {
            font-size: 2rem;
        }
    }

/* --------------------------------------------------------------------------------------------------------悩み問いかけセクション */
    .troubles-sec p {
        text-align: center;
        font-size: 1.75rem;
        margin-block: 30px;
    }
    .troubles-sec img + img {
        margin-top: 25px;
    }
    @media screen and (min-width: 769px) {
        /*横幅余白広げ*/
        .troubles-sec {
            margin-inline: calc(10% - 10vw);
        }
        .troubles-sec p {
            font-size: 23px;
            margin-block: 70px;
        }
        /*1枚目画像サイズ調整*/
        .troubles-sec p + img {
            width: 60%;
            margin-inline: auto;
            display: block;
        }
        .troubles-sec img + img {
            margin-top: 50px;
            width: 80%;
            max-width: 650px;
            display: block;
            margin-inline: auto;
        }
    }

/* --------------------------------------------------------------------------------------------------------CODEパンツとは */
    .about-code-pants.renewal {
        border-block: solid 1px;
        padding-block: 2rem;
        margin-bottom: 5rem;
    }
    @media screen and (min-width: 769px) {
        .about-code-pants.renewal {
            padding-block: 40px;
        }
        .about-code-pants h4 {
            font-size: 18px;
        }
    }

/* --------------------------------------------------------------------------------------------------------選ばれる理由 */
    .feature-bottom_maintenance .point-title h3 {
        font-size: 1.6rem;
    }
    .maintenance-lists li .text-wrapper .below-title {
        width: 85%;
        margin-inline: auto;
    }
    .feature-bottom_maintenance {
        margin-inline: calc(50% - 50vw);
        padding-block: 40px 2rem;
    }
    .feature-bottom_maintenance .sec-main-title {
        color: inherit;
    }
    .maintenance-lists li img + video {
        margin-top: 20px;
    }
    .add-video-title {
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        font-family: 'FP-こぶりなゴシック StdN W6';
        border-bottom: solid 1px;
        margin-block: 15px;
        width: fit-content;
        margin-inline: auto;
    }
    @media screen and (min-width: 769px) {
        .feature-bottom_maintenance .point-title h3 {
            font-size: 22px;
        }
        .maintenance-lists li .text-wrapper .below-title {
            margin-block: 25px;
        }
        .maintenance-lists {
            width: 750px;
            margin-inline: auto;
        }
        .maintenance-lists li {
            display: block;
            padding: 40px;
        }
        .maintenance-lists li .text-wrapper, 
        .maintenance-lists img, 
        .maintenance-lists video {
            width: 100%;
        }
    }

/* --------------------------------------------------------------------------------------------------------着こなし自由自在 */

    .simple-style-guide {
        margin-block: 6rem 7rem;
    }
    #product-page_auen-first .scene-style-sample {
        display: flex;
        position: relative;
        padding-bottom: 45px;
        margin-block: 3rem;
        justify-content: space-between;
    }
    .simple-style-guide .sec-main-title.nocolor {
        width: fit-content;
        border-bottom: solid 2px;
        margin-inline: auto;
    }
    #product-page_auen-first .scene-style-sample li {
        width: 30%;
    }
    #product-page_auen-first .scene-style-sample li:nth-child(2) {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        bottom: 0;
    }
    #product-page_auen-first .scene-style-sample li img {
        height: 225px;
        object-fit: cover;
    }
    #product-page_auen-first .scene-style-sample li .scene-style-name {
        font-family: 'Butler';
        font-size: 1.8em;
        margin: 0;
        letter-spacing: 0;
        line-height: 1.2;
        color: #6684ba;
    }
    @media screen and (min-width: 769px) {
        .simple-style-guide {
            margin-inline: calc(20% - 20vw);
        }
        #product-page_auen-first .scene-style-sample {
            padding-bottom: 0;
            margin-block: 7rem;
        }
        #product-page_auen-first .scene-style-sample li {
            position: relative;
        }
        #product-page_auen-first .scene-style-sample li img {
            height: 100%;
        }
        #product-page_auen-first .scene-style-sample li .scene-style-name {
            font-size: 3.3em;
            position: absolute;
            left: -3rem;
            top: -4.5rem;
        }
    }

/* --------------------------------------------------------------------------------------------------------スタッフレビュー */
    
    #product-page_auen-first .staff-review-list {
        margin-inline: calc(50% - 50vw);
    }
    #product-page_auen-first .staff-review-list li {
        display: flex;
        gap: 1rem;
        align-items: center;
        box-shadow: 1px 1px 3px 0px #999;
        padding: 10px;
        margin: 10px 10px 20px;
        border-radius: 5px;
    }
    #product-page_auen-first .staff-review-list li img, 
    #product-page_auen-first .staff-review-list li .review-box {
        width: 50%;
    }
    #product-page_auen-first .staff-review-list li img {
        height: 260px;
        object-fit: cover;
    }
    #product-page_auen-first .staff-review-list .staff-spec {
        font-size: 1.6rem;
        font-weight: 600;
        font-family: 'FP-こぶりなゴシック StdN W6';
        margin: 0;
    }
    #product-page_auen-first .staff-review-list .staff-spec span {
        font-size: 1.1rem;
        padding-left: 3px;
    }
    #product-page_auen-first .staff-review-list .item-size {
        font-weight: 600;
        font-family: 'FP-こぶりなゴシック StdN W6';
        margin: 0 0 1rem;
    }
    #product-page_auen-first .staff-review-list .body-tag span {
        border: solid 1px #212721;
        border-radius: 100px;
        padding: 2px 5px;
        display: block;
        margin-block: 3px;
        width: fit-content;
        font-size: 1rem;
        font-weight: 600;
        font-family: 'FP-こぶりなゴシック StdN W6';
    }
    #product-page_auen-first .staff-review-list .review-comment {
        text-align: justify;
        word-break: break-all;
        letter-spacing: 0;
        margin-block: 0;
        background-color: #fff;
        background-image: linear-gradient(180deg, #ccc 1px, transparent 1px);
        background-size: 100% 1.8em;
        line-height: 1.8em;
        padding-bottom: 1px;
    }
    #product-page_auen-first .comment-title {
        margin-block: 1.5rem 3px;
        font-weight: 600;
        font-family: 'FP-こぶりなゴシック StdN W6';
    }
    @media screen and (min-width: 769px) {
        #product-page_auen-first .staff-review-list {
            margin-inline: unset;
        }
        #product-page_auen-first .staff-review-list li img {
            height: 100%;
        }
        #product-page_auen-first .staff-review-list li {
            padding: 3rem;
            gap: 3rem;
            margin-bottom: 5rem;
            box-shadow: 3px 3px 8px #999;
        }
        #product-page_auen-first .staff-review-list .body-tag span {
            margin: 0;
        }
        #product-page_auen-first .staff-review-list .review-box .body-tag {
            display: flex;
            gap: 1rem;
            align-items: center;
        }
    }

/* --------------------------------------------------------------------------------------------------------GRアイテム紹介スライダー */
    /* ---- Slider ---- */
    .slider-outer {
        width: 100%;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        margin-top: 5rem;
    }
    .slider-outer.is-dragging { 
        cursor: grabbing; 
    }

    .slider-track {
        display: flex;
        will-change: transform;
    }

    /* ---- Card ---- */
    #product-page_auen-first .card {
        flex-shrink: 0;
        width: 220px;
        margin-right: 20px;
        display: flex;
        flex-direction: column;
        border: none;
        border-radius: unset;
        margin-bottom: 0;
    }

    /* テンプレート置き場（非表示） */
    #card-templates { 
        display: none; 
    }

    .card-thumb {
        width: 100%;
        aspect-ratio: 3 / 4;
        background: var(--thumb-bg);
        border-radius: 2px;
        overflow: hidden;
        position: relative;
    }
    /* サムネイル未設定時のチェック柄プレースホルダー */
    .card-thumb.no-image::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
        linear-gradient(135deg, #bbb 25%, transparent 25%) -10px 0,
        linear-gradient(225deg, #bbb 25%, transparent 25%) -10px 0,
        linear-gradient(315deg, #bbb 25%, transparent 25%),
        linear-gradient(45deg,  #bbb 25%, transparent 25%);
        background-size: 20px 20px;
        background-color: #d8d8d8;
        opacity: 0.4;
    }
    .card-thumb img {
        width: 100%; height: 100%;
        object-fit: cover; display: block;
    }

    .card-label { 
        font-size: 10px; 
        letter-spacing: 0.12em; 
        color: var(--sub); 
        margin-bottom: 5px; 
        text-transform: uppercase; 
    }
    #product-page_auen-first .card-name {
        text-align: center;
        font-size: 1.5rem;
        font-weight: 600;
        font-family: 'FP-こぶりなゴシック StdN W6';
        margin-block: 1rem;
    }
    #product-page_auen-first .card-desc {
        font-size: 1.3rem;
        text-align: justify;
        word-break: break-all;
        letter-spacing: 0;
        margin-block: 0 1rem;
        flex: 1;
    }

    .card-btn {
        display: block;
        background: #212721;
        color: #fff;
        padding: 8px 18px;
        border: none;
        text-align: center;
        width: 65%;
        text-decoration: none;
        transition: background 0.2s;
        margin-inline: auto 0;
        border-radius: 100px;
        font-size: 1.4rem;
    }

    /* ---- Nav ---- */
    .slider-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 28px;
        padding: 0 24px;
    }
    .nav-btn {
        width: 36px; height: 36px;
        border-radius: 50%;
        border: unset;
        cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        transition: background 0.2s, border-color 0.2s;
        flex-shrink: 0;
    }
    .nav-btn svg { 
        stroke: #212721; 
        transition: stroke 0.2s; 
    }

    .progress-bar-wrap {
        flex: 1;
        max-width: 200px;
        height: 2px;
        background: #ddd;
        border-radius: 1px;
        overflow: hidden;
    }
    .progress-bar {
        height: 100%;
        background: #212721;
        border-radius: 1px;
        transition: width 0.35s ease;
    }
    .nav-count { 
        font-size: 12px; 
        color: var(--sub); 
        letter-spacing: 0.05em; 
        white-space: nowrap; 
    }

    /*スライド以外*/
    .top4-matching-items {
        margin-block: 6rem 8rem;
    }

    #product-page_auen-first .top4-matching-items .more-title h2 {
        text-align: center;
        font-size: 2.3rem;
        font-weight: 600;
        font-family: 'FP-こぶりなゴシック StdN W6';
        white-space: nowrap;
    }
    #product-page_auen-first .top4-matching-items .more-title h2 span {
        color: #cb333b;
    }
    .more-title .more-hukidashi {
        text-align: center;
        display: block;
        font-size: 1.5em;
        color: #cb333b;
        border: solid 2px;
        width: fit-content;
        padding: 3px 25px;
        margin-inline: auto;
        margin-bottom: 1.25rem;
        border-radius: 100px;
        position: relative;
        font-weight: 600;
        font-family: 'FP-こぶりなゴシック StdN W6';
    }
    .more-title .more-hukidashi::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        z-index: -1;
        width: 20px;
        height: 12px;
        box-sizing: border-box;
        background-color: #cb333b;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        translate: -50% 0;
    }


    @media screen and (min-width: 769px) {
        .slider-outer {
            overflow: hidden;
        }
        #product-page_auen-first .card {
            width: 250px;
        }
        .more-title .more-hukidashi {
            font-size: 2em;
        }
        #product-page_auen-first .top4-matching-items .more-title {
            margin-inline: calc(20% - 20vw);
        }
        #product-page_auen-first .top4-matching-items .more-title h2 {
            font-size: 4rem;
        }
        .card-btn:hover {
            color: #fff;
        }
    }

/* --------------------------------------------------------------------------------------------------------カラバリ */
    .color-variation {
        margin-block: 40px;
        margin-inline: calc(50% - 50vw);
        background: #f7efeb;
        padding: 2rem;
    }
    .feature-colors {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: space-between;
        width: 90%;
        margin-inline: auto;
    }
    .feature-colors li {
        width: 46.5%;
        text-align: justify;
    }
    .feature-colors li:nth-child(2) .color-title::after {
        color: #848c98;
    }
    .feature-colors li:nth-child(3) .color-title::after {
        color: #334f75;
    }
    .feature-colors li:nth-child(4) .color-title::after {
        color: #aa9b87;
    }
    .feature-colors .color-title::after {
        content: "";
        width: 20px;
        height: auto;
        display: block;
        border-bottom: solid 3px;
        padding-top: 5px;
        margin-inline: auto;
    }
    #product-page_auen-first .feature-colors .color-title {
        text-align: center;
        font-weight: 600;
        font-family: 'FP-こぶりなゴシック StdN W6';
    }
    #product-page_auen-first .feature-colors p {
        line-height: 1.5;
    }
    @media screen and (min-width: 769px) {
        .color-variation {
            margin-block: 100px;
            padding-block: 5rem;
        }
        .feature-colors {
            flex-wrap: nowrap;
            width: 980px;
            margin-inline: auto;
            gap: 30px;
        }
    }

/* --------------------------------------------------------------------------------------------------------お客さまの声 */
    .user-voice-addicon ul li {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 92%;
        margin-inline: auto;
    }
    .user-voice-addicon ul li:nth-child(even) {
        flex-direction: row-reverse;
        margin-block: 20px;
    }
    .user-voice-addicon ul li img {
        width: 15%;
        margin-top: 3px;
    }
    .user-voice-addicon ul li .voice-text {
        width: 80%;
        padding: 4%;
        position: relative;
        background: #f7efeb;
    }
    .user-voice-addicon ul li .voice-text::before {
        content: "";
        position: absolute;
        top: 10px;
        left: -20px;
        border: 10px solid transparent;
        border-right: 10px solid #f7efeb;
    }
    .user-voice-addicon ul li:nth-child(even) .voice-text::before {
        right: 0;
        left: 100%;
        border: 10px solid transparent;
        border-left: 10px solid #f7efeb;
    }
    .user-voice-addicon ul li .voice-text p {
        margin: 0;
        text-align: justify;
    }
    .user-voice-addicon ul li .user-spec {
        color: #999;
    }
    .user-voice-addicon ul li .user-spec::before {
        content: "- ";
    }
    .sec-main-title small {
        display: block;
        font-size: 11px;
    }

    @media screen and (min-width: 769px) {
        .user-voice-addicon {
            margin-top: 60px;
        }
        .user-voice-addicon ul {
            width: 80%;
            margin-inline: auto;
        }
        .user-voice-addicon ul li:nth-child(even) {
            margin-block: 30px;
        }
        .user-voice-addicon ul li img {
            width: 50px;
        }
        .user-voice-addicon ul li .voice-text {
            width: 85%;
        }
    }

/* --------------------------------------------------------------------------------------------------------サービス紹介 */
    .auen-service {
        background: #f7efeb;
        margin-inline: calc(50% - 50vw);
        padding-block: 40px;
    }
    .auen-service .sec-main-title {
        color: inherit;
    }
    .service-list .below-title {
        text-align: justify;
    }
    .service-list li {
        margin-block: 20px;
    }
    @media screen and (min-width: 769px) {
        .auen-service {
            margin-inline: unset;
        }
        .service-list {
            margin-bottom: 0;
        }
        .service-list li {
            margin-block: 0;
        }
    }