/*============================================================== 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.3rem;
    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;
}