@charset "UTF-8";

/* ========
    共通
======== */
html {
    font-size: 100%;
    /* scroll-behavior: smooth; */
}

body {
    font-family: 'shippori-mincho', serif;
    overflow-x: hidden;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    display: block;
}

a:hover {
    opacity: 0.8;
}

ul {
    list-style: none;
}

.title-font {
    font-size: min(12.8vw, 50px);
    text-align: center;
    font-weight: 400;
    font-family: 'Castoro Titling', serif;
}

.title-ja {
    font-size: min(8.97vw, 35px);
    font-weight: 500;
    text-align: center;
}

/* ========
    PC用/レイアウト
======== */
.bg_wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.bg_wrapper::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/bg_pc.webp');
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.side-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* add */
    position: fixed;
    top: 0;
    width: calc(50vw - 215px);
    height: 100vh;
}

.side-area.left-area {
    left: 0;
}

.side-area.right-area {
    right: 0;
}

.bg_logo,
.bg_cta {
    z-index: 10;
    display: block;
}

.bg_cta {
    width: min(80%, 600px);
}

.bg_logo {
    width: 56.1%;
}

/* メインコンテンツ */
.main-content {
    width: 100%;
    max-width: 430px;
    /* height: 100vh; */
    overflow-y: auto;
    overflow-x: hidden;
    background: #FFF5F5;
    z-index: 1;
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* add */
    margin-inline: auto;
}

/* ========
緑のCTAセクション
==========*/
.cta {
    position: relative;
    width: 94.62%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 10%;
}

.greencta_btn {
    display: block;
    width: 94.8%;
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.3s ease;
}

.greencta_btn:hover {
    transform: translateX(-50%) translateY(5px);
}

/* ==========
追従CTA
==========*/

.fixed-cta {
    position: fixed;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    width: 93%;
    max-width: 364px;
    z-index: 100;
    overflow: visible;
    transition: opacity 0.3s ease;
}

.fixed-cta-button {
    text-align: center;
    transition: opacity 0.3s ease;
}

.fixed-cta-button:hover {
    opacity: 0.9;
}

.fixed-cta img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    animation: moderate-pulse 3s ease-in-out infinite,
        moderate-glow 3s ease-in-out infinite;
}
/* ２つ並びの追従CTA */
.fixed-cta-twin {
    position: fixed;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%) translateY(15%);
    width: 97%;
    max-width: 385px;
    z-index: 100;
transition: bottom 0.5s ease;
}
.fixed-cta-twin.is-loaded {
  bottom: 3%;
}
.fixed-cta-twin a {
  display: inline-block;
  transition: transform 0.3s ease;
}
.fixed-twin a:hover {
  transform: scale(1.05);
  opacity: 1;
}
.fixed-twin {
    display: flex;
    gap: 6px;
}
.fixed-twin img {
    animation: none;
    width: 100%;
    height: 56px;
}
.fixed-cta-twin-bubble {
    width: auto;
    height: 34px;
    margin: 0 auto;
    animation: moderate-pulse 3s ease-in-out infinite,
    moderate-glow 3s ease-in-out infinite !important;
}
@keyframes moderate-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

@keyframes moderate-glow {
    0% {
        filter: drop-shadow(0 0 0 rgba(255, 245, 250, 0));
    }

    50% {
        filter: drop-shadow(0 0 10px rgba(255, 245, 250, 0.6));
    }

    100% {
        filter: drop-shadow(0 0 0 rgba(255, 245, 250, 0));
    }
}

/* ＝＝＝＝＝＝＝＝＝＝
アニメーション
＝＝＝＝＝＝＝＝＝＝＝＝ */
.zoom-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.zoom-in.active {
    opacity: 1;
    transform: scale(1);
}

.fade-up {
    overflow: hidden;
}

.fade-up > * {
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.8s ease, opacity 0.8s ease;
}

.fade-up.active > * {
    opacity: 1;
    transform: translateY(0);
}

/* 共通：フェード左右 */
.fade-left > *,
.fade-right > * {
  opacity: 0;
  transform: translateX(0); /* translateX は各クラスで上書き済み */
  transition: transform 1.5s ease, opacity 1.5s ease;
  transition-delay: 0s; /* デフォルト遅延0秒 */
}

/* 左フェード */
.fade-left > * {
  transform: translateX(-100%);
}

/* 右フェード */
.fade-right > * {
  transform: translateX(100%);
}

/* activeでフェードイン */
.fade-left.active > *,
.fade-right.active > * {
  opacity: 1;
  transform: translateX(0);
}

.trouble__bottom01 .fade-up > * {
    transition-delay: 0s;
}

