@charset "UTF-8";

* {
    box-sizing: border-box;
}
body {
    color: #333;
    line-height: 1.7em;
    font-family: 'Lora','Lato', sans-serif;
    letter-spacing: 0.1em;
}
h2 {
    font-size: 1.6rem;
    letter-spacing: 0.2em;
}
ul {
    list-style: none inside;
}
a {
    color: #333;
    text-decoration: none;
    letter-spacing: 0.1em;
}
input[type="submit"], button[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
}

.wrapper {
    width: 1200px;
    margin: 0 auto;
}
.sp-br {
    display: none;
}
.min-br {
    display: none;
}

#about, #menu, #access, #faq, #contact, #flow, #voice, #news, #topic{
    background: #FCFCF8;
}

.feature, .menu, .info, .contact {
    background: #FCFCF8;    
}

/* --------------- HEADER --------------- */
.header {
    width: 100%;
    position: fixed;
    display: block;
    background: linear-gradient(180deg, rgba(252, 252, 248, 0.8) 20%, rgba(252, 252, 248, 0.4) 70%, transparent);
    z-index: 5;
}
.header-wrapper {
    width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
#home .logo-img {
    width: 190px;
    transition: 1.5s;
}
.logo-img {
    width: 150px;
}
.logo-small {
    width: 150px !important;
}

/* --------------- NAV --------------- */
.nav {
    opacity: 1;
}
.nav ul {
    height: 75px;
    padding-right: 320px;;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.nav ul li a {
    margin: 0 5px;
    padding: 10px;
    position: relative;
    display: block;
    color: #100;
    transition:0.2s ease-in-out;
}

/*.nav ul li:hover::after {
    box-shadow:0 0 0 5px #1155cb, 0 0 0 7px #e0ff00;
}
.nav ul li::after {
    content:'';
    position:absolute;
    width:7.5px;
    height:7.5px;
    background:#c2ff00;
    border-radius:100%;
    left:-25px;
    top:50%;
    transform:translate(0,-50%);
    box-shadow:0 0 0 0 #1155cb, 0 0 0 0 #e0ff00;
    transition:0.4s ease-in-out;
} */
.nav ul li a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 45px;
    left: 0;
    bottom: -15px;
    /* transform: scaleX(0);
    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1);
    transform-origin: right;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B stroke:%23110000; stroke-width:2; stroke-linecap:square; %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 40 40 40 Q 60 40 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E")
      0px 50% / 80px 80px repeat-x; */
}
.nav ul li a:hover::before {
    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin:left;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:-0.25s; stroke:%23DCC9B5; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E")
      0px 50% / 80px 80px repeat-x;
    animation: waving 3s linear infinite;
    transform: scaleX(1);
    @keyframes waving {
      to {
        background-position: 80px 50%, 160px 50%;
      }
    }
}


.fadein {
    opacity: 1 !important;
    transition: 1.5s;
}

/* --------------- BUTTON --------------- */
.button-pc {
    position: fixed;
    right: calc(50% - 720px);
    transition: 2s;
    z-index: 10;
}
.button-pc a img {
    width: 263px;
    height: auto;
}
.button-pc a img:hover {
    width: 280px;
    transition: 0.8s;
}
.button-pc::after {
    content: "ご予約はこちら";
    position: absolute;
    top: 10px;
    left: 60px;
    color: #FFF;
    pointer-events: none;
}

.button-sp {
    display: none;
}

/* --------------- ハンバーガーメニュー --------------- */
.openbtn {
    width: 150px;
    height: 150px;
    position: fixed;
    top: -50px;
    right: -35px;
    background: #6E8894;
    border-radius: 75px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
}
.openbtn span {
    width: 30%;
    height: 4px;
    margin-top: 60px;
    position: absolute;
    left: 35px;
    display: block;
    background: #fff;
    border-radius: 2px;
    transition: all .4s;
}
.openbtn span:nth-of-type(1) {
    top: 12px;
}
.openbtn span:nth-of-type(2) {
    top: 26px;
}
.openbtn span:nth-of-type(3) {
    top: 40px;
}
.openbtn.active span:nth-of-type(1) {
    width: 20%;
    top: 18px;
    left: 39px;
    transform: translateY(6px) rotate(-45deg);
}
.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}
.openbtn.active span:nth-of-type(3){
    width: 20%;
    top: 30px;
    left: 39px;
    transform: translateY(-6px) rotate(45deg);
}

