/* ==========================================================================
   Shiraume Digital - TOP page
   Converted from Claude Design prototype (TOPページ 最終デザイン.dc.html)
   Visual output is unchanged from the source design.
   ========================================================================== */

* {
  box-sizing: border-box;
}

/* Hidden by default; shown only on phones (see mobile media query) —
   used for forcing a short, safe break in long hero titles. */
br.br-mobile {
  display: none;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: #f4f4f2;
  font-family: 'Noto Sans JP', 'Inter', Helvetica, Arial, sans-serif;
  color: #1a1a1a;
  overflow-x: hidden;
}

a {
  color: #1e3a2b;
  text-decoration: none;
}

a:hover {
  color: #142a1e;
}

img {
  max-width: none;
}

/* ---------- Animations ---------- */

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(8px); opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes heroTextReveal {
  from { opacity: 0; transform: translateY(20px); clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; transform: translateY(0); clip-path: inset(0 0% 0 0); }
}

/* Title lines unveil from the top downward, like a curtain lifting away,
   rather than the left-to-right wipe used for the eyebrow/description. */
@keyframes heroTitleReveal {
  from { opacity: 0; transform: translateY(10px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0% 0); }
}

@keyframes worksMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes worksMarqueeReverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@keyframes heroKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@keyframes introScrollFloat {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* Runs once automatically on page load (no scroll/JS trigger needed) -
   a slow, quiet fade in from the left for the Stage 1 copy. */
@keyframes introFadeLeft {
  from { opacity: 0; transform: translateX(-28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes petalFall {
  0%   { transform: translate3d(0, -6vh, 0) rotate(0deg); }
  25%  { transform: translate3d(var(--petal-dx1, 20px), 22vh, 0) rotate(calc(var(--petal-spin, 220deg) * 0.25)); }
  50%  { transform: translate3d(var(--petal-dx2, -14px), 50vh, 0) rotate(calc(var(--petal-spin, 220deg) * 0.5)); }
  75%  { transform: translate3d(var(--petal-dx3, 18px), 78vh, 0) rotate(calc(var(--petal-spin, 220deg) * 0.75)); }
  100% { transform: translate3d(var(--petal-dx4, 0px), 106vh, 0) rotate(var(--petal-spin, 220deg)); }
}

.hero-title-line {
  display: inline-block;
}

.hero__actions { margin-top: 26px; }

/* will-change + backface-visibility force these onto their own GPU layer
   for the whole animation instead of only while actively compositing -
   without it, some browsers (notably Safari/iOS) intermittently drop the
   layer mid-scroll and repaint a blank/half-rendered frame, which reads
   as a photo "disappearing" for an instant during the loop. */
.works-track--row1,
.works-track--row2 {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.works-track--row1 {
  animation: worksMarquee 32s linear infinite;
}

.works-track--row2 {
  animation: worksMarqueeReverse 32s linear infinite;
}

.works-track:hover {
  animation-play-state: paused;
}

/* ---------- Scroll fade-in sections ---------- */

.fade-section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}

.fade-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Page shell ---------- */

.page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  background: #ffffff;
  /* NOT overflow:hidden - a plain div with overflow:hidden becomes a
     clipping/scroll container of its own, which can silently interfere
     with descendants' positioning in some browsers. Horizontal overflow
     is already clipped globally by html/body below (overflow-x:hidden on
     <html>/<body> gets special viewport propagation), and .hero and
     .works__track-wrap each clip their own decorative overflow locally,
     so nothing needs .page itself to clip.
     padding-top reserves room for the nav bar, which is position:fixed
     (see below) and therefore no longer takes up space in normal flow. */
  padding-top: 84px;
}

/* ---------- Nav ---------- */

/* position:fixed (not sticky) - pinned to the viewport unconditionally,
   with no dependency on any ancestor's scroll/overflow behavior, so it
   can never be scrolled away. left/right/margin recreate the same
   centered, max-width-1440px layout .page uses, since fixed elements
   don't inherit that from their parent the way sticky ones do. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  z-index: 20;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #ececea;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.nav__brand-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 600;
  color: #313130;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: #1e3a2b;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.btn-nav-cta {
  padding: 11px 26px;
  background: #141412;
  color: #ffffff;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-nav-cta:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(20,20,18,0.25);
}

/* Mobile nav toggle (hidden on desktop) */

.nav__toggle {
  display: none;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #1a1a1a;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-active span:nth-child(2) { opacity: 0; }
.nav__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Nav, minimal variant (TOP page only) ----------
   Apple/Linear/Vercel-style hamburger-first nav: brand on the left, just
   "JP | EN" + the hamburger on the right at every width. The full link
   list (About/Services/Works/Pricing/Contact) moves into the same
   dropdown the other pages already use on mobile, reusing that existing
   toggle behavior instead of a new mechanism, just always-on here. Scoped
   entirely to .nav--minimal so every other page's header is untouched. */

.nav--minimal .nav__brand {
  gap: 10px;
}

.nav--minimal .nav__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.nav--minimal .nav__brand-name {
  font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111111;
}

.nav--minimal .nav__brand-sub {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: #4D6652;
}

.nav--minimal .nav__right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav--minimal .nav__lang {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #4a4a48;
}

.nav--minimal .nav__lang-sep {
  margin: 0 8px;
  color: #E9E9E9;
}

.nav--minimal .nav__toggle {
  display: flex;
}

.nav--minimal .nav__toggle span {
  background: #4D6652;
}

.nav--minimal .nav__links {
  position: absolute;
  top: 84px;
  left: 0;
  right: 0;
  background: #ffffff;
  border-bottom: 1px solid #E9E9E9;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 8px 56px 20px;
  display: flex;
  box-shadow: 0 16px 32px rgba(20,20,18,0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.16,1,0.3,1), transform 0.28s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.28s;
}

.nav--minimal .nav__links.nav__links--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity 0.28s cubic-bezier(0.16,1,0.3,1), transform 0.28s cubic-bezier(0.16,1,0.3,1);
}

/* Each item eases in with a slight stagger right after the dropdown
   itself starts opening, instead of the whole list just popping in. */
.nav--minimal .nav__links a {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1);
}

.nav--minimal .nav__links.nav__links--open a {
  opacity: 1;
  transform: translateY(0);
}

.nav--minimal .nav__links.nav__links--open a:nth-child(1) { transition-delay: 0.05s; }
.nav--minimal .nav__links.nav__links--open a:nth-child(2) { transition-delay: 0.1s; }
.nav--minimal .nav__links.nav__links--open a:nth-child(3) { transition-delay: 0.15s; }
.nav--minimal .nav__links.nav__links--open a:nth-child(4) { transition-delay: 0.2s; }
.nav--minimal .nav__links.nav__links--open a:nth-child(5) { transition-delay: 0.25s; }

.nav--minimal .nav__links a.nav-link,
.nav--minimal .nav__links a.btn-nav-cta {
  width: 100%;
}

.nav--minimal .nav__links a.nav-link {
  padding: 14px 0;
  border-bottom: 1px solid #f2f2f0;
}

.nav--minimal .nav-link::after {
  display: none;
}

.nav--minimal .nav__links a.btn-nav-cta {
  margin-top: 14px;
  text-align: center;
}

/* ---------- Hero ---------- */

/* ---------- Stage 1: minimal English first view ----------
   A plain, full-height (100vh) section - not pinned, no scroll-driven JS
   math. It just sits at the top of the page and scrolls away naturally,
   which is what makes it reliable on every browser/device: nothing has to
   "successfully" pin or unpin for the rest of the page to show up. */

.stage-intro {
  position: relative;
  /* .page already reserves 84px of padding-top for the fixed nav, so
     subtract that here for the full remaining screen height, then take
     ~90% of it - only a slim sliver of Stage 2's photo peeks in from the
     bottom of the very first view (just enough to hint at what's below),
     pushing the point where the hand-off actually begins further down the
     scroll instead of showing a big slice of the photo immediately at rest. */
  height: calc((100vh - 84px) * 0.9);
  height: calc((100dvh - 84px) * 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #FAFAFA;
}

.stage-intro__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  max-width: 640px;
  padding: 0 32px;
}

.stage-intro__title {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.03em;
  opacity: 0;
  animation: introFadeLeft 1.3s cubic-bezier(0.16,1,0.3,1) 0.2s forwards;
}

.stage-intro__title .c-ink { color: #111111; }
.stage-intro__title .c-brand { color: #4D6652; }

.stage-intro__subtitle {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: #111111;
  opacity: 0;
  animation: introFadeLeft 1.1s cubic-bezier(0.16,1,0.3,1) 0.6s forwards;
}

.stage-intro__services {
  margin: 0;
  font-size: 13.5px;
  line-height: 2;
  color: #6a6a66;
  letter-spacing: 0.01em;
  opacity: 0;
  animation: introFadeLeft 1.1s cubic-bezier(0.16,1,0.3,1) 0.8s forwards;
}

/* CTA button + Scroll cue join the same left-fade cascade as the rest of
   the Stage 1 copy on load; the Scroll cue keeps its infinite float too. */
.stage-intro__content .btn-pill--dark {
  opacity: 0;
  animation: introFadeLeft 1.1s cubic-bezier(0.16,1,0.3,1) 1s forwards;
}

/* In normal flow, directly under the CTA button - not pinned to the
   viewport edge - so it can never be clipped by a browser's dynamic
   address-bar chrome; it just sits right below the button. */
.stage-intro__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #8a8a86;
  opacity: 0;
  animation: introFadeLeft 1s cubic-bezier(0.16,1,0.3,1) 1.2s forwards,
             introScrollFloat 2.4s ease-in-out 2.2s infinite;
}

.stage-intro__scroll-line {
  width: 1px;
  height: 30px;
  background: #4D6652;
}

/* ---------- Stage 2: the Japanese photo hero ----------
   A normal section directly below Stage 1, revealed by the same
   .fade-section pattern used everywhere else on the site (see main.js) -
   no scroll-pinning, so it is guaranteed to render when scrolled to. */

.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Oversized (extends past the section's own top/bottom edges) and clipped
   by .hero's overflow:hidden, so the JS scroll-parallax below can nudge
   this wrapper up/down a little without ever revealing a gap at the
   section's edges. */
.hero__bg-wrap {
  position: absolute;
  top: -40px;
  left: 0;
  right: 0;
  bottom: -40px;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62);
}

/* Fades the very top of the photo back into Stage 1's off-white
   background, so the seam between the two sections blends rather than
   cuts - this is what actually sells the "one continuous scene" feel
   together with the height overlap above. */
.hero__top-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28vh;
  /* Crisper stops (holds near-solid longer, then releases faster) read as a
     cleaner, more deliberate blend than a flat 3-stop wash - this is the
     "freshness" that makes the hand-off from Stage 1's white feel designed
     rather than a generic muddy fade. */
  background: linear-gradient(180deg, #FAFAFA 0%, #FAFAFA 22%, rgba(250,250,250,0.85) 45%, rgba(250,250,250,0.25) 78%, rgba(250,250,250,0) 100%);
  z-index: 2;
  pointer-events: none;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Stays fully transparent through the same top band .hero__top-fade
     covers, so the white-to-photo blend never gets muddied by the dark
     overlay starting underneath it (that overlap was reading as a hard
     dark seam right under the fade). The darkening only begins once the
     white fade has already fully resolved, then ramps up richer/darker
     toward the bottom for stronger, more vivid contrast with the text. */
  background: linear-gradient(180deg, rgba(10,16,13,0) 0%, rgba(10,16,13,0) 26%, rgba(10,16,13,0.42) 58%, rgba(10,16,13,0.88) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  padding: 0 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 26px;
}

.hero__eyebrow {
  font-size: 14px;
  letter-spacing: 0.24em;
  color: #9fd1b3;
  font-weight: 500;
}

.hero__title {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: 80px;
  line-height: 1.38;
  font-weight: 700;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  color: #ffffff;
  letter-spacing: 0.04em;
  position: relative;
}

.hero__desc {
  margin: 0;
  min-width: 0;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.9;
  color: #e6e6e2;
  font-weight: 300;
  overflow-wrap: break-word;
}

.hero__actions {
  display: flex;
  gap: 16px;
  margin-top: 14px;
}

.hero__actions--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

/* A gentle, staggered cascade for Stage 2's own copy - on top of the
   whole section's fade-section rise, each line settles in slightly after
   the last, so the hand-off from Stage 1 reads as one continuous,
   considered motion rather than a flat cut. Triggered by the same
   .is-visible class the generic fade-section observer already adds to
   .hero (see main.js) - no extra JS needed. */
.hero__eyebrow,
.hero__title,
.hero__desc,
.hero__actions {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 1.3s cubic-bezier(0.16,1,0.3,1), transform 1.3s cubic-bezier(0.16,1,0.3,1);
}

.hero__eyebrow { transition-delay: 0.08s; }
.hero__title { transition-delay: 0.24s; }
.hero__desc { transition-delay: 0.5s; }
.hero__actions { transition-delay: 0.72s; }

.hero.is-visible .hero__eyebrow,
.hero.is-visible .hero__title,
.hero.is-visible .hero__desc,
.hero.is-visible .hero__actions {
  opacity: 1;
  transform: translateY(0);
}

/* The photo itself settles in too - starts slightly zoomed and dims down
   to its resting brightness/scale as the section becomes visible, so the
   whole hand-off from Stage 1 reads as one deliberate, cinematic beat
   instead of a static backdrop the text just appears in front of. */
.hero__bg {
  opacity: 0;
  transform: scale(1.1);
  transition: transform 1.8s cubic-bezier(0.16,1,0.3,1), opacity 0.7s cubic-bezier(0.16,1,0.3,1);
}

.hero.is-visible .hero__bg {
  opacity: 1;
  transform: scale(1);
}

.btn-light {
  padding: 16px 38px;
  background: #ffffff;
  color: #141412;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-light:hover {
  color: #141412;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
}

.btn-outline-light {
  padding: 16px 38px;
  border: 1px solid rgba(255,255,255,0.5);
  color: #ffffff;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.btn-outline-light:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  border-color: #ffffff;
}

.hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  animation: scrollBounce 2s ease-in-out infinite;
}

.hero__scroll img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  transform: rotate(90deg);
  opacity: 0.8;
}

/* ---------- Plum blossom brand accent (branch + falling petals) ---------- */
/* Painted INSIDE .stage-intro, before .stage-intro__content in the markup,
   so they sit behind the Stage 1 copy (never covering the letters) while
   still showing on top of the #FAFAFA backdrop. Being nested inside
   #stageIntro, they fade out automatically together with it (see main.js) -
   no separate opacity logic needed. */

.plum-branch {
  position: absolute;
  top: 84px;
  left: -80px;
  height: 62vh;
  width: auto;
  max-width: 660px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.petal-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.petal {
  position: absolute;
  top: -24px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  will-change: transform, opacity;
  animation-name: petalFall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@media (prefers-reduced-motion: reduce) {
  .petal-layer { display: none; }
  .stage-intro__scroll,
  .stage-intro__title,
  .stage-intro__subtitle,
  .stage-intro__services,
  .stage-intro__content .btn-pill--dark,
  .hero__eyebrow,
  .hero__title,
  .hero__desc,
  .hero__actions,
  .hero__bg {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Section heading ---------- */

.section-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.section-heading__eyebrow {
  font-size: 15px;
  letter-spacing: 0.2em;
  color: #1e3a2b;
  font-weight: 600;
}

.section-heading__eyebrow--pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: #1e3a2b;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.18em;
}

.section-heading__title {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: 45px;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
}

.section-heading__desc {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: 14px;
  color: #767672;
}

/* ---------- Services ---------- */

.services {
  padding: 104px 56px 92px;
}

.services__heading {
  margin-bottom: 52px;
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.service-card {
  border: 1px solid #ececea;
  border-radius: 4px;
  padding: 26px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease;
}

/* Cards cascade in one by one (rather than all popping in together) once
   the whole Services section (a .fade-section) has scrolled into view. */
.services.is-visible .service-card { opacity: 1; transform: translateY(0); }
.service-card:nth-child(1) { transition-delay: 0.05s; }
.service-card:nth-child(2) { transition-delay: 0.16s; }
.service-card:nth-child(3) { transition-delay: 0.27s; }
.service-card:nth-child(4) { transition-delay: 0.38s; }
.service-card:nth-child(5) { transition-delay: 0.49s; }

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(20,20,18,0.08);
  border-color: #d4ddd7;
}

.service-card__icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.service-card__title {
  font-size: 13.5px;
  font-weight: 600;
}

.service-card__desc {
  font-size: 11.5px;
  line-height: 1.6;
  color: #767672;
}

/* Photo-backed variant: the card's own photo fills the whole card behind
   the icon/copy, with a dark gradient overlay for legibility. Icon
   inverts to white; the rest of the card layout (centered column) is
   unchanged from the plain icon cards, so both variants sit in the same
   grid without looking mismatched in spacing. */
.service-card--photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 4.5;
  justify-content: flex-end;
  border-color: transparent;
}

.service-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.service-card--photo:hover .service-card__photo {
  transform: scale(1.06);
}

.service-card__overlay {
  position: absolute;
  inset: 0;
  /* Darkens earlier and much more heavily than a subtle vignette would,
     so white text stays legible no matter how bright the source photo
     is (light desks, glowing monitors, etc.) - contrast is guaranteed,
     not just hoped for. */
  background: linear-gradient(180deg, rgba(15,15,14,0.18) 0%, rgba(15,15,14,0.40) 32%, rgba(15,15,14,0.88) 62%, rgba(15,15,14,0.94) 100%);
}

.service-card--photo .service-card__icon {
  position: relative;
  z-index: 1;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.service-card--photo .service-card__title {
  position: relative;
  z-index: 1;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

.service-card--photo .service-card__desc {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* ---------- Strengths / About ---------- */

.strengths {
  padding: 92px 56px;
  background: #f7f7f5;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.strengths__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.strengths__heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.strengths__heading .section-heading__title {
  text-align: left;
}

.strengths__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  height: auto;
}

/* Each strength is its own bordered, shadowed card, now split into a
   left text panel and a right-side photo (per the reference layout) with
   a soft white-to-photo gradient at the seam instead of a hard edge. */
.strength-item {
  display: flex;
  align-items: stretch;
  min-height: 200px;
  padding: 0;
  border: 1px solid #ececea;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(20,20,18,0.03);
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.strength-item__content {
  flex: 1 1 48%;
  min-width: 0;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.strength-item__photo {
  position: relative;
  flex: 1 1 46%;
  min-width: 160px;
  overflow: hidden;
}

.strength-item__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.15);
  transition: transform 1.1s cubic-bezier(0.16,1,0.3,1);
}

/* Photo settles into place with a slow "ken burns" zoom-out the instant
   the card scrolls into view - this plays on every device automatically,
   unlike a hover-only effect, which never fires at all on touchscreens. */
.strengths.is-visible .strength-item__photo img {
  transform: scale(1);
}

.strength-item:hover .strength-item__photo img {
  transform: scale(1.05);
}

/* Blends the photo's left edge into the card's white panel, echoing the
   reference mock rather than a hard vertical seam between text and image. */
.strength-item__photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.7) 14%, rgba(255,255,255,0) 34%);
  pointer-events: none;
}

.strength-item__num {
  font-family: 'Cormorant Garamond', 'Shippori Mincho', serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: #a9b6ac;
}

.strength-item__row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Alternating slide direction per item - left, right, left, right - so the
   list feels hand-choreographed rather than a single uniform fade. Reveal
   fires once, staggered, when .strengths (a .fade-section) scrolls into
   view and gets .is-visible (see main.js IntersectionObserver). */
.strength-item:nth-child(even) {
  transform: translateX(32px);
}

.strength-item:nth-child(1) { transition-delay: 0.05s; }
.strength-item:nth-child(2) { transition-delay: 0.2s; }
.strength-item:nth-child(3) { transition-delay: 0.35s; }
.strength-item:nth-child(4) { transition-delay: 0.5s; }

.strengths.is-visible .strength-item {
  opacity: 1;
  transform: translateX(0);
}

.strength-item:hover {
  transform: translateX(6px);
  box-shadow: 0 16px 34px rgba(20,20,18,0.08);
  border-color: #d4ddd7;
}

.strengths.is-visible .strength-item:hover {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.strength-item__icon-wrap {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(77,102,82,0.09), rgba(77,102,82,0.16));
  border: 1px solid rgba(77,102,82,0.2);
  box-shadow: 0 10px 22px rgba(20,20,18,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, background 0.4s ease;
}

.strength-item:hover .strength-item__icon-wrap {
  transform: scale(1.08);
  background: linear-gradient(135deg, rgba(77,102,82,0.15), rgba(77,102,82,0.26));
  box-shadow: 0 14px 28px rgba(77,102,82,0.18), inset 0 1px 0 rgba(255,255,255,0.5);
}

.strength-item__icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.strength-item__title {
  font-size: 15.5px;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.strength-item__desc {
  font-size: 12.5px;
  line-height: 1.65;
  color: #767672;
}

.strengths__image {
  grid-area: image;
  min-width: 0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(20,20,18,0.12);
  position: relative;
}

.strengths__image img {
  width: 676px;
  height: 520px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.strengths__image:hover img {
  transform: scale(1.04);
}

/* ---------- Works ---------- */

.works {
  padding: 140px 0 120px;
  background: #ffffff;
}

.works__heading {
  margin-bottom: 56px;
}

.works__track-wrap {
  position: relative;
  padding: 0 56px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.works-track {
  display: flex;
  /* NOT gap here - the seamless infinite loop below duplicates this row's
     cards and translates by exactly -50%, which only lands precisely on
     the duplicate's start if each card carries its OWN trailing spacing
     (margin-right, below) rather than a flex `gap` on the container.
     `gap` splits evenly between every pair of items including the seam
     between the two duplicate sets, which throws the halfway point off
     by half a gap and produces a visible jump/stutter once per loop. */
  width: max-content;
  padding-bottom: 8px;
}

.work-card {
  flex: 0 0 380px;
  margin-right: 28px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.work-card__image {
  border-radius: 4px;
  overflow: hidden;
}

.work-card__image img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.work-card__category {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #1e3a2b;
  font-weight: 600;
}

.work-card__title {
  font-size: 15px;
  font-weight: 600;
}

/* Row 2 placeholder cards: frame only, photos added later */

.work-card__image--placeholder {
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #d8d8d4;
  border-radius: 4px;
  background: #faf9f7;
  color: #c4c4c0;
  font-size: 26px;
  font-weight: 300;
}

.work-card--placeholder .work-card__category,
.work-card--placeholder .work-card__title {
  color: #b5b5b0;
}

.works__more {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

/* "See more" pill button with fill-wipe + arrow-slide animation,
   used under Services overview / Strengths on the TOP page. */

.services__more {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.strengths__more {
  margin-top: 8px;
}

.btn-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border: 1.5px solid #1e3a2b;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #1e3a2b;
  overflow: hidden;
  z-index: 0;
  width: fit-content;
  transition: color 0.4s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-more::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #1e3a2b;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}

.btn-more:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(20, 20, 18, 0.14);
}

.btn-more:hover::before {
  transform: scaleX(1);
}

.btn-more__arrow {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-more:hover .btn-more__arrow {
  transform: translateX(6px);
}

.btn-outline-dark {
  padding: 15px 40px;
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-outline-dark:hover {
  color: #1a1a1a;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(20,20,18,0.12);
}

/* ---------- Flow ---------- */

.flow {
  padding: 120px 56px 140px;
  background: #f7f7f5;
}

.flow__heading {
  margin-bottom: 80px;
}

.flow__heading .section-heading__desc {
  max-width: 520px;
  line-height: 1.8;
}

.flow__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.flow-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.35s ease;
}

.flow-step:hover {
  transform: translateY(-6px);
}

.flow-step--top {
  padding: 0 40px 56px;
  border-bottom: 1px solid #ececea;
}

.flow-step--bottom {
  padding: 56px 40px 0;
}

.flow-step--bordered {
  border-right: 1px solid #ececea;
}

.flow-step__num {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px #1e3a2b;
}

.flow-step__title {
  font-size: 16px;
  font-weight: 600;
}

.flow-step__desc {
  font-size: 13px;
  line-height: 1.8;
  color: #767672;
}

/* ---------- CTA ---------- */

.cta {
  padding: 130px 56px;
  background: #132a1f;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}

.cta__icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.cta__title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
  color: #ffffff;
}

.cta__desc {
  margin: 0;
  font-size: 14.5px;
  color: #c7d6cc;
  max-width: 440px;
  line-height: 1.8;
}

.btn-cta {
  margin-top: 8px;
  padding: 17px 44px;
  background: #ffffff;
  color: #132a1f;
  border-radius: 2px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-cta:hover {
  color: #132a1f;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}

/* ---------- CTA (TOP page only): photo-backed, referencing findrealestate's
   hero-photo-plus-copy treatment for the bottom conversion section, using
   the same brand-green overlay and pill button as the Hero. New scoped
   classes so nothing on other pages (which still use .cta/.btn-cta) changes. ---------- */

.cta-home {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: 0 56px;
  overflow: hidden;
}

.cta-home__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.cta-home__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(19,42,31,0.92) 0%, rgba(19,42,31,0.76) 34%, rgba(19,42,31,0.24) 66%, rgba(19,42,31,0.06) 100%);
}

.cta-home__content {
  position: relative;
  z-index: 1;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.cta-home__eyebrow {
  font-size: 13px;
  letter-spacing: 0.22em;
  color: #9fd1b3;
  font-weight: 500;
}

.cta-home__title {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
  color: #ffffff;
  line-height: 1.4;
}

.cta-home__desc {
  margin: 0;
  font-size: 15px;
  color: #dce7e0;
  line-height: 1.9;
}

/* Two-button row (お問い合わせ + LINE) under the CTA copy - wraps to a
   stacked column on narrow screens so neither button ever gets cramped. */
.cta-home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}

/* ---------- MISSION (About.html) - photo background, same construction
   as .cta-home (photo + tinted overlay + centered content) but centered
   text instead of left-aligned, and a deeper, more even tint so it still
   reads as "the dark green MISSION section" with photo texture showing
   through rather than a standalone photo section. ---------- */

.mission {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 56px;
  overflow: hidden;
}

.mission__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mission__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19,42,31,0.88) 0%, rgba(19,42,31,0.82) 50%, rgba(19,42,31,0.92) 100%);
}

.mission__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 100px 0;
}

/* ---------- Pill buttons (TOP page only: Hero CTAs + photo CTA section,
   referencing findrealestate.com's capsule-shaped buttons) ---------- */

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.btn-pill__arrow {
  font-size: 15px;
  transition: transform 0.3s ease;
}

.btn-pill:hover .btn-pill__arrow {
  transform: translateX(3px);
}

.btn-pill--solid {
  background: rgba(20,20,18,0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.22);
  color: #ffffff;
}

.btn-pill--solid:hover {
  color: #ffffff;
  background: rgba(20,20,18,0.74);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.3);
}

.btn-pill--ghost {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.4);
  color: #ffffff;
}

.btn-pill--ghost:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.16);
  border-color: #ffffff;
}

.btn-pill--lg {
  padding: 18px 40px;
  font-size: 15.5px;
}

/* Solid black pill for light (Stage 1) backgrounds. */
.btn-pill--dark {
  background: #111111;
  border: none;
  color: #ffffff;
}

.btn-pill--dark:hover {
  color: #ffffff;
  transform: scale(1.04);
  box-shadow: 0 14px 30px rgba(17,17,17,0.28);
}

/* LINE brand green - opens the LINE add-friend link directly. */
.btn-pill--line {
  background: #06C755;
  border: none;
  color: #ffffff;
}

.btn-pill--line:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(6,199,85,0.35);
}

.btn-pill__line-icon {
  flex-shrink: 0;
}

/* ---------- Footer ---------- */

.footer {
  padding: 72px 56px 40px;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 300px;
}

.footer__brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__brand-row img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.footer__brand-name {
  font-size: 15px;
  font-weight: 600;
}

.footer__brand-desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.8;
  color: #8a8a86;
  overflow-wrap: break-word;
}

