:root{
  --ivory:#fbfaf5;
  --sage:#879885;
  --sage-dark:#667967;
  --sage-pale:#e8eee6;
  --greige:#d7cdc0;
  --beige:#eee7dc;
  --brown:#6b6157;
  --ink:#4f504a;
  --white:#ffffff;
  --line:#dedbd2;
}

/* =========================
   RESET / BASE
========================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.9;
}

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

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

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

h1,
h2,
h3,
.brand strong{
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
}


/* =========================
   SAMPLE BAR
========================= */

.sample-bar{
  height:38px;
  padding:0 4vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#4e554f;
  color:#fff;
  font-size:11px;
  letter-spacing:.08em;
  position:relative;
  z-index:30;
}

.sample-bar span{
  font-weight:700;
  letter-spacing:.18em;
}


/* =========================
   HEADER
========================= */

.site-header{
  height:82px;
  padding:8px 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:25;

  background:rgba(251,250,245,.95);
  backdrop-filter:blur(10px);

  border-bottom:1px solid rgba(135,152,133,.18);
}

.brand{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.brand-small{
  color:var(--sage);
  font-size:9px;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.brand strong{
  color:var(--sage-dark);
  font-size:34px;
  font-weight:400;
  letter-spacing:.08em;
}

.site-header nav{
  display:flex;
  align-items:center;
  gap:25px;
  font-size:11px;
  letter-spacing:.12em;
}

.site-header nav a{
  transition:opacity .2s;
}

.site-header nav a:hover{
  opacity:.6;
}

.site-header nav .reserve{
  padding:10px 16px;
  border:1px solid var(--sage);
}

.menu-btn{
  display:none;
  border:0;
  background:none;
  color:var(--sage-dark);
  font-size:22px;
  cursor:pointer;
}

.mobile-nav{
  display:none;
}


/* =========================
   HERO
========================= */

.hero{
  height:calc(100vh - 120px);
  min-height:650px;

  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;

  background:
    url("../../hero.jpg")
    center 55% / cover
    no-repeat;
}

.hero-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(32,38,34,.66) 0%,
      rgba(35,40,36,.48) 34%,
      rgba(35,38,35,.18) 72%,
      rgba(30,32,30,.08) 100%
    );

  z-index:1;
}

.hero-copy{
  position:relative;
  z-index:3;

  width:min(720px,84vw);
  margin-left:8vw;

  color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.25);
}

.hero-en,
.eyebrow{
  margin-bottom:18px;

  color:#fff;

  font-size:11px;
  letter-spacing:.25em;
}

.hero-copy h1,
.hero h1{
  margin-bottom:22px;

  color:#fff;

  font-size:clamp(40px,5vw,68px);
  font-weight:400;
  line-height:1.48;
  letter-spacing:.03em;
}

.hero-copy > p:not(.hero-en):not(.eyebrow){
  max-width:600px;

  color:#fff;

  font-size:16px;
  line-height:2;
}

.hero-btn,
.btn{
  display:inline-block;

  margin-top:28px;
  padding:13px 30px;

  background:rgba(255,255,255,.94);
  color:var(--sage-dark);

  font-size:12px;
  font-weight:700;
  letter-spacing:.10em;

  transition:
    transform .2s,
    background .2s;
}

.hero-btn:hover,
.btn:hover{
  transform:translateY(-2px);
  background:#fff;
}

.scroll{
  position:absolute;
  right:3vw;
  bottom:28px;
  z-index:3;

  color:#fff;

  font-size:9px;
  letter-spacing:.25em;

  writing-mode:vertical-rl;
}

.hero-location{
  position:absolute;
  right:3vw;
  bottom:28px;
  z-index:3;

  color:#fff;

  font-size:10px;
  letter-spacing:.25em;
}


/* =========================
   COMMON SECTION
========================= */

.section{
  padding:110px clamp(22px,8vw,120px);
}

.section-title > p,
.mini{
  margin-bottom:10px;

  color:var(--sage);

  font-size:10px;
  font-weight:700;
  letter-spacing:.28em;
}

.section-title h2,
.access h2,
.therapist h2{
  color:var(--brown);

  font-size:clamp(30px,4vw,48px);
  font-weight:400;
  line-height:1.55;
}

