@charset "utf-8";
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

html {
  line-height: 1.6; 
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */

/**
 * Prevent vertical alignment issues.
 */

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/**
 * Correct cursors for clickable elements.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Reset to invisible
 */

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the outline style in Safari.
 */

[type="search"] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Fix appearance for Firefox
 */
[type="number"] {
  -moz-appearance: textfield;
}

/**
 * Clickable labels
 */

label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */

[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */

/**
1. Correct table border color inheritance in all Chrome and Safari.
*/

table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/*===　共通　===*/
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 50px;
}

:root {
    --black: #231815;
    --lightBluck: #646464;
    --white: #fff;
    --orange: #EC7723;
    --pink: #E85D5D;
    --LightPink:#D86A83;
    --bgPink: #E85D5D;
    --bgLightPink: #F4A9B6;;
    --blue: #39577D;
    --lightPink: #FBE1DE;
    --fs-10: 10px;
    --fs-11: 11px;
    --fs-12: 12px;
    --fs-13: 12px;
    --fs-14: 13px;
    --fs-15: 14px;
    --fs-16: 14px;
    --fs-17: 15px;
    --fs-18: 16px;
    --fs-19: 16px;
    --fs-20: 17px;
    --fs-21: 18px;
    --fs-22: 18px;
    --fs-23: 19px;
    --fs-24: 19px;
    --fs-25: 20px;
    --fs-26: 20px;
    --fs-27: 21px;
    --fs-28: 22px;
    --fs-29: 22px;
    --fs-30: 23px;
    --fs-31: 23px;
    --fs-32: 24px;
    --fs-33: 24px;
    --fs-34: 25px;
    --fs-35: 25px;
    --fs-36: 26px;
    --fs-37: 26px;
    --fs-38: 27px;
    --fs-39: 27px;
    --fs-40: 28px;
    --fs-44: 29px;
    --fs-46: 30px;
    --fs-48: 31px;
    --fs-60: 36px;
    --ff-mincho: "kozuka-mincho-pr6n", serif;
    --ff-maru: "Zen Maru Gothic", "Noto Sans JP",sans-serif;
    --size-4: 4px;
    --size-8: 8px;
    --size-16: 14px;
    --size-20: 16px;
    --size-24: 19px;
    --size-30: 21px;
    --size-32: 24px;
    --size-40: 28px;
    --size-48: 31px;
    --size-56: 34px;
    --size-64: 38px;
    --size-72: 41px;
    --size-80: 43px;
    --size-88: 46px;
    --size-96: 49px;
    --size-104: 51px;
    --size-112: 54px;
    --size-120: 56px;
    --size-128: 59px;
    --size-136: 61px;
    --size-144: 63px;
    --size-152: 64px;
    --size-160: 68px;
    --size-184: 74px;
    --size-200: 78px;
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 1.7rem;
    color: var(--black, #333A3A);
    background-color: var(--white, #FDFDFD);
    font-family: "Poppins", "Noto Sans JP", sans-serif;
    overflow-x: hidden;
}

img {
    object-fit: contain;
    max-width: 100%;
    width: 100%;
    height: auto;
}

.fw-b {
    font-weight: 600;
}

.t-align-c {
    text-align: center;
}

.u-accent-color {
    color: var(--pink);
}

.br-sp {
    display: block;
}

.br-pc {
    display: none;
}

.a-left-pc {
    text-align: left !important;
}

.t-small {
    font-size: var(--fs-17);
}

.b-shadow {
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);

}

@media (max-width: 969px) {
    html {
        scroll-padding-top: 60px;
    }
}

@media (min-width: 970px) {
    .br-sp {
        display: none;
    }

    .br-pc {
        display: block;
    }

    .a-left-pc {
        text-align: center !important;
    }

    :root {
        --fs-10: 10px;
        --fs-11: 11px;
        --fs-12: 12px;
        --fs-13: 13px;
        --fs-14: 14px;
        --fs-15: 15px;
        --fs-16: 16px;
        --fs-17: 17px;
        --fs-18: 18px;
        --fs-19: 19px;
        --fs-20: 20px;
        --fs-21: 21px;
        --fs-22: 22px;
        --fs-23: 23px;
        --fs-24: 24px;
        --fs-25: 25px;
        --fs-26: 26px;
        --fs-27: 27px;
        --fs-28: 28px;
        --fs-29: 29px;
        --fs-30: 30px;
        --fs-31: 31px;
        --fs-32: 32px;
        --fs-33: 33px;
        --fs-34: 34px;
        --fs-35: 35px;
        --fs-36: 36px;
        --fs-37: 37px;
        --fs-38: 38px;
        --fs-39: 39px;
        --fs-40: 40px;
        --fs-44: 44px;
        --fs-46: 46px;
        --fs-48: 48px;
        --fs-60: 60px;
        --size-4: 4px;
        --size-8: 8px;
        --size-16: 16px;
        --size-20: 20px;
        --size-24: 24px;
        --size-30: 30px;
        --size-32: 32px;
        --size-40: 40px;
        --size-48: 48px;
        --size-56: 56px;
        --size-64: 64px;
        --size-72: 72px;
        --size-80: 80px;
        --size-88: 88px;
        --size-96: 96px;
        --size-104: 104px;
        --size-112: 112px;
        --size-120: 120px;
        --size-128: 128px;
        --size-136: 136px;
        --size-144: 144px;
        --size-152: 152px;
        --size-160: 160px;
        --size-184: 184px;
        --size-200: 200px;
    }
}

a {
    text-decoration: none;
    color: var(--black);
}

.c-fixed-buttons {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 99;
    align-items: flex-end;
}

.c-fixed-button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 56px;
    height: 56px;
    border-radius:50px;
    overflow: hidden;
    transition:  0.3s ;
    color: #fff;
    text-decoration: none;
    right: 10px;
}

.c-fixed-button:hover {
    width: 195px;
    opacity: 1;
}

.c-fixed-button span {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 0 24px;
    white-space: nowrap;
    margin: 0 auto;
    margin-left: auto;
}

.c-fixed-button span img {
    width: 34px;
    height: 35px;
    flex-shrink: 0;
    margin-right:11px;
    max-width: 34px;
}

.c-fixed-button--line {
    background-image: linear-gradient(180deg, rgba(121, 217, 138, 1), rgba(81, 203, 107, 1));
}

.c-fixed-button--tel {
    background-image: linear-gradient(180deg, rgba(240, 183, 192, 1), rgba(232, 93, 93, 1));
}
.c-fixed-button__sp{
        display: none;

    }

@media (hover: hover) {
    .c-fixed-button:hover {
        box-shadow: 0 0 rgba(0, 0, 0, 0);
        transition: 0.3s;
    }
    a:hover{
        opacity: .8;
        transition: 0.3s;
    }
}

@media(max-width:970px) {
    .c-fixed-button__pc{
        display: none;

    }
    .c-fixed-button__sp{
        display: flex;
    }
    .c-fixed-buttons {
        flex-direction: row;
        width: 100vw;
        gap: 0;
        left: 0;
        transform: none;
        height: 50px;
        bottom: 0;
        top: auto;
    }

    .c-fixed-button {
        border-radius: 0;
        flex: 1;
    }
    .c-fixed-button span img{
        width: 24px;
        height: 24px;
    }
}

.l-main {
    display: block;
    overflow: hidden;
    padding-top: 100px;
}

/*===　ヘッダー　===*/
.l-header {
    width: 100%;
    background-color: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

header .l-header__inner {
    margin: 0 auto;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1175px;
    color: var(--black);
    font-size: var(--fs-18);
}

header .l-header__logo .image {
    max-width: 353px;
}

header .p-gnav {
    list-style: none;
    display: flex;
    gap: 32px;
    text-align: center;
    font-weight: 500;
}

@media(max-width:970px) {
    header .l-header__inner {
        padding: 10px;
    }

    header .l-header__logo .image {
        width: 200px;
    }

    header .l-header__inner {
        justify-content: center;
    }

    .l-main {
        padding-top: 60px;
    }
}

.section {
    width: min(90.4vw, 1300px);
    margin: 0 auto;
}

.h2 {
    color: var(--black);
    font-size: var(--fs-30);
    font-weight: 700;
    text-align: center;
    margin: var(--size-20) auto var(--fs-30);
    font-family: var(--ff-mincho);
}

.h2-sub {
    color: var(--pink);
    font-size: var(--fs-16);
    font-weight: 700;
    text-align: center;
    font-family: var(--ff-maru);
    letter-spacing: 0.1em;
}

.h4 {
    color: var(--black);
    text-align: center;
    font-size: var(--fs-24);
    font-style: normal;
    font-weight: 700;
    position: relative;
    width: fit-content;
    margin: 0 auto var(--size-64);
    padding: 0 10px;
}

.h4::before {
    content: "";
    position: absolute;
    bottom: -15px;
    left: -5%;
    width: 110%;
    height: 2px;
    background: linear-gradient(to right, transparent, #E85d5d, transparent);
    filter: blur(2px);
}

/*===　kv　===*/
.section-kv {
    width: 100vw;
    background-image: url(../images/beauty/kv.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 55% 0;
}

.p-kv__inner {
    width: 86vw;
    max-width: 1340px;
    margin: 0 auto;
    padding: var(--size-96) 0;
}

.section-kv .sub-copy {
    color: var(--pink);
    font-size: var(--fs-17);
    font-weight: 600;
    border-radius: 50px;
    border: 1px solid var(--pink);
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 0 8px 0 rgba(255, 255, 255, 0.35);
    padding: 4px 20px 6px;
    display: inline-block;
    margin: 0 0 20px 20px;
}

.section-kv .copy {
    font-size: var(--fs-40);
    color: var(--bluck);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    font-family: var(--ff-mincho);
    font-weight: 700;
}

.section-kv .copy p {
    background-color: var(--white);
    display: inline-block;
    margin: 0;
    padding: var(--size-8) var(--size-20);
    box-shadow: 4px 4px 7px 0 rgba(100, 100, 100, 0.30);
}

.section-kv .desc {
    color: var(--bluck);
    text-shadow: 0 0 5px #FFF;
    font-size: var(--fs-17);
    font-weight: 500;
    margin: 20px 0 0 16px;
    line-height: 2;
}

.banner-student {
    max-width: 560px;
    margin: var(--size-96) auto 0;
    overflow: hidden;
    transition: 0.3s;
}

.banner-student img {
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

@media(max-width:969px) {
    .banner-student {
        padding: 0 4.8vw;
    }
    #flow{
        padding-bottom: 50px;
    }

    .section-kv .sub-copy {
        margin: 0 auto 20px;
    }

    .section-kv .copy {
        font-size: 23px;
        gap: 8px
    }

    .section-kv .copy p {
        padding: 6px 10px;
    }

    .section-kv .desc {
        margin-left: 0;
    }
}

/*===　flow　===*/
.section-flow {
    font-size: var(--fs-17);
    border-radius: 15px;
    border: 1px solid #D86A83;
    background: #FFF;
    box-shadow: 0 0 15px 5px rgba(244, 169, 182, 0.15);
    padding: var(--size-64) 6%;
    margin-top: var(--size-96);
}

.section-flow h2 {
    text-align: center;
    font-size: var(--fs-24);
    color: var(--pink);
    font-family: var(--ff-mincho);
    font-weight: 700;
}

.section-flow .image-caution {
    width: var(--size-48);
    display: block;
    margin: 0 auto var(--size-30);
}

.section-flow .desc {
    text-align: center;
    margin: var(--size-24) auto var(--size-40);
    line-height: 2;
}

.section-flow .flow-box {
    border-radius: 10px;
    border: 1px solid #EBE9E9;
    background: #FBFAF8;
    padding: var(--size-32) var(--size-24);
    width: 100%;
    position: relative;
}

.box-arrow::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='26' viewBox='0 0 23 26' fill='none'%3E%3Cpath d='M22.5 12.9904L3.33782e-07 25.9807L2.39645e-08 -2.45272e-05L22.5 12.9904Z' fill='%23E85D5D'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

.section-flow .flex-container {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.section-flow .flex-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--size-16);
}

.section-flow h3 {
    font-size: var(--fs-20);
    margin-bottom: var(--size-16);
    font-weight: 600;
}

.section-flow .number {
    font-size: var(--fs-24);
    color: var(--pink);
    font-family: var(--ff-mincho);
    font-weight: 500;
}

@media(min-width: 1280px) {
    .section-flow{
        padding: var(--size-64) 3.2%;
    }
    .section-flow .flex-container {
        flex-direction: row;
    }

    .section-flow .flow-box {
        width: 25%;
        padding: var(--size-32) var(--size-20);
    }

    .box-arrow::after {
        top: 46%;
        left: calc(100% + 10px);
        transform: rotate(0deg);
    }
}

@media(max-width:969px) {
    .section-flow {
        margin: 0 4.8vw;
    }
}

.section-message {
    padding-block: var(--size-152);
}

.section-message .inner {
    max-width: 1300px;
    display: flex;
    align-items: flex-start;
    gap: 7.8%;
    margin-top: var(--size-80);
    padding: var(--size-64) 6.15% var(--size-40);
    border-radius: 15px;
    border: 1px solid #DBD5C8;
    background: #FFF;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.04);
}

.section-message .inner p {
    font-size: var(--fs-17);
    font-weight: 400;
    margin-bottom: var(--size-20);
    line-height: 2;
}

.section-message .inner .name {
    text-align: right;
    font-family: var(--ff-mincho);
    font-weight: 500;
}

.section-message .image {
    width: 30%;
    border-radius: 10px;
}

@media(max-width:969px) {
    .section-message .inner {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .section-message .image {
        width: 94%;
        max-width: 320px;
    }
}

/*===　treatment　===*/
.section-treatment,
.section-faq {
    background-color: #FBFAF8;
    width: 100vw;
    padding-block: var(--size-152);
}

.section-treatment .text-disc{
    font-size: var(--fs-17);

}

.section-treatment .container {
    width: min(90.4vw, 1300px);
    margin: var(--size-152) auto 0;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #DBD5C8;
    background: var(--white);
    box-shadow: 0 0 10px 0 rgba(219, 213, 200, 0.50);
}

.section-treatment .title-area {
    background-size: cover;
    padding-block: var(--size-56);
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.04);
}

.section-treatment .h4{
    font-family: var(--ff-mincho);
}
.section-treatment .category{
    font-size: var(--fs-17);
    color: var(--white);
    font-weight: 500;
    background-color: var(--bgPink);
    border-radius: 20px;
    display: block;
    padding: 6px var(--size-24);
    margin: 0 auto 24px;
    width: fit-content;
}

.section-treatment .container1 .title-area {
    background-position: 80% 0;
    background-image: url('../images/beauty/cover-treatment01.jpg?ver3');
}

.section-treatment .container2 .title-area {
    background-position: 30% 0;
    background-image: url('../images/beauty/cover-treatment02.jpg?ver2');
}

.section-treatment .container3 .title-area {
    background-position: 70% 0;
    background-image: url('../images/beauty/cover-treatment03.jpg?ver2');
}
.section-treatment .container4 .title-area {
    background-position: 70% 0;
    background-image: url('../images/beauty/cover-treatment02.jpg');
}
.section-treatment .container5 .title-area {
    background-position: 70% 0;
    background-image: url('../images/beauty/cover-treatment02.jpg');
}

.section-treatment .container3 .text {
    font-weight: 500;
    margin-bottom: var(--size-80);
    font-size: var(--fs-17);
}

.section-treatment .container3 .p-benefits__item {
    margin-bottom: var(--size-32);
}

.section-treatment .text-box {
    border-radius: 0 10px 10px 0;
    background: linear-gradient(180deg, rgba(245, 239, 239, 0.9) 0%, rgba(248, 197, 192, 0.9) 100%);
    width: 50%;
    text-align: center;
    padding: var(--size-30) var(--size-24);
}

.section-treatment .container2 .text-box {
    border-radius: 10px 0 0 10px;
    text-align: center;
    margin: 0 0 0 auto;
}

.section-treatment .text-box h3 {
    color: var(--black);
    font-family: var(--ff-mincho);
    font-size: var(--fs-30);
    font-weight: 700;
    margin-bottom: var(--size-20);
}

.section-treatment .sub-t {
    color: var(--white);
    border-radius: 50px;
    font-size: var(--fs-17);
    background: var(--pink);
    font-weight: 500;
    display: inline-block;
    padding: 6px var(--size-24) 4px;
    margin-bottom: var(--size-32);
}

.section-treatment .disc {
    color: var(--black);
    font-size: var(--fs-17);
    line-height: 2;
}

.section-treatment .container .inner {
    padding: var(--size-80) 3.66% 0;
}

.rec-list {
    list-style: none;
    padding: 0;
    margin: 0 auto var(--size-80);
    columns: 2;
    column-gap: 20px;
    max-width: 800px;
    font-size: var(--fs-17);
}

.rec-list__item {
    border-radius: 7px;
    background: var(--lightPink);
    margin: 0 0 15px 0;
    position: relative;
    padding: var(--size-8) var(--size-24) var(--size-8) 50px;
    break-inside: avoid;
}

.rec-list__item::before {
    content: "";
    position: absolute;
    left: 24px;
    top: .8em;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='14' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M13.5925 0.208788C13.6998 0.29508 13.7911 0.404611 13.8613 0.531122C13.9314 0.657633 13.979 0.798646 14.0013 0.946106C14.0236 1.09357 14.0201 1.24458 13.9912 1.39053C13.9622 1.53648 13.9083 1.67449 13.8325 1.7967L8.16648 10.9323C7.80648 11.511 7.50148 12.0031 7.22648 12.3778C6.93948 12.7651 6.61648 13.1274 6.18848 13.3575C5.55422 13.7004 4.8307 13.7625 4.15848 13.5317C3.70248 13.3757 3.33848 13.0693 3.00948 12.7321C2.69448 12.4074 2.33748 11.9712 1.91948 11.4608L0.284481 9.464C0.191406 9.35541 0.11832 9.22673 0.0695134 9.08551C0.0207072 8.9443 -0.00283436 8.7934 0.000271829 8.64167C0.00337802 8.48995 0.0330691 8.34046 0.0876012 8.20199C0.142133 8.06352 0.220407 7.93886 0.317824 7.83533C0.415242 7.7318 0.529839 7.65149 0.654885 7.59911C0.779931 7.54674 0.912905 7.52335 1.046 7.53033C1.17909 7.53731 1.30961 7.57452 1.4299 7.63976C1.55019 7.705 1.65783 7.79697 1.74648 7.91026L3.35248 9.8718C3.80748 10.4265 4.10648 10.7899 4.35048 11.0417C4.59048 11.2877 4.69448 11.3367 4.73548 11.3504C4.93148 11.4187 5.14048 11.4016 5.33348 11.298C5.37948 11.2729 5.48248 11.2011 5.69348 10.9129C5.90948 10.6202 6.16648 10.2067 6.55648 9.57905L12.1985 0.482172C12.2742 0.359933 12.3704 0.255892 12.4815 0.175993C12.5925 0.0960947 12.7163 0.0419036 12.8458 0.016516C12.9752 -0.00887166 13.1078 -0.00495837 13.2359 0.0280322C13.364 0.0610227 13.4852 0.122444 13.5925 0.208788Z' fill='%23E85D5D'/%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.p-benefits {
    gap: 30px;
}

.item-label {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--pink);
    border-radius: 10px 0;
    color: #fff;
    padding: 2px 15px;
    font-size: var(--fs-17);
    font-weight: 500;
}

.p-benefits__item {
    border-radius: 10px;
    border: 1px solid #DBD5C8;
    background: #FFF;
    box-shadow: 0 0 10px 0 rgba(219, 213, 200, 0.50);
    padding: var(--size-48 ) var(--size-24) var(--size-20);
    overflow: hidden;
    position: relative;
    margin: 0 auto var(--size-80);
    flex-basis: 33.3%;
}

.p-benefits__item h4 {
    margin-bottom: var(--size-20);
    font-size: var(--fs-20);
    color:var(--pink);
    font-weight: 500;
}

.p-benefits__item p {
    font-size: 16px;
}

.image-container {
    margin-bottom: var(--size-80);
    width: 100%;
    display: flex;
    gap: 3.5%;
}

.image__item {
    border-radius: 8px;
}
.image__item img{
    width: 100%;
    border-radius: 8px 8px 0 0;
}

.text-image__item {
    background: var(--bgPink);
    color: var(--white);
    font-size: var(--fs-16);
    font-style: normal;
    font-weight: 600;
    margin: 0;
    padding: var(--size-8) var(--size-16);
    border-radius: 0 0 8px 8px;
}
.arrow-image__item {
    position: relative; 
}
.arrow-image__item::after{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='26' viewBox='0 0 23 26' fill='none'%3E%3Cpath d='M22.5 12.9902L3.33782e-07 25.9806L2.39645e-08 -0.000146598L22.5 12.9902Z' fill='%23E85D5D'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    top: 45%;
    right: -6%;
}

.p-flow {
    gap: 30px;
    max-width: 835px;
    margin: 0 auto;
}

.flow__item-label {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--pink);
    color: #fff;
    padding: 2px 15px;
    font-size: var(--fs-20);
}

.p-flow__item {
    border-radius: 10px;
    border: 1px solid #EBE9E9;
    background: #FBFAF8;
    padding: var(--size-40) var(--size-30) var(--size-24);
    overflow: hidden;
    position: relative;
    margin-bottom: var(--size-80);
}

.p-flow__item h4 {
    margin: 0 auto 10px;
    color: var(--black);
    font-weight: 600;
}

@media (min-width: 970px) {
    .p-benefits {
        display: flex;
    }

    .image__item {
        width: 100%;
    }

    .image__item img {
        width: 100%;
    }

    .p-flow {
        width: 100%;
        display: flex;
        gap: 3.33%;
    }

    .p-flow__item {
        flex-basis: 33.33%;
    }
}

@media(max-width:969px) {
    .section-treatment .container .inner{
        padding-top: 30px;
    }
    .rec-list {
        columns: 1;
    }

    .rec-list__item {
        margin-bottom: 8px;
        padding-block: 5px;
    }

    .image-container {
        flex-direction: column;
        gap: 35px;

    }
    .p-benefits__item h4{
        margin-top: 8px;
    }
    .p-benefits__item,.p-flow__item{
        margin-bottom: 24px;
    }
    .h4{
        margin-top: var(--size-40);
    }

    .section-treatment,
    .section-price {
        padding: var(--size-152) 4.8vw;
    }

    .section-treatment .text-box {
        width: 100%;
        border-radius: 0;

    }
    .section-treatment .sub-t{
        margin-bottom: 8px;
    }
    .arrow-image__item::after{
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}
}

.section-price {
    padding-top: var(--size-152);
}

.section-price .container {
    width: min(90.4vw, 1200px);
    margin: var(--size-80) auto var(--size-152);
    border-radius: 15px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--orange);
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.04);
}

