/* ===== 色やサイズの設定（ここを変えると全体に反映されます） ===== */
:root {
  --red: #BE1E2D;         /* メイン（コーポレートレッド） */
  --red-dark: #9A1824;    /* 濃い赤（ホバー時） */
  --text: #0E1F25;        /* 本文・見出しの文字色（ロゴの文字色） */
  --text-sub: #5A6368;    /* 補助のグレー文字 */
  --white: #FFFFFF;       /* 文字やアイコンの白（赤や写真の上） */
  --bg: #FFFDFA;          /* ページの背景（わずかに温かみのある白） */
  --gray-bg: #F5F3F0;     /* 交互のグレー背景（温かみのあるグレー） */
  --line: #DCD8D3;        /* 区切り線（背景に合わせて少し温かい色に） */
  --placeholder: #D9D5D0; /* 仮の写真枠 */
  --radius: 4px;          /* 角丸（最大でもこの程度） */
}

/* ===== 基本 ===== */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;   /* ページ内リンクで移動したとき、見出しが固定ヘッダーの下に隠れないように */
}

body {
  margin: 0;
  font-family: "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight: 500;          /* 游ゴシックは細く見えやすいので少し太めに */
  color: var(--text);
  background: var(--bg);
  line-height: 1.9;
  font-size: 16px;
  /* ===== 日本語の改行を自然にする設定 ===== */
  word-break: auto-phrase;   /* 文節の切れ目で改行（Chrome/Edge対応） */
  line-break: strict;        /* 行頭に「、」「。」や小さい「っ」などが来ないように */
  overflow-wrap: anywhere;   /* はみ出し防止 */
}

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; }

/* 見出しは行の長さを均等に */
h1, h2, h3, h4, summary { text-wrap: balance; }
/* 本文の段落は、最終行に1〜2文字だけ残るのを防ぐ */
p { text-wrap: pretty; }

/* このまとまりの途中では改行しない（iPhoneのSafari用。HTMLで <span class="nowrap">〜</span> と囲む） */
.nowrap { display: inline-block; }

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ===== ヘッダー（赤帯） ===== */
.site-header {
  background: var(--red);
  color: var(--white);
  /* スクロールしても画面の上に固定（ブログ・電話番号がいつでも押せるように） */
  position: sticky;
  top: 0;
  z-index: 90;   /* 写真などより手前に。スマホ下の固定ボタン（100）よりは後ろ */
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}
.logo { display: block; }
.logo img {
  display: block;
  height: 40px;    /* ロゴの大きさはここで調整（横幅は自動） */
  width: auto;
}
/* hidden を付けた要素は必ず隠す（「ブログ」リンクの表示切替で使用） */
[hidden] { display: none !important; }

/* ヘッダー右側（ブログリンク＋電話番号） */
.header-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-link {
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.header-link:hover { text-decoration: underline; }
.header-tel {
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.header-tel-label {
  font-size: 0.8em;
  margin-right: 2px;
}

/* ===== ボタン ===== */
.btn {
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  padding: 15px 24px;
  border-radius: 5px;
  border: 2px solid transparent;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.3s;
}
/* 基本のボタン：赤地＋白文字 */
.btn-primary {
  background: var(--red);
  color: var(--white);
}
.btn-primary:hover { background: var(--red-dark); }

/* 写真の上の電話ボタン：白枠＋白文字 */
.btn-outline {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.15); }

/* 白背景の電話ボタン（スマホ固定ボタン）：赤枠＋赤文字 */
.btn-outline-red {
  background: var(--bg);
  color: var(--red);
  border-color: var(--red);
}
.btn-outline-red:hover { background: var(--gray-bg); }

/* ===== 1. ファーストビュー ===== */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  padding: 80px 0 88px;
  min-height: 560px;
  display: flex;
  align-items: center;
  background: #4B5156;   /* 写真の読み込み前に見える色 */
}
/* 背景の写真（枠いっぱいに広げ、はみ出た部分は切り取り） */
.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 写真の上に重ねる暗い半透明の膜（白い文字を読みやすくするため。濃さは最後の数字 0.5 で調整） */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
.hero .container {
  position: relative;
  z-index: 2;   /* 文字を写真と膜より手前に */
  width: 100%;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.hero .btn { text-shadow: none; }
.hero-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  padding-left: 12px;
  border-left: 4px solid var(--red);
  margin-bottom: 24px;
}
/* 小ラベルの「無料ネットワークセキュリティ診断」は常に2行目に */
.hero-label .nowrap:last-child { display: block; }
.hero-title {
  font-size: min(6.6vw, 26px); /* 狭いスマホでも「ネットワークの“入り口”を」が1行に収まる大きさ */
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 20px;
}
/* 「入り口」の強調：白の太字＋赤い下線 */
.accent {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
}
.hero-sub {
  font-size: 16px;
  margin-bottom: 32px;
}
.hero-buttons {
  display: grid;
  gap: 12px;
}

