/* gomedia.jp のスタイル（設計書 §7）
   2026-11-03: 案C（書き手の気配）を出発点に、「フリーランス感があるので、もっとコーポレート寄りに」という
   ユーザーの指摘を受けて、案B（端正な情報整理）の骨組みに寄せた（§7-1 の混ぜる作り直し1回）。
   白地と黒、ゴシック、見出しを左・本文を右に置く段組み。
   インラインの style は使わない（CSP のため）。 */

/* Windows の游ゴシック: 「Yu Gothic」とそのまま指定すると細い Regular が選ばれ、かすれて見える（2026-11-03 ユーザー指摘）。
   PC に入っている字体を名前で当て、本文（〜500）は Medium、太字（600〜）は Bold にする。
   local() はネットから読み込まないので、CSP（font-src なし）のままで効く（Mac のヒラギノで確認済み） */
@font-face { font-family: "GM Yu Gothic"; src: local("Yu Gothic Medium"), local("YuGothic-Medium"); font-weight: 100 500; }
@font-face { font-family: "GM Yu Gothic"; src: local("Yu Gothic Bold"), local("YuGothic-Bold"); font-weight: 600 900; }

:root {
  --bg: #ffffff;
  --fg: #111111;
  --sub: #4a4a4a;
  --line: #dddddd;
  --tint: #f3f3f1;
  --sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "GM Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;
  --container: 56rem; /* 2026-11-03: 68rem は横に広がりすぎ（ユーザー指摘） */
  --gutter: 1.5rem;
  --measure: 40em; /* 本文1行は全角40字まで（§7: 35〜40字） */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.85;
  line-break: strict;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 0.25em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* 見出しは文節で折り返す（Chrome のみ。ほかのブラウザでは通常の折り返し） */
h1, h2, h3, h4 { word-break: auto-phrase; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 1; background: var(--bg); padding: 0.5rem 1rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.site-header .inner,
main,
.site-footer .inner {
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ヘッダー: ロゴと社名、2つのリンク。スマホでも隠さずに並べる（§7） */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand img { display: block; width: 40px; height: 40px; }
.brand-name { font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.02em; white-space: nowrap; }
.site-header ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.5rem; font-size: 0.9375rem; font-weight: 600; }
.site-header nav a { text-decoration: none; white-space: nowrap; }
.site-header nav a:hover,
.site-header nav a[aria-current="page"] { text-decoration: underline; }
.nav-contact a { display: inline-block; padding: 0.375rem 1rem; border: 1px solid var(--fg); }
.nav-contact a:hover { background: var(--fg); color: var(--bg); text-decoration: none; }
/* いま開いているページの印は下線にする（黒く塗ると、お問い合わせのページのフォームのボタンと同じに見える） */
.nav-contact a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

/* ページの冒頭 */
.hero { padding: 5rem 0 3.5rem; }
.page-head { padding: 4.5rem 0 2.5rem; border-bottom: 2px solid var(--fg); }
h1 { margin: 0 0 1.25rem; font-size: clamp(1.75rem, 8.6vw, 3.75rem); font-weight: 800; line-height: 1.25; letter-spacing: 0.01em; }
.page-head h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); }
/* 社名の下: 一段大きな見出し（tagline）と、大きさ・太さ・色をそろえた本文（lead）の2段だけにする */
.tagline { margin: 0 0 1.25rem; font-size: clamp(1.25rem, 3.4vw, 1.75rem); font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; word-break: auto-phrase; }
.lead { max-width: var(--measure); color: var(--sub); font-size: 1rem; line-height: 1.9; }
.lead p { margin: 0 0 0.5em; }
.lead p:last-child { margin-bottom: 0; }

/* 会社の基本情報（社名の段の下に一列で。会社としての信頼の手がかり） */
.key-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 2.5rem 0 0;
  border-top: 2px solid var(--fg);
  border-bottom: 1px solid var(--line);
}
.key-facts > div { padding: 0.875rem 1rem; border-left: 1px solid var(--line); }
.key-facts > div:first-child { padding-left: 0; border-left: 0; }
.key-facts dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--sub); }
.key-facts dd { margin: 0.125rem 0 0; font-weight: 700; }