.section-price .d-text {
    font-weight: 700;
    margin-top: var(--size-32);
    font-size: var(--fs-17);
}

.section-price .title-area {
    background-size: cover;
    overflow: hidden;
    width: 100%;
    padding: 60px 0;
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.04);
}

.section-price .container1 .title-area {
    background-position: 76% 50%;
    background-image: url('../images/beauty/cover-price01.jpg');
}
.section-price .banner{
    margin-bottom: var(--size-80);
}

,.section-price .container2,.section-price .container4 {
    margin-bottom: var(--size-144);
}

.section-price .container2,.section-price .container4,.section-price .container5 {
    border: 1px solid #D86A83;
}

.section-price .container2 .title-area {
    background-position: 0 0;
    background-image: url('../images/beauty/cover-price02.jpg');
}

.section-price .container2 .text-box,.section-price .container4 .text-box,.section-price .container5 .text-box {
    background: linear-gradient(180deg, rgba(245, 239, 239, 0.9) 0%, rgba(248, 197, 192, 0.9) 100%);
}

.section-price .container2 .h4::before,
.section-price .container4 .h4::before,
.section-price .container5 .h4::before {
    background: linear-gradient(to right, transparent, #e85d5d, transparent);
}

.section-price .container2 .h4,
.section-price .container4 .h4,
.section-price .container5 .h4 {
    color: var(--pink);
}

.container2 .campaign-table th,
.container2 .campaign-table td,
.container4 .campaign-table th,
.container4 .campaign-table td,
.container5 .campaign-table th,
.container5 .campaign-table td {
    border-top: 1px solid #D86A83;
    border-bottom: 1px solid #D86A83;
    border-right: 1px solid #D86A83;
    border-left: 1px solid #D86A83;
}

.section-price .container2 tr,
.section-price .container4 tr,
.section-price .container5 tr {
    background: #FBECEE;
}

.section-price .container2 .campaign-table th,
.section-price .container2 .camp-price,
.section-price .container4 .campaign-table th,
.section-price .container4 .camp-price,
.section-price .container5 .campaign-table th,
.section-price .container5 .camp-price {
    color: var(--pink);
}

.section-price .container3 {
    border: 1px solid var(--blue);
}

.section-price .container3 .title-area {
    background-position: 75% 0;
    background-image: url('../images/beauty/cover-price03.jpg');
}

.section-price .container3 .text-box {
    background: linear-gradient(180deg, rgba(238, 247, 250, 0.9) 0%, rgba(194, 213, 237, 0.9) 100%);
}

.section-price .container3 .h4 {
    color: var(--blue);
    font-weight: 500;
}

.section-price .container3 .h4::before {
    background: linear-gradient(to right, transparent, var(--blue), transparent);
}

.section-price .container3 .campaign-table th,
.section-price .container3 .camp-price {
    color: var(--blue);
}

.container3 .campaign-table th,
.container3 .campaign-table td {
    border-top: 1px solid var(--blue);
    border-bottom: 1px solid var(--blue);
    border-right: 1px solid var(--blue);
    border-left: 1px solid var(--blue);
}

.section-price .container3 tr {
    background: #EEF7FA;
}

.section-price .container3 .sub-t {
    color: var(--blue);
}

.section-price .container3 .banner {
    margin-bottom: var(--size-80);
}

.section-price .text-box {
    border-radius: 0 10px 10px 0;
    background: linear-gradient(180deg, rgba(255, 251, 233, 0.9) 0%, rgba(246, 234, 206, 0.9) 100%);
    width: 50%;
    text-align: center;
    padding: var(--size-30) var(--size-24) var(--size-24);
}

.section-price .container2 .text-box,.section-price .container4 .text-box {
    border-radius: 10px 0 0 10px;
    margin: 0 0 0 auto;
}
.section-price .container5 .text-box {
    margin: 0;
    border-radius: 0 10px 10px 0;
}
.section-price .container2 .sub-t{
    color: var(--pink);
}

.section-price .text-box h3 {
    color: var(--black);
    font-family:var(--ff-mincho);
    font-size: var(--fs-30);
    font-weight: 700;
    margin-bottom: var(--size-20);
}

.section-price .sub-t {
    color: var(--orange);
    border-radius: 50px;
    font-size: var(--fs-20);
    background: var(--white);
    font-weight: 500;
    display: inline-block;
    padding: 5px var(--size-24) 5px;
    margin-bottom: var(--size-32);
}

.section-price .disc {
    font-size: var(--fs-17);
    font-style: normal;
    line-height: 2;

}

.section-price .inner {
    padding: var(--size-80) 8.3% 0;
}

.section-price .h4 {
    color: var(--orange);
}

.section-price .h4::before {
    background: linear-gradient(to right, transparent, #F2BA6D, transparent);
}

.banner {
    max-width: 600px;
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    transition: 0.3s;
}

.section-price .container1 tr {
    background: #FBF5EB;
    font-weight: 500;
}

.section-price td {
    background: var(--white);
}

.table-wrapper-responsive {
    width: 100%;
}

.campaign-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--size-80);
}
.container4 .campaign-table {
    margin-bottom: var(--size-32);
}
.container4 .text{
    margin-bottom: var(--size-80);
    font-weight: 500;
    font-size: var(--fs-17);
}