/* ===== セクション共通 ===== */
.section { padding: 60px 0; }
.section-gray { background: var(--gray-bg); }

/* 見出し（h2） */
.section-title {
  font-size: min(28px, 7.5vw);
  font-weight: 700;
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 40px;
}
/* 見出しの上の赤い＋マーク（現サイトの plus.svg。もともと赤 #BE1E2D なので色の調整は不要） */
.section-title::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 16px;
  background: url("img/plus.svg") center / contain no-repeat;
}
/* 「よくある思い込み」の見出し1行目は単独の行に */
.title-line1 { display: block; }

.sub-title {
  font-size: 18px;
  font-weight: 700;
  margin: 40px 0 16px;
}
.area-text .sub-title { margin-top: 0; }

/* ===== 番号つきの項目（思い込み・診断でわかること・業種） ===== */
.points {
  display: grid;
  gap: 0;
}
.point {
  padding: 28px 0;
  border-top: 1px solid var(--line);   /* 箱ではなく区切り線で整理 */
}
.point:last-child { border-bottom: 1px solid var(--line); }
.point-num {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
  margin-bottom: 14px;
  font-family: "Helvetica Neue", Arial, sans-serif; /* 数字は欧文フォントで引き締める */
  letter-spacing: 0.02em;
}
.point-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
}
/* 項目内の箇条書き（先頭に小さな赤い四角） */
.point-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.75;
}
.point-list li {
  position: relative;
  padding-left: 16px;
}
.point-list li + li { margin-top: 8px; }
.point-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  background: var(--red);
}
/* 出典などの小さな注記 */
.point-source {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-sub);
}

/* ===== 写真（共通）：角5px・影なし ===== */
.photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* 「診断でわかること」：スマホは 見出し → 写真 → 本文 の順 */
.split {
  display: grid;
  grid-template-areas:
    "title"
    "photo"
    "body";
}
.split-title { grid-area: title; }
.split-photo { grid-area: photo; margin-bottom: 32px; }
.split-body  { grid-area: body; }

/* 「診断の流れ」の上の写真：16:9の枠いっぱいに表示し、はみ出た部分は切り取り */
.photo-banner {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center top;   /* 顔が写真の上端ぎりぎりにあるので、上を基準にして顔を切らない（下の資料は少し切れる） */
  margin-bottom: 48px;
}

/* STEP3 の下の写真 */
.step-photo { margin-top: 16px; }

/* ===== 3. サンプルレポート ===== */
.reports {
  margin-top: 48px;
  display: grid;
  gap: 16px;              /* スマホは縦並び */
  align-items: start;
}
.reports img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: zoom-in;
}
.reports-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-sub);
}

/* 拡大表示の画面 */
.zoom-dialog {
  width: 100%;
  max-width: 1000px;
  max-height: 100%;
  padding: 48px 12px 12px;
  border: none;
  background: transparent;
  overflow: auto;
}
.zoom-dialog::backdrop { background: rgba(14, 31, 37, 0.85); }
.zoom-dialog img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--white);
  border-radius: var(--radius);
}
.zoom-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: var(--white);
  color: var(--text);
  border: none;
  border-radius: var(--radius);
  padding: 6px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ===== 4. 診断の流れ ===== */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* スマホ：縦並び。左に大きな番号、番号の下から次のSTEPまで縦線でつなぐ */
.step {
  position: relative;
  padding: 0 0 40px 76px;
}
.step:last-child { padding-bottom: 0; }
.step::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 64px;
  bottom: 12px;
  width: 2px;
  background: var(--red);
  opacity: 0.35;
}
.step:last-child::before { display: none; }
.step-num {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  text-align: center;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--red);
}
.step-num span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}
.step-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 8px;
  padding-top: 14px;
}

