/* ===========================================================
   Reframe and Bloom Center — shared stylesheet
   =========================================================== */

:root{
  --color-bg:        #eef3f1;
  --color-bg-alt:    #ffffff;
  --color-card:      #ffffff;
  --color-primary:   #204f48;   /* deep teal-green : headings */
  --color-accent:    #48c8c2;   /* bright teal : CTA buttons  */
  --color-accent-dk: #37a49f;
  --color-muted:     #839e9b;   /* sage : sub headings        */
  --color-text:      #0B504C;
  --color-border:    #dbe6e3;
  --radius-lg: 28px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 50px rgba(32,79,72,.10);
  --container: 1080px;
  --fs-body: clamp(17px, 1.1vw, 18px);
  --fs-small: clamp(15px, .85vw, 16px);
  --fs-badge: clamp(17px, 1.1vw, 18px);   /* check badges (hero + CTA) */
  --fs-title: clamp(21px, 1.6vw, 27px);   /* ALL section titles share this size (same as the 「家族の平和」 title) */
  --ls-title: .04em;
  --font-title: "游ゴシック体","Yu Gothic","YuGothic","Hiragino Sans",sans-serif;   /* same face as the top-page catch copy */
  --shadow-title: 0 3px 6px rgba(0,0,0,.22);
  --gap-badge: clamp(16px, 1.6vw, 24px);
  --lh-body: 2;
  --gap-para: clamp(12px, 1vw, 16px);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  /* Japanese text wraps at phrase boundaries where the browser supports it (avoids 1-2 character last lines) */
  word-break: auto-phrase;
}
/* the three reproduced profile sections keep the original site's exact line breaks */
.section-profile, .section-history, .section-family{ word-break: normal; }
@media (max-width: 979px){
  /* below the original's 980px layout the exact breaks no longer apply: use phrase wrapping again */
  .section-profile, .section-history, .section-family{ word-break: auto-phrase; }
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font:inherit; }

.container{
  width:100%;
  max-width: var(--container);
  margin:0 auto;
  padding: 0 24px;
}

/* ---------- header ---------- */
.site-header{
  background: #E6EDED;
}
.site-header .container{
  max-width: 1280px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 12px 32px;
  padding: 16px clamp(20px, 4vw, 56px);
}
.brand{
  display:flex;
  align-items:center;
  gap: clamp(14px, 1.6vw, 24px);
  color: #204F48;
}
.brand img{
  width: clamp(84px, 9vw, 132px);
  height: clamp(84px, 9vw, 132px);
  object-fit:contain;
  flex-shrink:0;
}
.brand-text br{ display:none; }
.brand-text{ flex-shrink:0; margin-top: clamp(4px, 1vw, 14px); }
.brand-text .ja{
  display:block;
  white-space:nowrap;
  line-height:1.3;
  font-size: clamp(19px, 1.25vw, 24px);
  font-family: "Yu Gothic","YuGothic","游ゴシック体","游ゴシック",sans-serif;
  font-weight:700;
  letter-spacing:.02em;
  color: #204F48;
  text-shadow: 0 2px 4px rgba(11,80,76,.25);
}
.brand-text .en{
  display:block;
  white-space:nowrap;
  line-height:1.3;
  margin-top: 4px;
  font-size: clamp(16px, 1vw, 19px);
  font-family: "Jost", sans-serif;
  color: #0B504C;
  letter-spacing:.1em;
  font-weight:400;
  text-shadow: 0 2px 4px rgba(11,80,76,.25);
}
.site-nav{ padding-bottom: 6px; }
.site-nav ul{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: clamp(16px, 1.05vw, 19px);
  font-weight:400;
  color: #204F48;
}
.site-nav li{ line-height:1.2; }
.site-nav li + li{ border-left: 1px solid #0B504C; }
.site-nav a{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  padding: 6px clamp(12px, 1.5vw, 24px);
  transition: color .2s ease;
}
.site-nav a::after{
  content: attr(data-text);
  height:0;
  overflow:hidden;
  visibility:hidden;
  font-weight:700;
}
.site-nav a:hover,
.site-nav a[aria-current="page"]{
  color: #0A718A;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.site-nav a:hover{ font-weight:700; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height: clamp(560px, 46vw, 860px);
  padding:0;
  overflow:hidden;
  background: #F1F0F4;
}
/* the photo has its own layer so it can be given a little more contrast/colour (it is a backlit, washed-out shot) */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: url("../images/hero.jpg") 70% 30%/cover no-repeat;
  filter: contrast(1.32) saturate(1.3) brightness(.97);
}
/* white veil that keeps the text readable */
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.8), rgba(255,255,255,.3));
}
.hero-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding: clamp(40px, 4.5vw, 96px) clamp(20px, 4vw, 56px);
}
.hero-textblock{
  max-width: 660px;
}
.eyebrow{
  margin: 0 0 clamp(10px, 1vw, 16px);
  color: #0B504C;
  font-family: "游ゴシック体","Yu Gothic","YuGothic","Hiragino Sans",sans-serif;
  font-weight:700;
  font-size: clamp(18px, 1.7vw, 27px);
  line-height:1.5;
  letter-spacing:.02em;
  text-wrap: balance;
  text-shadow: 0 3px 6px rgba(0,0,0,.22);
}
.hero h1{
  margin: 0 0 clamp(20px, 2vw, 32px);
  color: #0A718A;
  font-family: "游ゴシック体","Yu Gothic","YuGothic","Hiragino Sans",sans-serif;
  font-weight:700;
  font-size: clamp(34px, 3.7vw, 64px);
  line-height:1.25;
  letter-spacing:.02em;
  text-shadow: 0 3px 6px rgba(0,0,0,.22);
}
.hero p.lead{
  margin: 0 0 clamp(28px, 3vw, 44px);
  color: #0B504C;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:400;
  font-size: var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:.03em;
  text-wrap: pretty;
}
.hero p.lead span{ display:block; }
.hero p.lead i{ display:inline-block; font-style:normal; }