.campaign-table th,
.campaign-table td {
    padding: 32px 15px 15px 15px;
    border-top: 1px solid var(--orange);
    border-bottom: 1px solid var(--orange);
    border-right: 1px solid var(--orange);
    border-left: 1px solid var(--orange);
    text-align: center;
    font-size: 24px;
    height: 100px;
}

.campaign-table th:first-child,
.campaign-table td:first-child {
    border-left: none;
}

.campaign-table th:last-child,
.campaign-table td:last-child {
    border-right: none;
}

.campaign-table .item-name,
.campaign-table th {
    text-align: center;
    width: 50%;
    color: var(--orange);
    font-size: var(--fs-24);
    font-style: normal;
    font-weight: 500;
}

.campaign-table .small-text {
    display: block;
    color: var(--lightBluck);
    font-size: 16px;
    line-height: 1;
}

.price-normal {
    font-size: var(--fs-24);
    color: var(--lightBluck);
    position: relative;
    display: inline-block;
}
.price-normal::after {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    width: calc(100% + 8px);
    height: 1px;
    background-color: currentColor;
}


.camp-price {
    font-size: var(--fs-24);
    color: var(--orange);
    font-style: normal;
    font-weight: 600;
}

@media (max-width: 969px) {
    .section-price .inner {
        padding: var(--size-80) 4.8vw 0;
    }

     .section-price .container4 .inner,.section-price .container5 .inner{
        padding-top: 16px;
     }

    .section-price .text-box {
        width: 100%;
        border-radius: 0 !important;
    
    }
    .section-price .sub-t{
        padding: 2px 20px ;
        margin-bottom: 8px;
    }

    .campaign-table,
    .campaign-table thead,
    .campaign-table tbody,
    .campaign-table th,
    .campaign-table td,
    .campaign-table tr {
        display: block;
    }

    .campaign-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
        border-radius: 15px;
    }

    .campaign-table tr {
        border: 1px solid #ece6e2;
        border-radius: 8px;
        margin-bottom: 15px;
        background: #fafafa;
        overflow: hidden;
    }

    .campaign-table td {
        border: none;
        position: relative;
        padding: 10px 24px 10px 40%;
        text-align: right;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .campaign-table td:last-child {
        border-bottom: 0;
    }

    .campaign-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        width: 35%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-size: var(--fs-18);
    }

    .campaign-table .item-name {
        width: 100%;
        padding: 12px 15px;
        text-align: center;
        justify-content: center;
        border: none;
        display: block;
    }

    .campaign-table .item-name::before {
        content: none;
    }

    .campaign-table .small-text {
        display: inline-block;
        margin-left: 5px;
    }

    .campaign-table th,
    .campaign-table td {
        border: none !important;
        height: auto;
    }

    .campaign-table td {
        border-top: 1px solid #ece6e2 !important;
    }
}

