:root{
  --teal:#006d4d; /* 萌葱色（要望） */
  --green:#10b981;
  --dark:#0f172a;
  --muted:#6b7280;
  --tatami:#f0f5ed; /* 優しい畳っぽい色 */
  --faded:#f4f6f8;
  --container:1100px;
}
*{box-sizing:border-box}
body{font-family:Inter, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;line-height:1.5;color:var(--dark);margin:0}
.container{max-width:var(--container);margin:0 auto;padding:28px}
.site-header{background:#fff;position:sticky;top:0;z-index:30;color:var(--dark)}
.header-inner{display:flex;align-items:center;gap:16px;padding:22px 0;flex-wrap:nowrap;justify-content:space-between}
.header-left{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.main-nav{margin-left:auto;display:flex;gap:18px;align-items:center;flex:0 0 auto}
.main-nav a::after{content:"▾";display:block;font-size:11px;color:var(--green);margin-top:6px;opacity:0.95}
.main-nav a{color:var(--dark);text-decoration:none;padding:10px 14px;border-radius:8px;background:transparent;box-shadow:none;transition:transform .18s ease,background .18s ease;font-size:16px}
.main-nav a:hover{background:rgba(0,0,0,0.04);transform:translateY(-2px)}
.cta-link{color:var(--green);font-weight:600;padding:6px 10px;border-radius:8px}
.btn-getapp{background:var(--green);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none}

.header-social{margin-left:12px;color:var(--dark);text-decoration:none;font-weight:700;background:transparent;padding:6px 8px;border-radius:8px}
.header-social:hover{background:rgba(0,0,0,0.04)}
.site-header > .container{max-width:100%;padding-left:28px;padding-right:28px}
.logo img{height:80px;display:block}
.site-title{font-weight:900;font-size:24px;margin-left:12px;color:var(--dark)}
.header-social img{height:36px;display:block}

.nav-toggle{display:none;background:transparent;border:1px solid rgba(0,0,0,0.06);padding:8px 10px;border-radius:8px;font-size:18px;cursor:pointer}

.policy-bar a{color:var(--dark);text-decoration:none;padding:8px 12px;border-radius:8px;background:transparent}
.policy-bar a:hover{background:rgba(0,0,0,0.04)}

.hero{color:#fff;padding:80px 0;background-size:cover;background-position:60% center;background-repeat:no-repeat;background-color:#071212;position:relative;overflow:hidden;min-height:420px}
.hero-inner{display:flex;gap:32px;align-items:flex-end}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0.64),rgba(0,0,0,0.03));pointer-events:none;z-index:1}
.hero-inner{position:relative;z-index:2}
.hero-inner{position:relative;z-index:2}
.hero::after{display:none}
.hero-left{flex:1;max-width:560px;align-self:flex-end;margin-bottom:16px;margin-left:24px;transform:translateY(6%)}