/* 「その場で売り込みはしません」 */
.promise {
  margin-top: 48px;
  background: var(--gray-bg);   /* 白背景のセクション用。グレー背景のセクションでは下の行で白に */
  border-left: 5px solid var(--red);
  border-radius: var(--radius);
  padding: 24px 20px;
  font-size: min(20px, 5.4vw);   /* スマホで「その場で売り込みはしません。」が1行に収まる大きさ */
  font-weight: 700;
  line-height: 1.6;
  color: var(--red);
}
.section-gray .promise { background: var(--bg); }
.promise-sub {
  display: inline-block;
  margin-top: 6px;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

/* ===== 2-2. SCS評価制度 ===== */
/* 見出しを3行に固定（行の途中では折り返さない） */
.h-line {
  white-space: nowrap;
  display: inline-block;
}
/* 文字サイズを画面幅に合わせて可変に（2行目の14文字がスマホでも1行に収まる）。
   3行固定を優先するため、行の長さをそろえる設定・文節改行は効かせない */
.section-title.title-3lines {
  font-size: clamp(20px, 6vw, 52px);
  text-wrap: wrap;
  word-break: normal;
}
/* 2行目の「セキュリティ対策の説明」だけ赤 */
.title-em { color: var(--red); }
/* 見出しの下に小さく添える一文 */
.section-kicker {
  margin: -24px 0 32px;
  font-size: 15px;
  font-weight: 700;
  color: var(--red);
}
/* 読み物の本文（行の長さを抑えて読みやすく） */
.prose { max-width: 760px; }
.prose p + p { margin-top: 1em; }
.prose .point-source { margin-top: 20px; }

/* ===== 4-2. 取扱商材 ===== */
/* 見出しの下のリード文 */
.section-lead {
  margin: -16px 0 40px;
  max-width: 720px;
}
.products {
  display: grid;
}
.product {
  padding: 28px 0;
  border-top: 1px solid var(--line);   /* 箱ではなく区切り線で整理 */
}
.products > .product:last-child { border-bottom: 1px solid var(--line); }
/* ===== UTM ＋ Guardian のまとまり ===== */
.duo { padding: 8px 0 48px; }
.duo-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}
.duo-lead { margin: 8px 0 24px; }

/* 守る範囲の図（スマホ：縦並び、矢印↓） */
.guard-map {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  background: var(--gray-bg);
  border-radius: 5px;
  padding: 20px;
}
.gm-box {
  background: var(--white);
  border-radius: 5px;
  padding: 12px 16px;
  text-align: center;
}
.gm-name {
  font-weight: 700;
  line-height: 1.5;
}
.gm-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-sub);
}
.gm-arrow {
  align-self: center;
  color: var(--red);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}
.gm-arrow::before { content: "↓"; }
/* グレー背景のセクションに置いたときは、図の背景を白に（背景に溶けないように） */
.section-gray .guard-map { background: var(--bg); border: 1px solid var(--line); }
.section-gray .gm-net { border: 1px solid var(--line); }
/* ① UTM：赤い実線枠 */
.gm-utm { border: 2px solid var(--red); }
.gm-utm .gm-name { color: var(--red); }
/* 御社の社内：赤い点線枠＋上部に赤帯ラベル */
.gm-office {
  border: 2px dashed var(--red);
  padding: 0 0 14px;
  overflow: hidden;
}
.gm-label {
  background: var(--red);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  padding: 6px 10px;
  margin-bottom: 10px;
}
.gm-tags {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.gm-tags li {
  font-size: 12px;
  line-height: 1.5;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}

/* 2枚のカード（同じ構成） */
.duo-cards {
  display: grid;
  gap: 20px;
  margin-top: 32px;
}
.duo-card {
  display: flex;            /* ボタンをカードの一番下にそろえるため */
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: 5px;
  padding: 20px 20px 24px;
}
.duo-card-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 4px;
}
.duo-card-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 12px;
  text-wrap: wrap;   /* 行の長さをそろえる設定を外し、バッジが見出しの横に並ぶように */
}
.duo-card-title .badge { margin-left: 10px; vertical-align: 0.15em; }
/* たとえ話のグレーの帯 */
.duo-card-metaphor {
  background: var(--gray-bg);
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 14px;
}
.duo-card-metaphor strong { font-weight: 700; }
.duo-card-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-sub);
}
/* まとめの一文（後半を赤） */
.duo-summary {
  margin-top: 32px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}
.duo-summary-em { color: var(--red); }

