/*================================================================
  html
================================================================*/
html {
    font-size: 62.5%;
    /* font-sizeは16pxの62.5%の10px */
}

/*================================================================
  body
================================================================*/
body {
    color: #1A1A1A;
    max-width: 750px;
    margin: 0 auto;
    width: 100%;
    padding-top: 60px;
    /* ヘッダーの後ろに要素が隠れないようにするため */
    font-size: 1.6rem;
    line-height: 1.4;
    font-family: "Yu Gothic", "YuGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
        "Noto Sans JP", "メイリオ", sans-serif;
}

img {
    margin: 0 auto;
    width: 100%;
    height: auto;
}

@media screen and (min-width:750px) {
    body {
        padding-top: 100px;
    }
}

/*================================================================
  共通
================================================================*/

h2 {
    margin: 0 auto;
    text-align: center;
    padding-top: 4rem;
}

.sub-title {
    font-size: max(2.6vw, 2rem);
    display: block;
    margin: 0 0 0 0;
}

h2 .en-title {
    display: inline-block;
}

h2 .en-title img {
    height: 4rem;
    width: 100%;
    object-fit: contain;
}

h2 .jp-title {
    display: block;
    font-size: max(5.6vw, 4.2rem);
    font-weight: bold;
    padding: 1rem 0 4rem;
}

.br-none {
    display: none;
}

.cta {
    margin-top: 10%;
    position: relative;
    transition: transform 0.2s ease;
}

.cta:hover {
    opacity: 0.8;
}

.cta-img-ribon {
    width: 90%;
    height: auto;
    object-fit: contain;
    margin-bottom: -6%;
    z-index: 1;
    max-width: 680px;
    transition: transform 0.2s ease;
}

.cta-img-button {
    display: block;
    width: 90%;
    max-width: 660px;
    height: auto;
    object-fit: contain;
    border-radius: 1.5rem;
    box-shadow: 0 5px 0 0 #387427;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    border: 2px solid #fff;
}

.cta:active .cta-img-ribon,
.cta:hover .cta-img-ribon,
.cta:hover .cta-img-button,
.cta:active .cta-img-button {
    box-shadow: none;
    transform: translateY(5px);
}

.cta a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.marker-yellow {
    background: linear-gradient(to right, #FBE675 100%, transparent 100%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    transition: background-size 1.5s ease-in-out;
}

.marker-yellow.inview {
    background-size: 100% 100%;
}

@media screen and (min-width:750px) {

    h2 .jp-title {
        font-size: 7.2rem;
        padding: 3rem 0 6rem;
    }

    h2 .en-title img {
        height: 6rem;
        width: 100%;
    }

    .br-none {
        display: block;
    }

    .br-pc-none {
        display: none;
    }
}

/*================================================================
  header
================================================================*/
header {
    width: 100%;
    background: #fff;
    position: fixed;
    top: 0;
    right: 0;
    box-shadow: 0 3px 6px rgba(118, 118, 118, .30);
    z-index: 999;
}

.header-wrapper {
    max-width: 750px;
    display: flex;
    align-items: center;
    height: 60px;
    justify-content: space-around;
    margin: 0 auto;
}

header h1 {
    width: 40%;
}

header h1 img {
    height: 2.6rem;
    width: 100%;
    object-fit: contain;
    max-width: 265px;
}

header .header-btn {
    display: inline-block;
    /* aタグなので必要 */
    text-align: center;
    text-decoration: none;
    /* aタグの下線を消す */
    background-image: linear-gradient(180deg, rgba(45, 205, 20, 1), rgba(14, 164, 5, 1));
    color: #fff;
    font-weight: bold;
    border-radius: 3rem;
    font-size: max(2vw, 1.3rem);
    height: 3.6rem;
    line-height: 3.6rem;
    /* 垂直中央揃え */
    width: 45%;
    max-width: 330px;
    opacity: 1;
    /* 通常状態は100%表示 */
    transition: opacity 0.3s ease;
}

header .header-btn:hover {
    opacity: 0.6;
}

@media screen and (min-width:750px) {
    .header-wrapper {
        padding: 0;
        height: 100px;
        justify-content: space-between;
        width: 95%;
    }

    header .header-btn {
        height: 6rem;
        font-size: 2.4rem;
        padding: 1.1rem 0;
    }

    header h1 img {
        height: 4.2rem;
    }

    .cta-img-button {
        border-radius: 3rem;
        box-shadow: 0 8px 0 0 #387427;
        border: 3px solid #fff;
    }

    .cta:active .cta-img-ribon,
    .cta:hover .cta-img-ribon,
    .cta:hover .cta-img-button,
    .cta:active .cta-img-button {
        transform: translateY(8px);
    }
}

/*================================================================
  追従ボタン
================================================================*/
.fix-link {
    position: fixed;
    width: 100%;
    z-index: 90;
    margin: 0 auto;
    bottom: 0;
    right: 0;
}

.fix-link div {
    background: rgba(129, 129, 129, .5) no-repeat top 1.2rem center;
    width: 100%;
}

.fix-link p {
    text-align: center;
    font-weight: bold;
    font-size: max(4vw, 1.8rem);
    position: relative;
}

.fix-link p::before,
.fix-link p::after {
    content: "＼";
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0 3px;
    color: #1a1a1a;
    display: inline-block;
    transform: rotate(13deg);
}

.fix-link p::after {
    transform: rotate(77deg);
}

ul.flex {
    max-width: 750px;
}

.flex,
.flexA,
.flexB,
.flexC {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

.fix-link a {
    height: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    font-weight: bold;
    letter-spacing: -0.03em;
    background-size: 2.5rem auto;
    box-sizing: border-box;
    margin: 0.6rem;
    border-radius: 1.4rem;
    font-size: max(1.8vw, 1.3rem);
    filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.3));
}

.fix-link .br-none {
    display: block;
}

.fix-link a img {
    width: 3rem;
    height: auto;
    margin-bottom: 5px;
}

.fix-link li {
    width: 30%;
    box-sizing: border-box;
}

.fix-link li.mail {
    width: 40%;
}

.fix-link li.tel a {
    background-color: #6997BF;
    border: 2px solid #fff;
    margin-right: 0;
}

.fix-link li.tel a:hover {
    background-color: #497ca8;
}

.fix-link li.mail a {
    background-image: linear-gradient(180deg, rgba(45, 205, 20, 100%), rgba(14, 164, 5, 1));
    border: 2px solid #fff;
}

.fix-link li.mail a:hover {
    background-image: linear-gradient(180deg, rgb(73, 220, 50), rgb(35, 179, 28));
}

.fix-link li.line a {
    background-color: #fff;
    border: 2px solid #0DC754;
    color: #19B20C;
    margin-left: 0;
}

.fix-link li.line a:hover {
    background-color: #ededed;
}

.fix-link li:last-child {
    border-right: none;
}

.is-hidden {
    display: none;
}

@media screen and (min-width:750px) {
    .fix-link .br-none {
        display: none;
    }

    .fix-link p {
        font-size: 3.8rem;
    }

    .fix-link span {
        font-size: 4.2rem;
    }

    .fix-link p::before,
    .fix-link p::after {
        font-size: 3.6rem;
    }

    .fix-link a {
        height: 10rem;
        margin: 1rem 1.6rem;
        border-radius: 1.5rem;
        font-size: 2.4rem;
    }

    .fix-link a img {
        width: 3.6rem;
        height: auto;
        margin: 1rem auto 0.5rem;
    }

    .fix-link li {
        width: 25%;
        box-sizing: border-box;
    }

    .fix-link li.mail {
        width: 50%;
    }

    .fix-link li.tel a {
        background-color: #6997BF;
        border: 3px solid #fff;
        margin-right: 0;
    }

    .fix-link li.mail a {
        border: 3px solid #fff;
        font-size: 2.6rem;
    }

    .fix-link li.line a {
        background-color: #fff;
        border: 3px solid #0DC754;
        color: #19B20C;
        margin-left: 0;
    }
}

/*================================================================
  fv
================================================================*/

.fv {
    position: relative;
}

.cta-wrapper {
    position: absolute;
    bottom: 3%;
    width: 100%;
    margin: 0 auto;
}

.note {
    text-align: right;
    color: #707070;
    padding: 0;
    font-size: max(2vw, 1rem);
}


/*================================================================
  Youtube
================================================================*/
.youtube h2 {
    padding-top: 0;
    background-image: linear-gradient(180deg, rgba(237, 214, 140, 100%), rgba(202, 176, 117, 1));
    font-weight: bold;
    padding: 3% 0;
    font-size: max(2.9vw, 2.2rem);
}

