/* ========== Base ========== */

html,
body {
    overflow-x: hidden;
}

:root {
    --container-max: 1200px;
    --container-pad: 16px;
}

.container {
    width: min(100% - (var(--container-pad) * 2), var(--container-max));
    margin-inline: auto;
}

@media (max-width: 1200px) {
    .container {
        padding: 0 3%;
    }
}

@media (max-width: 767.98px) {
    .container {
        width: 86%;
        padding: 0;
    }

}

/* ========== Typography ========== */
p {
    font-family:
        "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
}

/* ========== Header (minimal) ========== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding-bottom: 10px;

  background: transparent; /* ← スクロール前は背景なし */
  transition: background-color 300ms ease, backdrop-filter 300ms ease;
}

header.is-bg-white{
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(6px); /* 任意 */
  }




header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
}

.logo img {
    width: 171.3946px;
    height: auto;
}




@media (max-width: 767.98px) {
    .header-nav {
        display: none;
    }
}

.header-cta {
    display: inline-block;
    width: 196px;
    height: 56px;
    background: #62bfbd;
    border-radius: 28px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    line-height: 56px;
    text-decoration: none;
    position: relative;
}



.header-cta.buy {
    background: #62bfbd;
}

.header-cta.contact {
    background: #dd992a;
}

.header-cta::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    position: absolute;
    top: 3px;
    right: -2px;
    z-index: -1;
}

.header-cta.buy::before {
    background: #ebb650;
}

.header-cta.contact::before {
    background: #7dc8c8;
}

.header-cta img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.header-cta.buy img {
    width: 46.4%;
}

.header-cta.contact img {
    width: 47.9%;
}

/* ========== MV ========== */
.mv {
    width: 100%;
}

.mv__picture,
.mv__img {
    display: block;
    width: 100%;
}

.mv__img {
    height: auto;
    object-fit: cover;
}

/* ========== Infinite Image Scroll (Marquee) ========== */
.marquee {
    width: 100%;
    overflow: hidden;
}

.marquee__viewport {
    width: 100%;
    overflow: hidden;
}

.marquee__track {
    display: flex;
    align-items: center;
    gap: 0;
    will-change: transform;
}

.marquee__item {
    flex: 0 0 auto;
    width: 190px;
    /* 無限スクロール用：1枚あたり190px */
    height: auto;
    display: block;
}

@media (max-width: 767px) {
    .marquee__item {
        width: 43vw;
        /* SP時：画面幅の43% */
    }
}


/* ========== benefit ========== */

.benefit {
    background: #d44f7a;
    padding: 100px 0;
    overflow: hidden;
}

.benefit .container {
    position: relative;
}


.benefit-title__picture {
    display: block;
    width: 40%;
    height: auto;
    margin-bottom: 49px
}

.benefit-title__img {
    display: block;
    width: 100%;
    height: auto;
}

.benefit-text__picture {
    display: block;
    width: 36.9%;
    margin-bottom: 39px
}

.benefit-text__img {
    display: block;
    width: 100%;
    height: auto;
}

.benefit-badge__picture {
    display: block;
    width: 24%;
    height: auto;
}

.benefit-woman__img {
    width: 71.8%;
    position: absolute;
    right: -6.9%;
    bottom: -100px;
}


@media (max-width: 767.98px) {
    .benefit {
        padding: 60px 0 0;
        overflow: hidden;
    }

    .benefit-title__picture {
        width: 84%;
        margin-bottom: 35px;
    }

    .benefit-text__picture {
        width: 80%;
    }

    .benefit-badge__picture {
        width: 71%;
        position: absolute;
        left: 50%;
        bottom: 17px;
        transform: translate(-50%, 0);
        z-index: 2;
    }

    .benefit-woman__img {
        width: 126vw;
        max-width: initial;
        position: initial;
        transform: translateX(-7%);
    }
}




/* ========== before-after ========== */