/* 「特許取得」の小さなバッジ（白地＋赤枠＋赤文字。派手にしない） */
.badge {
  display: inline-block;
  padding: 1px 8px;
  background: var(--white);
  border: 1px solid var(--red);
  border-radius: 5px;
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
/* ===== 各カード最下部の「相談する」ボタンとリンク ===== */
/* スマホ：ボタンの下にリンク（縦並び） */
.card-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: auto;      /* カードの一番下に寄せる */
  padding-top: 20px;
}
/* 小さめのボタン：白地＋赤枠＋赤文字、角5px */
.btn-small {
  display: inline-block;
  padding: 8px 16px;
  background: var(--white);
  border: 1px solid var(--red);
  border-radius: 5px;
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 0.3s;
}
.btn-small:hover { background: var(--gray-bg); }
/* カタログのテキストリンク（頭に小さな書類アイコン。CSS内のSVGで描画、画像ファイルなし） */
.doc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
}
.doc-link::before {
  content: "";
  flex-shrink: 0;
  width: 14px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Cpath d='M1 1h8l4 4v11H1z M9 1v4h4 M3.5 8.5h7 M3.5 11h7 M3.5 13.5h5' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 17'%3E%3Cpath d='M1 1h8l4 4v11H1z M9 1v4h4 M3.5 8.5h7 M3.5 11h7 M3.5 13.5h5' fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.doc-link:hover { color: var(--red-dark); }

/* セクション最下部の注記（小さめのグレー文字） */
.section-notes {
  margin-top: 40px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-sub);
}
.section-notes p + p { margin-top: 4px; }
.product-title {
  margin-bottom: 10px;
  line-height: 1.5;
}
/* 分類名（回線・入口の防御 など）。頭に赤い＋ */
.product-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--red);
  margin-bottom: 6px;
}
.product-cat::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url("img/plus.svg") center / contain no-repeat;
}
/* 商材名 */
.product-name {
  display: block;
  font-size: 20px;
}
.products-note {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-sub);
}
.products-note a {
  margin-left: 0.5em;
  color: var(--red);
  font-weight: 700;
}

/* ===== 堀場のひとこと（顔アイコン＋吹き出し） ===== */
.talk {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 48px;
  max-width: 760px;
}
/* 丸い顔アイコン（今は仮のグレー丸。img に差し替えても同じ見た目になります） */
.face {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--placeholder);
  object-fit: cover;
}
.bubble {
  --bubble-bg: var(--gray-bg);  /* 白背景のセクションではグレーの吹き出し */
  position: relative;
  flex: 1;
  background: var(--bubble-bg);
  border-radius: 5px;
  padding: 14px 16px;
}
.section-gray .bubble { --bubble-bg: var(--bg); } /* グレー背景のセクションでは白の吹き出し */
/* 吹き出しのしっぽ（顔の方向を指す三角） */
.bubble::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 16px;
  border-style: solid;
  border-width: 8px 10px 8px 0;
  border-color: transparent var(--bubble-bg) transparent transparent;
}
.bubble-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 4px;
}
/* 手書き風フォントはこの吹き出しの文章だけ */
.bubble-text {
  font-family: "Klee One", "Yu Gothic", YuGothic, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.8;
}

/* ===== 4-3. お客さまの声 ===== */
.voices {
  display: grid;
  gap: 20px;
}
.voice {
  background: var(--bg);
  border-radius: 5px;
  padding: 24px;
}
.voice-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
/* 小さな仮の写真枠 */
.voice-photo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background: var(--placeholder);
  color: var(--text-sub);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}
.voice-who {
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
}
.voice-text { font-size: 15px; }

/* ===== 5. 代表あいさつ ===== */
.photo-portrait {
  display: block;
  width: 220px;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;          /* 枠いっぱいに表示（はみ出た部分は切り取り） */
  object-position: 50% 20%;   /* 顔が切れないよう、やや上を基準に */
  border-radius: var(--radius);
  margin: 0 0 28px;
}
.greeting-text > p + p { margin-top: 1em; } /* 段落の間をあける */
.motto {
  color: var(--red);
  font-weight: 700;
}
/* プロフィールボックス（グレー背景） */
.profile {
  margin-top: 32px;
  background: var(--gray-bg);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.8;
}
.profile p + p { margin-top: 6px; }
.profile-name {
  font-size: 16px;
  font-weight: 700;
}
.profile-career {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-sub);
}
.profile-label { font-weight: 700; }