.footer__cols {
  display: flex;
  gap: 64px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer__col-title {
  font-size: 12px;
  font-weight: 600;
  color: #1a1a1a;
}

.footer__col a {
  font-size: 12.5px;
  color: #8a8a86;
}

.footer__contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer__contact-row img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  opacity: 0.7;
}

.footer__contact-row span {
  font-size: 12.5px;
  color: #8a8a86;
}

.footer__socials {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.social-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #d8d8d4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: #8a8a86;
  transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.social-icon--tt {
  font-size: 9px;
}

.social-icon:hover {
  transform: translateY(-3px);
  border-color: #1e3a2b;
  color: #1e3a2b;
}

.social-icon img {
  width: 13px;
  height: 13px;
  object-fit: contain;
}

.footer__bottom {
  border-top: 1px solid #ececea;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
}

.footer__copyright {
  font-size: 11.5px;
  color: #a3a39f;
}

/* ==========================================================================
   Shared responsive grid utilities (used by sub-pages so breakpoints
   further down this file can collapse them to a single column)
   ========================================================================== */

.block-title--45 { font-size: 45px; }
.block-title--32 { font-size: 32px; }
.block-title--30 { font-size: 30px; }
.block-title--28 { font-size: 28px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); }

/* About.html: INTRO / VISION / COMPANY sections — heading first, then
   photo, then the body text, so on mobile each stacks in reading order
   instead of dumping the photo after (or before) all the text. Desktop
   keeps the original text-left / photo-right two-column look. */
