/* Maruyama Sekkotsuin site.css */
/* Bonesetting clinic house style — Color tokens
   Base: clean white/off-white. Main: trustworthy navy-blue.
   Accent: warm orange/beige, used sparingly. */

:root {
  /* --- Brand: navy-blue (trust) --- */
  --navy-900: #0d2742;
  --navy-800: #103154;
  --navy-700: #14467a;   /* primary */
  --navy-600: #1d5a96;
  --navy-500: #2f72b4;
  --navy-400: #5a93c9;
  --navy-200: #b6d3e8;
  --navy-100: #dcebf6;
  --navy-50:  #eff6fb;

  /* --- Accent: warm orange (warmth, call to action) --- */
  --orange-700: #c75f1d;
  --orange-600: #e0762c;   /* accent */
  --orange-500: #ef8a3f;
  --orange-200: #f8cda4;
  --orange-100: #fce6d3;
  --orange-50:  #fdf3ea;

  /* --- Beige (soft surfaces) --- */
  --beige-200: #ece0cd;
  --beige-100: #f6efe3;
  --beige-50:  #faf6ee;

  /* --- LINE green (the LINE booking button only) --- */
  --line-green: #06c755;
  --line-green-dark: #05a948;

  /* --- Neutrals / ink --- */
  --white:    #ffffff;
  --offwhite: #f5f8fb;   /* page base */
  --ink-900:  #15293c;   /* heading / strong text */
  --ink-800:  #1f3548;
  --ink-700:  #3a4c5d;   /* body text */
  --ink-500:  #647585;   /* secondary text */
  --ink-400:  #8b99a6;
  --ink-300:  #b6c0c9;   /* disabled */
  --line-200: #e4eaf0;   /* hairline borders */
  --line-100: #eef2f6;

  /* --- Semantic (forms / states) --- */
  --success: #2f9e5e;
  --success-bg: #e7f5ed;
  --warning: #d8941f;
  --warning-bg: #fbf1dc;
  --error:   #cf3b3b;
  --error-bg: #fbe9e9;

  /* --- Semantic aliases (use these in components) --- */
  --color-primary: var(--navy-700);
  --color-primary-hover: var(--navy-800);
  --color-primary-press: var(--navy-900);
  --color-accent: var(--orange-600);
  --color-accent-hover: var(--orange-700);

  --bg-page: var(--offwhite);
  --bg-section: var(--white);
  --bg-section-alt: var(--navy-50);
  --bg-warm: var(--beige-100);
  --surface-card: var(--white);

  --text-heading: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-on-primary: #ffffff;
  --text-on-accent: #ffffff;
  --text-link: var(--navy-700);

  --border-default: var(--line-200);
  --border-strong: var(--navy-200);
}

/* Bonesetting clinic house style — Typography tokens
   Legibility first: large body text, generous line spacing (readable for elderly patients). */

:root {
  /* Families */
  --font-display: 'Zen Kaku Gothic New', 'Noto Sans JP', system-ui, sans-serif;
  --font-body: 'Noto Sans JP', system-ui, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-number: 'Roboto', 'Noto Sans JP', system-ui, sans-serif; /* phone numbers, prices */

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;   /* display headings only */

  /* Type scale — mobile-first, large for legibility */
  --text-display: 2.5rem;   /* 40px  first-view (above the fold) heading */
  --text-h1: 2rem;          /* 32px */
  --text-h2: 1.625rem;      /* 26px  section heading */
  --text-h3: 1.25rem;       /* 20px */
  --text-lead: 1.1875rem;   /* 19px  lead text */
  --text-body-lg: 1.125rem; /* 18px  body text (default) */
  --text-body: 1.0625rem;   /* 17px */
  --text-sm: 0.9375rem;     /* 15px  notes */
  --text-xs: 0.8125rem;     /* 13px  smallest (insurance notes and the like) */

  /* Line heights — generous */
  --leading-tight: 1.3;     /* headings */
  --leading-snug: 1.5;
  --leading-body: 1.9;      /* body text */
  --leading-loose: 2.05;

  /* Letter spacing */
  --tracking-heading: 0.01em;
  --tracking-body: 0.02em;
}

