@charset "utf-8";

html {
    scroll-behavior: smooth;
    font-size: 62.5%;
    background-color: #303030;
}

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: 0em;
    background-color: #212121;
    color: #FFFFFF;
}

*:focus-visible {
    outline: 0px solid #7C5E0C;
}

/* font 
    font-family: "Noto Sans JP", sans-serif;
    font-family: "Noto Serif JP", serif;
    font-family: "Josefin Sans", sans-serif;
    font-family: "fot-rodin-pron", sans-serif;
    font-family: "Afacad", sans-serif;
*/



/* -----------font-----------*/    
img {
    width: 100%;
    height: auto;
}

.sp {
    display: block;
}

.pc {
    display: none;
}

/* -----------共通-----------*/
body.no-scroll { 
    overflow: hidden; 
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ===== Header ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 64px;
    max-width: 50rem;
    margin-inline: auto;
    background-color: #303030;
}
.header-inner {
    margin-inline: auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    position: relative;
}

/* 左：2本線ハンバーガー */
.hamburger {
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff; /* 線色は全部白 */
  }
  
  .hamburger-icon {
    width: 40px;
    height: 40px;
    display: block;
  }
  
  /* 線の共通スタイル（全部白い線） */
  .hamburger-bar,
  .hamburger-extra,
  .hamburger-eye {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transform-box: fill-box;
    transform-origin: 50% 50%;
  }
  
  /* 最初の2本線（ハンバーガー状態） */
  .hamburger-bar {
    transition:
      transform 240ms ease-in,
      opacity 80ms ease-in;
  }
  
  /* 最終形の短い線（最初は透明） */
  .bar-bottom-final {
    opacity: 0;
    transition: opacity 80ms ease-in;
  }
  
  /* 真ん中の線：描かれる／逆再生で消える */
  .hamburger-extra {
    opacity: 0;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    transition:
      stroke-dashoffset 420ms ease-in,
      opacity 420ms ease-in;
  }
  
  /* 目：描画なしでフェードイン／アウトだけ */
  .hamburger-eye {
    opacity: 0;
    transition: opacity 420ms ease-in;
  }
  
  /* ====== 初期状態（閉じている） ====== */
  
  .hamburger:not(.is-active) .bar-top {
    transform: none;
  }
  
  .hamburger:not(.is-active) .bar-bottom {
    transform: none;
    opacity: 1;
    transition:
      transform 240ms ease-in,
      opacity 80ms ease-in;
  }
  
  /* 最終形の短い線は隠しておく */
  .hamburger:not(.is-active) .bar-bottom-final {
    opacity: 0;
    transition: opacity 80ms ease-in;
  }
  
  /* extra / eye は元の状態に戻す（逆再生後の状態） */
  .hamburger:not(.is-active) .hamburger-extra {
    opacity: 0;
    stroke-dashoffset: 120;
    transition-delay: 0ms;
  }
  
  .hamburger:not(.is-active) .hamburger-eye {
    opacity: 0;
    transition-delay: 0ms;
  }
  
  /* ====== 開いている時（.is-active） ====== */
  
  /* ★ bar-top：位置は今まで通り */
  .hamburger.is-active .bar-top {
    transform: translate(-1px, 9px) rotate(-60deg);
  }
  
  /* bar-bottom：
     0〜240ms で移動 → その後 80ms でフェードアウト */
  .hamburger.is-active .bar-bottom {
    transform: translate(11px, 4px) rotate(61deg) scale(0.8);
    opacity: 0;
    transition:
      transform 240ms ease-in,
      opacity 80ms 240ms ease-in; /* 240ms 後に 80ms で消える */
  }
  
  /* bar-bottom-final：
     bar-bottom が消え始めるのと同時にフェードイン */
  .hamburger.is-active .bar-bottom-final {
    opacity: 1;
    transition: opacity 80ms 240ms ease-in;
  }
  
  /* 真ん中の線：少し遅れて描かれる（→ 閉じるときは逆再生で消える） */
  .hamburger.is-active .hamburger-extra {
    opacity: 1;
    stroke-dashoffset: 0;
  }
  
  /* 左目 → 右目の順でふわっと出る（→ 閉じるときはフェードアウト） */
  .hamburger.is-active .eye-left {
    opacity: 1;
  }
  
  .hamburger.is-active .eye-right {
    opacity: 1;
  }

.header-logo {
    width: 6.6rem;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}

.header-right {
    background-color: #212121;
}

.gtranslate_wrapper {
    font-family: "Inconsolata", monospace;
    color: #8B8B8B;
    background-color: #FFFFFF;
    display: flex;
    border-radius: 5px;
}

.glink {
    font-size: 1.2rem;
    width: 4.4rem;
    height: 3rem;
    display: grid;
    place-content: center;
    position: relative;
    color: #B3B3B3;
    font-weight: 500;
}

.glink.gt-current-lang {
    color: #2c2c2c;
}

.glink:first-child:after {
    content:"";
    width: 1px;
    height: 15px;
    background-color: #8B8B8B;
    position: absolute;
    right: 0;
    top: 50%;
    translate: 0 -50%;
}

.gt-current-lang {
    color: #FFFFFF;
}

.section_title_wrapper__top-menu {
    padding-left: 2rem;
}

.section-title {
    font-size: 1.4rem;
    line-height: 1;
    color: #806F3F;
    width: fit-content;
}

.section-title::after {
    content: "";
    width: 100%;
    height: 1px;
    display: block;
    margin-top: 1rem;
    background-color: #806F3F;
}

.section-title_en {
    margin-top: 1rem;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 500;
    font-size: 3rem;
    color: #806F3F;
    line-height: 1;
    text-transform: uppercase;
}

.section-title_en__mt0 {
    margin-top: 0;
}

.section-title_en__afacad {
    font-family: "Afacad", sans-serif;
    font-size: 3.2rem;
}

.section_title_wrapper--white .section-title,
.section_title_wrapper--white .section-title_en {
    color: #FFFFFF;
}

.section_title_wrapper--white .section-title::after {
    background-color: #FFFFFF;
}

.section_title_wrapper--black .section-title,
.section_title_wrapper--black .section-title_en {
    color: #2C2C2C;
}

.section_title_wrapper--black .section-title::after {
    background-color: #2C2C2C;
}

/* ===== Overlay Nav ===== */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    background: #212121;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(.2,.7,.2,1);
    padding-top: 6.4rem;
}

.nav-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* メニュー縦並び */
.nav-menu {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.nav_item {
    position: relative;
    overflow: hidden;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0em;
    font-family: "Josefin Sans", sans-serif;
    text-transform: uppercase;
}

.nav_item a::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #FFFFFF;
    left: 0;
    bottom: 0;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.2s ease-in;
}

.nav_item a:focus-visible::before {
    transform: scaleX(1);
    transform-origin: left center;
}