.youtube-detail {
    text-align: center;
    color: #fff;
    display: flex;
    background-image: url(../img/youtube-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 9.2rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 8% 5%;
    font-size: max(2vw, 1.5rem);
}

.youtube-detail p {
    margin-bottom: 5%;
}

.youtube-detail iframe {
    width: 100%;
    max-width: 640px;
    /* 最大幅を設定 */
    aspect-ratio: 16 / 9;
    /* 16:9の比率を維持 */
}

.youtube-detail p .br-none {
    display: block;
}

@media screen and (min-width:750px) {

    .youtube h2 {
        font-size: 3.6rem;
    }

    .youtube-detail {
        font-size: 2.8rem;
    }
}

/*================================================================
  case
================================================================*/

.case {
    background-color: #C8E6FC;
    padding-bottom: 3%;
}

.case .case-title-wrapper {
    display: flex;
    background-image: url(../img/case-title-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 9.2rem;
    align-items: center;
    justify-content: center;
    gap: 2%;
}

.case h2 {
    font-size: max(6.2vw, 3.2rem);
    color: #CB8F21;
    font-weight: bold;
    text-align: center;
    padding-top: 0;
    margin: 0;
    line-height: 1.2;
}

.case .case-title-wrapper::before {
    content: '';
    background-image: url(../img/case-title-ornament.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 3.6rem;
    height: 6.6rem;
}

.case .case-title-wrapper::after {
    content: '';
    background-image: url(../img/case-title-ornament.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 3.6rem;
    height: 6.6rem;
    margin-right: 1rem;
    transform: rotateY(180deg);
}

.case .slider {
    background-image: url(../img/treatment-slider-bg.jpg);
    background-repeat: no-repeat;
    width: 92%;
    height: auto;
    background-size: 500%;
    background-position: bottom;
    position: relative;
    padding: 5% 0;
    margin: 0 auto 8%;
    border-radius: 0 0 2rem 2rem;
}

.slick-slide img {
    margin-bottom: 1rem;
    width: 92%;
}

.case .slider .text-wrapper h3 {
    color: #fff;
    background-color: #325686;
    display: inline-block;
    padding: 2% 8%;
    font-weight: bold;
    width: 32%;
    text-align: center;
    font-size: max(2vw, 1.5rem);
}

.case .slider .text-wrapper .treatment-detail {
    display: flex;
    align-items: stretch;
    border: 1px solid #325686;
}

.case .slider .text-wrapper .treatment-detail h3 {
    background-color: #325686;
    color: #fff;
    padding: 3% 5%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 5em;
    text-align: center;
}

.case .slider .text-wrapper .treatment-detail p {
    padding: 3%;
    font-weight: 300;
    line-height: 1.5;
    flex: 1;
    text-align: center;
}

.case .text-wrapper .treatment-hope p,
.case .text-wrapper .treatment-effect p {
    padding: 3% 3% 5%;
}

.case .text-wrapper {
    width: 92%;
    margin: 0 auto;
}

.case .text-wrapper div {
    background-color: #fff;
    margin-bottom: 1rem;
    border: 1px solid #325686;
}

.case .text-wrapper div p {
    padding: 2% 6% 3%;
    font-weight: 300;
    font-size: max(2vw, 1.5rem);
}


.treatment-background {
    display: flex;
    align-items: center;
}

.text-wrapper .treatment-background p,
.text-wrapper {
    padding: 0;
    margin: 0 auto;
}

.treatment-detail p {
    padding: 3% 2rem;
}

.treatment-background {
    justify-content: center;
    width: 70%;
    margin: 0 auto;
    width: 212px;
}

.case .slider .treatment-background h3 {
    padding: 1% 1rem 1% 2rem;
}

.treatment-background {
    background: -webkit-linear-gradient(143deg, #fff 0 36%, #F25A91 36%);
}

.treatment01 h3 span.treatment-kana,
.treatment02 h3 span.treatment-kana {
    display: inline;
    font-size: max(5.2vw, 2.2rem);
}

/* slick-prev と slick-next のデフォルト矢印を完全に削除 */
.slick-prev::before,
.slick-next::before {
    content: '' !important;
    /* コンテンツを空に */
    display: none !important;
    /* 非表示に */
}

/* 丸いボタンのスタイル */
.slick-prev,
.slick-next {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    z-index: 10;
    width: 3.4rem;
    height: 3.4rem;
    background-color: rgba(112, 112, 112, .6);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.slick-prev {
    left: -15px;
}

.slick-next {
    right: -15px;
}

/* ホバー時 */
.slick-prev:hover,
.slick-next:hover {
    background-color: #505050;
}

/* カスタム矢印 */
.slick-prev::after,
.slick-next::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid white;
    border-right: 2px solid white;
}

/* 左矢印 */
.slick-prev::after {
    transform: rotate(-135deg) translate(-5%, 10%)
}

/* 右矢印 */
.slick-next::after {
    transform: rotate(45deg) translate(-15%, 10%);
}

.slick-dots {
    width: 100%;
}

@media screen and (min-width:400px) {
    .case .case-title-wrapper {
        height: 16rem;
    }
}

@media screen and (min-width:700px) {
    .case .case-title-wrapper {
        height: 18rem;
    }
}

@media screen and (min-width:750px) {
    .case h2 {
        font-size: 6rem;
    }

    .case .case-title-wrapper::before {
        width: 7.6rem;
        height: 12.6rem;
    }

    .case .case-title-wrapper::after {
        width: 7.6rem;
        height: 12.6rem;
    }

    .case h2 .clinic-name {
        font-size: 4.6rem;
    }

    .case .slider .text-wrapper h3,
    .text-wrapper div p {
        font-size: 2.4rem;
    }

    .case .slider .text-wrapper h3 {
        padding: 2% 2rem;
    }

    .case .slider .treatment-detail h3 {
        padding: 1em;
    }

    .case .slider .treatment-background h3 {
        padding: 4% 1rem 4% 0;
    }

    .case .text-wrapper div {
        background-color: #fff;
        margin-bottom: 1rem;
    }

    .text-wrapper .treatment-background p {
        margin: 0 3% 0 18%;
    }

    .treatment-background {
        width: 35rem;
        background: -webkit-linear-gradient(143deg, #fff 0 45%, #F25A91 45%);
    }

    .slick-next {
        right: -30px;
    }

    .slick-prev {
        left: -30px;
    }

    .slick-prev,
    .slick-next {
        width: 6.5rem;
        height: 6.5rem;
    }

    .slick-prev::after,
    .slick-next::after {
        width: 2rem;
        height: 2rem;
    }

    .slick-dots li button:before {
        font-size: 8px;
    }

    .slick-slide img,
    .text-wrapper div {
        margin-bottom: 3rem;
    }

    .text-wrapper div.treatment-effect {
        margin-bottom: 1rem;
    }
}

/*================================================================
  offer
================================================================*/
.offer {
    /* background-image: url(../img/offer-bg.jpg); */
    background: linear-gradient(to bottom, #eef8ff, #C8E6FC);
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
    background-position: top;
    padding-top: 7%;
}

.offer .speech-box {
    margin: 0 auto 5%;
    background: #fff;
    border-radius: 1.5rem;
    padding: 2% 3%;
    position: relative;
    border: 4px solid transparent;
    box-shadow: inset 0 0 0 1px #715413;
    width: 80%;
}

.offer-bnr {
    width: 90%;
    margin: 0 auto;
    display: block;
}

.offer .speech-box p {
    font-size: max(3vw, 2.4rem);
    font-weight: bold;
    margin: 0;
    text-align: center;
    color: #715413;
    margin: 0 auto;
}

.offer .text-orange {
    color: #EF7268;
}

.offer .emphasis {
    font-size: max(4vw, 3rem);
}

/* 下の吹き出し三角 */
.speech-box::after {
    content: "";
    position: absolute;
    bottom: -18%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 2vw 3vw 0 3vw;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
}

.tess-table .num {
    width: 15%;
}

.tess-table .regular {
    width: 25%;
}

.tess-table .monitor {
    width: 30%;
}

.tess-table .cp {
    width: 30%;
}

.hyaluron-table .type {
    width: 20%;
}

.hyaluron-table .regular {
    width: 40%;
}

.hyaluron-table .cp {
    width: 40%;
}

.tess-table,
.hyaluron-table {
    width: 90%;
    border-collapse: collapse;
    font-family: "Helvetica", "Arial", sans-serif;
    text-align: center;
    margin: 3rem auto 0;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #707070;
}

.tess-table td,
.hyaluron-table td {
    font-size: 1.4rem;
    vertical-align: middle;
}

.tess-table th,
.hyaluron-table th {
    vertical-align: middle;
}

.tess-table thead .title-row th,
.hyaluron-table thead .title-row th {
    background-color: #325686;
    color: white;
    font-size: max(2vw, 1.6rem);
    padding: 1rem 0.5rem;
    text-align: center;
    font-weight: 500;
}

.tess-table thead tr:nth-child(2) th,
.hyaluron-table thead tr:nth-child(2) th {
    padding: 0.75rem;
    border-bottom: 1px solid #ccc;
}

.tess-table td,
.tess-table th,
.hyaluron-table td,
.hyaluron-table th {
    border: 1px solid #ccc;
    padding: 1rem;
    text-align: center;
}

.tess-table td.content-highlight,
.hyaluron-table td.content-highlight {
    color: #EB3B2F;
    font-weight: bold;
    background-color: #ECF2F7;
}

.tess-table th .tax,
.hyaluron-table th .tax {
    font-size: 0.8em;
    display: block;
}

.tess-table thead tr:nth-child(2) th.title-highlights,
.hyaluron-table thead tr:nth-child(2) th.title-highlights,
th.title-highlights {
    background-color: #58A1DE;
    color: #fff;
}

.title-grey {
    background-color: #F7F6F2;
}

.mid-title {
    font-size: max(1.6vw, 1.3rem);
    font-weight: 500;
}

.small-title {
    font-size: max(1.2vw, 1.2rem);
}

td.small-title {
    font-size: max(1.2vw, 1rem);
}

.yen {
    font-size: max(1.2vw, 1rem);
}

.table-scroll {
    width: 90%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto;
}

.tess-table,
.hyaluron-table {
    min-width: 400px;
    border-collapse: collapse;
    width: 100%;
}

.campaign-notes {
    font-size: 1rem;
    color: #707070;
    width: 90%;
    margin: 5% auto 0;
}

.note-section {
    margin-bottom: 2%;
}

.note-section ul {
    list-style: disc;
    padding-left: 1.4rem;
}

.offer .cta {
    padding-bottom: 10%;
}

@media screen and (min-width:750px) {
    .campaign-notes {
        margin-top: 0;
    }

    .tess-table,
    .hyaluron-table {
        margin: 5% 0;
    }

    .campaign-notes {
        font-size: 1.2rem;
    }

    .tess-table thead .title-row th,
    .hyaluron-table thead .title-row th {
        font-size: 3rem;
    }

    .mid-title,
    .tess-table td,
    .hyaluron-table td {
        font-size: 2rem;
    }

    .small-title,
    .hyaluron-table td.small-title {
        font-size: 1.4rem;
    }

    .offer .speech-box p {
        font-size: 5.3rem;
    }

    .offer .speech-box p .emphasis {
        font-size: 7.5rem;
    }

    .offer .speech-box {
        border: 10px solid transparent;
    }

    .speech-box::after {
        bottom: -2.4rem;
        border-width: 2rem 3rem 0 3rem;
    }

    .tess-table thead tr:nth-child(2) th,
    .hyaluron-table thead tr:nth-child(2) th {
        font-size: 2rem;
    }

    .yen {
        font-size: 1.6rem;
    }

    .tess-table th .tax,
    .hyaluron-table th .tax {
        display: inline-block;
    }

    .tess-table .num {
        width: 10%;
    }

    .tess-table .cp {
        width: 35%;
    }

}

/*================================================================
  fair
================================================================*/
.fair .fair-intro {
    background-image: url(../img/fair-intro-bg.png);
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
    background-position: bottom;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.fair .fair-intro h3 {
    text-align: center;
    font-size: max(2vw, 1.8rem);
    margin: 0 auto;
    padding: 9% 0;
    font-weight: bold;
    line-height: 1.5;
}

.fair .fair-intro h3 span {
    font-size: max(2.4vw, 2.4rem);
}

.fair .fair-intro p {
    font-size: max(2vw, 1.5rem);
    padding: 0 9% 12%;
    line-height: 1.5;
}

.fair-main h2 {
    padding-top: 0;
}

.fair-list {
    width: 90%;
    margin: 0 auto;
    padding: 8% 0;
}

.fair-list li {
    display: flex;
    padding: 3% 0;
}

.fair-list li img {
    width: 25%;
    object-fit: contain;
    padding-right: 5%;
    min-width: 100px;
}

.fair-list-item .item-text {
    width: 80%;
}

.fair-list-item .item-text h3 {
    font-weight: bold;
    font-size: max(2.6vw, 2rem);
    padding-bottom: 2%;
}

.fair-list-item .item-text p {
    font-size: max(2vw, 1.6rem);
}

.fair-more {
    background-image: url(../img/fair-more-bg.png);
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
    background-position: top;
    padding: 10% 0 0;
}

.fair-more-text {
    padding: 5% 0;
}

.fair-more-text h4 {
    font-weight: bold;
    font-size: max(2.6vw, 2rem);
    position: relative;
    display: inline-block;
    padding-left: 5%;
}

.fair-more-text h4::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #BFA66F;
}

.fair-more-text p {
    width: 90%;
    margin: 2% auto 0;
    font-size: max(2.6vw, 1.5rem);
}

.fair-last {
    margin: 0 auto;
}

.fair .last-text {
    font-weight: bold;
    text-align: center;
    font-size: max(2.6vw, 1.8rem);
    padding: 5%;
}

.therefore {
    background-image: url(../img/therefore-bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
}

span.bg-brown {
    background-color: #BFA66F;
    color: #fff;
    font-weight: bold;
    padding: 1% 3%;
    font-size: max(2.6vw, 1.8rem);
    text-align: center;
    display: inline-block;
}

@media screen and (min-width:750px) {
    .fair-intro .fair .fair-intro h3 {
        font-size: 3rem;
        line-height: 1.6;
        padding-top: 10%;
    }

    .fair .fair-intro h3 span {
        font-size: 3.8rem;
    }

    .fair .fair-intro p {
        line-height: 1.6;
        font-size: 2.8rem;
        padding: 0 0 10%;
    }

    .fair-list-item .item-text p,
    .fair-more-text p {
        font-size: 2.4rem;
    }

    .fair-list li img {
        width: 15rem;
        height: 100%;
    }

    .fair-list-item .item-text h3,
    .fair-more-text h3,
    .fair .last-text,
    span.bg-brown {
        font-size: 3rem;
    }

}

/*================================================================
  treatment
================================================================*/
.treatment {
    background: linear-gradient(to bottom, #F7FCFF, #E8F7FF);
}

.treatment h2 .en-title img {
    height: 2.8rem;
}

.treatment h2 span.jp-title {
    padding-bottom: 3rem;
}

.tesslift,
.hyaluron {
    width: 95%;
    margin: 0 auto;
    background-color: #FFFEF5;
    margin-bottom: 10%;
}

.hyaluron {
    margin-bottom: 5%;
}

.tesslift-detail {
    display: flex;
    padding-top: 10%;
    width: 95%;
    margin: 0 auto;
}

.tesslift-detail .text-wrapper {
    width: 60%;
}

.tesslift-detail img {
    object-fit: contain;
    width: 30%;
}

.tesslift h3,
.hyaluron h3 {
    position: relative;
    padding: 4%;
    border-radius: 5px;
    border: 1px solid #80C4FF;
    color: #80C4FF;
    font-weight: bold;
    font-size: max(2.6vw, 1.8rem);
    text-align: center;
    background-color: #fff;
    line-height: 1.5;
}

.tesslift h3:before,
.hyaluron h3:before {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    height: 1.5rem;
    width: 1px;
    background-color: #80C4FF;
    content: "";
}

.title-line {
    margin-bottom: 2rem;
    flex-direction: column;
}

.title-line h4 {
    font-size: max(2.6vw, 1.7rem);
    font-weight: bold;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    display: inline-block;
    margin-bottom: 2%;
}

.title-line p {
    font-size: max(2.6vw, 1.2rem);
    font-weight: 600;
    white-space: nowrap;
    margin: 0;
    display: flex;
    align-items: center;
}

.title-line p::before {
    content: "";
    display: inline-block;
    height: 1px;
    background-color: #1a1a1a;
    width: 100%;
    margin-right: 1rem;
    transform: translateY(0.5px);
}

.treatment .text-content,
.hyaluron-detail .text-wrapper p,
.hyaluron-type-text p {
    font-size: max(2.6vw, 1.4rem);
}

.hyaluron-detail-img {
    margin-bottom: 5%;
}

.recommendation {
    margin: 5%;
}

.recommendation p {
    font-size: max(2.6vw, 1.8rem);
    font-weight: bold;
    text-align: center;
    position: relative;
    margin-bottom: -3%;
}

.recommendation-title:before,
.recommendation-title:after {
    position: relative;
    display: inline-block;
    content: "";
    background: #1a1a1a;
    width: 2px;
    height: 1.4em;
    margin: 0 3%;
    margin-top: -.2em;
    vertical-align: middle;
}

.recommendation-title:before {
    transform: rotate(335deg);
}

.recommendation-title:after {
    transform: rotate(-335deg);
}

.recommendation ul {
    font-size: max(2.6vw, 1.5rem);
    background-color: #fff;
    font-weight: bold;
    padding: 8% 5% 5%;
}

.recommendation ul li {
    display: inline-block;
    margin-bottom: 1.2rem;
    font-size: max(2vw, 1.3rem);
    font-weight: bold;
    display: flex;
    align-items: center;
}

.recommendation ul li::before {
    content: '';
    background-image: url(../img/check-icon02.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    float: left;
    margin-right: 0.4rem;
}

.treatment .ba-img {
    width: 90%;
    margin: 0 auto;
    display: block;
}

.treatment .note {
    padding: 2% 2% 0 0;
}

.downtime-wrapper {
    width: 90%;
    margin: 0 auto;
    padding: 5% 0;
}

.downtime-wrapper h4 {
    font-size: max(2.6vw, 1.8rem);
    font-weight: bold;
    border-bottom: 1px solid #1a1a1a;
    padding-bottom: 1%;
}

.downtime-wrapper p {
    padding-top: 3%;
    font-size: max(2vw, 1.4rem);
}

.hyaluron-detail {
    padding-top: 10%;
    width: 90%;
    margin: 0 auto;
}

.hyaluron-type-wrapper {
    margin: 5% auto 0;
}

.hyaluron-type {
    display: flex;
    margin-bottom: 5%;
}

.hyaluron-type img {
    object-fit: contain;
    width: 35%;
}

.hyaluron-type-text h5 {
    font-size: max(2vw, 1.5rem);
    font-weight: bold;
    border-left: 2px solid #1a1a1a;
    padding-left: 2%;
    margin-bottom: 2%;
}

.treatment .last-text {
    background-image: url(../img/treatment-last-text-bg.png);
    background-size: cover;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    padding: 15% 0;
    line-height: 1.6;
    text-align: center;
    font-size: max(2vw, 1.5rem);
    font-weight: bold;
}

.treatment .last-text span {
    text-align: center;
    font-size: max(3vw, 1.8rem);
}

@media screen and (min-width:750px) {
    .treatment h2 {
        padding: 5rem;
    }

    .treatment h2 span.jp-title {
        padding-bottom: 4rem;
    }

    .treatment h2 .en-title img {
        height: 4rem;
    }

    .tesslift h3,
    .hyaluron h3 {
        font-size: 3.6rem;
    }

    .tesslift h3:before,
    .hyaluron h3:before {
        height: 2rem;
    }

    .title-line h4 {
        font-size: 3rem;
    }

    .treatment .text-wrapper div p {
        font-size: 2rem;
        padding-top: 2%;
    }

    .treatment .text-content,
    .hyaluron-detail .text-wrapper p,
    .hyaluron-type-text p {
        font-size: 2rem;
        line-height: 1.5;
    }

    .recommendation ul li {
        font-size: 2.4rem;
    }

    .recommendation ul li::before {
        width: 2.2rem;
        height: 2.2rem;
        margin-right: 1rem;
    }

    .recommendation p {
        font-size: 4rem;
    }

    .treatment .note {
        padding: 2% 5% 0 0;
    }

    .downtime-wrapper h4 {
        font-size: 2.8rem;
    }

    .downtime-wrapper p {
        font-size: 2rem;
    }

    .hyaluron-type-text h5 {
        font-size: 2.4rem;
    }

    .treatment .last-text {
        font-size: 2.4rem;
    }

    .treatment .last-text span {
        font-size: 3rem;
    }
}

/*================================================================
  know
================================================================*/
.know {
    background-image: url(../img/know-bg.png);
    background-position: 0% 118%;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    background-size: 200%;
}

.know-title-wrapper {
    background-image: url(../img/know-title-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: repeat-x;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 0 0 15% 0;
    min-height: 200px;
}

.know .note {
    color: #fff;
    text-align: left;
    width: 90%;
    margin-top: 3%;
}

.know-title {
    position: relative;
    width: 100%;
}

.know-title h2 {
    padding-top: 0;
    margin-top: -8%;
}

.know-title h2 img {
    width: 67%;
    height: auto;
    max-width: 48rem;
}

.know-title p {
    font-size: max(2vw, 1.6rem);
    color: #fff;
    text-align: center;
    display: block;
    padding: 8% 0 1%;
    font-weight: bold;
    line-height: 1.6;
}

.debut {
    width: 21%;
    position: absolute;
    right: 1px;
    top: 8px;
    max-width: 150px;
}

.know-title .text-brown {
    font-size: max(2.6vw, 2rem);
    color: #E4D0A7;
    position: relative;
}

.know-title .text-small {
    font-size: max(2vw, 1.6rem);
}

sup {
    font-size: 0.5em;
    vertical-align: super;
    color: #fff;
    font-weight: 300;
    position: absolute;
    right: -4%;
    top: 0;
}

.know-fairclinic {
    display: flex;
    position: relative;
}

.know-fairclinic-text {
    width: 80%;
    background-color: #fff;
    filter: drop-shadow(0px 4px 2px rgba(208, 208, 208, 0.3));
}

.know-fairclinic-text .title {
    font-weight: bold;
    padding: 3rem 0 2rem 2rem;
    font-size: max(5.2vw, 2.4rem);
}

.know-fairclinic-text .detail {
    font-size: 2rem;
    padding: 0 0 3rem 2rem;
    font-size: max(4vw, 2rem);
}

.know-fairclinic-text .detail .marker-yellow {
    font-weight: bold;
}

.know-doctor {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 45%;
    object-fit: contain;
    max-width: 20rem;
}

.know-reason {
    text-align: center;
    /* 全体のコンテンツを中央寄せ */
    position: relative;
    /* 背景を考慮して配置 */
}

.know-reason .arrow-text {
    background-image: url(../img/know-arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    display: block;
    margin: 0 auto;
    font-size: max(3.2vw, 2.4rem);
    padding: 0.5rem 0 4% 0;
    max-width: 17rem;
    height: auto;
    display: block;
    margin: 0 auto -2%;
    text-align: center;
    z-index: 1;
    position: relative;
}

.know-reason .bg-gold {
    text-align: center;
    background-image: linear-gradient(180deg, rgba(237, 214, 140, 100%), rgba(202, 176, 117, 1));
    font-size: max(4vw, 3rem);
    font-weight: bold;
    padding: 3%;
    filter: drop-shadow(0px 3px 6px rgba(118, 118, 118, 0.3));
}

.trouble {
    background-image: url(../img/trouble-bg.png);
    background-size: cover;
    height: 100%;
    width: 100%;
    border-radius: 0 10rem 0 0;
    background-repeat: no-repeat;
    overflow: hidden;
}

@media screen and (min-width:750px) {
    .know-title-wrapper {
        padding: 0 0 18% 0;
    }

    .know-title p,
    .know-title .text-small {
        font-size: 3rem;
    }

    .know-doctor {
        max-width: 31rem;
    }

    .note {
        font-size: 1.2rem;
    }

    .know-title .text-brown {
        font-size: 3.8rem;
    }

    .know-fairclinic-text .title {
        font-size: 5rem;
        padding: 4rem 0 2rem 2rem;
    }

    .know-fairclinic-text .detail {
        font-size: 3.6rem;
        font-weight: 300;
        padding: 0 0 5rem 2rem;
    }

    .know-reason .arrow-text {
        font-size: 3.8rem;
    }

    .know-reason .bg-gold {
        font-size: 5.2rem;
    }

    .debut {
        right: 6px;
        top: 20px;
    }

    .know-title .text-brown {
        font-size: 3.6rem;
    }

    .know .note {
        width: 75%;
    }
}


/*================================================================
  about
================================================================*/
.about {
    background-color: #F8F8F8;
    padding-top: 3%;
}

.fairclinic {
    background-image: url(../img/fairclinic-bg.png);
    background-size: cover;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    padding: 10% 0;
    position: relative;
}

.trouble h2 {
    width: 75%;
    padding-top: 2rem;
    max-width: 46rem;
    margin-bottom: 0;
}

.trouble h2 img {
    object-fit: contain;
}

.trouble-list-item {
    background-color: #fff;
    display: inline-block;
    padding: 0.6rem 0.8rem;
    margin-bottom: 1.2rem;
    font-size: max(3vw, 1.3rem);
    font-weight: bold;
    display: flex;
    align-items: center;
}

.trouble-list-item::before {
    content: '';
    background-image: url(../img/check-icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.4rem;
}

.trouble-content {
    display: flex;
    position: relative;
}

.trouble-list {
    z-index: 1;
    margin: 1rem 0 3rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.trouble-content img {
    width: 45%;
    height: auto;
    object-fit: contain;
    position: absolute;
    z-index: 0;
    bottom: 0;
    right: -25px;
    max-width: 21rem;
}

.about-title-img {
    position: absolute;
    width: 90%;
    margin: 0 auto 0;
    display: block;
    top: -1.5%;
    right: 5%;
}

.about-list {
    display: flex;
    flex-direction: column;
}

.about-title {
    display: flex;
    align-items: center;
}

.about-list-item {
    background-color: #fff;
    border-radius: 0 5rem 0 0;
    box-shadow: 0 0 6px rgba(118, 118, 118, .30);
    margin-right: 5%;
    position: relative;
    margin-top: 8%;
}

li.about-list-item.item02,
li.about-list-item.item04 {
    margin-left: 5%;
    border-radius: 5rem 0 0 0;
    margin-right: 0;
}

.about-list-item .sub-title {
    font-size: max(3vw, 1.4rem);
}

.about-title img {
    object-fit: contain;
    width: auto;
    height: 21vh;
    max-width: 20rem;
    padding: 5% 2% 2% 0;
    min-width: 76px;
    max-width: 19rem;
}

li.about-list-item.item04 .about-title img {
    padding-right: 0;
}

.about-list-item h3 {
    font-size: max(3.4vw, 1.6rem);
    padding: 10% 1% 4% 6%;
    width: 75%;
    font-weight: bold;
}

.about-list-item h3::before {
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    width: 20%;
    height: 20%;
    margin-right: 1rem;
    position: absolute;
    top: -16%;
    min-height: 13rem;
}

/* .about-list-item.item04 .about-title h3 {
    width: 80%;
} */

.about-list-item.item01 h3::before {
    background-image: url(../img/about-list-num01.png);
}

.about-list-item.item02 h3::before {
    background-image: url(../img/about-list-num02.png);
}

.about-list-item.item03 h3::before {
    background-image: url(../img/about-list-num03.png);
}

.about-list-item.item04 h3::before {
    background-image: url(../img/about-list-num04.png);
}

.about-list-item p {
    border-top: 1px solid #1A1A1A;
    padding: 5% 0 5% 5%;
    margin-right: 6%;
    font-size: max(2.2vw, 1.4rem);
    font-weight: 300;
}

@media screen and (min-width:750px) {
    .trouble h2 {
        padding-top: 3rem;
    }

    .trouble-content img {
        max-width: 30rem;
        bottom: 0;
        right: 0px;
    }

    .about-list-item h3 {
        padding: 8% 1% 4% 6%;
    }

    .trouble-list {
        margin: 2rem 0 4rem;
    }

    .trouble-list-item {
        font-size: 2.4rem;
        margin-bottom: 2rem;
        padding: 1rem 2rem;
    }

    .trouble-list-item::before {
        width: 3rem;
        height: 3rem;
    }

    .about-list-item {
        margin-right: 10%;
    }

    li.about-list-item.item02,
    li.about-list-item.item04 {
        margin-left: 10%;
    }

    .about-list-item .sub-title {
        font-size: 2.4rem;
    }

    .about-list-item h3 {
        font-size: 3rem;
    }

    .about-list-item p {
        font-size: 2.0rem;
    }

    .about-list-item h3::before {
        width: 12rem;
        height: 15rem;
        top: -7rem;
    }

    .about-title img {
        width: auto;
        height: 20rem;
        padding: 4% 1% 4% 0;
    }
}

/*================================================================
  doctor
================================================================*/
.doctor {
    overflow: hidden;
}

.doctor-bg {
    background-color: #FAF8F3;
    margin: 0 auto;
    position: relative;
}

.doctor h2 {
    font-size: max(4.6vw, 2.4rem);
    font-weight: bold;
    color: #C8AF77;
    position: relative;
    padding: 5% 0 10%;
}

.doctor h2 .text-big {
    font-size: max(5vw, 3rem);
}

.doctor h2 .text-space {
    letter-spacing: -0.3em;
}

.doctor h2:after {
    content: "";
    display: block;
    position: absolute;
    width: 107%;
    height: 100%;
    background-image: url(../img/doctor-gold-line.png);
    background-size: 120%;
    background-repeat: no-repeat;
    top: 68px;
    right: 0px;
    transform: rotate(0deg);
}

.doctor .sub-title {
    font-size: max(3vw, 1.6rem);
    text-align: center;
    font-weight: bold;
    margin: 0;
}

.tab-group {
    margin-top: 20px;
    width: 100%;
    list-style: none;
    text-align: center;
    width: 95%;
    margin: 0 auto;
}

.doctor-img {
    width: 95%;
    display: block;
    margin-bottom: 5%;
}

.tab-button {
    display: flex;
    justify-content: space-between;
    list-style: none;
    /* カーソル形状を指先にする */
    cursor: pointer;
    background: #EAEAEA;
}

.tab-group .tab-button {
    font-size: max(2.6vw, 2rem);
    font-weight: bold;
}

.tab-button .is-active {
    background: #BFA66F;
    color: #FFF;
}

.tab {
    width: calc(100% / 2);
    padding: 8px;
    border-bottom: none;
}

.tab-contents {
    border-top: none;
    background: #fff;
}

.doctor-content {
    display: none;
    padding: 1.8rem 1.4rem 0;
    text-align: left;
}

.doctor-content.is-display {
    display: block;
    border: 1px solid #BFA66F;
}

.doctor-content .post {
    font-size: max(2.6vw, 2rem);
    font-weight: bold;
}

.doctor-content .name {
    font-size: max(5.3vw, 4rem);
    margin-bottom: 2rem;
    font-weight: bold;
}

.doctor-content .name .name-kana {
    font-size: max(2.1vw, 1.6rem);
}

.doctor-detail h4 {
    font-size: max(3.4vw, 2.6rem);
    border-bottom: 1px solid #BFA66F;
    padding-bottom: 1%;
    margin-bottom: 1rem;
    font-weight: bold;
}

.doctor-detail .detail-list {
    font-size: max(2vw, 1.5rem);
    margin-bottom: 2rem;
    font-weight: 300;
    line-height: 1.5;
}

.doctor-last-text {
    position: relative;
    font-size: max(3.6vw, 2rem);
    font-weight: bold;
    padding-top: 15%;
}

.doctor-last-text span {
    font-size: max(5.2vw, 3.2rem);
    color: #C8AF77;
}

.doctor-last-text::before {
    content: "";
    display: block;
    position: absolute;
    width: 110%;
    height: 100%;
    background-image: url(../img/doctor-gold-line.png);
    background-size: 100%;
    background-repeat: no-repeat;
    top: 0px;
    right: -30px;
    transform: rotate(358deg);
}

.doctor-bg::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    /* 背景と同じ幅いっぱい */
    height: 40px;
    /* 矢印の高さ（調整可能） */
    background-color: #FAF8F3;
    /* 指定された色 */
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    /* 下向き矢印 */
    bottom: -40px;
    /* `.docter` の下に配置 */
    left: 0;
}

.doctor .cta {
    margin: 15% 0 10%;
}

@media screen and (min-width:750px) {

    .doctor h2,
    .doctor-last-text {
        font-size: 4.6rem;
    }

    .doctor h2 .text-big,
    .doctor-last-text span {
        font-size: 5.6rem;
    }

    .doctor h2:after {
        width: 100%;
        top: 135px;
        transform: rotate(357deg);
    }

    .doctor .sub-title,
    .doctor-content .name .name-kana,
    .doctor-detail .detail-list {
        font-size: 2.8rem;
    }

    .tab-group .tab-button {
        font-size: 3.4rem;
    }

    .doctor-content .post {
        font-size: 3.2rem;
    }

    .doctor-content .name {
        font-size: 6.4rem;
    }

    .doctor-detail h3 {
        font-size: 4.6rem;
    }

    .doctor-content {
        padding: 4rem 3rem 0;
    }

    .doctor-bg::after {
        height: 7rem;
        bottom: -70px;
    }

    .doctor-last-text {
        padding-bottom: 5%;
    }
}

/*================================================================
  flow
================================================================*/
.flow {
    width: 97%;
    margin: 0 auto;
}

.flow h2 .jp-title {
    font-size: max(4.2vw, 3.2rem);
}

.flow-num img {
    width: auto;
    display: block;
    object-fit: contain;
    height: 3rem;
    position: absolute;
    top: -53px;
    left: -28px;
}

.flow-list .flow-item h3 .flow-title {
    font-size: max(5.2vw, 2.4rem);
    color: #8AB6DC;
    font-weight: bold;
    border-bottom: 3px dotted #8AB6DC;
    padding: 3% 0;
    margin-top: 5%;
    font-weight: bold;
}

.flow-list .flow-item h3 .flow-title span {
    font-size: max(2.6vw, 2rem);
}

.flow-item {
    font-size: max(3vw, 1.5rem);
    padding: 3rem 1.6rem 2rem;
    position: relative;
    filter: drop-shadow(0px 0px 3px rgba(118, 118, 118, 0.3));
    font-weight: 300;
}

.flow-item.item01 {
    background-color: #F3F7F8;
    z-index: 0;
}

.flow-item.item01 .flow-title-wrapper {
    align-items: center;
}


.flow-item.item02 {
    background-color: #E8F6F6;
    z-index: -1;
    padding-top: 8rem;
}

.flow-item.item03 {
    background-color: #D3E9F1;
    z-index: -2;
    padding-top: 8rem;
}

.flow-item.item02 .flow-description-list,
.flow-item.item03 .flow-description-list {
    margin-top: 0;
}

.flow-item.item02 .flow-description-list,
.flow-item.item03 .flow-description-list {
    margin-top: 0;
}

.flow-item.item02 .flow-title-wrapper,
.flow-item.item03 .flow-title-wrapper {
    align-items: flex-end;
}

.flow-item.item01::after,
.flow-item.item02::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 101%;
    height: 50px;
    background-image: url(../img/step01-arrow.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
}

.flow-item.item02::after {
    background-image: url('../img/step02-arrow.png');
}

.flow-description-list {
    margin-top: 3rem;
}

.flow-description-list-item {
    margin-bottom: 1rem;
}

.flow-description-list-item h4 {
    display: inline-block;
    background-color: #80C4FF;
    color: #fff;
    padding: 1% 3%;
    font-weight: bold;
    position: relative;
    top: 12px;
}

.flow-description-list-item p {
    background-color: #fff;
    padding: 2rem;
}

.flow-title-wrapper {
    display: flex;
    justify-content: space-between;
}

.flow-title-wrapper h3 {
    margin-bottom: 2rem;
    position: relative;
}

.flow-item01 {
    width: 80%;
}

.flow-icon {
    width: 20%;
    object-fit: contain;
    max-width: 13.5rem;
    height: auto;
    min-width: 7rem;
    margin-right: 0;
}

.flow02-last-text {
    font-weight: bold;
    text-align: center;
    padding-top: 3%;
}

.flow-appeal {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    position: relative;
    max-width: 750px;
}

.flow-appeal img {
    width: 25%;
    object-fit: contain;
    position: absolute;
    right: 0;
    z-index: -1;
}

.flow-appeal-text {
    position: relative;
    width: 80%;
    min-height: 135px;
    padding: 4% 9% 6% 5%;
    font-size: max(3.4vw, 1.5rem);
    background-image: url(../img/flow-speech-bubble.png);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
    line-height: 1.6;
}

.flow-appeal-text .marker-yellow {
    font-weight: bold;
}

.flow .cta {
    margin: 5% 0 10%;
}

@media screen and (min-width:750px) {
    .flow {
        width: 93%;
    }

    .flow-icon {
        width: 13.5rem;
        height: auto;
    }

    .flow h2 .jp-title {
        font-size: 6.2rem;
        padding: 3rem 0 6rem;
    }

    .flow h2 .en-title img {
        height: 6rem;
        width: 100%;
    }

    .sub-title {
        font-size: 3rem;
    }

    .flow-item {
        font-size: 2.4rem;
        padding: 6rem 3rem 2rem;
    }

    .flow-item01 .flow-num img {
        top: -105px;
    }

    .flow-num img {
        width: auto;
        height: 5rem;
        top: -85px;
        left: -40px;
    }

    .flow-list .flow-item h3 .flow-title {
        font-size: 4.2rem;
    }

    .flow-list .flow-item h3 .flow-title span {
        font-size: 3.6rem;
    }

    .flow-appeal {
        margin-top: 4rem;
    }

    .flow-appeal img {
        width: 19rem;
        right: 12px;
        bottom: 1rem;
    }

    .flow-appeal-text {
        width: 52rem;
        padding: 4% 9% 4% 5%;
        font-size: 2.6rem;
        right: 5px;
    }

    .flow-description-list-item {
        margin-bottom: 3rem;
    }

    .flow-title-wrapper h3 {
        margin-bottom: 3rem;
    }

    .flow-description-list-item p {
        padding: 3rem;
    }
}

/*================================================================
  question
================================================================*/
.question {
    background-color: #FFF5F5;
    padding-bottom: 10%;
}

/*アコーディオン*/
.accordion-list {
    width: 93%;
    margin: 0 auto;
}

.accordion-item {
    width: 100%;
    background-color: #fff;
    padding: 0 2rem;
    box-shadow: 0 3px 6px rgba(118, 118, 118, .30);
    border-radius: 1rem;
}

.accordion-head {
    padding: 2rem 0;
}

.accordion-head,
.accordion-body {
    width: 90%;
    display: flex;
    align-items: center;
}

.accordion-body {
    align-items: flex-start;
}

.accordion-head img,
.accordion-body img {
    width: 3rem;
    height: 100%;
    display: block;
}

.q-title,
.q-answer {
    width: 100%;
    padding-left: 2rem;
}

.q-title {
    font-weight: bold;
    position: relative;
    font-size: max(2.6vw, 2rem);
    padding-left: 2rem;
    padding-right: 3rem;
    /* +ボタンと被らないよう余白を確保 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}


.q-answer {
    font-size: max(2.1vw, 1.6rem);
}

/*
    アコーディオンの2つ目以降、上に余白を取る。
    開閉動作に影響なし。
  */
.accordion-item:nth-child(n+2) {
    margin-top: 2rem;
}

/*
    アコーディオンの開閉ボタンの装飾。
    position: relative;が無いと、
    「+」「-」の位置がずれるので注意。
  */
.accordion-head {
    position: relative;
    width: 100%;
    background: #fff;
    cursor: pointer;
}

/*
    アコーディオンの開閉ボタンの右側に「+」を表示。
  */

.open-close-btn {
    position: absolute;
    top: 50%;
    right: 0;
    /* 右端に配置 */
    transform: translateY(-50%);
    background-color: #E08C97;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    transition: 0.5s;
}

.open-close-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 0.2rem;
    height: 1.2rem;
    background: #FFF;
    transition: all 0.2s 0s ease;
}

.open-close-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 1.2rem;
    height: 0.2rem;
    background: #FFF;
    transition: all 0.2s 0s ease;
}

.accordion-item.active .open-close-btn::before {
    background-color: #EB959D;
}

.accordion-item.active .open-close-btn {
    background-color: #EB959D;
    transition: all 0.2s 0s ease;
}

/*
  アコーディオンの閉じている部分の装飾。
  height: 0; overflow: hidden;にすることで、
  通常時は表示されないようにする。
*/
.accordion-body {
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: all .25s ease;
    border: none;
}

/*
    アコーディオンが開いた際に、
    heightを0からautoに、paddingの上下を0から10に。
  */
.accordion-item.active .accordion-body {
    height: auto;
    border-top: 1px solid #1A1A1A;
    padding: 2rem 0;
}

@media screen and (min-width:750px) {
    .accordion-item {
        padding: 0 2rem;
        box-shadow: 0 3px 6px rgba(118, 118, 118, .30);
        border-radius: 1rem;
    }

    .accordion-head {
        padding: 3rem 0;
    }

    .accordion-head img,
    .accordion-body img {
        width: 5rem;
    }

    .q-title,
    .q-answer {
        width: 100%;
        padding-left: 2rem;
    }

    .open-close-btn {
        width: 3rem;
        height: 3rem;
    }

    .q-title {
        font-size: 3.2rem;
        padding-right: 4rem;
    }

    .q-answer {
        font-size: 2.0rem;
    }

    .open-close-btn {
        width: 3rem;
        height: 3rem;
    }

    .open-close-btn::before {
        width: 0.3rem;
        height: 1.8rem;
    }

    .open-close-btn::after {
        width: 1.8rem;
        height: 0.3rem;
    }

    .accordion-item:nth-child(n+2) {
        margin-top: 3rem;
    }

    .accordion-item.active .accordion-body {
        padding: 3rem 0;
    }
}

/*================================================================
  access
================================================================*/
.access {
    background-color: #EBF3FB;
    margin: 0 auto;
    padding-bottom: 4rem;
}

.access h2 {
    padding-top: 5rem;
    padding-bottom: 2rem;
}

.bg-white {
    background-color: #fff;
    padding: 3rem 2rem 2rem 2rem;
    margin: 1rem 1rem 0 1rem;
}

.clinic-title {
    width: 100%;
    margin: 0 auto 3rem;
}

.clinic-title p {
    text-align: right;
    font-size: max(1.3vw, 1.05rem);
    padding-bottom: 1%;
}

.shop-appearance {
    width: 100%;
    height: 100%;
    margin: 0 auto 10%;
}

.shop-appearance img {
    width: 100%;
    height: 100%;
}

.access iframe {
    width: 100%;
    max-height: 300px;
    display: block;
    margin: 0 auto;
}

.access-list {
    padding: 10% 0 0;
}

.access-item {
    padding-bottom: 10%;
}

.access-item h3 {
    font-size: max(3vw, 2rem);
    border-left: 2px solid #1A1A1A;
    padding-left: 2%;
    margin-bottom: 3%;
    font-weight: bold;
}

.access-item p {
    font-size: max(2.1vw, 1.6rem);
}

@media screen and (min-width:750px) {
    .clinic-title {
        width: 85%;
    }

    .bg-white {
        margin: 1rem 2rem 0 2rem;
        padding: 3rem 1rem 2rem 1rem;
    }

    .clinic-title p {
        font-size: 1.4rem;
        padding-right: 85px;
    }

    .clinic-title img {
        max-width: 45rem;
        margin: 0 auto;
        display: block;
    }

    .shop-appearance,
    .access iframe {
        width: 95%;
    }

    .access-item h3 {
        font-size: 3rem;
        padding-left: 1%;
    }

    .access-item p {
        font-size: 2.4rem;
    }

    .access-list {
        width: 95%;
        margin: 0 auto;
    }

    .access-list {
        padding: 4rem 0 0;
    }

    .access-item {
        padding-bottom: 4rem;
    }
}

/*================================================================
  form
================================================================*/
#wrapper {
    width: 86%;
    margin: 0 auto;
}

.form h2 {
    background-image: url(../img/contact-title-bg.png);
    background-size: 100%;
    object-fit: contain;
    max-width: 750px;
    width: 100%;
    height: 100%;
    color: #fff;
    background-repeat: no-repeat;
    padding-top: 8%;
    margin-bottom: 0%;
}

.mfp_element_select-one,
.mfp_rows,
form#mailformpro label.mfp_not_checked,
form#mailformpro .mailform .form-title,
.mfp_element_textarea {
    border-style: none;
    box-shadow: none;
    align-items: center;
}

form#mailformpro .mailform .form-title.form-title {
    border: none;
    font-size: max(3vw, 2rem);
    display: flex;
    margin-bottom: 1rem;
    border-left: 2px solid #1A1A1A;
    padding-left: 2%;
    background-color: transparent;
    font-weight: bold;
}

.mailform .note {
    color: #1a1a1a;
    padding-left: 0;
    margin-bottom: 3%;
    font-size: 1.6rem;
    text-align: left;
}

.mfp_rows.tel {
    border: none;
    display: flex;
}

.mfp_rows.name {
    display: flex;
    border: none;
}

.mfp_rows.name .sei {
    margin-right: 2%;
}

.mfp_rows.name .mfp_col5 input[type="text"],
.mfp_element_select-one,
.mailform input[type="tel"],
.mailform input[type="number"],
input[type="email"],
input[type="date" i],
.mailform .ar select,
form#mailformpro label.mfp_not_checked,
.mfp_element_textarea {
    border-radius: 0.5rem;
    border: 1px solid #1A1A1A;
    height: 3.6rem;
    padding: 0 1rem;
    width: 100%;
    font-size: max(2.6vw, 1.6rem);
    box-shadow: none;
}

.mfp_element_textarea {
    height: 10rem !important;
    /* 必要なら高さ調整 */
    padding: 1% 3%;
    width: 100% !important;
    display: block;
    /* 念のため */
}

.mailform input[type="number"] {
    width: 30%;
}

.must,
.optional {
    background-color: #E4416B;
    border: none;
    text-shadow: none;
    padding: 0.3rem 1.2rem;
    font-size: max(2.1vw, 1.6rem);
    color: #FFF;
    margin: 4px 10px;
    border-radius: 0.5rem;
    box-shadow: 0 0px 6px rgba(118, 118, 118, .30);
    background-image: none;
    font-weight: bold;
}

.optional {
    background-color: #717171;
}

form#mailformpro .mailform .mfp:not(textarea) {
    margin-bottom: 2.6rem;
    padding: 0;
    background-color: transparent;
}

form#mailformpro .mailform .other-information {
    margin-bottom: 2.6rem;
    padding: 0;
    background-color: #fff;
    border: 1px solid #1A1A1A;
    border-radius: 0.5rem;
}

form#mailformpro .mailform .other-information textarea {
    width: 100%;
    height: 100%;
}

.mailform input[type="radio"],
input#mfp_element_57,
input#mfp_element_16 {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

input#mfp_element_57 {
    margin-right: 5%;
}

form#mailformpro label,
.mailform select,
input[type="date" i] {
    font-size: max(2.6vw, 1.6rem);
}

input[type="date" i],
.mailform .ar select {
    font-size: max(2.1vw, 1.6rem);
}

form#mailformpro label.mfp_not_checked {
    display: flex;
    width: auto;
    border: none;
    padding: 0;
    height: auto;
}

form#mailformpro label.mfp_checked {
    border: none;
    background: none;
    box-shadow: none;
    width: auto;
    padding: 0;
}

form#mailformpro .mfp.radio label,
form#mailformpro label {
    border: none;
    background: none;
    box-shadow: none;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
}

form#mailformpro .mfp.radio label,
form#mailformpro label.mfp_checked {
    display: flex;
    align-items: center;
    height: auto;
}

form#mailformpro .mailform .mfp.gender {
    display: flex;
}

#errormsg_性別 {
    margin-bottom: 4rem;
    margin-top: -2rem;
}

