/* =========================
   Reset
========================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: #403a35;
  background-color: #f4efe8;
  font-family: "Noto Sans JP", sans-serif;
}

img {
  max-width: 100%;
  display: block;
}

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

p,
h1,
h2,
h3 {
  margin-top: 0;
}


/* =========================
   Header
========================= */

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;

  width: 100%;
  height: 64px;
  padding: 0 30px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: transparent;
}
.header-logo {
  flex-shrink: 0;
}

.header-logo img {
  width: 82px;
  height: auto;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 5px;
}

.reserve-btn {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #4e4741;
}

.reserve-btn span {
  display: none;
}

.reserve-icon {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hamburger {
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  background: transparent;
  cursor: pointer;
}

.hamburger span {
  width: 23px;
  height: 1px;
  display: block;
  background-color: #4e4741;
}


/* =========================
   右側の固定画像
========================= */

.side-image {
  position: sticky;
  top: 0;

  width: 12%;
  height: 100svh;
  flex-shrink: 0;

  overflow: hidden;
  background-color: #e7ddd2;
}

.side-image img {
  width: 100%;
  height: 100%;
  display: block;

    object-fit: cover;
  object-position: center;
}

/* =========================
   左側のページ本体
========================= */

.page-content {
  width: 100%;
  min-height: auto;
  background-color: #f8f5f0;
}



/* =========================
   FVより下の2カラム
========================= */

.after-fv {
  position: relative;

  display: flex;
  align-items: flex-start;

  width: 100%;
  background-color: #f8f5f0;
}

/* 左側のコンテンツ */
.after-fv__content {
  width: 88%;
  min-width: 0;

  background-color: #f8f5f0;
  box-shadow: 10px 0 30px rgba(75, 60, 45, 0.08);
}

/* =========================
   FV
========================= */

.FV {
  position: relative;
  width: 100%;
  height: calc(100svh - 64px);
  min-height: 580px;
  overflow: hidden;
}

.FV .fvimg {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: 70% center;
}

/* ロゴ */
.FV .fvlogo {
  position: absolute;
  top: 48%;
  left: 50%;
  z-index: 3;

  width: 180px;
  height: auto;

  transform: translate(-50%, -50%);
}

/* ロゴの上のメニュー */
.FV-button {
  position: absolute;
  top: 27%;
  left: 50%;
  z-index: 3;

  width: 75%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;

  transform: translateX(-50%);
}

.FV-button a {
  position: relative;
  padding-top: 13px;

  color: #4D4B47;
  font-size: 0.58rem;
  font-family: serif;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 文字の上の横棒 */
.FV-button a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;

  width: 24px;
  height: 1px;

  background-color: currentColor;
  transform: translateX(-50%);
}


/* =========================
   共通タイトル
========================= */

.section-title {
  margin-bottom: 45px;
}

.section-title > span,
.section-title > p,
.concept-en {
  margin-bottom: 8px;

  color: #9b8e80;
  font-family: serif;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
}

.section-title h2 {
  margin-bottom: 0;

  font-family: serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 0.05em;
}


/* =========================
   Menu
========================= */

.menu {
  padding: 90px 22px;
  background-color: #f8f5f0;
}

.menu-inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.menu-list {
  border-top: 1px solid #cfc5ba;
}

.menu-item {
  min-height: 64px;
  padding: 0 4px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid #d8cfc5;
}

.menu-item p,
.menu-item span {
  margin: 0;
}

.menu-item p {
  font-family: serif;
  font-size: 0.93rem;
  letter-spacing: 0.08em;
}

.menu-item span {
  color: #756b62;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}


/* =========================
   Concept
========================= */

.concept {
  padding: 105px 22px;

  background-color: #d8cec2;
}

.concept-inner {
  max-width: 650px;
  margin: 0 auto;
}

.concept h2 {
  margin-bottom: 34px;

  font-family: serif;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.06em;
}

.concept-text {
  margin-bottom: 0;

  font-size: 0.82rem;
  line-height: 2.25;
  letter-spacing: 0.04em;
}


/* =========================
   Access
========================= */

.access {
  padding: 90px 22px;
  background-color: #f8f5f0;
}

.access-inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

.access-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.access-info h3 {
  margin-bottom: 27px;

  font-family: serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.13em;
}

.access-info p {
  margin-bottom: 23px;

  color: #615951;
  font-size: 0.82rem;
  line-height: 2;
}

.access-tel {
  display: inline-block;
  padding-bottom: 5px;

  font-family: serif;
  font-size: 0.95rem;
  letter-spacing: 0.08em;

  border-bottom: 1px solid #766d64;
}

.access-map {
  width: 100%;
  height: 340px;
  overflow: hidden;
}

.access-map iframe {
  width: 100%;
  height: 100%;
  display: block;

  filter: grayscale(35%) sepia(8%);
}


/* =========================
   Footer
========================= */
.footer {
  position: relative;
  z-index: 10;

  width: 100%;
  padding: 64px 18px 24px;

  text-align: center;
  background-color: #cec2b5;
}

.footer-logo {
  width: 110px;
  height: auto;
  margin: 0 auto 38px;
}

/* ロゴ下のリンク */
.footer-nav {
  width: 100%;
  margin: 0 auto 54px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}

.footer-nav a {
  position: relative;
  flex: 1;

  padding-top: 13px;

  font-family: serif;
  font-size: clamp(0.52rem, 2.2vw, 0.65rem);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* 文字の上の横棒 */
.footer-nav a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;

  width: 23px;
  height: 1px;

  background-color: currentColor;
  transform: translateX(-50%);
}

.copyright {
  margin-bottom: 0;

  color: #71675e;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
}

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}

.fade-up.is-show {
  opacity: 1;
  transform: translateY(0);
}

.FV-button.fade-up {
  transition-delay: 0.2s;
}

.fvlogo.fade-up {
  transition-delay: 0.45s;
}


/* =========================
   Stylist Page
========================= */

.stylist-fv {
  min-height: 410px;
  padding: 135px 24px 70px;

  display: flex;
  align-items: flex-end;

  background-color: #d8cec2;
}

.stylist-fv__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.stylist-fv__en {
  margin-bottom: 15px;

  color: #887b6e;
  font-family: serif;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
}

.stylist-fv h1 {
  margin-bottom: 0;

  font-family: serif;
  font-size: clamp(1.7rem, 7vw, 2.45rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.06em;
}


/* =========================
   Stylist List
========================= */

.stylist {
  padding: 90px 22px 110px;
  background-color: #f8f5f0;
}

.stylist-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.stylist-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 85px;
}

.stylist-card {
  width: 100%;
}

.stylist-card__image {
  width: 100%;
  aspect-ratio: 4 / 5;

  overflow: hidden;
  background-color: #e8e1d9;
}

.stylist-card__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center top;

  transition: transform 0.8s ease;
}