@media (any-hover: hover) {
    .nav_item a:hover::before {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

.nav_button-list {
    margin-top: 5rem;
}

.nav_button-item:not(:first-child) {
    margin-top: 2rem;
}

.nav_button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
    width: 25rem;
    height: 5rem;
    font-size: 1.4rem;
    border-radius: 100vmax;
    line-height: 1;
    letter-spacing: 0em;
}

.nav_button-link svg {
    width: 1.8rem;
    height: 2rem;
    flex-shrink: 0;
}

.nav_button-link__gold {
    background-color: #8F711F;
    color: #FFFFFF;
}

.nav_button-link__white {
    background-color: #FFFFFF;
    color: #2C2C2C;
}

.nav_button-link__outline {
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
}

.nav_button-link__outline svg.nav_button-arrow {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.5rem;
    height: 1.2rem;
}

.m_button-link {
    display: inline-block;
    background-color: #8F711F;
    position: relative;
    width: 25rem;
    text-align: center;
    font-size: 1.4rem;
    border-radius: 100vmax;
    line-height: 1;
    letter-spacing: 0em;
}

.m_button-link_icon-left {
    padding: 1.6rem 1rem 2rem 3rem;
}

.m_button-link_icon-right {
    padding: 1.6rem 2rem 2rem 2rem;
}

.m_button-link_icon-left svg, .m_button-link_icon-right svg {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
}

.m_button-link_icon-left svg{
    left: 2rem;
}

.m_button-link_icon-right svg {
    right: 3rem;
}



/* 動きの軽減に配慮（任意） */
@media (prefers-reduced-motion: reduce) {
    .nav-overlay { transition-duration: 1ms; }
    .hamburger .bar { transition-duration: 1ms; }
}

/* ----- side-left ----- */
.side_left {
    display: none;
}

/* ----- cta-button ----- */
.cta_button {
    position: fixed;
    bottom: 5rem;
    left: max(0, calc(50vw - 25.5rem));
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.cta_button_link {
    height: 5rem;
    background-color: #8F711F;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    font-size: 1.4rem;
    padding: 1.6rem 2.6rem 1.6rem 1.9rem;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    min-width: 17rem;
}

.cta_button_link--recruit {
    background-color: #FFFFFF;
    color: #2C2C2C;
}

.cta_recruit-button {
    position: fixed;
    bottom: 0;
    left: max(0, calc(50vw - 25.5rem));
    z-index: 100;
    width: min(100%, 50rem);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cta_recruit-button_link {
    width: 50%;
    height: 7rem;
    background-color: #8F711F;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 1.4rem;
}

.cta_recruit-button_link:nth-child(2) {
    border-left: 2px solid #303030;
}

.cta_button_text {
    text-align: center;
    line-height: 1.2;
}

.cta_job-description-button {
    position: fixed;
    bottom: 0;
    left: max(0, calc(50vw - 25.5rem));
    z-index: 100;
    width: min(100%, 50rem);
}

.cta_job-description-button_link {
    width: 100%;
    height: 7rem;
    background-color: #8F711F;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 1.4rem;
}

/* ---------- link-button ---------- */
.link-button {
    display: inline-block;
    width: 14.4rem;
    padding: 1rem 1rem 0.8rem;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 1.4rem;
    line-height: 1;
    border-radius: 5px;
    font-family: "Josefin Sans", sans-serif;
    transition: background-color 0.2s ease-in, color 0.2s ease-in;
    text-align: center;
}

.link-button__black {
    border: 1px solid #2C2C2C;
    color: #2C2C2C;
}

.link-button:focus-visible {
    outline: 2px solid #7C5E0C;
}

@media (any-hover: hover) {
    .link-button:hover {
        background-color: #7C5E0C;
    }
    .link-button__black:hover {
        background-color: #7C5E0C;
        color: #FFFFFF;
    }
}


/* ----- page-title ----- */
.page-title {
    margin-left: 3rem;
    padding-top: 5rem;
    width: fit-content;

}
.page-title img {
    height: 3.6rem;
    padding: 4px 0;
}

.page-title_text {
    display: block;
    color: #131313;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.page-title__white .page-title_text {
    color: #FFFFFF;
}

.page-title_text::before {
    content: "";
    display: block;
    margin-top: 7px;
    margin-bottom: 7px;
    width: 3rem;
    height: 1px;
    background-color: #131313;
}

.page-title__white .page-title_text::before {
    background-color: #FFFFFF;
}

.section-head {
    width: 100vw;
    padding-left: 4rem;
    margin-left: max(-4rem, calc(50% - 50vw));
}

.section-main-head {
    text-transform: uppercase;
    font-family: "Josefin Sans", sans-serif;
    font-size: 3rem;
    line-height: 1;
    display: flex;
    gap: 1rem;
    align-items: center;
    text-wrap: nowrap;
}

.section-head__recruit-voice .section-main-head{
    font-size: 2.4rem;
    text-transform: none;
}

.section-head__recruit_flow .section-main-head{
    font-size: 2.4rem;
    color: #2C2C2C;
}

.section-head__recruit-faq .section-main-head {
    font-size: 2.8rem;
    font-family: "Afacad", sans-serif;
}

.section-head__job-description .section-main-head {
    font-size: 2.4rem;
}

.section-head__job-description_recruitment {
    color: #2C2C2C;
}

.section-head__job-description_recruitment .section-main-head {
    color: currentColor;
    font-size: 2.4rem;
}

.section-main-head::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: currentColor;
    margin-bottom: 8px;
}

.section-main-head__recruit-voice::after {
    margin-bottom: 6px;
}

.section-sub-head {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    margin-top: 5px;
}

/* ----- slider ----- */

.m_slider_wrapper {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.m_slider_track {
    display: flex;
    width: fit-content;
    gap: 2rem;
    animation: scroll-left 30s infinite linear;
}

.m_slider_item {
    flex-shrink: 0;
}

.m_slider_item img {
    width: 20rem;
    height: auto;
    display: block;
    object-fit: cover;
}

.m_slider {
    overflow: hidden;
    width: min(100vw, 50rem);
}

.m_slider_top {
    margin-top: 10rem;
    margin-left: max(-4rem, calc(50% - 50vw));
}

.m_slider_menu {
    margin-top: 3rem;
    margin-left: max(-3rem, calc(50% - 50vw));
}


@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

/* ---------- animation ---------- */


/* -----------footer-----------*/
.footer {
    padding: 10rem 2rem;
    width: 100%;
    max-width: 500px;
    margin-inline: auto;
    text-align: center;
    color: #969696;
    background-color: #303030;
}

.footer_logo-link {
    display: inline-block;
    width: 14.6rem;
}

.footer_nav {
    margin-top: 7rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    list-style: none;
    justify-content: center;
    align-items: center;
    padding: 0 4rem;
}
.footer_nav_item {
    color: #FFFFFF;
    font-size: 1.4rem;
    font-family: "Josefin Sans", sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1;
}
.footer_copyright {
    display: block;
    margin-top: 7rem;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
}

/* -----------top-----------*/
.main {
    width: 100%;
    max-width: 50rem;
    margin-inline: auto;
    position: relative;
    background-color: #303030;
}

/* 白背景の下層ページ（contact / privacy） */
.main--light {
    background-color: #FFFFFF;
    color: #2C2C2C;
}

.kv {
    width: 100%;
    padding: 1rem 2rem;
}

.kv_movie {
    width: 100%;
    aspect-ratio: 310 / 470;
}

.kv_movie video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top_concept {
    padding: 4rem;
    margin-inline: auto;
    overflow: hidden;
}

.top_concept_copy {
    margin-top: 5rem;
    font-size: 2rem;
    font-family: "Noto Serif JP", serif;
    text-align: center;
}

.top_concept_desc-wrapper {
    margin-top: 5rem;
}

.top_concept_desc {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    line-height: 2;
    text-align: center;
}

.top_concept_desc:not(:first-child) { 
    margin-top: 2rem;
}



/* ----- about ----- */

.top_about {
    padding: 7rem 3rem;
}

.quality_lead {
    margin-top: 5rem;
}

.quality_lead_text {
    font-size: 1.6rem;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.08em;
}

.quality_lead_emphasis {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-top: 1rem;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0.08em;
}

.quality_lead_quote {
    align-self: flex-start;
    width: 1rem;
    margin-top: 0.27rem;
    flex-shrink: 0;
}

.quality_lead_quote img {
    display: block;
}

.quality_lead_quote--left {
    margin-right: 0.2rem;
}

.quality_lead_quote--right {
    margin-left: 0.2rem;
}

.quality_lead_num {
    font-family: "fot-rodin-pron", sans-serif;
    font-size: 2.8rem;
    line-height: 1;
    color: #806F3F;
    transform: translateY(0.2rem);
}

.quality_lead_unit {
    color: #806F3F;
    font-weight: 700;
    transform: translateY(0.2rem);

}

.quality_points {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
}

.quality_points_row {
    display: flex;
    gap: 2rem;
}

.quality_point {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 14rem;
    height: 14rem;
    padding: 2rem 1rem;
    background-color: #474747;
    border: 1px solid #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 0 10px #FFFFFF;
}

.quality_point--top {
    position: relative;
    z-index: 1;
    margin-bottom: -0.5rem;
}

.quality_point_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 5rem;
}

.quality_point_icon--chair {
    width: 4.9rem;
}

.quality_point_icon--scissors {
    width: 2.3rem;
}

.quality_point_icon--carte {
    width: 4rem;
}

.quality_point_text {
    font-size: 1.2rem;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.05em;
}

.top-about_button-wrapper {
    margin-top: 3rem;
    text-align: center;
}

/* ---------- shoplist ---------- */
.top_shoplist {
    display: flex;
    flex-direction: column;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 10rem 0;
    overflow: hidden;
}

.top_shoplist_bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.top_shoplist_bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.8s ease-in;
}

.top_shoplist_bg-image.is-active {
    opacity: 1;
}

.top_shoplist_overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: color-mix(in srgb, #000000 50%, transparent);
}

.top_shoplist_inner {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    align-items: center;
    gap: 10rem;
}

.top_shoplist_head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.top_shoplist_desc {
    font-size: 1.4rem;
    line-height: 1.8;
    text-align: center;
    letter-spacing: 0.05em;
}

.top_shoplist_arrows {
    display: flex;
    gap: 10rem;
}

.top_shoplist_arrow {
    position: relative;
    width: 0.8rem;
    height: 2.1rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.top_shoplist_arrow::before {
    content: "";
    position: absolute;
    inset: -1.5rem;
}

.top_shoplist_arrow--prev {
    transform: scaleX(-1);
}

.top_shoplist_arrow:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 4px;
}

@media (any-hover: hover) {
    .top_shoplist_arrow:hover {
        opacity: 0.6;
    }
}

/* ---------- menu ---------- */
.top_menu {
    padding: 10rem 2rem;
}

.top_menu_wrapper {
    padding: 5rem 1rem;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
}

@media screen and (min-width: 350px) {
    .top_menu_wrapper {
        padding: 5rem 3rem;
    }
}

.top_menu_intro {
    margin-top: 4rem;
    font-size: 1.4rem;
    text-align: center;
    line-height: 1.5;
}

.top_menu_list {
    margin-top: 4rem;
    list-style: none;
    margin-inline: auto;
    max-width: 27rem;
}

.top_menu_item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.top_menu_item:not(:first-child) {
    margin-top: 2rem;
}

.top_menu_item_name {
    font-size: 1.5rem;
    color: #FFFFFF;
    white-space: nowrap;
    font-family: "Josefin Sans", sans-serif;
}

.top_menu_item_line {
    flex: 1;
    height: 1px;
    background-color: color-mix(in srgb, #FFFFFF 50%, transparent 50%);
    min-width: 2.2rem;
}

.top_menu_item_price {
    font-size: 1.5rem;
    color: #FFFFFF;
    white-space: nowrap;
    font-family: "fot-rodin-pron", sans-serif;
}

.top_menu_item_price_yen {
    font-size: 1.2rem;
}

/* ----- hairstyle ----- */
.hairstyle {
    padding: 5rem 0;
    background-color: #FFFFFF;
    overflow: hidden;
}

.hairstyle .section_title_wrapper {
    padding-inline: 3rem;
}

.hairstyle_intro {
    margin-top: 3rem;
    padding-inline: 3rem;
    color: #2C2C2C;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.8;
}

.hairstyle_wrapper {
    position: relative;
    margin-top: 3rem;
    overflow: hidden;
}

.hairstyle_swiper {
    overflow: visible;
}

.hairstyle_swiper .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.hairstyle_item {
    width: 15.5rem !important;
    height: 20.7rem;
    flex-shrink: 0;
}

.hairstyle_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hairstyle_pagination {
    position: relative !important;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
    z-index: 10;
}

.hairstyle_pagination_dot {
    width: 2rem;
    height: 0.2rem;
    padding: 0;
    border: none;
    border-radius: 100vmax;
    background-color: #C2C2C2;
    cursor: pointer;
    transition: background-color 0.3s ease-in, transform 0.3s ease-in;
}

.hairstyle_pagination_dot.is-active {
    background-color: #806F3F;
    animation: paginationPulse 0.5s ease-in;
}

@keyframes paginationPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.hairstyle_button-wrapper {
    margin-top: 3rem;
    text-align: center;
}

/* ----- recruit ----- */
.top_recruit {
    width: 100%;
    aspect-ratio: 390 / 195;
    background-image: url(../img/top_rectuit-bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}

.top_recruit::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, #000000 50%, transparent 50%);
}

.top_recruit_inner {
    width: 100%;
    position: relative;
    z-index: 3;
    padding: 3rem 0 2rem 4rem;
}

.top_recruit_title {
    text-transform: uppercase;
    font-family: "Josefin Sans", sans-serif;
    font-size: 3rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

.top_recruit_title::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #FFFFFF;
}

.top_recruit-desc {
    margin-top: 4rem;
    font-size: 1.4rem;
}

.top_recruit-button-wrapper {
    margin-top: 0.4rem;
    text-align: right;
    margin-right: 1.7rem;
}

/* -------- recruit ---------- */
.recruit_points {
    padding: 5rem 2rem 10rem;
}

.recruit_points-list {
    margin-top: 5rem;
    padding: 5rem 2rem;
    background-color: #FFFFFF;
}

.recruit_points-item:not(:first-child)::before {
    margin-top: 5rem;
    margin-bottom: 5rem;
    content: "";
    display: inline-block;
    width: 100%;
    height: 2px;

    background: repeating-linear-gradient(
        to right,
        #303030 0,
        #303030 3px,
        transparent 3px,
        transparent 6px
    );
}

.recruit_points-item-image {
    overflow: hidden;
}

.recruit_points-item-num {
    margin-top: 5rem;
    width: 8.5rem;
    margin-inline: auto;
}

.recruit_points-item-title {
    position: relative;
    margin-top: 2rem;
    background-color: #303030;
    text-align: center;
    border-radius: 5px;
    padding: 1.5rem 2rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
    font-weight: 500;
    font-size: 1.4rem;
}

.recruit_points-item-title svg {
    position: absolute;
    left: 50%;
    top: 100%;
    translate: -50% 0;
}

.recruit_points-fellow-list {
    margin-top: 4rem;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 1rem;
}

.recruit_points-fellow-item {
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 384px) {
    .recruit_points-fellow-item {
        width: calc(50% - 0.5rem);
        margin-inline: unset;
    }
}

.recruit_points-fellow-item-num {
    font-family: "fot-rodin-pron", sans-serif;
    padding: 8px;
    line-height: 1;
    background-color: #806F3F;
    text-align: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top: 1px solid #806F3F;
    border-right: 1px solid #806F3F;
    border-left: 1px solid #806F3F;
}

.recruit_points-fellow-item-text {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-right: 1px solid #2C2C2C;
    border-bottom: 1px solid #2C2C2C;
    border-left: 1px solid #2C2C2C;
}

.recruit_points-fellow-item-text_inner {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.3;
    color: #2C2C2C;
    text-align: center;
    padding: 1rem 0.5rem;
    letter-spacing: 0em;

}

.recruit_points-fellow-item-text_lg {
    font-size: 1.4rem;
    font-weight: 500;
    color: #806F3F;
}

.recruit_points-type {
    margin-top: 4rem;
    position: relative;
    z-index: 1;
  
    /* 円用のCSS変数（初期値） */
    --circle-progress: 0;  /* 0〜1 の進捗 */
    --circle-opacity: 0;
  }
  
  .recruit_points-type::after {
    content: "";
    position: absolute;
    width: 14.4rem;
    height: 14.4rem;
    border-radius: 100vmax;
    border: 1px solid #806F3F;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
  
    /* progress(0〜1) を半径に変換して使う */
    clip-path: circle(calc(var(--circle-progress) * 50%) at 50% 50%);
    opacity: var(--circle-opacity);
    transition: none; /* clip-path はGSAPが直接制御するのでCSS側のtransitionは不要 */
  }

.recruit_points-type-item-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.recruit_points-type-item-row:not(:first-child) {
    margin-top: -2px;
}

.recruit_points-type-item {
    background-color: #806F3F;
    width: 144px;
    height: 144px;
    border-radius: 100vmax;
    border: 1px solid #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
    font-weight: 500;
    box-shadow: 0 0 10px #827E73;
}

.recruit_points-type-item_sm {
    font-size: 1.1rem;
    letter-spacing: 0em;
}

.recruit_points-item-desc-wrapper {
    margin-top: 5rem;
}

.recruit_points-item-desc {
    font-size: 1.4rem;
    font-weight: 500;
    color: #2C2C2C;
}

.recruit_points-item-desc:not(:first-child) {
    margin-top: 1rem;
}

.recruit_points-item-content-title {
    margin-top: 5rem;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.05em;
    color: #806F3F;
    display: flex;
    align-items: center;
    gap: 7px;
}

.recruit_points-item-content-title::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    border: 3px solid currentColor;
    border-radius: 100vmax;
}

.recruit_points-item-content-list {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 0;
    justify-content: space-between;
}

.recruit_points-item-content-item svg {
    height: auto;
}

.recruit_points-item-content-item:has(svg.w155) {
    width: 50%;
}

.recruit_points-item-content-item:has(svg.w145) {
    width: 46.774193548387094%;
}
.recruit_points-item-content-item:has(svg.w110) {
    width: 35.48387096774194%;
}
.recruit_points-item-content-item:has(svg.w190) {
    width: 61.29032258064516%;
}
.recruit_points-item-content-item:has(svg.w310) {
    width: 100%;
}

/* ----- recruit_voice ----- */
.recruit_voice {
    padding: 0 3rem 5rem;
    overflow: hidden;
}

.recruit_voice-list {
    margin-top: 5rem;
}

.recruit_voice-item:not(:first-child)::before {
    margin-top: 5rem;
    margin-bottom: 5rem;
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: #727272;

}

.recruit_voice-name-en {
    font-family: "Josefin Sans", sans-serif;
    line-height: 1;
    color: #806F3F;
    font-size: 2rem;
}

.recruit_voice-position-name {
    margin-top: 5px;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 500;
}

.recruit_voice-photo {
    margin-top: 2rem;
    overflow: hidden;
}

.recruit_voice-photo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.recruit_voice-body {
    margin-top: 2rem;
}

.recruit_voice-text {
    font-size: 1.4rem;
    line-height: 1.3;
    letter-spacing: 0.1em;
    font-weight: 500;
}

.recruit_voice-text:not(:first-child) {
    margin-top: 1rem;
}

.recruit_voice-button-wrapper {
    margin-top: 5rem;
    text-align: center;
}

/* -----recruit_flow ----- */
.recruit_flow {
    padding: 10rem 3rem;
    background-color: #FFFFFF;
    color: #2c2c2c;
}

.recruit_flow-list {
    margin-top: 5rem;
}

.recruit_flow-item_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    max-width: 36rem;
    margin-inline: auto;
}

