/*********************
ROOT
**********************/
:root {
   --black-main: #3C3C3C;
   --black-sub: #5F7079;
   --gray-main: #98A0A5;
   --gray-sub: #ADBAC1;
   --border: rgba(146, 146, 146, .5);

   --pink-main: #D17E6F;
   --pink-sub: #E7A295;
   --pink-base: #FBF5F0;
   --blue-sub: #58A9BC;
   --blue-base: #EFF6F6;
   --pink-accent: #E467B5;
   --pink-cv: #DA8ABD;
   --pink-light: rgba(241, 201, 227, .3);

   --font-jp: "Zen Old Mincho", 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', serif;
   --font-en: "Amethysta", 'Georgia', 'Athelas', serif;
   --font-cursive: "Allison", serif;
   --light: 300;
   --normal: 400;
   --semi: 500;
   --bold: 700;

   --container: calc(1920px + 8%);
   --container-side: 4%;
   --container-side-sp: 6%;
   --container-l: 1280px;
   --container-m: 1191px;
   --container-s: 1077px;
   --radius: 10px;
}


/*********************
 BASE
 *********************/
html {
   font-family: "Zen Old Mincho", 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'Yu Mincho Light', 'YuMincho', 'Yu Mincho', '游明朝体', serif;
   font-size: 62.5%;
}

body {
   background-color: #FFFFFF;
   color: var(--black-main);
   font-family: var(--font-jp);
   font-weight: var(--normal);
   font-size: 1.6rem;
   letter-spacing: .04em;
   line-height: 1;
}

section {
   position: relative;
   width: 100%;
}

p {
   margin: 0;
}

a {
   color: var(--pink-main);
   transition: all 0.3s;
}

a:hover {
   opacity: 0.7;
}

img {
   height: auto;
   border: none;
   line-height: 0;
   vertical-align: bottom;
}

ol,
ul {
   padding: 0;
}

ol li {
   margin: 0 0 0 0;
}

ul li {
   margin: 0 0 0 0;
}

ol li:last-of-type,
ul li:last-of-type {
   margin-bottom: 0;
}

dl,
dt,
dd {
   margin: 0;
}

table {
   border-collapse: collapse;
}

@media only screen and (max-width: 760px) {
   body {
      font-size: 1.5rem;
   }

}

/*********************
 GENERAL
 *********************/

/*FONT*/
.font-en {
   font-family: var(--font-en);
}

.font-cursive {
   font-family: var(--font-cursive);
}

.small {
   font-size: .8em;
}

.large {
   font-size: 1.2em;
}

.strong {
   font-weight: var(--bold);
}

.uppercase {
   text-transform: uppercase;
}

.line-heighter,
.line-heighter * {
   line-height: 2.1;
}

.line-heighter p {
   margin: 0 0 2em;
}

@media only screen and (max-width: 760px) {}


/*********************
 ANIMATION
 *********************/
.fadein {
   opacity: 0;
   transform: translateY(30px);
   transition-property: transform, opacity;
   transition-duration: 1.5s;
   transition-delay: 0s;
}

.fadein.is-active {
   opacity: 1;
   transform: translateY(0);
}

.fade {
   opacity: 0;
   transition-property: opacity;
   transition-duration: 1.5s;
   transition-delay: 0s;
}

.fade.is-active {
   opacity: 1;
}

.delay--1 {
   transition-delay: .15s;
}

.delay--2 {
   transition-delay: .3s;
}

.delay--3 {
   transition-delay: .6s;
}

.delay--4 {
   transition-delay: .9s;
}

.delay--5 {
   transition-delay: 1.2s;
}

.delay--6 {
   transition-delay: 1.5s;
}

@media only screen and (min-width: 761px) {}



/*********************
 CONTAINER
 *********************/
.site-content {
   margin-top: 0;
   margin-bottom: 0;
}

.container {
   max-width: var(--container);
   position: relative;
   margin: 0 auto;
   width: 100%;
}

.container-l {
   max-width: var(--container-l);
   margin: 0 auto;
}


.container-s {
   max-width: var(--container-s);
   margin: 0 auto;
   padding-right: var(--container-side);
}

@media only screen and (max-width: 1440px) {
   .container {
      padding-right: 3.5vw;
      padding-left: 3.5vw;
   }
}

@media only screen and (max-width: 760px) {

   .container {
      padding-right: var(--container-side-sp);
      padding-left: var(--container-side-sp);
   }

}


/*********************
HEADING
*********************/
.heading__wrap {
   gap: 24px;
   margin-bottom: 56px;
}

