@charset "utf-8";
/*==========================
Article header
==========================*/
.mv-fixed-wrapper-sp {
    display: none;
}

#snow_particles-sp {
    display: none;
}

.sp320br {
    display: none;
}

.article-header {
    display: flex;
    position: relative;
}

/* メインビジュアル全体をフェードインさせる(始) */
.article-header.fadeIn.is-animated {
    animation: fadeIn 1.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;    
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
/* メインビジュアル全体をフェードインさせる(終) */

.mv-slide-show, .mv-fixed {
    width: 50%;
}

/* スライドショーの写真をズームアウトさせる設定(始) */
.mv-slide-show img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08);
    display: block;
}

/* slickで現在のスライドにアニメーション */
.slick-current img {
    animation: zoomOut 3s linear 0s;
    animation-fill-mode: both;
}

/* ズームアウトクラスが適用されたときのアニメーション */
.mv-slide-show .slick-slide.zoom-out img {
    animation: zoomOut 3s linear 0s;
    animation-fill-mode: both;
}

@keyframes zoomOut {
0%   { transform: scale(1.08); }
100% { transform: scale(1); }
}
/* スライドショーの写真をズームアウトさせる設定(終) */

.mv-fixed {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../images/mv-sub-img.webp"); /* 背景画像 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#snow_particles {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    pointer-events: none;
    background: transparent;
    opacity: 1;
}

.mv-fixed-wrapper {
    position: relative;
    z-index: 1; /* ロゴやテキストはsnow_particlesの上に表示 */
    width: 35.76vw;
    height: 37.55vw;
    padding: 0.69vw;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.85);
}

/* .mv-fixed-wrapperを右からふわっとさせる設定(始) */
.mv-fixed-wrapper.slideIn-right.is-animated {
    animation: slideIn-right 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideIn-right {
    0% {transform: translateX(180px);opacity: 0;}
    100% {transform: translateX(0);}
    40%,100% {opacity: 1;}
}
/* .mv-fixed-wrapperを右からふわっとさせる設定(終) */

.mv-fixed-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* padding: 2.6vw; */
    gap: 2.78vw;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 0.7px solid rgba(149, 109, 48, 0.80);
}

.mv-logo {
    width: 14.31vw;
    height: 22.83vw;
}

.mv-topic {
    color: var(--primary-dark-amber);
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 1.25vw;
    font-weight: 600;
}

.mv-tagline {
    height: fit-content;
    color: #FFFFFF;
    font-family: "Cormorant Garamond";
    font-size: 2.08vw;
    font-weight: 700;
    line-height: 1.8;
    letter-spacing: 0.06em;
    text-align: start;
    position: absolute;
    bottom: 6.11vw;
    left: 3.68vw;
}

.mv-tagline span {
    display: block;
    font-size: 1.67vw;
    margin-top: 24px;
}

/* .mv-taglineを左からふわっとさせる設定(始) */
.mv-tagline.slideIn-left.is-animated {
    animation: slideIn-left 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideIn-left {
    0% {transform: translateX(-180px);opacity: 0;}
    100% {transform: translateX(0);}
    40%,100% {opacity: 1;}
}
/* .mv-taglineを左からふわっとさせる設定(終) */

.mv-sns {
    display: flex;
    flex-direction: column;
    gap: 2.08vw;
    position: absolute;
    bottom: 2.9vw;
    right: 1.11vw;
}

.mv-sns figure {
    transition: 0.5s;
    width: 2.08vw;
    height: 2.08vw;
}

.mv-sns figure img {
    display: block;
    width: 100%;
    height: 100%;
}

.mv-sns figure:hover {
    transform: scale(1.2,1.2);
}

/*==========================
Greeting
==========================*/
.section-greeting {
    padding: 80px 20px;
    background-color: var(--primary-beige);
    overflow: hidden;
}

.section-greeting-inner {
    max-width: 1280px;
    padding: 80px 20px;
    border-radius: 10px;
    background: linear-gradient(0deg, rgba(250, 250, 250, 0.60) 0%, rgba(250, 250, 250, 0.60) 100%), url(../images/greeting-bg-img.webp) lightgray -13.638px -12.155px / 102.033% 100.722%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 0 auto;
}

.greeting-introduction-first {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
    max-width: 1114px;
    margin: 70px auto 0;
    font-family: "Noto Serif JP";
}

.owner-img-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 33%;
    max-width: 333px;
    height: auto;
    flex-shrink: 0;
    position: relative;
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.0s ease; /* 下からふわっとさせる設定 */
}