/* Base element defaults (consumers inherit these) */
:root {
  font-family: var(--font-body);
  color: var(--text-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bonesetting clinic house style — Spacing tokens
   Generous whitespace, never cramped. A 4px base. */

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Semantic spacing */
  --gutter: var(--space-5);            /* mobile side padding */
  --gutter-lg: var(--space-8);         /* desktop side padding */
  --section-y: var(--space-16);        /* vertical rhythm between sections (mobile) */
  --section-y-lg: var(--space-24);     /* desktop */
  --stack: var(--space-4);             /* default gap in a vertical stack */
  --card-padding: var(--space-6);

  /* Layout */
  --content-max: 1080px;               /* desktop content width */
  --reading-max: 680px;                /* prose measure */
  --tap-min: 48px;                     /* min hit target (≥44px) */
}

/* Bonesetting clinic house style — Radius tokens
   Lightly rounded corners: soft, but never childish. */

:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;   /* default for cards, inputs */
  --radius-lg: 16px;   /* large cards, hero panels */
  --radius-xl: 24px;
  --radius-pill: 999px;

  --radius-card: var(--radius-lg);
  --radius-button: var(--radius-md);
  --radius-input: var(--radius-md);
}

/* Bonesetting clinic house style — Shadow tokens
   Soft, clean shadows, never heavy, faintly tinted navy. */

:root {
  --shadow-xs: 0 1px 2px rgba(13, 39, 66, 0.06);
  --shadow-sm: 0 2px 6px rgba(13, 39, 66, 0.07);
  --shadow-md: 0 6px 18px rgba(13, 39, 66, 0.08);
  --shadow-lg: 0 14px 34px rgba(13, 39, 66, 0.10);
  --shadow-cta: 0 8px 20px rgba(224, 118, 44, 0.28);  /* accent CTA glow */

  --ring-focus: 0 0 0 3px rgba(47, 114, 180, 0.35);   /* keyboard focus */

  --shadow-card: var(--shadow-md);
}

/* Bonesetting clinic house style — Motion tokens
   Restrained: fades and short easing; no bouncing motion (calm, trust). */