.heading__wrap--center {
   text-align: center;
}

.heading--en {
   color: var(--pink-sub);
   font-family: var(--font-en);
   font-weight: var(--normal);
   font-size: 64px;
   letter-spacing: 0.08em;
   line-height: 1;
   margin-bottom: 24px;
}

.heading__wrap--01 .heading--en {
   color: var(--pink-sub);
}

.heading__wrap--02 .heading--en {
   color: var(--blue-sub);
}

.heading--jp {
   font-size: 24px;
   letter-spacing: 0.08em;
   line-height: 1;
}

@media only screen and (max-width: 1440px) {
   .heading__wrap {
      margin-bottom: 3.88vw;
   }

   .heading--en {
      font-size: 4.44vw;
      margin-bottom: 1.66vw;
   }

   .heading--jp {
      font-size: 1.66vw;
   }
}

@media only screen and (max-width: 760px) {
   .heading__wrap {
      margin-bottom: 8.53vw;
   }

   .heading--jp {
      font-size: 4.8vw;
      margin-bottom: 2.13vw;
   }

   .heading--en {
      font-size: 9.6vw;
   }
}

/*********************
BUTTON
*********************/


.main-btn {
   align-items: center;
   background-color: var(--pink-main);
   border: 1px solid var(--pink-main);
   color: #fff;
   display: flex;
   font-size: 24px;
   height: 66px;
   justify-content: center;
   line-height: 1;
   padding: 0 38px 0 0;
   position: relative;
   text-align: center;
   transition: background-color .3s, opacity 1.5s .9s, transform 1.5s .9s;

   z-index: 1;
}

.main-btn span {
   position: relative;
}

.main-btn span::after {
   content: '';
   display: block;
   width: 16px;
   height: 10px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
   position: absolute;
   right: -24px;
   top: 50%;
   transform: translateY(-50%);
   background-image: url(../img/icon-right-arrow_wh.svg);
}

.btn {
   align-items: center;
   border-bottom: 1px solid var(--black-main);
   color: var(--black-main);
   display: flex;
   font-size: 20px;
   height: 52px;
   justify-content: start;
   margin-top: 16px;
   line-height: 1;
   position: relative;
   transition: all .3s;
   z-index: 1;
}


.btn::after {
   content: '';
   display: block;
   width: 16px;
   height: 10px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
   position: absolute;
   right: 16px;
   top: 50%;
   transform: translateY(-50%);
   transition: all .3s ease;
   background-image: url(../img/icon-right-arrow_bl.svg);
}

.btn svg {
   margin-right: 8px;
}

.btn-attention {
   color: #767676;
   font-size: 10px;
   margin-top: 8px;
}

@media (hover: hover) {
   .main-btn:hover {
      background-color: #faf6f3;
      border: 1px solid var(--pink-main);
      color: var(--pink-main);
      opacity: 1;
   }

   .main-btn:hover span::after {
      background-image: url(../img/icon-right-arrow_pi.svg);
   }

   .btn:hover {
      opacity: 1;
      position: relative;
   }

   .btn:hover::after {
      transform: translate(4px, -50%);
   }

   .btn-pink:hover {
      border-bottom: 1px solid var(--pink-main);
      color: var(--pink-main);
   }

   .btn-blue:hover {
      border-bottom: 1px solid var(--blue-sub);
      color: var(--blue-sub);
   }
}

@media only screen and (max-width: 1440px) {
   .main-btn {
      font-size: 1.66vw;
      height: 4.58vw;
      padding: 0 2.63vw 0 0;
   }

   .main-btn span::after {
      width: 1.11vw;
      height: .69vw;
      right: -1.66vw;
   }

   .btn {
      font-size: 1.38vw;
      height: 3.61vw;
   }

   .btn::after {
      width: 1.11vw;
      height: .69vw;
      right: 1.11vw;
   }

   .btn svg {
      margin-right: .55vw;
   }
}

@media only screen and (max-width: 760px) {
   .main-btn {
      font-size: 3.73vw;
      height: 10.66vw;
      padding: 0 6.4vw 0 0;
   }

   .main-btn span::after {
      width: 3.2vw;
      height: 2.13vw;
      right: -5.33vw;
   }

   .btn {
      border-bottom: .5px solid var(--black-main);
      font-size: 3.73vw;
      height: 8.53vw;
      margin-top: 2.13vw;
   }

   .btn::after {
      width: 2.66vw;
      height: 1.6vw;
      right: 1.6vw;
   }

   .btn svg {
      height: 3.73vw;
      margin-right: 2.13vw;
      width: 3.73vw;
   }
}