.salon-owner-font {
    display: block;
    width: 17.64vw;
    height: 7.71vw;
    max-width: 254px;
    max-height: 111px;
    position: absolute;
    left: -98px;
    top: -2.3vw;
    transform: rotate(-37deg);
    opacity: 0;
}

.salon-owner-font.is-animated {
    animation: writeText 1s ease-in-out forwards;
}

@keyframes writeText {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }
    10% {
        opacity: 1;
    }
    90% {
        clip-path: inset(0 0% 0 0);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0% 0 0);
    }
}

.owner-img-wrapper h3 {
    color: var(--primary-amber);
    text-align: start;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
}

.owner-greeting-wrapper {
    width: 67%;
    max-width: 674px;
    height: auto;
    position: relative;
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.2s ease; /* 下からふわっとさせる設定 */
}

.owner-greeting-wrapper::after {
    content: "";
    display: block;
    background-image: url(../images/white-flower01.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 6.96vw;
    height: 7.36vw;
    max-width: 100px;
    max-height: 106px;
    position: absolute;
    bottom: -40px;
    right: -3.5vw;
    z-index: -1;
}

.owner-greeting-name {
    display: inline-block;
    width: 100%;
    text-align: right;
    font-size: 1.6rem;
}

.space {
    display: inline-block;
    width: 1em;
}

.greeting-introduction-second {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
    max-width: 1114px;
    height: auto;
    padding-bottom: 40px;
    margin: 100px auto 0;
    font-family: "Noto Serif JP";
}

.license-wrapper {
    width: 56%;
    max-width: 605px;
    height: auto;
    position: relative;
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.2s ease; /* 下からふわっとさせる設定 */
}


.license-wrapper::before {
    content: "";
    display: block;
    background-image: url(../images/white-flower04.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 16.32vw;
    height: 9.44vw;
    max-width: 235px;
    max-height: 136px;
    position: absolute;
    left: 56px;
    top: -119px;
}

.license-wrapper h4 {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.8;
}

.license-wrapper h4 img {
    display: inline-block;
    width: 37px;
    height: 37px;
    margin-right: 8px;
}

.training-img-wrapper {
    width: 44%;
    max-width: 477px;
    height: auto;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.0s ease; /* 下からふわっとさせる設定 */
}

.training-img-wrapper img {
    width: 100%;
    height: auto;
}

.license-list, .career-list {
    line-height: 1.8;
    margin-top: 24px;
}

.license-wrapper h4:nth-child(n+2) {
    margin-top: 40px;
}

.btn-list-greeting {
    margin-top: 80px;
}

/*==========================
Concept
==========================*/
.section-concept{
    padding: 80px 20px;
    background-color: var(--primary-beige);
}

.topic-concept {
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.pan_rea-font {
    display: block;
    width: 13.33vw;
    height: 8.19vw;
    max-width: 192px;
    max-height: 118px;
    position: absolute;
    right: -212px;
    bottom: 5px;
    transform: rotate(-24deg);
    opacity: 0;
    z-index: -5;
}

.pan_rea-font.is-animated {
    animation: writeText 1s ease-in-out forwards;
}

@keyframes writeText {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }
    10% {
        opacity: 1;
    }
    90% {
        clip-path: inset(0 0% 0 0);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0% 0 0);
    }
}

.concept-introduction-first {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;
    max-width: 1114px;
    margin: 70px auto 0;
}

.concept-first-img {
    display: block;
    width: 30.4%;
    max-width: 328px;
    height: auto;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.0s ease; /* 下からふわっとさせる設定 */
}

.pan-rea-introduction-wrapper {
    width: 69.6%;
    max-width: 751px;
    height: auto;
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.2s ease; /* 下からふわっとさせる設定 */
}

.pan-rea-introduction-wrapper h3 {
    color: var(--primary-green);
    font-family: "Noto Serif JP";
    font-size: 2.6rem; /* フォールバック */
    font-size: clamp(1.8rem,1.81vw,2.6rem);
    font-weight: 600;
    line-height: 2.4;
}

.pan-rea-introduction-text {
    font-family: "Noto Sans JP";
    margin-top: 30px;
}

.concept-introduction-second {
    max-width: 1114px;
    padding: 60px 60px;
    background-color: var(--primary-white);
    margin: 130px auto 0;
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.2s ease; /* 下からふわっとさせる設定 */
}

.concept-introduction-second h3 {
    color: var(--primary-green);
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 3rem; /* フォールバック */
    font-size: clamp(2rem,2.08vw,3rem);
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 30px */
}

.thai-traditional-massage-introduction-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 994px;
    margin-top: 50px;
}

