@charset "utf-8";

/* =========================================================
   Imports
========================================================= */
/* Font Awesome */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500&display=swap');

/* Template CSS */
@import url("slide.css");
@import url("inview.css");


/* =========================================================
   CSS Variables
========================================================= */
:root {
  --primary-color: #3e4144;
  --primary-inverse-color: #fff;

  --space-large: 8vw;
  --space-small: 2vw;
}


/* =========================================================
   Keyframes
========================================================= */
@keyframes opa1 {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes animation1 {
  0% { right: -100vw; }
  100% { right: 0px; }
}


/* =========================================================
   Base / Reset
========================================================= */
body * { box-sizing: border-box; }

html, body {
  font-size: 13px;
  height: 100%;
}

@media screen and (min-width:1200px) {
  html, body { font-size: 14px; }
}

@media screen and (min-width:1600px) {
  html, body { font-size: 1vw; }
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-text-size-adjust: none;
  background: #fff;
  color: var(--primary-color);
  line-height: 2;
  font-weight: 300;
}

figure { margin: 0; }
dd { margin: 0; }
nav ul { list-style: none; }
nav, ul, li, ol { margin: 0; padding: 0; }
section li { margin-left: 1rem; }

table { border-collapse: collapse; }

img { border: none; max-width: 100%; height: auto; vertical-align: middle; }
video { max-width: 100%; }
iframe { width: 100%; }
input { font-size: 1rem; }

section {
  overflow-x: hidden;
  padding: var(--space-large);
}


/* =========================================================
   Links
========================================================= */
a {
  color: inherit;
  transition: 0.3s;
}
a:hover {
  text-decoration: none;
  opacity: 0.9;
}


/* =========================================================
   Layout: Container / Main
========================================================= */
#container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

main {
  flex: 1 0 auto;
  overflow-x: hidden;
  padding: 6vw 0 0;
}


/* =========================================================
   Headings (common)
========================================================= */
main h2 {
  margin: 0;
  padding: 0;
  font-size: 1.8rem;
  font-weight: normal;
  margin-bottom: 5vw;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
}

main h2 span.sub-text {
  display: inline-block;
  font-size: 1rem;
  opacity: 0.6;
  letter-spacing: 0.1rem;
  padding-top: 2rem;
}

main h2 span.main-text {
  font-family: 'Noto Serif JP', serif;
}

main h3 {
  font-weight: 600;
  font-size: 1.4rem;
}



/* =========================================================
   English Font (Josefin Sans)
========================================================= */
h1,
.eigi,
.title,
.midashi,
.kazari {
  font-family: "Josefin Sans", sans-serif;
}

.eigi,
.title,
.midashi,
.sub-text,
.kazari,
.yoko {
  font-family: "Josefin Sans", sans-serif !important;
}

/* =========================================================
   Header / Logo
========================================================= */
header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

body:not(.home) header {
  margin-bottom: var(--space-large);
}

/* 共通：ロゴ配置 */
#logo {
  position: absolute;
  top: 10px;
  left: 15px;
  margin: 0;
}

#logo img {
  display: block;
  height: 50px;
  width: auto;
}

/* PC表示 */
@media screen and (min-width: 1025px) {
  #logo img {
    margin-top: 10px;
    margin-left: 10px;
    height: 30px;
  }
}

/* タブレット表示 */
@media screen and (min-width: 601px) and (max-width: 1024px) {
  #logo img {
    margin-top: 10px;
    height: 30px;
  }
}

/* スマホ表示 */
@media screen and (max-width: 600px) {
  #logo img {
    margin-top: 15px;
    height: 20px;
  }
}

/* ヘッダーナビは常に非表示 */
header nav { display: none !important; }

/* ハンバーガーメニューを常に表示 */
#menubar_hdr { display: block !important; }
#menubar { display: none; }


/* =========================================================
   Menubar（開いた状態）
========================================================= */
#menubar.display-block{
  position:fixed;
  overflow:auto;
  z-index:100;
  top:0;
  right:0;
  left:0;
  width:100vw;
  max-width:none;
  box-sizing:border-box;

  height:100%;
  padding:90px 10vw 50px;
  background:var(--primary-color);
  color:var(--primary-inverse-color);
  animation:animation1 .2s both;
}

/* =========================================================
   Menubar（中身の基本見た目）
========================================================= */
#menubar.display-block nav ul{ margin:0; padding:0; }

#menubar.display-block nav ul li{
  list-style:none;
  border:1px solid #fff;
  margin:1rem 0;
  border-radius:5px;
  text-align:left;
}