.before-after {
    background-image: url("../images/before-after-bk_1@2x.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    padding: 120px 0 82px;
    overflow: hidden;
}

.before-after-title {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: clamp(24px, 4.6cqw, 42px);
    font-weight: bold;
    line-height: 1.73;
    letter-spacing: 0.05em;
    color: #9b638f;
    margin-bottom: 47px;
}

.txt-brush__container {
    position: relative;
    width: 100%;
    margin-bottom: 82px;
}

.before-after-text {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 0.05em;
    max-width: 58%;
}

.brush__img {
    position: absolute;
    bottom: -36px;
    right: -6.3%;
    width: 33vw;
}

.brush-sp__container {
    display: none;
}

.before-after__container {
    display: flex;
    justify-content: center;
    gap: 10%;
    width: 66.5%;
    margin: 0 auto;
}

.before-after__container img {
    width: 44.8%;
}

.before-after-text-note {
    width: 66.5%;
    margin:0 auto;
    font-size: 12px;
    line-height: 1.57;
    letter-spacing: 0.05em;
    text-align: right;
    color: #000;
    margin-top: 10px;
}

@media (max-width: 767.98px) {
    .before-after {
        padding: 50px 0 50px;
        background-image: url("../images/before-after-bk-sp@2x@2x.webp");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        overflow: hidden;
    }

    .before-after-title {
        font-size: clamp(20px, 7.38cqw, 40px);
        margin-bottom: 30px;
        line-height: 1.57;
    }

    .before-after-title .sp-content{
        display: block;
    }

    .txt-brush__container {
        margin-bottom: 22px;
    }

    .brush-sp__container {
        display: block;
        margin-bottom: 85px;
        position: relative;
    }

    .brush-sp__container .brush-sp__img {
        width: 93%;
        transform: translateX(34%);
    }

    .flare-sp__img {
        display: block;
        position: absolute;
        top: -98%;
        z-index: -1;
        width: 180%;
        transform: scale(2.12) translateX(3%);
    }

    .before-after-text {
        max-width: 100%;
    }

    .before-after-text .sp-content {
        display: block;
    }

    .brush__img {
        display: none;
        width: 93.6%;
        bottom: -103%;
        right: -20.3%;
    }

    .before-after__container {
        flex-direction: column;
    }

    .before-after__container {
        width: 83.1%;
    }

    .before-after__container img {
        width: 100%;
    }

    .before-after__container picture {
        width: 100%;
    }

    .before-after__container img:first-child {
        margin-bottom: 30px;
    }

    .before-after__container picture:first-child {
        margin-bottom: 30px;
    }

    .before-after-text-note {
        width: 83.1%;
        text-align: left;
    }
}

@media (max-width: 500px) {
    .brush__img {
        bottom: -35%;
    }
}


/* ========== tiktok ========== */

.tiktok {
    padding: 84px 0;
    background-image: url("../images/tiktok-bk@2x.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-color: #d44f7a;
}

.tiktok__container {
    width: 95.5%;
    margin: 0 auto;
    background: #fff;
    padding: 45px 0 30px;
    container-type: inline-size;
}

.tiktok__title {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: clamp(24px, 4.6cqw, 42px);
    font-weight: bold;
    line-height: 1.42;
    letter-spacing: 0.05em;
    text-align: center;
    color: #d44f7a;
    position: relative;
    width: fit-content;
    margin: 0 auto 33px;
}

@supports not (font-size: 1cqw) {
    .tiktok__title {
        font-size: clamp(24px, 7vw, 42px);
    }
}

.tiktok__title-note {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.42;
    letter-spacing: 0.05em;
    text-align: center;
    color: #d44f7a;
    position: absolute;
    bottom: 20px;
    right: 0;
}

.tiktok__title::before {
    content: "";
    display: block;
    width: 2px;
    height: 90%;
    background: #d44f7a;
    position: absolute;
    left: -12%;
    bottom: -10px;
    transform: rotateZ(-26deg);
}

.tiktok__title::after {
    content: "";
    display: block;
    width: 2px;
    height: 90%;
    background: #d44f7a;
    position: absolute;
    right: -12%;
    bottom: -10px;
    transform: rotateZ(26deg);
}

.tiktok-img {
    --tiktok-gap: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 86.9%;
    margin: 0 auto;
    gap: var(--tiktok-gap);
}

.tiktok-img__img {
    width: 100%;
    aspect-ratio: 229 / 350;
}

.tiktok-img__img:last-child {
    margin-right: 0;
}

.tiktok-text {
    text-align: right;
    font-size: 10px;
    letter-spacing: 0.05em;
    line-height: 1.6;
    font-weight: 500;
    margin-top: 18px;
    width: 86.9%;
    margin: 18px auto 0;
}

.sp-content {
    display: none;
}



@media (max-width: 767.98px) {
    .tiktok {
        padding: 50px 0;
    }

    .tiktok__container {
        width: 100%;
        padding: 32px 0 17px;
    }

    .tiktok__title {
        font-size: clamp(20px, 5.263vw, 24px);
        /* 380px→20px（20/380*100=5.263） */
    }

    .tiktok__title::before {
        left: -4.5%;
        bottom: -5px;
    }

    .tiktok__title::after {
        right: -4.5%;
        bottom: -5px;
    }

    .tiktok-text {
        margin-top: 14px;
        text-align: left;
    }

    .tiktok-text .sp-content {
        display: block;
    }
}

/* ===== Lite YouTube Embed (TikTok section) ===== */
.lite-yt {
  position: relative;
  display: block;
  overflow: hidden;
  cursor: pointer;
  background: #000;

  /* 既存の .tiktok-img__img と合わせる */
  width: 100%;
  aspect-ratio: 229 / 350;
}

.lite-yt__thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.lite-yt__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.lite-yt__play::before {
  content: "";
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
}

.lite-yt__play::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.95);
  transform: translateX(3px);
}

.lite-yt__iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.lite-yt:focus {
  outline: 2px solid rgba(212, 79, 122, 0.7);
  outline-offset: 2px;
}



/* ========== cta ========== */


.cta {
    padding: 96px 0 92px;
    position: relative;
}