.opennav {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.opennav-list {
    opacity: 1 !important;
}

.resp {
    display: none;
    pointer-events: none;
}
.resp-nav {
    opacity: 0;
}

/* --------------- TOP --------------- */
.top {
    padding: 0 0 150px;
    position: relative;
}
.top-contents {
    width: 100%;
    height: 900px;
    background: url("../images/top_bg.jpg") no-repeat;
    background-position: center;
    background-size: cover;
}
.top-wrapper {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
.top-title {
    text-shadow: 1px 1px 3px #FFF;
}
.top-text {
    display: block;
    margin-top: 30px;
    text-align: right;
    font-size: 1.2rem;
    text-shadow: 1px 1px 3px #FFF;
}

/* --------------- WAVES --------------- */
.wave {
    width: auto;
    margin-top: -250px;
    display: block;
    position:relative;
    z-index: 1;
}
.waves-wrap {
    position: absolute;
    top: 0;
    width: 100%;
    height: 6rem;
    overflow: hidden;
}
.waves {
    width: 100%;
    height: 60px;
    background: url(../images/waves.png) repeat-x;
    background-size: contain;
    animation: waves_move 5s linear infinite;
    transform-origin: 0% 0%;
}

@keyframes waves_move {
    0% {
        background-position: 0 0;
        transform: translate(0,10px);
    }

    50% {
        background-position: 398px 0;
        transform: translate(0,0);
    }

    100% {
        background-position: 796px 0;
        transform: translate(0,10px);
    }
}

.wave2 {
    width: auto;
    display: block;
    position:relative;
    z-index: 1;
}
.waves-wrap2 {
    position: absolute;
    top: 0;
    width: 100%;
    background: #FCFCF8;
    overflow: hidden;
}
.waves2 {
    width: 100%;
    height: 60px;
    background: url(../images/waves2.png) repeat-x;
    background-size: contain;
    animation: waves_move 5s linear infinite;
    transform-origin: 0% 0%;
}

/* --------------- INTRO --------------- */
.intro {
    width: auto;
    height: 780px;
    margin-top: 60px;
    padding-top: 200px;
    display: block;
    position:relative;
    background: url(../images/intro_bg.png);
    background-size: cover;
}
.intro-contents {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.intro-item {
    width: 450px;
    height: 300px;
    padding: 30px;
    background:rgb(255, 255, 255, 0.2);
    border-radius: 30px;
}
.intro-item h2 {
    margin-bottom: 30px;
}
.intro-item p {
    margin-top: 15px;
}
.intro-contents img {
    width: 650px;
    height: 400px;
    object-fit: cover;
    border-radius: 130px 50px 110px 70px;
}

/* --------------- FEATURE --------------- */
.feature {
    padding: 100px 0 60px 0;
    text-align: center;
}
.feature h2 {
    margin-bottom: 90px;
    font-weight: normal;
}
.feature-title {
    font-size: 1.6rem;
    letter-spacing: 0.2em;
}
.feature-contents {
    position: relative;

}
.feature-items {
    width: 100%;
    display: grid;
    justify-content: center;
    gap: 3%;
    grid-template-columns: 1fr 1fr 1fr;
}
.feature-item {
    width: 350px;
    margin: 0 auto;
    position: relative;
}
.feature-img {
    width: 350px;
    height: 350px;
    border-radius: 40px;
    box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.2);
}
.feature-text {
    width: 350px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 10px;
    color: #FFF;
    z-index: 1;
}
.feature-item:last-child {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.feature-illust {
    width: 200px;
    height: auto;
}

/* --------------- MENU --------------- */
.menu {
    padding-top: 100px;
    padding-bottom: 60px;
    text-align: center;
}
.menu-title {
    position: relative;
}
.menu-title h2 {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translate(-50%, 0);
}

.menu-tabtext {
    font-size: 1.3rem;
}
.menu-tabtext span {
    margin-left: 10px;
    font-size: 1rem;
}
.menu-tab {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.menu-tab > label {
    flex: 1 1;
    order: -1;
    opacity: 0.5;
    min-width: 70px;
    height: 50px;
    padding: 12px;
    margin-bottom: -2px;
    border-radius: 20px 20px 0 0;
    background-color: #6E8894;
    color: #FFF;
    font-size: 0.9em;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
}
.menu-tab > label:hover {
    opacity: 0.8;
}
.menu-tab input {
    display: none;
}
.menu-content {
    display: none;
    width: 100%;
    height: 620px;
    padding: 1.5em 1em;
    position: relative;
    background-color: #6E8894;
    border-radius: 0 0 20px 20px;
}
.menu-tab label:has(:checked) {
    opacity: 1;
}
.menu-tab label:has(:checked) + div {
    display: block;
}
.menu-item {
    width: 1160px;
    height: 580px;
    padding: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #FFF;
    border-radius: 20px;
}
.menu-text .menu-text2 {
    width: 400px;
}
.menu-text {
    width: 400px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
    text-align: left;
}
.menu-top {
    font-size: 1.625rem;
}
.menu-top span {
    margin-top: 12px;
    display: block;
    font-size: 1.625rem;
}
.menu-woman, .menu-mens {
    margin: 0 0 20px 40px;
    position: relative;
}
.menu-woman p, .menu-mens p {
    position: absolute;
    top: 0;
    left: 55px;
}
.menu-curl {
    margin-bottom: 30px;
}
.menu-list li::before, .menu-healtitle::before {
    width: 20px;
    height: 20px;
    margin-right: 20px;
    content: "";
    display: inline-block;
    background: #D9D9D9;
    border-radius: 10px;
}
.menu-list li {
    height: 80px;
    font-size: 1.5rem;
}
.menu-list li span {
    margin-left: 45px;
    display: block;
    font-size: 1.25rem;
}
.menu-text2 {
    width: 500px;
    height: 100%;
}
.menu-text2 a {
    width: 200px;
    height: 50px;
    margin: 0 auto;
    margin-top: 30px;
    padding: 10px;
    display: block;
    background: #FFF;
    border-radius: 25px;
    box-shadow:  5px 5px 20px #e6e6e0, -6px -6px 20px #ffffff;
}
.menu-heal {
    width: 400px;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}
.menu-healtitle {
    margin-bottom: 12px;
    font-size: 1.625rem;
}
#topmenu_healimg {
    position: relative;
}
#topmenu_healimg li {
    position: absolute;
}
.menu-healtext a {
    position: absolute;
    bottom: 42px;
    right: 240px;
}
.menu-healsp {
    display: none;
}


/* --------------- INFO --------------- */
.info {
    padding-top: 70px;
    padding-bottom: 60px;
    text-align: center; 
}
.info-title {
    margin-bottom: 20px;
    position: relative;
}
.info-title h2 {
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translate(-50%, 0);
}
.info-news {
    width: 100%;
    margin: 0 auto;
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(4, minmax(240px, 250px));
}
.info-news button {
    color: #333;
}
.info-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0 auto;
    text-align: left;
}
.info-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
    box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.05);
}
.info-category {
    margin: 15px 0 10px;
    padding: 0 10px;
    background: #DCC9B5;
    border-radius: 5px;
    color: #FFF;
}
.info-item time {
    margin-bottom: 0;
}
.info-title {
    width: 100%;
}
.info-more {
    margin-top: 30px;
    text-align: right;
}
.info-moretext {
    color: #6E8894;
}