/* サブメニュー（第2階層） */
#menubar.display-block nav ul ul{
  margin:2rem;
  padding:0;
}

/* リンク（通常） */
#menubar.display-block a{
  display:block;
  color:inherit;
  padding:1rem 2rem;
  text-decoration:none;
}

/* hover で薄くならない（PCでも勝手に薄くならないよう強制） */
#menubar.display-block a:hover,
#menubar.display-block a:focus{
  opacity:1 !important;
  filter:none !important;
}


/* =========================================================
   メニュー：矢印（Font Awesome）を左に表示
   HTML：
   <a class="menu-parent">コースのご案内<span class="dli-chevron-down"></span></a>
========================================================= */
#menubar.display-block a.menu-parent{
  display:flex;
  align-items:center;
  gap:0.6rem;
}

/* 指定の矢印（Font Awesome chevron-down） */
#menubar.display-block a.menu-parent .dli-chevron-down{
  display:inline-block;
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:0.9em;
  line-height:1;
}

/* Font Awesome の中身 */
#menubar.display-block a.menu-parent .dli-chevron-down::before{
  content:"\f078";
}

/* ddmenu の子 ul は初期非表示 */
#menubar.display-block .ddmenu_parent > ul{
  display:none;
}


/* =========================================================
   Hamburger icon（黒UI・ドット＋3本バー）
========================================================= */
#menubar_hdr{
  animation:opa1 .3s .5s both;
  position:fixed;
  z-index:101;
  cursor:pointer;
  top:0;
  right:calc(var(--space-small) + 5px);
  width:3px;
  height:60px;
  padding:20px 35px 20px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:transform .5s;
  mix-blend-mode:normal;
}

#menubar_hdr .menu-icon{
  position:relative;
  width:36px;
  height:28px;
}

/* 3つのドット */
#menubar_hdr .menu-icon::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:6px;
  height:6px;
  background:#252525;
  border-radius:50%;
  box-shadow:
    0 0 0 1px #fff,          /* ← 白フチ */
    0 11px 0 #252525,
    0 11px 0 1px #fff,       /* ← 白フチ */
    0 22px 0 #252525,
    0 22px 0 1px #fff;       /* ← 白フチ */
}

/* 3本のバー */
#menubar_hdr .menu-icon span{
  position:absolute;
  left:10px;
  width:26px;
  height:6px;
  border-radius:999px;
  background:#252525;

  /* 追加 */
  box-shadow: 0 0 0 1px #fff;
}
#menubar_hdr .menu-icon span:nth-child(1){ top:0; }
#menubar_hdr .menu-icon span:nth-child(2){ top:11px; }
#menubar_hdr .menu-icon span:nth-child(3){ top:22px; }

/* 開いた状態（×） */
#menubar_hdr.ham .menu-icon::before{ opacity:0; }
#menubar_hdr.ham .menu-icon span:nth-child(1){
  top:11px;
  left:5px;
  width:30px;
  transform:rotate(45deg);
}
#menubar_hdr.ham .menu-icon span:nth-child(2){ opacity:0; }
#menubar_hdr.ham .menu-icon span:nth-child(3){
  top:11px;
  left:5px;
  width:30px;
  transform:rotate(-45deg);
}

.icons .icon-note {
  display: block;
  margin: 0;
  padding: 0;
}

.icons a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.icons .icon-note {
  font-size: 0.9rem;
}


/* =========================================================
   Menubar 表示トリガー
========================================================= */
#menubar{
  display:none;
}

/* JSが付ける可能性があるクラス名を全部拾う（保険） */
#menubar.display-block,
#menubar.db,
#menubar.open,
#menubar.active{
  display:block !important;
}


/* =========================================================
   Reservation Button
========================================================= */
#btn-special { padding: 0; margin: 0; }
#btn-special a {
  display: block;
  text-decoration: none;
  position: fixed;
  z-index: 100;
  right: 0px;
  top: 20vw;
  writing-mode: vertical-rl;
  text-orientation: upright;
  background: linear-gradient(#3c6963b4, #045248d0);
  color: #f6ebd2;
  padding: 2rem 1rem;
  border-radius: 3px 0px 0px 3px;
  letter-spacing: 0.1em;
}

#btn-special i { padding-bottom: 1rem; }


/* =========================================================
   Utilities
========================================================= */
.order1 { order: 1; }

.padding-lr0 { padding-left: 0 !important; padding-right: 0 !important; }