.about-intro-grid,
.about-vision-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-areas:
    "heading image"
    "body    image";
  column-gap: 72px;
  row-gap: 22px;
  align-items: center;
}

.grid-company {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas:
    "heading image"
    "body    image";
  column-gap: 72px;
  row-gap: 22px;
  align-items: end;
}

.about-block__heading { grid-area: heading; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.about-block__image { grid-area: image; min-width: 0; }
.about-block__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* COMPANY's body is a list of info-rows that already space themselves
   via padding/border, so it doesn't need the flex gap the other
   sections' paragraph bodies use. */
.grid-company .about-block__body { gap: 0; }

/* ==========================================================================
   Sub-pages (About / Services / Works / Pricing / Contact)
   ========================================================================== */

/* Nav: active state + brand-as-link (used on sub-pages) */

.nav-link-active::after {
  width: 100%;
}

.nav__brand-name {
  color: #1a1a1a;
}

/* Image hero (About / Services / Works) */

.subhero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.subhero--460 { height: 460px; }
.subhero--420 { height: 420px; }

.subhero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: heroKenBurns 16s ease-in-out infinite alternate;
}

.subhero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,16,13,0.35) 0%, rgba(10,16,13,0.65) 100%);
}

.subhero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding: 0 40px;
}

.subhero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: #9fd1b3;
  font-weight: 500;
}

.subhero__title {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
  color: #ffffff;
  line-height: 1.5;
}

.subhero__title--46 { font-size: 46px; }
.subhero__title--42 { font-size: 42px; }

.subhero__desc {
  margin: 0;
  min-width: 0;
  max-width: 600px;
  font-size: 15px;
  line-height: 1.9;
  color: #e6e6e2;
  font-weight: 300;
  overflow-wrap: break-word;
}

/* Text-only hero (Pricing / Contact) */

.simple-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.simple-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #1e3a2b;
  font-weight: 600;
}

.simple-hero__title {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
}

.simple-hero__title--38 { font-size: 38px; }
.simple-hero__title--36 { font-size: 36px; }

.simple-hero__desc {
  margin: 0;
  min-width: 0;
  font-size: 14.5px;
  color: #767672;
  line-height: 1.9;
  overflow-wrap: break-word;
}

/* Shared hover-lift utilities (translate style-hover behaviors from the prototype) */

.hover-lift-sm { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift-sm:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(20,20,18,0.08); }

.hover-lift-work { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift-work:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(20,20,18,0.1); }

.hover-lift-plan { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift-plan:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(20,20,18,0.08); }

.hover-lift-plan-featured { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift-plan-featured:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(19,42,31,0.16); }

/* Small tag pill (service/works keyword chips) */

.tag-pill {
  font-size: 12px;
  padding: 7px 14px;
  border: 1px solid #d8d8d4;
  border-radius: 999px;
  color: #4a4a48;
}

.tag-pill--sm {
  font-size: 11px;
  padding: 5px 12px;
}

/* Small outline CTA link (used inside Services blocks etc.) */

.btn-outline-dark-sm {
  padding: 14px 32px;
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  font-size: 13.5px;
  font-weight: 500;
  color: #1a1a1a;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  width: fit-content;
}

.btn-outline-dark-sm:hover {
  color: #1a1a1a;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(20,20,18,0.1);
}

/* Solid green CTA link, paired next to btn-outline-dark-sm
   (e.g. Services blocks: inquiry + jump-to-pricing) */

.btn-solid-green-sm {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: #1e3a2b;
  border: 1px solid #1e3a2b;
  border-radius: 2px;
  font-size: 13.5px;
  font-weight: 500;
  color: #ffffff;
  width: fit-content;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.btn-solid-green-sm:hover {
  color: #ffffff;
  background: #16291d;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(30,58,43,0.25);
}

.btn-solid-green-sm__arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.btn-solid-green-sm:hover .btn-solid-green-sm__arrow {
  transform: translateX(4px);
}

/* About: value cards */

.value-card {
  border: 1px solid #ececea;
  border-radius: 4px;
  padding: 40px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.value-card__icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.value-card__title {
  font-size: 20px;
  font-weight: 600;
  font-family: 'Shippori Mincho', serif;
  letter-spacing: 0.02em;
}

.value-card__desc {
  font-size: 12.5px;
  line-height: 1.8;
  color: #767672;
}

/* About: "why" items (no card, no hover) */

.why-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px;
}

.why-item__icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.why-item__title {
  font-size: 20px;
  font-weight: 600;
}

.why-item__desc {
  font-size: 12.5px;
  line-height: 1.8;
  color: #767672;
}

/* About: company info table */

.info-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  padding: 22px 0;
  border-bottom: 1px solid #ececea;
}

.info-row__label {
  font-size: 13px;
  color: #8a8a86;
}

.info-row__value {
  font-size: 14px;
}

.info-row__value--muted {
  color: #b5b5b0;
}

/* Services: eyebrow with icon */

.service-block__label {
  display: flex;
  align-items: center;
  gap: 14px;
}

.service-block__label img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.service-block__label span {
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #1e3a2b;
  font-weight: 600;
}

/* Services.html: each service block — photo on one side, heading +
   body (description/tags/buttons) stacked on the other. Named grid
   areas keep the photo pinned between the heading and the body so on
   mobile it stacks in that same reading order instead of dumping the
   photo before or after the whole text block. */
.service-block-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "photo heading"
    "photo body";
  column-gap: 72px;
  row-gap: 18px;
  align-items: center;
}

.service-block-grid .service-photo-frame { grid-area: photo; min-width: 0; }

.service-block__heading {
  grid-area: heading;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-block__body {
  grid-area: body;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Services / Works: numbered flow step (compact variant) */

.flow-step-compact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.flow-step-compact__num {
  font-size: 30px;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.2px #1e3a2b;
}

.flow-step-compact__title {
  font-size: 13.5px;
  font-weight: 600;
}

.flow-step-compact__desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: #8a8a86;
}

/* Works: filter pills */

.filter-pill {
  font-size: 13px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid #d8d8d4;
  color: #4a4a48;
  background: #ffffff;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.filter-pill:hover {
  border-color: #1e3a2b;
  color: #1e3a2b;
}

.filter-pill:active {
  transform: scale(0.94);
}

.filter-pill--active {
  border: none;
  background: #141412;
  color: #ffffff;
}

/* InquiryForm.html: "coming soon" message fade-in */

#inquiry-pending-message {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#inquiry-pending-message.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Hearing Sheet Form (Inquiry-Restaurant.html etc.) ---------- */

.hearing-intro {
  max-width: 720px;
  margin: 0 auto 48px;
  font-size: 13.5px;
  line-height: 2;
  color: #5a5a56;
}

.hearing-intro__notes {
  margin: 28px 0 0;
  padding: 24px 28px;
  background: #f7f7f5;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.9;
  color: #6a6a66;
  list-style: none;
}

.hearing-intro__notes li {
  margin-bottom: 6px;
  padding-left: 16px;
  position: relative;
}

.hearing-intro__notes li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.hearing-intro__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 13px;
  color: #1e3a2b;
  font-weight: 600;
}

.hearing-intro__contact img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.hearing-form {
  max-width: 720px;
  margin: 0 auto;
}

.hearing-session {
  padding: 56px 0;
  border-top: 1px solid #ececea;
}

.hearing-session:first-child {
  border-top: none;
  padding-top: 0;
}

.hearing-session__eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #1e3a2b;
  font-weight: 600;
  margin-bottom: 10px;
}

.hearing-session__title {
  font-size: 22px;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
  margin: 0 0 12px;
}

.hearing-session__desc {
  font-size: 13px;
  line-height: 1.9;
  color: #767672;
  margin: 0 0 40px;
  max-width: 560px;
}

.hearing-field {
  margin-bottom: 36px;
}

.hearing-field__label {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 10px;
  line-height: 1.7;
}

.hearing-field__required,
.hearing-field__optional {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  vertical-align: middle;
}

.hearing-field__required {
  color: #ffffff;
  background: #a8503a;
}

.hearing-field__optional {
  color: #767672;
  font-weight: 500;
  border: 1px solid #d8d8d4;
}

.hearing-field__note {
  font-size: 12px;
  color: #8a8a86;
  margin: 6px 0 0;
  line-height: 1.7;
}

.hearing-field__sublabel {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #4a4a48;
  margin: 18px 0 6px;
}

.hearing-field__sublabel:first-of-type {
  margin-top: 6px;
}

.hearing-input,
.hearing-textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid #d8d8d4;
  border-radius: 4px;
  font-size: 13.5px;
  font-family: inherit;
  color: #1a1a1a;
  background: #ffffff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hearing-input:focus,
.hearing-textarea:focus {
  outline: none;
  border-color: #1e3a2b;
  box-shadow: 0 0 0 3px rgba(30, 58, 43, 0.1);
}

.hearing-textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.8;
}

.hearing-checkbox-group,
.hearing-radio-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 20px;
}

.hearing-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: #4a4a48;
  cursor: pointer;
  padding: 6px 0;
  transition: color 0.25s ease, transform 0.25s ease;
}

.hearing-option:hover {
  color: #1e3a2b;
  transform: translateX(3px);
}

.hearing-option input[type="checkbox"],
.hearing-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid #d8d8d4;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.15s ease;
}

.hearing-option input[type="checkbox"] {
  border-radius: 4px;
}

.hearing-option input[type="radio"] {
  border-radius: 50%;
}

.hearing-option input[type="checkbox"]:checked,
.hearing-option input[type="radio"]:checked {
  border-color: #1e3a2b;
  background: #1e3a2b;
  transform: scale(1.08);
}

.hearing-option input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.hearing-option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
}

.hearing-competitor-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.hearing-competitor-row__num {
  font-size: 12px;
  font-weight: 600;
  color: #1e3a2b;
  width: 20px;
  flex-shrink: 0;
}

.hearing-file {
  padding: 28px;
  border: 1.5px dashed #d8d8d4;
  border-radius: 6px;
  text-align: center;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.hearing-file:hover {
  border-color: #1e3a2b;
  background: #f7f7f5;
}

.hearing-file input[type="file"] {
  font-size: 12.5px;
  color: #4a4a48;
}

.hearing-submit {
  margin-top: 8px;
  padding: 40px 0 0;
  text-align: center;
}

.hearing-submit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 52px;
  border: none;
  border-radius: 999px;
  background: #1e3a2b;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.hearing-submit-btn:hover {
  background: #16291d;
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(30, 58, 43, 0.28);
}

.hearing-submit-btn__arrow {
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.hearing-submit-btn:hover .hearing-submit-btn__arrow {
  transform: translateX(6px);
}

.hearing-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Works: grid card */

.works-grid-card {
  border: 1px solid #ececea;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.works-grid-card__image {
  height: 200px;
  overflow: hidden;
}

.works-grid-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.works-grid-card__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.works-grid-card__category {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #1e3a2b;
  font-weight: 600;
}

.works-grid-card__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
}

.works-grid-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: #5a5a56;
}

.works-grid-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.works-grid-card__note {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: #a3a39f;
}

.works-grid-card__link {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e3a2b;
}

.works-grid-card--placeholder {
  border: 1px dashed #d8d8d4;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 394px;
  color: #b5b5b0;
}

.works-grid-card--placeholder span:first-child {
  font-size: 26px;
  font-weight: 300;
}

.works-grid-card--placeholder span:last-child {
  font-size: 12.5px;
  letter-spacing: 0.05em;
}

/* Pricing: plan cards */

.plan-card {
  border: 1px solid #ececea;
  border-radius: 6px;
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.plan-card--featured {
  border: 2px solid #132a1f;
  position: relative;
}

.plan-card__badge {
  position: absolute;
  top: -13px;
  left: 36px;
  background: #132a1f;
  color: #ffffff;
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 5px 14px;
  border-radius: 999px;
}

.plan-card__name {
  font-size: 12px;
  letter-spacing: 0.15em;
  color: #1e3a2b;
  font-weight: 600;
}

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 32px;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
}

