/* ========== 友松会計事務所 トップページ ========== */
:root {
  --green-700: #07A33E;      /* dark green hero band */
  --green-600: #07A33E;      /* primary green */
  --green-500: #07A33E;      /* slightly brighter */
  --lime-400: #8EC31F;       /* hero box / yellow-green */
  --lime-300: #8EC31F;       /* dot color */
  --blue-cta: #4264EC;       /* freee badge blue (Figma) */
  --yellow-mail: #EAD37C;    /* mail circle yellow (Figma) */
  --cream-100: #fbeab7;      /* CTA band cream — matches arch.svg fill */
  --cream-200: #F8DDA1;
  --ink-900: #333333;
  --ink-700: #333333;
  --ink-500: #666;
  --ink-400: #888;
  --line: #E5E5E5;
  --bg-gray: #ECECEC;
  --bg-soft: #F4F4F4;
  --bg-tint: url("../assets/section-bg.png") center / cover no-repeat, #F2F2F2;
  --shadow-card: 0 2px 14px rgba(0,0,0,0.06);
  --shadow-card-lg: 0 8px 28px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; background: #fff; }

body {
  font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-feature-settings: "palt";
  color: var(--ink-900);
  background: transparent;  /* page-decor (body::before z-index:-1) を見せるため */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;     /* mail icon may bleed 43px past viewport-right at wide screens */
  position: relative;
}

/* ========== Page-level decorative background (per-page SVG) ========== */
/* body に .page-service / .page-about を付与し、::before で装飾SVGを敷く。
   ヒーローに被せるレベル（z-index:1）で配置。pointer-events:none でクリック透過。
   ヒーロー本体パーツ（logo-box / greenbox / photo）は z-index:2 で前面に出す。 */
body.page-service::before,
body.page-about::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: contain;
}
body.page-service::before {
  /* ヒーローに被るレベル（写真より下、greenbox 下端付近） */
  top: 500px;
  right: -40px;
  width: 720px;
  aspect-ratio: 1238.66 / 1321.85;
  background-image: url('../assets/service-background.svg');
  background-position: top right;
}
body.page-about::before {
  /* about: ヒーロー下端付近から全面に散らす */
  top: 500px;
  left: 0;
  right: 0;
  width: 100%;
  aspect-ratio: 2353.51 / 2608.69;
  background-image: url('../assets/about-background.svg');
  background-position: center top;
}
/* ヒーロー本体パーツは装飾SVGより上に出す（ヒーロー画像/緑ボックスを覆わせない） */
.hero-stage--sub .hero-greenbox,
.hero-stage--sub .hero-photo {
  z-index: 3;
}
/* logo-box は固定ヘッダー(z:40)よりさらに上に置き、ヘッダー越しに見える「白いロゴカード」を成立させる
   （Top Page と同じ z:42 に揃える） */
.hero-stage--sub .logo-box {
  z-index: 42;
}
/* 各セクション内の写真も装飾SVGより前面に出す（SVGが写真を覆わせない） */
.svc-intro-photo,
.about-message-photo {
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) {
  body.page-service::before {
    top: 380px;
    width: 90%;
    right: -20px;
  }
  body.page-about::before {
    top: 380px;
  }
}

/* SP-only blocks: hidden on desktop, shown on mobile */
.sp-header,
.sp-hero,
.sp-menu { display: none; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }

/* ========== Hero Stage (layered) ========== */
/* Full-width up to 1920. Above that, centers (no further scaling).
   Inner content (logo / card / dots) is anchored to a centered 1440
   column at >=1441px so typography stays at design scale. */
.hero-stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  height: 880px;          /* fits 135 + 705 + breathing */
  background: #fff;
  overflow: hidden;
}

/* ----- Layer 1: nav bar (white base, slim, full width — FIXED at top) ----- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: #fff;
  height: 75px;
  box-shadow: none;
  transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 28px;
  padding: 0 130px 0 32px;   /* right padding clears the yellow contact circle */
  max-width: 1440px;
  margin: 0 auto;
}
/* Small logo inside fixed nav. At top of page it sits behind .logo-box (z:42)
   so the larger logo card shows. After scroll, logo-box scrolls away and this
   smaller logo becomes the persistent brand mark. */
.nav-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
}
.nav-logo img {
  height: 44px;
  width: auto;
  display: block;
}
.nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 32px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.nav a {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-700);
  position: relative;
  padding: 4px 0;
  transition: color .15s;
  white-space: nowrap;
}
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  background: var(--green-600);
}
.nav a:hover { color: var(--green-600); }

/* Mail circle: oversized, anchored top-right of nav (Figma exact) */
/* Circle is 146x128 but cropped: 43px hidden right, 29px hidden top.
   Visible portion is 103×99 (right & bottom edges). The icon should
   sit in the visible portion's center, not the full circle's center. */
.contact-btn {
  /* Anchor to the viewport (not header-inner) so the icon stays flush with
     the page's right edge even at viewports >1920px where hero-stage caps. */
  position: fixed;
  top: -29px;
  right: -43px;
  width: 146px;
  height: 128px;
  border-radius: 50%;
  background: var(--yellow-mail);
  z-index: 50;
  flex-shrink: 0;
  transition: background .15s;
  /* Crop the rounded bottom 24px and right 43px so the icon reads as a
     flat tab attached to the top-right corner. */
  clip-path: inset(0 43px 24px 0);
}
.contact-btn:hover { background: #DAC36A; }
.contact-btn svg {
  position: absolute;
  left: 31px;
  top: 50px;
  width: 40px;
  height: auto;
}

/* ----- Layer 2: logo box on white — 135px tall white pad with logo (67px) centered ----- */
/* The white logo area is 135px tall and overflows the 75px nav bar
   (sticks out 30px above and 30px below). The white background extends
   beyond the nav bar so the green hero box behind it is hidden in this
   region. Inside, the actual logo artwork is 67px tall, vertically
   centered — leaving (135-67)/2 = 34px white padding above and below. */
/* ----- Layer 2: logo card — floating panel at top-left, larger than nav ----- */
/* Sits on top of the nav, extending 30px below it onto the green hero. */
.logo-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 135px;
  background: #fff;
  padding-left: 32px;
  display: flex;
  align-items: center;
  z-index: 42;        /* above fixed .site-header (z:40) so the larger logo card
                         covers the small nav-logo while in the hero stage */
}
.logo-box .logo-img {
  height: 67px;
  width: auto;
  display: block;
}
.logo-img { height: 67px; width: auto; max-width: 100%; display: block; }
.footer-logo-img { width: 240px; max-width: 100%; height: auto; display: block; margin-bottom: 4px; }

/* ----- Layer 3: lime green hero box — starts BELOW logo pad (135px) ----- */
/* Width is fluid (% of hero-stage which is itself capped at 1920) */
.hero-greenbox {
  position: absolute;
  top: 135px;            /* under the logo card's bottom edge */
  left: 0;
  width: 54.67%;         /* 600/1440 = Figma proportion */
  min-width: 480px;
  height: 705px;         /* Figma exact */
  background: var(--lime-400);
  z-index: 1;            /* bottom layer */
}

/* ----- Layer 4: photo box — Figma proportion 1017/1440, fluid width ----- */
.hero-photo {
  position: absolute;
  top: 75px;             /* directly under the nav bar */
  right: 0;              /* flush to right edge */
  width: 70.625%;        /* 1017/1440 = Figma proportion */
  min-width: 720px;
  height: 685px;         /* Figma exact */
  z-index: 2;            /* on top of green */
  background-image: url('../assets/main001.png');
  background-size: cover;
  background-position: center;
}
.hero-photo::after { content: none; }