.section-title.center{
  margin-bottom:50px;
  text-align:center;
}

.section-title.center span{
  color:#7b7a72;
  font-size:13px;
}


/* =========================
   CONCEPT
========================= */

.concept-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:80px;
  align-items:center;
}

.concept-photo img{
  aspect-ratio:4/3;
  object-fit:cover;
}

.concept-copy .lead{
  color:var(--brown);

  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:21px;
  line-height:2;
}

.concept-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin-top:28px;
}

.concept-points span{
  padding:8px 15px;

  border:1px solid var(--greige);

  font-size:11px;
  letter-spacing:.08em;
}


/* =========================
   MENU
========================= */

.menu-section{
  background:var(--sage-pale);
}

.menu-grid{
  max-width:1150px;
  margin:auto;

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.menu-card{
  position:relative;

  padding:38px 30px;

  background:var(--ivory);
  border:1px solid rgba(135,152,133,.18);
}

.menu-card.featured{
  border-color:var(--sage);
  box-shadow:0 15px 40px rgba(80,95,75,.10);
}

.menu-card .tag{
  position:absolute;
  top:-13px;
  left:50%;

  transform:translateX(-50%);

  padding:4px 14px;

  background:var(--sage);
  color:#fff;

  font-size:9px;
  letter-spacing:.15em;
}

.menu-no{
  margin-bottom:8px;

  color:#aaa;

  font-family:serif;
  font-size:28px;
}

.menu-card h3{
  margin-bottom:0;

  color:var(--brown);

  font-size:26px;
  font-weight:400;
}

.menu-card .jp{
  color:#777;
  font-size:12px;
}

.menu-card .price{
  margin:20px 0 14px;

  color:var(--sage-dark);

  font-family:serif;
  font-size:23px;
}

.menu-card > p:last-child{
  font-size:13px;
}

.menu-note{
  margin-top:25px;

  color:#888;

  font-size:11px;
  text-align:center;
}


/* =========================
   THERAPIST
========================= */

.therapist{
  background:var(--ivory);
}

.therapist-grid{
  max-width:1050px;
  margin:auto;

  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:center;
}

.portrait-placeholder{
  height:560px;

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

  background:
    linear-gradient(
      150deg,
      #d8d2c6,
      #bfc8bb
    );

  color:#fff;
  text-align:center;
}

.portrait-placeholder span{
  font-size:10px;
  letter-spacing:.25em;
}

.portrait-placeholder strong{
  margin:8px 0;

  font-family:serif;
  font-size:34px;
  font-weight:400;
}

.portrait-placeholder small{
  opacity:.8;
}

.therapist-copy .name{
  margin:22px 0;
  padding-left:16px;

  border-left:2px solid var(--sage);
}

.therapist-copy ul{
  padding-left:18px;
  font-size:13px;
}


/* =========================
   SALON / GALLERY
========================= */

.salon-section{
  background:#f2eee6;
}

.gallery{
  max-width:1120px;
  margin:auto;

  display:grid;
  grid-template-columns:1.25fr .75fr;
  grid-template-rows:270px 270px;
  gap:15px;
}

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

.g1{
  grid-row:1/3;
}

.g2{
  object-position:center 62%;
}

.g3{
  object-position:center;
}

.g4{
  display:none;
}

.caption{
  margin:22px 0 0;

  color:#7d7a73;

  font-size:11px;
  text-align:center;
}


/* =========================
   ACCESS
========================= */

.access-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  align-items:center;
}

.access-photo img{
  aspect-ratio:4/5;
  object-fit:cover;
}

.access-copy dl{
  margin:25px 0;
}

.access-copy dl div{
  display:grid;
  grid-template-columns:90px 1fr;

  padding:11px 0;

  border-bottom:1px solid var(--line);
}

.access-copy dt{
  color:var(--sage);

  font-size:11px;
  font-weight:700;
}

.access-copy dd{
  margin:0;
  font-size:13px;
}

.map-placeholder{
  height:180px;

  display:grid;
  place-items:center;

  background:#e5e1d8;
  color:#8c8a82;

  font-size:12px;
  letter-spacing:.10em;
}


/* =========================
   CONTACT
========================= */

.contact{
  padding:110px 20px;

  background:var(--sage-dark);
  color:#fff;

  text-align:center;
}

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