.large { font-size: 2em; letter-spacing: 0.1em; }


/* =========================================================
   Index: Concept section (box1)
========================================================= */
.box1 {
  overflow-x: visible;
  position: relative;
  background: #c0c9b9;
  padding: var(--space-large);
  color: #000;
}

.box1 .text,
.concept .text { margin-bottom: 5rem; }

@media screen and (min-width:600px) {
  .box1 {
    display: flex;
    justify-content: center;
    gap: 5vw;
    border-radius: 20vw 0 20vw 0;
  }

  .box1 .text {
    width: 50%;
    max-width: 600px;
    margin: 0 auto;
  }
}

p.bottom {
  margin-bottom: 2rem;
  font-size: 1.05rem;
  font-weight: 400;
}

@media screen and (min-width:600px) {
  .box1 {
    justify-content: center;
  }
  .box1 .text {
    margin: 0 auto;
  }
}

@media screen and (max-width:599px) {
  .box1 .text {
    margin-bottom: 2rem;
  }
  .box1 {
    border-radius: 40px 0 40px 0;
  }
}


/* =========================================================
   Index: Menu blocks (list1)
========================================================= */
.logo-kazari {
  background: url("../images/logo_kazari.svg") no-repeat left top / 70%;
}

.list1.image1 { background: url("../images/1.jpg") no-repeat center center / cover; }
.list1.image2 { background: url("../images/2.jpg") no-repeat center center / cover; }

/* PC表示時：拡大を抑えて全体を見せる */
@media screen and (min-width: 900px) {
  .list1.image1,
  .list1.image2 {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}

.list1 {
  padding: var(--space-large);
  position: relative;
  overflow-x: hidden;
  margin-bottom: 1vw;
}

/* テキストブロック */
.list1 .text {
  position: relative;
  z-index: 1;
  width: 80%;
  height: 100%;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

@media screen and (min-width:600px) {
  .list1 .text { width: 40%; }
}

@media screen and (min-width: 900px) {
  .list1 {
    position: relative;
  }
  .list1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.15);
    pointer-events: none;
  }
  .list1 .text {
    position: relative;
    z-index: 1;
  }
}

/* ===== FIX: indexのメニュー背景画像がPCで大きくなるのを防ぐ ===== */
@media screen and (min-width: 900px) {
  .list1.image1,
  .list1.image2 {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
}

/* テキスト配置入替 */
.list1 .text.reverse { margin-left: auto; }

/* list1内のh3 */
.list1 h3 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  position: relative;
  font-size: 2rem;
  letter-spacing: 0.1rem;
  line-height: 1.2;
}

.list1 h3 .large { font-size: 6rem; }

.list1 h3 span:not(.large) {
  font-size: 1rem;
  opacity: 0.5;
  position: absolute;
  right: 0px;
  top: 0px;
}

/* メニューカード内の説明用（白枠＋薄い黒背景） */
.menu-note {
  display: inline-block;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  padding: 0.4em 0.6em;
  font-size: inherit;
  line-height: 1.5;
  text-shadow: none;
  box-sizing: border-box;
}


/* =========================================================
   Index: Title plate (title-bg)
========================================================= */
.title-bg {
  display: flex;
  justify-content: center;
  padding: 3rem 0;
}

.title-bg h2 {
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255, 255, 255, 0.85);
  padding: 1.2rem 2.2rem 0.8rem 2.2rem;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.title-bg h2 .midashi {
  font-size: 2rem;
  line-height: 1;
}

.title-bg h2 .tate {
  margin-top: 15px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 2rem;
}

.title-bg h2 .yoko {
  font-size: 0.9rem;
  margin-top: 0.6rem;
  letter-spacing: 0.1rem;
  opacity: 0.55;
  line-height: 1.2;
}


.btn3 {
  text-align: right;
  letter-spacing: 0.1em;
}
.btn3 a {
  display: inline-block;
  text-decoration: none;
  color: #000;
  font-weight: 400;
  position: relative;
  padding-right: 5rem;
}

.btn3.white a {
  color: #fff;
  font-weight: 250;
}

.btn3 a::after {
  content: "";
  background: url("../images/arrow1.svg") no-repeat right center / 100px;
  display: block;
  position: absolute;
  right: 0px;
  bottom: -1rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  transition: 0.3s;
  border: 1px solid #263d33;
}

.btn3 a:hover::after {
  background-color: #263d33;
  background-position: left center;
}