.plan-card__audience {
  font-size: 13px;
  color: #767672;
}

.plan-card__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid #ececea;
}

.plan-card__feature {
  display: flex;
  gap: 10px;
  align-items: center;
}

.plan-card__feature-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1e3a2b;
  flex-shrink: 0;
}

.plan-card__feature span:last-child {
  font-size: 13px;
  color: #4a4a48;
}

.plan-card__cta {
  margin-top: 16px;
  width: 100%;
  padding: 15px 0;
  border: 1px solid #1a1a1a;
  border-radius: 2px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  color: #1a1a1a;
}

.plan-card__cta--solid {
  background: #132a1f;
  color: #ffffff;
  border: none;
}

/* Pricing: option rows */

.option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid #ececea;
}

.option-row__name {
  font-size: 14px;
}

.option-row__price {
  font-size: 13px;
  color: #8a8a86;
}

/* Contact: method cards */

.method-card {
  border: 1px solid #ececea;
  border-radius: 6px;
  padding: 36px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.method-card__icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.method-card__title {
  font-size: 14.5px;
  font-weight: 600;
}

.method-card__desc {
  font-size: 12px;
  line-height: 1.8;
  color: #767672;
}

.method-card__link {
  font-size: 12.5px;
  color: #1e3a2b;
  font-weight: 500;
}

.method-card__btn {
  margin-top: 2px;
  padding: 10px 22px;
  border-radius: 2px;
  font-size: 12.5px;
  font-weight: 500;
}

.method-card__btn--solid {
  background: #132a1f;
  color: #ffffff;
}

.method-card__btn--outline {
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
}

/* Contact: FAQ */

.faq-item {
  padding: 26px 0;
  border-bottom: 1px solid #ececea;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item__q,
.faq-item__a {
  display: flex;
  gap: 12px;
}

.faq-item__q-mark {
  font-size: 14px;
  font-weight: 700;
  color: #1e3a2b;
}

.faq-item__q-text {
  font-size: 14px;
  font-weight: 600;
}

.faq-item__a-mark {
  font-size: 14px;
  font-weight: 700;
  color: #8a8a86;
}

.faq-item__a-text {
  font-size: 13.5px;
  color: #5a5a56;
  line-height: 1.8;
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

/* Tablet: tighten side padding and drop the widest grids down a notch */

@media (max-width: 1024px) {
  .nav,
  .hero__content,
  .subhero__content { padding-left: 32px !important; padding-right: 32px !important; }

  .services,
  .strengths,
  .works,
  .flow,
  .cta,
  .cta-home,
  .footer,
  .fade-section,
  .simple-hero { padding-left: 32px !important; padding-right: 32px !important; }

  .services__grid { grid-template-columns: repeat(3, 1fr); }
  /* At 3 columns the cards are noticeably narrower than the 5-column
     desktop layout; keeping the same 4:5 ratio here would stretch every
     card too tall relative to its width, so tablet gets a shorter,
     better-proportioned ratio instead of just scaling the same shape. */
  .service-card--photo { aspect-ratio: 3 / 4; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }

  .hero__title { font-size: 62px; }
  .stage-intro__title { font-size: 42px; }

  .strengths { grid-template-columns: 1fr; grid-template-areas: "heading" "image" "body"; row-gap: 32px; }
  .strengths__list { width: 100%; height: auto; }
  .strengths__image img { width: 100%; height: auto; object-fit: contain; }
  .feature-photo { height: auto !important; object-fit: contain !important; }

  .grid-2 { grid-template-columns: 1fr; }
  .about-vision-grid,
  .grid-company { grid-template-columns: 1fr; grid-template-areas: "heading" "image" "body"; row-gap: 24px; }
  .about-intro-grid { grid-template-columns: 1fr; grid-template-areas: "heading" "image" "body"; row-gap: 24px; }
  .service-block-grid { grid-template-columns: 1fr; grid-template-areas: "heading" "photo" "body"; row-gap: 18px; }

  .plum-branch { height: 38vh; top: 92px; left: -46px; max-width: 380px; }
}

/* Mobile: single-column layouts, hamburger nav, smaller type */

@media (max-width: 768px) {
  .page { overflow-x: hidden; }

  /* Line-breaks that only exist to control line length on wide desktop
     copy — let paragraph text wrap naturally at narrow widths instead. */
  br.br-desktop { display: none; }

  /* Opposite of br-desktop: hidden everywhere by default (see base
     stylesheet), shown only on phones — used for long hero titles where
     the natural wrap point still renders a line too wide for narrow
     screens, so we force a shorter, safe break instead. */
  br.br-mobile { display: inline; }

  /* Hearing sheet form: single column on mobile */
  .hearing-checkbox-group,
  .hearing-radio-group { grid-template-columns: 1fr; }

  /* Nav → hamburger */
  .nav { padding-left: 20px !important; padding-right: 20px !important; height: 68px; }
  .page { padding-top: 68px; }
  .stage-intro { height: calc((100vh - 68px) * 0.92); height: calc((100dvh - 68px) * 0.92); }
  .hero__top-fade { height: 16vh; }
  .nav__brand-name { font-size: 15px; }
  .nav--minimal .nav__brand-name { font-size: 16px; }
  .nav--minimal .nav__lang { font-size: 12px; }
  .nav--minimal .nav__right { gap: 14px; }
  .nav--minimal .nav__links { top: 68px; padding: 8px 20px 20px; }
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid #ececea;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 20px 20px;
    display: none;
    box-shadow: 0 16px 32px rgba(20,20,18,0.08);
  }
  .nav__links.nav__links--open { display: flex; }
  .nav__links a.nav-link,
  .nav__links a.nav-link-active { width: 100%; padding: 14px 0; border-bottom: 1px solid #f2f2f0; }
  .nav__links .btn-nav-cta { margin-top: 14px; text-align: center; }
  .nav-link::after { display: none; }

  /* Hero */
  .hero__content { padding-left: 20px !important; padding-right: 20px !important; gap: 22px; }
  .hero__eyebrow { font-size: 12px; }
  .hero__title { font-size: 38px; line-height: 1.4; letter-spacing: 0.02em; }
  .hero__desc { font-size: 15px; max-width: 100%; }
  .hero__actions { flex-direction: column; width: 100%; gap: 12px; margin-top: 4px; }
  .cta-home__actions { flex-direction: column; width: 100%; gap: 12px; }
  .cta-home__actions .btn-pill { width: 100%; text-align: center; justify-content: center; }
  .stage-intro__content { padding: 0 24px; gap: 18px; }
  .stage-intro__title { font-size: 32px; }
  .stage-intro__subtitle { font-size: 13.5px; font-weight: 500; color: #1a1a1a; }
  .stage-intro__services { font-size: 12.5px; font-weight: 500; color: #48483f; }
  .hero__actions a { text-align: center; width: 100%; padding-top: 18px; padding-bottom: 18px; }

  .subhero--460, .subhero--420 { height: 340px; }
  .subhero__content { padding-left: 20px !important; padding-right: 20px !important; gap: 16px; }
  .subhero__title--46, .subhero__title--42 { font-size: 22px; line-height: 1.5; }
  .subhero__desc { font-size: 13.5px; max-width: 100%; }

  .simple-hero { padding-left: 20px !important; padding-right: 20px !important; }
  .simple-hero__title--38, .simple-hero__title--36 { font-size: 30px; }
  .simple-hero__desc { font-size: 13.5px; max-width: 100% !important; }

  /* Section headings */
  .section-heading__title { font-size: 30px; }
  .services__heading, .works__heading { margin-bottom: 40px; }

  /* Sub-page one-off headings (About/Services/Pricing/Contact block titles).
     Sized so short Japanese phrases never wrap mid-word onto their own line. */
  .block-title--45,
  .block-title--32,
  .block-title--30,
  .block-title--28 { font-size: 28px; line-height: 1.5; }

  /* Sections generally */
  .services,
  .strengths,
  .works,
  .flow,
  .cta,
  .footer,
  .fade-section,
  .simple-hero,
  .nav,
  .hero__content,
  .subhero__content { padding-left: 20px !important; padding-right: 20px !important; }

  .services { padding-top: 52px !important; padding-bottom: 44px !important; }
  .strengths { padding-top: 56px !important; padding-bottom: 56px !important; gap: 20px !important; }
  .works { padding-top: 72px !important; padding-bottom: 64px !important; }
  .flow { padding-top: 64px !important; padding-bottom: 72px !important; }
  .cta { padding-top: 72px !important; padding-bottom: 72px !important; }
  .cta-home { min-height: 420px; padding-left: 32px !important; padding-right: 32px !important; padding-top: 64px; padding-bottom: 64px; }
  .cta-home__title { font-size: 27px; }
  .cta-home__desc { font-size: 13.5px; }

  .mission { min-height: 340px; padding-left: 20px !important; padding-right: 20px !important; }
  .mission__content { padding: 64px 0; gap: 18px; }

  /* Grids collapse to a single column */
  .services__grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-6,
  .flow__grid { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* Single-column mobile: a full-width card at the old 4:5 portrait ratio
     would be nearly the height of the screen (too tall, looks broken).
     Square reads as a deliberate, compact card instead. Padding/gap is
     also tightened so icon + title + 2-line description never crowd or
     clip against the shorter card. */
  .service-card--photo {
    aspect-ratio: 1 / 1;
    padding: 24px 22px;
    gap: 12px;
  }

  /* Services.html: stack each block as heading → photo → body, with
     a tightened gap and a softer shadow so the photo and text read as
     one unified block instead of two disconnected pieces. */
  .service-block-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "heading" "photo" "body";
    row-gap: 16px;
  }
  .service-photo-frame { box-shadow: 0 10px 24px rgba(20,20,18,0.08); }

  /* About.html VISION section + COMPANY section: stack as
     heading → photo → body, same as INTRO, for a consistent feel. */
  .about-vision-grid,
  .grid-company { grid-template-columns: 1fr; grid-template-areas: "heading" "image" "body"; row-gap: 20px; }
  .about-vision-grid h2,
  .grid-company h2 { font-size: 20px !important; }
  .info-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
  .info-row__label { font-size: 11px; }
  .info-row__value { font-size: 11.5px; line-height: 1.5; }

  /* About.html INTRO section: heading, then photo, then description. */
  .about-intro-grid { grid-template-columns: 1fr; grid-template-areas: "heading" "image" "body"; row-gap: 20px; }

  /* Strengths: heading → detail list, stacked (matches the About page
     sections above for a consistent mobile feel). */
  .strengths { row-gap: 18px; }
  .strengths__list { width: 100%; height: auto; gap: 16px; }
  .strengths__heading .section-heading__title { font-size: 22px; }

  /* Each strength card: photo on top (full-width band), text below - the
     side-by-side split only reads well at wider widths, so mobile swaps
     to a stacked layout and the seam gradient (built for a horizontal
     blend) is swapped for a vertical one to match. */
  .strength-item { flex-direction: column; min-height: 0; }
  .strength-item__content { padding: 18px 18px; gap: 8px; }
  .strength-item__photo { flex: 0 0 200px; min-width: 0; }
  .strength-item__photo::before {
    background: linear-gradient(180deg, rgba(255,255,255,0) 78%, #ffffff 100%);
  }

  .flow-step--top, .flow-step--bottom { padding: 24px 0 !important; border-right: none !important; }
  .flow-step--bordered { border-right: none; }
  .flow-step--bottom { border-top: 1px solid #ececea; }

  .service-block__label,
  .works-grid-card,
  .plan-card,
  .method-card,
  .value-card { order: 0; }

  /* Works: keep the 2-row auto-scroll marquee on mobile too (no tap needed) */
  .works__track-wrap { padding-left: 20px !important; padding-right: 20px !important; overflow: hidden; gap: 16px; }
  .work-card { flex-basis: 260px; margin-right: 16px; }
  .work-card__image img { height: 190px; }
  .work-card__image--placeholder { height: 190px; }

  .plum-branch { height: 20vh; top: 56px; left: -42px; max-width: 168px; opacity: 0.55; }

  .works-grid-card__image { height: 160px; }

  .footer__top { flex-direction: column; gap: 32px; }
  .footer__cols { flex-direction: column; gap: 28px; }
  .footer__brand { max-width: 100%; }

  .cta__title { font-size: 27px; }
  .cta__desc { font-size: 13.5px; }

  .plan-card { padding: 32px 24px; }
  .method-card { padding: 28px 20px; }
}

@media (max-width: 480px) {
  .hero__title { font-size: 31px; letter-spacing: 0.02em; }
  .subhero__title--46, .subhero__title--42 { font-size: 20px; }
  .simple-hero__title--38, .simple-hero__title--36 { font-size: 26px; }
  .section-heading__title { font-size: 26px; }
  .cta__title { font-size: 23px; }
  .cta-home__title { font-size: 23px; }
  .cta-home { min-height: 380px; }
  .block-title--45,
  .block-title--32,
  .block-title--30,
  .block-title--28 { font-size: 24px; }
}

/* ---------- v15: JP/EN language toggle buttons (nav) ---------- */
/* The static "JP|EN" label is now two real buttons on pages where the
   toggle is wired up (currently index.html). Pages still using the plain
   span are unaffected. */

.nav__lang-btn {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;            /* picks up .nav__lang's size, incl. mobile 12px */
  letter-spacing: 0.04em;
  color: #b8b8b4;
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav__lang-btn:hover {
  color: #4a4a48;
}

.nav__lang-btn.is-active {
  color: #4a4a48;
  font-weight: 600;
}

/* ---------- v15: draggable works marquee ---------- */
/* .works-track--js is added by main.js when it takes over the marquee;
   the keyframe animation above stays as a no-JS fallback. */

.works-track--js {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;      /* horizontal drag = marquee, vertical = page scroll */
}

.works-track--js.is-dragging {
  cursor: grabbing;
}

.works-track--js img {
  -webkit-user-drag: none;
  pointer-events: none;     /* keeps pointer capture on the track itself */
}

/* ---------- v18: Stage 1 first-view refresh ---------- */
/* The CTA button was removed from Stage 1 (the first view is now a pure
   "read then scroll" screen), so the lead copy takes its place. A thin
   rule separates the English wordmark-style headline from the Japanese
   value proposition, keeping the composition balanced rather than a
   stack of three same-weight paragraphs. */

.stage-intro__rule {
  width: 40px;
  height: 1px;
  background: #4D6652;
  opacity: 0;
  animation: introFadeLeft 1.1s cubic-bezier(0.16,1,0.3,1) 0.55s forwards;
}

.stage-intro__lead {
  margin: 0;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.02em;
  color: #1f1f1d;
  opacity: 0;
  animation: introFadeLeft 1.1s cubic-bezier(0.16,1,0.3,1) 0.7s forwards;
}

/* Service keywords are now supporting detail under the lead copy, so they
   step back a little in size/colour instead of competing with it. */
.stage-intro__services {
  font-size: 12.5px;
  color: #86867f;
}

@media (prefers-reduced-motion: reduce) {
  .stage-intro__rule,
  .stage-intro__lead {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- v18: SNS card + 2-up service grid on phones ---------- */

/* Desktop/tablet: the grid is authored as 5 columns; with the 6th (SNS)
   card added it now wraps to 5 + 1, which looks lopsided. Six columns
   keeps every card on one row at desktop width. */
@media (min-width: 1025px) {
  .services__grid { grid-template-columns: repeat(6, 1fr); }
}

/* Cascade delay for the 6th card (the original list stopped at 5). */
.service-card:nth-child(6) { transition-delay: 0.60s; }

@media (max-width: 768px) {
  /* Two cards per row instead of one full-width card per row: the whole
     service line-up is visible in about a screen and a half rather than
     six full screens of scrolling. Cards are deliberately smaller - the
     photo is a mood cue here, the title carries the meaning. The
     !important matches the single-column rule it overrides above. */
  .services__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .service-card--photo {
    aspect-ratio: 3 / 3.7;
    padding: 16px 12px;
    gap: 9px;
  }

  .service-card--photo .service-card__icon { width: 25px; height: 25px; }
  .service-card--photo .service-card__title { font-size: 12px; line-height: 1.45; }
  .service-card--photo .service-card__desc { font-size: 10.5px; line-height: 1.6; }

  /* The two-column card is far narrower than the old full-width one, so
     the desktop line breaks inside the description would leave very short
     orphan lines - let the text reflow to the card width instead. */
  .service-card--photo .service-card__desc .br-desktop { display: none; }
}

/* ---------- v18: larger plum branch on phones ---------- */
/* The branch is painted before .stage-intro__content in the markup and
   sits at z-index 0 while the copy is at z-index 1, so growing it simply
   lets it pass BEHIND the text (never over it). Opacity is eased down a
   touch at the same time so the headline stays crisp where they overlap. */

@media (max-width: 768px) {
  .plum-branch {
    height: 34vh;
    top: 44px;
    left: -54px;
    max-width: 300px;
    opacity: 0.5;
  }
}

/* ---------- v19: high-contrast buttons that read as buttons on photos ---------- */
/* The old --solid / --ghost pair were both translucent, so on a busy photo
   they blended into whatever was behind them and stopped looking tappable.
   These two are fully opaque with a real drop shadow, so they read as
   raised, pressable objects against ANY background, light or dark. Hover
   lifts, :active presses the button back down for tactile feedback. */

.btn-pill--brand,
.btn-pill--white {
  border: 0;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
}

.btn-pill--brand {
  background: #1E3A2B;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(10,26,18,0.34), 0 1px 0 rgba(255,255,255,0.14) inset;
}

.btn-pill--brand:hover {
  background: #27503A;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(10,26,18,0.42), 0 1px 0 rgba(255,255,255,0.16) inset;
}

.btn-pill--white {
  background: #ffffff;
  color: #16261D;
  box-shadow: 0 8px 20px rgba(10,20,14,0.26);
}

.btn-pill--white:hover {
  background: #ffffff;
  color: #16261D;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(10,20,14,0.34);
}

/* Pressed state: the button visibly sinks, which is the single clearest
   signal on touch devices that the tap registered. */
.btn-pill--brand:active,
.btn-pill--white:active {
  transform: translateY(1px);
  box-shadow: 0 4px 10px rgba(10,20,14,0.28);
}

.btn-pill--brand:focus-visible,
.btn-pill--white:focus-visible {
  outline: 3px solid #9FD1B3;
  outline-offset: 3px;
}

/* The arrow slides on hover on the brand button too (it inherits
   .btn-pill__arrow, which only had a rule for the older variants). */
.btn-pill--brand .btn-pill__arrow,
.btn-pill--white .btn-pill__arrow { transition: transform 0.25s ease; }
.btn-pill--brand:hover .btn-pill__arrow,
.btn-pill--white:hover .btn-pill__arrow { transform: translateX(4px); }

/* ---------- v19: pricing brief on the top page ---------- */
/* Sits between "View all services" and the Strengths section: answers the
   "roughly how much?" question in one glance, then hands off to Pricing. */

/* Its own band, not a tail on the Services section. Services sits on white
   and Strengths on the warm grey #f7f7f5, so Pricing takes a third, faintly
   green-tinted surface plus hairline rules top and bottom: the change of
   subject is unmistakable at a glance, and no two neighbouring sections
   ever share a background. */
.price-brief {
  padding: 104px 56px 96px;
  background: #EEF2EF;
  border-top: 1px solid #E0E7E2;
  border-bottom: 1px solid #E0E7E2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Makes explicit that these three figures are for the WEBSITE build -
   LINE / SNS / AI are quoted separately (see the note below the cards). */
.price-brief__scope {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  padding: 7px 18px;
  border: 1px solid #C6D3CA;
  border-radius: 999px;
  background: #ffffff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #1e3a2b;
}

.price-brief__grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 230px));
  gap: 18px;
  width: 100%;
  max-width: 760px;
  justify-content: center;
}

.price-brief__card {
  position: relative;
  border: 1px solid #ececea;
  border-radius: 6px;
  padding: 26px 18px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.price-brief__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(20,20,18,0.09);
  border-color: #d4ddd7;
}

.price-brief__card--featured {
  border-color: #1e3a2b;
  box-shadow: 0 12px 30px rgba(30,58,43,0.10);
}

.price-brief__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e3a2b;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.price-brief__name {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: #8a8a86;
}

.price-brief__price {
  font-size: 25px;
  font-weight: 700;
  color: #1e3a2b;
  letter-spacing: 0.01em;
}

.price-brief__for {
  font-size: 12px;
  color: #767672;
}

.price-brief__note {
  margin: 20px 0 0;
  font-size: 12.5px;
  line-height: 1.95;
  color: #8a8a86;
  text-align: center;
}

.price-brief .services__more { margin-top: 10px; }

@media (max-width: 1024px) {
  .price-brief__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; }
}

@media (max-width: 768px) {
  .price-brief { padding-top: 72px; padding-bottom: 68px; }
  .price-brief__scope { margin-top: 24px; font-size: 11.5px; padding: 6px 15px; }
  /* Three narrow columns would squeeze the prices onto two lines; the
     plans read better stacked, with the featured one still standing out. */
  .price-brief__grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    max-width: 420px;
    margin-top: 26px;
  }
  .price-brief__card { padding: 20px 18px 18px; }
  .price-brief__price { font-size: 23px; }
  .price-brief__note { font-size: 12px; }
}

/* =====================================================================
   v21: Pricing page - one clearly-fenced band per service
   =====================================================================
   The whole point of this layout is separation: a visitor must never be
   unsure which service a price belongs to. Each category therefore gets
   (a) its own full-bleed band, (b) alternating surfaces so no two
   neighbours share a background, (c) a big numbered header, and
   (d) a left accent bar in the service's own hue. */

/* Sticky in-page switcher: also doubles as a visible table of contents,
   so the number of distinct services is obvious before scrolling. */
.price-jump {
  position: sticky;
  top: 84px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 14px 56px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid #ececea;
  border-bottom: 1px solid #ececea;
}

.price-jump__link {
  padding: 8px 16px;
  border: 1px solid #E2E6E3;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4a4a48;
  background: #ffffff;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.price-jump__link:hover {
  background: #1E3A2B;
  border-color: #1E3A2B;
  color: #ffffff;
}

/* ---------- the category band ---------- */
.price-cat {
  position: relative;
  padding: 92px 56px 88px;
  scroll-margin-top: 150px;          /* clears the fixed nav + jump bar */
}

/* Alternating surfaces guarantee a visible seam between every service. */
.price-cat:nth-of-type(odd)  { background: #ffffff; }
.price-cat:nth-of-type(even) { background: #F5F7F5; }
.price-cat + .price-cat { border-top: 1px solid #E4E9E5; }

/* Accent bar down the left edge - a different hue per service, so the
   colour alone tells you which band you are in. */
.price-cat::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--cat-accent, #1E3A2B);
}
.price-cat--web  { --cat-accent: #1E3A2B; }
.price-cat--sns  { --cat-accent: #C2703F; }
.price-cat--line { --cat-accent: #4A8C5C; }
.price-cat--meo  { --cat-accent: #3F6EA8; }
.price-cat--ads  { --cat-accent: #8A5FA8; }

.price-cat__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  margin-bottom: 44px;
}

.price-cat__no {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--cat-accent);
  opacity: 0.5;
}

.price-cat__eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.26em;
  font-weight: 700;
  color: var(--cat-accent);
}

.price-cat__title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
  line-height: 1.4;
}

.price-cat__desc {
  margin: 0;
  max-width: 620px;
  font-size: 14px;
  line-height: 1.95;
  color: #6a6a66;
}

.price-cat__note {
  margin: 22px auto 0;
  max-width: 760px;
  font-size: 12.5px;
  line-height: 1.9;
  color: #8a8a86;
  text-align: center;
}

.price-cat__more {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

/* ---------- plan tiles ---------- */
.plan-tiles {
  display: grid;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}
.plan-tiles--2 { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; }
.plan-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.plan-tile {
  position: relative;
  background: #ffffff;
  border: 1px solid #E4E7E4;
  border-radius: 8px;
  padding: 32px 24px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.plan-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(20,20,18,0.09);
  border-color: var(--cat-accent);
}

.plan-tile--featured {
  border-color: var(--cat-accent);
  box-shadow: 0 14px 34px rgba(20,20,18,0.10);
}

.plan-tile__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cat-accent);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.plan-tile__name {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: #8a8a86;
}

.plan-tile__price {
  font-size: 27px;
  font-weight: 700;
  color: var(--cat-accent);
  letter-spacing: 0.01em;
}

.plan-tile__for {
  font-size: 12px;
  color: #767672;
}

.plan-tile__lead {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.85;
  color: #5a5a56;
}

/* the ⓘ affordance that opens the detail dialog */
.plan-tile__more {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--cat-accent);
  cursor: pointer;
}

.plan-tile__more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.plan-tile__more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- detail dialog ---------- */
.plan-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(16,20,17,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.plan-backdrop.is-open { opacity: 1; }

/* Closed = display:none, so its copy is inert but still in the DOM (and
   therefore still reachable by the JP/EN translator). */
.plan-detail { display: none; }

.plan-detail.is-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 100;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: min(84vh, 720px);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(10,16,12,0.35);
  text-align: left;
  overflow: hidden;
  animation: planDetailIn 0.28s cubic-bezier(0.16,1,0.3,1);
}

@keyframes planDetailIn {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.plan-detail__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 18px;
  border-bottom: 1px solid #ECEFEC;
}

.plan-detail__name {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: #8a8a86;
}

.plan-detail__price {
  display: block;
  margin-top: 4px;
  font-size: 25px;
  font-weight: 700;
  color: var(--cat-accent, #1E3A2B);
}

.plan-detail__close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid #E4E7E4;
  border-radius: 50%;
  background: #ffffff;
  font-size: 19px;
  line-height: 1;
  color: #6a6a66;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.plan-detail__close:hover { background: #1E3A2B; color: #ffffff; border-color: #1E3A2B; }

.plan-detail__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px 24px 24px;
  -webkit-overflow-scrolling: touch;
}

.plan-detail__for {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #F1F4F1;
  font-size: 11.5px;
  font-weight: 600;
  color: #4a5a4e;
}

.plan-detail__lead {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.95;
  color: #4a4a46;
}

.plan-detail__subtitle {
  margin: 22px 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--cat-accent, #1E3A2B);
  font-size: 13px;
  font-weight: 700;
  color: #1a1a18;
}

.plan-detail__list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 2;
  color: #5a5a56;
}
.plan-detail__list li { margin-bottom: 2px; }

.plan-detail__single {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1e3a2b;
}

.plan-detail__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #ECEFEC;
  background: #FAFBFA;
}

.plan-detail__back {
  padding: 12px 22px;
  border: 1px solid #D8DDD9;
  border-radius: 999px;
  background: #ffffff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #3a3a38;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.plan-detail__back:hover { background: #F1F3F1; border-color: #BDC6C0; }

.plan-detail__cta { padding: 12px 22px; font-size: 13.5px; }

body.plan-modal-open { overflow: hidden; }

/* ---------- dedicated option pages ---------- */
.opt-wrap {
  padding: 20px 56px 130px;
  max-width: 900px;
  margin: 0 auto;
}

.opt-group + .opt-group { margin-top: 56px; }

.opt-group__label {
  display: block;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1E3A2B;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1E3A2B;
}

.opt-cards { display: flex; flex-direction: column; gap: 16px; }

.opt-card {
  border: 1px solid #ECECEA;
  border-radius: 8px;
  padding: 24px 24px 22px;
  background: #ffffff;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.opt-card:hover { box-shadow: 0 16px 34px rgba(20,20,18,0.07); border-color: #D4DDD7; }

.opt-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.opt-card__name {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: #1a1a18;
}

.opt-card__price {
  font-size: 17px;
  font-weight: 700;
  color: #1E3A2B;
  white-space: nowrap;
}

.opt-card__lead {
  margin: 10px 0 0;
  font-size: 13.5px;
  line-height: 1.95;
  color: #5a5a56;
}

.opt-card__list {
  margin: 14px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.95;
  color: #6a6a66;
}

.opt-card__tip {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 3px solid #1E3A2B;
  background: #F5F7F5;
  border-radius: 0 4px 4px 0;
  font-size: 12.5px;
  line-height: 1.85;
  color: #3d5346;
}

.opt-note {
  margin: 26px 0 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: #8a8a86;
  text-align: center;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .price-jump { top: 84px; padding: 12px 24px; }
  .plan-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .plan-tile { padding: 28px 16px 22px; }
  .plan-tile__price { font-size: 23px; }
}

@media (max-width: 768px) {
  .price-jump {
    top: 68px;
    gap: 6px;
    padding: 10px 14px !important;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .price-jump__link { flex: 0 0 auto; font-size: 12px; padding: 7px 13px; }

  .price-cat { padding: 62px 20px 58px; scroll-margin-top: 122px; }
  .price-cat__no { font-size: 32px; }
  .price-cat__title { font-size: 24px; }
  .price-cat__desc { font-size: 13.5px; }
  .price-cat__head { margin-bottom: 30px; }

  /* Stacked, not squeezed: a 3-up grid at phone width makes the prices
     wrap and the separation between services harder to read. */
  .plan-tiles--2,
  .plan-tiles--3 {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    max-width: 440px;
  }
  .plan-tile { padding: 26px 20px 22px; }

  .plan-detail.is-open {
    width: calc(100vw - 24px);
    max-height: 86vh;
    border-radius: 12px;
  }
  .plan-detail__head { padding: 20px 18px 15px; }
  .plan-detail__body { padding: 18px 18px 22px; }
  .plan-detail__foot { padding: 14px 18px; gap: 10px; }
  .plan-detail__back,
  .plan-detail__cta { flex: 1 1 0; justify-content: center; text-align: center; padding: 12px 14px; }

  .opt-wrap { padding: 16px 20px 100px !important; }
  .opt-card { padding: 20px 18px 18px; }
  .opt-card__name { font-size: 14.5px; }
  .opt-card__price { font-size: 16px; }
}

.price-jump__link.is-current {
  background: #1E3A2B;
  border-color: #1E3A2B;
  color: #ffffff;
}

/* v21 fix: a transformed ancestor becomes the containing block for its
   position:fixed descendants AND opens a new stacking context - so while
   the pointer sat on a tile, its :hover transform trapped the open dialog
   underneath the backdrop (dialog blurred + dimmed). Suppressing tile
   transforms for as long as a dialog is open keeps the dialog in the root
   stacking context, where its z-index actually outranks the backdrop. */
body.plan-modal-open .plan-tile,
body.plan-modal-open .plan-tile:hover {
  transform: none !important;
}

/* v21.2: the REAL cause of the trapped dialog. `.fade-section.is-visible`
   settles on `transform: translateY(0)` - an identity transform, but still
   a transform, which makes the section a containing block for its
   position:fixed descendants and opens a stacking context. The dialog was
   therefore positioned (and stacked) inside its section rather than the
   viewport, landing under the backdrop. Resolving to `none` once the fade
   has run keeps the animation identical and frees the dialog. */
.price-cat.is-visible { transform: none; }

/* Belt and braces: whatever else may animate, nothing between the dialog
   and the viewport may hold a transform while a dialog is open. */
body.plan-modal-open .price-cat,
body.plan-modal-open .plan-tiles,
body.plan-modal-open .plan-tile {
  transform: none !important;
  filter: none !important;
}

/* =====================================================================
   v22: photos on the bands + per-service detail pages (no more dialogs)
   ===================================================================== */

/* Photo sits above the number, framed in the service's own accent so the
   band still reads as one fenced unit rather than a loose image. */
.price-cat__photo {
  width: min(560px, 100%);
  aspect-ratio: 16 / 7;
  margin-bottom: 22px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(20,20,18,0.14);
  border-bottom: 3px solid var(--cat-accent);
}

.price-cat__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.price-cat__head--sub .price-cat__title { font-size: 26px; }

/* ---------- detail page hero ---------- */
.price-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.price-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.price-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,18,15,0.62) 0%, rgba(15,18,15,0.74) 100%);
}

.price-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 70px 56px;
  max-width: 760px;
}

.price-hero__eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.28em;
  font-weight: 700;
  color: #C9DBCF;
}

.price-hero__title {
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  font-family: 'Shippori Mincho', serif;
  color: #ffffff;
  line-height: 1.4;
}

.price-hero__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.95;
  color: rgba(255,255,255,0.86);
}

/* breadcrumb back to the overview */
.price-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 56px;
  border-bottom: 1px solid #ECECEA;
  font-size: 12.5px;
  color: #8a8a86;
}
.price-crumb a { color: #1E3A2B; font-weight: 600; }
.price-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- a plan, written out in full ---------- */
.price-detail { padding: 78px 56px 72px; }

.plan-fulls {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 1000px;
  margin: 0 auto;
}

.plan-full {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  border: 1px solid #E4E7E4;
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}

.plan-full--featured {
  border-color: var(--cat-accent);
  box-shadow: 0 16px 40px rgba(20,20,18,0.10);
}

.plan-full__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 30px 26px;
  background: #F7F9F7;
  border-right: 1px solid #E9EDEA;
}

.plan-full__badge {
  align-self: flex-start;
  margin-bottom: 4px;
  background: var(--cat-accent);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 13px;
  border-radius: 999px;
}

.plan-full__name {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: #8a8a86;
}

.plan-full__price {
  font-size: 30px;
  font-weight: 700;
  color: var(--cat-accent);
  line-height: 1.2;
}

.plan-full__for {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #DCE3DE;
  font-size: 11.5px;
  font-weight: 600;
  color: #4a5a4e;
}

.plan-full__lead {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: #5a5a56;
}

.plan-full__cta {
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 13.5px;
}

.plan-full__body {
  padding: 30px 30px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 26px 32px;
  align-content: start;
}

.plan-full__subtitle {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--cat-accent);
  font-size: 13px;
  font-weight: 700;
  color: #1a1a18;
}

.plan-full__list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.95;
  color: #5a5a56;
}
.plan-full__list li { margin-bottom: 3px; }