:root {
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */

  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */

  --transition-button: background-color var(--dur-fast) var(--ease-standard),
                       box-shadow var(--dur-fast) var(--ease-standard),
                       transform var(--dur-fast) var(--ease-standard);
}


  body{margin:0;background:#fff}
  a{color:#1c1c1c;text-decoration:none}
  a:hover{color:#d71f26}
  image-slot{width:100%;height:100%;display:block}
  .m-sec{padding:64px 20px}
  .m-tab{flex:0 0 auto;white-space:nowrap;padding:14px 14px;background:none;border:none;border-bottom:3px solid transparent;color:#5c5c5c;font-family:var(--fd,sans-serif);font-weight:700;font-size:15px;cursor:pointer}
  .m-tab:hover{color:#1c1c1c}
  @keyframes m-fade{from{opacity:0}to{opacity:1}}
  .m-tab[data-active="true"]{color:#1c1c1c;border-bottom-color:#d71f26}
  .m-pc{display:none !important}
  .m-hero{display:flex;flex-direction:column}
  .m-row{display:flex;flex-direction:column}
  .m-btnrow{justify-content:center !important}
  .m-layout{display:flex;flex-direction:column}
  .m-main{min-width:0}
  .m-side{padding:48px 20px 56px;box-sizing:border-box}
  @media(min-width:1100px){
    .m-layout{display:block;position:relative}
    .m-main{min-height:var(--m-minh,0px)}
    .m-side{position:absolute;top:var(--m-heroh,0px);left:max(28px,calc((100% - 1500px) / 2));width:290px;padding:40px 0 64px}
    .m-layout:not([data-home="true"]) .m-main > * > :not(:first-child),.m-layout[data-home="true"] .m-main > * > :nth-child(n+3){margin-left:calc(max(28px,calc((100% - 1500px) / 2)) + 322px) !important}
  }
  @media(min-width:900px){
    .m-btnrow{justify-content:flex-end !important}
    .m-sec{padding:96px clamp(28px,4vw,64px)}
    .m-pc{display:flex !important}
    .m-sp{display:none !important}
    .m-tab{font-size:16px;padding:16px 22px}
    .m-nav{justify-content:center}
    .m-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:560px}
    .m-row{flex-direction:row}
    .m-pagehead{padding:72px clamp(28px,4vw,64px) !important}
    .m-pagehead h1{font-size:40px !important}
    .m-fixedbar{display:none !important}
    .m-app{padding-bottom:0 !important}
  }


.m-app{--fd:'Zen Kaku Gothic New',sans-serif;--fb:'Noto Sans JP',sans-serif}
html{scroll-behavior:smooth}
.m-menu-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.m-menu-cb:not(:checked) ~ .m-menu-panel{display:none !important}
.m-menu-cb:checked ~ div .m-bar1{transform:translateY(7px) rotate(45deg) !important}
.m-menu-cb:checked ~ div .m-bar2{opacity:0 !important}
.m-menu-cb:checked ~ div .m-bar3{transform:translateY(-7px) rotate(-45deg) !important}
.m-menu-cb:focus-visible ~ div label[for="m-menu"]{outline:2px solid #1c1c1c;outline-offset:2px}
label[for="m-menu"]{user-select:none;-webkit-tap-highlight-color:transparent}
details.m-faq>summary{list-style:none;box-sizing:border-box}
details.m-faq>summary::-webkit-details-marker{display:none}
details.m-faq .m-sign-open,details.m-faq[open] .m-sign-closed{display:none}
details.m-faq[open] .m-sign-open{display:inline}
.m-hide{display:none !important}
html:not(.js) .m-pg,html:not(.js) .m-chip{display:none !important}
.m-hero-img{opacity:0;animation:m-hero 24s ease-in-out infinite}
.m-hero-dot{display:block;box-sizing:border-box;width:10px;height:10px;border-radius:50%;border:1.5px solid #fff;background:transparent;animation:m-dot 24s step-end infinite}
@keyframes m-hero{0%{opacity:0;transform:scale(1)}7.5%{opacity:1}25%{opacity:1}32.5%{opacity:0;transform:scale(1.06)}100%{opacity:0;transform:scale(1.06)}}
@keyframes m-hero-r{0%{opacity:0}7.5%{opacity:1}25%{opacity:1}32.5%{opacity:0}100%{opacity:0}}
@keyframes m-dot{0%{background:#fff}25%{background:transparent}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.m-hero-img{animation-name:m-hero-r}}
@media(min-width:900px){.m-pagehead .m-h1{font-size:40px !important}}
@media(min-width:1100px){
  html:not(.js) .m-layout .m-side{position:static;width:auto;padding:40px clamp(28px,4vw,64px) 64px}
  html:not(.js) .m-layout.m-layout .m-main.m-main > * > *{margin-left:0 !important}
  html:not(.js) .m-layout .m-main{min-height:0}
}
.xh0:hover{background:#05b34c !important;color:#fff !important}
.xh1:hover{background:#b8171e !important;color:#fff !important}
.xh2:hover{background:#b8171e !important}
.xh3:hover{color:#d71f26 !important}
.xh4:hover{border-color:#1c1c1c !important}
.xh5:hover{background:#f6f6f4 !important;color:#1c1c1c !important}
.xh6:hover{background:#f6f6f4 !important}
.xh7:hover{opacity:.88 !important}
.xh8:hover{opacity:.92 !important}
.xh9:hover{color:#ff6a6f !important}
.xha:hover{color:#ffffff !important}
.xhb:hover{background:#1c1c1c !important;color:#fff !important}
.xhc:hover{background:#000 !important}