/* =========================================================
   赤尾電気管理事務所 新サイト 共通スタイル
   配色は現行サイト（WordPress）トップページのアンバー×ダーク配色を踏襲
   ========================================================= */

:root {
  --ink: #1d1d1f;
  --ink-soft: #55555a;
  --accent: #e8871e;
  --accent-light: #ffb95c;
  --accent-pale: #ffd9a6;
  --accent-deep: #c96a10;
  --black: #08080a;
  --black-soft: #131316;
  --border: #ececee;
  --surface-alt: #f7f5f1;
  --surface-cool: #f5f6f8;
  --card-bg: #ffffff;
  --page-bg: #ffffff;
  /* JS(共通スクリプト.jsのinitFixedHeaderOffset())が読み込み時・リサイズ時に
     ヘッダーの実際の高さで上書きする。JS実行前の一瞬に使われる目安の初期値。 */
  --header-height: 70px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f3efe8;
    --ink-soft: #a9a49c;
    --border: #2a2a2f;
    --surface-alt: #17171b;
    --surface-cool: #15161a;
    --card-bg: #141417;
    --page-bg: #08080a;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--page-bg);
  color: var(--ink);
  font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", "メイリオ", sans-serif;
  line-height: 1.85;
  -webkit-text-size-adjust: 100%;
  /* word-break:keep-allは連続する日本語（漢字・かな）の間の改行も止めてしまい、
     半角スペースの無い長い一文が折り返せず箱からあふれる不具合が起きたため使わない。
     overflow-wrapだけを保険として指定し、通常の折り返しは日本語の標準挙動に任せる。
     数値＋単位や英字・カタカナ用語を割れさせたくない場合は、その部分だけを
     white-space:nowrapのspanで囲んで個別に対応する。 */
  overflow-wrap: break-word;
}

/* 「見出し文言（注記）」のように意味のかたまりが2つ続く見出しで、
   括弧の途中や単語の途中で不自然に改行されるのを防ぐためのユーティリティ。
   例：<span class="nowrap-seg">使用前自己確認</span><wbr><span class="nowrap-seg">（太陽光発電設備）</span>
   日本語の漢字はどの文字の間でも改行できてしまうため、<wbr>だけを置いても
   その手前の単語の途中で先に改行されることがある。各かたまりをnowrapで囲み、
   その境目（<wbr>の位置）でしか改行できないようにする。 */
.nowrap-seg {
  white-space: nowrap;
}

h1, h2, h3, .btn, .card h3 {
  font-family: "Noto Sans JP", sans-serif;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent-deep);
}

@media (prefers-color-scheme: dark) {
  a {
    color: var(--accent-light);
  }
}

.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

/* =========================================================
   ヘッダー（共通JSで注入される）
   ========================================================= */
/* position:stickyは、iPhoneでスクロールした際にヘッダーが画面上部から
   ずれてしまう（下に来てしまう）ことがあるとの指摘（2026-07-27）を受け、
   より確実にビューポートへ張り付くposition:fixedへ変更した。fixedにすると
   ヘッダーが本来占めていたレイアウト上のスペースが無くなるため、その分の
   高さをmainのpadding-topとして確保している（--header-height、
   共通スクリプト.jsのinitFixedHeaderOffset()が実測値を設定する）。 */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
}

/* アイコン・メニューは本文コンテンツ(.container等、max-width:1000pxで中央寄せ)とは
   別扱いにしている。以前はここも1000pxで中央寄せしていたため、画面が広いモニターほど
   左右の余白がどんどん大きくなってしまっていた（1920px幅で片側約460px）。
   max-widthをcalc(80vw + 200px)にすると、余白 = (画面幅 - max-width) / 2 が
   常に「以前の余白(=(画面幅-1000px)/2)のちょうど1/5」になる
   （2026-08-02、ユーザーの指示：今の余白の1/5にしたい）。画面幅が変わっても
   比率が保たれ、1000px以下の狭い画面では従来通り余白が実質0になる。 */