.plan-full__single {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cat-accent);
}

/* ---------- options section on a detail page ---------- */
.opt-sec {
  padding: 76px 56px 84px;
  background: #F5F7F5;
  border-top: 1px solid #E4E9E5;
}
.opt-wrap--flush { padding: 0 !important; max-width: 900px; }

@media (max-width: 1024px) {
  .plan-full { grid-template-columns: 250px 1fr; }
  .plan-full__price { font-size: 26px; }
}

@media (max-width: 768px) {
  .price-cat__photo { aspect-ratio: 16 / 9; margin-bottom: 18px; border-radius: 8px; }

  .price-hero { min-height: 260px; }
  .price-hero__content { padding: 54px 20px; gap: 10px; }
  .price-hero__title { font-size: 26px; }
  .price-hero__desc { font-size: 13.5px; }

  .price-crumb { padding: 12px 20px !important; font-size: 12px; }

  .price-detail { padding: 48px 20px 44px !important; }

  /* Stack the price block above its contents: side-by-side at phone width
     leaves both columns too narrow to read comfortably. */
  .plan-full { grid-template-columns: 1fr; }
  .plan-full__aside {
    border-right: 0;
    border-bottom: 1px solid #E9EDEA;
    padding: 24px 20px;
  }
  .plan-full__cta { margin-top: 14px; align-self: stretch; justify-content: center; text-align: center; }
  .plan-full__body { padding: 22px 20px 24px; grid-template-columns: 1fr; gap: 20px; }
  .plan-full__price { font-size: 27px; }

  .opt-sec { padding: 52px 20px 60px !important; }
  .price-cat__head--sub .price-cat__title { font-size: 21px; }
}