/* --------------- CONTACT --------------- */
.contact {
    padding-top: 70px;
    padding-bottom: 80px;
    text-align: center;
}
.contact-title {
    position: relative;
}
.contact-title h2 {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translate(-50%, 0);
}
.contact-contents {
    width: 100%;
    height: 635px;
    padding: 120px 100px;
    background: url(../images/contact_bg.png) no-repeat;
    background-size: contain;
    background-position: center;
}
.contact-text {
    font-size: 1.1rem;
}
.contact-link {
    width: 70%;
    margin: 50px auto 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}
.contact-line {
    width: 50%;
}
.line-title img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.contact-qr {
    width: 40%;
}
.contact-qr img {
    width: 100%;
}
.line-link {
    width: 200px;
    height: auto;
}


/* --------------- FOOTER --------------- */
.footer {
    margin-top: 60px;
    padding: 60px;
    background: url(../images/footer_bg.png) no-repeat;
    background-size: cover;
}
.footer-contents {
    position: relative;
    z-index: 4;
}
.shop {
    width: 100%;
    padding-bottom: 25px;
    border-bottom: 1px solid #DCC9B5;
}
.shop h2 {
    margin-bottom: 10px;
}
.shop-span {
    padding-left: 10px;
    font-size: 0.8rem;
}

.sitemap {
    padding-top: 25px;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}
.sitemap ul {
    display: flex;
    gap: 20px;
}
.sitemap ul li {
    margin: 5px 0;
}
.sitemap ul li a {
    display: block;
    padding: 5px 2px;
    position: relative;
    transition:0.2s ease-in-out;
}
.copyright {
    padding-top: 6px;
    color: #998067;
}

.sitemap ul li a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 45px;
    left: 0;
    bottom: -15px;
    /* transform: scaleX(0);
    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1);
    transform-origin: right;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B stroke:%23110000; stroke-width:2; stroke-linecap:square; %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 40 40 40 Q 60 40 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E")
      0px 50% / 80px 80px repeat-x; */
}
.sitemap ul li a:hover::before {
    transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin:left;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200%25' height='100%25'%3E%3Cdefs%3E%3Cstyle%3E .wave%7B animation:wave 1s ease-in-out infinite alternate; animation-delay:-0.25s; stroke:%23FCFCF8; stroke-width:2; stroke-linecap:square; %7D @keyframes wave%7B to%7B d:path('M 0 40 Q 20 42.5 40 40 Q 60 37.5 80 40'); %7D %7D %3C/style%3E%3C/defs%3E%3Cpattern id='wavePattern' x='0' y='0' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Cpath fill='none' class='wave' d='M 0 40 Q 20 37.5 40 40 Q 60 42.5 80 40' /%3E%3C/pattern%3E%3Crect x='0' y='0' width='100%25' height='100%25' fill='url(%23wavePattern)'%3E%3C/rect%3E%3C/svg%3E")
      0px 50% / 80px 80px repeat-x;
    animation: waving 3s linear infinite;
    transform: scaleX(1);
    @keyframes waving {
      to {
        background-position: 80px 50%, 160px 50%;
      }
    }
}

/* --------------- サブページ共通 --------------- */
.pagetop {
    width: 1200px;
    margin: 0 auto;
    padding: 75px 0 60px;
    position: relative;;
}
.pagetop-bg {
    width: 1200px;
    height: 250px;
    position: relative;
    z-index: -1;
}
.pagetop-bg-pc {
    width: 1200px;
    height: 250px;
}
.pagetop-bg-sp {
    display: none;
}
.pagetop h2 {
    width: 1200px;
    margin: 0 auto;
    position: absolute;
    top:50%;
    text-align: center;
    z-index: 2;
}
.pagetop-titlebg {
    width: 1200px;
    text-align: center;
    position: absolute;
    top: 38%;
}
.pagetop-titlebg img {
    width: 400px;
    height: auto;
}
.pagemap {
    width: 1200px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    position: absolute;
    bottom: 70px;
    left: 45px;
}
.pagemap p {
    font-size: 0.8rem;
    color: #FFF;
}


#about h3, #menu h3, #faq h3, #flow h3, #contact h3 ,#access h3{
    font-size: 1.6rem;
    padding-bottom: 60px;
    text-align: center;
}

/* --------------- おあしすについて --------------- */
/* ---------- コンセプト ---------- */
.concept {
    padding-bottom: 75px;
    text-align: center;
}
.concept-contents {
    width: 100%;
    display: flex;
    justify-content: center;
}
.concept-first {
    width: 35%;
    display: flex;
    justify-content: center;
}
.concept-tx1, .concept-tx2 {
    width: 40px;
    writing-mode: vertical-rl;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 40px;
}
.concept-tx1 {
    margin-top: -140px;
    order: 2;
}
.concept-tx2 {
    padding-top: 60px;
    order: 1;
}
.concept-text {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    line-height: 1.7rem;
}
.concept-text p {
    margin-bottom: 30px;
}

/* ---------- スタッフ ---------- */
.staff {
    padding: 75px 0;
    text-align: center;
}
.staff-contents {
    width: 100%;
    display: flex;
    justify-content: center;
}
.staff-text {
    width: 45%;
    padding-right: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    line-height: 1.7rem;
}
.staff-text p {
    margin-bottom: 30px;
}
.staff-img {
    width: 45%;
    text-align: left;
}