/* ----- Layer 5: copy card (centered on green box) ----- */
.hero-card {
  position: absolute;
  left: 8%;
  top: 250px;
  width: 575px;
  height: 360px;
  background: rgba(255, 255, 255, 0.88);
  padding: 40px 48px;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.10);
  z-index: 5;            /* top layer */
  text-align: left;
}
.hero-card h1 {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--ink-900);
  margin-bottom: 18px;
  text-align: center;
}
.hero-card h1 span {
  /* unused */
}
.hero-card .lead {
  font-size: 21px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 64px;
  text-align: center;
}
.badge-bar {
  display: inline-block;
  background: var(--blue-cta);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 11px 28px;
  border-radius: 6px;
  margin: 0 0 14px;
  letter-spacing: 0.01em;
  text-align: center;
  width: fit-content;
}
.hero-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  position: relative;
}
.chip {
  background: #fff;
  border: 1px solid #DDD;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13px;
  color: var(--ink-900);
  font-weight: 700;
  white-space: nowrap;
}
.hero-seal {
  position: absolute;
  right: 24px;
  bottom: 39px;
  width: 120px;
  height: auto;
  max-width: none;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.08));
}

/* ----- Layer 6: pagination dots (yellow + white, Figma) ----- */
.hero-dots {
  position: absolute;
  left: 8%;
  bottom: 240px;
  display: flex;
  gap: 8px;
  z-index: 6;
}
.hero-dots span {
  width: 22px;
  height: 16px;
  background: #fff;
  border-radius: 0;
  opacity: 1;
}
.hero-dots span:first-child {
  background: rgba(255, 255, 255, 0.6);
}

/* ========== Section commons ========== */
section { padding: 100px 0; }
h2.heading-eyebrow {
  text-align: center;
  margin-bottom: 64px;
  font-weight: 700;
}
.heading-eyebrow .label {
  display: inline-block;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.5;
  color: #6F6E6F;
  position: relative;
  padding: 12px 4px;
}
.heading-eyebrow .label .first { color: #231815; }
/* ========== H3 banner heading (lime band + right-end mark image) ========== */
.heading-banner {
  display: flex;
  align-items: stretch;
  margin: 0 0 20px;
  font-family: "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #333333;
  height: 56px;       /* fixed height across both parts */
  min-width: 400px;
  width: max-content; /* expand to fit nowrap text */
}
.heading-banner .heading-banner__text {
  display: flex;
  align-items: center;
  background: rgba(142, 195, 31, 0.65);
  padding: 0 16px;
  border-radius: 6px 0 0 6px;
  flex: 1;
  white-space: nowrap;
  height: 60px;
  letter-spacing: -0.5px;
}
.heading-banner::after {
  content: "";
  display: block;
  width: 65px;
  height: 56px;
  flex-shrink: 0;
  background: url("../assets/h3-mark-end.png") no-repeat left center / contain;
}
.heading-eyebrow .label::before,
.heading-eyebrow .label::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 3px;
  background: #60AF69;
}
/* top line: from right to center */
.heading-eyebrow .label::before { top: 5px; right: 0; }
/* bottom line: from left to center */
.heading-eyebrow .label::after { bottom: 0; left: 0; }
.heading-eyebrow .ja {
  display: block;
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-500);
  letter-spacing: 0.1em;
}

/* ========== Concept ========== */
.concept {
  background: #fff;
  padding: 100px 0 150px;
}
.concept-frame {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  border: 1px solid #EFEFEF;
  border-radius: 10px;
  background: #fff;
  padding-top: 30px;
}
/* Eyebrow heading: anchored ABOVE the frame, with its center on the top border */
.concept-eyebrow {
  position: absolute;
  top: -28px;             /* lift heading so its vertical center sits on the top border */
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  background: #fff;
  padding: 0 28px;
  z-index: 2;
}
.concept-eyebrow .label {
  padding: 6px 4px;            /* tighter so the label sits cleanly on the border */
}
.concept-card {
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 66px 56px 80px;
  text-align: center;
  font-family: "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 700;
}
.concept-card .pull {
  display: inline-block;
  background: linear-gradient(transparent 60%, #F8E08A 60%);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.14em;
  padding: 0 8px;
  margin-bottom: 8px;
}
.concept-card .pull-tight-comma {
  display: inline-block;
  margin-right: -0.16em;
}
.concept-card p {
  font-size: 24px;
  color: var(--ink-700);
  line-height: 2;
  letter-spacing: -1px;
}
.concept-card p strong {
  font-weight: 700;
  color: var(--ink-900);
}

/* ========== Challenge ========== */
.challenge {
  background: var(--bg-tint);
  position: relative;
  overflow: hidden;
}
.challenge::before {
  content: none;
}
.challenge-grid {
  position: relative;
  margin-top: 80px;        /* gap from section heading to top of photo */
  padding-top: 60px;        /* card sits 60px below grid top; photo absolute top:0 */
  min-height: 600px;
}
.challenge-photo {
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);  /* break out of .wrap, stick to viewport right edge */
  width: 51vw;
  height: 460px;
  background:
    repeating-linear-gradient(135deg, #c7c7c7 0 14px, #bdbdbd 14px 28px);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  z-index: 2;               /* photo on top */
}
.challenge-card {
  position: relative;
  z-index: 1;                /* card behind */
  margin-top: 0;
  margin-left: -40px;        /* extend toward / past left edge of .wrap */
  width: 64%;
  background: #fff;
  padding: 40px 35px 110px;
  border-radius: 6px;
  box-shadow: var(--shadow-card-lg);
}
/* photo is absolutely-positioned and out of normal flow; align it to grid top so card's margin-top creates the 60px offset */
.challenge-photo {
  top: 0;
}
.tag-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--lime-300);
  color: var(--ink-900);
  font-weight: 700;
  font-size: 18px;
  padding: 12px 18px;
  margin: -60px -54px 32px;
  position: relative;
  border-radius: 4px;
}
.tag-banner .arrow-mark {
  width: 40px; height: 40px;
  flex-shrink: 0;
}
.challenge-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.challenge-list li {
  font-size: 18px;
  color: var(--ink-700);
  padding: 3px 0px;
  line-height: 1.5;
  margin-left: 15px;
  position: relative;
}
.challenge-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  margin-left: -8px;
  color: var(--ink-700);
}
.challenge-card .note {
  font-size: 18px;
  color: var(--ink-500);
  padding: 10px 10px;
  border-top: 1px solid #EEE;
}

/* ========== Solution ========== */
.solution {
  background: #fff;
  padding-top: 100px;
  padding-bottom: 150px;
}
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  max-width: 1040px;
  margin: 0 auto;
  padding-top: 40px;
}
.ba-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ba-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 24px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #333333;
  font-family: "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  border-radius: 4px;
}
.ba-head.before { background: var(--lime-400); }
.ba-head.after { background: var(--green-600); }
.ba-head .chev { width: 18px; height: 22px; opacity: 0.85; flex-shrink: 0; }
.ba-body {
  background: #fff;
  border: 1px solid #EFEFEF;
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  padding: 40px 28px 36px;
  display: flex;
  flex-direction: column;
  gap: 27px;
}
.ba-row {
  background: #ECECEC;
  border-radius: 10px;
  padding: 8px 18px;
  font-size: 18px;
  color: var(--ink-700);
  font-weight: 500;
}
.solution-note {
  text-align: right;
  max-width: 940px;
  margin: 0px 50px 0 auto;
  font-size: 18px;
  color: var(--ink-500);
}

/* ========== Process ========== */
.process {
  background: var(--bg-tint);
  position: relative;
  overflow: hidden;
  padding-top: 80px;
  padding-bottom: 140px;
}
.process::before {
  content: none;
}
.process-grid {
  position: relative;
  margin-top: 80px;        /* gap from section heading to top of text card */
  padding-top: 70px;        /* photo sits 70px below grid top; text card absolute top:0 */
}
.process-body {
  position: absolute;
  top: 0;                    /* text card at top */
  right: -40px;              /* extend toward / past right edge of .wrap */
  z-index: 1;                /* card behind */
  width: 70%;                /* wider card */
  background: #fff;
  padding: 65px 52px 42px 290px;  /* text content sits right of photo right edge */
  border-radius: 6px;
  box-shadow: var(--shadow-card-lg);
}
.process-photo {
  position: relative;        /* photo in normal flow under padding-top:60px */
  margin-left: -200px;       /* extend further past left edge of .wrap */
  width: 72%;
  height: 520px;
  background:
    repeating-linear-gradient(135deg, #c7c7c7 0 14px, #bdbdbd 14px 28px);
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #444;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.08em;
  z-index: 2;                /* photo on top */
}
.process-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--lime-300);
  color: var(--ink-900);
  font-weight: 700;
  font-size: 18px;
  padding: 12px 18px;
  margin: -48px -52px 22px 0;
}
.process-banner .arrow-mark { width: 40px; height: 40px; }
.page-top .heading-banner {
  width: 450px;
  max-width: 450px;
  flex: 0 0 450px;
  min-width: 0;
  height: 60px;
  background: url("../assets/h2@2x.png") no-repeat center / 100% 100%;
  border-radius: 6px;
  overflow: hidden;
}
.page-top .heading-banner .heading-banner__text {
  flex: 0 0 450px;
  width: 450px;
  box-sizing: border-box;
  height: 60px;
  background: transparent;
  border-radius: 0;
  padding: 0 28px;
}
.page-top .heading-banner::after {
  content: none;
}
.process-step { padding: 17px 6px; }
.process-step h4 {
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 0;
  color: var(--ink-900);
}
.process-step ul {
  list-style: none;
  padding-left: 14px;
}
.process-step li {
  font-size: 16px;
  color: var(--ink-700);
  padding: 0 0 6px;
  line-height: 1;
  position: relative;
}
.process-step li::before {
  content: "・";
  position: absolute;
  left: -14px;
}