/* =====================================================================
   v23: heading sits ON the photo, photo faded well back
   =====================================================================
   The words are what a visitor needs; the photo only sets the mood. So
   the image is dropped to a low opacity over white and covered with a
   soft white veil, letting the existing dark type stay dark - far more
   legible than white type on a busy photo, and it keeps the light, airy
   feel of the rest of the site. */

.price-cat__head--photo {
  position: relative;
  isolation: isolate;          /* keeps the veil under the copy, above the img */
  width: min(1000px, 100%);
  margin: 0 auto 46px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border-bottom: 3px solid var(--cat-accent);
  box-shadow: 0 14px 38px rgba(20,20,18,0.10);
}

.price-cat__photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.30;               /* the "薄く" - photo reads as a soft backdrop */
  z-index: 0;
}

/* A second, softer white wash biased to the centre, so the middle of the
   block - exactly where the title sits - is the calmest part of the image. */
.price-cat__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.60) 55%, rgba(255,255,255,0.42) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.30) 45%, rgba(255,255,255,0.70) 100%);
}

.price-cat__head-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 54px 40px 46px;
}

/* Type sits on a (light) photo now, so give it a faint white halo - it
   stays crisp even where the image happens to be busy underneath. */
.price-cat__head--photo .price-cat__no {
  opacity: 0.72;
  text-shadow: 0 1px 8px rgba(255,255,255,0.9);
}

.price-cat__head--photo .price-cat__eyebrow {
  text-shadow: 0 1px 6px rgba(255,255,255,0.95);
}

.price-cat__head--photo .price-cat__title {
  color: #14201A;
  text-shadow: 0 1px 10px rgba(255,255,255,0.95), 0 0 26px rgba(255,255,255,0.75);
}

.price-cat__head--photo .price-cat__desc {
  color: #46504A;
  font-weight: 500;
  text-shadow: 0 1px 8px rgba(255,255,255,0.95);
}

@media (max-width: 768px) {
  .price-cat__head--photo {
    margin-bottom: 30px;
    border-radius: 9px;
  }
  .price-cat__head-inner { padding: 36px 22px 32px; gap: 8px; }
  /* Phone screens are often viewed in bright light - fade the photo a
     little further so the heading never has to compete. */
  .price-cat__photo-bg { opacity: 0.24; }
}

/* =====================================================================
   v24: Services grid rebuilt - editorial cards, not photo tiles
   =====================================================================
   The old cards put white text on top of six different photos under a
   heavy dark gradient. Six unrelated images, each dimmed differently,
   read as muddy and cluttered - and the copy had to fight the picture
   behind it. Here the two jobs are separated: the photo is a clean,
   undimmed band at the top, and the words sit below it on white, where
   they are simply easy to read. A hairline frame, a serif numeral and
   plenty of air do the styling instead of overlays. */

.services__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  max-width: 1080px;
  margin: 0 auto;
}

.svc-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #E9EAE7;
  border-radius: 3px;             /* near-square corners read sharper */
  overflow: hidden;
  text-align: left;
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1),
              border-color 0.35s ease,
              box-shadow 0.35s ease;
}

/* Cascade in one by one once the section scrolls into view. */
.services.is-visible .svc-card { opacity: 1; transform: translateY(0); }
.svc-card:nth-child(1) { transition-delay: 0.04s; }
.svc-card:nth-child(2) { transition-delay: 0.12s; }
.svc-card:nth-child(3) { transition-delay: 0.20s; }
.svc-card:nth-child(4) { transition-delay: 0.28s; }
.svc-card:nth-child(5) { transition-delay: 0.36s; }
.svc-card:nth-child(6) { transition-delay: 0.44s; }

.svc-card:hover {
  border-color: #1E3A2B;
  box-shadow: 0 18px 40px rgba(20,20,18,0.10);
}

.svc-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F1F2F0;
}

.svc-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The six source photos were shot in different light. Pulling the
     saturation back and lifting them slightly makes them read as one
     considered set rather than six stock images. */
  filter: saturate(0.78) brightness(1.05) contrast(0.98);
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1), filter 0.5s ease;
}

.svc-card:hover .svc-card__media img {
  transform: scale(1.05);
  filter: saturate(0.95) brightness(1.02) contrast(1);
}

.svc-card__body {
  position: relative;
  flex: 1 1 auto;
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.svc-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.svc-card__no {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  color: #1E3A2B;
}

.svc-card__rule {
  width: 18px;
  height: 1px;
  background: #C9CFCB;
}

.svc-card__eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: #96A099;
}

.svc-card__title {
  margin: 0;
  font-family: 'Shippori Mincho', serif;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  color: #14201A;
  letter-spacing: 0.01em;
}

.svc-card__desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.85;
  color: #7A807C;
}

/* Sits bottom-right, appears on hover - a quiet hint that the card is a
   link, without adding a permanent button to every tile. */
.svc-card__arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  font-size: 15px;
  color: #1E3A2B;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.svc-card:hover .svc-card__arrow { opacity: 1; transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .svc-card { opacity: 1 !important; transform: none !important; transition: none !important; }
  .svc-card__media img, .svc-card__arrow { transition: none !important; }
}

@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .svc-card__title { font-size: 15px; }
  .svc-card__body { padding: 17px 16px 19px; }
}

@media (max-width: 768px) {
  /* Two per row: the whole line-up is visible in about a screen and a
     half, and each card is still wide enough for a readable title. */
  .services__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .svc-card__media { aspect-ratio: 5 / 4; }
  .svc-card__body { padding: 14px 13px 15px; gap: 7px; }
  .svc-card__no { font-size: 16px; }
  .svc-card__rule { width: 12px; }
  .svc-card__eyebrow { font-size: 9px; letter-spacing: 0.18em; }
  .svc-card__title { font-size: 13.5px; line-height: 1.45; }
  .svc-card__desc { font-size: 11px; line-height: 1.7; }
  /* Touch devices have no hover, so the arrow would never show. */
  .svc-card__arrow { display: none; }
}