/* ---------- hero CTA (on-photo) ---------- */
.hero-checks{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-badge);
  margin: 0 0 clamp(24px, 2.4vw, 36px);
}
.hero-check{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 64px;
  padding: 10px 12px 10px 34px;
  background: #E6EDED;
  border-radius: 15px;
  box-shadow: 2px 3.46px 14px 1px rgba(82,119,113,.75);
}
.hero-check .txt{
  position:relative;
  color: #2E6A6D;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:400;
  font-size: var(--fs-badge);
  line-height: 1.45;
  text-align:center;
  white-space:nowrap;
}
.hero-check .mark{
  position:absolute;
  left: -26px;
  top:50%;
  transform: translateY(-50%);
  color: #2E6A6D;
  font-size: 18px;
  line-height:1;
}
.hero-sub{
  margin: 0 0 14px;
  text-align:center;
  color: #204F48;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:400;
  font-size: var(--fs-body);
  letter-spacing:.04em;
}
.hero-sub span,
.cta-sub span{ display:inline-block; }
.hero-button{
  display:block;
  width: min(100%, 380px);
  margin: 0 auto;
  padding: 0 20px;
  height: 58px;
  line-height: 58px;
  background: #48C8C2;
  color: #FFFFFF;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:700;
  font-size: clamp(18px, 1.2vw, 21px);
  letter-spacing:.1em;
  text-align:center;
  text-shadow: 0 1px 3px rgba(11,80,76,.35);
  border-radius: 10px;
  box-shadow: inset 2.24px 3.32px 15px 7px #57A0A3;
  transition: transform .15s ease;
}
.hero-button:hover{ transform: translateY(-2px); }

@media (min-width: 1024px){
  /* veil only over the text side, so the woman on the right stays clear */
  .hero::after{
    background: linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 30%, rgba(255,255,255,0) 50%);
  }
  .hero::before{ background-position: center 30%; }
}

/* ---------- hamburger menu: tablet + phone (below 1024px) ----------
   Without JavaScript (no .js class on <html>) the menu simply stays visible under the logo. */