@media screen and (min-width: 350px) {
    .recruit_flow-item_inner {
        align-items: stretch;
    }
}

.recruit_flow-item:not(:first-child)::before {
    content: "";
    display: block;
    margin: 1rem auto;
    width: 18px;
    height: 13px;
    background: #806F3F;
    clip-path: path("M9.76357 11.9696C9.36327 12.49 8.57862 12.49 8.17832 11.9696L0.209187 1.60971C-0.296675 0.952092 0.172136 0 1.00181 0H16.9401C17.7698 0 18.2386 0.952091 17.7327 1.60971L9.76357 11.9696Z");
}

.recruit_flow-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    width: 6rem;
    height: 6rem;
    background-color: #806F3F;
    color: #FFFFFF;
    border-radius: 100vmax;
    flex-shrink: 0;
    z-index: 2;
}

@media screen and (min-width: 350px) {
    .recruit_flow-head {
        width: 8rem;
        height: 8rem;
    }
}

.recruit_flow-head-step {
    font-size: 1.2rem;
    font-family: "Josefin Sans", sans-serif;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
    align-items: center;
}

.recruit_flow-head-step::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 1px;
    background-color: #FFFFFF;
}

.recruit_flow-head-num {
    font-family: "fot-rodin-pron", sans-serif;
    font-size: 1.7rem;
    line-height: 1;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.recruit_flow-body {
    margin-top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 350px) {
    .recruit_flow-body {
        margin-left: -4rem;
        width: calc(100% + 4rem);
        border: 1px solid #2c2c2c;
        border-radius: 5px;
    }
}

.recruit_flow-body-title {
    font-weight: 500;
    font-size: 2rem;
    line-height: 1;
}

.recruit_flow-body-text {
    margin-top: 1rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-align: center;
}

/* ---------- JOB DESCRIPTION ---------- */

.recruit_job-detail {
    margin-top: 10rem;
    padding-bottom: 5rem;
    color: #131313;
}

.recruit_job-detail_list_wrapper {
    width: calc(100% - 7rem);
    margin-inline: auto;
    margin-top: 3rem;
}

.recruit_job-detail_list_wrapper_asistant {
    margin-top: 5rem;
}

.recruit_job-title {
    background-color: #212121;
    color: #FFFFFF;
    text-align: center;
    padding: 1rem 0;
    font-size: 1.5rem;
    line-height: 1.3;
}

.recruit_job-detail_list {
    margin-top: 3rem;
}

.recruit_job-detail_list_row {
    padding: 1rem 0;
    display: flex;
    gap: 2rem;
}

.recruit_job-detail_list_row:not(:last-child) {
    border-bottom: 1px solid #7C5E0C;
}

.recruit_job-detail_list_row:first-child {
    padding-top: 0;
}

.recruit_job-detail_list_row dt {
    font-size: 1.5rem;
    width: 7.5rem;
    flex-shrink: 0;
}

.recruit_job-detail_list_row dd {
    font-size: 1.5rem;
    line-height: 1.3;
}

.recruit_job-detail_inner_list li{
    display: flex;
}

.recruit_job-detail_inner_list li::before {
    content:"・";
    display: inline-block;
}

.recruit_job-detail_inner_list li:not(:first-child) {
    margin-top: 1rem;
}

/* ----- recruit_faq ----- */
.recruit_flow {
    overflow: hidden;
}

.recruit_flow_title {
    margin-top: 5rem;
    padding-left: 1rem;
    font-family: "Josefin Sans", sans-serif;
    font-size: 2.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
    text-wrap: nowrap;
    gap: 1rem;
}

.recruit_flow_title::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: #2c2c2c;
}

