/* 2daime_style.css — 2代目・3代目社長向けページ専用スタイル (UTF-8)
   ----------------------------------------------------------------
   Design system: Deep Navy × Amber × Warm White
   ---------------------------------------------------------------- */

:root {
  --d-navy:     #1a3460;
  --d-navy-mid: #2a4a80;
  --d-amber:    #c8860a;
  --d-amber-lt: #f5a623;
  --d-cream:    #fafaf7;
  --d-light-bg: #eef1f8;
  --d-charcoal: #2d2d2d;
  --d-warn:     #b22222;
}

/* ── Hero ───────────────────────────────────── */
.d-hero {
  background: linear-gradient(135deg, #1a3460 0%, #2a6090 100%);
  color: white;
  padding: 2.4em 2em;
  margin-bottom: 2em;
  border-radius: 4px;
  text-align: left;
}
.d-hero-label {
  display: inline-block;
  background: var(--d-amber);
  color: white;
  font-size: 0.82em;
  font-weight: bold;
  padding: 0.2em 0.8em;
  border-radius: 3px;
  margin-bottom: 0.8em;
  letter-spacing: 0.05em;
}
.d-hero h2 {
  font-size: 1.35em;
  color: white;
  margin: 0 0 0.7em;
  line-height: 1.6;
}
.d-hero .d-hero-sub {
  font-size: 1.05em;
  color: rgba(255,255,255,0.88);
  line-height: 1.9;
  margin: 0;
}

/* ── Story section ───────────────────────────── */
.d-story {
  margin-bottom: 2.4em;
}
.d-story-title {
  background: var(--d-navy);
  color: white;
  padding: 0.6em 1.2em;
  font-size: 1.15em;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 1em;
  border-left: 5px solid var(--d-amber);
}
.d-story-title .d-story-num {
  display: inline-block;
  background: var(--d-amber);
  color: white;
  font-size: 0.8em;
  padding: 0.1em 0.55em;
  border-radius: 3px;
  margin-right: 0.5em;
  vertical-align: middle;
  font-weight: 900;
}

/* ── Body text block ─────────────────────────── */
.d-body {
  font-size: 1.1em;
  line-height: 1.95;
  color: var(--d-charcoal);
  margin-bottom: 1.2em;
}
.d-body p {
  font-size: 1em;
  color: var(--d-charcoal);
  margin: 0.6em 0;
}

/* ── Info / highlight box ────────────────────── */
.d-infobox {
  background: var(--d-light-bg);
  border-left: 4px solid var(--d-navy-mid);
  padding: 0.85em 1.2em;
  margin: 1em 0;
  line-height: 1.9;
  font-size: 1.05em;
}
.d-infobox p {
  font-size: 1em;
  color: var(--d-charcoal);
  margin: 0.4em 0;
}

/* ── 2-type comparison cards ─────────────────── */
.d-type-cards {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  margin: 1.2em 0 1.6em;
}
.d-type-card {
  border: 2px solid var(--d-navy);
  border-radius: 6px;
  overflow: hidden;
}
.d-type-card-head {
  background: var(--d-navy);
  color: white;
  padding: 0.5em 1em;
  font-weight: bold;
  font-size: 1.05em;
}
.d-type-card-head.type2 {
  background: var(--d-navy-mid);
  border-left: 4px solid var(--d-amber);
}
.d-type-card-body {
  background: var(--d-cream);
  padding: 0.8em 1.1em;
  font-size: 1.0em;
  line-height: 1.85;
  color: var(--d-charcoal);
}
.d-type-card-body p {
  font-size: 1em;
  color: var(--d-charcoal);
  margin: 0.3em 0;
}

/* ── Emphasis / inline helpers ───────────────── */
.d-point {
  color: var(--d-navy);
  font-weight: bold;
}
.d-amber {
  color: var(--d-amber);
  font-weight: bold;
}
.d-warn {
  color: var(--d-warn);
  font-weight: bold;
}

/* ── Data callout ────────────────────────────── */
.d-data {
  background: #fff8ee;
  border: 2px solid var(--d-amber);
  border-radius: 6px;
  padding: 1em 1.3em;
  margin: 1.2em 0;
  text-align: center;
}
.d-data .d-data-num {
  font-size: 2.2em;
  font-weight: 900;
  color: var(--d-amber);
  display: block;
  line-height: 1.2;
}
.d-data p {
  font-size: 1em;
  color: var(--d-charcoal);
  margin: 0.3em 0;
}

/* ── Sub section bar ─────────────────────────── */
.d-sub-title {
  background: #e8ecf6;
  border-left: 4px solid var(--d-navy-mid);
  color: var(--d-navy);
  padding: 0.45em 1em;
  font-weight: bold;
  font-size: 1.05em;
  margin: 1.4em 0 0.7em;
}

/* ── Image block ─────────────────────────────── */
.d-img-block {
  text-align: center;
  margin: 1em 0;
}
.d-img-block img {
  max-width: 100%;
  height: auto;
}
.d-img-cap {
  font-size: 0.82em;
  color: #777;
  margin-top: 0.3em;
}

/* ── CTA box ─────────────────────────────────── */
.d-cta {
  background: var(--d-navy);
  color: white;
  border-radius: 6px;
  padding: 1.6em 1.8em;
  margin: 2em 0 1.5em;
  text-align: center;
}
.d-cta h3 {
  color: white;
  font-size: 1.2em;
  margin: 0 0 0.7em;
  line-height: 1.5;
}
.d-cta p {
  font-size: 1em;
  color: rgba(255,255,255,0.9);
  margin: 0.4em 0;
}
.d-cta-link {
  display: inline-block;
  background: var(--d-amber);
  color: white;
  font-weight: bold;
  padding: 0.55em 1.8em;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 0.9em;
  font-size: 1.05em;
}
.d-cta-link:hover {
  background: var(--d-amber-lt);
}

/* ── Service menu ────────────────────────────── */
.d-svc-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  justify-content: center;
  margin: 1.2em 0;
}
.d-svc-grid a img {
  max-width: 200px;
  height: auto;
}