/* ===== 6. 対応エリア ===== */
.areas {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}
.areas li {
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 県名の前の小さな赤い＋ */
.areas li::before {
  content: "";
  width: 14px;
  height: 14px;
  background: url("img/plus.svg") center / contain no-repeat;
}

/* 対応エリアの地図（img/tokai-map.svg）：スマホは横幅いっぱい、最大360px */
.area-map {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin: 32px auto 0;
}

/* ===== 7. よくある質問 ===== */
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 17px;
  padding: 20px 32px 20px 0;
  position: relative;
  list-style: none;     /* 標準の三角マークを消す */
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "Q. ";
  color: var(--red);
}
/* 右端の開閉マーク（＋／−） */
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
  font-size: 24px;
  font-weight: 700;
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  padding: 0 0 24px 1.6em;
  color: var(--text);
}

/* ===== 8. 申込 ===== */
.apply {
  text-align: center;
}
.apply .section-title::before { margin-left: auto; margin-right: auto; } /* ＋マークも中央に */
.apply-lead {
  margin: -8px 0 32px;
}
.btn-large {
  display: block;
  max-width: 480px;
  margin: 0 auto;
  padding: 22px 24px;
  font-size: 19px;
}
/* ボタン内のメールアイコン（mail.svg は赤なので、形だけ使って白く表示） */
.btn-mail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.btn-mail::before {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 20px;
  background: var(--white);
  -webkit-mask: url("img/mail.svg") center / contain no-repeat;
  mask: url("img/mail.svg") center / contain no-repeat;
}
.apply-tel {
  margin-top: 20px;
  font-size: 14px;
}
.apply-tel a {
  color: var(--red);
  font-weight: 700;
}

/* ===== フッター（赤帯） ===== */
.site-footer {
  background: var(--red);
  color: var(--white);
  padding: 40px 0;
  /* スマホでは下に固定ボタン分（約80px）の余白を足して、住所や電話番号が隠れないように */
  padding-bottom: calc(40px + 80px + env(safe-area-inset-bottom));
  font-size: 14px;
}
.footer-logo {
  display: block;
  height: 56px;
  width: auto;
  margin-bottom: 20px;
}
.footer-name {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
}
/* フッターの所在地（拠点ごとに1段落。スマホでは拠点名を住所の上に） */
.footer-address + .footer-address { margin-top: 6px; }
.footer-branch {
  display: block;
  font-weight: 700;
}
@media (min-width: 768px) {
  .footer-branch {
    display: inline-block;
    min-width: 6em;   /* PCでは拠点名の幅をそろえて住所の頭をそろえる */
    margin-right: 0.5em;
  }
}

/* フッターのリンク（ブログ・プライバシーポリシー） */
.footer-links {
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.footer-links a { color: var(--white); }

/* ===== 下層ページ（ブログ・プライバシーポリシー）共通 ===== */
/* 上下の余白だけ指定（左右は .container の余白を使う） */
.page-head { padding-top: 48px; padding-bottom: 8px; }
.page-head .section-title { margin-bottom: 16px; }
.page-lead { color: var(--text-sub); }
.page-body { padding-top: 32px; padding-bottom: 72px; }
.back-link {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 700;
  color: var(--red);
}
/* 読みやすい本文幅 */
.narrow { max-width: 760px; }

/* カテゴリのラベル（小さめ・角5px） */
.cat-label {
  display: inline-block;
  padding: 1px 10px;
  border: 1px solid var(--red);
  border-radius: 5px;
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}

/* ===== ブログ記事一覧 ===== */
.cat-filter {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-filter button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
  color: var(--text);
  cursor: pointer;
}
.cat-filter button[aria-pressed="true"] {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.post-card a {
  display: block;
  height: 100%;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: 5px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s;
}
.post-card a:hover { border-color: var(--red); }
.post-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 13px;
  color: var(--text-sub);
  margin-bottom: 8px;
}
.post-card-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 8px;
}
.post-card-excerpt {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-sub);
}
.post-empty {
  padding: 40px 20px;
  text-align: center;
  background: var(--gray-bg);
  border-radius: 5px;
  color: var(--text-sub);
}