footer {
   background-color: var(--pink-main);
   color: #fff;
   line-height: 1;
   padding: 236px 0 64px;
}

.footer-inner {
   display: flex;
   justify-content: space-between;
}

.footer-salon-name {
   font-size: 24px;
   letter-spacing: .08em;
   margin-bottom: 32px;
   text-transform: uppercase;
}

.footer-company-name {
   font-size: 16px;
   margin-bottom: 8px;
}

.footer-address {
   font-size: 14px;
}

.footer-copyright {
   font-size: 12px;
   margin-top: 32px;
}

.footer-inner-link {
   color: #fff;
}

.footer-inner-list {
   display: flex;
   gap: 40px;
}

@media only screen and (max-width: 1440px) {
   footer {
      padding: 16.38vw 0 4.44vw;
   }

   .footer-salon-name {
      font-size: 1.66vw;
      margin-bottom: 2.22vw;
   }

   .footer-company-name {
      font-size: 1.11vw;
      margin-bottom: .55vw;
   }

   .footer-address {
      font-size: .97vw;
   }

   .footer-copyright {
      font-size: .83vw;
      margin-top: 2.22vw;
   }

   .footer-inner-list {
      gap: 2.77vw;
   }
}

@media only screen and (max-width: 760px) {
   footer {
      padding: 21.33vw 0 10.66vw;
   }

   .footer-inner-left {
      text-align: center;
   }

   .footer-inner {
      flex-direction: column-reverse;
      gap: 16vw;
   }

   .footer-salon-name {
      font-size: 4.26vw;
      margin-bottom: 2.13vw;
   }

   .footer-company-name {
      font-size: 3.2vw;
      margin-bottom: 4.26vw;
   }

   .footer-address {
      font-size: 3.2vw;
      line-height: 1.4;
   }

   .footer-copyright {
      font-size: 2.66vw;
      margin-top: 3.2vw;
   }

   .footer-inner-list {
      font-size: 4.26vw;
      flex-wrap: wrap;
      flex-direction: column;
      gap: 5.33vw;
      text-align: center;
   }
}

.floatingBanner {
   position: fixed;
   bottom: 24px;
   right: 24px;
   z-index: 50;
   height: auto;
   width: 380px;
}

.floatingBanner img {
   box-shadow: 0 0 14px 0 rgba(0, 0, 0, .2);
   height: auto;
   transition: all .3s ease;
   width: 100%;
}


.float-banner-close {
   background-color: #949494;
   border-radius: 50px;
   height: 30px;
   position: absolute;
   right: -13px;
   top: -13px;
   width: 30px;
}

.float-banner-close span {
   background-color: #fff;
   display: block;
   height: 1px;
   transform: translateX(7.5px) translateY(14.5px) rotate(45deg);
   width: 15px;
}

.float-banner-close span:last-child {
   transform: translateX(7.5px) translateY(13.5px) rotate(-45deg);
}

@media (hover: hover) {
   .floatingBanner a:hover {
      opacity: 1;
   }

   .floatingBanner a:hover img {
      box-shadow: 0 0 7px 0 rgba(0, 0, 0, .2);
   }
}

@media only screen and (max-width: 1440px) {
   .floatingBanner {
      bottom: 1.66vw;
      right: 1.66vw;
      width: 26.38vw;
   }

   .float-banner-close {
      height: 2.08vw;
      right: -.90vw;
      top: -.90vw;
      width: 2.08vw;
   }

   .float-banner-close span {
      transform: translateX(.52vw) translateY(1.006vw) rotate(45deg);
      width: 1.04vw;
   }

   .float-banner-close span:last-child {
      transform: translateX(.52vw) translateY(.93vw) rotate(-45deg);
   }
}

@media only screen and (max-width: 760px) {
   .floatingBanner {
      bottom: 20px;
      right: 5%;
      width: 90%;
   }

   .float-banner-close {
      height: 32px;
      right: -12px;
      top: -12px;
      width: 32px;
   }

   .float-banner-close span {
      transform: translateX(8px) translateY(15.5px) rotate(45deg);
      width: 16px;
   }

   .float-banner-close span:last-child {
      transform: translateX(8px) translateY(14.5px) rotate(-45deg);
   }
}

/*********************
 RESPONSIVE
 *********************/
@media only screen and (min-width: 760px) {
   .sp_only {
      display: none !important;
   }
}

@media only screen and (max-width: 760px) {
   .pc_only {
      display: none !important;
   }
}