/* ========== Blog ========== */
.blog {
  background: #fff;
}
.blog-tag {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  background: var(--lime-300);
  color: var(--ink-900);
  font-weight: 700;
  font-size: 18px;
  padding: 12px 18px;
  width: 300px;
  margin-bottom: 32px;
}
.blog-tag .arrow-mark { width: 34px; height: 34px; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.blog-card {
  border: 1px solid #DDD;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.blog-thumb {
  aspect-ratio: 1 / 1;
  background:
    repeating-linear-gradient(135deg, #f0f0f0 0 12px, #e8e8e8 12px 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  border-bottom: 1px solid #DDD;
}
.blog-meta { padding: 20px 20px 22px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.blog-meta h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.5;
}
.blog-meta .date {
  font-size: 12px;
  color: var(--ink-500);
  font-family: ui-monospace, monospace;
}
.blog-meta .excerpt {
  font-size: 12px;
  color: var(--ink-400);
  line-height: 1.7;
  letter-spacing: 0.05em;
  /* dashed lines like wireframe */
  background-image: repeating-linear-gradient(transparent 0 14px, #BBB 14px 16px, transparent 16px 30px);
  background-size: 100% 30px;
  height: 60px;
  color: transparent;
  margin-top: 2px;
}
.more-pill {
  margin: 36px 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lime-300);
  color: var(--ink-900);
  font-weight: 600;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 999px;
  float: right;
  cursor: pointer;
  transition: background .15s;
}
.more-pill:hover { background: var(--lime-400); }

/* ========== CTA Band ========== */
.cta-band {
  background: var(--cream-100);
  position: relative;
  padding: 100px 0 110px;
  overflow: visible;    /* keep arch ::before visible above band */
  margin-top: 100px;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: -90px;
  left: 0;
  width: 100%;          /* match band width — no horizontal overflow */
  height: 91px;
  background-image: url('../assets/arch.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  z-index: 0;
}
.cta-card {
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  padding: 52px 56px 48px;
  text-align: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.cta-card h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.cta-card h2::before { content: "＼"; color: var(--green-600); font-weight: 800; }
.cta-card h2::after  { content: "／"; color: var(--green-600); font-weight: 800; }
.cta-card .desc {
  font-size: 20px;
  color: var(--ink-700);
  margin-bottom: 20px;
}
.cta-button {
  display: inline-block;
  background: var(--green-600);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 13px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  transition: background .15s, transform .15s;
  width: 370px;
  height: auto;
  line-height: 1.5;
}
.cta-button:hover { background: var(--green-500); transform: translateY(-1px); }
.cta-card .small {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  color: var(--ink-500);
}
.cta-band > .wrap {
  position: relative;
  padding-bottom: 0;
}
.cta-illust {
  position: absolute;
  left: calc(50% + 200px);
  bottom: 0;
  width: 210px;
  height: auto;
  z-index: 5;
  pointer-events: none;
}
.cta-illust img {
  width: 100%;
  height: auto;
  display: block;
}

/* ========== Footer ========== */
.footer {
  background: #fff;
  padding: 80px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: center;
  padding-bottom: 60px;
}
.footer-info .logo .name { font-size: 22px; }
.footer-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.footer-info .addr {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-700);
}
.footer-map {
  height: 240px;
  background: #B0B0B0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.1em;
}
/* サブページ用: マップ無しの中央寄せフッター */
.footer--simple .footer-info--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 60px;
}
.footer--simple .footer-info--center .addr { margin-top: 12px; }
.copyright {
  background: var(--green-600);
  color: #fff;
  text-align: center;
  padding: 14px;
  font-size: 12px;
  letter-spacing: 0.05em;
  font-family: ui-monospace, Menlo, monospace;
}

/* ============================================================
   Wide screens (≥1441px): hero spans up to 1920px.
   - Logo / hero card / dots: anchored to the centered 1440 column
     (matches Figma layout — logo aligned with nav left edge).
   - Mail icon (contact-btn) is anchored to the centered 1440 column's
     right edge (so it doesn't fly off to the viewport edge).
   ============================================================ */
@media (min-width: 1441px) {
  /* Allow logo and mail icon to extend past hero-stage to viewport edges */
  .hero-stage { overflow: visible; }

  /* Logo: pinned to viewport-LEFT edge (works at any viewport width) */
  .logo-box  { left: calc((100vw - 100%) / -2); }

  /* Mail icon: pinned to viewport-RIGHT edge (preserves the original
     43px-clipped-past-edge look from the 1440 design) */
  .contact-btn { right: calc((100vw - 100%) / -2 - 43px); }

  /* Hero card and dots stay at 8% inside the centered 1440 column */
  .hero-card { left: calc((100% - 1440px) / 2 + 115px); }
  .hero-dots { left: calc((100% - 1440px) / 2 + 115px); }
}

/* ============================================================
   Tablet (≤1180px): scale down hero, keep desktop layout
   ============================================================ */
@media (max-width: 1180px) {
  .wrap { padding: 0 24px; }

  /* Hero: shrink internal absolutely-positioned layers proportionally */
  .hero-stage { height: auto; min-height: 720px; }
  .header-inner { padding: 0 110px 0 280px; }
  .logo-box { width: 280px; height: 110px; padding-left: 24px; }
  .logo-box .logo-img { height: 56px; }
  .hero-greenbox { top: 110px; width: 48vw; height: 600px; }
  .hero-photo { width: 78vw; height: 580px; }
  .hero-card {
    left: 4%;
    top: 180px;
    width: 460px;
    height: auto;
    padding: 28px 32px 32px;
  }
  .hero-card h1 { font-size: 32px; margin-bottom: 12px; }
  .hero-card .lead { font-size: 17px; margin-bottom: 28px; }
  .badge-bar {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    padding: 10px 16px;
    text-align: center;
    white-space: normal;
    line-height: 1.4;
  }
  .hero-row { flex-wrap: wrap; gap: 8px; }
  .chip { font-size: 12px; padding: 8px 14px; }
  .hero-seal { width: 90px; right: 16px; bottom: 18px; }
  .hero-dots { bottom: 50px; left: 4%; }

  /* Sections inner blocks: keep but tighten */
  section { padding: 80px 0; }
  .challenge-grid, .process-grid { min-height: auto; }
  .challenge-photo { right: 0; width: 60%; height: 380px; }
  .challenge-card { margin-left: 0; width: 60%; padding: 36px 32px; }
  .process-body { right: 0; width: 75%; padding: 40px 36px 36px 200px; }
  .process-photo { margin-left: 0; width: 60%; height: 460px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Mobile / small tablet (≤900px): switch to SP layout (B案 + dots)
   ============================================================ */
@media (max-width: 900px) {
  .wrap { padding: 0 20px; }

  /* Hide desktop hero / header */
  .hero-stage { display: none; }

  /* Show SP header + hero + menu */
  .sp-header,
  .sp-hero { display: block; }
  .sp-menu { display: flex; }

  /* SP Header */
  .sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .sp-logo {
    display: flex;
    align-items: center;
    height: 44px;
  }
  .sp-logo img {
    height: 44px;
    width: auto;
  }
  .sp-burger {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: var(--yellow-mail);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    border: 0;
  }
  .sp-burger span {
    width: 20px; height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease;
  }
  .sp-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .sp-burger.is-open span:nth-child(2) { opacity: 0; }
  .sp-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* SP slide-down menu drawer */
  .sp-menu {
    position: fixed;
    top: 68px;        /* under sp-header (44 logo + 12*2 padding) */
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 49;
    padding: 24px 16px 40px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transform: translateY(-110%);
    transition: transform .3s ease;
    overflow-y: auto;
  }
  .sp-menu.is-open { transform: translateY(0); }
  .sp-menu a {
    padding: 18px 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-900);
    border-bottom: 1px solid var(--line);
  }
  .sp-menu a.sp-menu-cta {
    margin-top: 24px;
    background: var(--green-600);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    border-bottom: 0;
    padding: 16px;
  }
  body.no-scroll { overflow: hidden; }

  /* SP Hero (B案 + ドット) */
  .sp-hero {
    position: relative;
    min-height: 0;
    background: #fff;
    overflow: hidden;
    display: block;
  }
  .sp-hero-top {
    min-height: 720px;
    background: transparent;
    padding: 88px 24px 54px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .sp-eyebrow {
    display: inline-block;
    background: #fff;
    color: var(--green-700);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 5px 12px;
    border-radius: 4px;
    margin-bottom: 16px;
  }
  .sp-h1 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.4;
    color: #fff;
    margin-bottom: 12px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.15);
    letter-spacing: 0.02em;
  }
  .sp-lead {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 18px;
    line-height: 1.7;
    text-shadow: 0 1px 4px rgba(0,0,0,0.1);
  }
  .sp-badge-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.88);
    border-radius: 8px;
    padding: 8px 14px 8px 10px;
    margin-bottom: 16px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.07);
    width: fit-content;
    max-width: 100%;
  }
  .sp-badge-img {
    width: 46px;
    height: auto;
    flex-shrink: 0;
  }
  .sp-badge-txt {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ink-900);
  }
  .sp-badge-txt b { color: var(--blue-cta); }
  .sp-cta-pri {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--green-700);
    text-align: center;
    width: min(100%, 420px);
    min-width: 310px;
    padding: 13px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
    letter-spacing: 0.04em;
  }
  .sp-dots {
    display: none;
    gap: 6px;
    margin-top: 18px;
    opacity: 0.85;
  }
  .sp-dots span {
    width: 22px;
    height: 5px;
    background: rgba(255,255,255,0.55);
    border-radius: 3px;
  }
  .sp-dots span.on { background: #fff; }
  .sp-hero-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 56px;
    left: 0;
    z-index: 0;
    width: 100%;
    margin: 0;
    aspect-ratio: auto;
    background: url('../assets/main001.png') center center / cover no-repeat, #999;
    border-radius: 0;
    box-shadow: none;
  }
  .sp-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(142,195,31,0.72) 0%, rgba(142,195,31,0.46) 44%, rgba(7,163,62,0.62) 100%),
      linear-gradient(90deg, rgba(7,163,62,0.36) 0%, rgba(7,163,62,0.10) 52%, rgba(7,163,62,0.18) 100%);
  }
  .sp-sub-cta {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 18px;
    background: rgba(255,255,255,0.94);
    font-size: 14px;
    color: var(--green-700);
    font-weight: 700;
    border-bottom: 1px solid rgba(0,0,0,0.06);
  }
  .sp-sub-cta .arrow { color: var(--lime-400); font-size: 16px; }

  /* Sections */
  section { padding: 56px 0; }
  h2.heading-eyebrow { margin-bottom: 36px; }
  .heading-eyebrow .label { font-size: 24px; padding: 10px 4px; }
  .heading-eyebrow .ja { margin-top: 12px; font-size: 12px; }

  /* Concept */
  .concept-frame { padding-top: 24px; }
  .concept-card { padding: 64px 24px 48px; }
  .concept-card .pull { font-size: 20px; line-height: 1.5; }
  .concept-card p { font-size: 14px; line-height: 1.9; }
  .concept-card p br { display: none; }

  /* Challenge: 写真はカード背面のアクセントにする */
  .challenge-grid {
    display: block;
    position: relative;
    padding-top: 28px;
    margin-top: 32px;
  }
  .challenge-photo {
    position: absolute;
    right: -10px;
    top: -34px;
    width: 150px;
    height: 150px;
    margin: 0;
    background:
      linear-gradient(135deg, rgba(142,195,31,0.18), rgba(7,163,62,0.10));
    border: 2px solid rgba(142,195,31,0.28);
    border-radius: 28px;
    box-shadow: none;
    opacity: 1;
    color: transparent;
    font-size: 0;
    z-index: 0;
    transform: rotate(8deg);
  }
  .challenge-card {
    position: relative;
    z-index: 1;
    width: 92%;
    margin: 0 auto 74px;
    padding: 32px 24px 28px;
  }
  .heading-banner {
    min-width: 0;
    width: 100%;
    height: 44px;
    font-size: 16px;
    margin-bottom: 20px;
  }
  .heading-banner .heading-banner__text { padding: 0 16px; height: 44px; }
  .heading-banner::after { width: 50px; height: 44px; }
  .page-top .heading-banner {
    width: 100%;
    max-width: none;
    flex: none;
    height: 44px;
  }
  .page-top .heading-banner .heading-banner__text {
    flex: 1 1 auto;
    width: auto;
    height: 44px;
  }
  .page-top .heading-banner::after {
    width: 50px;
    height: 44px;
    margin-left: -2px;
    background-size: 50px 44px;
  }
  .challenge-list li { font-size: 14px; }

  /* Solution: 縦積み */
  .ba-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .ba-head { padding: 14px 18px; font-size: 20px; }
  .ba-body { padding: 22px 18px 24px; gap: 10px; }
  .ba-row { font-size: 14px; padding: 10px 18px; }

  /* Process: 写真はカード背面のアクセントにする */
  .process-grid {
    display: block;
    position: relative;
    padding-top: 42px;
    margin-top: 32px;
    min-height: auto;
  }
  .process-photo {
    position: absolute;
    right: -12px;
    bottom: -34px;
    width: 160px;
    height: 160px;
    margin: 0;
    background:
      linear-gradient(135deg, rgba(142,195,31,0.20), rgba(7,163,62,0.10));
    border: 2px solid rgba(142,195,31,0.28);
    border-radius: 30px;
    box-shadow: none;
    opacity: 1;
    color: transparent;
    font-size: 0;
    z-index: 0;
    transform: rotate(-8deg);
  }
  .process-body {
    position: relative;
    z-index: 1;
    width: 92%;
    margin: 28px auto 0;
    padding: 32px 24px 28px;
  }
  .process-step h4 { font-size: 15px; }
  .process-step li { font-size: 13px; }

  /* Blog: 1col → 2col on small tablet, 1col on phone */
  .blog-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .blog-meta { padding: 14px 14px 16px; }
  .blog-meta h3 { font-size: 13px; }

  /* CTA */
  .cta-band { padding: 64px 0 80px; margin-top: 64px; }
  .cta-card { padding: 40px 24px 36px; max-width: 92%; }
  .cta-card h2 { font-size: 20px; gap: 8px; }
  .cta-card .desc { font-size: 14px; margin-bottom: 22px; }
  .cta-button {
    display: block;
    width: 100%;
    max-width: 370px;
    margin: 0 auto;
    padding: 14px 28px;
    font-size: 14px;
  }
  .cta-illust { left: auto; right: 8px; width: 130px; }

  /* Footer */
  .footer { padding: 56px 0 0; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-bottom: 40px;
  }
  .footer-map { height: 180px; }
}