/* ===== ブログ記事 ===== */
.post-title {
  font-size: min(26px, 7vw);
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 12px;
}
.post-body h2 {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  margin: 48px 0 16px;
  padding-left: 12px;
  border-left: 4px solid var(--red);
}
.post-body p + p { margin-top: 1em; }
/* 記事内の小見出し（h2の下の項目） */
.post-body h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--red);
  margin: 36px 0 14px;
}
/* この記事の結論（3行のボックス） */
.post-summary {
  margin: 32px 0 8px;
  padding: 20px 24px;
  background: var(--gray-bg);
  border-left: 5px solid var(--red);
  border-radius: 5px;
}
.box-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 8px;
}
/* 現場から一言（代表の経験） */
.post-voice {
  margin: 48px 0 0;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
}
.post-voice .box-label::before { content: "＋ "; }
/* 無料診断の案内ボックス */
.post-cta {
  margin: 56px 0 0;
  padding: 28px 24px;
  background: var(--gray-bg);
  border-top: 4px solid var(--red);
  border-radius: 5px;
  text-align: center;
}
.post-cta-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 8px;
}
.post-cta .btn {
  display: inline-block;
  margin-top: 20px;
}
.post-cta-tel {
  margin-top: 12px;
  font-size: 14px;
}
.post-cta-tel a {
  color: var(--red);
  font-weight: 700;
}
/* 著者欄 */
.post-author {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--text-sub);
}
.post-author strong { color: var(--text); }

/* 記事の画像（角5px、本文の幅いっぱい） */
.post-eyecatch {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* アイキャッチは横長16:9に切り取り */
  object-fit: cover;
  border-radius: 5px;
  margin-top: 20px;
}
.post-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  margin: 0 0 20px;
}
.post-body .point-list { margin: 1em 0; font-size: 16px; }
/* 数字などの強調（赤の太字） */
.em-red { color: var(--red); font-weight: 700; }
/* 番号付きリスト（まとめなど） */
.step-list {
  margin: 1em 0 0;
  padding-left: 1.6em;
}
.step-list li + li { margin-top: 8px; }
.post-body .step-list + p { margin-top: 1em; }
.step-list li::marker { color: var(--red); font-weight: 700; }

/* 記事内の図解（守る範囲のちがい）。トップページの図（.guard-map）を土台に使う */
.av-map {
  flex-wrap: wrap;
  margin: 8px 0 24px;
}
.av-office { padding: 12px; }
.av-devices {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.av-devices li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}
/* 赤い盾マーク＋「ウイルスソフト」 */
.shield {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
}
.shield::before, .shield-icon {
  content: "";
  display: inline-block;
  width: 11px;
  height: 13px;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M5.5 0L11 2v4.2c0 3.3-2.3 5.8-5.5 6.8C2.3 12 0 9.5 0 6.2V2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 13'%3E%3Cpath d='M5.5 0L11 2v4.2c0 3.3-2.3 5.8-5.5 6.8C2.3 12 0 9.5 0 6.2V2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 凡例 */
.av-legend {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text);
}
.av-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.dash-icon {
  display: inline-block;
  width: 18px;
  height: 12px;
  border: 2px dashed var(--red);
  border-radius: 2px;
}

/* 比較表（スマホでは横スクロール） */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 0;
}
.compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.7;
  background: var(--white);
}
.compare-table th, .compare-table td {
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  background: var(--red);
  color: var(--white);
  font-weight: 700;
}
.compare-table thead th:first-child { background: var(--gray-bg); }
.compare-table tbody th {
  background: var(--gray-bg);
  font-weight: 700;
  white-space: nowrap;
}
.table-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-sub);
  text-align: center;
}

/* 記事一覧カードの画像 */
.post-card-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 14px;
}

/* ===== お問い合わせフォーム ===== */
.text-link { color: var(--red); font-weight: 700; }
.contact-form { margin-top: 8px; }
.form-row { margin-bottom: 22px; }
.form-row > label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin-bottom: 6px;
}
.req, .opt {
  display: inline-block;
  padding: 0 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.7;
}
.req { background: var(--red); color: var(--white); margin-left: 6px; }
.opt { background: var(--gray-bg); color: var(--text-sub); border: 1px solid var(--line); margin-left: 6px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 16px;            /* 16px未満だとiPhoneで勝手に拡大されるため */
  font-family: inherit;
  color: var(--text);
  background: var(--white);
  border: 1px solid #C9C4BE;
  border-radius: 5px;
}
.contact-form textarea { resize: vertical; line-height: 1.7; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--red);
  border-color: var(--red);
}
.form-agree label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  cursor: pointer;
}
.form-agree input { width: 20px; height: 20px; accent-color: var(--red); flex-shrink: 0; }
.contact-form .btn-large { width: 100%; max-width: 480px; margin: 8px auto 0; }
/* ロボット対策の見えない入力欄 */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* 入力エラーの表示 */
.form-errors {
  margin-bottom: 28px;
  padding: 16px 20px;
  border: 2px solid var(--red);
  border-radius: 5px;
  background: var(--white);
}
.form-errors-title { font-weight: 700; color: var(--red); margin-bottom: 6px; }
.form-errors ul { margin: 0; padding-left: 1.3em; font-size: 15px; }