/* ── Other pages section ─────────────────────── */
.d-other-title {
  background: #444;
  color: white;
  padding: 0.45em 1em;
  font-weight: bold;
  font-size: 1.0em;
  margin: 2em 0 0.8em;
}
.d-other-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  justify-content: center;
}
.d-other-links a img {
  max-width: 210px;
  height: auto;
}

/* ── Mobile ──────────────────────────────────── */
@media screen and (max-width: 768px) {
  .d-hero {
    padding: 1.5em 1em;
    border-radius: 0;
  }
  .d-hero h2 {
    font-size: 1.1em;
  }
  .d-hero .d-hero-sub {
    font-size: 0.95em;
  }
  .d-story-title {
    font-size: 1.0em;
    padding: 0.55em 0.9em;
  }
  .d-body {
    font-size: 1.0em;
  }
  .d-data .d-data-num {
    font-size: 1.8em;
  }
  .d-cta {
    padding: 1.2em 1em;
  }
  .d-svc-grid a img {
    max-width: 150px;
  }
}
@media screen and (max-width: 480px) {
  .d-hero h2 {
    font-size: 1.0em;
  }
  .d-type-cards {
    gap: 0.8em;
  }
}

/* ── フォントスケール 1.5倍 ──────────────────────── */
#hpb-main {
  font-size: 112%;
}
.d-hero h2         { font-size: 1.6em; }
.d-hero .d-hero-sub{ font-size: 1.25em; }
.d-story-title     { font-size: 1.35em; }
.d-body            { font-size: 1.3em; }
.d-body p          { font-size: 1em; color: var(--d-charcoal); }
.d-infobox         { font-size: 1.25em; }
.d-infobox p       { font-size: 1em; color: var(--d-charcoal); }
.d-type-card-head  { font-size: 1.25em; }
.d-type-card-body  { font-size: 1.2em; }
.d-type-card-body p{ font-size: 1em; color: var(--d-charcoal); }
.d-sub-title       { font-size: 1.25em; }
.d-data            { font-size: 1.2em; }
.d-data .d-data-num{ font-size: 2.6em; }
.d-data p          { font-size: 1em; color: var(--d-charcoal); }
.d-cta h3          { font-size: 1.4em; }
.d-cta p           { font-size: 1.15em; }
.d-cta-link        { font-size: 1.2em; }

/* ── サービスカード ───────────────────────────────── */
.d-svc-cards {
  display: flex;
  flex-direction: column;
  gap: 1.4em;
  margin: 1.2em 0 2em;
}
.d-svc-card {
  display: flex;
  border: 2px solid var(--d-navy);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.2s;
}
.d-svc-card:hover {
  box-shadow: 0 4px 16px rgba(26,52,96,0.18);
}
.d-svc-card-icon {
  background: var(--d-navy);
  color: white;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1em 0.8em;
  text-align: center;
  flex-shrink: 0;
}
.d-svc-card-icon .d-svc-emoji {
  font-size: 2.2em;
  display: block;
  margin-bottom: 0.3em;
}
.d-svc-card-icon .d-svc-tag {
  font-size: 0.7em;
  background: var(--d-amber);
  color: white;
  padding: 0.15em 0.5em;
  border-radius: 3px;
  font-weight: bold;
  white-space: nowrap;
}
.d-svc-card-body {
  padding: 0.9em 1.2em;
  background: var(--d-cream);
  flex: 1;
}
.d-svc-card-title {
  font-size: 1.15em;
  font-weight: bold;
  color: var(--d-navy);
  margin: 0 0 0.4em;
  line-height: 1.4;
}
.d-svc-card-desc {
  font-size: 1.0em;
  color: #444;
  line-height: 1.8;
  margin: 0 0 0.6em;
}
.d-svc-card-link {
  font-size: 0.9em;
  color: var(--d-amber);
  font-weight: bold;
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  .d-hero h2          { font-size: 1.2em; }
  .d-hero .d-hero-sub { font-size: 1.05em; }
  .d-story-title      { font-size: 1.1em; }
  .d-body             { font-size: 1.1em; }
  .d-svc-card-icon    { min-width: 70px; }
  .d-svc-card-icon .d-svc-emoji { font-size: 1.7em; }
  .d-svc-card-title   { font-size: 1.05em; }
  .d-cta h3           { font-size: 1.15em; }
}