form#mailformpro .mailform .mfp.gender label {
    width: 4em;
}

.mfp.mfp_achroma.calendar {
    display: flex;
    align-items: center;
    height: 3rem;
    box-sizing: initial;
}

.mfp_element_submit:hover,
.mfp_element_reset:hover,
.mfp_element_button:hover,
button.mfp_next:hover,
button.mfp_prev:hover {
    background: none;
    background-color: #22C00F;
    opacity: 0.6;
}

div.mfp_btn {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

div.mfp_btn button {
    height: 5rem;
    background: none;
    background-color: #22C00F;
    color: #fff;
    border-radius: 3.5rem;
    font-size: max(2.6vw, 2rem);
    width: 90%;
    box-shadow: 0 3px 6px rgba(118, 118, 118, .30);
    border: none;
    text-shadow: none;
}

/* 送信ボタン */
div.mfp_btn button.send {
    background-color: #22C00F;
    margin: 5% 0;
}

div.mfp_btn button.send:hover {
    opacity: 0.6;
}

/* リセットボタン */
div.mfp_btn button.reset {
    background-color: #686868;
}

div.mfp_btn button.reset:hover,
div.mfp_btn button.reset:active {
    opacity: 0.6;
}

.mfp_rows.tel {
    display: flex;
    align-items: center;
}

.mfp_rows.tel .mfp_col3 {
    position: relative;
    display: flex;
    align-items: center;
}

.mfp_rows.tel .mfp_col3 input[type="tel"] {
    width: 90%;
    height: 4rem;
    text-align: center;
    font-size: max(2.6vw, 1.6rem);
    background: transparent;
}

/* ハイフンのスタイル */
.mfp_rows.tel .mfp_col3:not(:last-child)::after {
    content: '-';
    font-size: max(4.6vw, 2rem);
    padding-left: 1%;
}

form#mailformpro .cal-select {
    font-size: max(2.6vw, 2rem);
    margin-bottom: 1rem;
    font-weight: bold;
}