.recruit_flow_sub-title {
    padding-left: 1rem;
    color: #2c2c2c;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    margin-top: 5px;
}

/* ----- recruit_faq ----- */
.recruit_faq {
    overflow: hidden;
    padding: 10rem 3rem;
    border-bottom: 1px solid #C2C2C2;
}
.recruit_faq_list {
    margin-top: 5rem;
}

.recruit_faq_item {
    color: #2C2C2C;
}

.recruit_faq_item:not(:first-child) {
    margin-top: 1rem;
}

.recruit_faq_question {
    width: 100%;
    display: flex;
    gap: 5px;
    padding: 1rem 2rem;
    text-align: left;
    cursor: pointer;
    border-radius: 5px;
    background-color: #FFFFFF;
    transition: border-radius 0.25s ease-in;
}

.recruit_faq_item.is-open .recruit_faq_question{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* プラス／マイナスアイコン */
.recruit_faq_icon {
    margin-top: 4px;
    margin-left: 1rem;
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    position: relative;
}

.recruit_faq_icon::before,
.recruit_faq_icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 1px; /* 15px × 1px のバー */
    border-radius: 2px;
    background-color: #2C2C2C;
    transform-origin: center;
    transition: transform 0.25s ease-in;
}

.recruit_faq_icon::before {
    transform: translate(-50%, -50%);
}