.trouble__bottom02 .fade-up > * {
    transition-delay: 0.3s;
}

.trouble__bottom03 .fade-up > * {
    transition-delay: 0.6s;
}

.scroll-icon__wrapper {
    margin: 20px auto;
    max-width: 1000px;
    width: 85.7%;
}

.scroll-icon {
    margin: 0 0 0 auto;
    width: 16%;
    animation: scroll 2.5s infinite;
    transform: translateX(-50%);
}

@keyframes scroll {
    0% {
        transform: translateX(-50%);
    }

    35% {
        transform: translateX(0%);
    }

    70% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(-50%);
    }
}


/* ==============
アンケート
===============*/
.survey01, 
.survey02, 
.survey03 {
    width: 100%;
    height: 474px;
}

.survey04 {
    width: 100%;
    height: 490px;
}

.survey01 {
    background-image: url('../img/survey01.webp');
}
.survey02 {
    background-image: url('../img/survey02.webp');
}

.survey03 {
    background-image: url('../img/survey03.webp');
}

.survey04 {
    background-image: url('../img/survey04.webp');
}

.survey01a, 
.survey02a, 
.survey03a, 
.survey04a {
    width: 100%;
    height: auto;
    max-height: 384px;
    aspect-ratio: 390 / 353;
    object-fit: contain;
}

.survey01a {
    background-image: url('../img/survey01a.webp');
}
.survey02a {
    background-image: url('../img/survey02a.webp');
}

.survey03a {
    background-image: url('../img/survey03a.webp');
}



.survey-content {
    background-size: cover;
    background-position: top center;
    padding-top: 52%;
}
.survey-content-a {
    background-size: cover;
    background-position: top center;
    padding-top: 35%;
}
.survey04a {
    background-image: url('../img/survey04a.webp');
    background-position: bottom;
}

.survey-content a {
    font-family: 'Hiragino Sans', 'Meiryo', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    width: 100%;
    padding-block: 11px;
}
.survey-content-a a {
    font-family: 'Hiragino Sans', 'Meiryo', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #6D6D6D;
    text-align: center;
    width: 100%;
    /* padding-block: 9px; */
}
.button-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.button-wrapper-a {
    gap: 9px;
}
.survey-button {
    width: 78%;
    height: 48.88px;
    aspect-ratio: 304 / 48.88;
    max-width: 304px;
    margin-inline: auto;
    background-image: url('../img/survey-button.webp');
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: center;
}
.survey-button-a {
    width: 80%;
    height: auto;
    aspect-ratio: 316 / 40;
    max-width: 316px;
    margin-inline: auto;
    background-image: url('../img/survey-button-a.webp');
    background-size: contain;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.survey-button-a a:hover {
    background-image: url(../img/survey-button-hov-a.webp);
    width: 100%;
    height: auto;
    aspect-ratio: 316 / 40;
    max-width: 316px;
    background-size: contain;
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.survey-coupon01, 
.survey-coupon02 {
    position: relative;
}
.survey-coupon01 {
    aspect-ratio: 390 / 736;
    display: none;
}
.survey-coupon01-a {
    position: relative;
    aspect-ratio: 390 / 736;
    display: none;
}

.survey-coupon01--show, 
.survey-coupon01-a--show {
    display: block; /* 表示状態 */
}

.survey-coupon02 {
    scroll-margin-top: 20px;
}

.coupon-15 {
    width: 92%;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}
.coupon-15-a {
    width: 92%;
    bottom: 7%;
}
.coupon-15-01 {
    bottom: 6%;
}
.coupon-15-cta {
    position: relative;
    overflow: hidden;
    display: inline-block;
    /* 新しいアニメーションを追加 */
    animation: beat 1500ms ease infinite;
}

@keyframes beat {
    0%  { transform: scale(1); }
    15% { transform: scale(1.05); }
    30% { transform: scale(1); }
    45% { transform: scale(1.05); }
    70% { transform: scale(1); }
}


/* =============
image
=========== */
.image {
    background-color: #FAF8EC;
}

.image__top {
    position: relative;
}

.image__gif {
    width: 74%;
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    filter:
    drop-shadow(0 0 14.56px rgba(235,88,110,0.2))
    drop-shadow(0 0 14.56px rgba(235,88,110,0.2)); 
}
.image__content01 {
    width: 97%;
    margin-bottom: 27px;
}
.image__content02 {
    margin-bottom: 31px;
}
.image__content03 {
    padding-bottom: 69px;
}
/* 各コンテンツの遅延指定 */
.image__content01 > * {
  transition-delay: 0s;   /* 即時 */
}
.image__content02 > * {
  transition-delay: 0.2s; /* 0.4秒後にスタート */
}
.image__content03 > * {
  transition-delay: 0.4s; /* 0.8秒後にスタート */
}

/* =============
直美
=========== */
.chokubi {
    position: relative;
}

.chokubi01 {
    width: 80%;
    position: absolute;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%);
}

/* ============
trouble
============= */
.trouble-bottom {
    position: relative;
    width: 100%;
}

.trouble__bottoms {
    position: absolute;
    right: 0;
}

.trouble__bottom02 {
    width: 60%;
    top: 40%;
    animation-delay: 0.3s;
}
.trouble__bottom02a {
    top: 43%;
}
.trouble__bottom03 {
    width: 75%;
    top: 46%;
    animation-delay: 0.6s;
}
.trouble__bottom03a {
    top: 49%;
}

/* ＝＝＝＝＝＝＝
skill
========= */
.skill {
    position: relative;
}

.shine {
    position: absolute;
    overflow: hidden;
    display: inline-block;
    width: 80%;
    height: auto;
    bottom: 12%;
}

/* キラッと光るエフェクト */
.shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 60%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 100%);
    transform: skewX(-20deg);
    z-index: 2;
    animation: shineEffect 1.5s infinite;
}