.site-header-inner {
  width: 100%;
  max-width: calc(80vw + 200px);
  margin: 0 auto;
  padding: 0.9rem clamp(1rem, 4vw, 2rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
}

.site-logo-mark {
  flex: 0 0 auto;
  height: 40px;
  width: auto;
  filter: drop-shadow(0 2px 5px rgba(232, 135, 30, 0.25));
  transition: transform 0.25s ease;
}

.site-logo:hover .site-logo-mark {
  transform: rotate(-4deg) scale(1.05);
}

/* 会社名は「HG正楷書体-PRO」で書き出した画像（トリミング済み・透過PNG）を使用。
   フォントの有無に関係なく、誰が見ても同じ書体で表示される。
   ライトモード用（黒系文字）とダークモード用（白系文字）を用意し、OS設定に応じて自動で切り替える。 */
.site-logo-text-img {
  flex: 0 0 auto;
  height: 22.5px;
  width: auto;
}

.site-logo-text-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .site-logo-text-light {
    display: none;
  }
  .site-logo-text-dark {
    display: block;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.4rem 0.1rem;
  position: relative;
  white-space: nowrap;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.site-nav a:hover::after,
.site-nav a.is-current::after {
  transform: scaleX(1);
}

.site-nav a.is-current {
  color: var(--ink);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink);
  border-radius: 999px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* 画面横幅1000pxを境目に、文字のメニューバー⇔ハンバーガーメニューを切り替える
   （2026-08-02、ユーザーの指示）。サイト全体のモバイル判定基準（1000px未満、
   .card_grid--stack-mobileなどで使っているmax-width:999pxと同じ考え方）に合わせた。 */
@media (max-width: 999px) {
  .nav-toggle {
    display: flex;
  }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--page-bg);
    border-bottom: 1px solid var(--border);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .site-nav.is-open {
    max-height: 440px;
  }
  .site-nav a {
    padding: 0.6rem clamp(1rem, 4vw, 2rem);
    border-top: 1px solid var(--border);
  }
  .site-nav a::after {
    display: none;
  }
  .site-header-inner {
    position: relative;
  }
}

/* =========================================================
   ページ見出し共通
   ========================================================= */
main {
  display: block;
  /* ヘッダーがposition:fixedになった分、レイアウト上で無くなった高さを
     ここで補って、本文の先頭がヘッダーの裏に隠れないようにする。 */
  padding-top: var(--header-height);
}

.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(160deg, var(--black) 0%, var(--black-soft) 100%);
  padding: clamp(0.85rem, 2.3vw, 1.35rem) clamp(1rem, 4vw, 2rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* トップページだけ、送電鉄塔の写真を敷く。スクロールのスピードに一切左右されず
   完全に画面へ固定して見せたいので、JSでスクロール量を追いかけてtransformする
   方式（1フレーム遅れが生じ、スクロールのたびに写真が微妙に上下してしまっていた）や
   CSSのbackground-attachment:fixed（ヒーロー自身にoverflow:hiddenがあると環境に
   よって効かないことがある）は使わず、bodyの最初の子要素として置いた完全に独立した
   position:fixedのレイヤー（.hero-photo-fixed）に写真を持たせる。position:fixedは
   ブラウザのコンポジタ側でスクロールと同時に処理されるため、JSの介在が無く
   遅延・ズレが原理的に発生しない。
   ヒーロー部分（.page-hero）自体の背景は無地に戻し、透明の「窓」にしてこの固定
   レイヤーを覗かせる。ヒーローより下のエリアは.page-body-maskという不透明な
   背景を持つラッパーで覆うことで、スクロールでそこに重なった時点で固定写真を
   隠す（下にはみ出さないようにする）。
   （2026-07-27、「スクロールのスピードなどに左右されず完全に画面に固定させたい」
   という指示と、実際に「スクロールするたびに少し上下に写真が動いてしまう」という
   不具合報告を受けて、JSのtransform方式から切り替えた。）

   高さはビューポート全体(100vh)ではなく、共通スクリプト.jsのinitHeroPhotoSize()で
   .page-hero自体の実際の高さをJSで測って明示的に指定している（読み込み時・
   リサイズ時のみ計算するので、スクロール中に毎フレーム動くようなことはなく、
   位置固定の滑らかさには影響しない）。
   ビューポートの高さを基準にしてしまうと、background-size:coverの計算が
   画面の縦横比に左右されてしまい、「どの画面幅でも写真の一番下ぞろえで、
   横幅に応じて上部の見え方だけが変わる」という意図した見え方にならず、
   画面が縦長のスマホだと上下ではなく左右が大きく切れてしまっていた
   （2026-07-27、ユーザーの指摘：どの画面幅であっても写真の一番下ぞろえにしたい）。
   .page-heroとぴったり同じ高さにすることで、ヒーローが終わって白い部分に
   切り替わる境目に、写真の下端がちょうど一致するようにしている
   （2026-07-27、「読み込んだ時に、ヒーロー部分ではない白い部分との境目に
   写真の下端を合わせたい」という指示を受けた。以前は加えていたiPhoneの
   ラバーバンド対策の余白(+200px)は、この境目と写真の下端がその分だけ
   ズレる原因になっていたため取り除いた）。
   一方、上端はヘッダーの真下（top: var(--header-height)）から始め、0（画面最上部）
   までは一切はみ出させない。ヘッダー自体もposition:fixedになった際、レイアウト上
   無くなった高さぶんをmainのpadding-topで補っているため、.page-hero自体も画面上は
   y=0ではなくy=header-heightから始まっている。以前この写真レイヤーをtop:0から
   始めていた際、.page-heroとの間にheader-height分のズレが生じ、ヒーロー下端
   （ボタン付近）がheader-heightぶん写真からはみ出して白く見切れる不具合があった
   （2026-07-27、実機での指摘：「お問い合わせはこちら」ボタンが見切れている）。 */
body[data-page="top"] .hero-photo-fixed {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(8, 8, 10, 0.62) 0%, rgba(8, 8, 10, 0.42) 45%, rgba(8, 8, 10, 0.15) 100%),
    url("20260727_トップページヒーロー背景.jpg");
  background-size: cover;
  /* 横幅が広がってcoverで拡大される時、写真の下側（送電鉄塔の根元側）を基準点にして
     拡大させたいので、縦位置はcenterではなくbottomにする。画面が広がるほど
     はみ出す分は主に上側（空側）が切れていき、下側の位置は動かない。 */
  background-position: center bottom;
}

body[data-page="top"] .page-hero {
  background: none;
  margin-bottom: 0;
}

/* ヒーローより下のエリア（.containerとフッターの間の余白も含む）を不透明にして、
   上のposition:fixedレイヤーが透けて見えないようにする。.container自体はコンテンツを
   1000px幅に中央寄せする役目があるため全幅の背景を持たせられず、その外側にある
   このラッパーに持たせている。フッターとの間の余白は、本来.site-footerの
   margin-topが担っていたが、その部分もこのラッパーで覆えるよう、ここでは同じ
   余白をpadding-bottomとして持たせ、.site-footer側のmargin-topは0にしている
   （合計の見た目の余白自体は変わらない）。 */
body[data-page="top"] .page-body-mask {
  background: var(--page-bg);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

body[data-page="top"] .site-footer {
  margin-top: 0;
}

/* =========================================================
   ふんわりとした光の演出（現行サイトのヒーローと同じ雰囲気）
   ========================================================= */
.glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}

.glow-blob-a {
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  background: var(--accent-light);
  animation: glow-drift-a 8s ease-in-out infinite;
}

.glow-blob-b {
  width: 190px;
  height: 190px;
  margin: -95px 0 0 -95px;
  background: var(--accent);
  animation: glow-drift-b 11s ease-in-out infinite;
  animation-delay: -4s;
}

.glow-blob-c {
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  background: var(--accent-pale);
  animation: glow-drift-c 12s ease-in-out infinite;
  animation-delay: -6s;
}

/* 現行サイトのトップページと同じ動き：3か所の位置をランダムに順番に巡回しながら
   フェードイン→保持→フェードアウトを繰り返す（瞬間移動するように見える）。 */
@keyframes glow-drift-a {
  0% { opacity: 0; top: 8%; left: 78%; transform: scale(0.85); }
  9% { opacity: 0.17; top: 8%; left: 78%; transform: scale(1.05); }
  16% { opacity: 0.17; top: 8%; left: 78%; transform: scale(1.05); }
  30% { opacity: 0; top: 8%; left: 78%; transform: scale(0.85); }
  30.5% { opacity: 0; top: 55%; left: 12%; transform: scale(0.85); }
  39.5% { opacity: 0.17; top: 55%; left: 12%; transform: scale(1.05); }
  46.5% { opacity: 0.17; top: 55%; left: 12%; transform: scale(1.05); }
  60.5% { opacity: 0; top: 55%; left: 12%; transform: scale(0.85); }
  61% { opacity: 0; top: 85%; left: 55%; transform: scale(0.85); }
  70% { opacity: 0.15; top: 85%; left: 55%; transform: scale(1.05); }
  77% { opacity: 0.15; top: 85%; left: 55%; transform: scale(1.05); }
  91% { opacity: 0; top: 85%; left: 55%; transform: scale(0.85); }
  91.5%, 100% { opacity: 0; top: 8%; left: 78%; transform: scale(0.85); }
}

@keyframes glow-drift-b {
  0% { opacity: 0; top: 82%; left: 5%; transform: scale(0.85); }
  9% { opacity: 0.15; top: 82%; left: 5%; transform: scale(1.05); }
  16% { opacity: 0.15; top: 82%; left: 5%; transform: scale(1.05); }
  30% { opacity: 0; top: 82%; left: 5%; transform: scale(0.85); }
  30.5% { opacity: 0; top: 15%; left: 62%; transform: scale(0.85); }
  39.5% { opacity: 0.14; top: 15%; left: 62%; transform: scale(1.05); }
  46.5% { opacity: 0.14; top: 15%; left: 62%; transform: scale(1.05); }
  60.5% { opacity: 0; top: 15%; left: 62%; transform: scale(0.85); }
  61% { opacity: 0; top: 45%; left: 88%; transform: scale(0.85); }
  70% { opacity: 0.13; top: 45%; left: 88%; transform: scale(1.05); }
  77% { opacity: 0.13; top: 45%; left: 88%; transform: scale(1.05); }
  91% { opacity: 0; top: 45%; left: 88%; transform: scale(0.85); }
  91.5%, 100% { opacity: 0; top: 82%; left: 5%; transform: scale(0.85); }
}

@keyframes glow-drift-c {
  0% { opacity: 0; top: 30%; left: 20%; transform: scale(0.85); }
  9% { opacity: 0.1; top: 30%; left: 20%; transform: scale(1.05); }
  16% { opacity: 0.1; top: 30%; left: 20%; transform: scale(1.05); }
  30% { opacity: 0; top: 30%; left: 20%; transform: scale(0.85); }
  30.5% { opacity: 0; top: 70%; left: 72%; transform: scale(0.85); }
  39.5% { opacity: 0.11; top: 70%; left: 72%; transform: scale(1.05); }
  46.5% { opacity: 0.11; top: 70%; left: 72%; transform: scale(1.05); }
  60.5% { opacity: 0; top: 70%; left: 72%; transform: scale(0.85); }
  61% { opacity: 0; top: 12%; left: 50%; transform: scale(0.85); }
  70% { opacity: 0.09; top: 12%; left: 50%; transform: scale(1.05); }
  77% { opacity: 0.09; top: 12%; left: 50%; transform: scale(1.05); }
  91% { opacity: 0; top: 12%; left: 50%; transform: scale(0.85); }
  91.5%, 100% { opacity: 0; top: 30%; left: 20%; transform: scale(0.85); }
}

@media (prefers-reduced-motion: reduce) {
  .glow-blob-a, .glow-blob-b, .glow-blob-c {
    animation: none;
  }
}

.page-hero h1 {
  color: #ffffff;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  margin: 0 0 0.6rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.page-hero h1.hero-title {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
}

@media (max-width: 640px) {
  .page-hero h1.hero-title {
    font-size: 2.1rem;
  }
}

.page-hero p {
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  font-size: 0.75rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.section-kicker {
  display: inline-block;
  width: 46px;
  height: 2px;
  margin-bottom: 0.9em;
  background: var(--accent);
}

h2 {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  color: var(--ink);
}

h3 {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--ink);
}

p {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--ink);
}

