img{
    width: 100%;
}
.pc-hero{
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
}
main.common-width{
    width:960px;
    margin:0 auto;
}
section.contents{
    width:100%;
}
section.contents .inner{
    width: 90%;
    margin: 0 auto;
    padding:40px 0;
}
.catch{
    text-align: center;
    margin-bottom: 3em;
}
.bg-cloud::before{
    content: "";
    display: block;
    min-height: 125px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.bg-cloud::after{
    content: "";
    display: block;
    min-height: 130px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.bg-cloud.pink-bg::before {
    background-image: url(../../assets/img/pink-bg-cloud-bottom.png);
}
.bg-cloud.pink-bg::after {
    background-image: url(../../assets/img/pink-bg-cloud-top.png);
}
.bg-cloud.gray-bg::before {
    background-image: url(../../assets/img/gray-bg-cloud-bottom.png);
}
.bg-cloud.gray-bg::after {
    background-image: url(../../assets/img/gray-bg-cloud-top.png);
}

.pink-bg.bg-cloud{
    background: #F9EDEF;
}
.gray-bg.bg-cloud{
    background: #F2F2F2;
}



.title-box{
    text-align: center;
    margin-bottom:40px;
}
.title-box .en{
    font-family: var(--font-f-en-big);
    font-size: var(--d-font-size-9);
    line-height: 1;
}
.title-box .title{
    font-weight: normal;
}

.kazari-waku{
    position: relative;
    /* 擬似要素分の余白を中身に確保（画像の高さに合わせる） */
    padding: 30px 100px 100px 100px;

    /* はみ出しを隠したいなら */
    overflow: hidden;
}

.kazari-waku::before,
.kazari-waku::after{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 294px;
    background-repeat: no-repeat;
    background-size: 100%;
    pointer-events: none; /* クリック邪魔しない */
}
.kazari-waku::before{
    top: 0;
    background-image: url(../../assets/img/waku-top.png);
}

.kazari-waku::after{
    bottom:-85px;
    background-image: url(../../assets/img/waku-bottom.png);
}


.dot-title{
    position: relative;
    text-align: center;
    font-size: var(--d-font-size-3);
    color: #f06a77;
    padding: 28px 0;
}

.dot-title::before,
.dot-title::after{
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    width: 55%;           /* ← ドット全体の横幅 */
    height: 6px;

    background-image: radial-gradient(circle, #666 2px, transparent 2px);
    background-size: 10px 6px;  /* ← ドット間隔 */
    background-repeat: repeat-x;
}

.dot-title::before{
    top: 0;
}

.dot-title::after{
    bottom: 0;
}


.pink{
    color:#EB6675;
}

.check-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.check-list li{
    position: relative;
    padding-left: 56px; /* ← アイコン分の余白 */
    font-size: var(--d-font-size-0);
    line-height: 1.5;
    margin-bottom:1.5em;
}

.check-list li::before{
    content: "";
    position: absolute;
    left: 0;
    top: -5px;

    width: 36px;   /* ← 必須 */
    height: 36px;  /* ← 必須 */

    background-image: url("../../assets/img/icon-checkbox-check.png");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}



.btn-space{
    text-align: center;
    margin: 48px 0;
}

.btn-pink{
    display: inline-block;
    margin: 0;
}

.btn-pink a{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 72px 14px 48px; /* 右を少し広め */
    min-width: 260px;

    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-f-gothic);
    color: #fff;
    text-decoration: none;

    background-color: #e79aa6;
    border-radius: 9999px;

    transition: background-color .3s ease;
}

/* SVG矢印 */
.btn-pink a::after{
    content: "";
    position: absolute;
    right: 24px;
    width: 22px;
    height: 22px;
    background-image: url("../../assets/img/circle-arrow-right-sharp-regular-full_w_h.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

/* hover */
.btn-pink a:hover{
    background-color: #d98290;
}



.hero-space{
    width: 100%;
    text-align: center;
    background-image: url(../../assets/img/top-main-bg.png);
    background-color: white;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

.hero-space .inner{
    width:90%;
    margin: 0 auto;
    text-align: center;
}


.hero-space .inner p.text{
    font-family: var(--font-f-mincho);
    font-size: var(--d-font-size-2);
    margin-bottom: 3em;
}




/* wrap */
.reason-wrap{
    width:100%;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* box */
.reason-wrap .box{
    display: flex;
    align-items: center;
    gap: 32px;
    background: #fff;
    padding: 5px;
    box-shadow: var(--shadow);
}

/* photo / body */
.reason-wrap .photo{
    flex: 0 0 44%;
}

.reason-wrap .photo img{
    width: 100%;
    height: auto;
    display: block;
}

/* pictureで返してる想定なので念のため */
.reason-wrap .photo picture{
    display: block;
}

.reason-wrap .body{
    flex: 1;
}

/* text */
.reason-wrap .title{
    margin: 0 0 12px;
    font-size: var(--d-font-size-3);
    font-weight: normal;
    text-align: left;
    color: #f07c87;
    line-height: 1.4;
    position: relative;
    padding-top: 76px; /* ← feature画像分の余白 */
    justify-content:left;
}
.reason-wrap .title::before, .reason-wrap .title::after {
    width: unset;
    height: unset;
    background-color: unset;
    flex: unset;
}
.reason-wrap .title:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;   /* 画像サイズに合わせて調整 */
    height: 60px;
    background-repeat: no-repeat;
    background-size: contain;
    margin:0 0 10px;
}

.reason-wrap .box:nth-of-type(1) .title:before{
    background-image: url("../../assets/img/feature-1.png");
}

.reason-wrap .box:nth-of-type(2) .title:before{
    background-image: url("../../assets/img/feature-2.png");
}

.reason-wrap .box:nth-of-type(3) .title:before{
    background-image: url("../../assets/img/feature-3.png");
}
.reason-wrap .box:nth-child(even) .body{
 padding: 0 0 0 1.5em;
}



.reason-wrap .text{
    margin: 0;
    font-size: 15px;
    line-height: 2.0;
    font-family: var(--font-f-gothic);
    color:var(--d-color-thin-1);
}

/* ---------------------------
   交互に左右入れ替え（order）
   2つ目、4つ目…を反転
---------------------------- */
.reason-wrap .box:nth-child(even) .photo{ order: 2; }
.reason-wrap .box:nth-child(even) .body{  order: 1; }


.before-after-wrap{
    width:100%;
    display: flex;
    flex-wrap: wrap;
}
.before-after-wrap .box{
    display: flex;
    flex-wrap: wrap;
    width:49%;
    margin-bottom: 3em;
    align-content: baseline;
}
.before-after-wrap .box:nth-child(even){
    margin-left:auto;
}
.before-after-wrap .box ul{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
}
.before-after-wrap .box li{
    width: 44%;
}
.before-after-wrap .box li:nth-child(odd):before{
    content: "";
    position: absolute;
    right: 47.5%;
    width: 20px;
    height: 35px;
    background-image: url(../../assets/img/triangle.png);
    background-repeat: no-repeat;
    background-size: 100%;
    top: 45%;
}
.before-after-wrap .box li:nth-child(odd):after{
    display: flex;
    align-items: center;
    background: #898989;
    content: "脱毛前";
    color:white;
    justify-content: center;
    padding:.2em 1em;
    letter-spacing: 1px;
    margin-bottom: 1em;
}
.before-after-wrap .box li:nth-child(even):after{
    display: flex;
    align-items: center;
    background: #DE8B9D;
    content: "脱毛後";
    color:white;
    justify-content: center;
    padding:.2em 1em;
    letter-spacing: 1px;
    margin-bottom: 1em;
}
.before-after-wrap .box li:nth-child(even){
    margin:0 0 0 auto;
}
.before-after-wrap .box li img{
    width: 100%;
    min-height: 340px;
    object-fit: cover;
    display: block;
    vertical-align: bottom;
}
.before-after-wrap .box p.text{
    margin: 1em 0 0 0;
    width: 100%;
    text-align:left;
    font-family: var(--font-f-gothic);
    color:var(--d-color-thin-1  );
}


.review-wrap{
    display: flex;
    flex-wrap: wrap;
}

.review-wrap .box{
    display: flex;
    flex-wrap: wrap;
    width:30%;
    margin:0 2.6em 3em 0;
    align-content:baseline;
}
.review-wrap .box a{
    display: block;
}
.review-wrap .box:nth-of-type(3n){
    margin:0 0 3em 0;
}
.review-wrap .box .photo{
    width:100%;
}
.review-wrap .box p.text{
    width:100%;
    text-align: left;
    font-family: var(--font-f-gothic);
    color:var(--d-color-thin-1);
}

.salon-img-list{
    display: flex;
    flex-wrap: wrap;
}

.salon-img-list li{
    width: 30%;
    margin:0 2.6em 3em 0;
}
.salon-img-list li:nth-of-type(3n){
    margin:0 0 3em 0;
}

.salon-staff-list{
    display: flex;
    flex-wrap: wrap;
}
.salon-staff-list li{
    width: 46%;
    margin:0 2.6em 6em 0;
}

.salon-staff-list li:nth-of-type(2n){
    margin:0 0 3em auto;
}

.title-line{
    position: relative;
    padding-bottom: 10px;

    font-weight: 700;
    font-size: var(--d-font-size-2);
    color: #111;

    /* 全体（薄い色） */
    border-bottom: 3px solid #888;
}

/* 左側だけ濃い色 */
.title-line::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;              /* border の太さと同じ */
    width: 20%;                /* 濃い部分の長さ */
    height: 3px;
    background-color: #f98469;
}


.name-space dt{
    font-size: var(--d-font-size-2);
}
.name-space dd{
    font-family: var(--font-f-gothic);
    color:var(--d-color-thin-1);
}

.blog-wrap{
    display: flex;
    flex-wrap: wrap;
}
.blog-wrap .box{
    display: flex;
    flex-wrap: wrap;
    margin:0 0 1.5em;
}
.blog-wrap .box .left{
    width: 30%;
}
.blog-wrap .box .left img{
    width: 250px;
    height: 250px;
    object-fit: cover;
    display: block;
}
.blog-wrap .box .right{
    width: 68%;
    margin-left: auto;
}
.blog-wrap .box .right .title:before,
.blog-wrap .box .right .title:after {
    width: unset;
    height: unset;
    background-color: unset;
    flex: unset;
}

.blog-wrap .box .right .title{
    text-align: left;
    display: block;
    font-size: var(--d-font-size-1);
    margin: 0 0 .4em;
}

.blog-wrap .box .right .text{
    font-family: var(--font-f-gothic);
    color:var(--d-color-thin-1);
}


.access-wrap{
    display: flex;
    flex-wrap: wrap;
}

.access-wrap dl{
    width: 48%;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
}

.access-wrap dl dt{
    width:35%;
    border-bottom: 3px solid #f98469;
}
.access-wrap dl dd{
    width: 60%;
    border-bottom: 3px solid #888;
}
.access-wrap dl dd,
.access-wrap dl dt{
    padding: .5em 0;
}

.access-wrap iframe{
    width: 48%;
    margin-left: auto;
}


/* =========================
   QA（dl > div > dt + dd）
   ========================= */

dl.qa {
    margin: 0 0 6em;
    padding: 0;
}

/* 1アイテムの余白 */
dl.qa .qa-item {
    margin: 0 0 18px;
}

/* ---------
  Question
  --------- */
dl.qa .qa-q {
    position: relative;
    margin: 0;
    padding: 18px 56px 18px 72px; /* 左にQ用スペース / 右にアイコンスペース */
    background: #fff;
    cursor: pointer;
    line-height: 1.6;
    font-size: var(--d-font-size-0);
    font-weight: nomal;
    color: #333;
}

/* Q. */
dl.qa .qa-q::before {
    content: "Q.";
    font-family: var(--font-f-en-qa);
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--d-font-size-8);
    font-weight: 800;
    color: #6b6b6b;
}

/* 右の矢印（span.qa-icon） */
dl.qa .qa-q .qa-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 28px;
    height: 28px;
}

/* CSSだけで矢印を作る */
dl.qa .qa-q .qa-icon::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #6b6b6b;
    border-bottom: 2px solid #6b6b6b;
    transform: translate(-50%, -50%) rotate(45deg); /* ▼っぽい形のベース（右下） */
}

/* 閉じてる時は「右向き」っぽく見えるように回転 */
dl.qa .qa-q:not(.is-open) .qa-icon {
    transform: translateY(-50%) rotate(-90deg);
}

/* 開いてる時は「下向き」 */
dl.qa .qa-q.is-open .qa-icon {
    transform: translateY(-50%) rotate(0deg);
}

/* ---------
  Answer
  --------- */
dl.qa .qa-a {
    margin: 0;
    padding: 22px 22px 22px 72px; /* 左にA用スペース */
    background: #fdebed;         /* 薄いピンク */
    border-top: 0;
    line-height: 1.9;
    color: #e96c78;              /* ピンク文字 */
}

/* A. */
dl.qa .qa-a {
    position: relative;
}

dl.qa .qa-a::before {
    font-family: var(--font-f-en-qa);
    font-size: var(--d-font-size-8);
    content: "A.";
    position: absolute;
    left: 18px;
    top: 0;
    font-weight: 800;
    color: #e96c78;
}

/* dtとddの角を自然に繋ぐ */
dl.qa .qa-q.is-open {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---------
  open/close（表示制御）
  ※ JSで dd を出し分ける or classで制御
  --------- */

/* 既定は閉じる */
dl.qa .qa-a {
    display: none;
}

/* dtに .is-open が付いたら次のddを表示 */
dl.qa .qa-q.is-open + .qa-a {
    display: block;
}


.form-section{
    margin-top: 3em;
}

.youtube-space{
    display: flex;
    flex-wrap: wrap;
}

.youtube iframe{
    width: 100%;
    height: 560px;
}


/* =========================================================
   WHAT（PC：左右2カラム / SP：縦積み）
   ※ 背景は不要：ここでは背景指定しません
========================================================= */

.what-list {
    display: flex;
    flex-direction: column;
    gap: 80px; /* PCの各ブロック間 */
}

.what-item {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

/* 小要素は 48% くらい */
.what-item .body,
.what-item .photo {
    width: 48%;
}


/* カウンター初期化 */
.what-list {
    counter-reset: what;
}

/* 各アイテムでカウント */
.what-item {
    counter-increment: what;
}

/* タイトルの before に数字出力 */
.what-item .title::before {
    font-family: var(--font-f-mincho);
    font-weight: normal;
    font-style: italic;
    color:#EB5A81;
    gap:0;
    font-size: var(--d-font-size-9);
    background-color:unset;
    width: unset;
    height: unset;
    flex: unset;
    content: counter(what, decimal-leading-zero);
    display: block;
    margin: 0 0 14px;
    line-height: 1;
}
.what-item .title:after{
    display: none;
}
.what-item .title{
    display: block; /* h3.title が flex になっていても上書き */
    line-height: 1.5;
    margin-bottom: 1em;
}

/* 右側要素を右寄せ（例：画像が右側のとき） */
.what-item .photo {
    margin-left: auto; /* 左を自動で埋めて右へ */
}

/* 偶数番は左右を反転（2番だけ画像左・文章右にしたい想定） */
.what-item:nth-child(odd) {
    flex-direction: row-reverse;
}

/* 反転時は画像を左に置くので右寄せ解除 */
.what-item:nth-child(odd) .photo {
    margin-left: 0;
    margin-right: auto;
}

/* 画像がはみ出さないように */
.what-item .photo img {
    display: block;
    width: 100%;
    height: auto;
}

.before-after-nav {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap: 40px;
}

.before-after-nav .nav-btn {
    display: inline-block;
    padding: .5em 1.5em;
    border-radius: 16px;
    border: 1px solid #FC8DBD;
    background: #fff;
    text-decoration: none;
    font-size: var(--d-font-size);
    font-family: var(--font-f-gothic);
    font-weight: 600;
    transition: 0.3s;
}

/* 前へ */
.before-after-nav .prev {
    color: #9a9a9a;
}

/* 次へ */
.before-after-nav .next {
    color: #FC8DBD;
}

/* hover */
.before-after-nav .nav-btn:hover {
    background: #fff5eb;
}

.before-after-title,
.review-title{
    font-size: var(--d-font-size);
    font-family: var(--font-f-gothic);
    line-height: 1.5;
    font-weight: normal;
}

/* パンくず */
.bred-crumb-list{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;

    padding: 1em;
    margin: 0;
    list-style: none;

    /* 画面幅を超えたら横スクロール */
    overflow-x: auto;
    overflow-y: hidden;

    /* 折り返し防止 */
    white-space: nowrap;

    /* iOSでスムーズスクロール */
    -webkit-overflow-scrolling: touch;
}

.bred-crumb-list li{
    font-size: var(--d-font-size-min-2);

    /* 各要素も折り返ししない */
    white-space: nowrap;
    flex: 0 0 auto;
}

/* link がある場合も折り返ししない */
.bred-crumb-list a{
    white-space: nowrap;
}

.bred-crumb-list li:after{
    content: ">";
    margin: 0 .5em;
    flex: 0 0 auto;
}

.bred-crumb-list li:last-of-type:after{
    display: none;
}

.single.before-after-wrap .box{
    width: 100%;
}

.single.before-after-wrap .box li:nth-child(odd):after,
.single.before-after-wrap .box li:nth-child(even):after{
    padding:1em;
}


.review-single .photo img{
    height: 880px;
    object-fit: cover;
}

.post-thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-bottom: .5em;
}
.post-meta{
    margin-bottom: .5em;
}
.post-content p{
    margin-bottom: 1.5em;
}

/* スマホ調整 */
@media (max-width: 768px) {
    .before-after-title,
    .review-title{
        font-size: var(--d-font-size-min-0);
        font-weight: 600;
        font-family: var(--font-f-gothic);
        line-height: 1.5;
        margin-bottom: .5em;
    }
    .review-wrap .box p.text{
        font-size: var(--d-font-size-min-0);
        line-height: 1.65;
    }

    .what-item:nth-child(odd){
        flex-direction:unset;
    }
    img.sp-hero{
        margin: 0 0 3em;
    }
    .youtube iframe{
        width: 100%;
        height: 300px;
    }
    .blog-wrap .box .left img{
        width: 120px;
        height: 120px;
    }
    .blog-wrap .box .right{
        width:64%;
    }
    .blog-wrap{
        margin: 0 0 3em;
    }
    .blog-wrap .box{
        margin: 0 0 2em;
    }

    main.common-width{
        width: 100%;
    }

    .movie-space{
        margin: 0 0 3em;
    }
    .movie-space .youtube{
        width: 100%;
        margin: 0 0 1em;
    }
    .movie-space .youtube iframe{
        width: 100%;
        height: 30vh;
    }
    .youtube-space li {
        width: 100%;
        margin: 0 0 1em;
    }
    .youtube-space li iframe{
        width: 100%;
        height: 30vh;
    }


    dl.qa .qa-q {
        font-size: var(--d-font-size-0);
        padding: 16px 52px 16px 62px;
    }
    dl.qa .qa-q::before {
        left: 14px;
        font-size: var(--d-font-size-4);
    }
    dl.qa .qa-q .qa-icon {
        right: 14px;
    }
    dl.qa .qa-a {
        font-size: var(--d-font-size);
        padding: 18px 16px 18px 62px;
    }
    dl.qa .qa-a::before {
        left: 14px;
        top: 18px;
        font-size: var(--d-font-size-4);
    }
    .blog-wrap .box .right .title{
        font-family: var(--font-f-gothic);
        font-weight: 600;
        font-size: var(--d-font-size-0);
        margin-bottom: .1em;
    }
    .blog-wrap .box .right .text{
        line-height: 1.5;
    }
}

/* ---------------------------
   SP（縦並び）
---------------------------- */
@media (max-width: 768px){
    .contents{
        width:100%;
    }
    .bg-cloud::before{
        min-height: 52px;
    }
    .title-box .en{
        font-size: var(--d-font-size-8);
    }
    .bg-cloud .inner{
        padding:60px 0;
    }
    .title-box{
        margin-bottom: 3em;
    }
    .reason-wrap .box{
        flex-direction: column;
        padding: 18px;
        gap: 16px;
    }
    .reason-wrap .photo{
        flex: none;
        width: 100%;
    }
    /* SPでは入れ替えを解除して自然順に */
    .reason-wrap .box:nth-child(even) .photo{ order: 1; }
    .reason-wrap .box:nth-child(even) .body{  order: 2; }

    .reason-wrap .title{
        font-size: var(--d-font-size-2);
    }
    .reason-wrap .box .body{
        padding: 0;
    }
    .reason-wrap .text{
        line-height: 1.9;
    }

    .kazari-waku {
        position: relative;
        padding: 1em 2em 2em 2em;
        overflow: hidden;
        margin: 0 0 3em;
    }
    .before-after-wrap .box{
        width: 100%;
    }
    .review-wrap .box{
        width: 48%;
        margin:0 0 3em 0;
    }
    .review-wrap .box:nth-of-type(even){
        margin:0 0 3em auto;
    }
    .kazari-waku::after{
        bottom:-21vh;
    }
    .salon-img-list li{
        width: 100%;
        margin:0 0 1.2em 0;
    }
    .salon-staff-list li{
        width: 100%;
        margin: 0 0 3em 0;
    }
    .salon-staff-list li img{
        margin: 0 0 .5em;
    }
    .access-wrap dl{
        width: 100%;
        margin-bottom: 3em;
    }
    .access-wrap iframe{
        width: 100%;
        margin-left: 0;
    }
    .bg-cloud::after{
        min-height: 57px;
    }
}


/* PCだけ */
@media (min-width: 981px){
    .movie-space{
        margin: 0 0 3em;
    }
    .movie-space .youtube{
        width: 80%;
        margin: 0 auto 1em;
        text-align: center;
    }
    .movie-space .youtube iframe{
        width: 80%;
        height: 400px;
    }
    .youtube-space li {
        width: 48%;
        margin: 0 0 1em;
    }
    .youtube-space li:nth-child(even){
        margin-left:auto;
    }
    .recruit-3{
        margin-bottom: 3em;
    }
    .youtube-space li iframe{
        width: 100%;
        height: 400px;
    }
}


/* SP */
@media (max-width: 980px) {

}


/* =========================================================
   SP：width100%・マージン等解除（縦積み）
========================================================= */
@media (max-width: 767px) {
    .what-list {
        gap: 32px;
    }

    .what-item {
        flex-direction: column;
        gap: 16px;
        margin:0 0 3em;
    }

    .what-item:nth-child(even) {
        flex-direction: column; /* 反転も解除 */
    }

    .what-item .body,
    .what-item .photo {
        width: 100%;
    }

    /* PCで付けた右寄せ・左寄せは全部解除 */
    .what-item .photo,
    .what-item:nth-child(even) .photo {
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (max-width: 768px) {
    .before-after-nav {
        gap: 20px;
    }

    .before-after-nav .nav-btn {
        padding: 12px 24px;
        font-size: 16px;
    }
    .review-single .photo img{
        height: auto;
        object-fit: cover;
    }
}