/* ---------- サロン概要 ---------- */
.desc {
    padding: 75px 0;
    text-align: center;
}
.desc-wrapper {
    width: 1000px;
    margin: 0 auto;
}
.desc-dl {
    width: 100%;
    margin-bottom: 100px;
    display: flex;
    flex-wrap: wrap;
}
.desc-dl dt, .desc-dl dd {
    padding: 30px 0;
    border-bottom: 1px solid #DADADA;
}
.desc-dl dt:nth-last-child(2), .desc-dl dd:last-child {
    border-bottom: none;
}
.desc-dl dt {
    width: 30%;
}
.desc-dl dd {
    width: 70%;
    text-align: left;
}

/* --------------- メニュー --------------- */
/* ---------- メニュートップ ---------- */
.service-top, .goods {
    text-align: center;
}
.service-link {
    margin: 50px 0 100px;
    display: flex;
    justify-content: center;
    gap: 100px;
}
.service-link a {
    width: 200px;
    height: 50px;
    padding: 10px;
    display: block;
    background: #FCFCF8;
    border-radius: 25px;
    box-shadow:  5px 5px 20px #e6e6e0, -10px -10px 20px #ffffff;
}
.service-wrapper {
    width: 1200px;
    margin: 0 auto; 
    padding: 80px 50px;
    background: #FFF;
    border: 1px solid #E4E4E1;
    border-radius: 20px;
}

/* ---------- メニュー共通部分 ---------- */
.service-ladies, .service-mens, .service-curl, .service-heal {
    margin-bottom: 80px;
}
.service-ladies h3, .service-mens h3, .service-curl h3, .service-heal h3, .goods h3 {
    width: 300px;
    margin: 0 auto;
    padding: 10px 0 20px !important;
}
.service-ladies h4, .service-mens h4 {
    width: 100%;
    padding: 10px 0 10px;
    font-size: 1.5rem;
}
.service-ladies h4 span, .service-mens h4 span {
    margin-left: 10px;
    font-size: 1rem;
}
.ladies-text, .mens-text {
    width: 80%;
    margin: 0 auto;
    text-align: left;
}
.ladies-contents, .mens-contents {
    margin-top: 40px;
}
.ladies-contents, .mens-contents, .curl-contents {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.ladies-menu, .mens-menu {
    width: 30%;
}
.ladies-img, .mens-img {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 50px;
}
.ladies-img-pc, .mens-img-pc {
    width: 100%;
}
.ladies-img-sp, .mens-img-sp {
    display: none;
}
.curl-menu, .curl-img {
    width: 50%;
}
.ladies-menu p, .mens-menu p {
    text-align: left;
}

.menu-dl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.menu-dl dt, .menu-dl dd {
    padding: 10px 0;
    border-bottom: 1px solid #DADADA;
}
.menu-dl dt {
    width: 30%;
    text-align: left;   
}
.menu-dl dd {
    width: 35%;
    text-align: right;
}
.menu-dl dt:first-child, .menu-dl dd:nth-child(2), .menu-dl dd:nth-child(3), .menu-dl dt:nth-last-child(3), .menu-dl dd:nth-last-child(2), .menu-dl dd:nth-last-child(1) {
    border-bottom: none;
}

/* ---------- 脱毛レディース ---------- */
.service-ladies h3 {
    margin-bottom: 40px;
    border-bottom: 1px solid #F2AB63;
}
.service-ladies h4 {
    border-top: 1px solid #F2AB63;
    border-bottom: 1px solid #F2AB63;
    color: #F2AB63;
}

/* ---------- 脱毛メンズ ---------- */
.service-mens h3 {
    margin-bottom: 40px;
    border-bottom: 1px solid #669531;
}
.service-mens h4 {
    border-top: 1px solid #669531;
    border-bottom: 1px solid #669531;
    color: #669531;
}

/* ---------- 子メニュー共通 ---------- */
.curl-contents {
    margin-top: 60px;
}
.curl-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.list-dl {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.list-dl dt {
    width: 70%;
    text-align: left;   
}
.list-dl dd {
    width: 30%;
    text-align: right;
}

/* ---------- まつげカール ---------- */
.service-curl h3 {
    border-bottom: 1px solid #000;
}
.curl-menu p {
    text-align: left;
}
.curl-img img {
    width: 100%;
    border-radius: 40px;
}

/* ---------- 癒やし ---------- */
.service-heal h3 {
    border-bottom: 1px solid #000;
}
.heal-contents {
    margin-top: 60px;
}
.heal-menu {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.heal-item {
    display: flex;
    justify-content: center;
    gap: 20px;
}
.heal-item img {
    width: 100%;
    border-radius: 40px;
}
.heal-left {
    order: 1;
}
.heal-right {
    order: 2;
}
.heal-item h4 {
    padding: 10px 0 10px;
    font-size: 1.5rem;
    text-align: left;
}
.heal-item p {
    text-align: left;
}
.heal-right, .heal-left {
    width: 50%;
}
.heal-dl {
    width: 100%;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
}
.heal-dl dt {
    width: 70%;
    text-align: left;   
}
.heal-dl dd {
    width: 30%;
    text-align: right;
}

/* ---------- 取扱商品 ---------- */
.goods {
    padding: 80px 0 80px;
    background: #F9F4ED;
}
.goods h3 {
    margin-bottom: 60px;
    border-bottom: 1px solid #000;
}
.goods-contents {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 277px));
    justify-content: center;
    gap: 30px;

}
.goods-item {
    width: 100%;
    padding: 0 20px;
}
.goods-text {
    margin-top: 10px;
    font-size: 0.8rem;
    text-align: left;
}

/* ---------- メニューフッター(色違い) ---------- */
#menu .waves-wrap2 {
    background: #F9F4ED !important;
}