strong {
  color: var(--accent-deep);
}

@media (prefers-color-scheme: dark) {
  strong {
    color: var(--accent-light);
  }
}

/* =========================================================
   カード・グリッド
   ========================================================= */
.card_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 0;
}

/* トップページの「こんなことでお困りではありませんか」「業務内容のご紹介」の
   カードに限定した修飾クラス。auto-fitのままだと、サイト全体のモバイル判定基準
   （1000px未満）の範囲内でも画面幅次第で2列になってしまうことがあったため、
   この2箇所だけモバイル幅では強制的に1列（1行に1枚）にする
   （2026-07-28、ユーザーの指示：スマホ版トップページのアイコン付きカードは
   1行ずつにしたい）。他ページの.card_gridには影響させないよう、修飾クラスを
   併用した要素だけに絞っている。 */
@media (max-width: 999px) {
  .card_grid--stack-mobile {
    grid-template-columns: 1fr;
  }
}

/* カードがちょうど4枚のセクション専用の修飾クラス。auto-fitのままだと画面幅次第で
   3枚+1枚のような不揃いな折り返しになることがあるため、2列×2行に固定する
   （2026-08-06、ユーザーの指示：トップページの実績カード4枚の並びが良かったので
   他のページで4枚並ぶ時も同じ表示方法にしたい）。スマホ幅では1列に切り替える。 */
