/* =========================================================================
   Denet Web Design System — Colors & Typography
   株式会社ディーネット
   ========================================================================= */

/* Webfont: Noto Sans JP (日本語) + Inter (欧文) を Google Fonts から */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* -----------------------------------------------------------------------
     COLORS — Primary (Denet Red)
     ----------------------------------------------------------------------- */
  --denet-red:        #C8161D;   /* プライマリ: ロゴ・CTA・見出しバー・赤枠ラベル */
  --denet-red-dark:   #9E1016;   /* ホバー・プレス時 */
  --denet-red-darker: #7A0B11;   /* テキスト on 淡赤背景 */
  --denet-red-100:    #F5C4C6;   /* 淡いアクセント */
  --denet-red-50:     #FBE7E8;   /* 背景タグ・ハイライト */
  --denet-red-25:     #FDF3F3;   /* セクション背景 */

  /* -----------------------------------------------------------------------
     COLORS — Neutrals (Ink / Grays)
     ----------------------------------------------------------------------- */
  --ink:        #1A1A1A;  /* 本文・見出し（完全な黒ではない） */
  --fg-1:       #1A1A1A;  /* 本文 */
  --fg-2:       #3E3E3E;  /* 副見出し・重要メタ */
  --fg-3:       #6E6E6E;  /* キャプション・メタ情報 */
  --fg-4:       #9AA0A6;  /* disabled / placeholder */

  --border-1:   #E5E5E5;  /* 標準ボーダー */
  --border-2:   #D9D9D9;  /* 区切り線 */
  --border-3:   #F0F0F0;  /* 微細区切り */

  --bg-0:       #FFFFFF;  /* ベース */
  --bg-soft:    #F5F5F5;  /* セクション背景 */
  --bg-faint:   #FAFAFA;  /* 微妙に落としたカード/テーブル行 */

  /* -----------------------------------------------------------------------
     COLORS — Semantic
     ----------------------------------------------------------------------- */
  --success: #2E8B3A;
  --success-bg: #E8F3EA;
  --warning: #D98A00;
  --warning-bg: #FBF1DB;
  --info:    #1B6AB0;
  --info-bg: #E2EEF7;
  --error:   var(--denet-red);
  --error-bg: var(--denet-red-50);

  /* -----------------------------------------------------------------------
     COLORS — Illustration accents (アイソメイラスト内でのみ使用)
     ----------------------------------------------------------------------- */
  --ill-orange:  #F08C4A;
  --ill-teal:    #3F9EA1;
  --ill-mustard: #D6A84D;
  --ill-deep-red: #8B1118;

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Families
     用途別ポリシー:
       - Web: Noto Sans JP（Google Fonts CDN / --font-jp）
       - PDF書き出し: 遊ゴシック（ユーザー改変用 / --font-pdf-jp）
       - 印刷物: モリサワ（参考。システム利用不可のため本CSSには含めない）
     ----------------------------------------------------------------------- */
  --font-jp:     "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --font-pdf-jp: "YuGothic", "Yu Gothic", "游ゴシック", "游ゴシック体", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-en:     "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-sans:   var(--font-jp);   /* デフォルト（Web） */
  --font-mono:   ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-serif:  "Times New Roman", "YuMincho", "Yu Mincho", serif; /* ロゴ下の社名英字のみ */

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Sizes (px)
     可読性ポリシー: 本文・UIテキスト・見出しは 18px を下限とする。
     18px 未満は「注釈専用ティア」のみ許容（後述）。
     ----------------------------------------------------------------------- */
  /* 本文ティア（すべて 18px 以上） */
  --fs-display: 48px;   /* ヒーロー大見出し */
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 26px;
  --fs-h4: 22px;
  --fs-h5: 20px;        /* 小見出し / medium */
  --fs-body-lg: 20px;
  --fs-body:    18px;   /* 基本（下限） */

  /* 注釈専用ティア（18px 未満・例外）
     ※ キャプション・メタ情報・法的表記など注釈に限り使用。
        1画面/1ページ内のテキスト総量の 10% 程度までに抑えること。 */
  --fs-note:    15px;   /* 注釈・メタ（旧 --fs-small 相当） */
  --fs-caption: 13px;   /* キャプション */
  --fs-micro:   12px;   /* 最小限の法的表記等 */

  /* 旧名エイリアス（後方互換。新規利用は --fs-note を推奨） */
  --fs-small:   var(--fs-note);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Weights
     ----------------------------------------------------------------------- */
  --fw-regular: 400;  /* @kind other */
  --fw-medium:  500;  /* @kind other */
  --fw-bold:    700;  /* @kind other */
  --fw-black:   900;  /* @kind other */

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Line heights
     ----------------------------------------------------------------------- */
  --lh-tight:  1.25;   /* @kind other */
  --lh-heading: 1.4;   /* @kind other */
  --lh-body:   1.8;    /* @kind other */
  --lh-snug:   1.6;    /* @kind other */

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Letter spacing
     ----------------------------------------------------------------------- */
  --ls-tagline: 0.08em;  /* @kind spacing */
  --ls-heading: 0.02em;  /* @kind spacing */
  --ls-body:    0;       /* @kind spacing */
  --ls-caps:    0.1em;   /* @kind spacing */

  /* -----------------------------------------------------------------------
     SPACING & RADIUS & SHADOW
     ----------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 120px;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);  /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1);     /* @kind other */
  --dur-fast:  150ms;  /* @kind other */
  --dur-base:  250ms;  /* @kind other */
  --dur-slow:  400ms;  /* @kind other */

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(200, 22, 29, 0.25);

  /* Layout */
  --container-max: 1180px;
  --container-pad: 24px;
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY — そのまま使える HTML タグ相当のスタイル
   ========================================================================= */