/* ヘッダーの「お問い合わせ」はPCだけ（スマホは幅が足りないため。フッターから行ける） */
.header-link-pc { display: none; }
@media (min-width: 768px) {
  .header-link-pc { display: inline; }
}

/* ===== プライバシーポリシー ===== */
.policy h2 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  margin: 40px 0 12px;
  padding-left: 12px;
  border-left: 4px solid var(--red);
}
.policy p + p, .policy p + ul, .policy ul + p { margin-top: 0.8em; }
.policy ul { padding-left: 1.4em; margin: 0.6em 0 0; }
.policy li + li { margin-top: 4px; }
.policy a { color: var(--red); }
.policy-info {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
}
.policy-info dt { font-weight: 700; }
.policy-info dd { margin: 0; }
.policy-date {
  margin-top: 48px;
  text-align: right;
  color: var(--text-sub);
}

/* ===== スマホ用の固定ボタン ===== */
.fixed-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 8px;
  padding: 8px 12px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom)); /* iPhoneの画面下のバーと重ならないように */
  background: var(--bg);
  border-top: 1px solid var(--line);
  z-index: 100;
}
.fixed-cta .btn { padding: 12px 8px; font-size: 15px; }

/* ===== スクロールで下からふわっと表示 =====
   head の小さなプログラムが、動きを減らす設定でない人にだけ reveal-on を付けます。
   付いていないとき（設定オフ・古いブラウザ）は、最初から普通に表示されます。 */
.reveal-on .section .container > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-on .section .container > .is-visible {
  opacity: 1;
  transform: none;
}