/* セレクトボックスのカスタマイズ */
select {
    appearance: none;
    /* デフォルトの矢印を非表示 */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 2rem;
}

input[type="date"],
select#mfp_element_51,
select.mfp_element_select-one.mfp_element_all,
.mailform .ar select {
    background-color: white;
    color: black;
    border: 1px solid #1A1A1A;
    width: 100%;
}

input::placeholder {
    color: #999;
    /* プレースホルダーの色を指定 */
    opacity: 1;
    /* Safariでの透明度を調整 */
}

input[type="date"] {
    margin-right: 5%;
    width: 10em;
}

form#mailformpro label.ar {
    width: 13em;
}

form#mailformpro label.cal {
    width: 8em;
}

table#mfp_confirm_table tr th {
    width: 40%;
}

div.mfp_err {
    font-size: 1.6rem;
}


.mfp_element_submit:hover,
.mfp_element_reset:hover,
.mfp_element_button:hover,
button.mfp_next:hover,
button.mfp_prev:hover {
    background: none;
    background-color: #22C00F;
    opacity: 0.6;
}

div.mfp_buttons button {
    height: 5rem;
    background: none;
    background-color: #22C00F;
    color: #fff;
    border-radius: 3.5rem;
    font-size: max(2.6vw, 2rem);
    width: 90%;
    box-shadow: 0 3px 6px rgba(118, 118, 118, .30);
    border: none;
    text-shadow: none;
}