/* セクション: 見出しを左（12分の3）、本文を右に置く */
.section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2rem;
  padding: 4rem 0 0;
}
/* セクションの区切りは、画面の端まで届く線ではなく、見出しの上の印と余白で取る */
main > :last-child:not(.consult) { margin-bottom: 4.5rem; }
.section > h2 { grid-column: 1 / span 3; margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.5; }
/* 見出しの上: 短い黒の印と、英字の小さな見出し（読み上げでは読まない） */
.section > h2::before {
  content: attr(data-en);
  content: attr(data-en) / "";
  display: block;
  min-height: 1.5rem;
  margin-bottom: 0.375rem;
  padding-top: 0.875rem;
  background: linear-gradient(var(--fg), var(--fg)) left top / 2rem 3px no-repeat;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sub);
}
.section > :not(h2) { grid-column: 4 / -1; }
.section p { max-width: var(--measure); }
h3 { margin: 0 0 0.5rem; font-size: 1.125rem; font-weight: 700; line-height: 1.6; }
h4 { margin: 0 0 0.5rem; font-size: 1.1875rem; font-weight: 700; line-height: 1.5; }
h3 a, h4 a { text-decoration: none; }
h3 a:hover, h4 a:hover { text-decoration: underline; }

/* サービス内容: 2つの分野 × 2つのサービス（PCは2列、スマホは1列）。細い枠の札を、間を詰めて並べる */
.services { counter-reset: item; }
.service-group + .service-group { margin-top: 2.25rem; }
.service-group h3 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 800; letter-spacing: 0.04em; }
.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.service-list { gap: 1rem; }
.service-list > li { padding: 1.375rem 1.5rem 1.5rem; border: 1px solid var(--line); }
.service-list > li { counter-increment: item; }
.service-list > li::before {
  content: counter(item, decimal-leading-zero);
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--sub);
}
.service-list p { color: var(--sub); }

/* 私たちの強み: 3つを横に並べる（見出しは上に置き、3つの強みを全幅で見せる。スマホは縦に） */
.section.strengths { display: block; }
.strength-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  counter-reset: strength;
}
.strength-list > li { counter-increment: strength; padding-top: 1.25rem; border-top: 2px solid var(--fg); }
.strength-list > li::before {
  content: counter(strength, decimal-leading-zero);
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #707070;
  font-variant-numeric: tabular-nums;
}
.strength-list h3 { margin: 0 0 0.625rem; font-size: 1.25rem; font-weight: 800; line-height: 1.5; }
.strength-list p { color: var(--sub); }

/* 続きへのリンク */
.more { margin-top: 1.5rem; }
.more a { font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--fg); padding-bottom: 0.125rem; }
.more a::after { content: " →"; }
.more a:hover { border-bottom-width: 2px; }

/* お問い合わせ: 枠線の囲み（地色は敷かない） */
.section.consult {
  margin: 4.5rem 0;
  padding: 2.5rem 2.5rem 2.75rem;
  border: 1px solid var(--fg);
}
/* サイトの中を移るボタン（お問い合わせのページへ）は白地に黒い枠。
   Google のフォームを開くボタン（.button、黒く塗ったもの）と見た目を分ける */
.consult .more a {
  display: inline-block;
  padding: 0.875rem 2rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--fg);
}
.consult .more a:hover { background: var(--fg); color: var(--bg); }