.card_grid--four {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
  .card_grid--four {
    grid-template-columns: 1fr;
  }
}

.card {
  position: relative;
  overflow: hidden;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.5rem 1.75rem;
  transition: box-shadow 0.4s ease, transform 0.4s ease, border-color 0.4s ease;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.card:hover {
  box-shadow: 0 18px 34px rgba(29, 29, 31, 0.1);
  transform: translateY(-4px);
  border-color: #f1e4d2;
}

.card:hover::before {
  transform: scaleX(1);
}

/* スマホ等タッチ端末には:hoverが無いため、スクロールで画面中央に来たカードを
   common.jsでこのクラスを付け外しして疑似的にホバー状態にする。
   浮き上がる時は素早く、沈む（元に戻る）時は1秒かけてゆっくり余韻を残す。 */
@media (hover: none) {
  .card {
    transition: box-shadow 1s ease, transform 1s cubic-bezier(0.25, 0.1, 0.25, 1), border-color 1s ease;
  }
  .card.is-scroll-active {
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 18px 34px rgba(29, 29, 31, 0.1);
    transform: translateY(-4px);
    border-color: #f1e4d2;
  }
  .card.is-scroll-active::before {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: scaleX(1);
  }
  .card::before {
    transition: transform 0.5s cubic-bezier(0.7, 0, 0.84, 0);
  }
}

/* アイコン＋見出しを横並びにする行。スマホでカードが縦積みになった時に
   カード1枚あたりの高さが伸びすぎないよう、アイコンは見出しの上ではなく左に置く。 */
.card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 0 0 0.6rem;
}