div.mfp_buttons button#mfp_button_send {
    background-color: #22C00F;
    margin: 5% 0;
}

div.mfp_buttons button#mfp_button_send:hover {
    opacity: 0.6;
}

div.mfp_buttons button#mfp_button_cancel {
    background-color: #666;
}

div.mfp_buttons button#mfp_button_cancel:hover {
    opacity: 0.6;
}

div.mfp_buttons button#mfp_button_cancel {
    background-color: #686868;
}

div.mfp_buttons button#mfp_button_cancel:hover {
    opacity: 0.6;
}

div.mfp_buttons button#mfp_button_cancel:active {
    opacity: 0.6;
}

@media screen and (min-width: 800px) {
    #wrapper {
        width: 100%;
    }
}

@media screen and (min-width: 750px) {
    div.mfp_btn button {
        height: 7rem;
        font-size: 2.4rem;
    }


    .mailform {
        margin-top: 4rem;
    }

    #errormsg_性別 {
        margin-top: -4rem;
    }

    div.mfp_buttons button {
        height: 7rem;
        font-size: 2.4rem;
        box-shadow: 0 3px 6px rgba(118, 118, 118, .30);
    }

    select {
        background-size: 3rem;
    }

    .mfp_rows.tel .mfp_col3:not(:last-child)::after {
        font-size: 2.4rem;
    }

    form#mailformpro label,
    .mailform select,
    input[type="date" i],
    .mfp.mfp_achroma.calendar {
        width: 100%;
        height: 7rem;
    }

    form#mailformpro .mailform .form-title.form-title {
        font-size: 3rem;
        margin-bottom: 2rem;
        padding-left: 1%;
    }

    .mfp_rows.name .mfp_col5 input[type="text"],
    .mfp_element_select-one,
    .mailform input[type="tel"],
    .mailform input[type="number"],
    .mailform .ar select,
    form#mailformpro label.mfp_not_checked,
    .mfp_rows.tel .mfp_col3 input[type="tel"],
    input[type="email"],
    .mfp_element_textarea {
        height: 7rem;
        border: 0.1rem solid #1A1A1A;
        font-size: 2.4rem;
    }

    form#mailformpro label.mfp_not_checked {
        border: none;
        height: auto;
    }

    form#mailformpro #mfp_element_17_label {
        margin-bottom: 1.4rem;
        height: auto;
    }

    form#mailformpro label.mfp_checked {
        padding: 0;
        border: none;
        background-color: transparent;
        box-shadow: none;
        margin-right: 0;
    }

    .mailform input[type="radio"],
    input#mfp_element_57,
    input#mfp_element_16 {
        width: 3.0rem;
        height: 3.0rem;
    }

    form#mailformpro label,
    .mailform select,
    input[type="date" i],
    form#mailformpro .cal-select {
        font-size: 2.4rem;
    }

    form#mailformpro .cal-select {
        margin-bottom: 2rem;
    }

    form#mailformpro .mailform .mfp {
        margin-bottom: 4rem;
    }

    form#mailformpro .mailform .mfp.mfp.radio .radio-wrapper {
        display: flex;
    }

    .must,
    .optional {
        font-size: 2.6rem;
    }

    input#mfp_element_57 {
        margin-right: 3%;
    }

    form#mailformpro label.ar {
        width: 18em;
    }

    form#mailformpro label.cal {
        width: 13em;
    }

    .radio-wrapper-sale {
        width: 80%;
    }

    div.mfp_buttons button {
        height: 7rem;
        font-size: 2.4rem;
        box-shadow: 0 3px 6px rgba(118, 118, 118, .30);
    }
}