.cta__bg-left {
    background-image: url("../images/cta-bk-left@2x.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    width: 13.8%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.cta__bg-right {
    background-image: url("../images/cta-bk-right@2x.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    width: 5.1%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

.cta__container {
    width: 100%;
    background: #fff;
    border: 2px solid #d44f7a;
    padding: 5.5% 4.4%;
    position: relative;
}

.cta__title {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: clamp(24px, 4.6cqw, 42px);
    font-weight: bold;
    line-height: 1.42;
    letter-spacing: 0.05em;
    color: #d44f7a;
    position: relative;
    width: fit-content;
    margin-bottom: 20px;
}

.cta__title br.sp-content {
    display: none;
}

.cta__text .small {
    display: inline-block;
    font-size: 12px;
    transform: translate(-5px, -8px);
}

.cta__text {
    font-size: 22px;
    font-weight: bold;
    line-height: 1.81;
    letter-spacing: 0.05em;
    margin-bottom: 48px;
    font-weight: 500;
}

.product__detail {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.75;
    letter-spacing: 0.05em;
    margin-bottom: 58px;
    font-weight: 600;
}

.cta__button {
    display: block;
    width: 330px;
    height: 80px;
    background: #62bfbd;
    border-radius: 40px;
    position: relative;
}

.cta__button::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #ebb650;
    border-radius: 40px;
    position: absolute;
    top: 4px;
    left: 3px;
    z-index: 1;
}

.cta__button::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #62bfbd;
    border-radius: 40px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.cta_fukidashi {
    width: 44.5%;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.cta_text {
    width: 56.6%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}

.product-images {
    width: 48.5%;
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
}


/*.product-image__container{
    width: 44%;
    position: absolute;
    top: 50%;
    right: 11.7%;
    transform: translateY(-60%);
    z-index: 5;
}

.product-image__top{
    transform: translateX(19%);
}

.product-image__top-left_img{
    display: inline-block;
    width: 33%;
    transform: translateY(-18%);
    margin-right: 10px;
}

.product-top-img__top-right_img{
    display: inline;
    width: 57.8%;
}

.product-image__bottom{
    width: fit-content;
}

.product-image__bottom{
    display: flex;
}

.product-image__bottom-img{
    width: calc((100% - (4.5% * 4)) / 5);
    margin-right: 4.5%;
}*/


@media (max-width: 767.98px) {
    .cta {
        padding: 60px 0;
    }

    .cta__bg-left {
        background-image: url("../images/cta-bk-left-sp@2x.webp");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        width: 20.6%;
    }

    .cta__bg-right {
        background-image: url("../images/cta-bk-right-sp@2x.webp");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        width: 16.5%;
    }

    .product-images {
        position: initial;
        transform: initial;
    }

    .cta__container {
        display: flex;
        flex-direction: column-reverse;
        padding: 30px 4% 50px;
    }

    .product-images {
        width: 100%;
        margin: 0 auto 18px;
    }

    .product-images img {
        width: 100%;
    }

    .cta__title {
        font-size: clamp(20px, 10cqw, 22px);
    }

    .cta__title br.sp-content {
        display: block;
    }

    .cta__title .sp-content {
        display: block;
    }

    .cta__text {
        font-size: 16px;
        letter-spacing: 0.045em;
        line-height: 1.875;
        margin-bottom: 20px;
    }

    .cta__text .small {
        transform: translate(-5px, -4px);
    }

    .product__detail {
        font-size: 15px;
        letter-spacing: 0.045em;
        line-height: 1.73;
        margin-bottom: 50px;
    }

    .cta__button {
        max-width: 330px;
        min-width: 250px;
        width: 80%;
        height: 64px;
        margin: 0 auto;
    }

    .cta_text {
        width: 57%;
    }
}


/* ========== trouble ========== */

.trouble {
    padding: 95px 0 90px;
    background-color: #f9e5eb;
    background-image:
        linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size: 32px 32px;
}

.trouble__title {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: clamp(24px, 4.6cqw, 60px);
    font-weight: bold;
    line-height: 1.42;
    letter-spacing: 0.05em;
    color: #d44f7a;
    text-align: center;
    margin-bottom: 58px;
}

.trouble__list {
    width: 75%;
    margin: 0 auto;
    padding: 0;
}

.trouble__item {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}

.trouble__item-img {
    display: block;
    width: 33px;
    height: 29px;
    margin-right: 11px;
}

.trouble__item-text {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    display: block;
    width: calc(100% - 20px);
    font-size: 20px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #000000;
}

.trouble__item-text .strong {
    font-size: 24px;
    font-weight: 700;
    color: #d44f7a;
    background: linear-gradient(transparent 60%, #f1cc84 60%);
}

@media (max-width: 767.98px) {
    .trouble {
        padding: 50px 0;
    }

    .trouble__title {
        font-size: clamp(20px, 10cqw, 30px);
        line-height: 1.73;
        margin-bottom: 30px;
        margin-bottom: 40px;
    }

    .trouble__title .sp-content {
        display: block;
    }

    .trouble__list {
        width: 98%;
    }

    .trouble__item-img {
        width: 28px;
        height: 25px;
    }

    .trouble__item-text {
        font-size: 16px;
        font-weight: 500;
    }

    .trouble__item-text .strong {
        font-size: 16px;
    }

}


/* ========== reason ========== */

.reason {
    padding: 77px 0 67px;
    background: #d44f7a;
}

.reason {
    position: relative;
}

/* 次セクションへの誘導用三角 */
.reason::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -72px;
    /* 全部外に出す */
    transform: translateX(-50%);

    width: min(109px, 7.2%);
    height: 73px;

    background: #d44f7a;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    z-index: 10;
}

/* clip-path未対応ブラウザ用フォールバック */
@supports not (clip-path: polygon(50% 100%, 0 0, 100% 0)) {
    .reason::after {
        width: 0;
        height: 0;
        border-left: calc(min(109px, 7.2%) / 2) solid transparent;
        border-right: calc(min(109px, 7.2%) / 2) solid transparent;
        border-top: 73px solid #d44f7a;
        background: none;
        bottom: -73px;
    }
}


.reason .container {
    width: 86%;
}

.reason__txt {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.7;
    letter-spacing: 0.05em;
    color: #fff;
    text-align: center;
}

@media (max-width: 767.98px) {
    .reason {
        padding: 50px 0;
    }

    .reason::after {
        bottom: -57px;
        width: min(67px, 17.6%);
        height: 58px;
    }

    @supports not (clip-path: polygon(50% 100%, 0 0, 100% 0)) {
        .reason::after {
            border-left: calc(min(67px, 17.6%) / 2) solid transparent;
            border-right: calc(min(67px, 17.6%) / 2) solid transparent;
            border-top: 58px solid #d44f7a;
            bottom: -58px;
        }
    }

    .reason__txt {
        font-size: 20px;

        line-height: 2.2;
    }

    .reason__txt .sp-content {
        display: block;
    }
}





.stress-free {
    position: relative;
    padding: 140px 0 0;
    background: linear-gradient(90deg, #e6d9e2 0%, #ffffff 50%, #e6d9e2 100%);
}

.stress-free__title {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: clamp(40px, 4.6cqw, 60px);
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 0.05em;
    color: #9b638f;
    margin-bottom: 30px;
}

.stress-free__title .small {
    display: inline-block;
    font-size: 38px;
    color: #9b638f;
    transform: translateY(-17px);
}

.stress-free__title-en {
    display: block;
    width: 44%;
    padding-left: 11px;
}



.stress-free__container {
    display: flex;
    padding-top: 105px;
    padding-left: 4.3%;
}

.stress-free__img-container {
    width: 41.2%;
    position: relative;
}

.stress-free__text-container {
    padding-right: 4.3%;
    padding-bottom: 30px;
    margin-left: 2.1%;
    margin-top: -46px;
    position: relative;

}

.stress-free-brush {
    position: absolute;
    bottom: -100px;
    right: 0;
    width: 28.5vw;
}

.stress-free__text {
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 2.22;
    font-weight: 500;
}

.stress-free__text .strong{
    font-weight: 600;
    color: #9b638f;
}



.stress-free__text .small {
    display: inline-block;
    font-size: 10px;
    transform: translateY(-5px);
    padding: 0 2px;
}

.stress-free__list {
    margin: 34px 0;
    padding-left: 37px;
}

.stress-free__item {
    font-size: 22px;
    font-weight: 800;
    list-style: none;
    color: #9b638f;
    margin-bottom: 20px;
    padding-left: 26px;
    position: relative;
}

.stress-free__item::before {
    content: "";
    display: block;
    width: 14px;
    height: 16px;
    background-image: url("../images/stress-free-list-icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 10px;
    position: absolute;
    left: 0;
    top: 8px;
}

.stress-free__item:last-child {
    margin-bottom: 0;
}

.stress-free__text-note {
    margin-top: 34px;
    font-size: 10px;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.brush-features{
    padding: 100px 0 120px;
    display: flex;
}

.brush-features__item{
    width: calc(50% - 25px);
    max-width: 700px;
    margin-right: 50px;
}

.brush-features__item-title{
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    margin-bottom: 40px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 0.05em;
    color: #9b638f;
    position: relative;
}

.brush-features__item-title::before{
    content: "";
    width: 35px;
    height: 35px;
    background-image: url("../images/title-arrow-left.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    position: absolute;
    left: 40px;
    bottom: -35px;
}

.brush-features__item.right-item  .brush-features__item-title::before{
    background-image: url("../images/title-arrow-right.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.brush-features__item-title .small{
    display: inline-block;
    font-size: 16px;
    transform: translate(3px,-10px);
}

.brush-feature-detail{
    width: 100%;
    display: flex;
    align-items: flex-start;
}

.brush-feature-detail__img{
    width: 15.4%;
}

.brush-features__item.right-item .brush-feature-detail__img{
    width: 25%;
}

.brush-feature-detail__list{
    width: calc(100% - 15.4%);
}

.brush-features__item.right-item .brush-feature-detail__list{
    width: calc(100% - 25%);
}



.brush-feature-detail__item{
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: 20px;
    margin-bottom: 15px;
    font-weight: 600;
    position: relative;
    padding-left: 30px;
    list-style: none;
}

.brush-feature-detail__item:last-child{
    margin-bottom: 0;
}

.brush-feature-detail__item::before{
    content: "";
    display: block;
    width: 14px;
    height: 16px;
    background-image: url("../images/brush-feature-detail-icon.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(8px);
}

@media (max-width: 767.98px) {

    .brush-features{
        padding: 0;
    }
    .brush-features{
        flex-direction: column;
    }

    .brush-features__item.right-item{
        margin-top: 35px;
    }

    .brush-features__item{
        width: 100%;
    }

    .brush-features__item-title{
        font-size: 22px;
    }

    .brush-features__item-title::before{
        width: 25px;
        height: 25px;
        left: 31px;
    }

    .brush-feature-detail__list{
       padding-left: 5px;
    }

    .brush-feature-detail__img{
        width: 30%;
    }

    .brush-features__item.right-item .brush-feature-detail__img{
        width: 33.6%;
    }

    .brush-feature-detail__item{
        font-size: 15px;
    }
}


@media (max-width: 767.98px) {
    .stress-free {
        padding: 92px 0 50px;
    }

    .stress-free__title {
        font-size: clamp(20px, 7.4cqw, 40px);
        margin-bottom: 20px;
        text-align: center;
    }

    .stress-free__title .small {
        font-size: 16px;
        transform: translateY(-10px);
    }

    .stress-free__title br.sp-content {
        display: block;
    }

    .stress-free__title-en {
        width: 76%;
        padding-left: 0;
        margin: 0 auto;
    }


    .stress-free__container {
        padding-top: 30px;
        padding-left: 0;
        padding: 0 7%;
        margin-top: 32px;
        flex-direction: column;
    }

    .stress-free__img-container {
        width: 66.8%;
        margin: 0 auto;
    }

    .stress-free__text-container {
        padding-right: 0;
        margin-left: 0;
        margin-top: 23px;
    }

    .stress-free__text {
        font-size: 16px;
    }

    .stress-free__text .sp-content {
        display: block;
    }

    .stress-free__text br.pc-content {
        display: none;
    }

    .stress-free__text br.sp-content {
        display: block;
    }

    .stress-free__list {
        margin: 34px 0;
        padding-left: 0;
    }

    .stress-free__item {
        font-size: 17px;
    }

    .stress-free__item::before {
        top: 5px;
    }

    .stress-free-brush {
        display: none;
    }


    .stress-free-product__img.sp-content {
        display: block;
        position: absolute;
        bottom: -30px;
        right: -73%;
        width: 112.5%;
        max-width: initial;
    }
}


/* ========== stress-free-reason ========== */

.stress-free-reason {
    padding: 150px 0;
    background-image: url("../images/stress-free-reason-bg@2x.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

.stress-free-reason-title-container {
    width: fit-content;
    text-align: center;
    margin: 0 auto 88px;
}

.stress-free-reason__title {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: clamp(40px, 4.6cqw, 60px);
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 0.05em;
    color: #d44f7a;
    margin-bottom: 30px;
    text-align: center;
}

.stress-free-reason__title-en {
    width: 42%;
    margin: 0 auto;
}

.stress-free-reason-content {
    display: flex;
    flex-wrap: wrap;
    column-gap: 6%;
    /* 左右は%でOK */
    row-gap: clamp(16px, 4vw, 76px);
    /* 上下はpx系で安定 */
}


.stress-free-reason__item {
    width: calc(50% - 3%);
    background: #fff;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
    padding: 54px 3.1%;
    position: relative;
}

.stress-free-reason__item-num {
    width: 16.1%;
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-25%, -55%);
}

.stress-free-reason__item-ttl {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: clamp(20px, 4.6cqw, 24px);
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 0.05em;
    color: #d44f7a;
    margin-bottom: 20px;
}

.stress-free-reason__item-ttl-note {
    display: inline-block;
    font-size: clamp(12px, 4.6cqw, 16px);
    transform: translateY(-7px);
}

.stress-free-reason__item-txt-container {
    display: flex;
    gap: 4.6%;
}

.stress-free-reason__item-txt-img {
    width: 18.6%;
    min-width: 105px;
    max-height: 105px;
}

.stress-free-reason__item-txt {
    width: 81.4%;
}

.stress-free-reason__item-txt {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 2;
}

.stress-free-reason__text-note {
    font-size: 10px;
    font-weight: 500;
    line-height: 2.22;
    letter-spacing: 0.05em;
    margin-top: 34px;
}

@media (max-width: 767.98px) {
    .stress-free-reason {
        padding: 50px 0;
    }

    .stress-free-reason__title br.sp-content {
        display: block;
    }

    .stress-free-reason__title {
        font-size: clamp(20px, 7.4cqw, 40px);
        margin-bottom: 22px;
    }

    .stress-free-reason__title-en {
        width: 74%;
    }

    .stress-free-reason-title-container {
        margin-bottom: 56px;
    }

    .stress-free-reason-content {
        flex-direction: column;
        column-gap: 6%;
        row-gap: 46px;
    }

    .stress-free-reason__item {
        width: 100%;
        padding: 32px 6.9%;
    }

    .stress-free-reason__item-num {
        width: 20%;
        top: 0;
        left: 0;
        transform: translate(-10%, -50%);
    }

    .stress-free-reason__item-txt-img-sp {
        display: block;
        width: 31%;
        min-width: 105px;
        margin: 0 auto 10px
    }

    .stress-free-reason__item-txt-img {
        display: none;
    }

    .stress-free-reason__item-ttl {
        font-size: 20px;
    }

    .stress-free-reason__item-txt {
        width: 100%;
    }
}

/* ========== data ========== */

.data {
    padding: 140px 0 140px;
    background: #f0e8ee;
}

.data__title-container {
    width: fit-content;
    margin: 0 auto 98px;
}

.data__title {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: clamp(40px, 4.6cqw, 55px);
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 0.01em;
    color: #9b638f;
    margin-bottom: 30px;
    text-align: center;
}

.data__title-en {
    width: 49%;
    margin: 0 auto;
}

.data__content {
    position: relative;
}

.data__content-item-container {
    width: 72.9%;
    background: #9b638f;
    padding: 97px 49px 50px;
}

.data__content-img {
    width: 57.2%;
}

.data-txt {
    width: 45.7%;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 2;
    margin-top: 50px;
    font-weight: 500;
}

.data__note {
    font-size: 10px;
    margin-top: 50px;
}

.data__img {
    width: 58%;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(3%, 59px);
}

@media (max-width: 767.98px) {
    .data {
        padding: 50px 0;
    }

    .data__title {
        font-size: clamp(20px, 7.4cqw, 40px);
    }

    .data__title br.sp-content {
        display: block;
    }

    .data__title-en {
        width: 113%;
    }

    .data__content-item {
        width: 100%;
    }

    .data__content-item-container {
        width: 100%;
        padding: 33px 7.8% 25px;
    }

    .data__content-img {
        width: 100%;
    }

    .data-img-sp {
        display: block;
        transform: translate(24px, -24px);
    }

    .data-txt {
        width: 100%;
        margin-top: -20px;
    }

    .data__img {
        display: none;
    }

}


/* ========== recommend-voice ========== */

.recommend-voice {
    padding: 150px 0;
    background-image: url("../images/recommend-voice-bg@2x.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    position: relative;
}

.recommend-voice__title {
    font-size: 40px;
}

.recommend__title-container {
    width: fit-content;
    margin: 0 auto 98px;
}

.recommend__title-en {
    width: 82%;
    margin: 0 auto;
}

.recommend__title {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: clamp(40px, 4.6cqw, 60px);
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 0.01em;
    color: #d44f7a;
    margin-bottom: 30px;
    text-align: center;
}

.recommend-voice__content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 2%;
    row-gap: clamp(16px, 4vw, 20px);
    position: relative;
}

.recommend-voice__item {
    width: calc(50% - 1.6%);
    background: #fff;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
    padding: 44px 4.5%;
    position: relative;
}

.recommend-voice__item.nth-child4 {
    z-index: 3;
}

.recommend-voice__item-img {
    max-height: 54px;
    margin: 0 auto 25px;
}

.recommend-voice__item-text {
    font-size: 16px;
    line-height: 1.75;
    letter-spacing: 0.05em;
    font-weight: 500;
    margin-bottom: 23px;
}

.recommend-voice__item-name {
    font-size: 12px;
    line-height: 1.75;
    letter-spacing: 0.05em;
    font-weight: 500;
    color: #d44f7a;
}

.recommend-voice-img {
    position: absolute;
}

.recommend-voice-img.img01 {
    top: 17%;
    left: -17%;
    width: 20%;
}

.recommend-voice-img.img02 {
    top: -15%;
    right: -22%;
    width: 25.2%;
}

.recommend-voice-img.img03 {
    top: 42%;
    right: -25%;
    width: 28%;
    z-index: 2;
}

@media (max-width: 767.98px) {
    .recommend-voice {
        padding: 50px 0;
    }

    .recommend__title {
        font-size: clamp(20px, 7.4cqw, 40px);
    }

    .recommend__title-container {
        margin-bottom: 33px;
    }

    .recommend-voice__content {
        flex-direction: column;
        row-gap: clamp(30px, 4vw, 30px);
    }

    .recommend-voice__item {
        width: 100%;
        position: relative;
    }



    .recommend-voice-img {
        display: none;
    }

    .recommend-voice-img-sp-container {
        display: flex;
        margin-top: 40px;
        margin-bottom: 55px;
    }

    .recommend-voice-img.sp-content {
        display: block;
        position: initial;
    }

    .recommend-voice-img.sp-content.img01 {
        width: 35.2%;
    }

    .recommend-voice-img.sp-content.img02 {
        width: 45.7%;
        transform: translate(32px, 17px);
    }

    .recommend-voice-img.sp-content.img03 {
        width: 73%;
        margin: 0 auto;
    }


}

/* ========== customer-voice ========== */

.customer-voice {
    padding: 60px 0 0;
    background: #9b638f;
}

.customer-voice__content {
    background-color: #e6d8e3;
    background-image:
        linear-gradient(#fff 1px, transparent 1px),
        linear-gradient(90deg, #fff 1px, transparent 1px);
    background-size: 32px 32px;
}

.customer-voice__title-container {
    width: fit-content;
    margin: 0 auto 41px;
}

.customer-voice__title {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: clamp(40px, 4.6cqw, 60px);
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 0.01em;
    color: #fff;
    margin-bottom: 26px;
    text-align: center;
}

.customer-voice__title-en {
    width: 55.1%;
    margin: 0 auto;
}

.customer-voice__content {
    padding: 102px 0 126px;
}

.customer-review-container {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2.5%;
}

.customer-voice-img {
    height: auto;
    flex-shrink: 0;
    margin-bottom: 72px;
}

.amazon-review {
    width: 28%;
}

.customer-review {
    width: 30%;
}

.reviews-container {
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 10%;
}

/* ===== Reviews: horizontal scroll + always-visible custom scrollbar ===== */
.reviews-scroll-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 52px;
    /* バーをコンテンツの52px下に配置 */
}

.reviews-container {
    margin: 0 auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding-left: 10%;
    -webkit-overflow-scrolling: touch;

    /* ネイティブバーは隠す（常時表示のカスタムバーを使う） */
    scrollbar-width: none;
    /* Firefox */
}

.reviews-container::-webkit-scrollbar {
    height: 0;
    /* Chrome/Safari/Edge */
}

/* Always-visible bar */
.reviews-scrollbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    pointer-events: none;
}

.reviews-scrollbar__track {
    width: min(26%, 360px);
    /* 26% か 360px の小さい方 */
    height: 10px;
    background: #efefef;
    margin: 0 auto;
    position: relative;
    pointer-events: auto;
}

.reviews-scrollbar__thumb {
    position: absolute;
    left: 0;
    top: 0;
    height: 10px;
    background: #9b638f;
    width: 60px;
    /* JSで上書き */
    transform: translateX(0);
    cursor: grab;
    touch-action: none;
}

.reviews-scrollbar__thumb.is-dragging {
    cursor: grabbing;
}



.reviews {
    display: flex;
    gap: 2.25%;
    padding-top: 10px;

    /* 最後のカードの右側に“終端余白”を作る */
    padding-right: 10%;
}

/* flexの挙動でpaddingが効きづらいケース用の保険（終端スペーサー） */
.reviews::after {
    content: "";
    flex: 0 0 10%;
}

.review-item {
    width: 29%;
    min-width: 355px;
    background: #fff;
    padding: 71px 3.4% 35px;
    border: 1px solid #9b638f;
    position: relative;
}



.review-icon {
    width: 14%;
    position: absolute;
    top: -6px;
    right: 8%;
}

.review-text {
    font-size: 18px;
}

.review-star {
    margin-bottom: 22px;
}

.review-text-note {
    margin-top: 66px;
}

@media (max-width: 767.98px) {
    .customer-voice {
        padding: 30px 0 0;
    }

    .customer-voice__title-container {
        margin: 0 auto 31px;
    }

    .customer-voice__title {
        margin-bottom: 10px;
        font-size: clamp(20px, 7.4cqw, 40px);
    }

    .customer-voice__title-en {
        width: 60%;
        max-width: 91.3672px;
    }

    .customer-voice__content {
        padding: 42px 0 44px;
    }

    .customer-review-container {
        flex-direction: column;
    }

    .customer-voice-img {
        margin-bottom: 20px;
    }

    .amazon-review {
        width: 100%;
    }

    .customer-review {
        width: 100%;
    }

    .reviews-container {
        padding-left: 7%;
    }

    .reviews {
        gap: 18%;
        padding-right: 7%;
    }

    .review-item {
        width: 100%;
        min-width: 100%;
        padding: 71px 8.4% 49px;
    }

    .review-text {
        font-size: 16px;
    }

    .reviews-scrollbar__track {
        width: 85%;
        height: 20px;
    }

    .reviews-scrollbar__thumb {
        width: 50% !important;
        left: 0;
        transform: translateX(0);
        height: 20px;
    }

    .review-text-note br.sp-content {
        display: block;
    }

    .review-text-note {
        margin-top: 50px;
    }
}


/* ========== award ========== */

.award {
    padding: 150px 0;
    position: relative;
}

.award-brush-img01 {
    width: 17%;
    position: absolute;
    top: 0;
    left: 5.8%;
    z-index: -1;
}

.award-brush-img02 {
    width: 12.8%;
    position: absolute;
    bottom: 158px;
    right: 0;
    z-index: -1;
}

.award-brush-img03 {
    width: 17%;
    position: absolute;
    bottom: 0;
    left: 8.6%;
    z-index: -1;
}

.award__title-container {
    width: fit-content;
    margin: 0 auto 41px;
}

.award__title {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: clamp(40px, 4.6cqw, 60px);
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 0.01em;
    color: #d44f7a;
    margin-bottom: 38px;
    text-align: center;
}

.award__title-en {
    width: 67.9%;
    margin: 0 auto;
}

.award__item {
    display: flex;
    justify-content: center;
    column-gap: 5.3%;
    /* 左右は%でOK */
    row-gap: clamp(16px, 4vw, 76px);
    /* 上下はpx系で安定 */

    margin-bottom: 94px;
}

.award__item-img {
    width: calc((100% / 4) - 5.3%);
}

.award-list {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.award-list__title {
    background: #d44f7a;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 0.075em;
    position: relative;
    margin: 0;
}

/* ===== Award accordion (FAQと同仕様) ===== */
.award-acc__btn {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 24px 36px;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
}

/* SPは左右paddingだけ可変（FAQと同じ発想） */
@media (max-width: 767.98px) {
  .award-acc__btn {
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

}

.award-acc__text {
    display: block;
}

.award-acc__icon {
    width: 24px;
    height: 24px;
    position: relative;
    flex: 0 0 24px;
}

@media (max-width: 767.98px) {
    .award-acc__icon {
        width: 14px;
        height: 14px;
    }
}

.award-acc__icon::before,
.award-acc__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 2px;
    background: #fff;
    transform: translate(-50%, -50%);
    transition: transform 250ms ease, opacity 250ms ease;
}

@media (max-width: 767.98px) {
    .award-acc__icon {
        width: 14px;
        height: 14px;
    }

    .award-acc__icon::before,
    .award-acc__icon::after{
        width: 14px;
        height: 2px;
    }
}

/* 縦線（+ の縦棒） */
.award-acc__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* 開いたら「-」にする（縦棒を消す） */
.award-list.is-open .award-acc__icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scaleY(0.5);
}

/* 開閉アニメ用：ul自体はJSでheightを操作する */
.award-list__item {
    background: #f6dce4;
    padding: 43px 7.4% 50px;
}

.award-list__item {
    background: #f6dce4;
    padding: 43px 7.4% 50px;
}

.award-list__item-text {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    list-style: none;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 2.22;
    padding-left: 25px;
    margin-bottom: 20px;
    position: relative;
}

.award-list__item-text::before {
    content: "";
    background-image: url("../images/award-list-dot.svg");
    background-size: 100%;
    background-position: center;
    width: 14px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 10px;
}

@media (max-width: 767.98px) {
    .award {
        padding: 50px 0 100px;
    }

    .award__title {
        font-size: clamp(20px, 7.4cqw, 40px);
        margin-bottom: 20px;
    }

    .award__title-container {
        width: 100%;
        margin-bottom: 35px;
    }

    .award__title br.sp-content {
        display: block;
    }

    .award__title-en {
        width: 64.5%;
        max-width: initial;
    }

    .award__item {
        justify-content: center;
        width: 93%;
        gap: 13px;
        margin: 0 auto 28px;
    }

    .award__item-img {
        width: calc(100% / 4 - 13px);
    }

    .award-list__title {
        font-size: 18px;
        padding: 13px 6%;
    }

    .award-list__title::before {
        width: 14px;
        right: 11px;
    }

    .award-list__item {
        padding: 18px 7.2% 40px;
    }

    .award-brush-img01,
    .award-brush-img02,
    .award-brush-img03 {
        display: none;
    }

    .award-brush-img01-sp.sp-content,
    .award-brush-img02-sp.sp-content,
    .award-brush-img03-sp.sp-content {
        display: block;
        position: absolute;
    }

    .award-brush-img01-sp.sp-content {
        width: 20.5%;
        top: 0;
        left: 4.2%;
        z-index: -1;
    }

    .award-brush-img02-sp.sp-content {
        width: 44.2%;
        bottom: 29px;
        right: 0;
        z-index: -1;
    }

    .award-brush-img03-sp.sp-content {
        width: 31.5%;
        bottom: 0;
        left: 4.7%;
        z-index: -1;
    }

}


/* ========== product-info ========== */

.product-info {
    padding: 60px 0 0;
    background: #d44f7a;
}

.customer-voice__title-container {
    width: fit-content;
    margin: 0 auto 41px;
}

.product-info__title-en {
    width: 43%;
    margin: 0 auto;
}

.black-handle {
    background: #f9e5eb;
    padding: 97px 0 93px;
    position: relative;
}

.black-handle-bg {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    z-index: 1;
}

.black-handle__title {
    width: 44%;
    margin-bottom: 22px;
    position: relative;
    z-index: 2;
}

.product-info__detail-container {
    display: flex;
    z-index: 2;
}

.product-info__detail {
    width: 28%;
    margin-right: 3.4%;
    padding-top: 55px;
    z-index: 2;
}

.product-info__feature {
    width: 44%;
    margin-left: 6.4%;
    z-index: 2;
}

.product-info__detail-img {
    margin-bottom: 10px;
}

.product-name {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 20px;
}

.product-number {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;
}

.product-info__feature-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.55;
    margin-bottom: 25px;
    color: #d44f7a;
}

.product-info__feature-list {
    padding-left: 0;
    margin-bottom: 35px;
}

.product-info__feature-item {
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.78;
    padding-left: 14px;
    margin-bottom: 10px;
    position: relative;
}

.product-info__feature-item:last-child {
    margin-bottom: 0;
}

.product-info__feature-item::before {
    content: "・";
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.78;
    position: absolute;
    left: 0;
    top: 0;
}

.black-handle-img {
    width: 85.4%;
}

.black-handle.glitter {
    background-color: #fff;
    background-image: url("../images/glitter-bg@2x.webp");
    background-repeat: no-repeat;
    /* 縦だけリピート */
    background-position: center top;
    /* 左側に配置 */
    background-size: cover;
}

.glitter-title {
    width: 31.5%;
    margin-bottom: 58px;
}

.glitter-product-container {
    display: flex;
    column-gap: 9.5%;
    row-gap: 74px;
    flex-wrap: wrap;
    width: 60.2%;
}

.glitter-product-container .product-info__detail {
    width: 39.8%;
    padding-top: 0;
}

.glitter-feature {
    width: 39.8%;
    margin-left: clamp(30px, 8.1%, 140px);
}

.glitter-img {
    margin-bottom: 47px;
    width: 100%;
}

.keychain {
    background: #ebe0e9;
}

.keychain-title {
    width: 56.8%;
    margin-bottom: 60px
}

.keychain-product-container {
    display: flex;
}


.keychain-product-container .product-info__detail {
    padding-top: 0;
    margin-right: 6.3%;
}

.keychain-product-container .product-info__detail:last-child {
    margin-right: 0;
}

.keychain-product-container .product-info__detail-img {
    margin-bottom: 22px;
}

.keychain-feature {
    margin-left: clamp(30px, 5.5%, 140px);
}

.product-info__feature-text {
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 2;
    font-weight: 500;
    margin-bottom: 50px;
}

.keychain-feature .product-info__feature-item {
    margin-bottom: 3px;
}


@media (max-width: 767.98px) {
    .product-info {
        padding: 32px 0 0;
    }

    .customer-voice__title-container {
        width: 100%;
    }

    .product-info__title-en {
        width: 17.2%;
    }

    .black-handle {
        padding: 44px 0 54px;
        background-image: url("../images/black-handle-bg-sp@2x.webp");
        background-repeat: repeat-y;
        /* 縦だけリピート */
        background-position: right top;
        /* 左側に配置 */
        background-size: 17% auto;
    }



    .black-handle-bg {
        display: none;
    }

    .black-handle__title {
        width: 94.8%;
        margin-bottom: 50px;
    }

    .product-info__detail-container {
        flex-direction: column;
        gap: 47px;
    }

    .product-info__detail {
        width: 100%;
        margin-right: 0;
        padding-top: 0;
    }

    .product-info__feature {
        width: 100%;
        margin-left: 0;
    }

    .product-info__feature-title {
        font-size: 18px;
        margin-bottom: 16px;
    }

    .black-handle-img {
        width: 100%;
    }

    .product-name {
        margin-bottom: 13px;
    }

    .glitter-title {
        width: 68.48%;
    }

    .glitter-product-container {
        flex-direction: column;
        width: 100%;
    }

    .glitter-product-container .product-info__detail {
        width: 67%;
        margin: 0 auto;
    }

    .product-info__detail-img {
        margin-bottom: 24px;
    }

    .glitter-feature {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
    }

    .glitter-feature> :first-child {
        order: 1;
    }

    .glitter-img {
        margin-bottom: 0;
    }

    .black-handle.keychain {
        background-image: none;
    }

    .keychain .product-info__detail-container {
        gap: 63px;
    }

    .keychain-title {
        width: 80%;
    }

    .keychain-product-container {
        width: 100%;
        flex-direction: column;

    }

    .keychain-product-container .product-info__detail {
        width: 100%;
        margin: 0 auto 36px;
    }

    .keychain-product-container .product-info__detail:last-child {
        margin-bottom: 0;
    }

    .keychain-product-container .product-info__detail-img {
        width: 40.6%;
        margin: 0 auto 36px;
    }


}

/* ========== brand ========== */

.brand {
    padding: 150px 0 100px;
    background: #fff;
    position: relative;
}


.brand::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    /* top-left */
    width: 100%;
    height: clamp(120px, 11.73vw, 220px);

    background-image: url("../images/brand-bg@2x.webp");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;

    z-index: 0;
}

.brand>* {
    position: relative;
    z-index: 1;
}

.brand-content {
    display: flex;
}


.brand-img {
    width: 44.8%;
    margin-right: clamp(30px, 7.5%, 140px);
}

.brand-info {
    width: 55.2%;
    max-width: 402px;
}

.brand-info__title {
    width: 91%;
    margin-bottom: 45px;
}

.brand-info__text {
    width: 100%;
    margin-bottom: 18px;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.05em;
    line-height: 1.5;
}

.brand-info__text:last-child {
    margin-bottom: 0;
}

.brand-media {
    margin-top: 52px;
}

.brand-media__link {
    color: #d44f7a;
    display: inline-block;
    margin-right: 14px;
}

@media (max-width: 767.98px) {

    .brand {
        padding: 50px 0;
    }

    .brand::before{
        background-image: url("../images/brand-bg-sp@2x.webp");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
    width: 60vw;   /* ← 画面幅の60% */
    height: clamp(56px, 18.95vw, 100px);
      }

    .brand-content {
        display: flex;
        flex-direction: column-reverse;
        gap: 50px;
    }

    .brand-img {
        width: 100%;
    }

    .brand-info {
        width: 100%;
    }

    .brand-info__title {
        width: 83.6%;
        margin-bottom: 30px;
    }

    .brand-media {
        margin-top: 30px;
    }
}

/* ========== cta under ========== */

.cta.under{
    position: relative;
    padding-top: 0;
    padding-bottom: 156px;
}

.cta-under-img{
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100vw;
    z-index: -1;
}

@media (max-width: 767.98px) {
    .cta.under{
        padding-bottom: 78px;
    }
}

/* ========== faq ========== */

.faq{
    padding: 0 0 150px;
    background: #fff;
}

.faq__title-container{
    width: fit-content;
    margin:0 auto 76px;
}

.faq__title{
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: clamp(40px, 4.6cqw, 60px);
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 0.01em;
    color: #d44f7a;
    margin-bottom: 20px;
    text-align: center;
}

.faq__title-en{
    width: 16.4%;
    margin: 0 auto;
}

/* container */
.faq__container{
    max-width: 1000px;
    margin: 0 auto;
  }

  /* item spacing */
  .faq-item + .faq-item{
    margin-top: 39px;
  }

  /* ===== Q ===== */
  .faq-q{
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 12px;

    background: #d44f7a;
    color: #fff;

    padding: 23px 36px;
    border: none;
    cursor: pointer;
    text-align: left;
  }

  .faq-q__label{
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
  }

  .faq-q__text{
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
  }

  .faq-q__icon{
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-left: auto;
  }

  /* 横線 */
  .faq-q__icon::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 24px;
    height: 2px;
    background: #fff;
    transform: translateY(-50%);
  }

  /* 縦線（＋の縦棒） */
  .faq-q__icon::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 24px;
    background: #fff;
    transform: translateX(-50%);
    transition: opacity 0.2s ease;
  }

  .faq-item.is-open .faq-q__icon::after{
    opacity: 0; /* 縦線を消す → − */
  }

  .faq-q__icon::after{
    transition: opacity 0.2s ease;
  }

  /* ===== A ===== */
  .faq-a{
    background: #f6dce4;
    color: #d44f7a;
    overflow: hidden;
  }



  .faq-a__inner{
    padding: 23px 36px;
  }


  .faq-a__label{
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    display: block;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
    margin-bottom: 17px;
  }

  .faq-a__text{
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 0.05em;
    color: #000;
  }

  .faq-a__img{
    width: 100%;
    max-width: 500px;
    margin-bottom: 30px;
  }

  .faq-a__list{
    list-style: none;
    padding-left: 0;
    margin-top: 30px;
  }

  .faq-a__list li{
    display: flex;
    margin-bottom: 15px;
  }

  .faq-a__list li span{
    font-family: "Zen Kaku Gothic New",
        -apple-system,
        BlinkMacSystemFont,
        "Hiragino Kaku Gothic ProN",
        "Noto Sans JP",
        sans-serif;
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    font-size: 18px;
    color: #000;
  }

  .faq-a__list li span:first-child{
    margin-right: 5px;
  }

  @media (max-width: 767.98px) {
    .faq{
        padding: 0 0 50px;
    }

    .faq__title-container{
        margin:0 auto 30px;
    }

    .faq__title{
        font-size: clamp(20px, 7.4cqw, 40px);
        margin-bottom: 10px;
    }

    .faq__title-en{
        width: 13.5%;
    }

    .faq-q{
        padding: 18px 15px;
    }

    .faq-q__label{
        font-size: 16px;
    }

    .faq-q__text{

        font-size: 15px;
    }

    .faq-q__icon{
        width: 14px;
        height: 14px;
    }

    .faq-q__icon::before{
        width: 14px;
        height: 1px;
    }

    .faq-q__icon::after{
        width: 1px;
        height: 14px;
    }

    .faq-a__inner{
        padding: 16px ;
    }

    .faq-a__label{
        font-size: 16px;
        margin-bottom: 10px;
    }

    .faq-a__text{
        font-size: 15px;
    }

    .faq-a__list li span{
        font-size: 15px;
    }
  }

/* ========== footer ========== */


.footer-content-wrapper{
    background: #eeb9ca;
    padding: 50px 0 78px;
}

.footer-content{
    display: flex;
}

.footer-content__left{
    margin-right: 52px;
}

.footer-content__right{
    padding-top: 36px;
}

.footer-content__logo-container{
    display: flex;
    align-items: flex-end;
    margin-bottom: 30px;
}

.footer-content__logo{
    width: 100%;
    max-width: 176px;
    margin-right: 16px;
}

.footer-content__logo-container span{
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #000;
    transform: translateY(5px);
}

.footer-content__company-info{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.footer-content__company-info:last-child{
    margin-bottom: 0;
}

.footer-content__company-detail{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.copyright{
    font-size: 10px;
    letter-spacing: 0.05em;
    font-weight: 300;
    color: #d44f7a;
    text-align: center;
    padding: 10px 0 12px;
}

.footer-cta {
    display: none;
}


@media (max-width: 767.98px) {

    .footer-content{
        width: 100%;
        flex-direction: column;
    }

    .footer-content__left{
        margin-right: 0;
    }

    .footer-content__right{
        padding-top: 30px;
    }

    .footer-cta {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 7px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.8);
        z-index: 100;
        padding: 12px 5px 18px;
        box-sizing: border-box;
    }

    .footer-cta .header-cta {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    body {
        padding-bottom: 92px;
        /* fixed footer height(56) + padding(12*2) + 余白 */
    }
}


.comparison{
    padding: 100px 0 ;
}

.comparison__title{
    font-family: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    font-size: clamp(40px, 4.6cqw, 60px);
    font-weight: 700;
    line-height: 1.42;
    letter-spacing: 0.01em;
    color: #9B638F;
    margin-bottom: 30px;
    text-align: center;
}

.comparison__text{
    font-family: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    font-size: clamp(20px, 1.85vw, 30px);
    text-align: center;
    line-height: 1.5;
    letter-spacing: 0.01em;
    font-weight: 700;
    margin-bottom: 55px;
}

.comparison__text .strong{
    background: linear-gradient(transparent 60%, #f1cc84 60%);
}

.comparison__table-container{
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    overflow-x: scroll;
}

.comparison__table{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

.comparison__table th,
.comparison__table td{
    border: 1px solid #000000;
    text-align: center;
    padding: 10px ;
    min-width: 168px;
    white-space: nowrap;
}

.comparison__table th{
    background: #9B638F;
    color: #fff;
    font-weight: 700;
}

.comparison__table .bk_purple{
    background: #9B638F;
    color: #fff;
    font-weight: 700;
}

.comparison__table .bk_white{
    background: #fff;
}

.comparison__table .bk_pink{
    background: #F9E5EB;
}

.comparison__table .bold{
    font-weight: 700;
}

.scroll-arrow{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    width: 100%;
    max-width: 920px;
    text-align: right;
    margin: 10px auto 0;
}

.comparison__text-note{
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.05em;
    width: 100%;
    max-width: 920px;
    margin: 30px auto 0;
}




/* ===== Comparison table: left column sticky ===== */
.comparison__table-container {
  overflow-x: auto;
  position: relative;
}

.comparison__table {
  border-collapse: collapse;
  min-width: 700px; /* 横スクロール発生用（必要に応じて調整） */
}

/* 左側（項目名）固定 */
.comparison__table th:first-child,
.comparison__table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

/* ヘッダー行の左上セルはさらに前面 */
.comparison__table tr:first-child th:first-child {
  z-index: 3;
}

/* SPでスクロールヒント調整用（任意） */
@media (max-width: 767.98px) {

    .comparison{
        padding: 60px 0;
    }

    .comparison__title{
        font-size: clamp(20px, 7.4cqw, 40px);
    }

    .comparison__text{
        font-size: 16px;
    }

  .comparison__table {
    min-width: 900px;
  }

}

@media (max-width: 540px){
    .comparison__table th,
    .comparison__table td{
        font-size: 14px;
        max-width: 30px;
        padding:10px 7px;
        min-width: 0;
    }


}