/* ============================================================
   Small phone (≤480px): tighten further
   ============================================================ */
@media (max-width: 480px) {
  .sp-hero-top {
    min-height: 640px;
    padding: 64px 20px 44px;
  }
  .sp-h1 { font-size: 26px; }
  .sp-lead { font-size: 13px; }
  .sp-cta-pri {
    display: flex;
    width: 100%;
    min-width: 0;
  }
  .blog-grid { grid-template-columns: 1fr; }
  .concept-card .pull { font-size: 18px; }
  .heading-eyebrow .label { font-size: 21px; }
  .ba-head { font-size: 18px; }
  .cta-illust { width: 100px; right: 0; }
}

/* ============================================================
   Service page (service.html) — sub-page styles
   ============================================================ */

/* ---------- Sub-page hero: ホームの .hero-stage を流用、サブページ高さに調整 ---------- */
/* Layout matches home (logo-box + greenbox + photo). Differences:
   - shorter total height
   - title rendered as a white pill at the bottom of the greenbox
   - subtitle is small dark text on green, below the pill
   - no hero-card / hero-dots */
/* Dimensions specified at 1920px viewport:
   - greenbox: 1050×600  → width 54.69%, height 600
   - photo:    1270×590  → width 66.15%, height 590
   - overlap: 400px (greenbox + photo widths - viewport)
   - greenbox top:135 (under logo-box) → bottom at y=735
   - photo top:75 (under nav)          → bottom at y=665 */
