@charset "UTF-8";

:root{
  --c-black:#0a0a0a;
  --c-white:#ffffff;
  --c-orange:#efa21c;
  --c-text:#222222;
  --c-gray:#888888;
  --c-line:#dddddd;
  /* ===== 色替え(テーマ)用トークンは theme.css に集約（既定値・各色の上書きとも） ===== */
  --maxw:1920px;
  --navw:clamp(240px, calc(100vw * 0.375 - 240px), 480px);
  --pad:118px;
  --content-h:760px;
  --band-h:480px;
  --band-h2:640px;
  --f-en:'Anton',sans-serif;
  --f-jp:'Zen Kaku Gothic New',sans-serif;
  --f-roboto:'Roboto',sans-serif;
  --f-script:'Alex Brush',cursive;
  --italic-angle:10deg;
  --italic:skewX(calc(-1 * var(--italic-angle)));
}

/* 色替えパターン（テーマ）の定義は theme.css に集約（全CSSの最後に読み込む） */

*,*::before,*::after{box-sizing:border-box;}
html{
  font-size:62.5%;
  scroll-behavior:smooth;
}
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-smooth iframe{pointer-events:none;}
body{
  margin:0;
  font-family:var(--f-jp);
  color:var(--c-text);
  background:var(--c-white);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{
  display:block;
  max-width:100%;
  height:auto;
}
a{
  text-decoration:none;
  color:inherit;
}
ul{
  list-style:none;
  margin:0;
  padding:0;
}
h1,h2,p,dl,dd,dt{margin:0;}
button{
  font-family:inherit;
  cursor:pointer;
  border:none;
  background:none;
}

body{
  max-width:var(--maxw);
  margin-inline:auto;
  position:relative;
}

/* =========================================================
   共通パーツ
   ========================================================= */
.sec_head_en{
  font-family:var(--f-en);
  font-weight:400;
  font-size:clamp(4rem,80.64px,8rem);
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.sec_head_jp{
  font-family:var(--f-jp);
  font-weight:700;
  font-size:clamp(1.6rem,24px,2.4rem);
  margin-top:.6em;
}
.sec_head__center{text-align:center;}
.sec_head__center .sec_head_jp{display:inline-block;}

.sec_head_vert{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:1.2rem;
}
.sec_head_vert_en{
  font-family:var(--f-en);
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:clamp(3rem,57.6px,5.6rem);
  letter-spacing:.05em;
}
.sec_head_vert_jp{
  font-family:var(--f-jp);
  font-weight:700;
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:clamp(1.4rem,24px,2.4rem);
  letter-spacing:.15em;
}

.btn_box{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:25.8rem;
  height:6.7rem;
  border:1px solid currentColor;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:1.3rem;
  letter-spacing:.1em;
  transition:.3s;
}
.btn_box:hover{
  background:var(--c-black);
  color:var(--c-white);
  border-color:var(--c-black);
}

.btn_round{
  --b-bg:var(--c-black);
  --b-fg:var(--c-white);
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  width:256px;
  height:64px;
  background:var(--b-bg);
  color:var(--b-fg);
  border:1px solid var(--b-fg);
  font-family:var(--f-jp);
  font-weight:700;
  font-style:italic;
  font-size:24px;
  letter-spacing:0;
  padding-inline:16px;
  border-radius:0;
  transition:.3s;
}
.btn_round:hover{background:var(--b-fg);color:var(--b-bg);border-color:var(--b-bg);}
.btn_round_en{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--b-fg);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--f-en);
  font-size:8px;
  line-height:1.25;
  letter-spacing:.1em;
  text-align:center;
  color:var(--b-fg);
  font-style:normal;
}
.btn_round:hover .btn_round_en{border-color:var(--b-bg);color:var(--b-bg);}

.fx_up{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s ease,transform .7s ease;
}
.fx_up.is_show{
  opacity:1;
  transform:none;
}
.price .price_vert.fx_up,
.ranking .ranking_head.fx_up,
.news .news_title.fx_up{
  opacity:1;
  transform:none;
}
.price .price_vert.fx_up .price_vert_en,
.price .price_vert.fx_up .price_vert_jp,
.ranking .ranking_head.fx_up .ranking_head_jp,
.ranking .ranking_head.fx_up .ranking_head_en,
.ranking .ranking_head.fx_up .ranking_sub,
.news .news_title.fx_up .news_title_en,
.news .news_title.fx_up .news_title_jp{
  clip-path:inset(100% 0 0);
  transition:clip-path .3s ease-in;
}
.price .price_vert.fx_up.is_show .price_vert_en,
.price .price_vert.fx_up.is_show .price_vert_jp,
.ranking .ranking_head.fx_up.is_show .ranking_head_jp,
.ranking .ranking_head.fx_up.is_show .ranking_head_en,
.ranking .ranking_head.fx_up.is_show .ranking_sub,
.news .news_title.fx_up.is_show .news_title_en,
.news .news_title.fx_up.is_show .news_title_jp{
  clip-path:inset(0);
}

.about .about_title_en.fx_up,
.about .about_title_jp.fx_up{
  opacity:1;
  transform:none;
  clip-path:inset(100% 0 0);
  transition:clip-path .3s ease-in;
}
.about .about_title_en.fx_up.is_show,
.about .about_title_jp.fx_up.is_show{
  clip-path:inset(0);
}

.pp_title.fx_up,
.cp_title.fx_up,
.ac_title.fx_up,
.pf_title.fx_up,
.list_title.fx_up{
  opacity:1;
  transform:none;
}
.pp_title.fx_up .pp_title_en, .pp_title.fx_up .pp_title_jp,
.cp_title.fx_up .cp_title_en, .cp_title.fx_up .cp_title_jp,
.ac_title.fx_up .ac_title_en, .ac_title.fx_up .ac_title_jp,
.pf_title.fx_up .pf_title_en, .pf_title.fx_up .pf_title_jp,
.list_title.fx_up .list_title_en, .list_title.fx_up .list_title_jp{
  clip-path:inset(100% 0 0);
  transition:clip-path .3s ease-in;
}
.pp_title.fx_up.is_show .pp_title_en, .pp_title.fx_up.is_show .pp_title_jp,
.cp_title.fx_up.is_show .cp_title_en, .cp_title.fx_up.is_show .cp_title_jp,
.ac_title.fx_up.is_show .ac_title_en, .ac_title.fx_up.is_show .ac_title_jp,
.pf_title.fx_up.is_show .pf_title_en, .pf_title.fx_up.is_show .pf_title_jp,
.list_title.fx_up.is_show .list_title_en, .list_title.fx_up.is_show .list_title_jp{
  clip-path:inset(0);
}

.therapist .sec_head.fx_up{
  opacity:1;
  transform:none;
}
.therapist .sec_head.fx_up .sec_head_en,
.therapist .sec_head.fx_up .sec_head_jp{
  clip-path:inset(100% 0 0);
  transition:clip-path .3s ease-in;
}
.therapist .sec_head.fx_up.is_show .sec_head_en,
.therapist .sec_head.fx_up.is_show .sec_head_jp{
  clip-path:inset(0);
}

@media (prefers-reduced-motion:reduce){
  .fx_up{
    opacity:1 !important;
    transform:none !important;
    transition:none;
  }
  .therapist .sec_head .sec_head_en,
  .therapist .sec_head .sec_head_jp,
  .price .price_vert .price_vert_en,
  .price .price_vert .price_vert_jp,
  .ranking .ranking_head .ranking_head_jp,
  .ranking .ranking_head .ranking_head_en,
  .ranking .ranking_head .ranking_sub,
  .news .news_title .news_title_en,
  .news .news_title .news_title_jp,
  .about .about_title_en,
  .about .about_title_jp,
  .pp_title .pp_title_en, .pp_title .pp_title_jp,
  .cp_title .cp_title_en, .cp_title .cp_title_jp,
  .ac_title .ac_title_en, .ac_title .ac_title_jp,
  .pf_title .pf_title_en, .pf_title .pf_title_jp,
  .list_title .list_title_en, .list_title .list_title_jp{
    clip-path:none !important;
  }
}

/* =========================================================
   HEADER（追従）
   ========================================================= */