.nav-toggle{ display:none; }
.site-header{ position: relative; z-index: 40; }
.nb{ display: inline-block; }        /* keep a phrase together when a line has to wrap */
@media (max-width: 1023px){
  .site-header .container{
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .brand{ flex: 1 1 0; min-width: 0; }
  .brand-text{ flex-shrink: 1; min-width: 0; margin-top: 0; }
  .js .site-header .container{ flex-wrap: nowrap; }

  /* menu list: one link per row */
  .site-nav{ width: 100%; padding: 0; }
  .site-nav ul{ flex-direction: column; align-items: stretch; flex-wrap: nowrap; font-size: 18px; }
  .site-nav li + li{ border-left: 0; border-top: 1px solid rgba(11,80,76,.18); }
  .site-nav a{ display: flex; flex-direction: row; justify-content: flex-start; padding: 16px 4px; }
  .site-nav a::after{ display: none; }
  .site-nav a:hover{ font-weight: 400; }

  /* with JavaScript: button + drop-down panel */
  .js .nav-toggle{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 48px; height: 48px;
    padding: 0;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
  }
  .nav-toggle:focus-visible{ outline: 2px solid #0A718A; outline-offset: 2px; }
  .nav-toggle-bar{
    display: block;
    width: 26px; height: 3px;
    border-radius: 2px;
    background: #204F48;
    transition: transform .25s ease, opacity .2s ease;
  }
  .is-open .nav-toggle-bar:nth-child(1){ transform: translateY(9px) rotate(45deg); }
  .is-open .nav-toggle-bar:nth-child(2){ opacity: 0; }
  .is-open .nav-toggle-bar:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }

  .js .site-nav{
    position: absolute;
    top: 100%; left: 0; right: 0;
    width: auto;
    padding: 4px clamp(20px, 4vw, 56px) 12px;
    background: #E6EDED;
    box-shadow: 0 14px 24px rgba(32,79,72,.16);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .js .is-open .site-nav{
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }
}
/* phones: big logo + 3-line brand text (「+u」 / 心理カウンセリング / Reframe and Bloom Center), menu button in the top-right corner — same composition as the Wix mobile header */
@media (max-width: 480px){
  .js .site-header .container{ padding: 12px 16px; }
  .brand{ gap: 8px; }
  .brand img{ width: min(27vw, 104px); height: min(27vw, 104px); }
  .brand-text .ja{ font-size: clamp(17px, 5.6vw, 23px); white-space: normal; line-height: 1.3; }
  .brand-text .ja .nb{ display: block; }
  .brand-text .ja .nb:first-child{ font-size: 1.25em; line-height: 1.15; }
  .brand-text .ja .nb + .nb{ padding-left: .7em; }
  .brand-text .en{ font-size: clamp(16px, 4.6vw, 19px); white-space: normal; letter-spacing: .06em; padding-left: .6em; margin-top: 2px; }
  .js .nav-toggle{ position: absolute; top: 4px; right: 8px; }
}
@media (max-width: 359px){
  .brand img{ width: 24vw; height: 24vw; }
  .brand-text .en{ letter-spacing: .02em; padding-left: .3em; }
}
/* very narrow phones: the hero title must not break inside "ホームカウンセラー" */
@media (max-width: 399px){
  .hero h1{ font-size: 8.6vw; }
}
@media (prefers-reduced-motion: reduce){
  .js .site-nav, .nav-toggle-bar{ transition: none; }
}

/* ---------- generic section ---------- */
section{ padding: clamp(64px, 7vw, 112px) 0; }
.section-alt{ background: var(--color-bg-alt); }

.section-title{
  margin: 0 0 clamp(14px, 1.4vw, 22px);
  text-align:center;
  color: #0A718A;
  font-size: var(--fs-title);
  text-wrap: balance;
  line-height:1.5;
  letter-spacing: var(--ls-title);
  font-weight:700;
  /* same face and shadow as the top-page catch copy (.hero h1) */
  font-family: var(--font-title);
  text-shadow: var(--shadow-title);
}
@media (max-width: 719px){
  :root{ --fs-title: clamp(16px, 5vw, 22px); --ls-title: .02em; }
}
p.section-kicker,
.divider-label{
  margin: 0 0 clamp(20px, 2vw, 32px);
  text-align:center;
  color: #2E6A6D;
  font-weight:700;
  font-size: clamp(16px, 1.2vw, 19px);
  letter-spacing:.06em;
}
.prose{
  max-width: 760px;
  margin: 0 auto var(--gap-para);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
}
.prose:last-child{ margin-bottom:0; }
.prose.center{ text-align:center; }

h3.subhead{
  max-width: 760px;
  margin: clamp(40px, 4vw, 64px) auto 16px;
  padding-left: 14px;
  border-left: 4px solid #48C8C2;
  color: #204F48;
  font-size: clamp(19px, 1.5vw, 24px);
  line-height:1.6;
  letter-spacing:.03em;
  font-weight:700;
}

/* ---------- CTA block (repeated) ----------
   No card / background of its own: it always takes the parent section's background. */
.cta-block{
  max-width: 900px;
  margin: 0 auto;
  text-align:center;
}
.cta-checks{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-badge);
  max-width: 660px;               /* same badge width as the hero */
  margin: 0 auto clamp(24px, 2.4vw, 36px);
}
.cta-check{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 64px;
  padding: 10px 12px 10px 34px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 2px 3.46px 14px 1px rgba(82,119,113,.75);
  color: #2E6A6D;
  font-size: var(--fs-badge);
  line-height: 1.45;
  text-align:center;
}
.cta-check .txt{ position:relative; white-space:nowrap; }
.cta-check .mark{
  position:absolute;
  left:-26px; top:50%;
  transform: translateY(-50%);
  font-size:18px; line-height:1;
}
.cta-sub{
  margin: 0 0 14px;
  color: #204F48;
  font-size: var(--fs-body);
  letter-spacing:.04em;
}
.cta-button{
  display:block;
  width: min(100%, 380px);
  height: 58px;
  line-height: 58px;
  margin: 0 auto;
  padding: 0 20px;
  background: #48C8C2;
  color: #FFFFFF;
  font-weight:700;
  font-size: clamp(18px, 1.2vw, 21px);
  letter-spacing:.1em;
  text-shadow: 0 1px 3px rgba(11,80,76,.35);
  border-radius: 10px;
  box-shadow: inset 2.24px 3.32px 15px 7px #57A0A3;
  transition: transform .15s ease;
}
.cta-button:hover{ transform: translateY(-2px); }

/* One CTA size everywhere (home hero + every CTA block + the profile panel), as on the original Wix site:
   cards 212x53 (gaps 56px / 45px), text 16px (site minimum; original 15px), sub text 18px, button 368x53.
   Cards are white with the same shadow on every background; on the hero photo they are the soft grey #E6EDED.
   Below 770px the previous stacked layout is kept. */
@media (min-width: 770px){
  .cta-checks{ display: flex; justify-content: center; max-width: none; margin: 0 0 73px; gap: 0; }
  .cta-check{
    position: relative; flex: none;
    width: 212px; height: 53px; min-height: 0;
    padding: 0;
    font-size: 16px; line-height: 1.25;
  }
  .cta-check + .cta-check{ margin-left: 56px; }
  .cta-check:nth-child(3){ margin-left: 45px; }
  .cta-check .txt{ position: static; }
  .cta-check .mark{ left: 19px; top: 16px; transform: none; font-size: 21px; line-height: 21px; }
  .cta-sub{ margin: 0 0 20px; padding-right: 26px; font-size: 18px; line-height: 36px; letter-spacing: .9px; }
  .cta-button{ width: 368px; height: 53px; line-height: 53px; font-size: 21px; letter-spacing: 2.1px; }
}
/* the hero's CTA row is 737px wide (wider than its 660px text block, like the original) */
@media (min-width: 770px){
  .hero-checks{ display: flex; justify-content: flex-start; width: 737px; margin: 0 0 73px; gap: 0; }
  .hero-check{
    position: relative; flex: none;
    width: 212px; height: 53px; min-height: 0;
    padding: 0;
  }
  .hero-check + .hero-check{ margin-left: 56px; }
  .hero-check:nth-child(3){ margin-left: 45px; }
  .hero-check .txt{ position: static; font-size: 16px; line-height: 1.25; }
  .hero-check .mark{ left: 19px; top: 16px; transform: none; font-size: 21px; line-height: 21px; }
  .hero-sub{ width: 737px; margin: 0 0 20px; padding-right: 26px; font-size: 18px; line-height: 36px; letter-spacing: .9px; }
  .hero-button{ width: 368px; height: 53px; line-height: 53px; margin: 0 0 0 184.5px; padding: 0; font-size: 21px; letter-spacing: 2.1px; }
}
/* below 770px (phones + small tablets): the same 212x53 cards, stacked in a centred column instead of stretching full width */
@media (max-width: 769px){
  .cta-checks, .hero-checks{
    display: flex; flex-direction: column; align-items: center;
    max-width: none; gap: 12px;
  }
  .cta-check, .hero-check{
    position: relative; flex: none;
    width: 212px; height: 53px; min-height: 0;
    padding: 0;
  }
  .cta-check .txt, .hero-check .txt{ position: static; font-size: 16px; line-height: 1.25; }
  .cta-check .mark, .hero-check .mark{ left: 19px; top: 16px; transform: none; font-size: 21px; line-height: 21px; }
}
/* story ending: the CTA is its own grey section right after the story text */
.section-cta-flat{ padding-top: clamp(40px, 4.5vw, 72px); }
/* left-aligned section heading, on the same 760px column as .prose */
.section-title.title-left{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
/* closing section: place text -> closing message -> CTA (the CTA appears once, here) */
.section-close .ph{ display:inline-block; }
.section-close .prose + .title-left{ margin-top: clamp(48px, 5vw, 72px); }
.section-close .title-left + .cta-block{ margin-top: clamp(28px, 3vw, 44px); }
/* after the 3 steps: same white background as the steps, badges keep the standard grey */
.section-steps{ padding-bottom: clamp(16px, 2vw, 32px); }
.section-cta-follow{ padding-top: clamp(16px, 2vw, 32px); }

/* ---------- feature grid (3 features) ---------- */
.container.wide{ max-width: 1240px; }
/* story section: one portrait under the heading + white rounded card around the second half */
.story-figure{ max-width: 720px; margin: clamp(28px, 3vw, 44px) auto clamp(32px, 3.6vw, 52px); }
.section-story{ padding-bottom: clamp(16px, 2vw, 32px); }
.section-story .divider-label{ margin-top: clamp(56px, 6vw, 88px); font-size: clamp(18px, 1.45vw, 23px); }
.story-card{
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(28px, 4.4vw, 64px) clamp(22px, 4vw, 56px);
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.section-story .ph{ display:inline-block; }
/* label is now the card title; closing text sits below the card */
.section-story .story-card{ margin-top: clamp(48px, 5vw, 72px); }
.story-card > .divider-label{ margin: 0 0 clamp(24px, 2.6vw, 36px); }
.story-card > .divider-label + .subhead{ margin-top: 0; }
.story-card + .prose{ margin-top: clamp(32px, 4vw, 56px); }
.section-story .divider-label,
.story-card .section-title,
.story-card .prose.center{ text-wrap: balance; }
@media (max-width: 560px){
  .story-card{ margin-left:-12px; margin-right:-12px; padding: 30px 20px; }
}

/* section whose background matches the illustration paper colour (#E3EDED, sampled from the image edges) */
.section-feel{ background: #E3EDED; }
.feel-figure{
  position:relative;
  left:50%;
  transform: translateX(-50%);
  width: min(1040px, calc(100% + 48px));
  margin: clamp(20px, 2.4vw, 36px) 0 clamp(32px, 4vw, 56px);
}
.feel-figure img{
  display:block;
  width:100%;
  height:auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%),
              linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
.section-title.title-compact{
  font-size: clamp(22px, 1.9vw, 30px);
  text-wrap: balance;
}
.section-title.title-compact br{ display:none; }
.section-title .ph{ display:inline-block; }
@media (max-width: 719px){
  .section-title.title-compact{
    font-size: clamp(16px, 5vw, 22px);
    letter-spacing: .02em;
  }
}
/* the 「家族の平和」 title is the reference size for every section title */
.section-title.title-long{ font-size: var(--fs-title); }
.section-title.sub{
  margin: clamp(56px, 6vw, 88px) 0 clamp(28px, 3vw, 44px);
}
.section-title.sub::after{
  content:"";
  display:block;
  width:48px; height:4px;
  margin: 14px auto 0;
  border-radius:2px;
  background:#48C8C2;
}
/* blue brush heart beside section titles (images/decor-heart-1.png) */
.title-heart::before{
  content:"";
  display:inline-block;
  width: 1.1em;
  height: 1.2em;
  margin-right: .35em;
  vertical-align: -.22em;
  background: url("../images/decor-heart-1.png") center/contain no-repeat;
}
/* keyword marker: bold + pale aqua highlight on the lower half of the line */
.hl{
  padding: 0 .1em;
  color: var(--color-primary);
  font-weight: 700;
  background: linear-gradient(transparent 52%, rgba(86,198,224,.38) 52%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2vw, 32px);
  max-width: 1200px;
  margin: 0 auto;
}
.feature-card{
  padding: clamp(28px, 2.6vw, 40px) clamp(22px, 2vw, 28px) clamp(30px, 2.8vw, 42px);
  background: #E6EDED;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  text-align:center;
}
.feature-card .num{
  margin-bottom: 14px;
  font-size: clamp(38px, 3vw, 46px);
  line-height:1;
  color: #0A718A;
}
/* small heart tucked beside the ❶❷❸ numeral */
.feature-card .num::after{
  content:"";
  display:inline-block;
  vertical-align: top;
  width: .5em;
  height: .54em;
  margin-left: .1em;
  background: url("../images/decor-heart-1.png") center/contain no-repeat;
}
.feature-card h4{
  margin: 0 0 16px;
  color: #204F48;
  font-size: clamp(18px, 1.35vw, 20px);
  line-height:1.65;
  letter-spacing:0;
  text-wrap: balance;
}
.feature-card h4::after{
  content:"";
  display:block;
  width:36px; height:3px;
  margin: 14px auto 0;
  border-radius:2px;
  background:#48C8C2;
}
.feature-card p{
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  text-align:left;
}

/* ---------- steps (3-step / 6-step) ---------- */
.step-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2vw, 32px);
  max-width: 1040px;
  margin: 0 auto;
}
.step-card{
  padding: 20px 12px;
  text-align:center;
}
.step-card .step-no{
  width:60px; height:60px;
  line-height:60px;
  margin: 0 auto 18px;
  background: #0A718A;
  color:#fff;
  border-radius:50%;
  font-weight:700;
  font-size:20px;
}
.step-card h4{
  margin: 0 0 10px;
  color: #204F48;
  font-size: clamp(19px, 1.5vw, 22px);
}
.step-card p{ margin:0; font-size:var(--fs-body); line-height:var(--lh-body); }

.flow-list{
  max-width: 840px;
  margin: clamp(32px, 3.6vw, 52px) auto 0;
  display:flex;
  flex-direction:column;
  gap: 22px;
}
.flow-item{
  position:relative;
  display:grid;
  grid-template-columns: 40px 1fr;
  column-gap: clamp(16px, 2vw, 28px);
  align-items:start;
}
.flow-item:not(:last-child)::before{
  content:"";
  position:absolute;
  left:19px; top:64px; bottom:-22px;
  width:2px;
  background:#48C8C2;
  opacity:.55;
}
.flow-item .flow-mark{
  position:relative;
  z-index:1;
  width:40px; height:40px;
  margin-top: 20px;                 /* centres the number on the card's heading */
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border-radius:50%;
  color:#0A718A;
  font-size:32px;
  line-height:1;
}
.flow-item > div:last-child{
  padding: 24px clamp(20px, 2.4vw, 32px);
  background: #E6EDED;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.flow-item h4{
  margin: 0 0 10px;
  color: #204F48;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height:1.6;
}
.flow-item p{ margin: 0 0 10px; font-size:var(--fs-body); line-height:var(--lh-body); }
.flow-item p:last-child{ margin-bottom:0; }
.flow-item p.note{
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed #B5C9C6;
  font-size:var(--fs-small);
  line-height:1.9;
  color:#2E6A6D;
}

/* ---------- promise cards ---------- */
/* gypsophila photo (images/decor-flowers-1.jpg) under a pale white veil so the heading stays readable */
.section-promise{
  background:
    linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)),
    url("../images/decor-flowers-1.jpg") center bottom / cover no-repeat;
}
.promise-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2vw, 28px);
  max-width: 960px;
  margin: 0 auto;
}
.promise-card{
  padding: 28px clamp(22px, 2.4vw, 32px);
  background: var(--color-card);
  border-radius: var(--radius-md);
  /* soft drop shadow lifts the cards off the photo (replaces the old left accent line) */
  box-shadow: 0 10px 30px rgba(32,79,72,.18), 0 2px 8px rgba(32,79,72,.10);
}
.promise-card h4{
  margin: 0 0 10px;
  color: #204F48;
  font-size: clamp(19px, 1.5vw, 22px);
}
.promise-card p{ margin:0; font-size:var(--fs-body); line-height:var(--lh-body); }
.promise-icon{
  width:44px;
  height:44px;
  object-fit:contain;
  margin-bottom:14px;
}