/* デザインカンプ × 0.75 スケール（1920→1440） */
.hero-stage--sub {
  height: 585px;                   /* greenbox top:135 + height:450 */
}
.hero-stage--sub .hero-greenbox {
  width: 54.69%;
  min-width: 420px;
  height: 450px;
  display: flex;
  align-items: center;
  padding: 0 0 0 60px;
}
.hero-stage--sub .hero-photo {
  width: 66.15%;
  min-width: 540px;
  height: 442px;                   /* photo top:75 + 442 = 517（greenbox末端より上で終わる元の構造） */
}
.hero-greenbox-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* "サービス内容" — white pill with dark text */
.subpage-h1 {
  align-self: flex-start;
  display: inline-block;
  background: #fff;
  color: var(--ink-900);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 18px 48px;
  border-radius: 6px;
  line-height: 1;
}
/* eyebrow — dark text on lime green */
.subpage-eyebrow {
  font-size: 21px;
  font-weight: 500;
  color: var(--ink-900);
  letter-spacing: 0.04em;
}
/* TBD: replace with the design's laptop scene asset when delivered */
.hero-photo--service { background-image: url("../assets/main001.png"); }

/* ---------- Service Intro: 左テキスト + 右円形写真 ---------- */
.svc-intro {
  padding: 96px 0;
  /* background は透明にして body::before の装飾SVGを通す */
}
.svc-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}
.svc-intro-text .heading--underline {
  margin-top: 130px;
  margin-bottom: 36px;
}
.svc-intro-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.svc-intro-list li {
  font-size: 22px;
  line-height: 2;
  color: var(--ink-900);
}
.svc-intro-list li::before {
  content: "・";
  color: var(--ink-900);
  margin-right: 4px;
}
.svc-intro-photo {
  background: url("../assets/team-intro.png") center / contain no-repeat;
  aspect-ratio: 1459 / 1467;
  width: 100%;
  max-width: 630px;
  justify-self: end;
}

/* ---------- Common: section title for service sections ---------- */
.heading {
  font-size: 26px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 14px;
  color: var(--ink-900);
}
.heading span {
  color: var(--green-600);
}
.heading-lead {
  font-size: 14px;
  text-align: center;
  color: var(--ink-500);
  margin-bottom: 40px;
}

/* ---------- freee で実現する 新しい経理スタイル（4カード 2x2） ---------- */
.svc-freee {
  padding: 90px 0 180px;
  /* background は透明にして body::before の装飾SVGを通す */
}
.svc-freee .heading { margin-bottom: 56px; }

/* 中央寄せ＋上下に短い緑ライン（home の heading-eyebrow と同じスタイル） */
.heading--accent {
  text-align: center;
  margin: 0 auto 16px;
  font-weight: 700;
}
.heading--accent .heading--accent__label {
  display: inline-block;
  position: relative;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: var(--ink-900);
  padding: 14px 4px;
}
.heading--accent .heading--accent__label::before,
.heading--accent .heading--accent__label::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 3px;
  background: #60AF69;
}
.heading--accent .heading--accent__label::before { top: 0; right: 0; }
.heading--accent .heading--accent__label::after { bottom: 0; left: 0; }

/* 見出し左寄せ＋緑下線（画像デザインに合わせる） */
.heading--underline {
  font-family: "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight: 600;
  text-align: left;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--green-600);
  font-size: 28px;
  letter-spacing: 0.04em;
}

.svc-freee-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px 50px;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 20px;
}
.card-feature {
  background: #fff;
  border: 2px solid #a8d34a;
  border-left-width: 25px;
  border-radius: 6px;
  padding: 25px;
  position: relative;
  box-shadow: none;
}
.card-feature h3 {
  font-size: 24px;
  font-weight: 800;
  color: #111;
  line-height: 2.2;
  letter-spacing: 0.02em;
}
.card-feature p {
  font-size: 20px;
  line-height: 1.7;
  color: #222;
  margin: 0;
}

/* ---------- 対応プログラムの詳細（グレー背景・3カード） ---------- */
.svc-programs {
  padding: 120px 0 140px;
  background: var(--bg-tint);
}
.svc-programs .heading-lead { margin-bottom: 48px; }
.svc-programs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.card-step {
  background: #fff;
  border-radius: 12px;
  padding: 32px 32px 64px;
  text-align: center;
  box-shadow: var(--shadow-card);
  position: relative;
}
.card-step__icon {
  position: absolute;
  top: -28px;
  left: -10px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: var(--green-600);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.card-step__icon-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; opacity: 0.95; }
.card-step__icon-num   { font-size: 26px; font-weight: 800; margin-top: 2px; }
.card-step h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink-900);
  margin: 0 0 22px;
  padding-left: 76px;
  text-align: left;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.card-step__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.card-step__list li {
  position: relative;
  padding-left: 0;
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-700);
  margin-bottom: 4px;
  text-align: center;
}
.card-step__list li::before {
  content: none;
}
.card-step__arrow {
  position: absolute;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: auto;
  display: block;
}

/* ---------- 会計事務所選びの強み（4項目） ---------- */
.svc-strengths {
  padding: 88px 0;
  /* background は透明（白い領域でSVGを通すため） */
}
.svc-strengths .heading { margin-bottom: 48px; }
.svc-strengths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.card-feature {
  background: #fff;
  border: 2px solid #a8d34a;
  border-left-width: 25px;
  border-radius: 6px;
  padding: 25px;
  box-shadow: none;
}
.card-feature h3 {
  font-size: 24px;
  font-weight: 800;
  color: #111;
  line-height: 2.2;
  letter-spacing: 0.02em;
}
.card-feature p {
  font-size: 20px;
  line-height: 1.7;
  color: #222;
  margin: 0;
}

/* ---------- できること（6カード 2x3, 01-06） ---------- */
.svc-can {
  padding: 100px 0 120px;
  background: var(--bg-tint);
}
.svc-can .heading { margin-bottom: 16px; }
.svc-can .heading-lead { margin-bottom: 56px; }
.heading-lead--center { text-align: center; }
.svc-can-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.card-usecase {
  background: #fff;
  border-radius: 6px;
  padding: 26px 30px 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-items: baseline;
  box-shadow: none;
  border: none;
}
.card-usecase__num {
  grid-row: 1;
  font-size: 28px;
  font-weight: 800;
  color: #5ca148;
  line-height: 1;
  letter-spacing: 0.02em;
}
.card-usecase h3 {
  grid-column: 2;
  font-size: 24px;
  font-weight: 800;
  color: #111;
  margin: 0;
  align-self: center;
}
.card-usecase p {
  grid-column: 1 / -1;
  font-size: 16px;
  line-height: 1.85;
  color: #222;
  margin: 0;
}
.card-usecase p:nth-of-type(1) { margin-top: 14px; }
.card-usecase__aim {
  font-size: 16px !important;
  color: #222 !important;
  margin: 0 !important;
}
.heading--accent__sub {
  font-size: inherit;
  font-weight: inherit;
  color: var(--ink-900) !important;
  margin-left: 6px;
}