.btn3.white { color: #fff; }

.btn3.white a::after {
  color: #fff;
  background: url("../images/arrow1_white.svg") no-repeat right center / 100px;
  border: 1px solid #fff;
}
.btn3.white a:hover::after {
  color: #fff;
  background-color: #fff;
  background-position: left center;
}


/* =========================================================
   Google Map (responsive)
========================================================= */
.iframe-box {
  width: 100%;
  height: 0;
  padding-top: 50%;
  position: relative;
  overflow: hidden;
}
.iframe-box iframe {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}


/* =========================================================
   Footer
========================================================= */
footer a { color: inherit; text-decoration: none; }
footer small { font-size: 100%; }

footer {
  background: var(--primary-color);
  color: var(--primary-inverse-color);
  font-size: 0.85rem;
  padding: 5vw;
}

@media screen and (min-width:600px) {
  footer {
    display: flex;
    justify-content: space-between;
  }
}

footer .image {
  width: 200px;
  text-align: center;
}

@media screen and (max-width:500px) {
  footer .image { width: auto; }
  footer .image img { width: 80px; }
}

footer .logo { opacity: 0.5; }

@media screen and (min-width:600px) {
  footer .text {
    display: flex;
    gap: 5rem;
  }
}

footer h4 {
  font-weight: 200;
  font-size: 1.2rem;
  line-height: 1.3;
}

footer h4 .kokoro{
  font-weight: 200;
  font-size: 0.8rem;
}

/* Icons */
.icons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-self: center;
  gap: 1rem;
}
.icons i { font-size: 30px; }


/* =========================================================
   Accessibility
========================================================= */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* =========================================================
   concept.html 用（.concept）
========================================================= */
.concept {
  overflow-x: visible;
  position: relative;
  background: #c0c9b9;
  color: #000;
  font-weight: 350;
}