/* =====================================================================
   v25: category heading - photo VISIBLE, tinted in the service colour
   =====================================================================
   v23 faded the photo so far back it read as nothing at all. The photo
   needs to be seen. So instead of washing it out with white, it is now
   shown at full strength under a gradient in that service's own colour:
   the picture stays clearly visible, white type on top is comfortably
   legible, and the colour of the block itself tells you which service
   you are looking at before you read a word. */

.price-cat__head--photo {
  border-bottom: 0;
  box-shadow: 0 16px 40px rgba(20,20,18,0.16);
}

.price-cat__photo-bg {
  opacity: 1;                 /* the photo is the point - show it */
}

/* Per-service veil. Dark enough for white text at every size, but the
   subject of the photo still reads through it. */
.price-cat--web  { --cat-veil-a: rgba(14,32,22,0.52); --cat-veil-b: rgba(14,32,22,0.80); }
.price-cat--sns  { --cat-veil-a: rgba(74,34,12,0.52); --cat-veil-b: rgba(74,34,12,0.80); }
.price-cat--line { --cat-veil-a: rgba(16,54,30,0.52); --cat-veil-b: rgba(16,54,30,0.80); }
.price-cat--meo  { --cat-veil-a: rgba(14,38,68,0.52); --cat-veil-b: rgba(14,38,68,0.80); }
.price-cat--ads  { --cat-veil-a: rgba(46,24,60,0.52); --cat-veil-b: rgba(46,24,60,0.80); }

.price-cat__veil {
  background: linear-gradient(180deg,
              var(--cat-veil-a, rgba(14,32,22,0.52)) 0%,
              var(--cat-veil-b, rgba(14,32,22,0.80)) 100%);
}

/* A solid colour bar across the top of the block: the fastest possible
   "this is a different service" signal while scrolling. */
.price-cat__head--photo::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  z-index: 3;
  background: var(--cat-accent);
}

.price-cat__head-inner { padding: 62px 40px 54px; }

/* Type flips to white now that it sits on a dark, tinted photo. */
.price-cat__head--photo .price-cat__no {
  color: #ffffff;
  opacity: 0.85;
  font-size: 44px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}

.price-cat__head--photo .price-cat__eyebrow {
  color: #ffffff;
  opacity: 0.92;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

.price-cat__head--photo .price-cat__title {
  color: #ffffff;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}

.price-cat__head--photo .price-cat__desc {
  color: rgba(255,255,255,0.90);
  font-weight: 400;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

/* Carry the colour beyond the header: the jump pill, the section's own
   left rule and the plan prices all already use --cat-accent, so the
   whole band now reads as one colour-coded unit. */
.price-cat::before { width: 6px; }

@media (max-width: 768px) {
  .price-cat__photo-bg { opacity: 1; }
  .price-cat__head-inner { padding: 42px 22px 38px; }
  .price-cat__head--photo .price-cat__no { font-size: 34px; }
  .price-cat__head--photo::after { height: 4px; }
}

/* ---------- v25: "there is more than the website plan" on the top page ---------- */
/* Each row carries the same accent colour that service uses on the Pricing
   page, so the colour coding starts here and stays consistent all the way
   through to the detail pages. */

.price-more {
  width: min(680px, 100%);
  margin: 34px auto 0;
  padding: 24px 26px 22px;
  background: #ffffff;
  border: 1px solid #DDE4DF;
  border-radius: 8px;
  text-align: center;
}

.price-more__lead {
  margin: 0 0 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #1E3A2B;
}

.price-more__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
}

.price-more__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px 9px 14px;
  border-left: 3px solid var(--row-accent, #1E3A2B);
  background: #F7F9F7;
  border-radius: 0 4px 4px 0;
  text-align: left;
}

.price-more__item--sns  { --row-accent: #C2703F; }
.price-more__item--line { --row-accent: #4A8C5C; }
.price-more__item--meo  { --row-accent: #3F6EA8; }
.price-more__item--ads  { --row-accent: #8A5FA8; }

.price-more__name {
  font-size: 12.5px;
  font-weight: 600;
  color: #23302A;
}

.price-more__price {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--row-accent, #1E3A2B);
  white-space: nowrap;
}

.price-more__note {
  margin: 16px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: #8a8a86;
}

@media (max-width: 768px) {
  .price-more { padding: 18px 16px 16px; margin-top: 26px; }
  .price-more__lead { font-size: 12.5px; margin-bottom: 13px; }
  .price-more__list { grid-template-columns: 1fr; gap: 7px; }
  .price-more__item { padding: 8px 11px 8px 12px; }
  .price-more__name, .price-more__price { font-size: 12px; }
  .price-more__note { font-size: 11.5px; }
}

/* =====================================================================
   v26: About page - accordions, founder profile, richer company block
   ===================================================================== */

.acc {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid #E4E7E4;
}

.acc__item { border-bottom: 1px solid #E4E7E4; }

.acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 4px;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.25s ease;
}

.acc__head:hover { background: #FAFBFA; }

.acc__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  object-fit: contain;
  opacity: 0.85;
}

.acc__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.acc__title {
  font-family: 'Shippori Mincho', serif;
  font-size: 17px;
  font-weight: 700;
  color: #14201A;
  letter-spacing: 0.02em;
}

.acc__summary {
  font-size: 13px;
  line-height: 1.7;
  color: #7A807C;
}

/* Plus sign that becomes a minus when open - drawn from two bars so it
   animates smoothly and needs no icon file. */
.acc__mark {
  position: relative;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}
.acc__mark::before,
.acc__mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: #1E3A2B;
  transform: translate(-50%, -50%);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
}
.acc__mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc__head.is-open .acc__mark::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.acc__panel {
  overflow: hidden;
  height: 0;
  transition: height 0.32s cubic-bezier(0.16,1,0.3,1);
}

.acc__body {
  margin: 0;
  padding: 2px 4px 26px 66px;   /* aligns under the title, clear of the icon */
  font-size: 13.5px;
  line-height: 2.05;
  color: #5A605C;
}

/* ---------- founder ---------- */
.founder {
  padding: 110px 56px;
  background: #F5F7F5;
  border-top: 1px solid #E4E9E5;
}

.founder__inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}

.founder__photo {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(20,20,18,0.16);
}

.founder__photo img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

.founder__body { display: flex; flex-direction: column; gap: 12px; }

.founder__eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.26em;
  font-weight: 700;
  color: #1E3A2B;
}

.founder__heading {
  margin: 0;
  font-family: 'Shippori Mincho', serif;
  font-size: 26px;
  font-weight: 700;
  color: #14201A;
}

.founder__name-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid #DDE3DF;
}

.founder__name {
  font-family: 'Shippori Mincho', serif;
  font-size: 21px;
  font-weight: 700;
  color: #1E3A2B;
}

.founder__reading { font-size: 12px; color: #8a908c; letter-spacing: 0.06em; }

.founder__meta { margin: 0; font-size: 12.5px; color: #7A807C; }

.founder__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 2.05;
  color: #4A504C;
}

.founder__quote {
  margin: 6px 0 0;
  padding: 14px 0 0 18px;
  border-left: 3px solid #1E3A2B;
  font-family: 'Shippori Mincho', serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  color: #1E3A2B;
}

/* ---------- company info: multi-value rows ---------- */
.info-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.info-list__item {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid #DFE4E1;
  border-radius: 999px;
  background: #F7F9F7;
  font-size: 12px;
  line-height: 1.5;
  color: #3D473F;
}

@media (max-width: 1024px) {
  .founder__inner { grid-template-columns: 250px 1fr; gap: 34px; }
  .founder__photo img { height: 320px; }
}

@media (max-width: 768px) {
  .acc__head { gap: 13px; padding: 18px 2px; }
  .acc__icon { width: 25px; height: 25px; }
  .acc__title { font-size: 15px; }
  .acc__summary { font-size: 12px; }
  .acc__body { padding: 2px 2px 22px 38px; font-size: 12.5px; line-height: 1.95; }

  .founder { padding: 64px 20px !important; }
  .founder__inner { grid-template-columns: 1fr; gap: 26px; }
  .founder__photo img { height: 300px; }
  .founder__heading { font-size: 22px; }
  .founder__name { font-size: 19px; }
  .founder__text { font-size: 12.5px; line-height: 1.95; }
  .founder__quote { font-size: 14.5px; padding-left: 14px; }

  .info-list__item { font-size: 11.5px; padding: 4px 10px; }
}

/* =====================================================================
   v27: Works page - a "実績" accordion on the cards that have a real case
   =====================================================================
   The category cards describe what we can build; the accordion underneath
   shows what we actually did. Keeping the case folded away means the grid
   still scans quickly, while anyone interested can open the proof in
   place rather than being sent to another page. */

.works-grid-card__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.works-case__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid #1E3A2B;
  border-radius: 999px;
  background: #1E3A2B;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.works-case__toggle:hover { background: #27503A; border-color: #27503A; }

/* plus that turns into a minus, drawn from two bars */
.works-case__toggle-mark {
  position: relative;
  width: 11px;
  height: 11px;
}
.works-case__toggle-mark::before,
.works-case__toggle-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
}
.works-case__toggle-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.works-case__toggle.is-open .works-case__toggle-mark::after { transform: translate(-50%,-50%) rotate(0deg); opacity: 0; }

.works-case {
  overflow: hidden;
  height: 0;
  transition: height 0.32s cubic-bezier(0.16,1,0.3,1);
}

.works-case__photo {
  margin: 18px 0 14px;
  border-radius: 6px;
  overflow: hidden;
  border-bottom: 3px solid #1E3A2B;
}

.works-case__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.works-case__client {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #F1F4F1;
  font-size: 11.5px;
  font-weight: 700;
  color: #1E3A2B;
}

.works-case__text {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.95;
  color: #5A605C;
}

.works-case__points {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.9;
  color: #6A706C;
}

/* Only the Izakaya case carries measured numbers, so the strip appears
   just where there is something real to report. */
.works-case__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
  padding: 14px 10px;
  border-radius: 6px;
  background: #F5F7F5;
  border: 1px solid #E4E9E5;
}

.works-case__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.works-case__stat-value {
  font-size: 15px;
  font-weight: 700;
  color: #1E3A2B;
  letter-spacing: -0.01em;
}

.works-case__stat-label {
  font-size: 10.5px;
  line-height: 1.4;
  color: #7A807C;
}

.works-case__stats-note {
  margin: 8px 0 0;
  font-size: 11px;
  color: #9AA09C;
  text-align: center;
}

/* The confidentiality line closes the whole section. */
.works-privacy-note {
  margin: 44px auto 0;
  max-width: 900px;
  font-size: 12.5px;
  line-height: 1.9;
  color: #8a8a86;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .works-case { transition: none !important; }
}

@media (max-width: 768px) {
  .works-grid-card__actions { gap: 10px; }
  .works-case__toggle { padding: 8px 14px; font-size: 12px; }
  .works-case__stats { padding: 12px 6px; gap: 5px; }
  .works-case__stat-value { font-size: 13.5px; }
  .works-case__stat-label { font-size: 9.5px; }
  .works-privacy-note { margin-top: 34px; font-size: 11.5px; }
}

/* ===== v28: Stage 1（1枚目）の整理 =====
   1. 日本語コピーとサービス名の羅列で内容が重複していたため、リード文から
      サービス名を外し、役割を分けた。
        英語見出し ＝ 姿勢／リード文 ＝ 約束／サービス名 ＝ できること
   2. 日本語を明朝体（Shippori Mincho）に統一。英字セリフと字面が揃う。
   3. 見出しを 52px → 46px に落とし、リード文を 15.5px → 17px に上げて
      サイズの落差をなだらかにした。
   4. Scroll のキューを下げ、コピーの塊から離した。                      */

.stage-intro__title {
  font-size: 46px;
  letter-spacing: 0.04em;
}

.stage-intro__lead {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: #1f1f1d;
}

.stage-intro__services {
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-size: 13px;
  line-height: 2.2;
  letter-spacing: 0.08em;
  color: #7d7d76;
}

.stage-intro__content { gap: 20px; }

.stage-intro__scroll {
  margin-top: 34px;
  font-size: 11.5px;
  letter-spacing: 0.26em;
}
.stage-intro__scroll > span:first-child {
  font-family: 'Cormorant Garamond', serif;
  font-size: 12.5px;
  letter-spacing: 0.28em;
}
.stage-intro__scroll-line { height: 40px; }

@media (max-width: 768px) {
  .stage-intro__title { font-size: 30px; letter-spacing: 0.03em; }
  .stage-intro__lead {
    font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
    font-size: 15px; line-height: 2; letter-spacing: 0.04em; color: #1f1f1d;
  }
  .stage-intro__services {
    font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
    font-size: 11.5px; line-height: 2.1; letter-spacing: 0.06em;
    color: #6f6f68; font-weight: 400;
  }
  .stage-intro__content { gap: 16px; }
  .stage-intro__scroll { margin-top: 24px; }
  .stage-intro__scroll-line { height: 32px; }
}

/* ===== v29: よくあるご質問ページ =====
   About/Works と同じアコーディオン（.acc）を流用し、アイコンの位置に
   「Q」を置いた FAQ 用の見た目だけを足す。開閉の挙動は main.js の
   .acc__head ハンドラがそのまま担当する。                             */

.faq-sec {
  padding: 20px 56px 110px;
  background: #FAFAFA;
}

.acc--faq .acc__q {
  flex: 0 0 auto;
  width: 30px;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  line-height: 1;
  color: #4D6652;
}

.acc--faq .acc__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.75;
}