.recruit_faq_icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.recruit_faq_item.is-open .recruit_faq_icon::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

.recruit_faq_question-text {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
    font-family: "Afacad", sans-serif;
    margin-top: 4px;
}

.recruit_faq_question-content {
    font-size: 1.4rem;
    font-weight: 500;
    flex: 1;
}

.recruit_faq_answer-wrapper {
    overflow: hidden;
    height: 0;
}

.recruit_faq_answer {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 2rem;
    background-color: #FFFFFF;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.recruit_faq_answer-text {
    font-size: 1.6rem;
    font-weight: 500;
    flex-shrink: 0;
    font-family: "Afacad", sans-serif;
    line-height: 1;
    margin-top: 1px;
}

.recruit_faq_answer-content {
    font-size: 1.4rem;
    font-weight: 500;
    flex: 1;
    line-height: 1.3;
}

.recruit_faq-button-wrapper {
    text-align: center;
    margin-top: 5rem;
}


/* ---------- job descriotion ---------- */
.job-description_kv {
    padding: 5rem 3rem 10rem;
}

.job-description_benefit {
    overflow: hidden;
    padding: 0 3rem 5rem;
}

.job-description_benefit_list {
    margin-top: 5rem;
}

.job-description_benefit_item:not(:first-child)::before {
    margin-top: 5rem;
    margin-bottom: 5rem;
    content: "";
    display: inline-block;
    width: 100%;
    height: 2px;

    background: repeating-linear-gradient(
        to right,
        #806F3F 0,
        #806F3F 3px,
        transparent 3px,
        transparent 6px
    );
}

.job-description_benefit_num {
    width: 10.7rem;
    margin-inline: auto;
}

.job-description_benefit_head {
    margin-top: 2rem;
    padding: 1rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;
    background-color: #806F3F;
    border-radius: 5px;
    font-size: 2rem;
}

.job-description_benefit_head_sm {
    font-size: 1.5rem;
}

.job-description_benefit_desc {
    margin-top: 2rem;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    text-align: center;
}

.job-description_benefit_desc_enphasis {
    color: #806F3F;
    font-weight: 500;
}

.job-description_benefit_grow-step {
    margin-top: 4rem;
}

.job-description_benefit_grow-step_item {
    background-color: #FFFFFF;
    position: relative;
    border-radius: 5px;
    max-width: 40rem;
    margin-inline: auto;
}

.job-description_benefit_grow-step_item:not(:first-child) {
    margin-top: 4rem;
}

.job-description_benefit_grow-step_item_duration {
    position: absolute;
    top: 0;
    left: 0;
    translate: -1rem -2.3rem;
    width: 7rem;
    height: 7rem;
    background-color: #806F3F;
    border-radius: 100vmax;
    display: flex;
    justify-content: center;
    align-items: center;
}

.job-description_benefit_grow-step_item_duration_num {
    font-size: 2rem;
    font-family: "fot-rodin-pron", sans-serif;
    line-height: 1;
}

.job-description_benefit_grow-step_item_duration_text {
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.05em;
    line-height: 1;
}


.job-description_benefit_grow-step_item_title {
    text-align: center;
    color: #2C2C2C;
    font-weight: 500;
    line-height: 1;
    padding: 1rem;
    border-bottom: 1px solid #2C2C2C;
}

.job-description_benefit_grow-step_item_content {
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.job-description_benefit_image {
    margin-top: 2rem;
    overflow: hidden;
}

.job-description_benefit_image img {
    width: 100%;
    height: auto;
}

/* ----- recruitment ----- */
.job-description_recruitment {
    background-color: #FFFFFF;
    color: #2C2C2C;
    padding: 7rem 4rem;
    overflow: hidden;
}

.job-description_job-detail_list_wrapper {
    margin-top: 5rem;
}

.job-description_job-title {
    color: #806F3F;
    padding: 1.2rem 1rem 0.8rem 1rem;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 600;
    text-align: center;
    border: 2px solid currentColor;
    font-family: "Josefin Sans", sans-serif;
}

.job-description_job-detail_list {
    margin-top: 3rem;
}

.job-description_job-detail_list_row {
    display: flex;
    gap: 3rem;
    font-size: 1.4rem;
    max-width: 38rem;
    margin-inline: auto;
}

.job-description_job-detail_list_row dt {
    min-width: 7rem;
    font-weight: 500;
    line-height: 1;
}

.job-description_job-detail_list_row:first-child{
    padding-bottom: 1.5rem;
}

.job-description_job-detail_list_row:not(:first-child){
    padding: 1.5rem 0;
    border-top: 1px solid #2C2C2C;
}

.job-description_job-detail_inner_list li {
    display: flex;
    gap: 5px;
    line-height: 1.3;
}

.job-description_job-detail_inner_list li:before{
    content: "";
    margin-top: 9px;
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 100vmax;
    background-color: #2C2C2C;
}


.job-description_job-detail_inner_list li:not(:first-child) {
    margin-top: 0.8rem;
}

.recruit_job-detail-button-wrapper {
    margin-top: 5rem;
    text-align: center;
    color: #FFFFFF;
}


/* ---------- shop ---------- */
.shop_shop {
    padding: 5rem 3rem 10rem;
    border-bottom: 1px solid #C2C2C2;
}
.shop_shop_list {
    margin-top: 5rem;
}

.shop_shop_item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: #FFFFFF;
    border-radius: 5px;
}

.shop_shop_item:not(:first-child) {
    margin-top: 3rem;
}

.shop_shop_image {
    flex: 1;
    align-self: stretch;
    min-width: 0;
}

.shop_shop_image a {
    display: block;
    width: 100%;
    height: 100%;
}

.shop_shop_image img {
    width: 100%;
    height: 100%;
    min-height: 14rem;
    object-fit: cover;
}