/* サイト更新情報のような「日付＋短文」を並べる一覧。トヨタ自動車の
   企業サイトにある「サイト更新情報」を参考に、装飾を抑えたシンプルな
   横並びリストにしている（2026-08-08、ユーザーの依頼）。 */
.update-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.update-list li {
  display: flex;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.update-list time {
  flex-shrink: 0;
  width: 7.5em;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.update-list li span {
  color: var(--ink);
}

/* 既定では新しい5件だけを表示し、6件目以降は「さらに詳しく」ボタンを押すまで
   隠しておく（2026-08-21、ユーザー要望）。表示・非表示の切り替え自体はページ側の
   インラインスクリプトが行う（.is-collapsedクラスの付け外し）。 */
.update-list.is-collapsed li:nth-child(n+6) {
  display: none;
}
.update-list-more[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .update-list li {
    flex-direction: column;
    gap: 0.3rem;
  }
  .update-list time {
    width: auto;
  }
}

/* flexアイテムは既定でmin-width:autoのため、横に並べたテキストが折り返さずに
   はみ出すことがある（.cardのoverflow:hiddenで見えなくなり、文字が欠けて見える原因になる）。
   min-width:0で明示的に縮小を許可し、必ず折り返すようにする。 */
.card-head > *:not(.icon) {
  min-width: 0;
}

/* カードのアイコンバッジ。以前は黒基調のグラデーションだったが、静電容量から
   充電電流計算ページの周波数選択ボタン（.freq-btn.is-active）と同じオレンジの
   グラデーションに統一した（2026-07-27、ユーザーの指示：サイト内のアイコン
   すべてに適用）。オレンジ背景での視認性のため、アイコン自体の色（stroke=
   currentColor）もアクセントカラーの薄い色から濃い黒系（#1d1d1f）に変更している
   （.btn-accent・.freq-btn.is-activeなど、オレンジ背景の上の文字色と揃えた）。
   枠（バッジ自体）は一回り小さくし、中のアイコン（.card .icon svg）の大きさは
   従来のまま変えていない。 */
.card .icon {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  color: #1d1d1f;
}

.card .icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.card-head h3 {
  margin: 0;
}

.card p {
  margin: 0;
  color: var(--ink-soft);
}

/* カード全体をリンクにする場合（各種計算・作図の一覧など）。
   本文の色・下線はカード内のh3/pの明示的な色指定にそのまま任せ、ここではリンク特有の見た目だけ打ち消す。 */
.card_grid a.card {
  text-decoration: none;
  display: block;
}

/* =========================================================
   業務内容リスト（横長リスト型）
   カード型ではなく、.update-list（サイト更新情報）と同じ「上下の罫線で
   区切るだけのシンプルな横長リスト」を踏襲した表示形式（2026-08-22、
   事業内容ページの依頼）。1行＝1つの事業内容。文章の下に写真を大きめの
   ギャラリー（グリッド）で並べられるようにしてあり、写真が無い項目は
   .biz-item-photosごと出さず、アイコンと文章だけで表示する。今後写真を
   追加する場合は該当する.biz-item-photosの中に<img>を足すだけでよい
   （CSS側の変更不要。1枚だけの項目も1枚がグリッド1マス分の大きさで表示される）。 */
.biz-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

.biz-item {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}

.biz-item-head {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
}

.biz-item-head h3 {
  margin: 0;
}

/* アイコンバッジは.card .iconと同じ見た目に揃える（カード廃止後もサイト内の
   アイコン表現を統一するため、値をそのまま複製している）。 */
.biz-item .icon {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  flex-shrink: 0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  color: #1d1d1f;
}

.biz-item .icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.biz-item-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}

.biz-item-photos img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 1px solid var(--border);
  object-fit: cover;
}