.contact .mini{
  color:#d5dfd2;
}

.contact h2{
  color:#fff;

  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:38px;
  font-weight:400;
}

.line-btn{
  margin-top:26px;
  padding:14px 25px;

  display:inline-flex;
  align-items:center;
  gap:13px;

  background:#fff;
  color:var(--sage-dark);

  font-weight:700;
}

.line-btn span{
  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#06c755;
  color:#fff;

  font-size:9px;
}

.contact-note{
  margin-top:13px;

  font-size:10px;
  opacity:.75;
}


/* =========================
   FOOTER
========================= */

.site-footer,
footer{
  padding:30px 5vw;

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

  background:#3f4941;
  color:#dfe4dd;
}

.footer-brand{
  display:flex;
  flex-direction:column;
}

.footer-brand span{
  color:#bdc7bd;

  font-size:9px;
  letter-spacing:.18em;
}

.footer-brand strong,
footer strong{
  color:#fff;

  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:28px;
  font-weight:400;
}

.site-footer p,
footer p{
  margin:0;

  font-size:10px;
}

.sample-credit{
  color:#adb7ae;
}


/* =========================
   ANIMATION
========================= */

.reveal{
  opacity:0;
  transform:translateY(22px);

  transition:
    opacity .75s ease,
    transform .75s ease;
}

.reveal.show{
  opacity:1;
  transform:none;
}


/* =========================
   TABLET
========================= */

@media(max-width:850px){

  .site-header nav{
    display:none;
  }

  .menu-btn{
    display:block;
  }

  .mobile-nav{
    position:fixed;
    top:120px;
    left:0;
    right:0;

    z-index:24;

    padding:18px 24px;

    background:var(--ivory);

    border-bottom:1px solid var(--line);
  }

  .mobile-nav.open{
    display:grid;
  }

  .mobile-nav a{
    padding:10px 0;

    border-bottom:1px solid var(--line);

    font-size:12px;
  }

  .hero{
    height:720px;

    background-position:62% 54%;
  }

  .hero-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(35,40,35,.20) 0%,
        rgba(32,36,32,.38) 45%,
        rgba(28,31,28,.72) 100%
      );
  }

  .hero-copy{
    width:86vw;
    margin:auto 7vw 80px;
    align-self:flex-end;
  }

  .hero-copy h1,
  .hero h1{
    font-size:44px;
  }

  .scroll{
    display:none;
  }

  .pc{
    display:none;
  }

  .concept-grid,
  .therapist-grid,
  .access-grid{
    grid-template-columns:1fr;
    gap:35px;
  }

  .menu-grid{
    grid-template-columns:1fr;
  }

  .portrait-placeholder{
    height:440px;
  }

  .gallery{
    grid-template-columns:1fr 1fr;
    grid-template-rows:240px 200px;
  }

  .g1{
    grid-column:1/3;
    grid-row:auto;
  }

  .g4{
    display:block;
  }
}


/* =========================
   SMARTPHONE
========================= */

@media(max-width:560px){

  .sample-bar{
    height:34px;
    padding:0 14px;

    font-size:8px;
  }

  .site-header{
    height:72px;
    padding:7px 16px;
  }

  .brand strong{
    font-size:28px;
  }

  .hero{
    height:680px;
    min-height:0;

    background-position:64% center;
  }

  .hero-copy{
    width:88vw;
    margin:auto 6vw 58px;
  }

  .hero-copy h1,
  .hero h1{
    font-size:36px;
    line-height:1.55;
  }

  .hero-copy > p:not(.hero-en):not(.eyebrow){
    font-size:14px;
    line-height:1.9;
  }

  .hero-btn,
  .btn{
    margin-top:20px;
  }

  .section{
    padding:80px 20px;
  }

  .concept-copy .lead{
    font-size:18px;
  }

  .gallery{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }

  .gallery img{
    height:220px;
  }

  .g1{
    grid-column:auto;
  }

  .site-footer,
  footer{
    display:block;
    text-align:center;
  }

  .site-footer p,
  footer p{
    margin-top:15px;
  }

  .sample-credit{
    margin-top:8px !important;
  }
}
/* HERO 最終微調整 */