.shop_shop_body {
    flex-shrink: 0;
    width: 16rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.shop_shop_info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shop_shop_name {
    font-size: 1.5rem;
    line-height: 1;
}

.shop_shop_name-text {
    color: #2C2C2C;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.shop_shop_name-open {
    align-self: flex-start;
    color: #806F3F;
    border: 1px solid currentColor;
    line-height: 1.2;
    letter-spacing: 0.05em;
    font-size: 1rem;
    font-weight: 500;
    padding: 3px 5px;
}

.shop_shop_address {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    color: #2C2C2C;
    font-size: 1.2rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.shop_shop_address img {
    flex-shrink: 0;
    display: inline-block;
    width: 11px;
    height: auto;
}

.shop_shop_buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.shop_shop_detail-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 15px;
    border: 1px solid #2C2C2C;
    border-radius: 3px;
    color: #2C2C2C;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.05em;
}

.shop_shop_link-button {
    display: flex;
    align-self: flex-start;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 7px 15px;
    background-color: #8F711F;
    border-radius: 3px;
    width: 100%;
}

.shop_shop_link-text {
    color: #FFFFFF;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.05em;
}

/* ---------- shop-detail ---------- */
.shop-detail {
    padding: 5rem 3rem 7rem;
    border-bottom: 1px solid #C2C2C2;
    overflow: hidden;
}

.shop-detail_sns {
    margin-top: 1rem;
    display: flex;
    gap: 5px;
    justify-content: flex-end;
    align-items: center;
}

.shop_detail_open {
    display: block;
    margin-top: 2rem;
    padding: 1rem;
    font-size: 14px;
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.05em;
    color: #806F3F;
    border: 1px solid currentColor ;
}

.shop-detail_image {
    margin-top: 2rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.shop-detail_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-detail_content {
    margin-top: 2rem;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1.3;
    letter-spacing: 0.05em;
    max-width: 40rem;
    margin-inline: auto;
}

.shop-detail_row {
    padding-bottom: 1rem;
}

.shop-detail_row:not(:first-child) {
    padding-top: 1rem;
    border-top: 1px solid #fff;
}

.shop-detail_label {
    display: inline-block;
    width: 11rem;
    padding: 5px 20px 3px;
    border: 1px solid #fff;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 500;
}

.shop-detail_body {
    margin-top: 5px;
}

.shop-detail_address {
    display: flex;
    align-items: center;
    gap: 2px;
}

.shop-detail_address-icon {
    display: inline-flex;
    margin-top: 2px;
}

.shop_detail-button-wrapper {
    margin-top: 5rem;
    text-align: center;
}

.shop_detail-head-wrapper {
    margin-top: 5rem;
}

.shop_detail-staff-list {
    margin-top: 5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
    justify-content: center;
}

.shop_detail-staff_item {
    width: 100%
}

@media screen and (min-width: 385px) {
    .shop_detail-staff_item {
        width: calc(50% - 1.5rem);
        min-width: 14rem;
    }
}

.shop_detail-staff_image {
    overflow: hidden;
}

.shop_detail-staff_image img {
    width: 100%;
    height: auto;
}

.shop_detail-staff_text {
    margin-top: 1.5rem;
}

.shop_detail-staff_role {
    font-size: 1rem;
}

.shop_detail-staff_name-en {
    margin-top: 1rem;
    color: #806F3F;
    font-size: 1.1rem;
    line-height: 1.3;
    letter-spacing: 0.1em;
    font-family: "Josefin Sans", sans-serif;
}

.shop_detail-staff_name-ja {
    margin-top: 3px;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.2em;
}

.shop_detail-staff_instagram {
    margin-top: 1rem;
    display: flex;
    gap: 5px;
    align-items: center;
}

.shop_detail-staff_instagram svg {
    flex-shrink: 0;
}

.shop_detail-staffinstagram-account {
    font-size: 1.2rem;
    font-family: "Josefin Sans", sans-serif;
    line-height: 1;
}

/* ---------- shop-detail（新デザイン shopd_） ---------- */
.shopd_open-badge {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border: 1px solid #806F3F;
    color: #806F3F;
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.shopd_image {
    margin-top: 2rem;
    aspect-ratio: 329 / 225;
    overflow: hidden;
}

.shopd_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shopd_info {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 40rem;
    margin-inline: auto;
}

.shopd_info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #FFFFFF;
}

.shopd_info-item:last-child {
    border-bottom: none;
}

.shopd_info-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 11rem;
    padding: 6px 10px 3px;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.05em;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 500;
}

.shopd_info-value {
    color: #FFFFFF;
    font-size: 1.3rem;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.shopd_info-address {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.shopd_info-pin {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 2px;
}

.shopd_reserve-wrapper {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.shopd_reserve {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25rem;
    height: 5rem;
    background-color: #8F711F;
    border-radius: 30px;
}

.shopd_reserve-icon {
    position: absolute;
    left: 2rem;
    display: inline-flex;
}

.shopd_reserve-text {
    color: #FFFFFF;
    font-size: 1.6rem;
    line-height: 1;
    padding-left: 2rem;
}

.shopd_staff {
    margin-top: 5rem;
}

.shopd_staff-head {
    padding-left: 1rem;
}

.shopd_staff-head-en {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #FFFFFF;
    font-size: 2.4rem;
    line-height: 1;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 500;
}

.shopd_staff-head-en::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #FFFFFF;
}

.shopd_staff-head-ja {
    margin-top: 5px;
    color: #FFFFFF;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.1em;
}

.shopd_staff-list {
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
}

.shopd_staff-item {
    width: 100%;
}

@media screen and (min-width: 385px) {
    .shopd_staff-item {
        width: calc(50% - 1.5rem);
        min-width: 14rem;
    }
}

.shopd_staff-image {
    overflow: hidden;
}

.shopd_staff-image img {
    width: 100%;
    height: auto;
}

.shopd_staff-role {
    margin-top: 1rem;
    color: #FFFFFF;
    font-size: 1rem;
    line-height: 1;
}

.shopd_staff-name {
    margin-top: 1rem;
}

.shopd_staff-name-en {
    color: #806F3F;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: 0.05em;
    font-family: "Josefin Sans", sans-serif;
}

.shopd_staff-name-ja {
    margin-top: 3px;
    color: #FFFFFF;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.2em;
}

.shopd_staff-note {
    margin-top: 5px;
    padding: 5px;
    background-color: #1C1C1C;
    color: #FFFFFF;
    font-size: 1.1rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.shopd_staff-buttons {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.shopd_staff-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 21px;
    padding: 0 10px;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: 0.05em;
}

.shopd_staff-button svg {
    flex-shrink: 0;
}

.shopd_contact-fixed {
    position: fixed;
    left: 0;
    bottom: 12rem;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 5rem;
    padding: 0 2rem;
    background-color: #8F711F;
    border-radius: 0 5px 5px 0;
    box-shadow: 2px 2px 2px color-mix(in srgb, #1C1C1C 60%, transparent);
    color: #FFFFFF;
    font-size: 1.4rem;
    line-height: 1;
}

.shopd_contact-fixed-icon {
    display: inline-flex;
    flex-shrink: 0;
}

@media (any-hover: hover) {
    .shopd_reserve:hover,
    .shopd_staff-button:hover,
    .shopd_contact-fixed:hover {
        opacity: 0.85;
    }

    .shopd_reserve:focus-visible,
    .shopd_staff-button:focus-visible,
    .shopd_contact-fixed:focus-visible {
        opacity: 0.85;
    }
}

/* ---------- menu ---------- */
.menu_menu {
    padding: 5rem 3rem 10rem;
    border-bottom: 1px solid #C2C2C2;
}

.menu_menu-content{
    margin-top: 7rem;
}

.menu_menu-wrapper:not(:first-child)::before {
    margin-top: 5rem;
    margin-bottom: 5rem;
    content: "";
    display: inline-block;
    width: 100%;
    height: 2px;

    background: repeating-linear-gradient(
        to right,
        #806F3F 0,
        #806F3F 3px,
        transparent 3px,
        transparent 6px
    );
}

.menu_menu-head {
    padding: 1rem;
    color: #806F3F;
    border: 1px solid #806F3F;
    text-align: center;
}

.menu_menu-list {
    margin-top: 3rem;
    color: #FFFFFF;
    font-size: 1.8rem;
    max-width: 40rem;
    margin-inline: auto;
}

.menu_menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    line-height: 1;
}

.menu_menu-item:not(:first-of-type) {
    margin-top: 1.5rem;
}

.menu_menu-item--stylist {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.7rem;
}

.menu_menu-price-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.menu_menu-stylist {
    white-space: nowrap;
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.4rem;
}

.menu_menu-name {
    white-space: nowrap;
}

.menu_menu-note {
    font-size: 1.2rem;
}

.menu_menu-note_lg {
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.4rem;
}

.menu_menu-line {
    flex: 1;
    border-bottom: 1px solid color-mix(in srgb, #FFFFFF 50%, transparent 50%);
    margin: 0 8px;
}

.menu_menu-price {
    font-family: "fot-rodin-pron", sans-serif;
    font-size: 1.5rem;
    white-space: nowrap;
}

.menu_menu-price_yen {
    font-size: 1.2rem;
    margin-right: 2px;
}

.menu_menu-nomination-fee {
    margin-top: 5rem;
    width: 20rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: 1px solid #FFFFFF;
    padding: 1.5rem;
}

.menu_menu-nomination-name {
    font-size: 1.4rem;
    margin-bottom: 2px;
    font-weight: 500;
}

/* ------ gallery ------ */
.gallery {
    padding: 5rem 3rem 10rem;
    background-color: #FFFFFF;
}

.gallery_list {
    margin-top: 5rem;
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.gallery_item {
    width: 100%
}

@media screen and (min-width: 385px) {
    .gallery_item {
        width: calc(50% - 1.5rem);
        min-width: 14rem;
    }
}

.gallery_item-title {
    font-size: 1.4rem;
    font-family: "Josefin Sans", sans-serif;
    line-height: 1;
    letter-spacing: 0.05em;
    color: #8F711F;
    text-transform: uppercase;
}

/* ------ hairstyle archive (page-hair-style) ------ */
.hairstyle_archive {
    padding: 5rem 3rem 10rem;
    background-color: #313131;
    border-bottom: 1px solid #C2C2C2;
}

.hairstyle_archive_list {
    margin-top: 5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.hairstyle_archive_item {
    width: calc(50% - 0.5rem);
}

.hairstyle_archive_item-image {
    aspect-ratio: 155 / 207;
}

.hairstyle_archive_item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hairstyle_archive_empty {
    margin-top: 5rem;
    color: #2C2C2C;
    text-align: center;
    font-size: 1.4rem;
}

.hairstyle_archive_pagination {
    margin-top: 5rem;
}

.hairstyle_archive_pagination .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    font-family: "Josefin Sans", sans-serif;
}

.hairstyle_archive_pagination .page-numbers {
    font-size: 1.4rem;
    line-height: 1;
    color: #2C2C2C;
}

.hairstyle_archive_pagination .current {
    color: #806F3F;
    font-weight: 700;
}

.hairstyle_archive_pagination a.page-numbers:focus-visible {
    outline: 2px solid #806F3F;
    outline-offset: 4px;
}

@media (any-hover: hover) {
    .hairstyle_archive_pagination a.page-numbers:hover {
        color: #806F3F;
    }
}

/* ====== about us ====== */
.about_concept,
.about_quality,
.about_sns {
    background-color: #313131;
}

.about_concept {
    padding-top: 5rem;
}

.about_concept .section_title_wrapper {
    padding-inline: 3rem;
}

.about_concept_copy {
    margin-top: 3rem;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1;
    text-align: center;
    letter-spacing: 0.05em;
}

.about_concept_desc-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    padding-inline: 3rem;
}

.about_concept_desc {
    font-size: 1.4rem;
    line-height: 1.7;
    text-align: center;
    letter-spacing: 0.07em;
}

.about_concept_images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 3rem;
}

.about_concept_images img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center bottom;
}

/* about 共通見出し（横線付き） */
.about_heading {
    padding-left: 4rem;
    align-self: stretch;
}

/* アンカーリンク遷移時に sticky ヘッダー(64px)分の余白を確保 */
.about_quality,
.about_sns {
    scroll-margin-top: 6.4rem;
}

.about_heading_row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.about_heading_en {
    font-family: "Josefin Sans", sans-serif;
    font-weight: 500;
    font-size: 2.4rem;
    line-height: 1;
    color: #FFFFFF;
}

.about_heading_line {
    flex: 1;
    height: 1px;
    background-color: #FFFFFF;
}

.about_heading_ja {
    margin-top: 0.5rem;
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #FFFFFF;
}

.about_heading--dark .about_heading_en,
.about_heading--dark .about_heading_ja {
    color: #2C2C2C;
}

.about_heading--dark .about_heading_line {
    background-color: #2C2C2C;
}

/* QUALITY */
.about_quality {
    display: flex;
    flex-direction: column;
    padding-top: 7rem;
}

.about_points {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.about_point {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.about_point_label {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: calc(100% - 7rem);
    padding: 0.5rem 3rem;
    background-color: #806F3F;
    color: #FFFFFF;
    clip-path: polygon(0 0, 100% 0, calc(100% - 1.6rem) 100%, 0 100%);
}

.about_point_label_en {
    font-family: "Josefin Sans", sans-serif;
    font-size: 2.4rem;
    line-height: 1;
    padding-top: 0.5rem;
}

.about_point_label_num {
    font-family: "fot-rodin-pron", sans-serif;
    font-size: 2.1rem;
    line-height: 1;
}

.about_point_body {
    display: flex;
    flex-direction: column;
    padding-inline: 3rem;
}

.about_point_title {
    font-size: 2rem;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.05em;
}

.about_point_image {
    aspect-ratio: 40 / 30;
    margin-top: 2rem;
}

.about_point_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about_point_desc {
    margin-top: 1rem;
    font-size: 1.4rem;
    line-height: 1.8;
    letter-spacing: 0.05em;
}

.about_point_desc_em {
    color: #8F711F;
    font-weight: 500;
}

/* SNS */
.about_sns {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    padding-block: 7rem;
}

.about_sns_card {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-inline: 2rem;
    padding: 3rem 2rem;
    background-color: #FFFFFF;
    border-radius: 5px;
}

.about_sns_card_intro {
    color: #2C2C2C;
    font-size: 1.4rem;
    line-height: 1.5;
    text-align: center;
    letter-spacing: 0.05em;
}

.about_sns_group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about_sns_group_head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.about_sns_group_head::before,
.about_sns_group_head::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: #C2C2C2;
}

.about_sns_group_label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2C2C2C;
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.8rem;
    line-height: 1;
}

.about_sns_group_label img {
    width: auto;
    height: 2rem;
    margin-top: -0.5rem;
}

.about_sns_links {
    display: flex;
    gap: 0.5rem;
}

.about_sns_link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    padding: 1rem;
    background-color: #806F3F;
    color: #FFFFFF;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.05em;
}

.about_sns_link--wide {
    flex: 1.8;
}

.about_sns_link_arrow {
    flex-shrink: 0;
    width: 0.95rem;
    height: 0.95rem;
    background-color: currentColor;
    -webkit-mask: url(../img/icon_external-link.svg) no-repeat center / contain;
    mask: url(../img/icon_external-link.svg) no-repeat center / contain;
}

.about_sns_link:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

@media (any-hover: hover) {
    .about_sns_link:hover {
        background-color: #7C5E0C;
    }
}

/* COMPANY */
.about_company {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    padding-block: 7rem;
    background-color: #FFFFFF;
}

.about_company_table {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    padding-inline: 3rem;
}

.about_company_row {
    display: flex;
    gap: 1rem;
}

.about_company_term {
    flex-shrink: 0;
    width: 7rem;
    padding: 0 0.5rem 1.5rem;
    border-bottom: 1px solid #C2C2C2;
    color: #2C2C2C;
    font-size: 1.4rem;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.about_company_desc {
    flex: 1;
    padding: 0 1rem 1.5rem;
    border-bottom: 1px solid #C2C2C2;
    color: #2C2C2C;
    font-size: 1.4rem;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.about_company_office {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.about_company_office:not(:first-child) {
    margin-top: 1rem;
}

.about_company_office_name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Josefin Sans", sans-serif;
    font-size: 1.4rem;
    line-height: 1;
}

.about_company_office_pin {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-color: #806F3F;
}

.about_company_office_address {
    font-size: 1.2rem;
    line-height: 1.3;
    letter-spacing: 0.05em;
}

.about_company_button-wrapper {
    text-align: center;
}

.about_company_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 25rem;
    height: 5rem;
    background-color: #8F711F;
    border-radius: 100vmax;
    color: #FFFFFF;
    font-size: 1.4rem;
    letter-spacing: 0.07em;
}

.about_company_button_arrow {
    position: absolute;
    top: 50%;
    right: 3rem;
    width: 0.5rem;
    height: 1.3rem;
    background-color: currentColor;
    -webkit-mask: url(../img/icon_arrow.svg) no-repeat center / contain;
    mask: url(../img/icon_arrow.svg) no-repeat center / contain;
    transform: translateY(-50%);
}

.about_company_button:focus-visible {
    outline: 2px solid #7C5E0C;
    outline-offset: 4px;
}

@media (any-hover: hover) {
    .about_company_button:hover {
        background-color: #7C5E0C;
    }
}

/* ====== media ====== */
.media {
    padding-top: 5rem;
    padding-bottom: 7rem;
    background-color: #313131;
    border-bottom: 1px solid #C2C2C2;
}

.media .section_title_wrapper {
    padding-inline: 3rem;
}

.media_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 3rem;
    padding-inline: 3rem;
}

.media_item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.media_item_slider {
    position: relative;
    width: 100%;
    aspect-ratio: 155 / 200;
    background-color: #FFFFFF;
    overflow: hidden;
}

.media_item_slides {
    position: absolute;
    inset: 0;
}

.media_item_slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease-in;
}

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

.media_item_slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.media_item_dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    position: absolute;
    bottom: 1rem;
    left: 0;
    z-index: 1;
    width: 100%;
}