.header{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--maxw);
  height:80px;
  min-height:52px;
  z-index:100;
  pointer-events:none;
  background:transparent;
}
body:not(.page_sub) .header:not(.is_scrolled){background:transparent;}
body:not(.page_sub) .header.is_scrolled .header_logo a,
body:not(.page_sub) .header.is_scrolled .header_open{color:#000;}
.header.is_scrolled{
  position: fixed;
  background: rgba(255, 255, 255, .70);
  animation: headerFadeIn .4s ease;
}
.header.is_scrolled .header_tel{background:transparent;}
/* 中ページ(page_sub)共通の下地：白背景＋ヘッダー文字は黒。
   common/list/profile.css に同一指定が重複していたのでここへ集約。ranking は後読みの page_dark が上書きする */
body.page_sub{background:#fff;}
body.page_sub .header_logo a{color:#000;}
body.page_sub .header_open{color:#000;}
body.page_sub .header.is_scrolled{background:rgba(255,255,255,.70);}
/* 中ページのみヘッダー下に1px黒線(PSD y79=80pxヘッダー最下部・全幅)。トップは線なし。
   border-bottomだと電話白box(.header_tel)に覆われ途切れるため、::afterで前面に描画。ナビ(z110)の下には潜る=PSD通り */
body.page_sub .header::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:#000;
  pointer-events:none;
}
@keyframes headerFadeIn{
  from{opacity:0;}
}
.header_inner{
  position:relative;
  width:100%;
  height:100%;
}
.header_brand{display:contents;}
.header_logo{
  position:absolute;
  left:6.146%;
  top:50%;
  transform:translateY(-50%);
  margin:0;
  font-family:var(--f-jp);
  font-weight:900;
  font-size:24px;
  letter-spacing:0;
  white-space:nowrap;
  line-height:1;
  pointer-events:auto;
}
.header_logo a{color:var(--c-header-text);}
.header_open{
  position: absolute;
  left: 730px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-family: var(--f-roboto);
  font-size: 16px;
  color: var(--c-header-text);
  white-space: nowrap;
  letter-spacing: 0;
}
.header_tel{
  position:absolute;
  right:var(--navw);
  left:auto;
  top:0;
  width:352px;
  height:80px;
  background:var(--c-white);
  pointer-events:auto;
}
.header_tel_icon{
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid #000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.header_tel_icon img{width:19px;}
.header_tel_num{
  position:absolute;
  left:69px;
  top:50%;
  transform:translateY(-50%) var(--italic);
  font-family:var(--f-en);
  font-size:40px;
  color:#000;
  letter-spacing:.05em;
  line-height:1;
  white-space:nowrap;
}

.nav_toggle{
  position:fixed;
  top:16px;
  right:16px;
  z-index:130;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--c-black);
  pointer-events:auto;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:background .35s ease;
}
.nav_toggle span{
  display:block;
  width:30px;
  height:2px;
  background:#fff;
  border-radius:1px;
  transition:transform .35s cubic-bezier(.6,.05,.2,1),opacity .2s ease,background .35s ease;
}

.nav_toggle.is_active{background:var(--c-white);}
.nav_toggle.is_active span{background:#000;}
.nav_toggle.is_active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav_toggle.is_active span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}
.nav_toggle.is_active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav_toggle.no_anim, .nav_toggle.no_anim span{transition:none;}

body.page_sub .nav_toggle{
  display:flex;
  pointer-events:auto;
}

/* =========================================================
   GLOBAL NAV（右パネル / 初期オープン）
   ========================================================= */
.gnav{
  position:fixed;
  top:0;
  right:0;
  z-index:110;
  width:var(--navw);
  min-width:240px;
  height:100vh;
  background:var(--c-nav-bg);
  transform:translateX(100%);
  transition:transform .5s cubic-bezier(.7,0,.2,1);
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-top:96px;
  padding-bottom:48px;
}
.gnav.is_open{transform:translateX(0);}
.gnav.no_anim{transition:none;}
.gnav{scrollbar-width:none;-ms-overflow-style:none;}
.gnav::-webkit-scrollbar{width:0;height:0;display:none;}

html.nav_locked,
body.nav_locked{
  overflow:hidden;
  overscroll-behavior:none;
}

.nav_overlay{
  position:fixed;
  inset:0;
  z-index:124;
  background:rgba(42, 50, 68, .5);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s cubic-bezier(.7,0,.2,1);
}
body.nav_locked .nav_overlay{
  opacity:1;
  pointer-events:auto;
}
@media (prefers-reduced-motion:reduce){
  .nav_overlay{transition:none;}
}
.gnav_list{
  width:100%;
  padding-left:24px;
}
.gnav_item a{
  position:relative;
  display:flex;
  align-items:center;
  height:56px;
  min-height:40px;
  border-bottom:1px solid rgba(255,255,255,.2);
  color:var(--c-white);
  transition:.25s;
  overflow:hidden;
}
.gnav_item a:hover .gnav_jp{color:var(--c-accent-on-fill);}
.gnav_jp{
  position:relative;
  z-index:2;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:16px;
  letter-spacing:.1em;
  color:var(--c-nav-jp);
}
.gnav_en{
  position:absolute;
  right:-1px;
  top:50%;
  transform:translateY(-50%) var(--italic);
  z-index:1;
  font-family:var(--f-en);
  font-size:30px;
  letter-spacing:.1em;
  color:var(--c-nav-en);
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1;
}

/* =========================================================
   HERO / VISUAL
   ========================================================= */
.hero{
  position:relative;
  width:100%;
  height:min(1080px,100vh);
  font-size:0;
  background:#000;
  container-type:inline-size;
  overflow:hidden;
}
.hero_bg_img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
/* ===== ヒーロー背景：写真＋色替え可能な斜めマスク(index / index_cast / index_banner / ranking 共通) =====
   SVG(viewBox 1920×1080 / preserveAspectRatio slice=cover)で写真とマスクをロック。
   object-fit:cover;center と一致＝リサイズしても現行(hero-bg.png)と同じ。マスクは fill をシステムで変更 */
.hero_bg{
  position:absolute;
  inset:0;
  z-index:0;
}
/* 写真(select_bg=明るいカラー原版)をテーマで加工。filterは写真だけに効く(マスクには効かない)。
   ★HTMLの<img>に当てる: iOS SafariはSVG子要素へのCSS filterを描画しないため、写真はSVGの<image>ではなく<img>にしてある。
     object-fit:cover;center は下のSVG(viewBox1920×1080 + slice)と一致＝どのサイズでもマスクが写真とロックされる。 */
.hero_bg_photo{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:var(--hero-photo-filter, none);
}
.hero_bg_svg{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
.hero_bg_ov{
  fill:var(--hero-ov, #ffffff);
  opacity:var(--hero-ov-op, 0);
}
.hero_bg_mask{
  fill:var(--hero-mask, #000);
}
.hero_logo{
  position:absolute;
  left:6.146%;
  top:10.556%;
  z-index:2;
  --fs:min(calc(88.33px + 9.983cqw),25.93vh);
}
.hero_logo_en{
  margin:0;
  font-family:var(--f-en);
  font-weight:400;
  font-size:var(--fs);
  line-height:1;
  letter-spacing:0;
  color:var(--c-hero-logo);
  text-transform:uppercase;
  white-space:nowrap;
}
/* ===== ヒーロー ロード演出(参考torinox sec1) =====
   順序 ①背景のみ → ②背景以外を0.5sでフェードイン → ③大ロゴが1.0s/1.25sでワイプ → ④Siteを最後にふわっと
   各要素は animation-fill-mode:both の backwards で、delay中は from(=非表示)を保持し「最初は背景だけ」を作る */
.hero_flower,
.hero_lead_jp,
.hero_lead_en,
.hero_sns,
.hero_scroll{
  animation:heroFade .4s ease-out both;
  animation-delay:.5s;
}
@keyframes heroFade{
  from{opacity:0;}
}
body:not(.page_sub) .header_inner,
body:not(.page_sub) .nav_toggle,
body:not(.page_sub) .gnav{
  animation:heroFade .4s ease-out both;
  animation-delay:.5s;
}
body.page_sub .header_inner,
body.page_sub .nav_toggle,
body.page_sub .gnav{
  animation:heroFade .4s ease-out both;
}
.hero_logo_en span{
  display:block;
  clip-path:inset(100% 0 0);
  animation:heroLogoReveal .7s cubic-bezier(.33,0,.2,1) both;
}
.hero_logo_en span:nth-child(1){animation-delay:1s;}
.hero_logo_en span:nth-child(2){animation-delay:1.25s;}
@keyframes heroLogoReveal{
  to{clip-path:inset(0);}
}
@media (prefers-reduced-motion:reduce){
  .hero_logo_en span{clip-path:none;animation:none;}
  .hero_flower,
  .hero_lead_jp,
  .hero_lead_en,
  .hero_sns,
  .hero_scroll,
  .hero_scroll_bar,
  .hero_logo_site,
  .therapist_scroll::after,
  .header_inner,
  .nav_toggle,
  .gnav{animation:none;}
}
.hero_logo_site{
  position:absolute;
  left:calc(var(--fs)*1.64);
  top:calc(var(--fs)*0.602);
  font-size:calc(var(--fs)*0.5357);
  line-height:1;
  font-family:'Alex Brush',cursive;
  letter-spacing:.1em;
  background:linear-gradient(17deg, #ffd300 20%, #f18b1f 40%, #ffd300 70%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  transform:rotate(-28.55deg);
  transform-origin:center;
  white-space:nowrap;
  animation:heroSiteIn .7s ease-out both;
  animation-delay:1.8s;
}/* PSD Site 150px金 -28.55° */
@keyframes heroSiteIn{
  from{opacity:0;transform:rotate(-28.55deg) scale(.9);}
  to{opacity:1;transform:rotate(-28.55deg) scale(1);}
}
.hero_flower{
  position:absolute;
  left:43.906%;
  top:33.704%;
  width:min(calc(186.7px + 14.757cqw),43.52vh);
  height:auto;
  z-index:1;
}
.hero_lead_jp{
  position:absolute;
  left:6.198%;

  top:72.352%;
  z-index:2;
  margin:0;
  font-family:var(--f-jp);
  font-weight:900;
  /* 動的キャッチ(最大全角26文字)がScrollに被らない上限追従。36px(PSD)は1750px以上で固定、
     以下は26文字の収まる限界に沿って縮小し1025で20px。下限20pxは1024〜769で維持(タブレットも20px) */
  font-size:clamp(20px, calc(2.2069cqw - 2.29px), 36px);
  letter-spacing:.2em;
  line-height:1;
  color:var(--c-hero-lead);
  opacity:var(--hero-lead-opacity, .5);
  text-shadow:var(--hero-lead-shadow, none);
  white-space:nowrap;
  transform:var(--italic);
  transform-origin:left bottom;
}/* PSD L119/T695 ZenKakuBlack36px斜体 */
.hero_lead_en{
  position:absolute;
  left:6.146%;

  top:79.204%;
  z-index:2;
  margin:0;
  font-family:var(--f-roboto);
  font-weight:900;
  /* 1920で14px(PSD)→1024で13pxに線形。1024が下限で、1024〜769は13pxを維持。
     lhも同様に 1920:36px → 1024:21px(=13px×1.6)。旧 .729cqw は中間幅で7〜10pxまで落ちて読めなかった */
  font-size:clamp(13px, calc(11.857px + 0.11161cqw), 14px);
  letter-spacing:.1em;
  line-height:clamp(21px, calc(3.857px + 1.6741cqw), 36px);
  color:var(--c-hero-lead);
  opacity:var(--hero-lead-opacity, .5);
  text-shadow:var(--hero-lead-shadow, none);
}/* PSD L118/T769 RobotoBlack14px lh36 */
.hero_sns{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.hero_sns_item{
  position:absolute;
  top:86.39%;
  width:64px;
  height:64px;
  pointer-events:auto;
}
.hero_sns_item:nth-child(1){left:1113px;}
.hero_sns_item:nth-child(2){left:1213px;}
.hero_sns_item:nth-child(3){left:1313px;}
.hero_sns_item img{
  width:100%;
  height:100%;
  border-radius:50%;
  display:block;
}
.hero_sns_item:nth-child(2){
  background:#2b2b2b;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero_sns_item:nth-child(2) img{
  width:78%;
  height:78%;
  border-radius:0;
}/* X透過PNG: X/円=78%(PSD実寸) */
.hero_scroll{
  position:absolute;
  left:calc(100% - var(--navw) - 60.24px);
  top:64.3%;
  height:15%;
  z-index:3;
}
.hero_scroll_bar{
  position:absolute;
  left:18.24px;
  top:0;
  width:2px;
  height:100%;
  background:var(--c-scroll);
  transform-origin:0 0;
  animation:heroScroll 2s infinite;
}
.hero_scroll_txt{
  position:absolute;
  left:0;
  bottom:0;
  writing-mode:sideways-lr;
  font-family:var(--f-roboto);
  font-size:16px;
  color:var(--c-scroll);
  letter-spacing:.2em;
  line-height:1;
}
@keyframes heroScroll{
  0%{transform:scale(1,0);transform-origin:0 0;}
  50%{transform:scale(1,1);transform-origin:0 0;}
  51%{transform:scale(1,1);transform-origin:0 100%;}
  100%{transform:scale(1,0);transform-origin:0 100%;}
}
@keyframes therapistScroll{
  0%{transform:scale(0,1);transform-origin:0 0;}
  50%{transform:scale(1,1);transform-origin:0 0;}
  51%{transform:scale(1,1);transform-origin:100% 0;}
  100%{transform:scale(0,1);transform-origin:100% 0;}
}

.visually_hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* =========================================================
   3バナー（Access / Price / New Face）
   ========================================================= */
.banner3{
  position:relative;
  height:var(--content-h);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--img-pagebg, url(../images/perfume-bg.jpg)) center center/cover fixed;
}
.banner3::before{
  content:"";
  position:absolute;
  inset:0;
}
.banner3_inner{
  position:relative;
  z-index:1;
  display:flex;
  gap:40px;
}
.banner3_item{
  position:relative;
  width:440px;
  height:136px;
  background:rgba(255,255,255,.8);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8.64px;
  transition:background .3s ease;
}
.banner3_item:hover{background:rgba(255,255,255,.95);}
.banner3_item.fx_up{
  transition:opacity .7s ease, transform .7s ease, background .3s ease;
}
.banner3_en{
  font-family:var(--f-en);
  font-size:36px;
  color:#000;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.banner3_jp,.banner2_jp{
  display:flex;
  align-items:center;
  justify-content:center;
  width:112px;
  height:24px;
  background:#000;
  color:#fff;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:16px;
}
.banner3_plus{
  position:absolute;
  right:8px;
  bottom:7px;
  width:44.16px;
  height:46px;
}
.banner3_plus::before,.banner3_plus::after{
  content:"";
  position:absolute;
  width:30px;
  height:32px;
  border:1px solid #000;
}
.banner3_plus::before{
  left:0;
  bottom:0;
}
.banner3_plus::after{
  left:14px;
  bottom:13px;
}
.banner3_tel{display:none;}

/* =========================================================
   THERAPIST
   ========================================================= */
.therapist{
  background:#fff;
  padding:80px 0;
}
.therapist_scroll{display:none;}
.therapist_inner{
  width:100%;
  max-width:1864px;
  margin-inline:auto;
}
.therapist .sec_head{
  text-align:center;
  margin-bottom:48px;
}
.therapist .sec_head_en{
  display:inline-block;
  font-size:80px;
  color:#000;
  vertical-align:bottom;
  letter-spacing:.1em;
}
.therapist .sec_head_jp{
  display:inline-block;
  font-family:var(--f-jp);
  font-weight:900;
  font-size:24px;
  color:#000;
  margin-left:19.2px;
  vertical-align:bottom;
  margin-bottom:11.52px;
  letter-spacing:.1em;
}
.therapist_list{
  display:grid;
  grid-template-columns:repeat(auto-fill,304px);
  justify-content:center;
  gap:8px;
}
.therapist_card{
  position:relative;
  background:var(--c-fill);
  color:var(--c-on-fill);
  height:560px;
}
.therapist_card_link{
  position:relative;
  display:block;
  height:100%;
  color:inherit;
}
.therapist_card_thumb{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:407px;
  overflow:hidden;
}
.therapist_card_thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.therapist_card_badges{
  position:absolute;
  top:0;
  left:0;
  display:flex;
  flex-direction:column;
  z-index:2;
}
.therapist_card_badge{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:16px;
  line-height:1;
}
.therapist_card_badge__crown{background:#000;}
.therapist_card_badge__crown::before{
  content:"";
  width:32px;
  height:24px;
  background:url(../images/icon-crown.png) center/contain no-repeat;
}
.therapist_card_badge__pickup{background:#ffb22b;}
.therapist_card_badge__new{background:#ff4aa8;}
.therapist_card_body{
  position:absolute;
  top:407px;
  left:0;
  right:0;
  bottom:0;
  padding:16px;
  display:flex;
  flex-direction:column;
  color:var(--c-on-fill);
}
.therapist_card_name{
  font-family:var(--f-jp);
  font-weight:700;
  font-size:24px;
  line-height:1.2;
  letter-spacing:.1em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.therapist_card_spec{
  margin-top:auto;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:14px;
  letter-spacing:.1em;
}
.therapist_card_time{
  margin-top:4px;
  height:32px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#000;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:16px;
  letter-spacing:.1em;
  line-height:1;
}
.therapist_foot{
  position:relative;
  display:flex;
  justify-content:center;
  margin-top:80px;
  align-items:center;
}
.therapist_btns{
  display:flex;
  gap:40px;
}
.therapist_count{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  align-items:flex-end;
  gap:17.28px;
}
.therapist_count_en{
  font-family:var(--f-roboto);
  font-weight:900;
  font-size:14px;
  color:#000;
  line-height:1.71;
  letter-spacing:.1em;
  text-align:right;
  margin:0 0 7.68px;
}
.therapist_count_num{
  font-family:var(--f-en);
  font-size:24px;
  color:#000;
  line-height:1;
  letter-spacing:0;
}
.therapist_count_num>span:first-child{font-size:64px;}
.therapist_count_slash{
  font-size:64px;
  font-style:normal;
  margin:0;
}

/* =========================================================
   PRICE
   ========================================================= */
.price{
  position:relative;
  isolation:isolate;
  container-type:inline-size;
  display:flex;
  align-items:center;
  background:var(--c-band);
  color:var(--c-on-fill);
  overflow:hidden;
  height:var(--band-h);
}

.price_bgtext{
  position:absolute;
  left:max(0px,calc(100cqw - 1304px));
  top:calc(492px - 0.94em);
  z-index:-1;
  font-family:var(--f-en);
  font-size:min(504px,39cqw);
  line-height:1;
  color:var(--c-watermark);
  opacity:.4;
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.1em;
  transform:var(--italic);
  transform-origin:left bottom;
}

.price_inner{
  margin-left:clamp(24px,calc((100cqw - 1182px) * 0.8103),598px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.price_label{
  margin-left:8px;
  display:inline-flex;
  align-items:center;
  gap:16px;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:36px;
  line-height:1;
  color:var(--c-price-label);
  letter-spacing:.1em;
  white-space:nowrap;
}
.price_label_slash{
  font-family:var(--f-jp);
  font-weight:400;
  font-size:30px;
  color:var(--c-slash);
  letter-spacing:0;
}

.price_main{
  margin-top:21px;
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:clamp(56px,calc((100cqw - 199px) / 5.33),150px);
  line-height:1;
  transform:var(--italic);
  letter-spacing:.1em;
  white-space:nowrap;/* PSD fauxItalic=true / tracking=100 */
}
.price_main_num,.price_main_unit{
  background:linear-gradient(180deg,#ff7800 0%,#efce1c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  padding:0 .12em;
  margin:0 -.12em;
}
.price_main_unit{
  font-family:var(--f-jp);
  font-weight:700;
  font-size:0.4em;
}

.price_btn{
  --b-bg:#fff;
  --b-fg:#000;
  margin-top:48px;
  margin-left:232px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:256px;
  height:64px;
  background:var(--b-bg);
  color:var(--b-fg);
  border:1px solid var(--b-fg);
  font-family:var(--f-jp);
  font-weight:700;
  font-size:24px;
  letter-spacing:0;
  transition:.3s;
}
.price_btn:hover{background:var(--b-fg);color:var(--b-bg);border-color:var(--b-bg);}
.price_coupon{display:none;}

.price_vert{
  margin-left:auto;
  margin-right:clamp(24px,calc((100cqw - 1182px) * 0.1897),140px);
  display:flex;
  align-items:flex-start;
  gap:24px;
}
.price_vert_jp{
  margin-top:44px;
  font-family:var(--f-jp);
  font-weight:700;
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:24px;
  line-height:1;
  color:#fff;
  letter-spacing:.1em;
}
.price_vert_en{
  font-family:var(--f-en);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:80px;
  line-height:1;
  color:#fff;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* =========================================================
   COUPON
   ========================================================= */
.coupon{
  position:relative;
  background:#fff;
  height:var(--band-h);
  overflow:hidden;
}
.coupon_inner{
  position:absolute;
  top:80px;
  left:50%;
  transform:translateX(-50%);
  width:1400px;
  container-type:inline-size;
}
.coupon_list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:48px 40px;
}
.coupon_card{
  position:relative;
  width:440px;
  height:136px;
  background:#fff;
  border:1px solid #000;
}
.coupon_card_no{
  position:absolute;
  top:0;
  left:0;
  width:66px;
  height:67px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  color:#fff;
  font-family:var(--f-en);
  font-size:60px;
  line-height:1;
}
.coupon_card_en{
  position:absolute;
  left:83px;
  top:13px;
  font-family:var(--f-en);
  font-size:48px;
  line-height:1;
  color:#000;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.coupon_card_line{
  position:absolute;
  left:259px;
  right:0;
  top:32px;
  height:8px;
  background:#000;
}
.coupon_card_text{
  position:absolute;
  left:17px;
  right:15px;
  top:106px;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:16px;
  line-height:1;
  color:#000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.coupon_card__empty{background:#000;}
.coupon_card__empty .coupon_card_no{
  background:#fff;
  color:#000;
}
.coupon_card__empty .coupon_card_en{color:#fff;}
.coupon_card__empty .coupon_card_line{background:#fff;}
.coupon_card_link{
  position:absolute;
  inset:-1px;
  z-index:2;
}
@container (920px <= width < 1400px){
  .coupon_card:last-child:nth-child(odd){width:920px;}
}
@container (width < 920px){
  .coupon_card{width:100%;}
}

/* =========================================================
   パララックス（画像帯・banner3=上部パララックスと共通画像）
   ========================================================= */
.parallax{
  position:relative;
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.parallax_bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--img-pagebg, url(../images/perfume-bg.jpg)) center center/cover fixed;
}
.parallax_bg::after{
  content:"";
  position:absolute;
  inset:0;
}
.parallax_img, .banner3_tel_img{
  display:none;
  position:absolute;
  width:798.75px;
  height:auto;
  max-width:none;
  left:calc((100% - 798.75px) * 0.44);
  will-change:transform;
  pointer-events:none;
  user-select:none;
}

/* =========================================================
   RANKING
   ========================================================= */
.ranking{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  container-type:inline-size;
  background:#fff;
  overflow:hidden;
}
.ranking_dots{display:none;}
.ranking_fan{
  position:relative;
  width:100%;
  height:920px;
  flex-shrink:0;
  overflow:hidden;
}
.ranking_fan_svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.ranking_fan_mask{
  fill:var(--rank-mask, #000);
}
.ranking_fan_sp{display:none;}
.ranking_stage{
  position:absolute;
  top:0;
  left:50%;
  margin-left:-960px;
  width:1920px;
  height:1116px;
  transform-origin:top center;
}
.ranking_slider{
  position:absolute;
  inset:0;
  z-index:1;
  perspective:2200px;
}
.ranking_block{
  position:absolute;
  inset:0;
  height:100%;
  opacity:0;
  transform:rotateY(78deg) scale(.88);
  transform-origin:50% 50%;
  backface-visibility:hidden;
  pointer-events:none;
  transition:transform .9s cubic-bezier(.45,.05,.2,1),opacity .6s ease;
}
.ranking_block.is_active{
  opacity:1;
  transform:rotateY(0) scale(1);
  pointer-events:auto;
}
.ranking_card{position:absolute;}
@media (prefers-reduced-motion:reduce){
  .ranking_block{
    transition:opacity .35s ease;
    transform:none;
  }
}
.ranking_card_link{
  position:relative;
  display:block;
  container-type:inline-size;
}
.ranking_card_frame{
  display:block;
  width:100%;
  height:auto;
}
.ranking_card_photo{
  position:absolute;
  left:3.878%;
  top:1.775%;
  width:92.244%;
  height:66.124%;
  overflow:hidden;
  z-index:1;
}
.ranking_card_photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ranking_card_body{
  position:absolute;
  left:6.6%;
  top:70.8%;
  z-index:2;
  display:flex;
  flex-direction:column;
  color:#fff;
}
.ranking_card_name{
  font-family:var(--f-jp);
  font-weight:700;
  font-size:6.648cqw;
  letter-spacing:.1em;
  line-height:1.14;
}
.ranking_card_spec{
  font-family:var(--f-jp);
  font-weight:700;
  font-size:3.878cqw;
  letter-spacing:.1em;
  line-height:1;
  margin-top:.2cqw;
}
.ranking_card_line{
  width:48.48cqw;
  height:1px;
  background:#fff;
  margin:1.1cqw 0 .8cqw;
}
.ranking_card_en{
  font-family:var(--f-roboto);
  font-size:3.324cqw;
  letter-spacing:.1em;
  color:#f9f9f9;
  line-height:1;
}
.ranking_card--p1{
  left:779px;
  top:151px;
  width:361px;
  z-index:30;
}
.ranking_card--p2{
  left:529px;
  top:220px;
  width:287px;
  z-index:20;
}
.ranking_card--p3{
  left:1105px;
  top:220px;
  width:287px;
  z-index:20;
}
.ranking_card--p4{
  left:336px;
  top:253px;
  width:251px;
  z-index:10;
}
.ranking_card--p5{
  left:1328px;
  top:253px;
  width:251px;
  z-index:10;
}

.ranking_foot{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:32px 80px;
  padding:24px clamp(40px,calc(40px + (100cqw - 1340px) * 0.0709),79px) 64px clamp(40px,calc(40px + (100cqw - 1340px) * 0.8236),493px);
}
.ranking_head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:24px;
}
.ranking_head_titles{
  display:flex;
  flex-direction:column;
}
.ranking_head_jp{
  font-family:var(--f-jp);
  font-weight:700;
  font-size:24px;
  letter-spacing:.1em;
  color:#000;
  line-height:1;
}
.ranking_head_en{
  margin:0;
  font-family:var(--f-en);
  font-size:80px;
  letter-spacing:.1em;
  color:#000;
  line-height:1;
  text-transform:uppercase;
}
.ranking_sub{
  margin:0;
  font-family:var(--f-roboto);
  font-weight:900;
  font-size:14px;
  letter-spacing:.1em;
  line-height:1.71;
  color:#000;
}
.ranking_btn{
  flex-shrink:0;
  width:256px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#000;
  border:1px solid #000;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:24px;
  transition:.3s;
}
.ranking_btn:hover{
  background:#000;
  color:#fff;
}
@media (max-width:1340px){
  .ranking_foot{
    justify-content:center;
    padding-left:40px;
    padding-right:40px;
  }
}
.ranking_arrow{
  position: absolute;
  z-index: 40;
  top: 489px;
  transform: translateY(-50%);
  width: 61.44px;
  height: 61.44px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  background: rgb(0 0 0 / 85%);
  color: #000;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.ranking_arrow::before{
  content:"";
  display:block;
  width:15.36px;
  height:15.36px;
  min-width:10px;
  min-height:10px;
  border: solid rgb(255 255 255);
  border-width:2px 2px 0 0;
}
.ranking_arrow:hover{
  background:#000;
  color:#fff;
}
.ranking_arrow--prev{left:305.28px;}
.ranking_arrow--prev::before{
  transform:rotate(-135deg);
  margin-left:5.38px;
}
.ranking_arrow--next{left:1548.29px;}
.ranking_arrow--next::before{
  transform:rotate(45deg);
  margin-right:5.38px;
}

/* =========================================================
   NEWS
   ========================================================= */
.news{
  position:relative;
  isolation:isolate;
  container-type:inline-size;
  display:flex;
  align-items:center;
  background:var(--c-band);
  color:var(--c-on-fill);
  height:var(--band-h2);
  overflow:hidden;
}
.news_bgtext{
  position: absolute;
  left: 0;
  bottom: calc(-8px - 0.08em);
  z-index: -1;
  font-family: var(--f-en);
  font-size: min(504px, 40cqw);
  line-height: 1;
  transform: scaleY(1.2) var(--italic);
  transform-origin: left bottom;
  color: var(--c-watermark);
  opacity: .4;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.news_title{
  margin-left:clamp(24px,calc((100cqw - 1513px) * 0.551),216px);
  display:flex;
  align-items:flex-end;
  gap:24px;
}
.news_title_en{
  font-family:var(--f-en);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:80px;
  line-height:1;
  color:#fff;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.news_title_jp{
  font-family:var(--f-jp);
  font-weight:700;
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-size:24px;
  line-height:1;
  color:#fff;
  letter-spacing:.1em;
}
.price_vert_en,
.price_vert_jp,
.news_title_en,
.news_title_jp{color:var(--c-band-title);}
.news_cols{
  margin-left:clamp(24px,calc(100cqw - 1229px),332px);
  margin-right:clamp(24px,calc((100cqw - 1513px) * 0.449),176px);
  display:flex;
  align-items:flex-start;
  gap:40px;
}
.news_col{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.news_col--right{margin-top:88px;}

.news_item a {
    display: flex;
    align-items: center;
    width: clamp(380px, calc((100cqw - 239px) / 2), 507px);
    height: 139px;
    background: #000;
    color: #fff;
    box-shadow: 3px 3px 0 0 #fff;
    transition: opacity .3s;
}
.news_item a:hover{opacity:.85;}
.news_item_thumb{
  flex-shrink:0;
  width:139px;
  height:139px;
}
.news_item_thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.news_item_body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 15.36px 0 16px;
  min-width:0;
}
.news_item_date{
  font-family: var(--f-jp);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .1em;
  color: #fff;
  line-height: 1;
}
.news_item_title{
  font-family:var(--f-jp);
  font-weight:700;
  font-size:24px;
  letter-spacing:.1em;
  line-height:30px;
  color:#fff;
  margin-top:9.6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* =========================================================
   PHOTO BLOG / CONTACT（2分割）
   ========================================================= */
.banner2{
  display:grid;
  grid-template-columns:1fr 1fr;
  height:var(--band-h);
}
.banner2_item{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.banner2_item::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  transition:transform .5s ease, filter .5s ease;
}
/* 背景写真はシステムが差し替えられるよう変数経由にする。既定値＝現行のサンプル画像。
   差し替え例: <section class="banner2" style="--img-photo:url('/uploads/xxx.jpg')"> */
.banner2_item__photo::before{background:var(--img-photo, url(../images/spa-bg.jpg)) no-repeat center/cover;}
.banner2_item__contact::before{background:var(--img-contact, url(../images/perfume-contact.jpg)) no-repeat center/cover;}
.banner2_item:hover::before{transform:scale(1.15);filter:blur(8px);}
.banner2_item::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}

.banner2_box{
  position:relative;
  z-index:2;
  width:440px;
  height:136px;
  background:rgba(255,255,255,.8);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8.64px;
  transition:background .3s ease;
}
.banner2_item:hover .banner2_box{background:rgba(255,255,255,.95);}
.banner2_box.fx_up{
  transition:opacity .7s ease, transform .7s ease, background .3s ease;
}
.banner2_en{
  font-family:var(--f-en);
  font-size:36px;
  color:#000;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.1em;
}
.banner2_plus{
  position:absolute;
  right:8px;
  bottom:7px;
  width:44.16px;
  height:46px;
}
.banner2_plus::before,.banner2_plus::after{
  content:"";
  position:absolute;
  width:30px;
  height:31px;
  border:1px solid #000;
}
.banner2_plus::before{
  left:0;
  bottom:0;
}
.banner2_plus::after{
  left:14px;
  bottom:13px;
}

/* =========================================================
   ABOUT
   ========================================================= */
.about{
  position:relative;
  background:#fff;
  height:var(--band-h2);
  overflow:hidden;
}
.about_title_en{
  position:absolute;
  left:370px;
  top:211px;
  margin:0;
  font-family:var(--f-en);
  font-size:80px;
  color:#000;
  letter-spacing:.1em;
  line-height:1;
  text-transform:uppercase;
}
.about_title_jp{
  position:absolute;
  left:428px;
  top:305px;
  margin:0;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:24px;
  color:#000;
  letter-spacing:.1em;
  line-height:1;
}
.about_btn{
  position:absolute;
  left:351px;
  top:367px;
  width:256px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#000;
  border:1px solid #000;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:24px;
  transition:.3s;
}
.about_btn:hover{
  background:#000;
  color:#fff;
}
.about_table{
  position:absolute;
  left:1019px;
  top:101px;
  width:843px;
}
.about_row{
  display:flex;
  align-items:center;
  min-height:88px;
  border-bottom:1px solid #000;
}
.about_row:last-child{border-bottom:none;}
.about_row dt{
  width:148px;
  flex-shrink:0;
  text-align:center;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:16px;
  color:var(--c-about-label);
  line-height:1.13;
}
.about_row dd{
  font-family:var(--f-jp);
  font-weight:700;
  font-size:16px;
  color:#000;
  padding:0 32px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{position:relative;}
.footer_main{
  position:relative;
  width:100%;
  height:640px;
  overflow:hidden;
}
.footer_stage{
  position:relative;
  width:1920px;
  height:320px;
  transform-origin:top left;
}
.footer_white{
  position:absolute;
  left:0;
  top:0;
  width:1920px;
  height:320px;
  background:#fff;
}
.footer_black{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:320px;
  background:var(--c-band);
  overflow:hidden;
  z-index:1;
}

.footer_logo{
  position:absolute;
  left:80px;
  top:38px;
  margin:0;
  font-family:var(--f-en);
  font-weight:400;
  font-size:256px;
  line-height:1;
  letter-spacing:0;
  color:#000;
  white-space:nowrap;
}
.footer_logo_en{display:inline-block;}
.footer_logo_site{
  position:absolute;
  left:915px;
  top:134px;
  font-family:'Alex Brush',cursive;
  font-weight:400;
  font-size:90.4px;
  line-height:1;
  letter-spacing:.1em;
  background:linear-gradient(17deg, #ffd300 20%, #f18b1f 40%, #ffd300 70%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  transform:rotate(-28.55deg);
  transform-origin:center;
}
.footer_line{
  position:absolute;
  left:1224px;
  right:0;
  top:152px;
  height:16px;
  background:#000;
  clip-path:polygon(16px 0, 100% 0, 100% 100%, 0 100%);
}

.footer_nav{
  position:absolute;
  left:4.17%;
  top:120px;
  z-index:2;
}
.footer_nav_line{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  font-family:var(--f-roboto);
  font-weight:900;
  font-size:24px;
  color:#fff;
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1;
}
.footer_nav_line1 li::after{content:"/";}
.footer_nav_line2 li:not(:last-child)::after{content:"/";}
.footer_nav_line1{margin-bottom:24px;}
.footer_nav_line a{
  color:var(--c-on-fill);
  transition:color .2s;
  white-space:nowrap;
}
.footer_nav_line a:hover{color:var(--c-orange);}
.footer_copy{
  position:absolute;
  right:1.25%;
  bottom:24px;
  z-index:2;
  margin:0;
  font-family:var(--f-jp);
  font-weight:700;
  font-size:16px;
  color:var(--c-on-fill);
  letter-spacing:.1em;
  white-space:nowrap;
  transform:var(--italic);
  transform-origin:right bottom;
}
@media (min-width:1025px){
  body.page_sub .footer{
    position:relative;
    z-index:120;
  }
}

/* =========================================================
   レスポンシブ（スマホ・タブレット）
   ========================================================= */
/* =========================================================
   レスポンシブ：768〜1919px（適応リフロー）。≥1920は固定デザイン
   ========================================================= */
@media (max-width:1919px){
  .header_open{left:clamp(376px, calc(100vw - var(--navw) - 709px), 730px);}

  .banner3_inner{
    width:100%;
    padding:0 40px;
    justify-content:center;
    flex-wrap:wrap;
  }

  .coupon{
    height:auto;
    padding:80px 40px;
  }
  .coupon_inner{
    position:static;
    transform:none;
    width:100%;
    max-width:1400px;
    margin:0 auto;
  }

  .about{
    height:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    padding:80px 40px;
  }
  .about_head{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
    justify-self:center;
  }
  .about_title_en,.about_title_jp,.about_btn{
    position:static;
    left:auto;
    top:auto;
  }
  .about_table{
    position:static;
    left:auto;
    top:auto;
    width:100%;
    max-width:843px;
    justify-self:center;
  }

  .hero_sns{
    inset:auto;
    right:calc(var(--navw) + 40px);
    left:auto;
    top:86.4%;
    display:flex;
    gap:40px;
    width:auto;
  }
  .hero_sns_item:nth-child(1),.hero_sns_item:nth-child(2),.hero_sns_item:nth-child(3){
    position:static;
    left:auto;
  }
}

@media (max-width:1390px){
  .header_open{
    left:6.146%;
    top:18px;
    transform:none;
    margin:0;
    line-height:1.2;
  }
  .header_logo{
    top:40px;
    transform:none;
    line-height:1.2;
  }
}

@media (max-width:1024px){
  .header{z-index:120;}
  .header_open{font-size:12px;}
  .gnav.is_open{z-index:125;}
  .gnav{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-top:96px;}
  .gnav_list{position:static;top:auto;}
  .header_tel{
    position:fixed;
    top:0;
    right:var(--navw);
    width:auto;
    height:80px;
    margin:0;
    padding:0 8px;
    background:#fff;
    display:inline-flex;
    align-items:center;
    gap:8px;
    pointer-events:auto;
  }
  .header_tel_icon{
    position:static;
    transform:none;
    flex-shrink:0;
    width:32px;
    height:32px;
    background:transparent;
  }
  .header_tel_icon img{width:16px;}
  .header_tel_num{
    position:static;
    transform:none;
    display:inline-block;
    margin:0;
    font-family:var(--f-en);
    font-size:24px;
    letter-spacing:.04em;
    line-height:1;
    color:#000;
    white-space:nowrap;
  }
}

/* ===== [電話番号をナビの中へ・戻せる独立ブロック](≤1024・A仕様)。
   script.js が ≤1024 で電話(.header_tel)をナビ(.gnav)の子へ移動、>1024でヘッダーへ戻す(>1024は白ボックスのまま=変更なし)。
   ナビ列を電話ぶん左へ広げ、電話をナビ列の先頭(白文字)に配置。電話はナビと一体で開閉に追従。
   元に戻す時:この@mediaを削除＋script.jsの placeTel を外す ===== */
@media (max-width:1024px){
  .header_open{font-size:16px;}

  body .gnav{
    width:clamp(240px, calc(78.13vw - 360px), 440px);
    max-width:none;
    padding-top:0;
  }
  .gnav .header_tel{
    --tel-size:clamp(20px, calc(7.8125vw - 40px), 40px);
    position:static;right:auto;left:auto;top:auto;
    display:flex;align-items:center;gap:calc(var(--tel-size) * 0.325);
    width:auto;height:80px;margin:0;padding:0 24px;
    background:transparent;
    pointer-events:auto;
  }
  .gnav .header_tel_icon{
    position:static;transform:none;flex-shrink:0;
    width:var(--tel-size);height:var(--tel-size);
    background:transparent;border-color:#fff;
  }
  .gnav .header_tel_icon img{width:calc(var(--tel-size) * 0.475);filter:invert(1);}
  .gnav .header_tel_num{
    position:static;display:inline-block;margin:0;
    font-family:var(--f-en);letter-spacing:.04em;line-height:1;white-space:nowrap;
    color:#fff;
    font-size:var(--tel-size);
    transform:var(--italic);
    transform-origin:left center;
  }
}

/* ===== [同上・戻せるブロックの続き] ナビ幅が240pxになる ≤768 は左インデントを24→16pxへ。
   電話番号が×ボタン(nav_toggle)に当たるのを回避。電話も左つらをリンクに合わせて追随。
   bodyで詳細度を上げ、後段 @media(max-width:768px) の .gnav_list{padding-left:24px} に勝たせる ===== */
@media (max-width:768px){
  body .gnav_list{padding-left:16px;}
  body .gnav .header_tel{padding-left:16px;}
}

@media (max-width:1279px){
  .banner2{
    grid-template-columns:1fr;
    height:auto;
  }
  .banner2_item{min-height:360px;}

  .about{
    grid-template-columns:1fr;
    row-gap:40px;
  }
  .about_head{
    align-items:center;
    text-align:center;
  }
  .about_table{
    max-width:600px;
    margin-inline:auto;
  }
}

@media (max-width:1599px){
  .therapist_foot{
    flex-direction:column;
    gap:32px;
  }
  .therapist_count{
    position:static;
    transform:none;
  }
}

@media (max-width:1023px){
  .news{
    height:auto;
    padding:60px 0;
  }
  .news_title{margin-left:40px;}
  .news_cols{
    flex-direction:column;
    margin-left:40px;
    margin-right:40px;
  }
  .news_col{width:auto;}
  .news_col--right{margin-top:0;}
  .news_item a{
    width:100%;
  }
}

.sp_br{display:none;}

@media (max-width:1024px){
  .hero{--navw:0px;}
  .hero_scroll{left:calc(100% - 60.24px);}
  .footer_nav_line{font-size:18px;}
  .footer_copy{font-size:14px;}
  .footer_black{height:240px;}
  .footer_nav{top:40px;}
}
@media (min-width:1025px) and (max-width:1280px){
  .footer_nav_line{font-size:20px;}
}
@media (min-width:769px) and (max-width:1024px){
  .hero_flower{left:51.906%;}
}
@media (max-width:768px){
  .hero_flower{left:53.533cqw;}
}
/* ===== ここから下がモバイル(SP)。境界は768(=768もスマホ扱い・ユーザー指定) ===== */
@media (max-width:768px){
  html{font-size:56.25%;}

  :root{
    --pad:5vw;
    --sp-w:480px;
    --sp-gut:max(16px, calc((100% - var(--sp-w)) / 2));
  }
  body{min-width:360px;}
  .sp_br{display:inline;}
  /* ランキング飾り文字：PCのみのカンマ。SP(≤1024)では sp_br で改行するため非表示 */
  .ranking_sub_join{display:none;}

  .header{
    height:80px;
    background:transparent;
    z-index:100;
  }
  .header_inner{
    display:block;
    position:relative;
    height:100%;
    padding:0;
  }
  .header_brand{
    position:absolute;
    left:4.533vw;
    top:16px;
    display:flex;
    flex-direction:column-reverse;
    align-items:flex-start;
    gap:8px;
  }
  .header_open{
    display:block;
    position:static;
    transform:none;
    margin:0;
    font-size:12px;
    line-height:1;
    letter-spacing:0;
    color:var(--c-header-text);
    white-space:nowrap;
  }
  .header_logo{
    position:static;
    transform:none;
    font-size:24px;
    line-height:1;
    font-weight:900;
  }/* 768と同じ24px(PSD SPは18pxだがユーザー指定で768に合わせる) */
  .header_logo a{color:var(--c-header-text);}
  .header_tel{display:none;}

  .gnav{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  .gnav_list{padding-left:24px;}
  .gnav_en{font-size:20px;}

  /* ===== SPトップ ヒーロー（template_sp.psd・375基準/px固定。背景は写真select_bg.png＋斜めマスク(SVG)をcoverで共用）===== */
  .hero{
    height:100vh;
    height:100svh;
    min-height:0;
    aspect-ratio:auto;
  }
  .hero_bg_img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .hero_lead_jp{
    left:4.267cqw;
    top:52.8%;
    width:auto;
    white-space:normal;
    line-height:1.5;
    font-size:min(clamp(18px, calc(8.366px + 2.0356cqw), 24px), 3.5vh);
  }
  .hero_lead_en{
    left:4.267cqw;
    top:62.5%;
    line-height:1.6;
    font-size:clamp(12px, calc(11.046px + 0.25445cqw), 13px);
  }

  .hero_logo{
    left:4.533cqw;
    top:85px;
    --fs:min(calc(49.56px + 15.051cqw), 20vh);
    width:auto;
  }

  .hero_sns{
    left:calc(-277px + 97.96cqw);
    right:auto;
    top:83%;
    bottom:auto;
    width:auto;
    gap:24px;
  }
  .hero_sns_item{
    width:48px;
    height:48px;
  }
  .hero_sns_item img{
    width:48px;
    height:48px;
  }
  .hero_flower{
    display:block;
    top:34.62%;
    width:min(calc(61.29px + 31.122cqw), 38vh);
    height:auto;
    z-index:1;
  }
  .hero_scroll{
    display:block;
    left:calc(100% - 36px);
    right:auto;
    top:auto;
    bottom:82px;
    height:127px;
  }
  .hero_scroll_bar{left:18px;}
  .hero_scroll_txt{font-size:12px;}

  .banner3{
    height:auto;
    display:block;
    background:none;
  }
  .banner3_tel{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    height:208px;
    padding:0 16px;
    box-sizing:border-box;
    overflow:hidden;
    background:none;
  }
  .banner3_tel_img{
    display:block;
    top:-121px;
    z-index:-1;
  }
  .banner3_tel_icon{
    flex:0 0 40px;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid #fff;
    background:transparent;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .banner3_tel_icon img{
    width:19px;
    filter:brightness(0) invert(1);
  }
  .banner3_tel_num{
    font-family:var(--f-en);
    font-size:48px;
    color:#fff;
    letter-spacing:.05em;
    line-height:1;
    white-space:nowrap;
    transform:var(--italic);
  }
  .banner3_inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    width:100%;
    margin-inline:0;
    padding:0;
    background:#000;
    border:1px solid #000;
    box-sizing:border-box;
  }
  .banner3_item{
    width:auto;
    height:104px;
    background:#fff;
    gap:8px;
  }
  .banner3_item:nth-child(3){grid-column:1 / -1;}
  /* 黒バー日本語: PSD 115×27 */
  .banner3_jp{
    width:112px;
    height:24px;
  }
  .banner3_plus{
    right:8px;
    bottom:8px;
    width:24px;
    height:24px;
  }
  .banner3_plus::before,.banner3_plus::after{
    width:16px;
    height:16px;
  }
  .banner3_plus::before{
    left:0;
    bottom:0;
  }
  .banner3_plus::after{
    left:8px;
    bottom:8px;
  }

  /* ===== THERAPIST(SP/375): タイトル左寄せ(Therapist72/本日18)＋[英文左|12/100右]行＋304×560横スクロール。フロー配置(order)・absolute不使用 ===== */
  .therapist{
    background:#fff;
    padding:64px 0 64px;
  }
  .therapist_inner{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:none;
    margin:0;
  }
  .therapist .sec_head{
    order:1;
    text-align:left;
    margin:0;
    padding:0 16px;
  }
  .therapist .sec_head_en{
    display:block;
    font-size:72px;
    line-height:1;
    margin:0;
  }
  .therapist .sec_head_jp{
    display:block;
    font-size:18px;
    line-height:1;
    margin:8px 0 0;
  }
  .therapist_foot{display:contents;}
  .therapist_btns{display:none;}
  .therapist_count{
    order:2;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-top:16px;
    padding:0 16px;
  }
  .therapist_count_en{
    margin:0;
    font-size:12px;
    line-height:1.5;
    text-align:left;
  }
  .therapist_count_num{
    margin:0;
    font-size:27px;
    line-height:1;
  }
  .therapist_count_num>span:first-child,.therapist_count_slash{font-size:72px;}
  .therapist_list{
    order:3;
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:16px;
    margin-top:56px;
    padding:0 16px;
    justify-content:flex-start;
    -webkit-overflow-scrolling:touch;
  }
  .therapist_card{
    flex:0 0 304px;
    width:304px;
  }
  .therapist_scroll{
    order:4;
    display:block;
    padding:0 16px;
    margin-top:40px;
  }
  .therapist_scroll_txt{
    display:block;
    font-family:var(--f-roboto);
    font-weight:900;
    font-size:12px;
    letter-spacing:.2em;
    color:#000;
    line-height:1;
  }
  .therapist_scroll::after{
    content:"";
    display:block;
    width:160px;
    height:1px;
    background:#000;
    margin-top:8px;
    transform-origin:0 0;
    animation:therapistScroll 2s infinite;
  }
  .therapist_card.fx_up,.coupon_card.fx_up,.news_item.fx_up{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  /* ===== PRICE(SP/375): 黒。左上にPRICE+料金システム／中央に当店おすすめコース・60分12000円(金)・COUPON丸・もっとみる。フロー配置・高さauto ===== */
  .price{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    height:auto;
    padding:64px 0 56px;
  }
  .price_bgtext{
    position:absolute;
    left:-7px;
    top:-7px;
    transform:var(--italic);
    transform-origin:left bottom;
    font-size:150px;
  }
  .price_vert{
    order:1;
    position:static;
    align-self:flex-start;
    margin:0 0 0 16px;
    gap:8px;
    flex-direction:column-reverse;
    align-items:flex-start;
  }
  .price_vert_en{
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    font-size:72px;
  }
  .price_vert_jp{
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    font-size:18px;
    margin-top:0;
  }
  .price_inner{
    order:2;
    position:static;
    align-self:stretch;
    margin:40px 0 0;
    align-items:center;
  }
  .price_label{
    margin-left:0;
    justify-content:center;
    font-size:4.267cqw;
    gap:8px;
  }
  .price_label_slash{font-size:4.267cqw;}
  .price_main{
    margin-top:24px;
    font-size:16.8cqw;
    line-height:.905;
    transform:translateX(0.1em) var(--italic);
  }
  .price_coupon{
    margin-top:40px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:160px;
    height:160px;
    border-radius:50%;
    border:1px solid #fff;
    background:transparent;
    color:#fff;
    text-decoration:none;
  }
  .price_coupon_en{
    font-family:var(--f-en);
    font-size:36px;
    letter-spacing:.1em;
    line-height:1;
    text-transform:uppercase;
  }
  .price_coupon_jp{
    margin-top:8px;
    font-family:var(--f-jp);
    font-weight:700;
    font-size:14px;
    letter-spacing:0;
    line-height:1;
  }
  .price_btn{
    margin-top:40px;
    margin-left:0;
    width:256px;
    height:64px;
    font-size:16px;
  }

  .coupon{display:none;}

  .parallax_bg{
    background:none;
  }
  .parallax_img{
    display:block;
    top:-145px;
  }

  /* ===== RANKING(SP/375): 白。タイトル左上／中央に1枚カード(黒斜めフレーム装飾bg)／5ドット／もっとみる。フロー配置(order)・高さauto。スライダー内部のみabsolute ===== */
  .ranking{
    display:flex;
    flex-direction:column;
    align-items:center;
    height:auto;
    padding:51px 0 64px;
  }
  .ranking_foot{display:contents;}
  .ranking_head{
    order:1;
    position:static;
    align-self:flex-start;
    margin-left:16px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    flex-wrap:nowrap;
    gap:0;
    width:auto;
    padding:0;
  }
  .ranking_head_titles{
    flex-direction:column-reverse;
    gap:8px;
  }
  .ranking_head_jp{font-size:18px;}
  .ranking_head_en{font-size:80px;}
  .ranking_sub{
    margin-top:16px;
    width:282px;
    font-size:12px;
    line-height:24px;
    text-transform:uppercase;
  }
  .ranking_btn{
    order:4;
    position:static;
    margin-top:64px;
    width:256px;
    height:64px;
    font-size:16px;
  }
  .ranking_fan{
    order:2;
    position:relative;
    margin-top:48px;
    width:100%;
    height:598px;
  }
  .ranking_fan_svg{display:none;}
  .ranking_fan_sp{
    display:block;
    position:absolute;
    width:375px;
    height:299px;
    z-index:0;
    pointer-events:none;
  }
  .ranking_fan_sp--top{left:0;top:0;}
  .ranking_fan_sp--bottom{right:0;bottom:0;}
  .ranking_stage{
    position:absolute;
    inset:0;
    margin:0;
    width:100%;
    height:100%;
    transform:none!important;
    z-index:1;
  }
  .ranking_slider{
    position:absolute;
    inset:0;
    perspective:1200px;
  }
  .ranking_block:not(.is_active){opacity:0;}
  .ranking_card--p2,.ranking_card--p3,.ranking_card--p4,.ranking_card--p5{display:none;}
  .ranking_card--p1{
    left:50%;
    top:28px;
    width:288px;
    height:542px;
    transform:translateX(-50%);
  }
  .ranking_card_link{height:100%;}
  .ranking_card_frame{height:100%;}
  .ranking_arrow{display:none;}
  .ranking_dots{
    order:3;
    display:flex;
    position:static;
    margin-top:40px;
    justify-content:center;
    gap:16px;
  }
  .ranking_dot{
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid #000;
    background:#fff;
    color:#000;
    font-family:var(--f-en);
    font-size:18px;
    letter-spacing:.1em;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
  }
  .ranking_dot.is_active{
    background:#000;
    color:#fff;
  }

  /* ===== NEWS(SP/375): 黒・タイトル左上(NEWS72/お知らせ18)＋件数可変の縦リスト(行≧104・サムネ80・白1px区切り)。フロー配置・高さautoでPHP件数増減に追従 ===== */
  .news{
    display:block;
    height:auto;
    padding:64px 0 56px;
    align-items:initial;
  }
  .news_bgtext{
    left:3px;
    top:-7px;
    bottom:auto;
    transform:var(--italic);
    transform-origin:left bottom;
    font-size:150px;
  }
  .news_title{
    position:static;
    margin:0 0 0 16px;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .news_title_en{
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    font-size:72px;
  }
  .news_title_jp{
    writing-mode:horizontal-tb;
    text-orientation:mixed;
    font-size:18px;
  }
  .news_cols{
    position:static;
    margin:56px 0 0;
    width:100%;
    display:block;
  }
  .news_col{
    display:block;
    width:100%;
    gap:0;
    padding:0 16px;
  }
  .news_col--right{margin-top:0;}
  .news_item{border-bottom:1px solid #fff;}
  .news_col--right li:last-child .news_item{border-bottom:none;}
  .news_item a{
    display:flex;
    align-items:center;
    gap:16px;
    width:100%;
    height:auto;
    min-height:104px;
    box-shadow:none;
    padding-inline: 4px;
  }
  .news_item_thumb{
    width:80px;
    height:80px;
    flex-shrink:0;
  }
  .news_item_body{
    padding:0;
    justify-content:center;
  }
  .news_item_date{font-size:14px;}
  .news_item_title{
    font-size:16px;
    line-height:30px;
    margin-top:2px;
  }

  /* ===== banner2(SP/375): 写メ日記/お問い合せを2バンド縦積み(各375×208・写真背景＋白箱284×104) ===== */
  .banner2{
    grid-template-columns:1fr;
    height:auto;
  }
  .banner2_item{
    height:208px;
    min-height:208px;
  }
  .banner2_box{
    width:284px;
    height:104px;
    gap:8px;
  }
  .banner2_plus{
    right:8px;
    bottom:8px;
    width:24px;
    height:24px;
  }
  .banner2_plus::before,.banner2_plus::after{
    width:16px;
    height:16px;
  }
  .banner2_plus::before{
    left:0;
    bottom:0;
  }
  .banner2_plus::after{
    left:8px;
    bottom:8px;
  }

  /* ===== ABOUT(SP/375): 白。ABOUT(72)+店舗情報(18)左上→情報テーブル(dt左16/dd左104・14px・行下黒1px)→もっとみる(中央)。フロー配置(order)・高さauto ===== */
  .about{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    height:auto;
    padding:64px 0 0;
    overflow:visible;
  }
  .about_head{display:contents;}
  .about_title_en{
    order:1;
    position:static;
    left:auto;
    top:auto;
    margin:0 0 0 16px;
    font-size:72px;
    text-align:left;
  }
  .about_title_jp{
    order:2;
    position:static;
    left:auto;
    top:auto;
    margin:8px 0 0 16px;
    font-size:18px;
    text-align:left;
  }
  .about_table{
    order:3;
    position:static;
    left:auto;
    top:auto;
    align-self:center;
    width:100%;
    max-width: 100%;
    margin:24px 0 0;
    padding: 0 16px;
  }
  .about_row dt{
    width:88px;
    text-align:left;
    font-size:14px;
    line-height:1.29;
  }
  /* 2行ラベルの1行目「営業時間」を、2行目の「受付時間」の左端に揃える。<br>を持つのは営業時間dtのみ。
     行2の実際の「(」と同じ幅の透明な「(」を行1に入れることで、営業時間と受付時間の左のつらが一致する */
  .about_row dt:has(br)::before{
    content:"(";
    color:transparent;
  }
  .about_row dd{
    font-size:14px;
    padding:0;
  }
  .about_btn{
    order:4;
    position:static;
    left:auto;
    top:auto;
    align-self:center;
    margin:24px 0 80px;
    width:256px;
    height:64px;
    font-size:16px;
  }

  /* ===== FOOTER(SP/375): 白上部(0-65=MEN'S ESTE黒72/Site金/線黒)＋黒box(65-254=ナビ白3行/コピー白斜体右下)。PC構造(白上+黒下)を維持しSPサイズに。JS縮小は無効化済 ===== */
  .footer_main{
    --fs:calc(15.9px + 10.97cqw);
    height:calc(var(--fs) * 1.14 + 189px);
  }
  .footer_stage{
    position:relative;
    width:100%;
    height:calc(var(--fs) * 1.14);
    transform:none;
  }
  .footer_white{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:calc(var(--fs) * 1.14);
    background:#fff;
    display:flex;
    align-items:center;
  }
  .footer_logo{
    position:relative;
    left:auto;
    top:auto;
    margin:0 0 0 16px;
    font-size:var(--fs);
    line-height:1;
  }
  .footer_logo_site{
    left:calc(var(--fs) * 3.5742);
    top:calc(var(--fs) * 0.52344);
    font-size:calc(var(--fs) * 0.35313);
  }
  .footer_line{
    left:calc(16px + var(--fs) * 4.456);
    right:16px;
    top:calc(var(--fs) * 0.596);
    height:calc(var(--fs) * 0.07);
    clip-path:polygon(calc(var(--fs) * 0.07) 0, 100% 0, 100% 100%, 0 100%);
  }
  .footer_black{
    position:absolute;
    left:0;
    top:auto;
    bottom:0;
    width:100%;
    height:189px;
    background:var(--c-band);
  }
  .footer_nav{
    left:16px;
    right:auto;
    top:24px;
    width:min(343px,calc(100% - 32px));
  }
  .footer_nav_line{
    font-size:14px;
    font-weight:400;
    line-height:30px;
    white-space:normal;
  }
  .footer_nav_line a{white-space:nowrap;}
  .footer_nav_line1{margin-bottom:0;}
  .footer_copy{
    right:16px;
    bottom:16px;
    font-size:12px;
    white-space:normal;
    text-align:right;
    line-height:25px;
  }
}


/* =========================================================
   ページ送り（矢印のみ・数字なし）
   一覧ページ共通コンポーネント。1ページ20件想定。
   通常 = 白地 + 黒枠 + 黒矢印
   ホバー = 黒地 + 白矢印
   無効(.is_disabled) = 薄いグレー枠のみ（--c-line / 矢印は隠す）
   ※表示可否・リンク先・.is_disabled の付与はPHP側で制御する
   ========================================================= */
.pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:56px;
  margin-top:80px;
}
.pager_btn{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:64px;
  height:64px;
  border:1px solid #000;
  border-radius:50%;
  background:#fff;
  color:#000;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
/* 矢印はPSD実データに準拠してCSSで描画（フォント文字は使わない）。
   PSDの「＞」(ZenOldMincho Black を scaleX1.61/scaleY1.84 で変形)を計測 →
   頂点角 約62°・外形 12×14px・細線。::before/::after の細線2本を ±30° に傾けて山形にする。
   色は currentColor 追従＝通常=黒 / ホバー=白 / 無効(.is_disabled)=transparentで非表示。 */
.pager_btn::before,
.pager_btn::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:14px;
  height:1.5px;
  background:currentColor;
}
.pager_btn::before{transform:translate(-50%,-50%) translateY(-3.5px) rotate(30deg);}
.pager_btn::after{transform:translate(-50%,-50%) translateY(3.5px) rotate(-30deg);}
/* 前へ（＜）は左右反転 */
.pager_btn--prev::before{transform:translate(-50%,-50%) translateY(-3.5px) rotate(150deg);}
.pager_btn--prev::after{transform:translate(-50%,-50%) translateY(3.5px) rotate(-150deg);}
.pager_btn:hover{
  background:#000;
  color:#fff;
}
/* 押せない状態＝薄いグレーの境界線のみ（背景が白なので白枠だと見えないため）。
   色は罫線用トークン --c-line(#ddd) に統一。矢印は transparent で隠す */
.pager_btn.is_disabled{
  border-color:var(--c-line);
  background:none;
  color:transparent;
  pointer-events:none;
}