@charset "UTF-8";
/*
* main.css
*
*/
/* ------------------------
  Base Settings
------------------------ */
.un_mainContents {
  background-color: var(--color-white);
  word-break: normal;
  color: var(--color-black);
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.6;

  --font-family: "Noto Sans JP", sans-serif;
  --font-family-en: "Roboto", sans-serif;
  --color-white: #fff;
  --color-black: #2b2b2b;
  --color-blue: #bee0f9;
  --color-light-blue: #e5f1ff;
  --color-dark-blue: #a2d4f8;
  --color-yellow: #f6efc8;
  --color-light-yellow: #f9f1db;
  --color-dark-yellow: #f2e69a;
  --color-gray: #e7e7e7;
  --color-light-gray: #f5f5f5;
  --color-dark-gray: #949494;
  --color-beige: #eee2e0;
  --z-index-loading: 50;
  --z-index-dialog: 40;
  --z-index-container: 30;
  --z-index-header: 20;
  --z-index-base: 1;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: anywhere;
  overscroll-behavior: none;
}
.un_mainContents.is-splash-loading {
  overflow: hidden;
}

:where(.un_mainContents) a,
:where(.un_mainContents) button {
  text-decoration: none;
  color: var(--color-black);
}
:where(.un_mainContents) a:visited,
:where(.un_mainContents) button:visited {
  color: var(--color-black);
}
:where(.un_mainContents) a:hover,
:where(.un_mainContents) button:hover {
  text-decoration: none;
  color: var(--color-black);
}
:where(.un_mainContents) a:active,
:where(.un_mainContents) button:active {
  text-decoration: none;
  color: var(--color-black);
}
:where(.un_mainContents) a[href^="tel:"]:hover,
:where(.un_mainContents) button[href^="tel:"]:hover {
  color: var(--color-black);
}
@media (min-width: 768px) {
  :where(.un_mainContents) a[href^="tel:"],
  :where(.un_mainContents) button[href^="tel:"] {
    cursor: text;
    text-decoration: none;
  }
}

:where(.un_mainContents) button {
  background: none;
}

:where(.un_mainContents) details {
  display: block;
}

:where(.un_mainContents) summary {
  display: block;
  list-style: none;
}

:where(.un_mainContents) summary::-webkit-details-marker {
  display: none;
}

:where(.un_mainContents) sup {
  top: -0.5em;
}

:where(.un_mainContents) sub {
  bottom: -0.25em;
}

/* コンポーネント */
.ly_mainHeader {
  overflow: clip;
  z-index: var(--z-index-header);
  left: 0;
  background-color: #f6f5f5;

  --_ease-change: cubic-bezier(0.39, 0.575, 0.565, 1);
}
@media (max-width: 767.98px) {
  .ly_mainHeader {
    display: none;
  }
}
.ly_mainHeader__left {
  grid-area: left;
}
.ly_mainHeader__right {
  grid-area: right;
}

.ly_mainHeader_cont {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: sticky;
  top: 180px;
  width: 100%;
  height: calc(100lvh - 70px);
}
.ly_mainHeader_cont::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -6.875rem;
  left: 0;
  width: 100%;
  height: calc(100% + 6.875rem);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}

.ly_mainHeader_cont__left {
  left: 0;

  padding-block-end: 7.375rem;
}
.ly_mainHeader_cont__left::before {
  background-image: url(../img/header_bg_left.png);
}

.ly_mainHeader_cont__right {
  right: 0;

  padding-block-end: 8.125rem;
}
.ly_mainHeader_cont__right::before {
  background-image: url(../img/header_bg_right.png);
}

@media screen and (max-height: 500px) {
  .ly_mainHeader_cont__left .ly_mainHeader_inner {
    display: none;
  }
}
@media screen and (max-height: 620px) {
  .ly_mainHeader_cont__right .ly_mainHeader_inner {
    display: none;
  }
}

.ly_mainHeader_ttl {
  width: 13.125rem;

  margin-inline: auto;
}
.ly_mainHeader_ttl img {
  width: 100%;
}

.ly_mainHeader_btnWrapper {
  display: flex;
  flex-direction: column;
  width: 18.125rem;

  gap: 1.5625rem;
  padding-block-start: 2.5rem;
}