/* --------------- よくある質問 --------------- */
#faq h3 {
    margin: 50px 0 40px;
    padding: 0 20px 10px 20px;
    display: inline-block;
    text-align: center;
    border-bottom: 2px solid #DADADA;
}
#faq h3:first-child {
    margin-top: 0;
}
.faq {
    margin-bottom: 175px;
    text-align: center;
}
.accordion-001 {
    width: 100%;
    margin: 0 auto;
    background-color: #FFF;
    border: 5px solid #6E8894;
    border-radius: 33px;
    text-align: left;
    color: #FFF;
}
.accordion-001 {
    margin-bottom: 30px;
}
.accordion-001 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    border-radius: 25px;
    background-color: #6E8894;
    cursor: pointer;
}
.accordion-001[open] summary {
    border-radius: 25px 25px 0 0;
}
.accordion-001 summary::-webkit-details-marker {
    display: none;
}
.accordion-001 summary::before,
.accordion-001 summary::after {
    width: 3px;
    height: .9em;
    border-radius: 5px;
    background-color: #fff;
    content: '';
}
.accordion-001 summary::before {
    position: absolute;
    right: 2em;
    rotate: 90deg;
}
.accordion-001 summary::after {
    transition: rotate .3s;
}
.accordion-001[open] summary::after {
    rotate: 90deg;
}
.accordion-001 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 25px;
    color: #333;
    text-align: left;
    transition: transform .5s, opacity .5s;
}
.accordion-001[open] p {
    transform: none;
    opacity: 1;
}

/* --------------- 予約 --------------- */
.line-contents {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
.line-images {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: auto;
}
.line-img1 {
    margin: 10px;
    order: 1;
}
.line-img1 img {
    width: 70%;
    height: auto;
}
.line-img2 {
    order: 2;
}
.line-img2 img {
    width: 70%;
    height: auto;
}
.line-qr {
    align-items: center;
}
.line-qr img {
    width: 50%;
    height: auto;
    border: 1px solid #DADADA;
}

#contact .contact-contents {
    width: 80%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    background: none;
}
#contact .contact-qr img {
    border: 1px solid #DADADA;
    border-radius: 5px;
}
.add-flows {
    width: 100%;
    margin-top: 130px;
    margin-bottom: 100px;
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 220px));
    justify-content: center;
    gap: 5%;
}
.add-flow {
    background: #fff;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    box-shadow: 4px 4px 8px -4px #a4bac4;
}
.add-flow-num {
    width: 16%;
    margin-top: -17px;
}
.add-flow-icon {
    margin: 0 auto;
    margin-top: 30px;
    width: 50%;
}
.add-flow p {
    font-weight: bold;
    line-height: normal;
    margin: 30px;
}
.add-flow p span {
    font-size: 0.8rem;
    font-weight: normal;
}
.contact-lists {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.contact-lists p {
    margin-left: -2em;;
    font-weight: bold;
}
.contact-list {
    margin: 20px 50px 0 50px;
    text-align: left;
}

/* --------------- 施術の流れ --------------- */
.flow h3 {
    border-bottom: 1px solid #6E8894;
    width: 300px;
    margin: 0 auto 50px;
    padding: 10px 0 20px !important;
}
.flow-items {
    width: 100%;
    margin: 0 auto 50px;
    display: flex;
    flex-direction: column;
}
.flow-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.pc-circle, .sp-circle {
    background-color: #6E8894;
    border-radius: 25px;
}
.pc-circle {
    width: 50px;
    height: 50px;
}
.sp-circle {
    display: none;
}
.pc-circle_1, .sp-circle_1 {
    opacity: 0.4;
}
.pc-circle_2, .sp-circle_2 {
    opacity: 0.6;
}
.pc-circle_3, .sp-circle_3 {
    opacity: 0.8;
}
.pc-circle p, .sp-circle p {
    color: #fff;
    text-align: center;
    line-height: 2em;
}
.pc-circle p {
    font-size: 24px;
}
.sp-circle p{
    font-size: 12px;
}
.flow-dot {
    border-right: 0.5px dotted #bebebe;
    width: 0.5px;
    height: 80px;
    margin: 30px auto;
}
.flow-spimg{
    display: none;
    width: 60%;
    height: auto;
    margin: 0 auto;
}
.flow-pcimg{
    width: 25%;
    height: auto;
    margin: 30px 0;
    border-radius: 20px;
}
.flow-text {
    width: 60%;
}
.flow-title p {
    font-size: 20px;
    line-height: 2.5em;
    color: #6E8894;
}
.voice_banner {
    text-align: center;
    margin: 50px auto;
}

/* --------------- お客様の声 --------------- */
.voice-item{
    width:100%;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}
.voice-img{
    width: 30%;
    display:flex;
    justify-content: center;
    flex-direction: column;
}
.voice-img img{
    width: 70%;
    height:auto;
    margin: 0 auto;
}
.voice-img p{
    text-align:center;
}
.voice-memu{
    color:#6E8894;
    line-height:3em;
}
.voice-comment{
    width: 70%;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.fukidasi {
    width: 100%;
    position: relative;
    display: inline-block;
    margin: 1.5em 0;
    min-width: 120px;
    background: #fff;
    border-radius:20px;
    padding:10px 30px 10px;
    box-shadow: 4px 4px 8px -4px #a4bac4;
}
.fukidasi_sankaku{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 20px 0;
    border-color: transparent #ffffff transparent transparent;
    filter: drop-shadow(2px 2px 2px #a4bac4);
}
.fukidasi p {
    margin: 0;
    padding: 0;
}
.voice-end{
margin-bottom:100px;
}

/* --------------- アクセス --------------- */
.access {
    padding-bottom: 100px;
    text-align: center;
}
#access .desc-dl dt:nth-last-child(2), #access .desc-dl dd:last-child {
    border-bottom: 1px solid #DADADA;
}

/* --------------- お知らせ --------------- */
/* ---------- お知らせ一覧 ---------- */
.news {
    padding-bottom: 90px;
}
.news-list {
    width: 100%;
    margin: 0 auto;
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(3, minmax(230px, 350px));
}
.news-list button {
    color: #333;
    margin-bottom: 60px;
}
.news-page {
    width: 90%;
    margin: 0 auto;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(40px, 80px));
    text-align: center;
}
.news-pagenow {
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
    border-bottom: 1px solid #333;
}
.news-page input[type="submit"] {
    width: 2rem;
    height: 2rem;
    margin: 0 auto;
}

/* ---------- トピック（個別ページ） ---------- */
.topic {
    padding-bottom: 90px;
}
.topic-contents {
    width: 90%;
    max-width: 780px;
    margin: 0 auto;
    text-align: left;
}
.topic-contents h3 {
    font-size: 1.6rem;
    text-align: left;
}
.topic-date {
    margin-top: 10px;
    font-size: 12px;
    text-align: left;
}
.topic-contents img {
    margin: 30px 0;
    border-radius: 20px;
    box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.05);
}
.topic-category {
    margin-top: 10px;
    padding: 0 10px;
    display: inline-block;
    background: #DCC9B5;
    border-radius: 5px;
    color: #FFF;
}
.topic-text {
    margin-bottom: 70px;
    text-align: left;
}
.topic-link {
    text-align: left;
}
.topic-linktext {
    color: #6E8894;
}

