@charset "utf-8";
    #main {
        background-image: url(../img/bk01.png);
        background-color: inherit;
    }

    main {
        inset: -40% -40%;
        background: linear-gradient(135deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .92) 45%, rgba(230, 230, 230, .55) 70%, rgba(255, 255, 255, .92) 100%);
    }
    /* ===== FEATURE ===== */

    #feature,
    #QUALITY {
        background-image: url(../img/bk01.png);
    }

    .feature {
        position: relative;
        background-position: bottom;
        overflow: hidden;
        padding: 3vw 0;
    }

    .feature__inner {
        position: relative;
        margin: 0 auto;
        text-align: center;
    }

    .feature__head {
        text-align: center;
        padding: 40px 0 10px;
    }
    /* 上下の細い縦線・横線 */

    .feature__line {
        display: block;
        margin: 0 auto;
        background: rgba(0, 0, 0, 0.2);
    }

    .feature__line--top {
        width: 1px;
        height: 66px;
        margin-bottom: 22px;
    }
    /* FEATURE */

    .feature__title {
        text-transform: uppercase;
        margin: 0;
        font-family: "Cormorant", serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.2em;
        /* ← スクショ寄せ */
        font-size: clamp(36px, 6vw, 60px);
        color: rgba(0, 0, 0, 0.55);
        line-height: 1;
    }
    /* TDCの特徴 */

    .feature__sub {
        margin: 14px 0 0;
        font-size: clamp(16px, 1.3vw, 30px);
        letter-spacing: 0.08em;
        color: rgba(0, 0, 0, 0.45);
        position: relative;
    }
    /* 左の線 */

    .feature__sub::before,
    .feature__sub::after {
        content: "";
        position: absolute;
        bottom: -14px;
        width: 46px;
        height: 1px;
        background: rgba(0, 0, 0, 0.35);
    }
    /* 左 */

    .feature__sub::before {
        left: 50%;
        transform: translateX(-60px);
    }
    /* 右 */

    .feature__sub::after {
        right: 50%;
        transform: translateX(60px);
    }

    .feature__divider {
        display: block;
        width: 46px;
        height: 1px;
        margin: 0 auto;
        background: rgba(0, 0, 0, .18);
    }
    /* 画像：右側が大きく丸くなる（スクショの形） */

    .feature__media {
        margin: 10px auto;
    }

    #feature .feature__media {
        margin: 60px auto;
    }

    .feature__media img {
        display: block;
        width: clamp(280px, 80%, 480px);
        margin: auto;
        height: auto;
        object-fit: cover;
    }

    #feature .feature__media img {
        display: block;
        width: 95%;
        height: auto;
        margin: 0;
    }
    /* テキスト */

    .feature__body {
        padding: 6px 8px 0;
        margin: 0 0 4em 0;
    }

    #feature .feature__body {
        padding: 6px 8px 0;
    }

    .feature__lead {
        margin: 12px 0;
        font-weight: 400;
        font-size: clamp(18px, 3.6vw, 24px);
        line-height: 1.7;
        color: rgba(0, 0, 0, .75);
    }

    .feature__text {
        margin: 0 auto 18px;
        font-size: clamp(16px, 3.0vw, 16px);
        line-height: 2.0;
        color: rgba(0, 0, 0, .55);
        padding: 0 8vw;
        text-align: left;
    }
    /* ボタン（アウトラインのピル＋矢印） */

    .feature__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: min(340px, 100%);
        height: 64px;
        margin: 30px auto;
        padding: 0 22px;
        border: 1px solid rgba(0, 0, 0, .18);
        border-radius: 9999px;
        background: rgba(255, 255, 255, .65);
        color: rgba(0, 0, 0, .65);
        text-decoration: none;
        font-size: clamp(14px, 2vw, 16px);
        letter-spacing: .02em;
        transition: transform .15s ease, background .15s ease;
        position: relative;
    }

    .feature__btnIcon {
        font-size: 25px;
        line-height: 1;
    }

    .feature__btnIcon {
        position: absolute;
        right: 22px;
    }

    .feature__btn:hover {
        background: rgba(255, 255, 255, .9);
        transform: translateY(-1px);
    }

    .trouble {
        background: #747b87;
        color: #fff;
        text-align: center;
        padding: 32px 16px 8px;
        position: relative;
    }
    /* 上のタイトル */

    .trouble__title {
        margin: 0 0 24px;
        letter-spacing: 0.15em;
        color: #fff;
    }
    /* リスト */

    .trouble__list {
        list-style: none;
        padding: 0;
        margin: 0 auto 32px;
        max-width: 520px;
    }

    .trouble__list li {
        background: #fff;
        color: #333;
        border-radius: 12px;
        padding: 14px 16px;
        margin-bottom: 14px;
        line-height: 1.6;
    }
    /* 下のテキスト */

    .trouble__footer {
        margin: 0;
        letter-spacing: 0.15em;
    }
    /* 下の逆三角形 */

    .trouble::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -39px;
        width: 100%;
        height: 40px;
        background: #747b87;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
    }

    .feature__lead__txt {
        margin: 60px auto;
    }

    .archi_img {
        margin: -30px 0 0 0;
    }

    .un_red_txt {
        text-align: center;
        padding: 7vw 0 3vw 0;
    }

    .un_red_txt img {
        width: clamp(280px, 80%, 480px);
        margin: 0 auto;
        border-bottom: 2px solid #C9867B;
        padding: 10px 0;
    }

    .un_red_txt .feature__text {
        border-bottom: 2px solid #C9867B;
        display: inline-block;
    }

    #About .archi_img {
        margin: 60px 0 -30px 0;
    }

    #About .archi_img img {
        width: clamp(280px, 80%, 480px);
        margin: 0 auto;
    }

    .en {
        text-transform: uppercase;
        margin: 0;
        font-family: "Cormorant", serif;
        font-optical-sizing: auto;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.2em;
    }

    .feature__nob {
        font-size: clamp(36px, 6.5vw, 60px);
        margin: 0;
        padding: 0;
        line-height: 1;
    }

    .feature__lead.en {
        font-size: clamp(28px, 6vw, 50px);
    }

    .artmake_eyebrow_vri {
        background-color: #F8F8F8;
        padding: 3vw 0;
        margin: 0 0 6vw 0;
    }

    .txt_lf {
        text-align: left;
    }

    #About .feature__body {
        margin: 0 0 2em 0;
    }

    #Artist {
        background-color: #6E7685;
        color: #fff;
    }

    #Artist h2 {
        color: #fff;
    }

    #Artist .feature__sub {
        color: #fff;
    }

    #Artist .feature__line {
        background: rgba(255, 255, 255);
    }

    #Artist .swiper-slide img {
        box-shadow: none;
    }

    #Artist .swiper-container {
        margin: 5em 0;
    }

    #Artist h3 {
        font-size: clamp(30px, 4.0vw, 45px);
    }

    #Artist h3.section-title {
        font-size: clamp(14px, 3.0vw, 16px);
    }

    #Artist .ins_icon_sm {
        width: 45px;
    }

    .treatment-section {
        width: fit-content;
        border-radius: 8px;
        font-family: sans-serif;
        margin-top: 1rem;
        margin: 0 auto;
    }

    .content ul.tag-list,
    .tag-list {
        padding: 20px 0;
    }

    #Artist .feature__sub::before,
    #Artist .feature__sub::after {
        background: rgba(255, 255, 255, 0.35);
    }

    .faq_list_first {
        margin-top: 6em;
    }

    .faq_list dt,
    .flow_list-text h3,
    .price_table thead th {
        font-size: clamp(14px, 3.0vw, 16px);
    }

    .faq_list dd,
    .flow_list-text p,
    .price_table .times,
    .price_table .yen,
    .price_table th,
    .price_table td {
        font-size: clamp(12px, 3.0vw, 14px);
    }

    .price_table th,
    .price_table td {
        padding: 1.5em 1em;
        vertical-align: middle;
        text-align: left;
        border: 1px solid #333;
    }

    .clinic_logo {
        width: clamp(280px, 80%, 480px);
        margin: 3em auto 3em;
    }

    span.wpcf7-list-item-label::after {
        top: 6px;
        left: 4.8px;
    }

    .main_img_price {
        margin: -110px auto 0 auto;
        position: relative;
        z-index: 3;
    }

    #worries .un_red_txt .feature__lead {
        border-bottom: 2px solid #C9867B;
        display: inline-block;
    }
    /* ===== 共通：スクロール出現（ぬるり） ===== */

    .reveal {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
        filter: blur(6px);
        transition: opacity 900ms cubic-bezier(.2, .9, .2, 1), transform 900ms cubic-bezier(.2, .9, .2, 1), filter 900ms cubic-bezier(.2, .9, .2, 1);
        will-change: opacity, transform, filter;
    }

    .reveal.is-inview {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
    /* ===== 文字：シマー（光が走る） ===== */

    .shimmer {
        position: relative;
        display: inline-block;
        /* 文字色は通常のまま */
    }
    /* “光”を疑似要素で重ねる（文字だけに当てる） */

    .shimmer::after {
        content: "";
        position: absolute;
        inset: -0.2em -0.6em;
        /* 文字の外側に少し余白 */
        pointer-events: none;
        /* 斜めの光帯 */
        background: linear-gradient( 110deg, transparent 0%, rgba(255, 255, 255, 0.0) 35%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.0) 65%, transparent 100%);
        /* 文字形状で切り抜く（Safari含めて両方） */
        -webkit-mask: linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0);
        /* “合成”で白飛びっぽい光に寄せる */
        mix-blend-mode: screen;
        opacity: 0;
        transform: translateX(-120%) skewX(-10deg);
        filter: blur(0.5px);
    }
    /* 表示タイミングで1回だけ走らせる */
    /* 文字の光：ゆっくり */

    .reveal.is-inview.shimmer::after {
        opacity: 1;
        animation: shimmer-sweep 1600ms ease-out 0ms 1 both;
        /* ← 900ms → 1600ms */
    }

    @keyframes shimmer-sweep {
        0% {
            transform: translateX(-120%) skewX(-10deg);
            opacity: 0;
        }
        15% {
            opacity: 0.9;
        }
        70% {
            opacity: 0.9;
        }
        100% {
            transform: translateX(120%) skewX(-10deg);
            opacity: 0;
        }
    }
    /* ===== 画像：ふわっと光る（入場時） ===== */

    .glow-img {
        position: relative;
        overflow: hidden;
    }
    /* 光レイヤー（共通） */

    .glow-img::after {
        content: "";
        position: absolute;
        inset: -6%;
        pointer-events: none;
        background: linear-gradient( 110deg, transparent 0%, rgba(255, 255, 255, 0.0) 40%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.0) 60%, transparent 100%);
        mix-blend-mode: screen;
        filter: blur(1px);
        opacity: 0;
        transform: translateX(-120%) skewX(-10deg);
    }
    /* 走る動き（共通） */

    @keyframes shimmer-run {
        0% {
            transform: translateX(-120%) skewX(-10deg);
            opacity: 0;
        }
        15% {
            opacity: 0.7;
        }
        50% {
            opacity: 0.9;
        }
        85% {
            opacity: 0.7;
        }
        100% {
            transform: translateX(120%) skewX(-10deg);
            opacity: 0;
        }
    }
    /* ===== 表示後にループON（共通） ===== */

    .reveal.is-inview.glow-img::after {
        opacity: 1;
        animation-name: shimmer-run;
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite;
    }
    /* ===== ここが使い分け（場所でクラス） ===== */

    .reveal.is-inview.glow-img.glow-slow::after {
        animation-duration: 5.5s;
        /* ゆっくり */
    }

    .reveal.is-inview.glow-img.glow-fast::after {
        animation-duration: 1.6s;
        /* 速い */
    }

    @keyframes shimmer-loop {
        0% {
            transform: translateX(-120%) skewX(-10deg);
            opacity: 0;
        }
        20% {
            opacity: 0.6;
        }
        50% {
            opacity: 0.9;
        }
        80% {
            opacity: 0.6;
        }
        100% {
            transform: translateX(120%) skewX(-10deg);
            opacity: 0;
        }
    }

    .form-data table td {
        font-size: clamp(12px, 3.0vw, 13px);
    }

    #form_input p {
        font-size: clamp(12px, 3.0vw, 13px);
    }

    .form-data {
        margin: 3em 0 0 0;
    }

    #form_input p.u-text-small {
        margin: 0 0 3em 0;
        font-size: clamp(12px, 3.0vw, 14px);
    }

    .form-data .hope>div>span {
        font-size: 12px;
    }

    .form-data select {
        padding: 0.5em 1.5em;
        font-size: 14px;
    }

    .form-data input[type="radio"],
    .form-data input[type="checkbox"] {
        flex-shrink: 0;
    }

    .u-text-right {
        text-align: left;
    }

    .link-img {
        display: inline-block;
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .link-img img {
        display: block;
    }
    /* 通常 */

    .link-img {
        transform: translateY(0) scale(1);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    }
    /* hover */

    .link-img:hover {
        transform: translateY(2px) scale(0.98);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
    }
    /* ===== アクセシビリティ：動きを減らす ===== */

    @media (prefers-reduced-motion: reduce) {
        .reveal,
        .reveal.is-inview {
            transition: none;
            transform: none;
            filter: none;
            opacity: 1;
        }
        .shimmer::after,
        .glow-img::after {
            display: none;
        }
    }

    @media (min-width: 768px) {
        .form-data table th {
            width: 30%;
            padding: 3rem 2rem;
            font-size: 1.4rem;
        }
    }

    @media screen and (max-width: 720px) {
        .main_img02 {
            padding: 10px 0;
        }
        #feature .feature__text {
            text-align: left;
        }
        #feature .feature__text br {
            display: none;
        }
        .feature__lead__txt {
            margin: 40px auto;
        }
        #CACE {
            margin: 0 0 -6em 0;
        }
        .un_red_txt {
            margin: 12vw 0 3vw 0;
        }
        .trouble__list .feature__lead {
            font-size: clamp(16px, 3.6vw, 24px);
        }
        .feature {
            padding: 6vw 0 0 0;
            margin: 0 0 6vw 0;
        }
        .artmake_eyebrow_vri {
            padding: 10vw 0;
        }
        #About .feature__body {
            margin: 0em 0 4em 0;
        }
        #About .artmake_eyebrow_vri .feature__body {
            margin: 0em 0 2em 0;
        }
        #Artist .swiper-container {
            margin: 3em 0 -5em 0;
        }
        #price {
            padding: 0 0;
        }
        main {
            margin: -15px 0 0 0;
        }
        #QUALITY .feature {
            margin: 0 0 3vw 0;
        }
        #Artist {
    padding: 6vw 0;
    margin: 0;
}
        #Artist {

}

    }