/* ---------- Service responsive: tablet ---------- */
@media (max-width: 1180px) {
  .hero-stage--sub .hero-greenbox { padding: 0 24px 0 32px; }
  .subpage-h1 { font-size: 30px; }
  .svc-intro-grid { gap: 40px; }
  .svc-programs-grid { grid-template-columns: 1fr; max-width: 480px; }
  .card-step { border-radius: 8px; padding: 56px 24px 28px; }
}

/* ---------- Service responsive: SP ---------- */
@media (max-width: 900px) {
  /* Override the home rule that hides .hero-stage on mobile —
     sub-page hero stays visible (with its own SP layout). */
  .hero-stage--sub {
    display: block;
    height: auto;
    overflow: visible;
  }
  .hero-stage--sub .logo-box { display: none; }   /* sp-header takes over */
  .hero-stage--sub .hero-greenbox {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 32px 20px;
  }
  .hero-stage--sub .subpage-h1 { font-size: 22px; }
  .hero-stage--sub .hero-photo {
    position: static;
    width: 100%;
    min-width: 0;
    height: 220px;
  }

  .svc-intro { padding: 56px 0; }
  .svc-intro-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .svc-intro-text .heading--underline { font-size: 21px; }
  .svc-intro-photo {
    max-width: 280px;
    margin: 0 auto;
    justify-self: center;
  }

  .heading { font-size: 21px; }
  .svc-freee, .svc-programs, .svc-strengths, .svc-can { padding: 56px 0; }
  .svc-freee-grid { grid-template-columns: 1fr; gap: 16px; max-width: 420px; }
  .svc-strengths-grid { grid-template-columns: 1fr; max-width: 420px; gap: 0; }
  .svc-can-grid { grid-template-columns: 1fr; max-width: 480px; gap: 0; }
  .card-usecase__num { font-size: 24px; }
}

/* ============================================================
   About page (about.html) — sub-page styles
   ============================================================ */

/* Hero photo: 建物外観 */
.hero-photo--about { background: url("../assets/main001.png") center / cover no-repeat; }
/* TODO: 専用の建物画像が支給されたら差し替え */

/* ---------- 代表メッセージ: 左テキスト + 右円形写真 ---------- */
.about-message {
  padding: 170px 0;
}
.about-message-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
}
.about-message-eyebrow {
  font-family: "Shippori Mincho B1", "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.06em;
  color: var(--ink-900);
  margin-bottom: 12px;
}
.about-message-h2 {
  display: inline-block;
  background: var(--lime-400);
  color: var(--ink-900);
  font-size: 22px;
  font-weight: 800;
  padding: 12px 36px 12px 24px;
  margin-bottom: 32px;
  position: relative;
}
.about-message-h2::after {
  content: "";
  position: absolute;
  top: 0;
  right: -22px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 49px 22px;
  border-color: transparent transparent var(--green-600) transparent;
}
.about-message-body p {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.9;
  color: var(--ink-900);
  margin-bottom: 20px;
}
.about-message-body p:last-child { margin-bottom: 0; }
.about-message-photo {
  background: url("../assets/human.png") center / cover no-repeat, #e9ecef;
  border-radius: 50%;
  aspect-ratio: 1;
  width: 100%;
  max-width: 420px;
  justify-self: end;
}

/* ---------- 私たちの想い: 4カード 2x2（heading-banner + card-feature 流用） ---------- */
.about-vision {
  padding: 100px 0 280px;
}
.about-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px 48px;
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 30px;
}
/* mockup スタイル: グレー枠・白背景・見出し下に短い緑下線 */
.about-vision-grid .card-feature {
  background: #fff;
  border: 1px solid #c9ccc8;
  border-left-width: 1px;
  border-radius: 4px;
  padding: 32px 36px 30px;
}
.about-vision-grid .card-feature h3 {
  font-size: 24px;
  font-weight: 700;
  color: #111;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid #5ca148;
  letter-spacing: 0.02em;
}
.about-vision-grid .card-feature p {
  font-size: 20px;
  line-height: 1.85;
  color: #333;
  margin: 0;
}
@media (max-width: 900px) {
  .about-vision-grid .card-feature {
    padding: 24px 22px 22px;
  }
  .about-vision-grid .card-feature h3 {
    font-size: 19px;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
}

/* ---------- About 用 heading-banner（代表メッセージ / 私たちの想い）— デザイン×0.75 ---------- */
.about-message-banner,
.about-vision-banner {
  font-family: "Shippori Mincho B1", "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0.06em;
  height: 68px;
  min-width: 480px;
  margin-bottom: 32px;
}
.about-message-banner .heading-banner__text,
.about-vision-banner .heading-banner__text {
  height: 68px;
  padding: 0 36px;
}
.about-message-banner::after,
.about-vision-banner::after {
  width: 78px;
  height: 68px;
}
@media (max-width: 1180px) {
  .about-message-banner,
  .about-vision-banner {
    min-width: 0;
    width: 100%;
  }
}
@media (max-width: 900px) {
  .about-message-banner,
  .about-vision-banner {
    font-size: 22px;
    height: 64px;
    margin-bottom: 28px;
  }
  .about-message-banner .heading-banner__text,
  .about-vision-banner .heading-banner__text {
    height: 64px;
    padding: 0 24px;
  }
  .about-message-banner::after,
  .about-vision-banner::after {
    width: 64px;
    height: 64px;
  }
}

/* ---------- 事務所概要: 基本情報カード + マップ ---------- */
.about-info {
  padding: 60px 0 170px;
  background: var(--bg-tint);
}
.about-info-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  max-width: 1080px;
  margin: 48px auto 0;
  align-items: stretch;
}
.about-info-card {
  background: #fff;
  padding: 30px 30px;
  position: relative;
}
.about-info-card__title {
  display: inline-block;
  border: 2px solid var(--ink-900);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
  padding: 5px 15px 5px 15px;
  margin-bottom: 20px;
  color: var(--ink-900);
}
.about-info-list {
  margin: 0;
  padding: 0;
}
.about-info-list dt {
  font-weight: 800;
  font-size: 21px;
  color: var(--ink-900);
  margin-top: 22px;
  margin-bottom: 6px;
}
.about-info-list dt:first-child { margin-top: 0; }
.about-info-list dd {
  margin: 0 0 0 1.4em;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-900);
  position: relative;
}
.about-info-badge {
  position: absolute;
  right: 24px;
  bottom: -8px;
  width: 96px;
  height: auto;
}
.about-info-map {
  background: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.05em;
  min-height: 380px;
}
@media (max-width: 1180px) {
  .about-info-grid { gap: 24px; }
}
@media (max-width: 900px) {
  .about-info { padding: 56px 0 64px; }
  .about-info-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: 24px;
    margin-top: 32px;
  }
  .about-info-card { padding: 28px 24px; }
  .about-info-card__title { font-size: 16px; padding: 8px 20px; margin-bottom: 20px; }
  .about-info-badge { width: 72px; right: 16px; bottom: 12px; position: static; display: block; margin: 12px auto 0; }
  .about-info-map { min-height: 240px; font-size: 18px; }
}

/* ---------- About responsive ---------- */
@media (max-width: 1180px) {
  .about-message-grid { gap: 40px; }
  .about-message-photo { max-width: 360px; }
}
@media (max-width: 900px) {
  .about-message {
    padding: 64px 0 56px;
  }
  .about-message-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .about-message-photo {
    max-width: 280px;
    justify-self: center;
  }
  .about-message-h2 { font-size: 18px; padding: 10px 32px 10px 18px; }
  .about-message-h2::after { border-width: 0 0 41px 18px; right: -18px; }
  .about-vision {
    padding: 56px 0 80px;
  }
  .about-vision-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 0;
  }
}

/* ============================================================
   Price page (price.html) — sub-page styles
   ============================================================ */

/* Hero photo: 仮素材。専用画像が支給されたら差し替え */
.hero-photo--price { background: url("../assets/main001.png") center / cover no-repeat; }