.hero-copy h1,
.hero h1{
  color:#ffffff !important;
  opacity:1 !important;
  margin-left:0 !important;
  padding-left:0 !important;
  text-shadow:0 3px 18px rgba(0,0,0,.38);
}

.hero-copy{
  margin-left:8vw !important;
}

.hero-en{
  color:rgba(255,255,255,.9) !important;
}

.hero-copy > p{
  color:#ffffff !important;
}

@media(max-width:850px){
  .hero-copy{
    margin-left:7vw !important;
  }
}
/* ===== HERO：初期デザイン復元 ===== */

.hero{
  height:calc(100vh - 120px);
  min-height:650px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:url("../../hero.jpg") center 55% / cover no-repeat;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(37,40,35,.55),
    rgba(44,45,40,.15) 65%,
    rgba(20,20,18,.08)
  );
  z-index:1;
}

.hero-copy{
  position:relative;
  z-index:2;
  color:#fff;
  width:min(700px,86vw);
  margin-left:8vw;
  text-shadow:0 2px 15px rgba(0,0,0,.22);
}

.eyebrow{
  font-size:11px;
  letter-spacing:.25em;
  margin-bottom:17px;
  color:#fff;
}

.hero h1{
  font-size:clamp(38px,5vw,68px);
  line-height:1.48;
  font-weight:400;
  letter-spacing:.03em;
  margin-bottom:18px;
  color:#fff;
}

.hero-copy > p:not(.eyebrow){
  font-size:16px;
  color:#fff;
  line-height:2;
}

.btn{
  display:inline-block;
  margin-top:27px;
  padding:13px 28px;
  background:rgba(255,255,255,.92);
  color:var(--sage-dark);
  font-weight:700;
  font-size:13px;
  letter-spacing:.05em;
}

.hero-location{
  position:absolute;
  right:3vw;
  bottom:25px;
  z-index:2;
  color:#fff;
  font-size:10px;
  letter-spacing:.25em;
}

.scroll,
.hero-btn,
.hero-en{
  display:none !important;
}

@media(max-width:850px){
  .hero{
    height:720px;
    background-position:62% 54%;
  }

  .hero-overlay{
    background:linear-gradient(
      180deg,
      rgba(37,40,35,.28),
      rgba(34,35,32,.62)
    );
  }

  .hero-copy{
    margin:auto;
    width:86vw;
    align-self:flex-end;
    margin-bottom:85px;
  }

  .pc{
    display:none;
  }
}

@media(max-width:560px){
  .hero{
    height:680px;
  }

  .hero h1{
    font-size:38px;
  }

  .hero-copy{
    margin-bottom:60px;
  }
}
/* ===== Natural HERO PC 改行調整 ===== */
@media (min-width: 851px) {
  .hero-copy {
    width: min(820px, 86vw);
  }

  .hero h1 {
    white-space: nowrap;
  }
}
/* CONCEPT リード文 */
.concept-copy .concept-lead {
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  line-height: 2;
}
/* THERAPIST PROFILE PHOTO */

.therapist-photo img{
  width:100%;
  height:560px;
  object-fit:cover;
  object-position:center;
}

@media(max-width:850px){
  .therapist-photo img{
    height:440px;
  }
}

@media(max-width:560px){
  .therapist-photo img{
    height:auto;
    aspect-ratio:4/5;
    object-fit:cover;
  }
}
@media (min-width: 769px) {
  .therapist-copy h2 {
    white-space: nowrap;
  }
}
/* ===== THERAPIST PHOTO PC 微調整 ===== */
@media (min-width: 851px) {

  .therapist-photo {
    height: 560px;
    overflow: hidden;
  }

  .therapist-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.20);
    transform-origin: center center;
  }

}
/* =========================
   SAMPLE NAVIGATION
========================= */

.sample-navigation{
  padding:90px 24px 80px;
  text-align:center;
  background:var(--ivory);
  border-top:1px solid rgba(135,152,133,.16);
}

.sample-navigation-label{
  margin-bottom:12px;
  color:var(--sage);
  font-size:10px;
  font-weight:700;
  letter-spacing:.28em;
}

.sample-navigation h2{
  margin-bottom:12px;
  color:var(--brown);
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:34px;
  font-weight:400;
}