html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-0); }
body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-bold);
  margin: 0;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-heading);
}

h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }
h5, .h5 { font-size: var(--fs-h5); font-weight: var(--fw-medium); }

/* ブランド特有: セクション見出し = 左に赤いバー */
.section-title {
  position: relative;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  padding-left: 20px;
  line-height: var(--lh-heading);
}
.section-title::before {
  content: "";
  position: absolute;
  left: 0; top: 8%;
  width: 6px; height: 84%;
  background: var(--denet-red);
  border-radius: 1px;
}

/* タグライン: 文字間広め */
.tagline {
  letter-spacing: var(--ls-tagline);
  font-weight: var(--fw-bold);
  color: var(--ink);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 1em 0;
}

small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: var(--lh-snug);
}

.meta {
  font-size: var(--fs-note);  /* 注釈ティア */
  color: var(--fg-3);
  line-height: var(--lh-snug);
}

.eyebrow, .caps {
  font-size: var(--fs-note);  /* 注釈ティア（ラベル・アクセント） */
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--fg-2);
}

a {
  color: var(--denet-red);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--denet-red-dark); text-decoration: underline; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
}
pre {
  padding: var(--space-4);
  overflow-x: auto;
  line-height: 1.5;
}

/* 赤枠ラベル (PDF の会社概要ページ風) */
.red-label {
  display: inline-block;
  padding: 4px 12px;
  border: 2px solid var(--denet-red);
  color: var(--denet-red);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  border-radius: var(--radius-sm);
  line-height: 1.4;
  background: var(--bg-0);
}

/* 赤い強調テキスト */
.em-red { color: var(--denet-red); font-weight: var(--fw-bold); }

/* 「」引用風コピー */
.quote-copy {
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
}

/* =========================================================================
   PRINT / PDF
   - 書き出し時は 遊ゴシック に切り替え（ユーザーが改変しやすいため）
   - PDFは基本フォント 16pt で運用する（Web用の 18px 下限はPDFには適用しない）
   ========================================================================= */
@media print {
  html, body, h1, h2, h3, h4, h5, p, a, button, input, textarea,
  select, li, td, th, .section-title, .tagline {
    font-family: var(--font-pdf-jp) !important;
  }
  /* PDF基本フォントサイズ: 16pt（本文・UIの基準。見出しは各 --fs-* を維持） */
  body, p, li, td, th, input, textarea, select {
    font-size: 16pt;
  }
}
.quote-copy::before { content: "「"; }
.quote-copy::after  { content: "」"; }

/* =========================================================================
   HOVER STATES — 新デザインのインラインホバー指定(style-hover)から移植
   ========================================================================= */

/* ヘッダーCTA「無料診断を依頼する」 */
.dc-cta-header:hover { background: var(--denet-red-dark); }

/* ヒーロー主CTA「定額プランが使えるか無料診断を依頼する」 */
.dc-cta-hero-primary:hover { background: var(--denet-red-dark); transform: translateY(-1px); }

/* ヒーロー副CTA「まずは話の続きを読む」 */
.dc-cta-hero-secondary:hover { background: var(--ink); color: #fff; }

/* OFFERブロック下部CTA「定額プランが使えるか無料診断を依頼する」 */
.dc-cta-offer:hover { background: var(--denet-red-dark); transform: translateY(-1px); }

/* =========================================================================
   FAQ（details/summary）— 変換元の <helmet> から移植
   ========================================================================= */
details.faq > summary { list-style: none; }
details.faq > summary::-webkit-details-marker { display: none; }

/* ============================================================
   お問い合わせフォーム（#contact）
   ※ 送信仕様は既存3LPと同一。スタイルはDenetデザイントークンで実装
   ============================================================ */
.contact-card {
  max-width: 640px;
  margin: 0 auto;                 /* 赤ブロック内包：見出し/説明との余白は上のp(margin-bottom:32px)で確保 */
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 16px;            /* 赤ブロック(24px)の内側で額縁のように映える角丸 */
  padding: 40px 40px 36px;
  box-shadow: var(--shadow-md);
  text-align: left;               /* 赤ブロックのtext-align:centerを継承しないよう明示 */
}
.contact-form .field { margin-bottom: var(--space-5); }
.contact-form label {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.contact-form .req {
  display: inline-block;
  margin-left: var(--space-2);
  background: var(--denet-red-50);
  color: var(--denet-red);
  font-size: var(--fs-note);
  font-weight: var(--fw-bold);
  padding: 2px 10px;
  border-radius: 4px;
  vertical-align: middle;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  line-height: 1.6;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.contact-form textarea { resize: vertical; min-height: 130px; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--denet-red);
  box-shadow: var(--focus-ring);
}

/* ハニーポット（完全に画面外） */
.cf-hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--space-1) 0 var(--space-6);
}
.field-check input {
  margin-top: 4px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--denet-red);
}
.field-check label {
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--fg-2);
  margin-bottom: 0;
  line-height: 1.7;
}
.field-check a { color: var(--denet-red); text-decoration: underline; }

.cf-submit { text-align: center; }
.cf-submit button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 420px;
  background: var(--denet-red);
  color: #fff;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  padding: 17px 38px;
  border: none;
  border-radius: var(--radius-md);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.cf-submit button:hover {
  background: var(--denet-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200, 22, 29, 0.25);
}
.grecaptcha-badge { z-index: 20; }

@media (max-width: 768px) {
  /* 赤ブロック(inline padding:64px 32px)とカードpaddingの二重余白で横幅が過小にならないよう縮小 */
  #contact > div > div:first-child { padding: 40px 16px !important; }
  .contact-card { padding: 28px 20px 24px; }
  .contact-form .field { margin-bottom: var(--space-4); }
  .cf-submit button { max-width: 100%; }
}