@keyframes shineEffect {
    0% {
        left: -75%;
    }

    100% {
        left: 125%;
    }
}

.skill-circle {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}

/* ＝＝＝＝＝＝＝＝
points
＝＝＝＝＝＝＝＝＝*/
.points {
    position: relative;
}

.points-top {
    position: absolute;
    width: 87.6%;
    top: 1%;
    left: 50%;
    transform: translateX(-50%);
}

.points-title {
    width: 89.7%;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
}

.points-container {
    width: 92%;
    position: absolute;
    top: 25.5%;
    left: 50%;
    transform: translateX(-50%);
}

.points-content {
    margin-bottom: 16.9%;
}


/* 他施術との比較 */
.compare {
    padding-bottom: 154px;
    background-color: #FBFCFF;
}

.compare__title {
    color: var(--color-style4);
    font-family: var(--font-shippori-mincho);
    font-weight: 500;
    font-size: 24px;
    text-align: center;
    margin-bottom: 38px;
    position: relative;
    top: 64px;
}

.compare__title::before {
    content: "";
    width: 100%;
    height: 17px;
    position: absolute;
    top: calc(-50% + -13px);
    left: 50%;
    transform: translateX(-50%);
    background: url(../img/title_parts.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.compare__container {
    max-width: 100%;
    overflow-x: auto;
    position: relative;
}

.compare__figure {
    display: block;
    width: 931px;
    height: auto;
    min-width: 931px;
    margin: 76px 21px 0;
}


.emilisvoice {
    padding-block: 12.8%;
    width: 96.4%;
    margin-left: auto;
}

.emilisvoice-wrapper {
    background: linear-gradient(to bottom, #FFF5F5 0%, #FFFFFF 100%);
}

.flow {
    position: relative;
}

.flow-title {
    width: 100%;
    color: #fff;
    font-size: min(8.9vw, 35px);
    line-height: 1.48;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 20%;
}

.flow-lead {
    font-size: min(4.6vw, 18px);
    line-height: 2.8;
    font-weight: 500;
}

/* ========
reasons
=========== */
.reasons {
    position: relative;
}

.reasons-title {
    width: 69%;
    position: absolute;
    left: 5%;
    padding-top: 15%;
}

/* ========
症例
========= */
.cases {
    padding-bottom: 153px;
}

.case-title {
    padding-top: 21.79%;
    padding-bottom: 6.6%;
    width: 66.1%;
    margin-inline: auto;
}

.splide {
    margin: 0 auto;
    max-width: 100%;
}

.splide__slide img {
    width: 95%;
    height: auto;
    margin-inline: auto;
    object-fit: cover;
}
.splide__pagination {
    bottom: -10%;
}

.splide__pagination__page {
    width: 26px;
    height: 3px;
    border-radius: 0;
    margin: 5px;
    background: #D9D9D9;
    opacity: 1;
}

.splide__pagination__page.is-active {
    background: #E2A09B;
    transform: scale(1);
}

/* dr profile */

.dr {
    background-image: url(../img/bg-doctor.webp);
    color: #fff;
    background-color: #272727;
    padding-block: 80px;
    background-position: center;
    background-size: cover;
}
.dr-title {
    margin-bottom: 8.7%;
}

.dr-profile {
    width: 40%;
    margin-inline: auto;
    margin-bottom: 17.44%;
}
.dr-container {
    display: flex;
    flex-direction: column;
    gap: 74px;
}
.dr__profile--top {
    width: 92%;
    margin-inline: auto;
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
    justify-content: center;
    font-size: 26px;
    line-height: 1.3;
}
.dr__profile--top-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dr__profile--top img {
    width: 150px;
}
.dr__profile--lead {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    width: 90%;
    margin: 0 auto;
    text-align: left;
    margin-bottom: 30px;
}
.dr__role {
    display: flex;
    font-size: 16px;
    font-weight: 500;
}

/* doctorアコーディオン */
.dr .q_area {
    justify-content: flex-end;
}
.dr .q_text {
    text-align: center;
    justify-content: center;
    width: 84%;
}
.dr .item {
    padding-inline: 0;
    margin-bottom: 11px;
}
.dr .faq_icon {
    background-image: url('../img/dr_open.png');
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.dr .item.open .faq_icon {
    background-image: url('../img/dr_close.png');
}

.dr .item_container {
    width: 90%;
}

/* clinic info */

.clinic {
    padding-block: 16.9% 18.72%;
    background-color: #FFFFFF;
}

.clinic-title {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    margin-bottom: 9.74%;
}

.clinic-container {
    background-color: #F1F7FB;
    padding: 3.33% 5% 7.87%;
    width: 90%;
    margin-inline: auto;
}

.clinic-name {
    margin-bottom: 10px;
    font-family: 'Bodoni Moda', serif;
    font-weight: 350;
    font-weight: 400;
    line-height: 1.92;
}

.branch {
    font-weight: 400;
    line-height: 1.37;
}

.clinic-location {
    margin-block: 5.6% 7.44%;
    display: flex;
    gap: 5%;
    width: 100%;
    max-width: 298px;
}

.map-container {
    width: 39%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 1/1;
    flex-shrink: 0;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.clinic-info {
    width: 60%;
    font-family: 'Hiragino Sans', 'Meiryo', sans-serif;
    font-weight: 300;
    font-size: min(3.07vw, 12px);
    line-height: 1.74;
}

.gm-style .default-card {
    padding: 0;
}

.border-top {
    border-top: 0.4px solid #87CDEC;
}

.info-flex {
    display: flex;
}

.clinic-time {
    gap: min(4.6vw, 18px);
    padding-block: 5px;
}

.dayoff {
    gap: min(7.6vw, 30px);
    padding-top: 5px;
}

.address {
    padding-bottom: 5px;
}

.tel {
    width: 65%;
    margin-inline: auto;
}

/* =======
FAQ
========= */
.faq {
    background-color: #FAE7EA;
    font-family: 'Zen Kaku Gothic New', sans-serif;
    padding-block: 24% 28.46%;
    margin-bottom: 12%;
}

.faq-en {
    font-family: 'Castoro Titling', serif;
    font-size: min(5.1vw, 20px);
    color: #E2A09B;
    margin-bottom: 10%;
}

.faq-title {
    color: #EB586E;
    line-height: 1.5;
}

.item_container {
    margin: 0 auto 10%;
    width: 94.8%;
    border-bottom: 1px solid #D0D0D0;
}

.item_container:last-of-type {
    margin-bottom: 0;
}

.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.07em;
    cursor: pointer;
    padding-inline: 3.8%;
    margin-bottom: 5.64%;
}

.q_area {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 7%;
}

.q_text {
    display: flex;
    gap: 7px;
}

.faq_icon {
    background-image: url('../img/faq_open.png');
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.item.open .faq_icon {
    background-image: url('../img/faq_close.png');
}

.item_open {
    display: none;
    font-size: min(0.93vw, 18px);
    font-weight: 500;
    line-height: 1.94;
    letter-spacing: 0.07em;
    margin-bottom: 4.62%;
}

.item_open.open {
    width: 94.8%;
    padding-inline: 3.8%;
    display: flex;
    gap: 7px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.07em;
}

.faq_q,
.faq_a {
    color: #EB586E;
    font-family: 'shippori-mincho', serif;
    font-size: 1rem;
    font-weight: 500;
}

.bottom-cta {
    margin-bottom: 30%;
}

/* ========
    レスポンシブ
======== */
@media screen and (max-width: 1039px) {

    .bg_logo,
    .bg_cta {
        display: none;
    }
}

@media (min-width: 1040px) {

    .bg_logo,
    .bg_cta {
        display: block;
        text-align: center;
    }

    .main-content::before,
    .main-content::after {
        content: "";
        position: absolute;
        top: 0;
        height: 100%;
        width: calc(50vw - 215px);
        z-index: -1;
        pointer-events: none;
    }

    .main-content::before {
        left: calc(-50vw + 215px);
    }

    .main-content::after {
        right: calc(-50vw + 215px);
    }
}