.media_item_dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #C2C2C2;
}

.media_item_dot.is-active {
    background-color: #806F3F;
}

@media (any-hover: hover) {
    .media_item_dot:hover {
        background-color: #806F3F;
    }
}

.media_item_dot:focus-visible {
    outline: 2px solid #806F3F;
    outline-offset: 2px;
}

.media_item_info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.media_item_category {
    padding: 0.3rem 1rem;
    border: 1px solid #806F3F;
    border-radius: 3px;
    color: #806F3F;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.05em;
}

.media_item_text {
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.media_item_issue,
.media_item_magazine {
    display: block;
}

.media_empty {
    margin-top: 5rem;
    padding-inline: 3rem;
    text-align: center;
    font-size: 1.4rem;
}

.media_pagination {
    margin-top: 5rem;
}

.media_pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.media_pagination .page-numbers {
    font-family: "fot-rodin-pron", sans-serif;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 0.2em;
    color: #FFFFFF;
}

.media_pagination .current {
    position: relative;
    color: #806F3F;
}

.media_pagination .current::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.5rem;
    height: 1px;
    background-color: #806F3F;
}

.media_pagination a.page-numbers:focus-visible {
    outline: 2px solid #806F3F;
    outline-offset: 4px;
}

@media (any-hover: hover) {
    .media_pagination a.page-numbers:hover {
        color: #806F3F;
    }
}