/* ハンバーガーメニュー */
.l-header__hamburger {
    display: none;
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 99999;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
    pointer-events: auto;
}

.l-header__hamburger span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--pink);
    transition: 0.3s;
}

.l-header__hamburger span:nth-child(1) {
    top: 0;
}

.l-header__hamburger span:nth-child(2) {
    top: 11px;
}

.l-header__hamburger span:nth-child(3) {
    bottom: 0;
}

@media (max-width: 969px) {
    .l-header__hamburger {
        display: block;
    }

    .l-header__nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 88%;
        height: 100vh;
        background-color: #fff;
        transition: 0.4s;
        z-index: 90;
        padding-top: 80px;
    }

    .l-header__nav.is-open {
        right: 0;
        background: linear-gradient(-140deg, #ffF 0%, #F8C5C0 100%);

    }

    .l-header__nav .btn-cta {
        width: 84%;
    }

    .l-header__nav .cta-container {
        gap: 16px;
    }

    .l-header__nav .btn-tel {
        padding-left: 40px;
    }

    .l-header__nav .cta-container a {
        gap: 8px;
        max-width: 300px;
    }

    .p-gnav {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        margin-bottom: 30px;
    }

    .l-header__hamburger.is-open span:nth-child(1) {
        transform: translateY(11px) rotate(45deg);
    }

    .l-header__hamburger.is-open span:nth-child(2) {
        opacity: 0;
    }

    .l-header__hamburger.is-open span:nth-child(3) {
        transform: translateY(-11px) rotate(-45deg);
    }
}