/* Ambassador badge in hero */
/* hero-badge removed per user request */
.eyebrow{color:#ffdd57;font-weight:700;margin:0 0 8px}
.hero h1{font-size:36px;margin:8px 0}
.lead{opacity:0.95}
.app-buttons{display:flex;gap:16px;margin-top:18px;max-width:480px;justify-content:flex-start;margin-left:0}
.app-btn{background:transparent;color:#fff;padding:0;border-radius:10px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;flex:0}
.app-btn img{display:block;height:48px;max-width:220px}
.hero-right{width:300px;margin-left:0;transform:translateX(450px)}
.reviews{background:rgba(0,0,0,0.7);color:#fff;padding:14px;border-radius:12px}
.review{display:flex;flex-direction:column;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,0.08);font-size:13px}
.review .stars{color:#ffd54d;font-size:13px;margin-bottom:6px}
.review .who{opacity:0.9;font-size:11px;margin-bottom:6px}
.review .rev-text{font-size:13px;line-height:1.3}
.review:last-child{border-bottom:none}

.section{padding:56px 0;text-align:center}
.section#features{background:var(--faded);border-radius:12px;margin:18px 0;padding:36px 18px}
.section#features .bubbles{width:100%;display:flex;gap:18px;margin-top:18px;justify-content:space-between}
.bubbles{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.bubbles span{flex:1 1 0;min-width:160px;padding:18px;border-radius:14px;background:#fff;color:var(--dark);font-weight:700;box-shadow:0 10px 30px rgba(2,6,23,0.04);text-align:center;margin:0}
.green-lead{color:var(--teal);font-weight:900;margin-top:18px;letter-spacing:1px;text-transform:uppercase}

.stats{background:var(--teal);color:#fff;padding:34px 0}
.stats-inner{display:flex;gap:12px;justify-content:space-between;max-width:var(--container);margin:0 auto}
.stat{flex:1;text-align:center;padding:18px}
.stat strong{font-size:36px;display:block;margin-top:8px}

.reasons{display:flex;gap:18px;margin-top:20px;justify-content:center}
.card{background:#fff;padding:20px;border-radius:14px;flex:1;max-width:320px;box-shadow:0 12px 30px rgba(2,6,23,0.08);text-align:center}
.card h4{margin-top:8px}
.reasons{display:flex;gap:18px;margin-top:20px;justify-content:center}
.reasons-section{background:var(--teal);color:#fff;padding:28px;border-radius:12px}
.reasons-section .reasons{display:flex;gap:24px;justify-content:space-between;max-width:var(--container);margin:0 auto;flex-wrap:wrap}
.reasons-section .card{background:#fff;color:var(--dark);padding:22px;border-radius:14px;flex:1;max-width:420px;box-shadow:0 12px 30px rgba(2,6,23,0.06)}
.reasons-section .card h4{margin-top:8px;color:var(--dark);font-weight:900;text-align:center}
.reasons-section .card .icon{font-size:32px;margin-bottom:8px;display:flex;justify-content:center}
.reasons-section .card .card-bullets{max-width:320px;margin:8px auto 0;text-align:left}
.reasons-section .card .icon img{width:64px;height:64px;object-fit:contain;display:block}
.reasons-section .card-bullets{list-style:disc;padding-left:20px;text-align:left;margin:8px 0;color:var(--dark)}
.card-bullets li{margin-bottom:6px}
.card-bullets{list-style:disc;padding-left:20px;text-align:left;margin:8px 0;color:rgba(255,255,255,0.95)}
.card-bullets li{margin-bottom:6px}
.card .icon{font-size:32px;margin-bottom:8px}

/* contact CTA centering and wider secondary button */
.contact-cta{margin-top:18px;display:flex;justify-content:center}
.btn-secondary{background:var(--teal);color:#fff;padding:14px 28px;border-radius:999px;text-decoration:none;font-weight:700;min-width:300px;display:inline-block;text-align:center}

/* Hover micro-animations */
.menu-card{transition:transform .28s ease, box-shadow .28s ease}
.menu-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(2,6,23,0.12)}
.therapist-card{transition:transform .28s ease, box-shadow .28s ease}
.therapist-card:hover{transform:translateY(-8px);box-shadow:0 28px 48px rgba(2,6,23,0.12)}

/* review micro-UI tweaks */
.reviews .stars{display:inline-block;background:linear-gradient(90deg,#ffd54d,#ffb347);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.reviews .who{font-size:11px;opacity:0.85}

/* Steps flow: vertical centered panels, remove arrows, pale blue-green background */
.steps.flow{display:flex;flex-direction:column;gap:18px;align-items:center}
.steps.flow .step{background:rgba(16,185,129,0.06);padding:18px;border-radius:12px;min-width:260px;max-width:880px;box-shadow:none;position:relative;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:18px}
.steps.flow .step::after{display:none !important}
.steps.flow .step .step-text{flex:1;min-width:220px}
.steps.flow .step .step-text strong{display:block;font-size:16px;margin-bottom:8px}
.steps.flow .step .step-figure{width:220px;height:auto;border-radius:10px;object-fit:cover}
.app-stack{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.app-stack .app-btn img{height:44px;display:block}

/* put howto figure inside a matching pale panel */
.howto-figure{background:rgba(16,185,129,0.06);padding:12px;border-radius:12px;display:flex;justify-content:center;align-items:center}
.howto-figure img{width:100%;height:auto;border-radius:8px;box-shadow:none}

/* Area map placeholder */
.area-map{width:100%;max-width:600px;border-radius:10px;display:block;margin:12px auto}

.menus-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;justify-items:stretch;max-width:var(--container);margin:0 auto}
.menu-card{background:linear-gradient(180deg,#f3fbf6,#eefbf2);border-radius:12px;overflow:hidden;box-shadow:0 12px 30px rgba(2,6,23,0.08);position:relative;color:var(--dark);width:100%}
.menu-card h4{color:var(--dark)}
.menu-card img{height:150px}
.menu-card .tag{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:6px;color:#08241b;font-weight:800;backdrop-filter:blur(4px)}
.menu-card img{width:100%;height:180px;object-fit:cover}
/* style for embedded menu videos to match image sizing */
.menu-card video.menu-video{width:100%;height:180px;object-fit:cover;border-radius:6px;display:block}
.menu-card h4{margin:12px}

/* colorful translucent sticky-note tags */
.menu-card:nth-child(1) .tag{background:rgba(255,230,179,0.9)}
.menu-card:nth-child(2) .tag{background:rgba(198,255,218,0.9)}
.menu-card:nth-child(3) .tag{background:rgba(255,209,220,0.9)}
.menu-card:nth-child(4) .tag{background:rgba(200,230,255,0.9)}
.menu-card:nth-child(5) .tag{background:rgba(230,255,240,0.9)}
.menu-card:nth-child(6) .tag{background:rgba(255,240,200,0.9)}

.therapist-samples{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  justify-items:center;
  align-items:start;
}
.therapist-card{background:linear-gradient(180deg,#ffffff,#fbfbfb);padding:14px;border-radius:12px;text-align:center;box-shadow:0 12px 30px rgba(2,6,23,0.06);width:100%;max-width:260px}
.therapist-card img{border-radius:10px;width:100%;height:auto;object-fit:contain;display:block}
.therapist-card .meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:13px}
.therapist-card .stars{color:#ffd54d}

.pricing-grid{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.price{background:#fff;padding:18px;border-radius:12px;flex:1;text-align:center}
.area-highlight{margin-top:18px}
.area-big{font-size:28px;font-weight:800;color:var(--dark)}

.testimonials-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.testi{background:#fff;padding:16px;border-radius:12px;box-shadow:0 8px 24px rgba(2,6,23,0.06)}
.testi .meta{font-size:12px;color:var(--muted);margin-top:8px}

.faq details{background:#fff;padding:12px;border-radius:10px;margin-bottom:8px;box-shadow:0 8px 20px rgba(2,6,23,0.04)}

.btn-primary{background:var(--teal);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:700}
.btn-secondary{background:var(--teal);color:#fff;padding:14px 28px;border-radius:999px;text-decoration:none;font-weight:700}

.site-footer{background:var(--teal);color:#fff;padding:28px 0;margin-top:36px}
.footer-inner{display:flex;gap:24px;align-items:flex-start}
.footer-links{display:flex;gap:24px;margin-left:auto}
.footer-links a{color:#fff;text-decoration:none;display:block;margin:6px 0}

/* game-like frame for therapist cards */
.therapist-card{position:relative;overflow:visible}
.therapist-card::before{content:"";position:absolute;inset:-6px;border-radius:16px;background:linear-gradient(135deg,rgba(0,109,77,0.06),rgba(16,185,129,0.03));z-index:-1}
.frame-badge{position:absolute;left:12px;top:12px;background:linear-gradient(90deg,var(--teal),#10b981);color:#fff;padding:6px 8px;border-radius:8px;font-weight:800;font-size:12px;box-shadow:0 6px 18px rgba(2,6,23,0.12)}
.therapist-card h4{margin:10px 0 6px}

/* star svg styling */
.star{fill:#ffd54d}
.star.empty{fill:#e6e6e6}

/* bubbles speech style */
.bubbles span{position:relative}
.bubbles span::after{content:"";position:absolute;bottom:-10px;left:18px;width:16px;height:12px;background:#fff;transform:skewX(-18deg) rotate(6deg);border-radius:2px}
.bubbles span{font-family:'M PLUS Rounded 1c','Noto Sans JP',sans-serif}

/* area map visual tweak */
.area-map{filter:grayscale(40%) contrast(95%);border-radius:8px}

/* howto layout and pricing table */
.howto-inner{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;max-width:var(--container);margin:0 auto;justify-items:center;position:relative}
.howto-inner .steps.flow{width:100%;display:flex;flex-direction:column;align-items:center}
.steps.flow .step{width:100%;max-width:720px;padding:24px}
.howto-inner::before{display:none}
.howto-inner .steps.flow{display:flex !important;flex-direction:column !important}

/* enforce menu grid 2 columns */
.menus-grid{grid-template-columns:repeat(2,1fr) !important}
.howto-figure img{width:100%;border-radius:10px;box-shadow:0 12px 30px rgba(2,6,23,0.08)}

.price-legend{background:#fff;padding:12px;border-radius:10px;margin-bottom:12px;box-shadow:0 8px 24px rgba(2,6,23,0.06)}
.price-formula{display:flex;gap:12px;align-items:center;justify-content:center;margin-bottom:12px}
.price-formula .pill{background:#fff;padding:8px 12px;border-radius:999px;box-shadow:0 6px 18px rgba(2,6,23,0.06)}
.pricing-table{width:100%;border-collapse:collapse;margin-top:12px}
.pricing-table th,.pricing-table td{border:1px solid #e6e6e6;padding:10px;text-align:center}
.pricing-table thead th{background:#f7faf7}
.pricing-table tbody td{background:#fff}

/* notice / terms panel used under pricing */
.notice-panel{background:#fff;padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(2,6,23,0.06);text-align:left;max-width:var(--container);margin:18px auto}
.notice-panel h3{margin-top:0;font-size:20px}
.notice-panel h4{margin:12px 0 6px;font-size:16px}
.notice-panel p{margin:6px 0;color:var(--muted);line-height:1.6}
.notice-panel ul{margin:6px 0 0;padding-left:20px}

/* match other sections: center the panel title and use theme teal */
.notice-panel h3{ text-align:center; color:var(--teal); }

/* Announcement banner at very top */
.announcement{color:var(--dark);padding:22px 0;background:transparent}
.announcement-inner{display:flex;flex-direction:column;align-items:center;gap:20px}
.announcement-title{text-align:center;color:var(--teal);font-size:28px;margin:0;font-weight:900}
.announcement-frame{background:#fff;border:6px solid var(--teal);border-radius:12px;padding:6px;box-shadow:0 12px 30px rgba(2,6,23,0.06);max-width:880px;width:100%}
.announcement-frame img{display:block;width:100%;height:320px;object-fit:contain;border-radius:6px}
.announcement-actions{display:flex;gap:12px;align-items:center;justify-content:center;width:100%;max-width:880px}
.announcement .announcement-text{margin:0;color:var(--muted);font-weight:700}
.announcement .announcement-text a{color:var(--teal);text-decoration:underline}
.announcement-close{background:var(--teal);border:none;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer;font-size:16px}

@media (max-width:900px){
  .announcement-title{font-size:20px}
  .announcement-frame img{height:180px}
  .announcement-actions{flex-direction:column;gap:8px}
}

/* add spacing so hero sits clearly below announcement */
.hero{margin-top:18px}

/* Banner mode: full-bleed background with overlaid title/text */
.announcement.banner{background-image:none;min-height:0;padding:0;background-color:transparent;color:var(--dark);width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.announcement.banner .announcement-frame{display:none}
.announcement.banner .announcement-title{background:transparent;color:var(--teal)}
.announcement.banner .announcement-actions{display:none}
.announcement.banner .announcement-text{display:none}
.announcement.banner .announcement-img{display:block;width:100vw;height:auto;max-width:none;object-fit:contain}
.announcement.banner .announcement-picture{display:block;width:100vw;max-width:none}
.announcement.banner .announcement-picture img{display:block;width:100vw;height:auto;max-width:none;object-fit:contain}
/* ensure no unexpected body horizontal scroll from full-bleed */
html,body{overflow-x:hidden}
.announcement-mode{display:flex;gap:8px;align-items:center}
.announcement-mode button{background:transparent;border:1px solid rgba(0,0,0,0.08);padding:6px 8px;border-radius:6px;cursor:pointer}
.announcement-mode button.active{background:var(--teal);color:#fff;border-color:var(--teal)}

@media (max-width:900px){
  .announcement.banner{padding:28px 0}
}

/* header subtle shadow */
.site-header{box-shadow:none}

/* testimonial accent and rating */
.testi{position:relative}
.testi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,#ffd54d,#ffb347);border-top-left-radius:12px;border-bottom-left-radius:12px}
.testi .rating{font-weight:800;color:#ffb347;margin-bottom:6px}

/* FAQ left-aligned and container */
.faq{max-width:var(--container);margin:0 auto}
.faq details{background:#fff;padding:12px;border-radius:10px;margin-bottom:8px;box-shadow:0 8px 20px rgba(2,6,23,0.04);text-align:left}

/* therapist section panel background */
.therapist-section{background:linear-gradient(180deg,#f3fbf6,#eefbf2);padding:18px;border-radius:12px}
.therapist-section .therapist-samples{padding:8px}


@media (max-width:900px){
  .hero-inner{flex-direction:column}
  /* show a compact hamburger and hide the full nav by default */
  .nav-toggle{display:inline-flex}
  .main-nav{display:none;flex-direction:column;gap:10px;padding:12px}
  .main-nav a{padding:8px 10px}
  .main-nav.open{display:flex;position:absolute;right:28px;top:78px;background:#fff;border-radius:8px;box-shadow:0 8px 24px rgba(2,6,23,0.08);z-index:40}
  .therapist-samples{grid-template-columns:1fr}
  .stats-inner{flex-direction:column}
  .howto-inner{grid-template-columns:1fr}
  /* steps: stack vertically on mobile */
  .steps.flow .step{flex-direction:column;align-items:flex-start}
  .app-stack{align-items:flex-start}
  .steps.flow .step-figure{width:100%;margin-top:12px}
  /* make hero smaller on mobile so first slide is viewable in one screen */
  .hero{min-height:220px;padding:32px 0;background-position:center center;background-size:cover}
  /* ensure hero background is centered on mobile to avoid right-shift */
  .hero h1{font-size:18px}
  /* slightly smaller lead text on mobile */
  .lead{font-size:13px}
  /* keep bubbles as original (do not force 2-col) — reverted per request */
  .reasons-section .reasons{flex-direction:column;align-items:center}
  .reasons-section .card{max-width:520px;width:100%}
  /* hide hero reviews on mobile to reduce clutter */
  .hero-right{display:none}
  /* center therapist samples into container */
  .therapist-section .therapist-samples{justify-content:center;max-width:var(--container);margin:0 auto}
}
/* スマホTOPバナーだけ：自然な比率で高画質表示 */
@media screen and (max-width: 900px) {
  .announcement.banner {
    width: 100% !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .announcement.banner .announcement-picture {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .announcement.banner .announcement-img,
  .announcement.banner .announcement-picture img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    transform: none !important;
  }
}
/* スマホ・PC入手ボタン */
.web-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 8px;
  background: #006d4d;
  color: #ffffff !important;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  flex: 0 0 auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

.web-btn:hover {
  background: #00543b;
  color: #ffffff !important;
}

/* Google Play横の並び調整 */
.app-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

/* スマホで途中改行させない */
@media screen and (max-width: 900px) {
  .app-buttons {
    gap: 8px;
    flex-wrap: nowrap !important;
  }

  .app-btn img {
    height: 40px;
  }

  .web-btn {
    min-height: 40px;
    padding: 0 12px;
    font-size: 12px;
    white-space: nowrap !important;
  }
}
/* =====================================================
   施術メニュー画像の表示位置調整
   1枚目・2枚目だけ少し上を表示する
===================================================== */

/* 施術メニュー画像の共通設定 */
.menu-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* 1枚目：もみほぐし＋オイルセット */
.menus-grid .menu-card:nth-child(1) img {
  object-position: center 89%;
}

/* 2枚目：もみほぐし＋フットセット */
.menus-grid .menu-card:nth-child(2) img {
  object-position: center 25%;
}