/* ---------- contact ---------- */
.contact {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 5rem 3rem;
}

.contact_lead {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.contact_lead_text {
    text-align: center;
    color: #2C2C2C;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.contact_lead_em {
    color: #806F3F;
}

.contact_line {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 25rem;
    height: 5rem;
    background-color: #8F711F;
    border-radius: 30px;
    color: #FFFFFF;
    font-size: 1.6rem;
    line-height: 1;
    transition: background-color 0.2s ease-in;
}

.contact_line_icon {
    position: absolute;
    left: 3rem;
    width: 25px;
    height: 24px;
}

@media (any-hover: hover) {
    .contact_line:hover {
        background-color: #7C5E0C;
    }
}

.contact_line:focus-visible {
    outline: 2px solid #7C5E0C;
}

/* ----- contact form (Contact Form 7) ----- */
.contact_form .wpcf7 {
    margin: 0;
}

.contact_fields {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact_field_head {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}

.contact_field_label {
    color: #3A3A3A;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
}

.contact_field_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 2px;
    color: #FFFFFF;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
}

.contact_field_badge--required {
    background-color: #806F3F;
}

.contact_field_badge--optional {
    background-color: #C2C2C2;
}

.contact_form .wpcf7-form-control-wrap {
    display: block;
}

.contact_input,
.contact_textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid #C2C2C2;
    border-radius: 5px;
    background-color: #FFFFFF;
    color: #2C2C2C;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.contact_textarea {
    min-height: 18rem;
    resize: vertical;
}

.contact_input::placeholder,
.contact_textarea::placeholder {
    color: #C2C2C2;
}

.contact_input:focus-visible,
.contact_textarea:focus-visible {
    outline: none;
    border-color: #806F3F;
    box-shadow: 0 0 0 1px #806F3F;
}

.contact_field--agree {
    margin-top: 1rem;
}

.contact_field--agree .wpcf7-acceptance {
    display: block;
}

.contact_field--agree .wpcf7-list-item {
    display: block;
    margin: 0;
}

.contact_field--agree label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2C2C2C;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.contact_field--agree input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1px solid #C2C2C2;
    border-radius: 2px;
    background-color: #FFFFFF;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px;
    cursor: pointer;
}

.contact_field--agree input[type="checkbox"]:checked {
    border-color: #806F3F;
    background-color: #806F3F;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.contact_field--agree input[type="checkbox"]:focus-visible {
    outline: 2px solid #7C5E0C;
    outline-offset: 2px;
}

.contact_field--agree .wpcf7-list-item-label a {
    color: #806F3F;
    border-bottom: 1px solid #806F3F;
}

.contact_submit-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

.contact_submit {
    display: inline-block;
    padding: 1.5rem 5rem;
    border: none;
    border-radius: 5px;
    background-color: #2C2C2C;
    color: #FFFFFF;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background-color 0.2s ease-in;
}

@media (any-hover: hover) {
    .contact_submit:hover {
        background-color: #806F3F;
    }
}

.contact_submit:focus-visible {
    outline: 2px solid #7C5E0C;
}

.contact_form .wpcf7-spinner {
    margin: 0 0 0 1rem;
}

.contact_form .wpcf7-not-valid-tip {
    margin-top: 5px;
    color: #C0392B;
    font-size: 1.2rem;
    letter-spacing: 0.05em;
}

.contact_form .wpcf7-response-output {
    margin: 2rem 0 0;
    padding: 1rem 1.5rem;
    font-size: 1.3rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.contact_form_notice {
    color: #2C2C2C;
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

/* ---------- privacy policy ---------- */
.privacy {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    padding: 5rem 3rem;
}

.privacy_intro {
    color: #2C2C2C;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.privacy_article {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.privacy_article_title {
    padding-bottom: 5px;
    border-bottom: 1px solid #806F3F;
    color: #806F3F;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
}

.privacy_article_text {
    color: #2C2C2C;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.privacy_list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
}

.privacy_list_item {
    position: relative;
    padding-left: 1.5rem;
    color: #2C2C2C;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.05em;
}

.privacy_list_item::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 1rem;
    height: 1rem;
    background-color: #806F3F;
}

.privacy_window {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.privacy_window_line {
    color: #806F3F;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

/* ----- 404 ----- */
.page_404 {
    min-height: calc(100vh - 64px - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 2rem;
}

.page_404_inner {
    max-width: 50rem;
    margin-inline: auto;
}

.page_404_content {
    margin-top: 4rem;
}

.page_404_message {
    font-size: 1.6rem;
    line-height: 1.8;
    color: #FFFFFF;
    margin-bottom: 4rem;
}

.page_404_button-wrapper {
    display: flex;
    justify-content: center;
}


/* -----------ipad-----------*/

@media screen and (min-width:640px) {
    .sp {
        display: block;
    }
    .pc {
        display: none;
    }
}

/* -----------PC-----------*/

@media screen and (min-width:960px) {
    .sp {
        display: none;
    }
    .pc {
        display: block;
    }

    .header-inner {
        justify-content: flex-end;
    }

    .hamburger {
        display: none;
    }

    .nav-overlay {
        top: 0;
        right: 0;
        left: auto;
        bottom: auto;
        opacity: 1;
        width: calc(100% - 50rem);
        max-width: 40rem;
        height: 100%;
        pointer-events: visible;
        background-color: #212121;
    }

    .nav-overlay[hidden] {
        display: grid;
    }

    .cta_button {
        display: none;
    }

    .site-header {
        margin-left: 2rem;
    }
    .main {
        margin-left: 2rem;
    }
    .footer {
        margin-left: 2rem;
    }
}


@media screen and (min-width:1080px) {
    .sp {
        display: none;
    }

    .pc {
        display: block;
    }

    .side_left { 
        position: fixed;
        top: 0;
        left: 0;
        width: calc((100% - 50rem) / 2);
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #212121;
    }

    .side_left_image {
        width: 14.6rem;
    }


    .nav-overlay {
        width: calc((100% - 50rem) / 2);
        max-width: none;
    }

    .site-header {
        margin-inline: auto;
    }
    .main {
        margin-inline: auto;
    }
    .footer {
        margin-inline: auto;
    }

}