.acc--faq .acc__head { padding: 24px 4px; align-items: flex-start; }
.acc--faq .acc__q    { margin-top: 3px; }
.acc--faq .acc__mark { margin-top: 3px; }

.faq-sec__note {
  max-width: 820px;
  margin: 34px auto 0;
  font-size: 13px;
  line-height: 1.9;
  color: #86867f;
  text-align: center;
}

@media (max-width: 768px) {
  .faq-sec { padding: 12px 20px 80px; }
  .acc--faq .acc__head { padding: 20px 2px; gap: 12px; }
  .acc--faq .acc__q { width: 20px; font-size: 17px; }
  .acc--faq .acc__title { font-size: 14.5px; line-height: 1.8; }
  .acc--faq .acc__body { padding-left: 34px; padding-right: 2px; font-size: 13px; }
  .faq-sec__note { font-size: 12px; }
}

/* ===== v30: ホームページ制作の3区分 =====
   買い切り／月額／保守運用を、それぞれ独立したまとまりとして見せる。   */

.plan-group {
  padding: 96px 56px;
  border-top: 1px solid #E4E9E5;
}
.plan-group--monthly { background: #F6F8F6; }
.plan-group--maint   { background: #FFFFFF; }

.plan-group__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin: 0 auto 46px;
  max-width: 720px;
}
.plan-group__eyebrow {
  font-size: 12px;
  letter-spacing: 0.24em;
  color: #4D6652;
  font-family: 'Cormorant Garamond', serif;
}
.plan-group__title {
  margin: 0;
  font-family: 'Shippori Mincho', serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #14201A;
}
.plan-group__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 2;
  color: #6C726E;
}
.plan-group__note {
  max-width: 900px;
  margin: 30px auto 0;
  font-size: 12px;
  line-height: 1.9;
  color: #8A908C;
  text-align: center;
}

/* the three "everything included" pills above the monthly plans */
.plan-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.plan-badge {
  padding: 7px 15px;
  border: 1px solid #C9D6CC;
  border-radius: 999px;
  background: #FFFFFF;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: #1E3A2B;
  white-space: nowrap;
}

/* ---------- monthly build plans ---------- */
.mplan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1020px;
  margin: 0 auto;
  align-items: start;
}
.mplan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 34px 26px 30px;
  background: #FFFFFF;
  border: 1px solid #E4E9E5;
  border-radius: 4px;
}
.mplan--featured {
  border-color: #1E3A2B;
  box-shadow: 0 10px 30px rgba(30,58,43,0.07);
}
.mplan__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: 999px;
  background: #1E3A2B;
  color: #FFFFFF;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.mplan__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  letter-spacing: 0.16em;
  color: #14201A;
  text-align: center;
}
.mplan__for {
  font-size: 12.5px;
  color: #7A807C;
  text-align: center;
  margin-top: -6px;
}
.mplan__terms {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #ECEFEC;
  margin-top: 6px;
}
.mplan__term {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 2px;
  border-bottom: 1px solid #ECEFEC;
}
.mplan__term--best {
  background: #F4F8F4;
  padding-left: 10px;
  padding-right: 10px;
}
.mplan__term-label {
  font-size: 12.5px;
  color: #6C726E;
  white-space: nowrap;
}
.mplan__term-price {
  font-family: 'Shippori Mincho', serif;
  font-size: 21px;
  font-weight: 700;
  color: #14201A;
  white-space: nowrap;
}
.mplan__term-price small {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 400;
  color: #7A807C;
  margin-left: 2px;
}
.mplan__term-tag {
  position: absolute;
  top: -8px;
  left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #C2703F;
  color: #FFFFFF;
  font-size: 10px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.mplan__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mplan__list li {
  position: relative;
  padding-left: 17px;
  font-size: 13px;
  line-height: 1.75;
  color: #4C524E;
}
.mplan__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4D6652;
}
.mplan__cta {
  margin-top: auto;
  justify-content: center;
  text-align: center;
}

/* ---------- maintenance ---------- */
.mnt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1020px;
  margin: 0 auto;
  align-items: start;
}
.mnt {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 34px 26px 30px;
  background: #F8FAF8;
  border: 1px solid #E4E9E5;
  border-radius: 4px;
}
.mnt--rec { border-color: #1E3A2B; background: #FFFFFF; }
.mnt__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: 999px;
  background: #1E3A2B;
  color: #FFFFFF;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.mnt__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  letter-spacing: 0.16em;
  color: #14201A;
  text-align: center;
}
.mnt__price {
  font-family: 'Shippori Mincho', serif;
  font-size: 27px;
  font-weight: 700;
  color: #14201A;
  text-align: center;
  padding-bottom: 14px;
  border-bottom: 1px solid #E4E9E5;
}
.mnt__price small {
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  color: #7A807C;
  margin-left: 3px;
}
.mnt__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mnt__list li {
  position: relative;
  padding-left: 17px;
  font-size: 13px;
  line-height: 1.75;
  color: #4C524E;
}
.mnt__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4D6652;
}

@media (max-width: 1024px) {
  .mplan-grid, .mnt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .plan-group { padding: 66px 20px; }
  .plan-group__title { font-size: 23px; }
  .plan-group__desc { font-size: 13px; }
  .plan-badge { font-size: 11px; padding: 6px 12px; }
  .mplan-grid, .mnt-grid { grid-template-columns: 1fr; gap: 26px; }
  .mplan, .mnt { padding: 30px 20px 26px; }
  .mplan__term-price { font-size: 19px; }
  .mnt__price { font-size: 24px; }
}

/* ===== v31: 買い切り／月額制／保守・運用のタブ切り替え ===== */

.plan-tabs { width: 100%; }

.plan-tabs__nav {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 480px;
  margin: 0 auto 26px;
  padding: 4px;
  background: #EFF2EF;
  border-radius: 999px;
}

.plan-tabs__btn {
  flex: 1 1 0;
  padding: 11px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: #6C726E;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease;
}
.plan-tabs__btn:hover { color: #1E3A2B; }
.plan-tabs__btn.is-active {
  background: #FFFFFF;
  color: #14201A;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(20,32,26,0.08);
}

.plan-tabs__desc {
  margin: 0 auto 22px;
  max-width: 640px;
  font-size: 13px;
  line-height: 1.95;
  color: #6C726E;
  text-align: center;
}

.plan-tabs__note {
  margin: 20px auto 0;
  max-width: 760px;
  font-size: 11.5px;
  line-height: 1.85;
  color: #8A908C;
  text-align: center;
}

.plan-tabs__panel[hidden] { display: none; }

@media (max-width: 768px) {
  .plan-tabs__nav { max-width: 100%; margin-bottom: 20px; }
  .plan-tabs__btn { font-size: 12.5px; padding: 10px 4px; }
  .plan-tabs__desc { font-size: 12.5px; margin-bottom: 18px; }
  .plan-tabs__note { font-size: 11px; }
}

/* ==========================================================================
   v32 - Wipe reveal accent (left-to-right)
   A gold accent bar grows from the left edge under every section eyebrow the
   moment it scrolls into view, then the eyebrow letters brighten behind it.
   Triggered by main.js adding `.is-wiped`; purely decorative, so a browser
   without IntersectionObserver simply shows the finished state.
   ========================================================================== */

:root {
  --wipe-gold: #C9A227;
  --wipe-gold-soft: #E4C766;
}

.section-heading__eyebrow,
.cta-home__eyebrow,
.subhero__eyebrow,
.simple-hero__eyebrow,
.founder__eyebrow,
.price-cat__eyebrow,
.price-hero__eyebrow,
.plan-group__eyebrow,
.hearing-session__eyebrow {
  position: relative;
}

/* .strengths__heading is a flex column with no align-items, so its children
   stretch the full width - and the accent bar stretched with them. Pin the
   eyebrow to the start so the bar matches the label instead of the column.
   Scoped deliberately: centred headings must keep their auto width. */
.strengths__heading .section-heading__eyebrow,
.founder__body .founder__eyebrow {
  align-self: flex-start;
}

/* The bar itself. Sits just under the eyebrow text, centred on the same
   inline box so it matches the label width rather than the whole column. */
.section-heading__eyebrow::after,
.cta-home__eyebrow::after,
.subhero__eyebrow::after,
.simple-hero__eyebrow::after,
.founder__eyebrow::after,
.price-hero__eyebrow::after,
.plan-group__eyebrow::after,
.hearing-session__eyebrow::after,
.price-cat__eyebrow::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wipe-gold) 0%, var(--wipe-gold-soft) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-heading__eyebrow.is-wiped::after,
.cta-home__eyebrow.is-wiped::after,
.subhero__eyebrow.is-wiped::after,
.simple-hero__eyebrow.is-wiped::after,
.founder__eyebrow.is-wiped::after,
.price-hero__eyebrow.is-wiped::after,
.plan-group__eyebrow.is-wiped::after,
.hearing-session__eyebrow.is-wiped::after,
.price-cat__eyebrow.is-wiped::after {
  transform: scaleX(1);
}

/* The pill variant already has a solid green background, so the bar would
   collide with the rounded edge - push it clear and match its width. */
.section-heading__eyebrow--pill::after,
.cta-home__eyebrow--pill::after {
  bottom: -11px;
}

/* Reusable standalone divider: <span class="wipe-bar"></span>
   Same motion, used where there is no eyebrow to hang the bar on. */
.wipe-bar {
  display: block;
  width: 100%;
  max-width: 240px;
  height: 4px;
  margin: 0 auto;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--wipe-gold) 0%, var(--wipe-gold-soft) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.wipe-bar.is-wiped {
  transform: scaleX(1);
}

/* Respect the OS "reduce motion" setting - show the finished bar, no sweep. */
@media (prefers-reduced-motion: reduce) {
  .section-heading__eyebrow::after,
  .cta-home__eyebrow::after,
  .subhero__eyebrow::after,
  .simple-hero__eyebrow::after,
  .founder__eyebrow::after,
  .price-cat__eyebrow::after,
  .price-hero__eyebrow::after,
  .plan-group__eyebrow::after,
  .hearing-session__eyebrow::after,
  .wipe-bar {
    transform: scaleX(1);
    transition: none;
  }
}

/* ==========================================================================
   v33 - Set plans
   料金ページの最初に置く「まずはこの4つから」。単品合計とセット価格を並べて、
   選ぶ判断を1画面で終わらせる。おすすめの1枚だけ枠と背景で持ち上げる。
   ========================================================================== */

.setplans {
  padding: 88px 56px 96px;
  background: #ffffff;
}

.setplans__heading {
  margin-bottom: 44px;
}

.setplans__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: stretch;
}

.setplan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 24px 26px;
  background: #ffffff;
  border: 1px solid #e3ddd3;
  border-radius: 14px;
}

/* おすすめの1枚。色ではなく、枠の濃さと背景のわずかな差で持ち上げる */
.setplan--pick {
  border: 2px solid #1e3a2b;
  background: #fbfaf8;
}

.setplan__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 5px 14px;
  border-radius: 999px;
  background: #1e3a2b;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.setplan__no {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: #C9A227;
  font-weight: 600;
  margin-bottom: 10px;
}

.setplan__name {
  margin: 0 0 8px;
  font-family: 'Shippori Mincho', serif;
  font-size: 17px;
  line-height: 1.55;
  color: #1a1a1a;
}

.setplan__lead {
  margin: 0 0 20px;
  font-size: 12.5px;
  line-height: 1.85;
  color: #6b645c;
}

.setplan__prices {
  padding: 16px 0;
  border-top: 1px solid #ececea;
  border-bottom: 1px solid #ececea;
  margin-bottom: 18px;
}

/* 単品合計。打ち消し線で、セットとの差を一目で見せる */
.setplan__single {
  margin: 0 0 10px;
  font-size: 11.5px;
  color: #8a8a86;
  text-decoration: line-through;
}

.setplan__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.setplan__row + .setplan__row {
  margin-top: 8px;
}

.setplan__label {
  flex: none;
  font-size: 11.5px;
  color: #6b645c;
}

.setplan__price {
  font-size: 19px;
  font-weight: 600;
  color: #1e3a2b;
  letter-spacing: 0.01em;
}

.setplan__price--sub {
  font-size: 16px;
}

.setplan__per {
  font-size: 11px;
  font-weight: 400;
  color: #6b645c;
  margin-left: 1px;
}

.setplan__items {
  flex: 1 1 auto;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.setplan__item {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.9;
  color: #4a4a48;
}

.setplan__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C9A227;
}

.setplan__cta {
  display: block;
  padding: 12px;
  border: 1px solid #1e3a2b;
  border-radius: 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #1e3a2b;
  transition: background 0.25s ease, color 0.25s ease;
}

.setplan__cta:hover {
  background: #1e3a2b;
  color: #ffffff;
}

.setplan--pick .setplan__cta {
  background: #1e3a2b;
  color: #ffffff;
}

.setplan--pick .setplan__cta:hover {
  background: #132a1f;
}

.setplans__note {
  margin: 34px auto 0;
  max-width: 760px;
  font-size: 11.5px;
  line-height: 1.9;
  color: #8a908c;
  text-align: center;
}

.setplans__link {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
}

.setplans__link a {
  color: #1e3a2b;
  border-bottom: 1px solid #d8d8d4;
  padding-bottom: 2px;
}

@media (max-width: 1080px) {
  .setplans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

@media (max-width: 768px) {
  .setplans { padding: 60px 20px 68px; }
  .setplans__grid { grid-template-columns: 1fr; gap: 26px; }
  .setplan { padding: 28px 20px 24px; }
  .setplan__name { font-size: 16px; }
  .setplans__note { font-size: 11px; }
}


/* ---- footer legal links (v34) ---- */
.footer__legal { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.footer__legal a { font-size: 11.5px; color: #a3a39f; text-decoration: none; }
.footer__legal a:hover { color: #6f6f6b; }
@media (max-width: 560px) {
  .footer__legal { gap: 10px 14px; }
  .footer__legal a { font-size: 11px; }
}