/* トップページの業務内容プレビューなど、簡易的な一覧では写真を小さく
   表示したい場合の修飾クラス（2026-08-22、ユーザーの指示：トップページは
   写真が小さくてもよい）。縦横1:1は.biz-item-photosと共通のまま、
   グリッドではなくflexで固定サイズの小さめサムネイルを並べる。 */
.biz-item-photos--compact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.biz-item-photos--compact img {
  width: 64px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  border: 1px solid var(--border);
  object-fit: cover;
}

.biz-item p {
  margin: 0.9rem 0 0;
  color: var(--ink-soft);
}

/* =========================================================
   ボタン
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9em 1.8em;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.25s ease, opacity 0.15s ease;
  /* メール・電話ボタンはbutton要素にも流用するため、枠線・背景無しの状態も
     ここで打ち消しておく（見た目はaタグ版と完全に同じになる）。 */
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.btn-accent {
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  color: #1d1d1f;
  box-shadow: 0 12px 26px rgba(232, 135, 30, 0.35);
}

.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(232, 135, 30, 0.45);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--border);
  color: var(--ink);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent-deep);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

/* スマホ幅ではボタン2つが横並びで収まってしまう場合があるため、
   フォントの読み込み状況に左右されず常に縦並びになるよう明示する。 */