.stylist-card:hover .stylist-card__image img {
  transform: scale(1.025);
}

.stylist-card__content {
  padding-top: 27px;
}

.stylist-card__heading {
  padding-bottom: 23px;
  margin-bottom: 23px;

  border-bottom: 1px solid #d5cbc0;
}

.stylist-career {
  margin-bottom: 9px;

  color: #938679;
  font-family: serif;
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.stylist-card h2 {
  margin-bottom: 7px;

  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: 0.09em;
}

.stylist-position {
  margin-bottom: 0;

  color: #756b62;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.stylist-message {
  margin-bottom: 0;

  color: #625a53;
  font-size: 0.82rem;
  line-height: 2.1;
  letter-spacing: 0.04em;
}


/* =========================
   Stylist Reservation
========================= */

.stylist-entry {
  padding: 100px 22px;

  text-align: center;
  background-color: #d8cec2;
}

.stylist-entry__inner {
  max-width: 650px;
  margin: 0 auto;
}

.stylist-entry__inner > p {
  margin-bottom: 18px;

  color: #887b6e;
  font-family: serif;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
}

.stylist-entry h2 {
  margin-bottom: 42px;

  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.06em;
}

.stylist-entry__button {
  min-width: 230px;
  min-height: 58px;
  padding: 0 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #554d46;

  font-family: serif;
  font-size: 0.72rem;
  letter-spacing: 0.18em;

  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}

.stylist-entry__button:hover {
  color: #fff;
  background-color: #554d46;
}


/* =========================
   Recruit Page
========================= */

.section-en {
  margin-bottom: 12px;

  color: #938679;
  font-family: serif;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
}


/* =========================
   Recruit FV
========================= */

.recruit-fv {
  min-height: 430px;
  padding: 140px 24px 70px;

  display: flex;
  align-items: flex-end;

  background-color: #d8cec2;
}

.recruit-fv__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.recruit-fv__en {
  margin-bottom: 16px;

  color: #887b6e;
  font-family: serif;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
}

.recruit-fv__title {
  margin-bottom: 0;

  font-family: serif;
  font-size: clamp(1.8rem, 7vw, 2.5rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.06em;
}


/* =========================
   Recruit Message
========================= */

.recruit-message {
  padding: 90px 22px 110px;
  background-color: #f8f5f0;
}

.recruit-message__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.recruit-message__image {
  width: 100%;
  aspect-ratio: 4 / 5;

  overflow: hidden;
  background-color: #e7dfd6;
}

.recruit-message__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.recruit-message__content {
  padding-top: 42px;
}

.recruit-message__title {
  margin-bottom: 32px;

  font-family: serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.05em;
}

.recruit-message__text {
  margin-bottom: 0;

  color: #625a53;
  font-size: 0.82rem;
  line-height: 2.2;
  letter-spacing: 0.03em;
}


/* =========================
   Recruit Feature
========================= */

.recruit-feature {
  padding: 100px 22px;
  background-color: #d8cec2;
}

.recruit-feature__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.recruit-feature__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 55px;
}

.recruit-feature__item {
  padding-top: 25px;
  border-top: 1px solid #b9ad9f;
}

.recruit-feature__number {
  display: block;
  margin-bottom: 28px;

  color: #938679;
  font-family: serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
}

.recruit-feature__item h3 {
  margin-bottom: 18px;

  font-family: serif;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.recruit-feature__item p {
  margin-bottom: 0;

  color: #625a53;
  font-size: 0.82rem;
  line-height: 2;
}


/* =========================
   Recruit Information
========================= */

.recruit-info {
  padding: 100px 22px;
  background-color: #f8f5f0;
}

.recruit-info__inner {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.recruit-info__list {
  margin: 0;

  border-top: 1px solid #d3c9be;
}

.recruit-info__item {
  padding: 24px 0;

  display: grid;
  grid-template-columns: 95px minmax(0, 1fr);
  gap: 18px;

  border-bottom: 1px solid #d3c9be;
}

.recruit-info__item dt {
  color: #83776c;
  font-size: 0.76rem;
  line-height: 1.8;
}

.recruit-info__item dd {
  margin: 0;

  color: #514a44;
  font-size: 0.8rem;
  line-height: 1.8;
}


/* =========================
   Recruit Entry
========================= */

.recruit-entry {
  padding: 110px 22px;

  text-align: center;
  background-color: #cfc3b5;
}

.recruit-entry__inner {
  max-width: 650px;
  margin: 0 auto;
}

.recruit-entry__title {
  margin-bottom: 27px;

  font-family: serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.06em;
}

.recruit-entry__text {
  margin-bottom: 40px;

  color: #625a53;
  font-size: 0.8rem;
  line-height: 2;
}

.recruit-entry__button {
  min-width: 230px;
  min-height: 58px;
  padding: 0 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #554d46;

  font-family: serif;
  font-size: 0.75rem;
  letter-spacing: 0.16em;

  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}

.recruit-entry__button:hover {
  color: #fff;
  background-color: #554d46;
}


/* =========================
   Hair Design Page
========================= */

/* 下層FV */
.hairdesign-fv {
  min-height: 420px;
  padding: 140px 24px 70px;

  display: flex;
  align-items: flex-end;

  background-color: #d8cec2;
}

.hairdesign-fv__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.hairdesign-fv__en {
  margin-bottom: 16px;

  color: #887b6e;
  font-family: serif;
  font-size: 0.72rem;
  letter-spacing: 0.28em;
}

.hairdesign-fv h1 {
  margin-bottom: 0;

  font-family: serif;
  font-size: clamp(1.8rem, 7vw, 2.5rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.06em;
}


/* =========================
   Hair Design List
========================= */

.hairdesign {
  padding: 95px 22px 120px;

  background-color: #f8f5f0;
}

.hairdesign-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.hairdesign-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 90px;
}

.hairdesign-card {
  width: 100%;
}

.hairdesign-card__image {
  width: 100%;
  aspect-ratio: 4 / 5;

  overflow: hidden;
  background-color: #e7dfd6;
}

.hairdesign-card__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition: transform 0.8s ease;
}

.hairdesign-card:hover .hairdesign-card__image img {
  transform: scale(1.025);
}

.hairdesign-card__content {
  padding-top: 25px;
}

.hairdesign-card__number {
  margin-bottom: 8px;

  color: #938679;
  font-family: serif;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
}

.hairdesign-card h2 {
  margin-bottom: 10px;

  font-family: serif;
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.hairdesign-card__menu {
  margin-bottom: 0;

  color: #746a61;
  font-family: serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
}


/* =========================
   Hair Design Entry
========================= */

.hairdesign-entry {
  padding: 110px 22px;

  text-align: center;
  background-color: #d8cec2;
}

.hairdesign-entry__inner {
  max-width: 650px;
  margin: 0 auto;
}

.hairdesign-entry h2 {
  margin-bottom: 25px;

  font-family: serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.06em;
}

.hairdesign-entry__inner > p:not(.section-en) {
  margin-bottom: 40px;

  color: #625a53;
  font-size: 0.8rem;
  line-height: 2;
}

.hairdesign-entry__button {
  min-width: 230px;
  min-height: 58px;
  padding: 0 30px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #554d46;

  font-family: serif;
  font-size: 0.72rem;
  letter-spacing: 0.17em;

  transition:
    color 0.3s ease,
    background-color 0.3s ease;
}

.hairdesign-entry__button:hover {
  color: #fff;
  background-color: #554d46;
}

/* =========================
   Scroll Animation
========================= */

/* 共通設定 */
.fade-up,
.fade-up-fast,
.fade-up-slow,
.fade-up-very-slow,
.slide-in,
.slide-down {
  opacity: 0;
  will-change: opacity, transform;
}

/* -------------------------
   フェードアップ：標準
   0.9秒
------------------------- */

.fade-up {
  transform: translateY(40px);
  transition:
    opacity 1s ease,
    transform 0.9s ease;
}

/* -------------------------
   フェードアップ：速い
   0.5秒
------------------------- */

.fade-up-fast {
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.5s ease;
}

/* -------------------------
   フェードアップ：遅い
   1.3秒
------------------------- */

.fade-up-slow {
  transform: translateY(50px);
  transition:
    opacity 1.5s ease,
    transform 1.3s ease;
}

/* -------------------------
   フェードアップ：かなり遅い
   1.8秒
------------------------- */

.fade-up-very-slow {
  transform: translateY(60px);
  transition:
    opacity 1.8s ease,
    transform 1.8s ease;
}

/* -------------------------
   スライドイン
   左から右
------------------------- */

.slide-in {
  transform: translateX(-70px);
  transition:
    opacity 1s ease,
    transform 1s ease;
}

/* -------------------------
   スライドダウン
   上から下
------------------------- */

.slide-down {
  transform: translateY(-60px);
  transition:
    opacity 1.5s ease,
    transform 1.5s ease;
}
/* フェードイン */
.fade-in {
  opacity: 0;
  transition: opacity 2s ease;
}

.fade-in.is-show {
  opacity: 1;
}

/* 表示後 */
.fade-up.is-show,
.fade-up-fast.is-show,
.fade-up-slow.is-show,
.fade-up-very-slow.is-show,
.slide-in.is-show,
.slide-down.is-show {
  opacity: 1;
  transform: translate(0, 0);
}


/* =========================
   Animation Delay
========================= */

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

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

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

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


/* FVの時間差 */
.FV-button.fade-up {
  transition-delay: 0.2s;
}

.fvlogo.fade-up {
  transition-delay: 0.45s;
}

.fixed-back-link {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  width: 64px;
  height: 64px;

  padding: 0;

  color: #050505;
  background-color: rgba(250, 250, 250, 0.9);
  border: 1px solid rgba(250, 250, 250, );
  border-radius: 50%;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;

  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.fixed-back-link:hover {
  color: #fff;
  background-color: #050505;
  transform: translateY(-3px);
}

@media screen and (min-width: 768px) {

  /* -------------------------
     Header
  ------------------------- */

  .header {
    height: 80px;
    padding: 0 34px;
  }

  .header-logo img {
    width: 110px;
  }

  .header-right {
    gap: 18px;
  }

  .reserve-btn {
    width: auto;
    height: auto;
    gap: 9px;

    font-family: serif;
    font-size: 0.72rem;
    letter-spacing: 0.13em;
  }

  .reserve-btn span {
    display: inline;
  }

  .reserve-icon {
    width: 21px;
    height: 21px;
  }


  /* -------------------------
     ページ全体
  ------------------------- */

  .page-content {
    width: 100%;
  }


  /* -------------------------
     FVより下の2カラム
  ------------------------- */

  .after-fv {
    display: flex;
    align-items: flex-start;
    width: 100%;
  }

  .after-fv__content {
    flex: 1;
    width: auto;
    min-width: 0;
  }

   .side-image {
    position: sticky;
    top: 0;

    flex: 0 0 12%;
    width: 12%;
    height: 100vh;
  }
  .side-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
  }


  /* -------------------------
     FV
  ------------------------- */

  .FV {
    width: 100%;
    height: 100vh;
    min-height: 680px;
  }

  .FV .fvimg {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
  }

  .FV .fvlogo {
    top: 49%;
    width: 290px;
  }

  .FV-button {
    top: 27%;
    left: 50%;

    width: min(700px, 75%);

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;

    transform: translateX(-50%);
  }

  .FV-button a {
    flex: 1;
    padding-top: 16px;

    font-size: 0.72rem;
    letter-spacing: 0.13em;
  }

  .FV-button a::before {
    width: 36px;
  }


  /* -------------------------
     Menu・Access
  ------------------------- */

  .menu,
  .access {
    padding: 140px 8%;
  }

  .menu-inner,
  .access-inner {
    width: 100%;
  }

  .section-title {
    margin-bottom: 70px;
  }

  .section-title h2 {
    font-size: 2.3rem;
  }

  .menu-item {
    min-height: 78px;
    padding: 0 12px;
  }

  .menu-item p {
    font-size: 1.05rem;
  }

  .menu-item span {
    font-size: 0.92rem;
  }


  /* -------------------------
     Concept
  ------------------------- */

  .concept {
    padding: 150px 8%;
  }

  .concept h2 {
    font-size: 2rem;
  }

  .concept-text {
    font-size: 0.9rem;
  }


  /* -------------------------
     Access
  ------------------------- */

  .access-content {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.5fr);
    align-items: start;
    gap: 80px;
  }

  .access-map {
    height: 480px;
  }


  /* -------------------------
     Footer
  ------------------------- */

  .footer {
    padding: 90px 40px 30px;
  }

  .footer-logo {
    width: 145px;
    margin-bottom: 50px;
  }

  .footer-nav {
    max-width: 650px;
    margin: 0 auto 70px;
    gap: 35px;
  }

  .footer-nav a {
    padding-top: 16px;

    font-size: 0.72rem;
    letter-spacing: 0.13em;
  }

  .footer-nav a::before {
    width: 36px;
  }

  
  .stylist-fv {
    min-height: 530px;
    padding: 160px 8% 100px;
  }

  .stylist-fv h1 {
    font-size: 3rem;
  }

  .stylist {
    padding: 150px 8%;
  }

  .stylist-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 70px;
    row-gap: 130px;
  }

  .stylist-card:nth-child(even) {
    margin-top: 90px;
  }

  .stylist-card__content {
    padding-top: 32px;
  }

  .stylist-card h2 {
    font-size: 1.45rem;
  }

  .stylist-message {
    font-size: 0.88rem;
  }

  .stylist-entry {
    padding: 145px 8%;
  }

  .stylist-entry h2 {
    font-size: 2rem;
  }

   .recruit-fv {
    min-height: 540px;
    padding: 170px 8% 100px;
  }

  .recruit-fv__title {
    font-size: 3rem;
  }

  .recruit-message {
    padding: 150px 8%;
  }

  .recruit-message__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 100px;
  }

  .recruit-message__image {
    aspect-ratio: 4 / 5;
  }

  .recruit-message__content {
    padding-top: 0;
  }

  .recruit-message__title {
    font-size: 2rem;
  }

  .recruit-message__text {
    font-size: 0.9rem;
  }

  .recruit-feature {
    padding: 145px 8%;
  }

  .recruit-feature__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 55px;
  }

  .recruit-feature__item {
    min-height: 260px;
  }

  .recruit-feature__item h3 {
    font-size: 1.3rem;
  }

  .recruit-info {
    padding: 145px 8%;
  }

  .recruit-info__item {
    padding: 30px 10px;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 40px;
  }

  .recruit-info__item dt,
  .recruit-info__item dd {
    font-size: 0.9rem;
  }

  .recruit-entry {
    padding: 150px 8%;
  }

  .recruit-entry__title {
    font-size: 2rem;
  }

  .hairdesign-fv {
    min-height: 540px;
    padding: 170px 8% 100px;
  }

  .hairdesign-fv h1 {
    font-size: 3rem;
  }

  .hairdesign {
    padding: 150px 8%;
  }

  .hairdesign-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 45px;
  }

  .hairdesign-card:nth-child(2) {
    margin-top: 100px;
  }

  .hairdesign-card__content {
    padding-top: 30px;
  }

  .hairdesign-card h2 {
    font-size: 1.45rem;
  }

  .hairdesign-card__menu {
    font-size: 0.72rem;
  }

  .hairdesign-entry {
    padding: 150px 8%;
  }

  .hairdesign-entry h2 {
    font-size: 2rem;
  }

}