/* ===== パソコン・タブレット（幅768px以上）での表示 ===== */
@media (min-width: 768px) {
  body { font-size: 17px; }
  .site-footer { padding-bottom: 48px; } /* パソコンでは固定ボタンがないので余白は不要 */
  .fixed-cta { display: none; }      /* 固定ボタンはスマホだけ */

  .site-header .container { height: 88px; }
  .logo img { height: 56px; }
  .header-tel { font-size: 22px; }

  .hero {
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 100px 0;
  }
  .hero .container { width: 100%; }
  .hero-label { font-size: 15px; }
  .hero-title { font-size: 48px; line-height: 1.45; }
  .hero-sub { font-size: 20px; margin-bottom: 40px; }
  .hero-buttons {
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 16px;
  }

  .section { padding: 100px 0; }
  .section-title {
    font-size: clamp(48px, 5vw, 56px);
    margin-bottom: 56px;
  }
  .section-title::before { width: 36px; height: 36px; margin-bottom: 24px; }

  /* 番号つき項目：横に並べ、区切り線は上だけ */
  .points { column-gap: 48px; }
  .points-2 { grid-template-columns: 1fr 1fr; }
  .points-3 { grid-template-columns: repeat(3, 1fr); }
  .point, .point:last-child { border-bottom: none; padding: 32px 0 0; }
  .points-2 .point:nth-child(n+3) { margin-top: 40px; } /* 2段目との間 */
  .point-num { font-size: 56px; }

  /* 取扱商材：2×2 */
  .section-lead { margin: -24px 0 56px; }
  /* 取扱商材：1段目は UTM ＋ Guardian のまとまり、2段目は2列、最後の1枚は横長 */
  .products { grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 40px; }
  .product, .products > .product:last-child { border-bottom: none; padding: 32px 0 0; }
  .duo { grid-column: 1 / -1; padding-bottom: 16px; }
  .products > .product:last-child { grid-column: 1 / -1; }
  .product-name { font-size: 22px; }

  /* UTM ＋ Guardian：図は横一列（矢印→）、カードは2列 */
  .duo-title { font-size: 28px; }
  .duo-lead { margin-bottom: 32px; }
  .guard-map {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 28px;
  }
  .gm-box { padding: 12px; }
  .gm-net { flex: 0 0 160px; }   /* 「インターネット」が1行に収まる幅 */
  .gm-utm { flex: 0 0 180px; }   /* 「① 入口で防ぐ UTM」が1行に収まる幅 */
  .gm-net .gm-name, .gm-utm .gm-name { white-space: nowrap; }
  .gm-office { flex: 1; align-self: stretch; }
  .gm-arrow::before { content: "→"; }
  .duo-cards { grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
  .duo-card { padding: 24px 24px 28px; }
  .duo-summary { font-size: 22px; margin-top: 40px; }

  /* PC：ボタンの横にリンク */
  .card-actions {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;   /* 幅が足りないときだけリンクが下に回る */
    gap: 12px 16px;
  }
  .doc-link { font-size: 13px; }
  /* ファイルサーバー・回線のカードもボタンの高さをそろえる */
  .products > .product { display: flex; flex-direction: column; }

  .reports { grid-template-columns: 1fr 1fr; gap: 24px; } /* レポートはPCで横並び */

  /* 「診断でわかること」：左に見出し＋本文、右に写真 */
  .split {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "title photo"
      "body  photo";
    grid-template-rows: auto 1fr;
    column-gap: 56px;
  }
  .split-photo { margin-bottom: 0; align-self: start; }
  .split-body .point + .point { margin-top: 32px; }

  /* 「診断でわかること」：上段に見出しと写真、下段に3本柱（3カラム） */
  .split-wide {
    grid-template-areas:
      "title photo"
      "body  body";
    grid-template-rows: auto auto;
  }
  .split-wide .split-photo { margin-bottom: 56px; }
  .split-wide .split-body .point + .point { margin-top: 0; }
  .section-kicker { margin-top: -32px; }

  .photo-banner { max-width: 960px; margin: 0 auto 64px; } /* PCは最大960pxで中央寄せ */

  /* 診断の流れ：横一列。番号の右から次のSTEPまで線でつなぐ */
  .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 48px;
  }
  .step { padding: 0; }
  .step::before {
    left: 96px;
    right: -32px;
    top: 44px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .step-num {
    position: static;
    width: auto;
    text-align: left;
    font-size: 64px;
    margin-bottom: 20px;
  }
  .step-title { padding-top: 0; }

  .promise { padding: 32px 40px; font-size: 26px; }

  .greeting {
    display: flex;
    gap: 56px;
    align-items: flex-start;
  }
  .photo-portrait { flex-shrink: 0; margin: 0; width: 300px; }

  .areas li { font-size: 28px; }

  /* 下層ページ（ブログ・プライバシーポリシー） */
  .header-nav { gap: 28px; }
  .header-link { font-size: 16px; }
  .page-head { padding-top: 80px; padding-bottom: 16px; }
  .page-body { padding-top: 40px; padding-bottom: 100px; }
  .post-list { grid-template-columns: 1fr 1fr; gap: 24px; }
  .post-card a { padding: 24px 28px; }
  .post-title { font-size: 34px; }
  .post-body h2 { font-size: 24px; }
  .post-cta { padding: 36px 40px; }
  .table-hint { display: none; }   /* PCでは表がはみ出さないので案内は不要 */
  .compare-table { min-width: 0; }
  /* 記事の図は本文幅が狭いので、左の2つの箱を細めにして社内の枠を広く取る */
  .av-map .gm-net { flex: 0 0 120px; }
  .av-map .gm-utm { flex: 0 0 130px; }
  .av-map .gm-office { min-width: 0; }

  /* 対応エリア：左に県名、右に地図 */
  .area-wrap {
    display: grid;
    grid-template-columns: 1fr minmax(0, 480px);
    gap: 48px;
    align-items: center;
    margin-bottom: 24px;
  }
  .area-map { margin: 0; max-width: 480px; } /* PCは最大480px */

  /* お客さまの声：3枚横並び */
  .voices { grid-template-columns: repeat(3, 1fr); gap: 24px; }

  .talk { margin-top: 56px; gap: 18px; }
  .face { width: 80px; height: 80px; }
  .bubble { padding: 20px 28px; }
  .bubble::before { top: 30px; }
  .bubble-text { font-size: 19px; }
  .faq summary { font-size: 19px; padding: 24px 40px 24px 0; }
}

/* 横幅の広いPC（1200px以上）：ファーストビュー左に赤い縦帯（現サイトと同じ演出） */
@media (min-width: 1200px) {
  .hero::before {
    content: "";
    position: absolute;
    z-index: 1;   /* 暗い膜より手前に */
    top: 0;
    bottom: 0;
    left: 24px;
    width: 64px;
    background: rgba(190, 30, 45, 0.85);
  }
  .hero-title { font-size: 56px; }
}