@media (max-width: 640px) {
  .btn-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* スマホ表示では、トップページのヒーロー内にある2つのボタン（事業内容を見る／
   お問い合わせはこちら）を一回り小さくする（2026-07-27、ユーザーからの指示）。
   他ページ・他の場所のボタン（404エラーページなど）には影響させないよう、
   .page-hero-inner内の.btn-rowだけに限定している。 */
@media (max-width: 640px) {
  .page-hero-inner .btn-row .btn {
    padding: 0.7em 1.4em;
    font-size: 0.85rem;
  }
}

/* =========================================================
   お問い合わせCTA（ダークバナー）
   ========================================================= */
.contact-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: clamp(20px, 3vw, 28px);
  padding: clamp(2rem, 5vw, 3rem);
  margin: clamp(2.5rem, 6vw, 4rem) 0;
  background: linear-gradient(160deg, var(--black) 0%, var(--black-soft) 100%);
  text-align: center;
}

.contact-inner {
  position: relative;
  z-index: 1;
}

/* =========================================================
   スケジュール（Googleカレンダー埋め込み）
   ========================================================= */
.calendar-container {
  position: relative;
  width: 100%;
  height: 0;
  overflow: hidden;
  border-radius: 13px;
  border: 1px solid var(--border);
}

@media screen and (min-width: 1000px) {
  .calendar-container { padding-bottom: 75%; }
}

@media screen and (max-width: 999px) {
  .calendar-container { padding-bottom: 150%; }
}

.calendar-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.contact-cta h2 {
  color: #ffffff;
}

.contact-cta p {
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 1.5em;
}

/* =========================================================
   入力欄（お問い合わせページ等で使用）
   ========================================================= */
input,
select,
textarea {
  width: 100%;
  font-size: 16px;
  padding: 0.7em 0.9em;
  border: 2px solid #ccc;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  box-sizing: border-box;
  /* font-size:16px以上にしていても、iPhoneでは数字入力欄をタップした瞬間に
     ダブルタップズームと誤認識されてページ全体が拡大されることがある。
     touch-action:manipulationでダブルタップズームのジェスチャー自体を
     その要素上では無効化し、意図しない拡大を防ぐ（ピンチズームなど
     他の操作性は損なわない）。全ページの入力欄に共通で適用する。 */
  touch-action: manipulation;
}

/* スマホ幅では箱が大きく見えすぎるため、文字サイズ16px（iOSの自動ズーム防止のため維持）は
   変えずに余白だけ詰めて一回り小さくする。PC・タブレットはそのまま。 */
@media (max-width: 640px) {
  input,
  select,
  textarea {
    padding: 0.35em 0.9em;
  }
}

/* =========================================================
   パスワード表示切り替えボタン（目のアイコン）
   ログイン画面のパスワード欄に付ける、押している間だけでなく
   押すたびに表示/非表示が切り替わるトグル式のボタン（2026-08-01）。
   ========================================================= */
.auth_password_wrap {
  position: relative;
}

.auth_password_wrap input {
  padding-right: 2.6em;
}

.auth_password_toggle {
  position: absolute;
  top: 50%;
  right: 0.5em;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  touch-action: manipulation;
}

.auth_password_toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.auth_password_toggle.is-active {
  color: var(--accent-deep);
}

/* =========================================================
   フッター（共通JSで注入される）
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-alt);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2rem, 5vw, 2.75rem) clamp(1rem, 4vw, 2rem);
}

.site-footer-inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-company {
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.9;
}

.footer-company strong {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}

/* フッターの電話番号・メールアドレスは、以前は生のテキスト（TEL：080-...など）を
   そのまま常時表示していたが、これをやめてクリックで開くボタンに変更した
   （2026-07-28、ユーザーの指示：電話番号とメールアドレスをテキストで表示させて
   おくのをやめたい）。見た目は.footer-nav aと揃え、フッター内の他のリンクと
   違和感なく並ぶようにする。実際の開閉挙動（電話ポップアップ／メール確認
   ポップアップ）は共通スクリプト.js側でdata-role属性を見て一括制御する。 */