.sample-navigation-text{
  margin-bottom:38px;
  color:#777;
  font-size:13px;
}

.sample-navigation-links{
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
}

.sample-navigation-links a{
  min-height:92px;
  padding:20px 18px;

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

  border:1px solid var(--greige);
  background:#fff;

  color:var(--brown);
  font-size:15px;

  transition:
    transform .2s,
    border-color .2s,
    background .2s;
}

.sample-navigation-links a span{
  margin-bottom:4px;
  color:var(--sage);
  font-size:9px;
  font-weight:700;
  letter-spacing:.18em;
}

.sample-navigation-links a:hover{
  transform:translateY(-2px);
  border-color:var(--sage);
  background:var(--sage-pale);
}

.sample-navigation-all{
  border-color:var(--sage) !important;
}

.sample-navigation-top{
  display:inline-block;
  margin-top:34px;

  color:var(--sage-dark);
  font-size:11px;
  letter-spacing:.08em;

  border-bottom:1px solid var(--sage);
  padding-bottom:3px;
}

/* smartphone */
@media(max-width:560px){

  .sample-navigation{
    padding:70px 20px 65px;
  }

  .sample-navigation h2{
    font-size:28px;
  }

  .sample-navigation-text{
    margin-bottom:28px;
  }

  .sample-navigation-links{
    grid-template-columns:1fr;
    gap:12px;
  }

  .sample-navigation-links a{
    min-height:76px;
  }

  .sample-navigation-top{
    margin-top:28px;
  }

}
/* ========================================
   NATURAL / SMARTPHONE 最終調整
======================================== */

@media (max-width:560px){

  /* -------------------------
     HERO
  ------------------------- */

  .hero-copy{
    width:88vw;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-bottom:58px;
  }

  .hero h1,
  .hero-copy h1{
    font-size:27px !important;
    line-height:1.65;
    letter-spacing:.02em;
  }

  .eyebrow{
    font-size:10px;
    letter-spacing:.22em;
    white-space:nowrap;
  }

  .hero-copy > p:not(.eyebrow){
    font-size:13px;
    line-height:1.9;
  }

  /* -------------------------
     CONCEPT
     PC用に入れた改行をスマホでは解除
  ------------------------- */

  .concept-copy br{
    display:none;
  }

  .concept-copy p{
    font-size:15px;
    line-height:2.15;
    letter-spacing:0;
    line-break:strict;
    word-break:normal;
  }

  .concept-copy .concept-lead{
    font-size:17px;
    line-height:2.05;
  }

  /* -------------------------
     THERAPIST
  ------------------------- */

  .therapist-copy h2{
    font-size:30px;
    line-height:1.7;
  }

  .therapist-copy p{
    font-size:15px;
    line-height:2.05;
  }

  /* -------------------------
     ACCESS
  ------------------------- */

  .access h2,
  .access-copy h2{
    font-size:30px;
    line-height:1.55;
    white-space:nowrap;
  }

  .access-copy > p{
    font-size:14px;
    line-height:2;
  }

  /* -------------------------
     RESERVATION
  ------------------------- */

  .contact h2{
    font-size:28px;
    line-height:1.6;
    white-space:nowrap;
  }

  .contact-inner > p{
    font-size:14px;
    line-height:2;
  }

  .line-btn{
    padding:13px 20px;
    font-size:14px;
  }

/* ========================================
   NATURAL / スマホ 改行位置の確定版
======================================== */

@media (max-width:560px){

  /* ① HERO
     「植物の香り〜で、」で一度改行する */
  .hero-copy br.pc{
    display:block !important;
  }

  /* ② CONCEPT
     HTMLで指定してある
     「うちに」→「力が入って〜」の改行を復活 */
  .concept-copy br{
    display:block !important;
  }

  /* 文字サイズは一つ前の綺麗だった状態へ戻す */
  .hero-copy > p:not(.eyebrow){
    font-size:13px;
    letter-spacing:0;
  }

  .concept-copy p{
    font-size:15px;
    letter-spacing:0;
  }

  .contact-inner > p{
    font-size:14px;
    letter-spacing:0;
  }

  /* ③ 「ご相談ください。」だけは途中で割らせない */
  .contact .no-break{
    white-space:nowrap;
  }

}