@media screen and (min-width:600px) {
  .concept {
    display: flex;
    gap: 5vw;
    border-radius: 20vw 0 20vw 0;
  }
}


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

  /* 中身幅を index と同じ思想に寄せる */
  .page-concept .concept .text{
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 段落の幅（読みやすさ） */
  .page-concept .concept .text p{
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }

  /* h2 を中央基準に（左寄りを防ぐ） */
  .page-concept .concept h2{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* 「上の線（装飾）」を index 以外では消す（疑似要素対策） */
  .page-concept .concept h2::before,
  .page-concept .concept h2::after{
    content: none !important;
    display: none !important;
  }
}

.page-concept .concept p {
  font-weight: 400;
  line-height: 2;
}


/* =========================================================
   servicemenu.html 用（.menu）
========================================================= */
.menu {
  background: #292f42;
  color: #fff;
  position: relative;
}

@media screen and (min-width:600px) {
  .menu {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}

.menu h2 {
  margin: 0;
  padding: 0;
  font-size: 2rem;
  letter-spacing: 0.4em;
}

@media screen and (min-width:600px) {
  .menu h2 {
    writing-mode: vertical-lr;
    margin-right: 18vw;
  }
}

.menu h2 .kazari {
  line-height: 1;
  font-size: 0.9rem;
}

@media screen and (min-width:600px) {
  .menu h2 .kazari {
    font-size: 20vw;
    position: absolute;
    right: 0px;
    top: var(--space-large);
    color: rgba(255,255,255,0.05);
  }
}

/* Main Menu / Option Menu タイトル dt */
.menu dt.title {
  font-size: 1.2rem;
  display: block;
  margin-top: 20px;
  padding: 0.3rem 0 0 1rem;
  background-color: #fff;
  color: #000;
  border: none;
  cursor: default;
  position: relative;
  font-weight: 400;
}
.menu dt.title::after { content: ''; }


/* プラス／マイナス */
.menu dt::after {
  content: '＋';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}
.menu dt.active::after { content: '－'; }




/* メニュー名 bodycare footcare etc*/
.menu dt {
  font-size: 1.3rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding: 1rem 0 0 1rem;
  cursor: pointer;
  position: relative;
}

.menu dt .en {
  font-family: "Cookie", cursive;
  font-size: 2rem;
}

/* =========================================================
   servicemenu.html 用（.menu）
========================================================= */

/* -------------------------
   Section base
------------------------- */
.menu{
  background:#292f42;
  color:#fff;
  position:relative;
}

@media screen and (min-width:600px){
  .menu{
    display:flex;
    flex-direction:row-reverse;
    justify-content:space-between;
  }
}

/* -------------------------
   Section heading (h2)
------------------------- */
.menu h2{
  margin:0;
  padding:0;
  font-size:2rem;
  letter-spacing:0.4em;
}

@media screen and (min-width:600px){
  .menu h2{
    writing-mode:vertical-lr;
    margin-right:18vw;
  }
}

.menu h2 .kazari{
  line-height:1;
  font-size:0.9rem;
}

@media screen and (min-width:600px){
  .menu h2 .kazari{
    font-size:20vw;
    position:absolute;
    right:0;
    top:var(--space-large);
    color:rgba(255,255,255,0.05);
  }
}

/* -------------------------
   Category title band (Main Menu / Option Menu)
------------------------- */
.menu dt.title{
  font-size:1.2rem;
  display:block;
  margin-top:20px;
  padding:0.3rem 0 0 1rem;
  background:#fff;
  color:#000;
  border:none;
  cursor:default;
  position:relative;
  font-weight:400;
}
.menu dt.title::after{ content:""; }

/* -------------------------
   Category header (Body Care / Foot Care etc)
------------------------- */
.menu dt{
  font-size:1.3rem;
  border-top:1px solid rgba(255,255,255,0.2);
  padding:1rem 2.5rem 0 1rem; /* 右は＋/−表示分の余白 */
  cursor:pointer;
  position:relative;
}

.menu dt .en{
  font-family:"Cookie", cursive;
  font-size:2rem;
}

/* ＋／－ */
.menu dt::after{
  content:"＋";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:18px;
}
.menu dt.active::after{ content:"－"; }

/* -------------------------
   Body (dd)
   ※ 左右の余白を揃えて「帯が右寄りに見える問題」を根絶
------------------------- */
.menu dd{
  margin:0;
  padding:0 1rem 2rem; /* ← 左右同じ */
  font-size:1rem;
}

@media screen and (min-width:600px){
  .menu dd{
    padding:0 2rem 2rem;
  }
  .menu .text{
    width:50%;
  }
}

/* -------------------------
   Lead paragraph
------------------------- */
.menu dd p.lead{
  margin:0 0 1.5rem 0;
  line-height:1.7rem;
}

/* =========================================================
   Course blocks
   HTML例：
   <div class="course">
     <div class="course-head">
       <div class="course-name">ひざ上までコース</div>
       <div class="course-price">40分　￥4,400</div>
     </div>
     <p class="course-info">...</p>
   </div>
========================================================= */
.menu .course{
  margin-top:30px;
}

.menu .course-head{
  background:#626580;
  color:#fff;
  padding:0.5rem 1rem;
  border-radius:4px;
  box-sizing:border-box;

  display:grid;
  grid-template-columns:1fr auto; /* 左：コース名 / 右：価格 */
  gap:0.8rem;
  align-items:center;
}

.menu .course-name{
  min-width:0;
  font-size:14px;
  line-height:1.4;
}

.menu .course-price{
  text-align:right;
  white-space:nowrap;
  font-size:14px;
  line-height:1.4;
}

/* 2段価格（divを入れた場合） */
.menu .course-price > div{
  line-height:1.2;
}

/* 説明文（旧Cinfoの置き換え） */
.menu .course-info{
  margin:0.7rem 0 0;
  line-height:1.7rem;
  font-size:0.95rem;
}

/* -------------------------
   Message box (p.message)
------------------------- */
.menu dd p.message{
  margin-top:2.5rem;
  padding:1.2rem;
  background:rgba(255,255,255,0.2);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:6px;
  line-height:1.7;
  font-size:0.95rem;
}

/* -------------------------
   Note (p.tyui)
------------------------- */
.menu dd p.tyui{
  margin:3rem 0;
  line-height:1.7rem;
  font-size:0.95rem;
}


/* =========================
   price（料金セクション）
========================= */

.price {
  background: #545f5f;
  color: #fff;
  position: relative;
}

@media screen and (min-width:600px) {
  .price {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}

.price h2 {
  margin: 0;
  padding: 0;
  font-size: 2rem;
  font-weight: 200;
  letter-spacing: 0.4em;
}

@media screen and (min-width:600px) {
  .price h2 {
    writing-mode: vertical-lr;
    margin-right: 18vw;
  }
}

.price h2 .kazari {
  line-height: 1;
  font-size: 0.9rem;
}

@media screen and (min-width:600px) {
  .price h2 .kazari {
    font-size: 20vw;
    position: absolute;
    right: 0px;
    top: var(--space-large);
    color: rgba(255,255,255,0.05);
  }
}

/* セクション見出し（Main menu / Option menu など） */
.price dd.title {
  font-size: 1.2rem;
  font-weight: 400;
  margin-top: 20;
  padding: 0.4rem 1rem 0 1rem;
  background-color: #fff;
  color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-content: flex-start; /* 追加（space-betweenを無効化） */
  gap: 1rem;                   /* あると綺麗 */
}

/* 右寄せ注記（延長など） */
.price dd.title .dt-enote {
  font-size: 0.9rem;
  font-weight: 400;
  opacity: 0.95;
  white-space: nowrap;

  margin-left: auto;  /* ← これがポイント */
}

/* オプション単体日本語 */
.price dd.title .jpname {
  font-size: 0.9rem;
}



.price dt {
  font-size: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding: 1rem 2rem 0rem 1rem;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  font-weight: 400;
}

/* dt日本語メニュー名 */
.price dt .jpname {
  font-size: 1rem;
}

/* dt右寄せ注記 */
.price dt .dt-note {
  font-size: 0.9rem;
  font-weight: 300;
  opacity: 0.95;
  white-space: nowrap;

  margin-left: auto;  /* ← これがポイント */
}

/* 内容（dd） */
.price dd {
  padding: 0 0 2rem 0;
  font-size: 0.9rem;
}

@media screen and (min-width:600px) {
  .price dd { padding: 0 2rem 2rem 2rem; }
  .price .text { width: 50%; }
}

/* 箇条書き：左の「・」位置を基準に揃える */
.price dd ul {
  list-style: none;
  margin: 0.6rem 0 0 0;
  padding: 0;
}

.price dd ul li {
  position: relative;
  padding-left: 1.2em;
  line-height: 1.6;
}

.price dd ul li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

/* 30分と（Optionとの組み合わせ専用）の間に線 */
.price dd ul li.divider-top {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.25);
}

/* （Optionとの組み合わせ専用）を「・」と同じ開始位置に */
.price dd .option-note {
  margin: 0.4rem 0 0 0;   /* 行間を広げすぎない */
  padding-left: 1.2em;    /* 「・」開始位置に揃える */
  line-height: 1.6;
}

/* 20分だけのリスト：余計な段差を作らない */
.price dd ul.sub {
  margin-top: 0.2rem;
}

.price dd p {
  margin-top: 3rem;
  line-height: 1.6;
}


/* =========================================================
   faq.html 用（.faq）
========================================================= */
.faq {
  background: #53504c;
  color: #fff;
  position: relative;
}

@media screen and (min-width:600px) {
  .faq {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
  }
}

.faq h2 {
  margin: 0;
  padding: 0;
  font-size: 2rem;
  font-weight: 200;
  letter-spacing: 0.4em;
}

@media screen and (min-width:600px) {
  .faq h2 {
    writing-mode: vertical-lr;
    margin-right: 18vw;
  }
}

.faq h2 .kazari {
  line-height: 1;
  font-size: 0.9rem;
}

@media screen and (min-width:600px) {
  .faq h2 .kazari {
    font-size: 20vw;
    position: absolute;
    right: 0px;
    top: var(--space-large);
    color: rgba(255,255,255,0.05);
  }
}

/* faqタイトル */
.faq dd.title {
  font-size: 1.1rem;
  font-weight: 400;
  margin-top: 20px;
  padding: 0.4rem 0 0 1rem;
  background-color: #fff;
  color: #000;
}

/* 質問 dt */
.faq dt {
  font-size: 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding: 1rem 2rem 1rem 1rem;
  cursor: pointer;
  position: relative;
}

@media screen and (min-width:600px) {
  .faq dt { padding: 2rem 2rem 1rem 2rem; }
}

/* 回答 dd */
.faq dd {
  padding: 0 0 2rem 1rem;;
  font-size: 0.9rem;
}

@media screen and (min-width:600px) {
  .faq dd { padding: 0 2rem 2rem 2rem; }
  .faq .text { width: 50%; }
}

/* プラス／マイナス */
.faq dt::after {
  content: '＋';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}
.faq dt.active::after { content: '－'; }


/* =========================================================
   Japanese H2 Font Control
   セクション別 h2 の日本語見出しを明朝（Noto Serif JP）に統一
   ※ 英字（Josefin Sans）との競合を防ぐため main-text のみに指定
========================================================= */

.menu h2 .main-text,
.price h2 .main-text,
.faq h2 .main-text {
  font-family: 'Noto Serif JP', serif;
}