.footer-contact-link {
  display: block;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}

.footer-contact-link:hover {
  color: var(--accent-deep);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer-nav a {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--accent-deep);
}

.footer-copyright {
  width: 100%;
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 1.5rem;
  opacity: 0.8;
}

/* =========================================================
   電話番号ポップアップ／メール確認ポップアップ
   （共通スクリプト.jsがページ読み込み時に全ページへ挿入する。
    フッターの電話・メールボタンと、お問い合わせページ本体の
    ボタンの両方から同じものを開く）
   ========================================================= */
.contact_modal_overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 8, 10, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.contact_modal_overlay[hidden] {
  display: none;
}

.contact_modal {
  background: var(--card-bg);
  border-radius: 14px;
  padding: 1.6rem;
  max-width: 360px;
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.contact_modal h3 {
  margin: 0 0 0.9rem;
}

.contact_modal p {
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

.contact_modal_actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

/* 電話番号ポップアップ：スマホは今まで通りtel:リンクの標準動作（即発信）に
   任せ、マウス操作のPC環境の時だけこのポップアップを開いて電話番号を
   テキストで確認できるようにする（2026-07-28、ユーザーの指示：スマホは
   ボタンを押せばすぐ発信できるが、PCはできないのでテキスト表示にしたい）。 */
.contact_phone_number {
  font-size: 1.6rem !important;
  font-weight: 700;
  color: var(--accent-deep);
  text-align: center;
  margin: 0.4rem 0 1rem !important;
  letter-spacing: 0.02em;
}

@media (prefers-color-scheme: dark) {
  .contact_phone_number {
    color: var(--accent-light);
  }
}

/* メールでのお問い合わせは、送信用のサーバー（バックエンド）を新たに
   用意するのではなく、従来通り端末のメールソフトを起動する方式のまま
   にしている（2026-07-28、ユーザーの指示：ロリポップ等の仕組みは使わない）。
   このポップアップは、メールソフトを起動する一歩手前で「営業目的の
   お問い合わせではないか」を確認するための最小限の確認画面で、実際の
   お名前・お問い合わせ内容の入力はメールソフト側の本文で行ってもらう。
   チェックボックスの見た目はI-t特性曲線描画ツールの.checkbox-labelと
   同じ自作チェックボックスの考え方を踏襲。 */
.contact_agree_row {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  font-size: 12px;
  color: var(--ink-soft);
  margin: 1.2rem 0 0;
  cursor: pointer;
}

.contact_agree_row input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  margin: 0.1em 0 0;
  padding: 0;
  border: 1.5px solid var(--ink-soft);
  border-radius: 4px;
  background: var(--card-bg);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

.contact_agree_row input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent-deep);
}

.contact_agree_row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* =========================================================
   スクロールで表示されるふわっとアニメーション
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  /* 0.7sだと浮き上がりが早すぎてカクついて見えるとの指摘（2026-07-26）を受け、
     1.1sへ延ばしてゆったりした動きにした。一時期は「コンデンサーの充電カーブ
     のように、終盤ほどゆっくり動いてほしい」との指摘（2026-07-26）を受けて
     cubic-bezier(0.16, 1, 0.3, 1)（easeOutExpo系）の減速イージングを
     使っていたが、2026-07-27に「過渡現象（加減速）をやめて一定のスピードで
     表示してほしい」という明確な指示があり、linear（開始から終了まで速度が
     変化しない一定速度）に変更した。その後同日中に「遅すぎるので今の2/3の
     スピードにしたい」との指示を受け、1.1s→0.73s（1.1sの2/3）に短縮した。 */
  transition: opacity 0.73s linear, transform 0.73s linear;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}