/* ===========================================
   Awakening Wellness ── 下層ページ共通
   色・書体・ヘッダー・フッター・メニュー・波線・ひし形・ふわっと出現
   TOP（index.html）と同じ見た目になるように揃えている
   =========================================== */

:root{
  --dark:      #484345;  /* ヘッダー・フッター */
  --bg:        #fcfcfc;  /* 白い背景 */
  --bg-tcm:    #f0eae6;  /* ピンクベージュの背景 */
  --bg-letter: #f4f0ee;
  --ink:       #484244;  /* 本文 */
  --ink-head:  #74686b;  /* 大見出し */
  --pink:      #c6a1a7;  /* 英字ラベル・見出し・ボタン・ひし形の線 */
  --pink-head: #c6a1a7;
  --btn:       #c6a1a7;
  --line-pink: #c6a1a7;
  --line:      #e2d7d6;
  --pink-logo: #dbbabf;  /* ロゴと同じピンク（ヘッダーのボタン・ホバー） */

  --maxw: 1020px;
  --gut: 24px;

  --sans: "Hiragino Sans","Yu Gothic",sans-serif;   /* 説明的な文章 */
  --serif:"Hiragino Mincho ProN","Yu Mincho",serif;  /* メッセージ */

  --grain:.10;
  --grain-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.40' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  color:var(--ink);background:var(--bg);
  font-size:16px;line-height:2.15;letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.en{font-family:var(--sans);font-size:11.5px;letter-spacing:.22em;color:var(--pink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.center{text-align:center}
.sans{font-family:var(--sans)}
/* 改行の出し分け：pc-br はスマホで消える／sp-br はスマホだけ出る */
.sp-br{display:none}

/* 紙の質感（画面全体に薄い粒子） */
body::after{
  content:"";position:fixed;inset:0;z-index:900;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:multiply;
  background-image:var(--grain-img);background-size:220px 220px;
}
@media print{ body::after{display:none} }

/* 波線：その場でゆっくり上下にうねる（2枚を違う周期で重ねる） */
.rule-wave{position:relative;width:330px;max-width:80%;height:52px;margin:10px 0 6px}
.rule-wave::before,.rule-wave::after{
  content:"";position:absolute;inset:0;
  background-image:url("../images/wave.svg");
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  transform-origin:center;
}
.rule-wave::before{opacity:.95;animation:swayA 7s ease-in-out infinite}
.rule-wave::after {opacity:.38;animation:swayB 9.6s ease-in-out infinite}
@keyframes swayA{0%,100%{transform:scaleY(1) translateY(0)}50%{transform:scaleY(.42) translateY(2px)}}
@keyframes swayB{0%,100%{transform:scaleY(.5) translateY(1px)}50%{transform:scaleY(1.05) translateY(-2px)}}
.rule-wave.c{margin-left:auto;margin-right:auto}
.rule-wave.r{margin-left:auto}
@media (prefers-reduced-motion:reduce){.rule-wave::before,.rule-wave::after{animation:none}}

/* 見出し（セクションの大見出し） */
.h-sec{
  font-size:clamp(20px,2.3vw,26px);font-weight:400;line-height:1.95;
  letter-spacing:.1em;color:var(--ink-head);
}

/* ボタン */
.btn{
  display:inline-block;
  font-family:var(--sans);font-size:13px;letter-spacing:.08em;line-height:1.6;
  background:var(--btn);color:#fff;padding:17px 40px;border-radius:999px;
  transition:opacity .35s ease;
}
.btn:hover{opacity:.88}

/* ============ ヘッダー ============ */
header{position:sticky;top:0;z-index:50;background:var(--dark);color:#f2ecea}
.hd{
  max-width:1240px;margin:0 auto;padding:22px var(--gut);
  display:flex;align-items:center;gap:30px;
}
.logo{display:flex;align-items:center}
.logo img{width:252px;height:auto}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{font-family:var(--sans);font-size:12.5px;letter-spacing:.06em;opacity:.92;transition:color .35s ease}
.nav a:hover,.nav a[aria-current="page"]{color:var(--pink-logo);opacity:1}
.btn-line{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;
  color:var(--pink-logo);border:1px solid var(--pink-logo);border-radius:999px;padding:11px 20px;white-space:nowrap;
  transition:background .35s ease;
}
.btn-line:hover{background:rgba(219,186,191,.12)}

/* ハンバーガー：ロゴと同じピンクの細い線3本。開くと×になる */
.burger{display:none;position:relative;width:30px;height:20px;margin-left:auto;padding:0;background:none;border:0;cursor:pointer;z-index:2}
.burger span{position:absolute;left:0;width:100%;height:1px;background:var(--pink-logo);transition:transform .35s ease,opacity .35s ease,top .35s ease}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:50%}
.burger span:nth-child(3){top:100%}
.menu-open .burger span:nth-child(1){top:50%;transform:rotate(30deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){top:50%;transform:rotate(-30deg)}

/* スマホのメニュー（ヘッダーの下に広がる） */
.sp-menu{
  position:fixed;left:0;right:0;top:var(--hd-h,64px);bottom:0;z-index:49;
  background:var(--dark);color:#f2ecea;
  padding:40px var(--gut) 60px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s;
}
.menu-open .sp-menu{opacity:1;visibility:visible}
.menu-open{overflow:hidden}
.sp-menu a{display:block}
.sp-menu .m-link{
  font-size:15px;letter-spacing:.1em;padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.sp-menu .m-link small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.2em;color:var(--pink-logo);opacity:.9;line-height:1.6}
.sp-menu .m-btn{
  margin-top:36px;text-align:center;font-family:var(--sans);font-size:13px;letter-spacing:.08em;
  color:var(--pink-logo);border:1px solid var(--pink-logo);border-radius:999px;padding:15px 0;
}
.sp-menu .m-sub{margin-top:28px;font-family:var(--sans);font-size:12px;opacity:.75}
.sp-menu .m-sub a{display:inline-block;margin-right:20px}

/* ============ 下層ページの見出し帯 ============ */
.page-hero{position:relative;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(260px,26vw,400px)}
.page-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{   /* 文字のまわりだけ少し暗くして白文字を読みやすく */
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(40,34,36,0) 35%,rgba(40,34,36,.22) 100%);
}
/* 下端を大きな波の形で切り取る（背景と同じ白の波を写真の下に重ねている）
   波の高さは --wave-h。形は下のSVGの path で決まる */
.page-hero{--wave-h:70px}
.page-hero::before{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--wave-h);z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath fill='%23fcfcfc' d='M0,62 C240,18 480,10 720,46 C960,82 1200,88 1440,40 L1440,100 L0,100 Z'/%3E%3C/svg%3E") no-repeat bottom/100% 100%;
}
.page-hero-in{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 44px;text-align:right;color:#fff}
.page-hero .en{color:#fff;opacity:.9;text-shadow:0 0 12px rgba(40,34,36,.4)}
.page-hero h1{font-size:clamp(22px,2.4vw,30px);font-weight:400;letter-spacing:.12em;line-height:1.5;margin-top:0;text-shadow:0 1px 14px rgba(40,34,36,.35)}

/* ============ 写真なしの見出し（店舗・アクセス、プライバシーポリシーなど） ============ */
.page-title{padding:96px 0 24px;text-align:center}
.page-title .mark{display:block;width:26px;height:auto;margin:0 auto 18px;opacity:.9}
.page-title h1{font-size:clamp(22px,2.4vw,30px);font-weight:400;letter-spacing:.14em;line-height:1.5;color:var(--ink-head);margin-top:2px}

/* 強調したい一文：左上と右下に、ピンクの細い線のかぎかっこ */
.kagi{--k:16px;position:relative;display:inline-block;padding:26px 48px}
.kagi::before,.kagi::after{content:"";position:absolute;width:42%;height:58%;pointer-events:none;--ln:linear-gradient(var(--pink),var(--pink))}
.kagi::before{left:calc(var(--k) * -1);top:calc(var(--k) * -1);background:var(--ln) left 0 top var(--k)/100% 1px no-repeat,var(--ln) left var(--k) top 0/1px 100% no-repeat}
.kagi::after{right:calc(var(--k) * -1);bottom:calc(var(--k) * -1);background:var(--ln) right 0 bottom var(--k)/100% 1px no-repeat,var(--ln) right var(--k) bottom 0/1px 100% no-repeat}

/* ============ ひし形（BODY / MIND / LIFE など） ============ */
.bml{display:flex;justify-content:center;align-items:center}
.dia{position:relative;width:228px;height:228px;flex:none}
.dia + .dia{margin-left:-14px}
.dia-shape{
  position:absolute;top:50%;left:50%;width:161px;height:161px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid var(--line-pink);
}
.dia-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.7}
.dia-en{font-size:19px;letter-spacing:.1em;color:var(--pink-head)}
.dia-ja{font-size:12px;letter-spacing:.1em;color:var(--pink-head)}

/* ============ フッター ============ */
footer{background:var(--dark);color:#e9e2e0;padding:72px 0 30px}
.ft{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.ft-grid{display:grid;grid-template-columns:1.25fr 1fr 1.2fr;gap:48px}
.ft-logo{display:flex;align-items:center;margin-bottom:16px}
.ft-logo img{width:200px;height:auto;filter:brightness(0) invert(1);opacity:.97}
.ft-tag{font-size:12.5px;opacity:.72;letter-spacing:.08em;margin-left:30px}
.ft-h{font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;opacity:.38;margin-bottom:20px}
.ft-nav a{display:table;font-size:13px;margin-bottom:12px;opacity:.9;transition:color .35s ease}
.ft-nav a:hover{color:var(--pink-logo);opacity:1}
.ft-info{font-size:13px;line-height:2;opacity:.9}
.ft-name{display:block;font-size:15.5px;letter-spacing:.12em;margin-bottom:8px}
.ft-tel{color:inherit;transition:color .35s ease}
.ft-tel:hover{color:var(--pink-logo)}
/* PCでは電話番号はリンクにしない（押してもPCでは電話がかけられないので）。スマホだけ押すと電話がかかる */
@media (min-width:768px){
  a[href^="tel:"]{pointer-events:none;cursor:text;color:inherit;text-decoration:none}
}
.ft-link{
  display:table;margin-top:18px;padding:11px 22px;
  font-family:var(--sans);font-size:12px;letter-spacing:.08em;line-height:1.6;
  border:1px solid rgba(233,226,224,.5);transition:color .35s ease,border-color .35s ease;
}
.ft-link:hover{color:var(--pink-logo);border-color:var(--pink-logo)}
/* 「浦和駅より徒歩10分」の横に小さく店舗案内へのリンク（10/23） */
.ft-map{margin-left:1.2em;font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;border-bottom:1px solid rgba(233,226,224,.45);transition:color .35s ease,border-color .35s ease}
.ft-map:hover{color:var(--pink-logo);border-color:var(--pink-logo)}
.ft-btm{
  border-top:1px solid rgba(255,255,255,.14);margin-top:52px;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--sans);font-size:11px;letter-spacing:.04em;opacity:.65;
}
.ft-btm a{margin-right:20px}

/* ============ スクロールでふわっと出現 ============ */
.js .fade{opacity:0;translate:0 18px;transition:opacity 1.2s ease,translate 1.2s ease}
.js .fade.is-in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.js .fade{opacity:1;translate:0 0;transition:none}}

/* ================= スマホ ================= */
@media (max-width:767px){
  body{font-size:15px;word-break:auto-phrase}
  .pc-br{display:none}
  .sp-br{display:inline}
  .nav,.btn-line{display:none}
  .burger{display:block}
  .hd{padding:16px var(--gut)}
  .logo img{width:178px}

  .page-hero{min-height:200px;--wave-h:34px}
  .page-title{padding:64px 0 16px}
  .page-title h1{font-size:21px}
  .kagi{padding:20px 26px;--k:12px}
  .page-hero-in{padding-bottom:26px}
  .page-hero h1{font-size:20px}

  .ft-grid{grid-template-columns:1fr;gap:34px}
  .ft-tag{margin-left:0}
  .ft-menu{display:none}
  .ft-shop .ft-h{display:none}
  .ft-info{font-size:12px}
  .ft-addr{font-size:10.5px;letter-spacing:0;white-space:nowrap}
  .ft-link{display:table;margin:24px auto 0;padding:11px 26px}
}
@media (min-width:768px){ .sp-menu{display:none} }