/* ---------- 料金体系: 2カード ---------- */
.price-tier {
  padding: 150px 0 80px;
}
.price-tier-lead {
  text-align: center;
  font-size: 15px;
  color: var(--ink-700);
  line-height: 1.9;
  margin: 32px auto 0;
  max-width: 880px;
}
.price-example-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  max-width: 1080px;
  margin: 48px auto 0;
}
.price-example {
  background: #fff;
  border: 1px solid #2f3233;
  border-radius: 12px;
  padding: 0 34px 34px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.price-example__title {
  margin: 0 -34px 32px;
  padding: 18px 30px;
  background: #C5CDD3;
  border-bottom: 1px solid #2f3233;
  color: #111;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.price-example__price {
  display: flex;
  align-items: baseline;
  gap: 26px;
  margin: 0 0 30px;
}
.price-example__price-main {
  margin: 0;
  color: #D45E28;
  font-size: 38px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
.price-example__price-note {
  margin: 0;
  color: #111;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}
.price-example__sub {
  font-size: 15px;
  font-weight: 700;
  color: var(--green-600);
  margin: -14px 0 24px;
}
.price-example__include {
  margin: 0 0 16px;
  color: #111;
  font-size: 17px;
  font-weight: 800;
}
.price-example__list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.price-example__list li {
  position: relative;
  padding-left: 32px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.65;
  color: #111;
  margin-bottom: 14px;
}
.price-example__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #E9C77E;
  color: #5D6570;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}
.price-example__amount {
  margin: auto 0 0;
  padding: 16px 20px;
  background: #F8F1DC;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px 16px;
  align-items: baseline;
}
.price-example__amount dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-700);
}
.price-example__amount dd {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #111;
}
/* === 旧 .price-tier-grid / .price-card 系（互換用、既存ページから参照されていれば残す） === */
.price-tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1080px;
  margin: 56px auto 0;
}
.price-card {
  background: #fff;
  border: 2px solid var(--lime-400);
  border-radius: 8px;
  padding: 32px 32px 28px;
}
.price-card__title {
  background: #ECECEC;
  color: var(--ink-900);
  font-weight: 800;
  font-size: 21px;
  text-align: center;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 28px;
  letter-spacing: 0.04em;
}
.price-card__amount {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.price-card__amount-num {
  font-size: 32px;
  font-weight: 800;
  color: #E25C5C;
}
.price-card__amount-note {
  font-size: 13px;
  color: var(--ink-500);
}
.price-card__include-title {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--ink-900);
}
.price-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.price-card__list li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-900);
}
.price-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 22px;
  height: 16px;
  background: var(--green-600);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.55 17.65L4.85 12.95l1.4-1.4 3.3 3.3 8.1-8.1 1.4 1.4z'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9.55 17.65L4.85 12.95l1.4-1.4 3.3 3.3 8.1-8.1 1.4 1.4z'/></svg>") no-repeat center / contain;
}
.price-card__footnote {
  font-size: 13px;
  color: var(--ink-500);
  margin-top: 8px;
}
.price-spot-note {
  background: #E4EED7;
  color: var(--ink-900);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  padding: 18px 32px;
  border-radius: 999px;
  max-width: 1080px;
  margin: 48px auto 0;
}

/* ---------- 投資価値の考え方 ---------- */
.price-value {
  padding: 80px 0 80px;
}
.price-value-heading {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.price-value-heading__sub {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-500);
}
.price-value-eyebrow {
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-900);
  margin: 56px 0 32px;
}
.price-value-eyebrow__arrow {
  color: var(--green-600);
  letter-spacing: -0.05em;
  margin-left: 8px;
}
.price-value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 980px;
  margin: 0 auto;
}
.price-style-card {
  background: #fff;
  border: 1px solid #DDD;
  border-radius: 6px;
  padding: 28px 32px 32px;
  position: relative;
}
.price-style-card__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink-900);
  padding-left: 16px;
  margin-bottom: 24px;
  position: relative;
}
.price-style-card__title-bar {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 4px;
  background: var(--green-600);
  border-radius: 2px;
}
.price-style-card__title-strong {
  /* 強調ワード（従来 / 自計化後）— そのまま */
}
.price-style-card__bulb {
  margin-left: 8px;
  font-size: 18px;
}
.price-style-card__list {
  margin: 0;
  padding: 0;
}
.price-style-card__list dt {
  font-weight: 700;
  font-size: 16px;
  color: var(--ink-900);
  margin-top: 18px;
}
.price-style-card__list dt:first-child { margin-top: 0; }
.price-style-card__list dd {
  font-size: 16px;
  color: var(--ink-900);
  margin: 6px 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #BBB;
}
.price-style-card__list dd:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.price-value-footnote {
  font-size: 12px;
  color: var(--ink-500);
  text-align: center;
  margin-top: 32px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Price CTA ---------- */
.price-cta {
  background: var(--cream-100);
  padding: 64px 0 80px;
  position: relative;
}
.price-cta-grid {
  display: block;
  max-width: 980px;
  margin: 0 auto;
}
.price-cta-illust {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 0;
  width: 190px;
  height: 250px;
  background: url("../assets/woman3.png") right bottom / contain no-repeat;
  transform: translate(-96%, -50%);
}
.price-cta-card {
  background: #fff;
  border-radius: 12px;
  padding: 36px 40px 32px;
  text-align: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overflow: visible;
}
.price-cta-h2 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 12px;
}
.price-cta-h2__bracket {
  width: 16px;
  height: 28px;
  background: var(--green-600);
  -webkit-mask: linear-gradient(45deg, transparent 50%, black 50%) center / 100% 100% no-repeat;
          mask: linear-gradient(45deg, transparent 50%, black 50%) center / 100% 100% no-repeat;
}
.price-cta-h2__bracket--left {
  -webkit-mask: linear-gradient(135deg, black 50%, transparent 50%) center / 100% 100% no-repeat;
          mask: linear-gradient(135deg, black 50%, transparent 50%) center / 100% 100% no-repeat;
}
.price-cta-h2__bracket--right {
  -webkit-mask: linear-gradient(225deg, black 50%, transparent 50%) center / 100% 100% no-repeat;
          mask: linear-gradient(225deg, black 50%, transparent 50%) center / 100% 100% no-repeat;
}
.price-cta-lead {
  font-size: 20px;
  color: var(--ink-700);
  margin-bottom: 24px;
}
.price-cta-btn {
  display: inline-block;
  background: var(--green-600);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 40px;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.price-cta-btn:hover { opacity: 0.85; }
.price-cta-note {
  font-size: 11px;
  color: var(--ink-500);
  margin-top: 14px;
}

/* ---------- Price responsive ---------- */
@media (max-width: 1180px) {
  .price-tier-grid { gap: 20px; }
  .price-example-grid { gap: 20px; }
  .price-value-grid { gap: 20px; }
}
@media (max-width: 900px) {
  .price-tier { padding: 56px 0 48px; }
  .price-tier-lead { font-size: 14px; margin-top: 24px; }
  .price-tier-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: 24px;
    margin-top: 32px;
  }
  .price-example-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: 24px;
    margin-top: 32px;
  }
  .price-example {
    padding: 0 22px 24px;
    border-radius: 10px;
  }
  .price-example__title {
    margin: 0 -22px 24px;
    padding: 14px 20px;
    font-size: 21px;
  }
  .price-example__price {
    display: block;
    margin-bottom: 22px;
  }
  .price-example__price-main {
    font-size: 32px;
  }
  .price-example__price-note {
    font-size: 14px;
    margin-top: 6px;
  }
  .price-example__sub {
    margin-top: -10px;
  }
  .price-example__include {
    font-size: 16px;
  }
  .price-example__list li {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 12px;
  }
  .price-example__amount { grid-template-columns: 80px 1fr; padding: 14px 16px; }
  .price-card { padding: 24px 22px; }
  .price-card__amount-num { font-size: 26px; }
  .price-spot-note {
    font-size: 13px;
    line-height: 1.7;
    padding: 14px 18px;
    margin-top: 24px;
    border-radius: 14px;
  }
  .price-value { padding: 56px 0 56px; }
  .price-value-eyebrow { margin: 32px 0 24px; }
  .price-value-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    gap: 20px;
  }
  .price-style-card { padding: 22px 20px 24px; }
  .price-cta { padding: 48px 0 56px; }
  .price-cta-grid {
    max-width: 420px;
  }
  .price-cta-illust {
    left: 0;
    top: 0;
    width: 96px;
    height: 128px;
    margin: 0;
    position: absolute;
    z-index: 0;
    transform: translate(-72%, -30px);
  }
  .price-cta-card {
    max-width: calc(100% - 28px);
    padding: 54px 22px 24px;
    margin-left: auto;
    margin-right: 0;
  }
  .price-cta-h2 { font-size: 17px; }
}