.thai-traditional-massage-introduction-text {
    font-family: "Noto Sans JP";
    width: 54.34%;
    max-width: 513px;
    height: auto;
    text-align: left;
}

.thai-traditional-massage-introduction-img {
    width: 45.66%;
    max-width: 431px;
    height: auto;
    flex-shrink: 0;
}

.thai-traditional-massage-introduction-img img {
    width: 100%;
    height: 100%;
}

.concept-introduction-third {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    max-width: 1114px;
    margin: 90px auto 0;
}

.concept-third-img {
    width: 42.07%;
    max-width: 435px;
    height: auto;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.0s ease; /* 下からふわっとさせる設定 */
}

.concept-third-img img {
    width: 100%;
    height: auto;
}

.appeal-point-wrapper {
    width: 57.93%;
    max-width: 599px;
    height: auto;
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.2s ease; /* 下からふわっとさせる設定 */
}

.appeal-point-wrapper h3 {
    text-align: left;
    font-family: "Noto Serif JP";
    font-size: 3rem; /* フォールバック */
    font-size: clamp(2rem,2.08vw,3rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.06em;
    position: relative;
    z-index: 1;
}

.appeal-point-wrapper h3::before {
    content: "";
    display: block;
    background-image: url(../images/concept-pink-hasu.webp);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 9.72vw;
    height: 8.13vw;
    max-width: 140px;
    max-height: 117px;
    position: absolute;
    left: -3.4vw;
    top: -2.43vw;
    z-index: -1;
}

.appeal-point-wrapper h3 span {
    color: #C8412D;
    font-size: 4rem; /* フォールバック */
    font-size: clamp(3rem,2.78vw,4rem);
    font-style: normal;
    font-weight: 600;
    line-height: 1;
}

.appeal-point-list {
    max-width: 599px;
    height: auto;
    margin-top: 70px;
    font-family: "Noto Sans JP";
}

.appeal-point-list li {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 16px;
    width: 100%;
    padding: 10px;
    background-color: var(--primary-white);
}

.appeal-point-list li:not(:first-child) {
    margin-top: 24px;
}

.check-o {
    display: block;
    width: 3.47vw;
    height: 3.47vw;
}

.appeal-point-list li p {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.8;
}

.btn-list-concept {
    margin: 70px auto 0;
}

/*==========================
Lesson
==========================*/
.btn-list-lesson-sp {
    display: none;
}

.section-lesson {
    padding: 100px 20px;
    background-color: var(--primary-white);
}

.section-lesson-inner {
    max-width: 1280px;
    padding: 40px 20px 80px;
    background-color: var(--primary-beige);
    margin: 0 auto;
}

.lesson-introduction-first {
    max-width: 1114px;
    margin: 70px auto 0;
}

.lesson-point-list {
    width: 100%;
    height: 100%;
}

.lesson-point-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: auto;
    background-color: var(--primary-white);
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.2s ease; /* 下からふわっとさせる設定 */
}

.lesson-point-img {
    width: 50%;
    aspect-ratio: 1/1;
}

.lesson-point-img img {
    width: 100%;
    height: 100%;
}

.lesson-point-details {
    width: 50%;
    aspect-ratio: 1/1;
    padding: 2.78vw 2.22vw;
}

.lesson-point-details h3 {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px;
    font-family: "Noto Serif JP";
    font-size: 2.8rem; /* フォールバック */
    font-size: clamp(2rem,1.94vw,2.8rem);
    font-weight: 300;
    line-height: 2;
}

.point-deco {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26.84%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 127px;
    max-height: 127px;
    color: var(--primary-orange);
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 2.4rem;
    font-size: clamp(1.8rem, 1.67vw, 2.4rem);
    font-weight: 600;
    line-height: 1.2;
    position: relative;
    z-index: 10;
}