/* --------------- レスポンシブ --------------- */
/* --------------- 1440px-NAV --------------- */
@media screen and (max-width:1440px) {
    .button-pc {
        right: -50px;
    }
    .button-pc a {
        left: 55px;
    }
    .header-wrapper {
        display: block;
    }
    .nav {
        position: absolute;
        top: 0;
        right: 320px;
    }
    .nav ul {
        padding-right: 0;
    }

    .footer-contents {
        width: 90%;
    }
}

/* --------------- 1220px --------------- */
@media screen and (max-width:1220px) {
    * {
        font-size: 14px;
    }
    .wrapper {
        width: 90%;
    }
    .sp-br {
        display: block;
    }

    .header {
        background: none;
        pointer-events: none;
    }
    .header h1 {
        pointer-events: auto;
    }

    .footer {
        margin-top: 50px;
    }
    .footer-contents {
        text-align :center;
    }
    .shop {
        border-bottom: none;
    }
    .shop-span {
        padding-left: 0;
        display: block;
    }
    .sitemap {
        display: block;
    }
    .sitemap ul {
        display: none;
    }

    /* --------------- ハンバーガーメニューナビ --------------- */
    .nav {
        display: none;
    }
    .button-pc {
        display: none;
    }
    .button-sp {
        width: 120px;
        height: 120px;
        display: block;
        position: fixed;
        top: 60px;
        right: -30px;
        background: #669531;
        border-radius: 60px;
        text-align: center;
        z-index: 19;
    }
    .button-sp a {
        display: block;
        margin-top: 50px;
        margin-left: -15px;
        color: #FFF;
        font-size: 0.8rem;
    }

    .resp {
        display: block;
    }
    .resp-nav {
        width: 100vw;
        height: 100vh;
        margin: 0 auto;
        position: fixed;
        top: 0;
        right: 0;
        background: url(../images/respnav_bg.jpg) no-repeat;
        background-size: cover;
        background-position: center bottom;
        transition: 0.5s;
        z-index: 18;
    }
    .resp-nav ul {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 35px;
        align-items: center;
    }
    .resp-nav ul li {
        width: 80%;
    }
    .resp-nav ul li a {
        margin: 0 5px;
        padding: 10px 5px;
        display: block;
        font-size: 1.4rem;
        text-shadow: 1px 1px 3px #FFF;
        opacity: 0;
        transition: 2s;
        pointer-events: none;
    }
    .resp-nav ul li a:hover {
        background: rgba(252, 252, 248, 0.3);
        border-radius: 10px;
    }
    .resp-fadein {
        opacity: 1 !important;
    }
    .resp-fadeinlist {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .openbtn {
        opacity: 1;
        pointer-events: auto;
    }

    /* --------------- トップページ --------------- */
    .intro {
        height: 950px;
    }
    .top-contents {
        padding-bottom: 30px;
        justify-content: flex-end;
        background-position: top left 40%;
    }
    .top-wrapper {
        width: 90%;
    }

    .intro {
        padding-top: 100px;
    }
    .intro-contents {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    .intro-item {
        width: 700px;
        height: auto;
    }
    .intro-contents img {
        height: 450px;
        object-fit: cover;
    }

    .feature-items {
        grid-template-columns: repeat(3, minmax(200px, 1fr));
    }
    .feature-item {
        width: 100%;
    }
    .feature-img {
        width: 100%;
        height: auto;
        border-radius: 20px;
    }
    .feature-illust {
        width: 50%;
    }
    .feature-text {
        width: 100%;
        height: 80px;
        line-height: 1.4rem;
    }

    .menu-content {
        height: 1040px;
    }
    .menu-item {
        width: 95%;
        height: 1000px;
        flex-direction: column;
    }
    .menu-text, .menu-heal {
        min-height: auto;
    }
    .menu-healitem {
        margin-bottom: 30px;
    }
    .menu-healtext a {
        position: absolute;
        right: calc(50% - 100px);
    }

    .info-news {
        grid-template-columns: repeat(4, minmax(170px, 1fr));
    }
    .info-item {
        width: 90%;
        margin-bottom: 30px;
    }

    .contact-contents {
        height: 500px;
        padding: 60px 0;
        background-position: top;
    }
    .contact-link {
        width: 65%;
        margin: 30px auto 0 auto;
    }
    .line-title img {
        margin-bottom: 10px;
    }

    /* --------------- サブページ --------------- */
    /* --------------- 共通部分 --------------- */
    /* --------------- ページタイトル --------------- */
    .pagetop {
        width: 90%;
    }
    .pagetop-bg {
        width: 100%;
    }
    .pagetop-bg-pc {
        display: none;
    }
    .pagetop-bg-sp {
        width: 100%;
        height: 250px;
        display: inline-block;
        border-radius: 30px;
        object-fit: cover;
    }
    .pagetop h2 {
        width: 100%;
    }
    .pagetop-titlebg {
        width: 100%;
    }
    .pagetop-titlebg img {
        width: 90%;
        max-width: 400px;
    }

    /* ---------- oasisについて ---------- */
    .staff-contents {
        flex-direction: column;
    }
    .staff-text {
        width: 100%;
        padding-right: 0;
        display: block;
        text-align: center;
        order: 2;
    }
    .staff-img {
        width: 100%;
        margin-bottom: 30px;
        text-align: center;
        order: 1;
    }

    .desc-wrapper {
        width: 100%;
    }
    .desc-dl {
        display: block;
    }
    .desc-dl dt, .desc-dl dd {
        border-bottom: none;
    }
    .desc-dl dt {
        width: 90%;
        margin: 0 auto;
        border-top: 1px solid #DADADA;
    }
    .desc-dl dd {
        width: 90%;
        margin: 0 auto;
        text-align: center;
        border-top: 1px dashed #EBEBEB;
    }
    .desc-dl dd:last-child {
        border-bottom: 1px solid #DADADA;
    }

    /* ---------- メニュー ---------- */
    .service-wrapper {
        width: 90%;
        padding: 50px 0;
    }
    .ladies-contents, .mens-contents {
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
    }
    .ladies-menu, .mens-menu {
        width: 90%;
    }
    .ladies-menu p, .mens-menu p {
        width: 90%;
        margin: 0 auto;
    }
    .ladies-img, .mens-img {
        width: 90%;
        gap: 30px;
    }
    .ladies-img-pc, .mens-img-pc {
        display: none;
    }
    .ladies-img-sp, .mens-img-sp {
        display: block;
        width: 90%;
    }
    .ladies-img-sp img, .mens-img-sp img {
        width: 100%;
        height: auto;
    }

    .curl-contents {
        flex-direction: column;
        align-items: center;
    }
    .curl-menu, .curl-img {
        width: 90%;
    }
    .curl-menu p {
        margin-bottom: 20px;
    }
    .curl-img img {
        width: 100%;
        max-width: 500px;
    }

    .heal-item {
        padding-bottom: 40px;
        flex-direction: column;
        align-items: center;
        border-bottom: 1px dashed #E4E4E1;
    }
    .heal-item:last-child {
        border-bottom: none;
    }
    .heal-item:nth-child(odd) .heal-right {
        order: 2;
    }
    .heal-item:nth-child(odd) .heal-left {
        order: 1;
    }
    .heal-item:nth-child(even) .heal-right {
        order: 1;
    }
    .heal-item:nth-child(even) .heal-left {
        order: 2;
    }
    .heal-right, .heal-left {
        width: 90%;
    }
    .heal-item img {
        width: 100%;
        max-width: 500px;
    }

    /* --------------- 予約・お問い合わせ --------------- */
    #contact .pagetop h2 {
        top: 40%;
    }
    #contact .contact-link {
        width: 100%;
        margin: 30px auto 0 auto;
    }

    /* --------------- アクセス --------------- */
    #access .desc-dl {
        margin-bottom: 80px;
    }
    #access .desc-dl dt:nth-last-child(2) {
        border-bottom: none;
    }
    .access iframe {
        width: 80%;
        height: 500px;
    }


    /* ---------- お知らせ個別 ---------- */
    .topic-contents img {
        width: 100%;
        height: auto;
    }
    .heal-dl {
        margin-top: 60px;
    }
}
/* --------------- 768px --------------- */
@media screen and (max-width:768px) {
    /* --------------- トップページ --------------- */
    .intro {
        margin-top: 30px;
    }
    .intro-item {
        width: 90%;
        height: auto;
    }
    .intro-contents img {
        width: 90%;
    }

    .feature-title {
        margin-top: 10px;
        display: block;
    }
    .feature-items {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
    .feature-text {
        bottom: 2%;
    }
    .feature-text p {
        font-size: 12px;
    }

    .menu {
        padding-top: 60px;
    }
    .menu-tabtext {
        font-size: 14px;
    }
    .menu-tabtext span {
        margin-left: 0;
        display: block;
        font-size: 0.8rem;
    }
    .menu-tab > label {
        height: 73px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px 10px 0 0;
    }
    .menu-text {
        width: 100%;
        margin-top: 10px;
        align-items: center;
        gap: 25px;
    }
    .menu-top {
        font-size: 1.25rem;
    }
    .menu-top span {
        margin-top: 5px;
        font-size: 1.25rem;
    }
    .menu-woman, .menu-mens {
        margin: 0 auto;
        text-align: center;
    }
    .menu-woman img, .menu-mens img {
        width: 200px;
        margin: 0 auto;
    }
    .menu-woman p, .menu-mens p {
        left: 28%;
    }
    .menu-list {
        margin-top: 13px;
    }
    .menu-list li::before, .menu-healtitle::before {
        width: 15px;
        height: 15px;
        margin-right: 10px;
    }
    .menu-list li {
        width: 262px;
        height: auto;
        margin-bottom: 13px;
        font-size: 1.3rem;
    }
    .menu-list li span {
        width: 262px;
        margin-left: 0;
        text-align: right;
        font-size: 1rem;
    }
    .menu-text2 {
        width: auto;
    }
    .menu-text2 img {
        width: 90%;
        height: fit-content;
    }
    .menu-text2 a {
        margin-top: 18px;
    }
    .menu-heal {
        width: 100%;
        margin-top: 10px;
        justify-content: flex-start;
    }
    .menu-healitem {
        margin-bottom: 20px;
        padding: 0 20px;
        font-size: 1.25rem;
    }
    .menu-healtitle {
        margin-bottom: 8px;
        font-size: 1.25rem;
    }
    .menu-healitem p span {
        display: none;
    }
    .menu-healtext {
        width: 100%;
        max-width: 500px;
        height: 400px;
    }
    .menu-healtext a {
        display: none;
    }
    .menu-healsp {
        display: block; 
    }
    .menu-healsp a {
        width: 200px;
        height: 50px;
        margin: 0 auto;
        margin-top: 30px;
        padding: 10px;
        display: inline-block;
        background: #FFF;
        border-radius: 25px;
        box-shadow:  5px 5px 20px #e6e6e0, -6px -6px 20px #ffffff;
    }

    .info {
        padding-top: 60px;
    }
    .info-title {
        margin-bottom: 0;
    }
    .info-news {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
    .info-item {
        margin-bottom: 30px;
    }

    .contact-contents {
        height: auto;
        background: #FFF;
        border-radius: 50px;
    }
    .contact-link {
        flex-direction: column;
        gap: 30px;
    }
    .contact-line {
        width: 70%;
    }
    .line-link {
        width: 80%;
        height: auto;
    }
    .contact-qr {
        width: 60%;
    }

    /* --------------- WAVES --------------- */
    .waves-wrap {
        position: absolute;
        top: 0;
        width: 100%;
        height: 31px;
        overflow: hidden;
    }
    .waves {
        width: 100%;
        height: 100%;
        background: url(../images/waves_sp.png) repeat-x;
        background-size: contain;
        animation: waves_move_sp 5s linear infinite;
        transform-origin: 0% 0%;
    }

    @keyframes waves_move_sp {
        0% {
            background-position: 0 0;
            transform: translate(0,15px);
        }

        50% {
            background-position: 150px 0;
            transform: translate(0,15px);
        }

        100% {
            background-position: 300px 0;
            transform: translate(0,15px);
        }
    }

    .waves-wrap2 {
        position: absolute;
        top: 0;
        width: 100%;
        height: 31px;
        overflow: hidden;
    }
    .waves2 {
        width: 100%;
        height: 100%;
        background: url(../images/waves_sp.png) repeat-x;
        background-size: contain;
        animation: waves_move_sp 5s linear infinite;
        transform-origin: 0% 0%;
    }

    /* --------------- FOOTER --------------- */
    .footer {
        margin-top: 30px;
    }

    /* --------------- サブページ --------------- */
    /* --------------- 共通部分 --------------- */
    /* --------------- ページタイトル --------------- */
    .pagetop-bg {
        height: 150px;
    }
    .pagetop-bg-sp {
        height: 150px;
    }
    .pagemap {
        display: none;
    }

    /* ---------- oasisについて ---------- */
    .concept-contents {
        display: block;
    }
    .concept-first, .concept-text {
        width: 100%;
        margin: 0 auto;
    }
    .concept-first {
        margin-bottom: 30px;
    }
    .concept-text {
        text-align: center;
    }
    /* ---------- メニュー ---------- */
    .service-link {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    /* --------------- 予約 --------------- */
    .line-contents {
        display:block;
        margin-top: 0;
        margin-bottom: 100px;
    }
    .line-contents img {
        width: 50%;
        height: auto;
    }
    .line-images {
        height: auto;
    }
     .line-img1 {
        margin-top: 0;
    }  
    .line-qr {
        justify-content: center;
        margin-top: 20px;
        
    }
    .add-flows {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(110px, 220px));
        justify-content: space-around;
        gap: 3%;
    }
    .add-flow{
        justify-content: center;
        width: 100%;
        margin-bottom: 50px;
    }
    .add-flow-icon img {
        text-align: center;
    }
    .contact-lists {
        display:block;
    }
    .contact-list {
        margin: 20px auto 0;
        text-align: center;
    }
    .contact-list ol {
        display: inline-block;
        text-align: left;
    }
    /* --------------- 施術の流れ --------------- */
    .flow-item {
        margin-bottom: 30px;
        justify-content: center;
    }
    .pc-circle {
        display: none;
    }
    .sp-circle {
        display: block;
        width: 25px;
        height: 25px;
        border-radius: 12.5px;
        margin-top: 12px;
        margin-right: 10px;
    }
    .sp-circle p {
        color: #fff;
        margin-top: -12px;
    }
    .flow-dot {
        display: none;
    }
    .flow-spimg {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        border-radius: 20px;
    }
    .flow-pcimg {
        display: none;
    }
    .flow-text {
        width: 90%;
    }
    .flow-title{
        display: flex;
        flex-direction: row;
    }

    /* --------------- お客様の声 --------------- */
    .voice-item{
    display:block;
    margin-bottom:60px;
    }
    .fukidasi_sankaku{
        display:none;
    }
    .voice-img {
        width: 40%;
        margin: 0 auto;
    }
    .voice-img p{
        margin-top:20px;
    }
    .voice-comment {
        width: 100%;
    }
    .fukidasi {
        width: 100%;
        padding: 20px 30px;
    }

    /* --------------- アクセス --------------- */
    #access .desc-dl {
        margin-bottom: 50px;
    }
    .access iframe {
        height: 400px;
    }

    /* --------------- お知らせ一覧 --------------- */
    .news-list {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }

}
@media screen and (max-width:679px) {
    .min-br {
        display: block;
    }
    .top-title {
        text-align: right;
    }
}

@media screen and (max-width:499px) {
    .menu-content {
        height: 770px;
        border-radius: 0 0 10px 10px;
    }
    .menu-item {
        height: 750px;
        padding: 10px;
        justify-content: flex-start;
        gap: 20px;
        border-radius: 10px;
    }
    .menu-pctext {
        display: none;
    }
}