/* ============================================================
   Archive page (archive.html) — sub-page styles
   ============================================================ */

/* Hero photo: 仮素材。デスク・PC・コーヒー等の写真が支給されたら差し替え */
.hero-photo--archive { background: url("../assets/main001.png") center / cover no-repeat; }

/* Visually hidden（スクリーンリーダー用） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- カテゴリフィルタ（ピル） ---------- */
.archive-filter-section {
  padding: 80px 0 24px;
}
.archive-filter {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
  max-width: 620px;       /* 3列で折り返すためのコンテナ幅 */
}
.archive-filter__pill {
  display: inline-block;
  padding: 10px 28px;
  border: 1.5px solid var(--green-600);
  border-radius: 999px;
  color: var(--green-600);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.archive-filter__pill:hover { background: #F2F8E8; }
.archive-filter__pill.is-active {
  background: var(--green-600);
  color: #fff;
}

/* ---------- 記事一覧 ---------- */
.archive-list {
  padding: 32px 0 80px;
}
.archive-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
}
.archive-card {
  display: block;
  background: #fff;
  border: 1px solid #DDD;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.archive-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.archive-card__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.archive-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.archive-card__dummy {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,0.85);
  color: var(--ink-900);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 2px;
  z-index: 2;
}
.archive-card__cat {
  display: inline-block;
  background: var(--green-600);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 2px;
  margin: 16px 20px 8px;
}
.archive-card__date {
  display: block;
  font-size: 12px;
  color: var(--ink-500);
  margin: 0 20px 6px;
}
.archive-card__title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink-900);
  margin: 0 20px 12px;
}
.archive-card__excerpt {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-700);
  margin: 0 20px 20px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- ページネーション ---------- */
.archive-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
}
.archive-pagination__num,
.archive-pagination__next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #BBB;
  border-radius: 4px;
  background: #fff;
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}
.archive-pagination__num:hover,
.archive-pagination__next:hover {
  background: #F2F8E8;
}
.archive-pagination__num.is-current {
  background: #ECECEC;
  border-color: #999;
}
.archive-pagination__next { padding: 0 22px; }

/* ---------- Archive responsive ---------- */
@media (max-width: 1180px) {
  .archive-grid { gap: 24px 18px; }
}
@media (max-width: 900px) {
  .archive-filter-section { padding: 48px 0 16px; }
  .archive-filter { gap: 10px 12px; max-width: 480px; }
  .archive-filter__pill { padding: 8px 18px; font-size: 13px; }
  .archive-list { padding: 24px 0 64px; }
  .archive-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
    gap: 20px;
  }
  .archive-card__title { font-size: 15px; }
  .archive-pagination { margin-top: 32px; gap: 8px; }
  .archive-pagination__num,
  .archive-pagination__next { min-width: 40px; height: 40px; font-size: 13px; }
}

/* ============================================================
   Contact page (contact.html) — sub-page styles
   ============================================================ */

/* Hero photo: 仮素材。専用画像が支給されたら差し替え */
.hero-photo--contact { background: url("../assets/main001.png") center / cover no-repeat; }

/* ---------- お問い合わせ方法（2カード） ---------- */
.contact-methods { padding: 100px 0 64px; }
.contact-methods-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 880px;
  margin: 56px auto 0;
}
.contact-method-card {
  background: #fff;
  border: 1px solid #DDD;
  border-radius: 8px;
  padding: 36px 28px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-method-card__icon {
  width: 80px;
  height: 80px;
  margin-bottom: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.contact-method-card__icon--mail {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='none' stroke='%23222' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><rect x='14' y='22' width='52' height='36' rx='3'/><path d='M14 26 l26 18 26-18'/></g><g stroke='%23E25C5C' stroke-width='2.6' stroke-linecap='round'><path d='M62 14 l4 -6'/><path d='M68 18 l6 -2'/><path d='M68 24 l6 0'/></g></svg>");
}
.contact-method-card__icon--check {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='none' stroke='%23222' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='34' cy='34' r='18'/><path d='M48 48 l16 16'/><path d='M28 34 l4 4 8 -8'/></g></svg>");
}
.contact-method-card__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--green-600);
  margin: 0 0 16px;
}
.contact-method-card__lead {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-900);
  margin: 0 0 24px;
}
.contact-method-card__btn {
  display: inline-block;
  background: var(--green-600);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 36px;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.15s ease;
  margin-top: auto;
}
.contact-method-card__btn:hover { opacity: 0.85; }
.contact-method-card__btn--orange { background: #F39A2A; }
.contact-soft-note {
  background: #E4EED7;
  color: var(--ink-900);
  font-size: 14px;
  text-align: center;
  padding: 20px 32px;
  border-radius: 999px;
  max-width: 920px;
  margin: 48px auto 0;
}

/* ---------- お問い合わせフォーム ---------- */
.contact-form-section {
  background: var(--cream-100);
  padding: 80px 0 80px;
}
.contact-form {
  max-width: 880px;
  margin: 48px auto 0;
}
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
  margin-bottom: 20px;
}
.contact-form-field { display: flex; flex-direction: column; }
.contact-form-field--full { margin-bottom: 20px; }
.contact-form-field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 6px;
}
.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea {
  background: #fff;
  border: 1px solid #C9C9C9;
  border-radius: 4px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink-900);
  width: 100%;
  box-sizing: border-box;
}
.contact-form-field textarea { resize: vertical; min-height: 140px; }
.contact-form-field input:focus,
.contact-form-field select:focus,
.contact-form-field textarea:focus {
  outline: 2px solid var(--green-600);
  outline-offset: -2px;
  border-color: var(--green-600);
}
.contact-form-submit { margin-top: 32px; }
.contact-form-btn {
  background: var(--green-600);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 56px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
  font-family: inherit;
}
.contact-form-btn:hover { opacity: 0.85; }

/* ---------- 自計化準備度診断 CTA ---------- */
.contact-diag {
  background: var(--cream-100);
  padding: 0 0 80px;
}
.contact-diag-card {
  background: #fff;
  border-radius: 12px;
  max-width: 880px;
  margin: 0 auto;
  padding: 40px 48px;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 32px;
  align-items: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.05);
}
.contact-diag-card__body { text-align: center; }
.contact-diag-card__eyebrow {
  color: var(--green-600);
  font-weight: 800;
  font-size: 16px;
  margin: 0 0 12px;
}
.contact-diag-card__h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink-900);
  margin: 0 0 8px;
}
.contact-diag-card__lead {
  font-size: 13px;
  color: var(--ink-700);
  margin: 0 0 20px;
}
.contact-diag-card__btn {
  display: inline-block;
  background: #F39A2A;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 36px;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.contact-diag-card__btn:hover { opacity: 0.85; }
.contact-diag-card__illust {
  width: 220px;
  height: 220px;
  background: url("../assets/human.png") center / contain no-repeat;
}

/* ---------- Contact responsive ---------- */
@media (max-width: 1180px) {
  .contact-methods-grid { gap: 20px; }
  .contact-form-grid { gap: 16px 20px; }
}
@media (max-width: 900px) {
  .contact-methods { padding: 56px 0 40px; }
  .contact-methods-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    gap: 20px;
    margin-top: 32px;
  }
  .contact-method-card { padding: 28px 22px 24px; }
  .contact-soft-note {
    border-radius: 18px;
    padding: 16px 22px;
    font-size: 13px;
    margin-top: 32px;
  }
  .contact-form-section { padding: 56px 0 56px; }
  .contact-form { margin-top: 32px; }
  .contact-form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }
  .contact-form-field--full { margin-bottom: 16px; }
  .contact-form-btn { width: 100%; padding: 14px 24px; }
  .contact-diag { padding: 0 0 56px; }
  .contact-diag-card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 16px;
    max-width: 420px;
  }
  .contact-diag-card__illust {
    width: 140px;
    height: 140px;
    margin: 0 auto;
  }
  .contact-diag-card__h2 { font-size: 17px; }
}