/*================================================================
  footer
================================================================*/
footer {
    margin: 0 auto;
    text-align: center;
    padding: 10% 0 10%;
    color: #1a1a1a;
    margin: 7% 0 0;
    font-size: 1.6rem;
}

footer div {
    margin-bottom: 2%;
}

footer p {
    font-size: 1.2rem;
}


/* animation keyframes */
.pekopeko {
    animation: pekopeko 2s infinite;
}

@keyframes pekopeko {
    0% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }

    10% {
        box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
        top: 3px;
    }

    20% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }

    30% {
        box-shadow: 0 0 0 rgb(0, 0, 0, 0.3);
        top: 3px;
    }

    40% {
        box-shadow: 0 3px 0 rgb(0, 0, 0, 0.3);
        top: 0px;
    }
}


.reflection {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.reflection:after {
    content: "";
    height: 100%;
    width: 30px;
    position: absolute;
    top: -180px;
    left: 0;
    background-color: #fff;
    opacity: 0;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
}

@keyframes reflection {
    0% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0;
    }

    80% {
        -webkit-transform: scale(0) rotate(45deg);
        opacity: 0.5;
    }

    81% {
        -webkit-transform: scale(4) rotate(45deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(50) rotate(45deg);
        opacity: 0;
    }
}

body.public-page {
    font-size: 17px;
    background-color: #F4F4F4;
}

@media screen and (min-width: 621px) {
    .only-sp {
        display: block;
    }

    body.public-page {
        width: 620px;
        margin: 0 auto;
    }

    .column-narrow .content-in {
        width: 620px;
    }
}

.content {
    margin: 0;
}

.entry-content {
    font-size: 16px;
    margin: 0;
}

/*================================================================
  250403
================================================================*/
.treatment-price-img-new {
    margin: 5% 0;
    width: 100%;
    max-width: 100%;
}

.treatment-price-img01 {
    margin: 5% auto 1%;
}

.treatment-wrapper .note-toggle {
    text-align: left;
    padding-right: 0;
}

.treatment-wrapper .note-toggle .toggle-content {
    list-style-type: disc;
}

.toggle-section {
    border-bottom: 1px solid #ddd;
    font-size: 1rem;
}

.toggle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    padding: 5px 5px 0;
    margin-bottom: 5px;
}