/* 会社概要の表（項目名の列は、セクションの見出しの列とそろえる） */
.facts { padding: 3rem 0 1rem; }
.facts table { width: 100%; border-collapse: collapse; }
.facts th,
.facts td { padding: 1.125rem 0; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.facts th { width: 25%; padding-right: 2rem; font-weight: 700; font-size: 0.9375rem; white-space: nowrap; }
.addr { display: inline-block; } /* 住所は「北海道室蘭市」「母恋南町」「3丁目…」の切れ目でだけ折り返し、番地の途中で割らない */
.categories { margin: 0; }
.categories dt { font-size: 0.875rem; font-weight: 700; color: var(--sub); }
.categories dd { margin: 0; }
.categories dd + dt { margin-top: 0.75rem; }
.rep-name { font-size: 1.25rem; font-weight: 700; }
.kana { margin-left: 0.5em; font-size: 0.875rem; font-weight: 400; color: var(--sub); }

/* フッター: 黒地 */
.site-footer { background: var(--fg); color: #f2f2f2; font-size: 0.875rem; }
.site-footer .inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 2rem;
  padding-top: 3.5rem;
  padding-bottom: 3rem;
}
.footer-brand { grid-column: 1 / span 5; display: flex; align-items: center; gap: 0.875rem; }
.footer-brand img { width: 40px; height: 40px; filter: invert(1); }
.footer-name { margin: 0 0 0.125rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: 0.02em; }
.footer-meta { margin: 0; color: #bdbdbd; }
.site-footer nav { grid-column: 6 / -1; align-self: center; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 1.75rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.site-footer a:focus-visible { outline-color: #ffffff; }
.copyright { grid-column: 1 / -1; margin: 0; padding-top: 1.5rem; border-top: 1px solid #333333; color: #bdbdbd; }

@media (max-width: 48rem) {
  .section { display: block; padding: 3.5rem 0 0; }
  .section > h2 { margin-bottom: 1.75rem; }
  .section.consult { padding: 2rem 1.5rem 2.25rem; margin: 3.5rem 0; }
  .hero { padding: 3.5rem 0 3rem; }
  .service-list > li { padding: 1.25rem 1.25rem 1.375rem; }
  .key-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .key-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .key-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .page-head { padding: 3.5rem 0 2.5rem; }
  .facts th { width: 7rem; padding-right: 1rem; }
  .site-footer .inner { display: block; }
  .footer-brand { margin-bottom: 1.75rem; }
  .footer-links { justify-content: flex-start; margin-bottom: 2rem; }
}

@media (max-width: 40rem) {
  .service-list,
  .strength-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 30rem) {
  :root { --gutter: 1rem; }
  .site-header .inner { min-height: 4rem; }
  .brand img { width: 36px; height: 36px; }
  .brand { gap: 0.375rem; }
  .brand-name { font-size: 0.875rem; }
  .site-header .inner { gap: 0.75rem; }
  .site-header ul { gap: 0.75rem; font-size: 0.875rem; }
  .nav-contact a { padding: 0.3125rem 0.625rem; }
  .facts th { width: 6.25rem; font-size: 0.875rem; }
}

/* そのほかの業務: タグのように小さく、控えめに（2026-11-03 ユーザー指示） */
.other-services { margin-top: 2.25rem; }
.other-services h3 { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 700; color: var(--sub); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags li {
  padding: 0.125rem 0.75rem;
  border: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--sub);
}
.tags li::before { content: "#"; content: "#" / ""; margin-right: 0.125rem; color: #707070; }

/* スマホではメニューが3つ並ぶので、ロゴの横の社名の文字を隠す（読み上げには残す。社名はページの見出しとフッターにある） */
@media (max-width: 30rem) {
  .brand-name {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* ---------------------------------------------------------------- サービス内容・お問い合わせ・プライバシーポリシー・404 */

.page-lead { max-width: var(--measure); margin: 1.25rem 0 0; color: var(--sub); }

/* ページ内の目次（ページの冒頭に、分野ごとに並べる） */
.toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 40rem; gap: 1.5rem 2rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.toc-cat { margin: 0 0 0.25rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--sub); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc a { font-weight: 700; text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc a::before { content: "↓ "; content: "↓ " / ""; color: var(--sub); font-weight: 400; }

/* 各サービスの詳細 */
.service-detail + .service-detail { margin-top: 3.5rem; }
.service-detail h3 { margin: 0 0 0.75rem; font-size: 1.375rem; font-weight: 800; line-height: 1.5; }
.service-detail > p { margin-bottom: 1.25rem; }
.service-detail h4 { margin: 1.5rem 0 0.375rem; font-size: 0.9375rem; font-weight: 800; }
.service-detail ul,
.plain-list { margin: 0; padding-left: 1.25em; max-width: var(--measure); }
.service-detail li,
.plain-list li { margin: 0.25rem 0; }
:target { scroll-margin-top: 1.5rem; }

/* ご依頼の流れ */
.pricing h3 { margin: 0 0 0.5rem; font-size: 1.0625rem; font-weight: 800; }
.pricing p + h3 { margin-top: 2rem; }
.flow { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: var(--measure); }
.flow li { counter-increment: step; position: relative; padding: 0 0 1.25rem 3rem; }
.flow li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-weight: 800; font-size: 1.125rem; color: #707070; font-variant-numeric: tabular-nums;
}
.flow-step { display: block; font-weight: 800; }

/* ボタン（お問い合わせフォームを開く） */
.button-row { margin: 1.25rem 0 0; }
.button { display: inline-block; padding: 0.875rem 2rem; background: var(--fg); color: var(--bg); font-weight: 700; text-decoration: none; }
.button:hover { background: #333333; }
.button.is-disabled { background: #9a9a9a; cursor: not-allowed; }
.button-note { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--sub); }

/* プライバシーポリシー */
.policy > h2 { font-size: 1.0625rem; }
.policy-dl { margin: 0; max-width: var(--measure); }
.policy-dl dt { font-size: 0.875rem; font-weight: 700; color: var(--sub); }
.policy-dl dd { margin: 0 0 0.75rem; }
.policy-dl dd:last-child { margin-bottom: 0; }
.vendors { display: grid; gap: 1rem; margin: 1.25rem 0; }
.vendor { padding: 1.25rem 1.5rem; border: 1px solid var(--line); }
.vendor h3 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 800; }
.policy-date { color: var(--sub); }

@media (max-width: 48rem) {
  .toc { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .vendor { padding: 1rem 1.25rem; }
}

/* 細かな調整 */
.plain-list + p,
.service-detail ul + p { margin-top: 1rem; }
a[href^="tel:"] { white-space: nowrap; }
.section.consult > h2 { grid-column: 1 / span 4; }
.section.consult > :not(h2) { grid-column: 5 / -1; }

/* とても狭い画面（352px以下）では、メニューの文字と間隔を少し詰める */
@media (max-width: 22rem) {
  .site-header .inner { gap: 0.5rem; }
  .site-header ul { gap: 0.5rem; font-size: 0.8125rem; }
  .nav-contact a { padding: 0.25rem 0.5rem; }
}

/* サービス内容のページ: サービスごとに枠で囲み、番号を付ける。概要と詳細を線で分け、
   「このようなときに」と「進め方の特徴」は PC で左右に並べる（2026-11-03: 文章の切れ目がわかりにくいとの指摘） */
.page-head { counter-reset: svc; }
.service-category .service-detail { counter-increment: svc; padding: 1.75rem 2rem 2rem; border: 1px solid var(--line); }
.service-category .service-detail + .service-detail { margin-top: 1.25rem; }
.service-detail h3::before {
  content: counter(svc, decimal-leading-zero);
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sub);
  font-variant-numeric: tabular-nums;
}
.service-summary { margin: 0; }
.service-body { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.service-block h4 { margin: 0 0 0.5rem; font-size: 0.9375rem; font-weight: 800; }
.service-block ul { margin: 0; }
.service-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 1.5rem; }
@media (max-width: 48rem) {
  .service-category .service-detail { padding: 1.25rem 1.25rem 1.5rem; }
  .service-cols { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/* フォームを開くボタン: 大きく、「↗」で Google の別のページへ移ることを示す（ヘッダーのボタンと見分ける） */
.consult .button { padding: 1.125rem 2.25rem; font-size: 1.0625rem; }
.button-ext { font-weight: 400; }
@media (max-width: 30rem) {
  .consult .button { display: block; text-align: center; padding: 1rem 1.25rem; }
}