.ly_mainHeader_anchor_ttl {
  letter-spacing: 0.02em;
  font-family: var(--font-family-en);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1;
}

.ly_mainHeader_anchor_list {
  display: flex;
  flex-direction: column;
  border-top: dotted 0.125rem var(--color-black);
  border-bottom: dotted 0.125rem var(--color-black);

  gap: 1.4375rem;
  margin-block-start: 1.125rem;
  padding-block: 1.875rem 1.875rem;
}

.ly_mainHeader_anchor_item {
  display: block;
  width: 100%;
  transition: opacity 0.3s var(--_ease-change);
  letter-spacing: 0.05em;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
}
@media (hover: hover) and (pointer: fine) {
  .ly_mainHeader_anchor_item:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.6;
    -moz-transition: opacity 0.45s var(--_ease-change);
    transition: opacity 0.45s var(--_ease-change);
  }
  .ly_mainHeader_anchor_item:where(:any-link, :enabled, summary):hover {
    opacity: 0.6;
    transition: opacity 0.45s var(--_ease-change);
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .ly_mainHeader_anchor_item.is-touched {
    opacity: 0.6;
    transition: opacity 0.45s var(--_ease-change);
  }
}
.ly_mainHeader_anchor_item.is-current {
  opacity: 0.6;
  transition: opacity 0.45s var(--_ease-change);
}

.ly_mainHeader_sns {
  display: flex;
  align-items: center;

  padding-block-start: 2.5rem;
  gap: 1.6875rem;
}

.ly_mainHeader_sns_ttl {
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-family-en);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}

.ly_mainHeader_sns_list {
  display: flex;
  align-items: center;

  gap: 1.25rem;
}

.ly_mainHeader_sns_icon {
  display: block;
  transition: opacity 0.3s var(--_ease-change);
}
.ly_mainHeader_sns_icon__instagram {
  width: 1.5rem;
}
.ly_mainHeader_sns_icon__line {
  width: 1.5rem;
}
.ly_mainHeader_sns_icon__x {
  width: 1.375rem;
}
.ly_mainHeader_sns_icon__youtube {
  width: 1.625rem;
}
.ly_mainHeader_sns_icon > img {
  display: block;

  margin-block: auto;
}
@media (hover: hover) and (pointer: fine) {
  .ly_mainHeader_sns_icon:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.6;
    -moz-transition: opacity 0.45s var(--_ease-change);
    transition: opacity 0.45s var(--_ease-change);
  }
  .ly_mainHeader_sns_icon:where(:any-link, :enabled, summary):hover {
    opacity: 0.6;
    transition: opacity 0.45s var(--_ease-change);
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .ly_mainHeader_sns_icon.is-touched {
    opacity: 0.6;
    transition: opacity 0.45s var(--_ease-change);
  }
}

.ly_mainArea {
  overflow-x: clip;
  position: relative;
  z-index: var(--z-index-container);
  width: 100%;
}
@media (min-width: 768px) {
  .ly_mainArea {
    overflow-y: clip;
    max-width: 26.25rem;
    box-shadow: 0.625rem 0 0.625rem -0.625rem color-mix(in srgb, var(--color-black) 10%, transparent), -0.625rem 0 0.625rem -0.625rem color-mix(in srgb, var(--color-black) 10%, transparent);

    margin-inline: auto;
    grid-area: content;
  }
}

.ly_inner {
  position: relative;
  max-width: 37.5rem;

  padding-inline: 2.1875rem;
  margin-inline: auto;
}

.ly_inner__sm {
  padding-inline: 2.5rem;
}