.toggle-header:hover {
    opacity: 0.8;
}

.toggle-content {
    display: none;
    padding-left: 20px;
}

.arrow {
    transition: transform 0.3s;
}

.open .toggle-content {
    display: block;
    padding: 0px 20px 5px;
}

.open .arrow {
    transform: rotate(180deg);
}

@media (min-width: 750px) {
    .toggle-section {
        font-size: 1.4rem;
    }
}

/*================================================================
  250403
================================================================*/
.consent-button-container {
    text-align: center;
}

.consent-button {
    display: inline-block;
    padding: 12px 9%;
    background-color: #7b94b1;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 30px;
    text-align: center;
    transition: background-color 0.3s;
    margin: 5% 0 0;
}

.consent-button:hover {
    background-color: #647a93;
}

@media (min-width: 750px) {
    .consent-button {
        width: 80%;
        padding: 15px;
        max-width: 400px;
    }
}

.consent {
    margin-top: 20px;
}

.consent p {
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

.cp-monitor {
    content: '';
    background-image: url(../img/monitor-cp-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    background-position: top;
    padding: 10% 0 20%;
}

.cp-monitor-wrapper {
    width: 95%;
    margin: 0 auto 0;
    background-color: #fff;
    padding-bottom: 2%;
}

.cp-monitor-price {
    margin: 0 auto 5%;
    width: 90%;
    display: block;
}

.cp-monitor-title {
    margin: 0 auto;
    width: 100%;
    display: block;
    transform: translateY(-20px);
}

.conditions {
    width: 80%;
    margin: 0 auto;
    font-size: max(2.2vw, 1.4rem);
}

.conditions ul {
    padding: 3% 0 5%;
}

.conditions ul li {
    list-style-type: disc;
}

.conditions .title {
    font-size: max(3.4vw, 1.8rem);
    font-weight: bold;
    text-align: center;
    position: relative;
    color: #EC2E7D;
}

.conditions .title::before,
.conditions .title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 3em;
    height: 1px;
    background: #EC2E7D;
}

.conditions .title::before {
    left: 34%;
    transform: translateX(-100%);
}

.conditions .title::after {
    right: 34%;
    transform: translateX(100%);
}

@media (min-width: 750px) {
    .conditions .title {
        font-size: 3rem;
    }

    .conditions ul {
        font-size: 2rem;
    }
}

/*休診日カレンダー追加css*/
.loading_modal_calendar .modal-open {
    font-size: 2.5rem;
}

.loading_modal_calendar {
    margin: 3% auto;
}

@media (max-width: 750px) {
    .loading_modal_calendar .modal-open {
        font-size: 5.2vw;
    }
}