.point-deco::before {
    display: block;
    content: "";
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 127px;
    max-height: 127px;
    background-image: url(../images/lesson-bg-hasu.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
}

.point-title {
    width: 73.16%;
    height: auto;
}

.lesson-point-details-text {
    margin-top: 32px;
    font-family: "Noto Sans JP";
}

.btn-list-lesson {
    margin-top: 32px;
}

.btn-orange-lesson,.btn-green-lesson {
    font-size: 1.2rem; /* フォールバック */
    font-size: clamp(0.8rem,0.83vw,1.2rem);
    width: 14.72vw;
    max-width: 212px;
    height: 4.65vw;
    max-height: 67px;
}

.btn-orange-lesson img,.btn-green-lesson img {
    width: 2.78vw;
    max-width: 40px;
    height: 2.78vw;
    max-height: 40px;
}

.btn-orange-lesson span,.btn-green-lesson span {
    font-size: 2rem; /* フォールバック */
    font-size: clamp(1.4rem,1.39vw,2rem);
}

/*==========================
Course Menu
==========================*/
.lesson-introduction-second {
    max-width: 1114px;
    margin: 80px auto 0;
    background-color: var(--primary-beige);
}

.lesson-introduction-second h2 {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 10px;
    width: fit-content;
    margin: 0 auto;
    color: var(--primary-amber);
    line-height: 1;
    position: relative;
    opacity: 0;
    transform: translateY(40px);
    transition: 1.2s ease;
}

.lesson-introduction-second h2::before {
    content: "";
    display: block;
    background-image: url(../images/corse-menu-deco.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -90px;
    width: 69.28px;
    height: 100%;
}

.lesson-introduction-second h2::after {
    content: "";
    display: block;
    background-image: url(../images/corse-menu-deco.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -90px;
    width: 69.28px;
    height: 100%;
}

.course-topic_en {
    font-size: 6.4rem;
    font-size: clamp(5rem, 4.44vw, 6.4rem);
}

.course-topic_ja {
    font-family: "Noto Serif JP";
    font-size: 1.6rem;
}

.course-text {
    font-family: "Noto Sans JP";
    max-width: 590px;
    height: auto;
    font-size: 1.6rem;
    margin: 60px auto 0;
}

.course-ribbon {
    max-width: 472px;
    height: auto;
    margin: 60px auto 0;
}

.menu-plan {
    max-width: 1114px;
    height: auto;
    margin: 60px auto 0;
}

.plan-item {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width:1114px;
    height: 165px;
    box-shadow: 0.3rem 0.3rem 40px rgba(85, 85, 85, .1);
    background-color: #FFFFFF;
    opacity: 0;
    transform: translateX(-40px); /* 左からふわっとさせる設定 */
    transition: 0.8s ease; /* 左からふわっとさせる設定 */
}

.plan-item:nth-child(n+2) {
    margin-top: 40px;
}

.plan-item h3 {
    width: 22.98%;
    height: 100%;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Noto Sans JP";
    font-size: 2.2rem; /* フォールバック */
    font-size: clamp(1.8rem,1.53vw,2.2rem);
    font-weight: 500;
    line-height: 1.8;
    background-color: var(--primary-lightgray);
}

.plan-price-time-wrapper {
    width: 25.58%;
    height: 100%;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background-color: #FFFFFF;
}

.price {
    max-width: 151px;
    height: auto;
    color: var(--primary-black);
    font-size: 1.2rem; /* フォールバック */
    font-size: clamp(1.6rem,1.53vw,2.2rem);
    font-size: 1.2rem;
    line-height: 1;
    text-align: end;
    font-family: "Noto Sans JP";
}

.price span {
    font-family: "Noto Serif JP";
    font-size: 2.4rem; /* フォールバック */
    font-size: clamp(1.8rem,1.67vw,2.4rem);
    font-weight: 600;
    line-height: 1;
    background: linear-gradient(180deg, #F3C11B 0%, #E39513 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.time {
    max-width: 74px;
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    line-height: 1;
    text-align: left;
}

.time span {
    font-family: "Noto Serif JP";
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
}

.plan-text-wrapper {
    width: 51.44%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 20px;
    padding: 20px 15px;
    background-color: #FFFFFF;
}

.desc {
    font-family: "Noto Sans JP";
    line-height: 1.8;
    text-align: left;
}

.note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: "Noto Serif JP";
    width:fit-content;
    height: auto;
}

.tag {
    display: block;
    padding: 5px 10px;
    width: fit-content;
    height: auto;
    color: #FFF;
    font-family: "Noto Serif JP";
    font-size:1.2rem;
    font-weight: 600;
    line-height: 1;
}

.tag-text {
    background-color: var(--primary-amber);
}

.tag-certificate {
    background-color: var(--primary-green);
}

.course-postscript {
    max-width: 1114px;
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    line-height: 1.8;
    margin: 50px auto 0;
}

.course-postscript p::before {
    content: "※";
}

.course-postscript p:nth-child(n+2) {
    margin-top: 20px;
}

.announce-text {
    width: fit-content;
    margin: 50px auto 0;
    color: var(--primary-red);
    font-size: 2.4rem; /* フォールバック */
    font-size: clamp(1.8rem,1.67vw,2.4rem);
    font-weight: 600;
    line-height: 1.8;
    position: relative; 
}
    
.announce-text::before {
    content: "";
    display: inline-block;
    height: 25px;
    width: 21px;
    background-image: url(../images/line-left.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    left: -45px;
    transform: translateY(-40%);
}

.announce-text::after {
    content: "";
    display: inline-block;
    height: 25px;
    width: 21px;
    background-image: url(../images/line-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 50%;
    right: -45px;
    transform: translateY(-40%);
}

.btn-list-course-menu {
    margin: 40px auto 0;
}
/*==========================
Salon Info.
==========================*/
.section-salon-info {
    max-width: 1440px;
    margin: 0 auto;
    padding: 100px 83px;
    background-color: var(--primary-beige);
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.section-salon-info::before {
    content: "";
    display: block;
    background-image: url(../images/salon-info-white-hasu-big.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.75;
    width: 36.53vw;
    height: 36.53vw;
    max-width: 526px;
    max-height: 526px;
    position: absolute;
    right: -18px;
    top: -10.5vw;
    z-index: -1;
    animation: rotate-flower-right 65s linear infinite;
}

@keyframes rotate-flower-right {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(360deg);
    }
}

.section-salon-info::after {
    content: "";
    display: block;
    background-image: url(../images/salon-info-white-hasu-small.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 21.94vw;
    height: 21.94vw;
    max-width: 316px;
    max-height: 316px;
    position: absolute;
    left: -1px;
    bottom: 27px;
    z-index: -1;
    animation: rotate-flower-left 65s linear infinite;
}

@keyframes rotate-flower-left {
    from {
    transform: rotate(0deg);
    }
    to {
    transform: rotate(-360deg);
    }
}

.salon-info-introduction {
    display: flex;
    align-items: stretch;/* ← 各子要素の高さを親に合わせる！ */
    justify-content: space-between;
    max-width: 1114px;
    height: auto;
    margin: 70px auto 0;
}

.salon-info-img {
    width: 37.61%;
    height: auto; /* 高さはflexで揃う */
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.0s ease; /* 下からふわっとさせる設定 */
}

.salon-info-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* 画像を枠いっぱいにトリミングして埋める */
    object-position: center;  /* 中央を基準にトリミング */
    display: block;
}

.salon-info-description {
    width: 59.78%;
    height: auto;
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.0s ease; /* 下からふわっとさせる設定 */
}

.salon-info-description p {
    font-family: "Noto Sans JP";
}

.salon-info-description dl {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px;
    padding: 10px 0;
    font-family: "Noto Sans JP";
    line-height: 1.8;
}

.salon-info-description dl:first-of-type {
    margin-top: 40px;
}

.salon-info-description dl:not(:last-of-type) {
    border-bottom: solid 1px rgba(57, 82, 65, 0.20);
}

.salon-info-description dt {
    width: 84px;
    height: auto;
    font-weight: 700;
}

.salon-info-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
    gap: 20px;
}

.salon-info-contact figure {
    transition: 0.5s;
    width: 40px;
    height: 40px;
    transition: 0.5s;
}

.salon-info-contact figure img {
    display: block;
    width: 100%;
    height: 100%;
}

.salon-info-contact figure:hover {
    transform: scale(1.1,1.1);
}

/*==========================
faq_voice-wrapper
==========================*/
.btn-list-faq-voice {
    display: none;
}

.faq_voice-wrapper {
    padding: 70px 20px;
}

.faq_voice-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:2.36vw;
    margin: 0 auto;
}

.section-faq, .section-voice {
    width: 50%;
    height: auto;
    max-width: 540px;
    max-height: 152px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    aspect-ratio: 135 / 38;
    border-radius: 10px;
}

.section-faq-inner,.section-voice-inner {
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 14px 40px;
    width: 100%;
    height: 100%;
}

.section-faq {
    background-image: url(../images/faq-bg-img.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.5s;
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.5s ease; /* 下からふわっとさせる設定 */
}

.section-voice {
    background-image: url(../images/voice-bg-img.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.5s;
    opacity: 0;
    transform: translateY(40px); /* 下からふわっとさせる設定 */
    transition: 1.5s ease; /* 下からふわっとさせる設定 */
}

/* 表示時のスタイルはクラスで制御（インラインより優先度を低く保つ） */
.section-faq.is-visible,
.section-voice.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.section-faq:hover {
    opacity: 0.6;
}

.section-voice:hover {
    opacity: 0.6;
}

.topic-faq-voice {
    max-width: 148px;
    height: auto;
}

.topic_eng-faq-voice {
    display: block;
    color: #000000;
    font-size: 3.2rem; /* フォールバック */
    font-size: clamp(2.4rem,2.22vw,3.2rem);
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.topic_ja-faq-voice {
    display: block;
    padding: 10px 14px;
    color: #000000;
    font-family: "Noto Serif JP";
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    margin-top: 10px;
}

.topic_eng-faq-voice-voice, .topic_ja-faq-voice-voice{
    color: #FFFFFF;
}

.topic_ja-faq-voice-voice {
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}

/*==========================
Slide-show
==========================*/
.section-slide-show {
    padding: 70px 0;
    background-color: var(--primary-beige);
}

.slide-show-wrapper {
    display: flex;
    align-items: start;
    justify-content: start;
}

.slide-show-wrapper li {
    max-width: 900px;
    width: 36vw;
    height: auto;
    aspect-ratio: 3/2;
}

.slide-show-wrapper li img {
    width: 100%;
    height: 100%;
}

/* 画面中央の画像拡大を防止 */
.slick-center img,
.slick-current img {
    transform: none !important;
    scale: 1 !important;
    transition: none !important;
}

/* Article header sp*/
@media screen and (max-width:769px) {
    .mv-sns,.mv-fixed {
        display: none;
    }

    .mv-fixed-wrapper-sp {
        display: block;
    }

    .mv-slide-show {
        width: 91.47%;
        height: 727px;
        overflow: hidden; /* はみ出し部分を隠す スライドショーで表示されないように*/
    }
    
    .mv-slide-show .slick-slide {
        height: 727px;
    }
    
    .mv-slide-show .slick-track {
        height: 727px;
    }

    .article-header {
        position: relative;
        height: 835px;
    }

    .article-header::after {
        content: "";
        display: block;
        background-image: url(../images/mv-sp-bg.webp);
        background-position: left;
        background-size: cover;
        background-repeat: no-repeat;
        position: absolute;
        width: 66.67%;
        height: 700px;
        bottom: 28px;
        right: 0;
        z-index: -10;
    }

    #snow_particles-sp {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        inset: 0;
        pointer-events: none;
        background-color: transparent; /* 背景色は不要 */
        opacity: 0.6;
        z-index: 1; /* 必要に応じてテキストの下に */
    }

    .mv-slide-show picture,
    .mv-slide-show picture img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center; /* 中央固定 */
    }

    .article-header {
        position: relative;
    }

    .mv-fixed-wrapper-sp {
        position: absolute;
        top: 198px;
        left:50%;
        transform: translateX(-50%);
    }

    .mv-fixed-wrapper {
        width: 70.13vw;
        max-width: 263px;
        height: 291px;
        padding: 5px;
    }

    .mv-logo-sp {
        width: 88px;
        height: 153px;
    }

    .mv-topic-sp {
        font-size: 1.2rem;
    }

    .mv-tagline {
        font-size: 1.7rem;
        bottom: 128px;
        left: 24px;
    }

    .mv-tagline span {
        font-size: 1.2rem;
    }

}/* sp 769px */

@media screen and (max-width:374px) {
    .sp320br {
        display: block;
    }
}/* sp 374px */

/* Greeting sp */
@media screen and (max-width:1282px) {
    .salon-owner-font {
        left: -61px;
    }
}/* sp 1282px */

@media screen and (max-width:769px) {
    .section-greeting {
        padding: 80px 12px 40px;
    }

    .section-greeting-inner {
        padding: 80px 12px;
    }

    .greeting-introduction-first {
        flex-direction: column;
        align-items: center;
        gap: 120px;
        margin: 60px auto 0;
    }

    .owner-img-wrapper {
        gap: 24px;
        width: 100%;
    }

    .salon-owner-font {
        width: 197px;
        height: auto;
        top: -2.3vw;
        left: -39px;
    }

    .owner-greeting-wrapper {
        width: 100%;
    }

    .owner-greeting-wrapper::after {
        background-image: url(../images/white-flower01.png);
        width: 62px;
        height: 66px;
        bottom: -67px;
        right: -8px;
    }

    .greeting-introduction-second {
        flex-direction: column-reverse;
        align-items: center;
    }

    .license-wrapper {
        width: 100%;
    }


    .license-wrapper::after, .license-wrapper::before {
        display: none;
    }

    .owner-greeting-wrapper::before {
        content: "";
        display: block;
        background-image: url(../images/white-flower04.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        width: 36.8vw;
        height: 20.53vw;
        max-width: 138px;
        max-height: 77px;
        position: absolute;
        top: -99px;
        left: 13px;
    }

    .training-img-wrapper {
        width: 100%;
    }

    .btn-list-greeting {
        margin: 50px auto 0;
    }
    
}/* sp 769px */

/* concept sp */
@media screen and (max-width:1282px) {
    .pan_rea-font {
        width: 15.33vw;
        height: auto;
        right: -187px;
    }
}/* sp 1282px */

@media screen and (max-width:1023px) {
    .pan_rea-font {
        width: 15.33vw;
        height: auto;
        right: -16vw;
    }
}/* sp 1023px */

@media screen and (max-width:769px) {
    .section-concept{
        padding: 80px 24px;
    }

    .pan_rea-font {
        width: 166px;
        right: -22.1vw;
        bottom: 6px;
    }

    .concept-introduction-first {
        flex-direction: column-reverse;
        gap: 40px;
        margin: 60px auto 0;
    }

    .concept-first-img {
        width: 69.6%;
        margin: 0 auto;
    }

    .pan-rea-introduction-wrapper {
        width: 100%;
    }

    .pan-rea-introduction-wrapper h3 {
        text-align: center;
        font-size: 1.6rem;
    }

    .pan-rea-introduction-text {
        margin: 40px auto 0;
        width: fit-content;
    }

    .concept-introduction-second {
        padding: 40px 20px;
        margin: 80px auto 0;
    }

    .concept-introduction-second h3 {
        font-size: 1.6rem;
        line-height: 1.8;
    }

    .thai-traditional-massage-introduction-wrapper {
        flex-direction: column;
        gap: 50px;
    }

    .thai-traditional-massage-introduction-text {
        width: 100%;
    }

    .thai-traditional-massage-introduction-img {
        width: 100%;
    }

    .concept-introduction-third {
        flex-direction: column;
        gap: 80px;
        margin: 80px auto 0;
    }

    .concept-third-img {
        width: 100vw;
    }

    .appeal-point-wrapper {
        width: fit-content;
    }

    .appeal-point-wrapper h3 {
        font-size: 2rem;
        line-height: 1.8;
    }

    .appeal-point-wrapper h3::before {
        width: 23.2vw;
        height: 19.47vw;
        max-width: 97px;
        height: 81px;
        left: -16px;
        top: -25px;
    }

    .appeal-point-wrapper h3 span {
        font-size: 2.6rem;
    }

    .appeal-point-list {
        margin-top: 50px;
    }

    .appeal-point-list li {
        gap: 4px;
        padding: 5px;
        max-width: 416px;
    }

    .check-o {
        width: 32px;
        height: 32px;
    }

    .appeal-point-list li p {
        font-size: 1.3rem;
    }

    .btn-list-concept {
        margin: 80px auto 0;
    }

}/* sp 769px */

@media screen and (max-width:576px) {
    .pan_rea-font {
        width: 130px;
        height: auto;
        left: -15.1vw;
        bottom: 86px;
        transform: rotate(-23deg);
    }

}/* sp 576px */

/* Lesson sp */
@media screen and (max-width:769px) {
    .btn-list-lesson-sp {
        display: flex;
        gap: 20px;
        margin: 60px auto 0;
    }

    .section-lesson {
        padding: 80px 12px;
    }

    .section-lesson-inner {
        padding: 80px 0;
    }

    .lesson-introduction-first {
        margin: 60px auto 0;
    }

    .lesson-point-list {
        padding: 0 12px;
    }

    .lesson-point-list-item {
        flex-direction: column;
    }

    .lesson-point-list-item:nth-child(n+2) {
        margin-top: 60px;
    }

    .lesson-point-list-item-reverse {
        flex-direction: column-reverse;
    }

    .lesson-point-img {
        width: 100%;
    }

    .lesson-point-details {
        width: 100%;
        padding: 0;
        aspect-ratio: auto;
    }

    .lesson-point-details h3 {
        justify-content: center;
        gap: 15px;
        font-size: 1.6rem;
        line-height: 1.8;
        padding: 20px 10px 0;
    }

    .point-deco {
        width: 100px;
        font-size: 1.6rem;
    }

    .point-title {
        font-weight: 500;
        width: fit-content;
    }

    .lesson-point-details-text {
        margin-top: 32px;
        font-family: "Noto Sans JP";
        padding: 0 20px 40px;
    }

    .btn-list-lesson-first, .btn-list-lesson-second,.btn-list-lesson-third {
        display: none;
    }

}/* sp 769px */

/* Course Menu sp */
@media screen and (max-width:1023px) {
    .plan-price-time-wrapper {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .price span {
        font-size: 2.2rem;
    }
}/* sp 1023px */

@media screen and (max-width:769px) {
    .lesson-introduction-second {
        margin: 80px auto 0;
    }

    .course-topic_en {
        font-size: 3.6rem;
    }

    .course-topic_ja {
        font-size: 1.4rem;
    }

    .lesson-introduction-second h2::before {
        left: -65px;
        width: 50px;
    }

    .lesson-introduction-second h2::after {
        right: -65px;
        width: 50px;
    }

    .course-text {
        font-size: 1.2rem;
        padding: 0 12px;
    }

    .menu-plan {
        padding: 0 12px;
    }

    .plan-item {
        flex-direction: column;
        height: auto;
    }

    .plan-item h3 {
        width: 100%;
        padding: 30px 15px;
        font-size: 1.8rem;
    }

    .plan-price-time-wrapper {
        flex-direction: row;
        justify-content: center;
        align-items: end;
        width: 100%;
        padding: 30px 15px;
        gap: 20px;
    }

    .price, .time {
        font-size: 1rem;
    }

    .price span {
        font-size: 2.4rem;
    }

    .plan-text-wrapper {
        width: 75%;
        padding: 15px 15px 20px;
    }

    .desc {
        width: 100%;
    }

    .note {
        width: 100%;
        justify-content: start;
    }

    .course-postscript {
        font-size: 1.4rem;
        padding: 0 12px;
    }

    .announce-text {
        font-size: 1.4rem;
        text-align: center;
    }

    .announce-text::before {
        height: 42px;
        width: 12px;
        background-image: url(../images/line-left-sp.svg);
        top: -7px;
        left: -30px;
        transform: translateY(40%);
    }

    .announce-text::after {
        height: 42px;
        width: 12px;
        background-image: url(../images/line-right-sp.svg);
        top: 24px;
        right: -25px;
        transform: translateY(-40%);
    }
    
}/* sp 769px */

@media screen and (max-width:425px) {
    .plan-text-wrapper {
        width: 100%;
    }
}/* sp 425px */

/* salon info. sp */
@media screen and (max-width:1023px) {
    .section-salon-info {
        padding: 80px 24px;
    }

    .section-salon-info::before {
        width: 426px;
        height: 426px;
        right: -60px;
        top: -120.2px;
    }

    .section-salon-info::after {
        width: 280px;
        height: 280px;
        bottom: 0;
        left: -35px;
    }

    .salon-info-introduction {
        display: flex;
        align-items: start;
        justify-content: space-between;
        max-width: 1114px;
        height: auto;
        margin: 70px auto 0;
    }

    .salon-info-introduction {
        flex-direction: column;
        margin: 60px auto 0;
    }

    .salon-info-img {
        width: 60%;
        margin: 0 auto;
    }

    .salon-info-description {
        width: 75.5%;
        margin: 40px auto 0;
    }

    .salon-info-description dl {
        width: 79.5%;
        align-items: start;
        gap: 15px;
        margin: 0 auto; 
    }

    .salon-info-description dt {
        width: 25%;
    }

    .salon-info-description dd {
        width: 75%;
    }

    .salon-info-contact {
        flex-wrap: wrap-reverse;
        justify-content: start;
        gap: 20px;
    }

    .salon-info-contact figure {
        width: 30px;
        height: 30px;
    }

}/* sp 1023px */

@media screen and (max-width:769px) {
    .section-salon-info::before {
        width: 43vw;
        height: 43vw;
        right: -6.63vw;
        top: -10.66vw;
    }

    .section-salon-info::after {
        width: 36.5vw;
        height: 36.5vw;
        bottom: 0;
        left: -4.55vw;
    }

    .salon-info-img {
        width: 100%;
    }

    .salon-info-description {
        width: 100%;
    }
    
    .salon-info-description dl {
        width: 100%;
    }

    .salon-info-description dt {
        width: 30.28%;
    }

    .salon-info-description dd {
        width: 69.72%;
    }

}/* sp 769px */

/* faq_voice-wrapper sp */
@media screen and (max-width:769px) {
    .btn-list-faq-voice {
        display: flex;
    }

    .faq_voice-wrapper {
        padding: 80px 0;
    }
    
    .faq_voice-inner {
        flex-direction: column;
        gap: 20px;
    }

    .section-faq, .section-voice {
        width: 100%;
        height: 100%;
        max-width: none;
        max-height:none;
        border-radius: 0;
    }

    .topic_eng-faq-voice {
        font-size: 2.6rem; /* フォールバック */
        font-size: clamp(2.2rem,6.93vw,3.6rem);
    }

    .topic_ja-faq-voice {
        font-size: 1.6rem; /* フォールバック */
        font-size: clamp(1.4rem,4.27vw,2rem);
    }

    .btn-list-faq-voice {
        margin: 0 auto;
    }

}/* sp 769px */

/* Slide-show sp */
@media screen and (max-width:769px) {
    .section-slide-show {
        padding: 70px 0;
    }

    .slide-show-wrapper li {
        width: 375px;
    }

}/* sp 769px */