@media (min-width: 970px) {

    .l-header__hamburger,
    #js-nav {
        display: none;
    }
}

/* FAQ */
.section-faq .h2{
    margin-bottom: var(--size-80);
}
.faq-container {
    width: min(90.4vw, 1200px);
    margin: 20px auto;
    font-size: var(--fs-20);
}

.faq-item {
    border-radius: 10px;
    border: 1px solid #DBD5C8;
    background: #FFF;
    box-shadow: 0 0 10px 0 rgba(219, 213, 200, 0.50);
    margin-bottom: var(--size-30);
}

.faq-question {
    display: block;
    list-style: none;
    cursor: pointer;
    padding: var(--size-32) var(--size-136) var(--size-32) var(--size-56);
    font-weight: 600;
    position: relative;
    outline: none;
    transition: 0.3s;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::before,
.faq-question::after {
    content: "";
    position: absolute;
    right: 40px;
    top: 50%;
    background-color: var(--pink);
    transition: transform 0.3s ease;
}

.faq-question::before {
    width: 30px;
    height: 4px;
    margin-top: -2px;
    border-radius: 4px;
}

.faq-question::after {
    width: 4px;
    height: 30px;
    right: 53px;
    margin-top: -15px;
    transition: 0.3s;
    border-radius: 4px;
}

.faq-question.is-open::after {
    transform: rotate(90deg);
    opacity: 0;
}

.faq-answer {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    padding: 0;
}


.faq-answer p {
    padding: 0 var(--size-136) var(--size-32) var(--size-56);
}

@media(max-width:969px) {
    .faq-answer p {
        padding: 0 32px 22px 32px;
    }
}




.section-cta {
    padding: var(--size-152) 4.8vw;
    background-image: url(../images/beauty/cover-cta.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 12% 80%;
    position: relative;
}

.section-cta h2 {
    font-size: var(--fs-24);
    text-align: center;
    margin-bottom: var(--size-32);
    font-weight: 700;
    font-family: var(--ff-mincho);
}

.section-cta p {
    font-size: var(--fs-17);
    text-align: center;
    font-weight: 600;
    margin-bottom: var(--size-48);
    line-height: 2;
}

.cta-container {
    display: flex;
    justify-content: center;
    gap: 4%;
    max-width: 1200px;
    margin: 0 auto;
}

.cta-container a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    line-height: 1.5;
}

.btn-cta {
    height: 100px;
    border-radius: 100px;
    box-shadow: 0 0 5px 3px rgba(227, 205, 220, 0.65);
    padding: 0 var(--size-30) 0 var(--size-48);
    color: var(--white);
    font-size: var(--fs-22);
    font-weight: 500;
    text-align: center;
    transition: 0.3s;;
}

.btn-line {
    background: linear-gradient(90deg, #51CB6B 0%, #79D98A 50%, #A5E8AC 100%);
}

.btn-tel {
    background: linear-gradient(90deg, #E85D5D 0%, #ED898D 62.5%, #F0B7C0 100%);
}

.btn-instagram {
    background: linear-gradient(90deg, #FF8D77 0%, #EF82A0 43.27%, #E078C6 69.71%, #CC8BD5 100%);
}

@media(max-width:969px) {
    .section-cta h2 {
        font-size: 18px;
    }

    .faq-question {
        padding: 22px 60px 22px 32px;
    }

    .cta-container {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .faq-question::before {
        width: 24px;
        right: 24px;
    }

    .faq-question::after {
        width: 4px;
        margin-top: -15px;
        border-radius: 4px;
        height: 24px;
        right: 34px;
        top: 52.5%;
    }

}
@media(max-width:1200px) {
    .cta-container {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .btn-cta {
        max-width: 90.4%;
        width: 300px;
        height: 64px;
        font-size: 17px;
        padding: 0 14px 0 48px;
    }
}
@media(min-width:1199px){
    .cta-container a{
        min-width: 350px;
    }
}
@media(min-width:970px){
    .btn-tel{
        pointer-events: none;
        padding: 0 14px;
        justify-content: center !important;
    }
    .btn-tel svg{
        display: none;
    }
}

/* フッター */
.l-footer__inner {
    background: #D86A83;
    width: 100vw;
    text-align: center;
    color: var(--white);
    padding-block: var(--size-80);
    position: relative;
}

.l-footer__inner .btn {
    color: var(--white);
    border: 2px solid #fff;
    border-radius: 50px;
    padding: var(--size-16) var(--size-56);
    display: inline-block;
    transition: 0.3s;
    font-weight: 600;
}
@media (hover: hover) {
    .l-footer__inner .btn:hover {
        color: #D86A83;
        background: var(--white);
        transition: 0.3s;
        opacity: 1;
    }
}

small {
    font-size: var(--fs-14);
    margin: 0;
    color: #45423F;
}

.copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    height: 92px;
}

.production img {
    width: 150px;
    margin-bottom: 8px;
}

.f-title {
    font-size: var(--fs-30);
    font-weight: 600;
    margin-bottom: var(--size-30);
}

.address {
    font-size: var(--fs-24);
    color: var(--white);
    margin-top: 30px;
}

.parking {
    margin-bottom: var(--size-64);
    font-size: var(--fs-24);
}

@media(max-width:969px) {
    .copyright {
        flex-direction: column;
        padding: 20px 0 60px;
        height: auto;
        gap:8px
    }
}

/* 2026/05/14 タウラボ修正CSS */
.container5 .text{
    margin-bottom: var(--size-64);
    font-weight: 500;
    font-size: var(--fs-17);
}

.container5 .campaign-table {
    margin-bottom: var(--size-32);
}
.-color_blue{
    color: var(--blue);
}
.container3 .text{
    margin-bottom: var(--size-56);
    font-weight: 500;
    font-size: var(--fs-17);
}
.container3 .campaign-table {
    margin-bottom: var(--size-32);
}