/* ---------- profile page, section 3 (現在の家族のカタチ) ----------
   Measured on the original at 1280px: 980x473 gypsophila photo, a 861x327 translucent white card 59px from the left /
   85px from the top, heading 27px Yu Gothic bold, body 18px / 32.4px. The last sentence is the same paragraph, on the next line. */
.section-family{ background:#E6EDED; padding:0; }
.fm{
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 85px 60px 61px 59px;
  background: url("../images/decor-flowers-2.jpg") center / cover no-repeat;
}
.fm-card{
  padding: 21px 27px 29.8px 24px;
  background: rgba(255,255,255,.59);
  border-radius: 15px;
  box-shadow: 3.39px 2.12px 4px 0 rgba(46,106,109,.6);
  color: #204F48;
}
.fm-title{
  margin: 0 0 54.8px;
  padding-left: 5px;
  font-family: "游ゴシック体","Yu Gothic","YuGothic","Hiragino Sans",sans-serif;
  font-size: 27px; line-height: 1; font-weight: 700;
  text-shadow: 0 4px 5px rgba(0,0,0,.4);
}
.fm-body{ margin: 0; font-size: 18px; line-height: 32.4px; font-weight: 400; }
@media (max-width: 720px){
  /* the original has no phone layout; the same design with smaller side margins */
  .fm{ padding: 40px 16px 40px; }
  .fm-card{ padding: 21px 18px 26px; }
}

/* ---------- photo collage (profile page: the photo section under 現在の家族のカタチ) ----------
   Reproduces the original 980px layout with percentages so it scales as a whole.
   Radius/shadow use cqw (1cqw = 9.8px at the full 980px width = the original px values).
   The smiley stickers (icon-smile.png) hide the faces of the children, the husband and a participant. */
.section-photos{ background:#E6EDED; padding: 33px 0 0; }
/* the grey "台紙" (#F5F6F8, 980px) holds the photos AND the CTA, as on the original */
.photo-panel{
  width: min(980px, 100%);
  margin: 0 auto;
  padding-bottom: 100px;
  background: #F5F6F8;
}
/* CTA inside the panel: the sizes come from the shared CTA rules; only the panel's own positions are set here
   (the original places the cards 121px from the panel's left edge, 90px below the collage). */
.photo-panel .cta-block{ margin-top: 90px; padding: 0 24px; }
@media (min-width: 770px){
  .photo-panel .cta-block{ max-width: none; margin: 90px 0 0; padding: 0; }
}
@media (min-width: 980px){
  .photo-panel .cta-checks{ justify-content: flex-start; padding-left: 121px; }
}
.photo-collage{
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 980 / 960;
}
.pc{
  position: absolute;
  margin: 0;
  left: var(--l); top: var(--t);
  width: var(--w);
  aspect-ratio: var(--ar);
}
.pc-card{
  position: absolute; inset: 0;
  background: #fff;
  border-radius: 2.041cqw;
  overflow: hidden;
  box-shadow: .8704cqw 1.001cqw .9184cqw 0 rgba(46,106,109,.6);
}
.pc-3 .pc-card{ box-shadow: .3347cqw .3847cqw .9184cqw 0 rgba(46,106,109,.6); }
.pc-card img{ width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pc-face{
  position: absolute;
  left: var(--l); top: var(--t);
  width: var(--w);
  aspect-ratio: var(--ar);
  object-fit: cover;
}

/* ---------- accordion (Q&A) ---------- */
/* one two-line heading, left-aligned on the same 780px column as the accordion below */
.section-title.title-qa{
  max-width: 780px;
  margin: 0 auto clamp(28px, 3vw, 44px);
  padding: 0 6px;
  text-align: left;
}
.title-qa .ph{ display:inline-block; }
.accordion{
  max-width: 780px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
}
.accordion details{
  border-bottom: 1px solid #C9D8D6;
}
.accordion details:first-child{ border-top: 1px solid #C9D8D6; }
.accordion summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 16px;
  padding: 20px 6px;
  font-weight:700;
  font-size: clamp(18px, 1.4vw, 20px);
  line-height:1.6;
  color: #204F48;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::after{
  content:"⌄";
  font-size:1.4rem;
  line-height:1;
  transition: transform .2s ease;
  flex-shrink:0;
}
.accordion details[open] summary::after{ transform: rotate(180deg); }
.accordion .answer{
  margin:0;
  padding: 0 6px 24px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---------- decorative image band ---------- */
.figure-band{
  max-width: 720px;
  margin: clamp(28px, 3vw, 44px) auto;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-soft);
}

/* ---------- footer ---------- */
.site-footer{
  background: #E6EDED;
  color: #204F48;
  text-align:center;
  padding: 56px 24px;
  font-size:16px;
  line-height:1.8;
}
.site-footer p{ margin:4px 0; }
.site-footer .brand-en{ letter-spacing:.14em; }
/* logo graphic: baby's-breath sprig + "+u" circle + 心(Kokoro) no Home Counselor (the text is part of the image) */
.site-footer .footer-logo{
  width: clamp(260px, 26vw, 400px);
  height: auto;
  margin: clamp(16px, 2vw, 28px) auto 0;
}
/* bottom strip: legal link, copyright */
.site-footer .footer-bottom{
  max-width: 560px;
  margin: clamp(28px, 3vw, 44px) auto 0;
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid rgba(32,79,72,.18);
}
.site-footer .footer-link{
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .2s ease;
}
.site-footer .footer-link:hover{ color: #0A718A; }
.site-footer .copyright{ font-size: var(--fs-small); letter-spacing: .04em; }

/* ---------- inner pages ---------- */
/* ---------- profile page, section 1 (プロフィール冒頭) ----------
   Values measured from the original Wix page at 1280px: a 980px box, two 490px columns, 870px tall.
   Left: portrait fills its column (no radius / shadow / margin).
   Right: #F1F0F4 + gypsophila photo aligned bottom-right; every text is #204F48. */
.section-profile{ background:#E6EDED; padding: 67px 0 0; }
.pf{
  width: min(980px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 870px;
}
.pf-photo{ position: relative; }
.pf-photo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.pf-info{
  padding: 135px 45px 0 43px;
  background: #F1F0F4 url("../images/decor-flowers-1.jpg") right bottom / auto 100% no-repeat;
  color: #204F48;
}
.pf-role{ margin: 0; font-size: 16px; line-height: 1; font-weight: 400; }
.pf-name{
  margin: 18px 0 0;
  font-size: 20px; line-height: 1; font-weight: 700;
  text-shadow: 0 4px 5px rgba(0,0,0,.4);
}
.pf-h{
  margin: 51px 0 0;
  font-size: 18px; line-height: 1; font-weight: 700;
  letter-spacing: -.54px;
  text-shadow: 0 4px 5px rgba(0,0,0,.4);
}
.pf-h-career{ margin-top: 40px; }
.pf-list{
  margin: 14px 0 0 4px;
  padding: 0 0 0 23px;
  list-style: disc;
  font-size: 18px; line-height: 25.2px;
}
.pf-h-career + .pf-list{ margin-top: 9px; letter-spacing: -.54px; }
.pf-list li{ padding-top: 5.6px; }
.pf-list li:first-child{ padding-bottom: 5.2px; }
@media (max-width: 720px){
  /* the original has no phone layout (it just shrinks the 980px page); here the same design is stacked so it stays readable */
  .section-profile{ padding-top: 0; }
  .pf{ grid-template-columns: 1fr; min-height: 0; }
  .pf-photo{ aspect-ratio: 490 / 870; }
  .pf-info{ padding: 48px 24px 56px; }
}

/* ---------- profile page, section 2 (略歴) ----------
   Measured on the original at 1280px: 980px wide band, #CCE6E2, 527px tall; no photo, no dividers.
   Heading 27px bold (-0.81px tracking) sits 15px left of centre; labels/values start 74px from the band's left edge;
   each value directly under its label (30.6px line height), one blank line between groups. */
.section-history{ background:#E6EDED; padding:0; }
.rk{
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 11.65px min(74px, 7.55vw) 45.7px;
  background: #CCE6E2;
  color: #204F48;
  letter-spacing: -.54px;
}
.rk-title{
  margin: 0 0 72.35px;
  padding-right: 31px;
  text-align: center;
  font-size: 27px; line-height: 29.7px; font-weight: 700;
  letter-spacing: -.81px;
  text-shadow: 0 4px 5px rgba(0,0,0,.4);
}
.rk-item + .rk-item{ margin-top: 30.8px; }
.rk-label{
  margin: 0;
  font-size: 18px; line-height: 30.6px; font-weight: 700;
  text-shadow: 0 4px 5px rgba(0,0,0,.4);
}
.rk-value{ margin: 0; font-size: 18px; line-height: 30.6px; font-weight: 400; }
.rk-shadow{ text-shadow: 0 4px 5px rgba(0,0,0,.4); }

/* company info table */
.info-table{
  max-width: 760px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
}
.info-row{
  padding: 22px 4px;
  border-top: 1px solid #C9D8D6;
}
.info-row:last-child{ border-bottom: 1px solid #C9D8D6; }
.info-row .label{
  margin: 0 0 6px;
  color: #204F48;
  font-family: var(--font-title);      /* same lettering as the page title (e.g. 会社概要) */
  font-weight:700;
  font-size:calc(var(--fs-body) + 1px);
  text-shadow: var(--shadow-title);
}
.info-row .value{ margin:0; font-size:var(--fs-body); line-height:var(--lh-body); overflow-wrap:anywhere; }   /* long e-mail / URL may wrap on narrow phones */
.info-row .value a{ text-decoration: underline; text-underline-offset:3px; }

/* contact page: the e-mail address is a direct mailto link */
.contact-mail{
  margin: 0 0 24px;
  text-align: center;
  color: #204F48;
  font-size: calc(var(--fs-body) + 2px);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}
.contact-mail a{ text-decoration: underline; text-underline-offset: 4px; transition: color .2s ease; }
.contact-mail a:hover{ color: #0A718A; }
.contact-note{
  max-width:620px;
  margin: 0 auto 28px;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color: #2E6A6D;
  text-align:center;
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .step-grid{ grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 1099px){
  .feature-grid{ grid-template-columns: 1fr; max-width: 760px; }
  .feature-card{
    display:grid;
    grid-template-columns: 64px 1fr;
    column-gap: 22px;
    padding: 28px;
    text-align:left;
  }
  .feature-card .num{ grid-row: 1 / span 2; margin:0; font-size:44px; white-space:nowrap; }
  .feature-card h4{ margin-bottom:10px; text-align:left; }
  .feature-card h4::after{ margin: 12px 0 0; }
  .feature-card p{ grid-column:2; }
}
@media (max-width: 560px){
  /* title is too long to fit beside the heart on a phone: put the heart above it */
  .title-heart::before{ display:block; width:40px; height:44px; margin:0 auto 8px; }
  .feature-card{ grid-template-columns:1fr; padding:28px 22px; text-align:center; }
  .feature-card .num{ grid-row:auto; margin-bottom:12px; }
  .feature-card h4{ text-align:center; }
  .feature-card h4::after{ margin: 14px auto 0; }
  .feature-card p{ grid-column:auto; }

  .flow-item{ grid-template-columns:1fr; }
  .flow-item:not(:last-child)::before{ display:none; }
  .flow-item .flow-mark{
    width:auto; height:auto;
    justify-self:start;
    margin: 0 0 -16px 18px;
    font-size:30px;
  }
  .flow-item > div:last-child{ padding: 34px 20px 24px; }
}
@media (max-width: 860px){
  .promise-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .hero-checks{ grid-template-columns: 1fr; }
  .cta-checks{ grid-template-columns: 1fr; }
}

/* ---------- centred text blocks in hamburger mode (tablet + phone, below 1024px) ----------
   Q&A title, the "あなたが欲しかった場所が…" section, and the closing paragraph of the story. */
@media (max-width: 1023px){
  .section-title.title-qa{ text-align: center; }
  .section-close .title-left,
  .section-close .prose{ text-align: center; }
  .story-card + .prose{ text-align: center; }

  /* hero: title lines centred on the page; the CTA cluster is centred under them */
  .hero-textblock{ max-width: none; }
  .hero .eyebrow, .hero h1, .hero p.lead{ text-align: center; }
  .hero-checks{ justify-content: center; width: auto; }
  .hero-sub{ width: auto; }
  .hero-button{ margin-left: auto; margin-right: auto; }
}

/* ---------- softer text shadow on the reproduced profile texts (tablet + phone) ----------
   The original's shadow (0 4px 5px rgba(0,0,0,.4)) looked too strong on a real phone screen, so below 1024px
   the same soft shadow as the site's other titles is used. The desktop layout keeps the original values. */
@media (max-width: 1023px){
  .pf-name, .pf-h, .rk-title, .rk-label, .rk-shadow{ text-shadow: var(--shadow-title); }
}