/* --------------------------------
  btn
-------------------------------- */
.el_btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9375rem 0.9375rem 0.875rem;
  border-top-left-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
  width: 100%;
  max-width: 33.125rem;
  transition: background-color 0.3s var(--_ease-change);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;

  --_ease-change: cubic-bezier(0.39, 0.575, 0.565, 1);
  --_ease-animate: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --_animation-name: arw-clip;
  margin-inline: auto;
}
@media (hover: hover) and (pointer: fine) {
  .el_btn:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 1;
    -moz-transition: background-color 0.45s var(--_ease-change);
    transition: background-color 0.45s var(--_ease-change);
  }
  .el_btn:where(:any-link, :enabled, summary):hover {
    opacity: 1;
    transition: background-color 0.45s var(--_ease-change);
  }
  .el_btn:where(:-moz-any-link, :enabled, summary):hover::after {
    animation: var(--_animation-name) 0.6s var(--_ease-animate) forwards;
  }
  .el_btn:where(:any-link, :enabled, summary):hover::after {
    animation: var(--_animation-name) 0.6s var(--_ease-animate) forwards;
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .el_btn.is-touched {
    opacity: 1;
    transition: background-color 0.45s var(--_ease-change);
  }
  .el_btn.is-touched::after {
    animation: var(--_animation-name) 0.6s var(--_ease-animate) forwards;
  }
}
.el_btn::after {
  content: "";
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.el_btn__yellow {
  background-color: var(--color-yellow);
}
@media (hover: hover) and (pointer: fine) {
  .el_btn__yellow:where(:-moz-any-link, :enabled, summary):hover {
    background-color: var(--color-dark-yellow);
  }
  .el_btn__yellow:where(:any-link, :enabled, summary):hover {
    background-color: var(--color-dark-yellow);
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .el_btn__yellow.is-touched {
    background-color: var(--color-dark-yellow);
  }
}
.el_btn__blue {
  background-color: var(--color-blue);
}
@media (hover: hover) and (pointer: fine) {
  .el_btn__blue:where(:-moz-any-link, :enabled, summary):hover {
    background-color: var(--color-dark-blue);
  }
  .el_btn__blue:where(:any-link, :enabled, summary):hover {
    background-color: var(--color-dark-blue);
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .el_btn__blue.is-touched {
    background-color: var(--color-dark-blue);
  }
}
.el_btn__arw::after {
  width: 0.9375rem;
  height: 0.375rem;
  background-image: url("../img/icon_arw.svg");

  --_animation-name: arw-clip;
}
.el_btn__arw-reverse::after {
  transform: rotate(180deg);
}
.el_btn__blank::after {
  width: 0.6875rem;
  height: 0.75rem;
  background-image: url("../img/icon_blank.svg");

  --_animation-name: blank-clip;
}
@keyframes arw-clip {
  0% {
    clip-path: inset(0 50% 0 50%);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes blank-clip {
  0% {
    clip-path: inset(100% 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

/* --------------------------------
  stylist card
-------------------------------- */
.bl_stylist_cardWrapper {
  padding-block-start: 2.5rem;
}

.bl_stylist_card {
  padding: 1.8125rem 2.1875rem 3.125rem;
}
.bl_stylist_card:nth-child(2n) {
  background-color: var(--color-white);
}
.bl_stylist_card:nth-child(2n+1) {
  background-color: var(--color-light-gray);
}

#stylist-accordion-panel.is-even .bl_stylist_card:nth-child(2n) {
  background-color: var(--color-light-gray);
}
#stylist-accordion-panel.is-even .bl_stylist_card:nth-child(2n+1) {
  background-color: var(--color-white);
}

.bl_stylist_card_inner {
  max-width: 33.125rem;

  margin-inline: auto;
}

.bl_stylist_card_heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  border-bottom: dotted 0.125rem var(--color-black);

  padding-block-end: 1rem;
  padding-inline-start: 0.125rem;
}

.bl_stylist_card_name {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

.bl_stylist_card_shop {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
}

.bl_stylist_card_place {
  display: inline-block;
  padding: 0rem 0.5rem;
  border-radius: 62.4375rem;
  background-color: #e1e1e1;
  font-size: 0.75rem;
  line-height: 1.5;

  margin-block-start: 0.125rem;
}

.bl_stylist_card_sns {
  display: flex;
  align-items: center;
  padding-bottom: 0.125rem;

  --_ease-change: cubic-bezier(0.39, 0.575, 0.565, 1);
  gap: 0.5625rem;
}

.bl_stylist_card_sns_staffBoard {
  width: 5.1875rem;
  height: 1.5625rem;
  transition: opacity 0.3s var(--_ease-change);
}
.bl_stylist_card_sns_staffBoard img {
  width: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .bl_stylist_card_sns_staffBoard:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.7;
    -moz-transition: opacity 0.45s var(--_ease-change);
    transition: opacity 0.45s var(--_ease-change);
  }
  .bl_stylist_card_sns_staffBoard:where(:any-link, :enabled, summary):hover {
    opacity: 0.7;
    transition: opacity 0.45s var(--_ease-change);
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .bl_stylist_card_sns_staffBoard.is-touched {
    opacity: 0.7;
    transition: opacity 0.45s var(--_ease-change);
  }
}

.bl_stylist_card_sns_instagram {
  width: 1.5625rem;
  height: 1.5625rem;
  transition: background-color 0.3s var(--_ease-change);
  background-color: #949494;

  -webkit-mask-image: url("../img/icon_instagram.svg");

          mask-image: url("../img/icon_instagram.svg");
}
@media (hover: hover) and (pointer: fine) {
  .bl_stylist_card_sns_instagram:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 1;
    -moz-transition: background-color 0.45s var(--_ease-change);
    transition: background-color 0.45s var(--_ease-change);
    background-color: #6d6d6d;
  }
  .bl_stylist_card_sns_instagram:where(:any-link, :enabled, summary):hover {
    opacity: 1;
    transition: background-color 0.45s var(--_ease-change);
    background-color: #6d6d6d;
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .bl_stylist_card_sns_instagram.is-touched {
    opacity: 1;
    transition: background-color 0.45s var(--_ease-change);
    background-color: #6d6d6d;
  }
}
.bl_stylist_card_sns_instagram:focus-visible {
  opacity: 1;
  transition: background-color 0.45s var(--_ease-change);
  background-color: #6d6d6d;
}

.bl_stylist_card_body {
  display: grid;

  grid-template-columns: 8.0625rem 1fr;
  gap: 0.9375rem;
  padding-block-start: 1.8125rem;
}

.bl_stylist_card_img img {
  width: 100%;
}

.bl_stylist_card_txtBox > p,
.bl_stylist_card_txtBox > a {
  display: block;
}
.bl_stylist_card_txtBox > p:not(:first-child),
.bl_stylist_card_txtBox > a:not(:first-child) {
  padding-block-start: 0.875rem;
}

.bl_stylist_card_hashtag {
  color: #5ea1d1;
  font-size: 0.75rem;
  line-height: 1.4;
}

.bl_stylist_card_btnWrapper {
  margin-block-start: 1.875rem;
}

/* --------------------------------
  accordion
-------------------------------- */
.bl_accordion_panel {
  display: grid;

  grid-template-rows: 0fr;
  will-change: grid-template-rows;
}

.bl_accordion_inner {
  overflow: hidden;
}

.bl_accordion_btn {
  display: block;
  position: relative;
  padding: 0.5rem 1.75rem 0.5rem 0.9375rem;
  border: solid 0.0625rem var(--color-black);
  border-top-left-radius: 0.625rem;
  border-bottom-right-radius: 0.625rem;
  width: 100%;
  max-width: 33.125rem;
  transition: opacity 0.3s var(--_ease-change);
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.8;

  --_ease-change: cubic-bezier(0.39, 0.575, 0.565, 1);
  --_ease-animate: cubic-bezier(0.075, 0.82, 0.165, 1);
  --_animation-name: plus-clip;
  margin-inline: auto;
}
@media (hover: hover) and (pointer: fine) {
  .bl_accordion_btn:where(:-moz-any-link, :enabled, summary):hover {
    opacity: 0.6;
    -moz-transition: opacity 0.45s var(--_ease-change);
    transition: opacity 0.45s var(--_ease-change);
  }
  .bl_accordion_btn:where(:any-link, :enabled, summary):hover {
    opacity: 0.6;
    transition: opacity 0.45s var(--_ease-change);
  }
}
@media (hover: none) and (any-pointer: coarse) {
  .bl_accordion_btn.is-touched {
    opacity: 0.6;
    transition: opacity 0.45s var(--_ease-change);
  }
}
.bl_accordion_btn::before,
.bl_accordion_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.9375rem;
  width: 0.625rem;
  height: 0.0625rem;
  transform-origin: center;
  background-color: var(--color-black);

  translate: 0 -50%;
}
.bl_accordion_btn::after {
  transition: scale 0.6s var(--_ease-animate);

  rotate: 90deg;
}
.bl_accordion_btn[aria-expanded=true]::after {
  scale: 0 1;
}

.bl_stylist_accordion_btnWrapper {
  padding: 1.8125rem 3.75rem 1.875rem;
  border-top: solid 0.0625rem var(--color-black);
  border-bottom: solid 0.0625rem var(--color-black);
  background-color: var(--color-light-gray);
}
.bl_stylist_accordion_btnWrapper .bl_accordion_btn {
  max-width: 30rem;
}

[data-kv-img] {
  opacity: 0;

  scale: 1.2;
}
[data-kv-img]:nth-child(1) {
  transform: translate(-10%, -5%) rotate(-10deg);
}
[data-kv-img]:nth-child(2) {
  transform: translate(5%, -3%) rotate(10deg);
}
[data-kv-img]:nth-child(3) {
  transform: translate(0, 15%) rotate(6deg);
}
[data-kv-img]:nth-child(4) {
  transform: translate(15%, 15%) rotate(-18deg);
}
[data-kv-img]:nth-child(5) {
  transform: translate(-10%, -15%) rotate(20deg);
}
[data-kv-img]:nth-child(6) {
  transform: translate(-10%, -5%) rotate(5deg);
}
[data-kv-img]:nth-child(7) {
  transform: translate(3%, 5%) rotate(-5deg);
}
[data-kv-img]:nth-child(8) {
  transform: translate(-15%, 12%) rotate(-15deg);
}
[data-kv-img]:nth-child(9) {
  transform: translate(10%, -12%) rotate(15deg);
}

[data-kv-txt] {
  opacity: 0;

  clip-path: inset(0 100% 0 0);
}

[data-slide-in],
[data-slide-in-item] {
  opacity: 0;

  translate: 0 0.625rem;
}

[data-ttl-anim] {
  opacity: 0;
}

[data-ttl-anim-line] {
  scale: 0 1;
}

[data-fade-in] {
  opacity: 0;
}

.el_txt__medium {
  font-weight: 500;
}

.el_txt__gray {
  color: var(--color-dark-gray);
}

.el_txt__white {
  color: var(--color-white);
}

.el_txt__en {
  font-family: var(--font-family-en);
}

/* ------------------------
  utilities Classes
------------------------ */
.u-hidden {
  display: none !important;
  visibility: hidden;
}

@media (max-width: 767.98px) {
  .u-hidden-sm {
    display: none !important;
    visibility: hidden;
  }
}

.u-hidden-up-sm {
  display: none !important;
  visibility: hidden;
}

@media (max-width: 767.98px) {
  .u-hidden-down-sm {
    display: none !important;
    visibility: hidden;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .u-hidden-md {
    display: none !important;
    visibility: hidden;
  }
}

@media (min-width: 768px) {
  .u-hidden-up-md {
    display: none !important;
    visibility: hidden;
  }
}

@media (max-width: 1023.98px) {
  .u-hidden-down-md {
    display: none !important;
    visibility: hidden;
  }
}

@media (min-width: 1024px) {
  .u-hidden-lg {
    display: none !important;
    visibility: hidden;
  }
}

@media (min-width: 1024px) {
  .u-hidden-up-lg {
    display: none !important;
    visibility: hidden;
  }
}

.u-hidden-down-lg {
  display: none !important;
  visibility: hidden;
}

.u-visuallyhidden {
  overflow: hidden;
  clip: rect(0 0 0 0);
  position: absolute;
  margin: -1px;
  padding: 0;
  border: 0;
  width: 1px;
  height: 1px;
}

.u-visuallyhidden.focusable:active,
.u-visuallyhidden.focusable:focus {
  overflow: visible;
  clip: auto;
  position: static;
  margin: 0;
  width: auto;
  height: auto;
}

.u-invisible {
  visibility: hidden;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

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

.hp_txt-right {
  text-align: right;
}

.hp_ls0 {
  letter-spacing: 0;
}

.hp_ls3 {
  letter-spacing: 0.03em;
}

.hp_ls5 {
  letter-spacing: 0.05em;
}

.hp_ls10 {
  letter-spacing: 0.1em;
}

.hp_lh15 {
  line-height: 1.5;
}

.hp_lh18 {
  line-height: 1.8;
}

.hp_lh20 {
  line-height: 2;
}