@charset "utf-8";
/* =============================================================================
 * marushin.css  —  丸辰工業株式会社向けのテーマ設定
 * -----------------------------------------------------------------------------
 * style.css の後ろに読み込みます。共通テンプレート（style.css）は変更せず、
 * このファイルの上書きだけで色・書体の印象を切り替えています。
 * ============================================================================= */

:root{
  /* 鉄・コンクリートを思わせる、やや冷たいグレー系に調整 */
  --c-text:        #14181c;
  --c-sub:         #6f767d;
  --c-line:        #dfe2e4;
  --c-line-strong: #14181c;
  --c-tint:        #f2f4f5;
  /* フッターは白地。上端の青い3px罫線で本文と切り分けます */
  --c-footer-bg:   #ffffff;
  --c-footer-text: #14181c;
  --c-footer-sub:  #666d74;
  --c-overlay:     #12161a;   /* ドロワー（メニュー）だけは従来どおり暗い地色 */

  /* -------------------------------------------------------------- アクセント
     新ロゴ（MARUSHIN）の青を、そのままサイトのアクセントカラーにしています。
     以前使っていた水色（#03a9f4）は全廃しました。

     ヘッダー・フッターを白地にしたことで、青が乗る面が一気に増えます。
     白地の上の青は濃いほど締まるため、ロゴの青をそのまま使えます。

       --c-accent        白地の上の線・青ベタ（白文字とのコントラスト 7.1:1／適合）
       --c-accent-deep   ボタンのホバー（同 9.3:1）
       --c-accent-bright 暗い面の上に載せる青。ヒーロー動画・CTA写真・ドロワーなど、
                         地色が暗いところでは同じ青だと沈むため、
                         ロゴの青を明るくした青を使います（水色ではありません）

     色を変えたいときは、この3行だけを差し替えてください。
     ・もっと濃く沈めたい → --c-accent: #1430c4
     ・赤に戻したい       → #d6000f / #a8000c / #ff2b3a */
  --c-accent:        #1a3cf0;
  --c-accent-deep:   #1430c4;
  --c-accent-bright: #4a63ff;

  /* 見出しの字間を日本語向けにやや詰める */
  --ls-wide: .16em;
}

/* 社名は和文なので、欧文用ではなく本文用の書体で表示する */
.logo__name{
  font-family:var(--ff-base);
  font-size:18px;
  letter-spacing:.14em;
  font-weight:500;
}
.logo__sub{ letter-spacing:.16em; }

/* =============================================================================
 * 新ロゴ（MARUSHIN 横組みフルロゴ）— 明色版・暗色版の出し分け
 * -----------------------------------------------------------------------------
 * ヘッダー・フッターは「横組みフルロゴ ＋ 丸辰工業株式会社」の組み合わせです。
 * ロゴに MARUSHIN の欧文が入っているため、社名の下の英字表記は外しています。
 *
 * 新しいロゴは「黒（または白）＋青」の2色です。
 * 従来の丸に辰マークは黒1色だったため、暗い背景では filter:invert(1) で
 * 白へ反転させていましたが、2色のロゴを反転させると青がオレンジになります。
 * そこで反転をやめ、SVG を2枚（暗色地用・明色地用）用意して CSS で切り替えます。
 *
 *   images/marushin/logo/marushin-logo.svg        白い地色の上（黒＋青）
 *   images/marushin/logo/marushin-logo-white.svg  暗い地色の上（白＋水色）
 *
 * 差し替えは data/marushin-site.js の brand.logoMark / brand.logoMarkLight の
 * 2行だけで効きます（M マークのみにする場合は marushin-mark*.svg へ）。
 *
 * ★ロゴの大きさを変えたいときは、下の height の数字だけを触ってください。
 *   横幅は縦横比（約 4.8 : 1）に合わせて自動で決まります。
 * ========================================================================== */
.logo__mark img{ height:30px; width:auto; display:block; }

/* 社名はロゴの右へ。細い縦罫で区切り、ロゴを主・社名を従にする。
   罫線は currentColor なので、白いヘッダーでも濃いヘッダーでも自動で追従します。 */
.logo{ align-items:center; gap:1.05em; }
.logo__name{ font-size:16px; letter-spacing:.1em; white-space:nowrap; }
.logo .logo__text{
  gap:0;
  position:relative;
  padding-left:1.05em;
}
.logo .logo__text::before{
  content:""; position:absolute; left:0; top:50%;
  width:1px; height:1.5em;
  margin-top:-.75em;
  background:currentColor; opacity:.3;
}

/* 旧ロゴ（黒1色）用の色反転を打ち消します。
   style.css 側は「.header--overlay:not(.is-solid) .logo__mark img」という
   詳細度の高い書き方なので、こちらも同じ形で書かないと打ち消せません。
   （反転したままだと、白いロゴが黒に、水色の三角がオレンジになります） */
.logo__mark img,
.header--overlay:not(.is-solid) .logo__mark img,
.header.is-menu .logo__mark img{ filter:none; }

/* 2枚を重ねて置き、透明度でクロスフェードさせます。
   display の切り替えだと、メニューを開いた瞬間（オーバーレイが 0.5 秒かけて
   暗くなる途中）に白いロゴが白い地の上に出てしまい、一瞬消えて見えます。
   旧ロゴの filter 反転と同じ 0.5 秒で溶暗させることで、その飛びを防いでいます。 */
.logo__mark{ position:relative; display:block; }
.logo__mark img{ transition:opacity .5s var(--ease); }
.logo__mark .logo__mark--light{
  position:absolute; left:0; top:0;
  opacity:0;
}

/* 暗い地色の上（ヒーロー上の透明ヘッダー／メニュー展開中）は明色版へ */
.header--overlay:not(.is-solid) .logo__mark .logo__mark--dark,
.header.is-menu .logo__mark .logo__mark--dark{ opacity:0; }
.header--overlay:not(.is-solid) .logo__mark .logo__mark--light,
.header.is-menu .logo__mark .logo__mark--light{ opacity:1; }

/* --- フッター（白地）------------------------------------------------------
   地色を白にしたため、次の4点を組み替えています。
     ・ロゴは暗色版（黒＋青）を表示。style.css の filter:invert(1) は打ち消し
     ・ロゴを大きめに見せたいので、ロゴと社名は縦に積む
     ・SITE MAP / CONTACT の小見出しは、白地用の濃い青へ
     ・最下段の区切り線は、白い罫線から通常の罫線へ
   フッターを黒に戻す場合は、冒頭の --c-footer-bg / -text / -sub を
   #14181c / #ffffff / #8e979e に戻し、下の3行（--light 以下）を消してください。 */
.footer__logo{ flex-direction:column; align-items:flex-start; gap:.85em; }
.footer__mark{ height:34px; filter:none; }
.footer__mark--light{ display:none; }
.footer__navtitle{ color:var(--c-accent); }
.footer__bottom{ border-top-color:var(--c-line); }

/* -----------------------------------------------------------------------------
 * 画面最上部の 3px バーに、ロゴの「スピードスラッシュ」を反映
 * -----------------------------------------------------------------------------
 * 新ロゴは、青いバーが右端で3本のスラッシュに割れる形をしています。
 * その形を、全ページ共通の最上部バーの右端にそのまま移しました。
 * mask に未対応のブラウザでは、従来どおりの1本のベタ線として表示されます。
 * やめたいときは、この1ブロックを削除してください。
 * -------------------------------------------------------------------------- */
.header::after{
  -webkit-mask:
    linear-gradient(#000 0 0) left top    / calc(100% - 132px) 100% no-repeat,
    linear-gradient(#000 0 0) right 88px top / 30px 100% no-repeat,
    linear-gradient(#000 0 0) right 44px top / 30px 100% no-repeat,
    linear-gradient(#000 0 0) right 0    top / 30px 100% no-repeat;
  mask:
    linear-gradient(#000 0 0) left top    / calc(100% - 132px) 100% no-repeat,
    linear-gradient(#000 0 0) right 88px top / 30px 100% no-repeat,
    linear-gradient(#000 0 0) right 44px top / 30px 100% no-repeat,
    linear-gradient(#000 0 0) right 0    top / 30px 100% no-repeat;
}

.footer__logo{
  font-family:var(--ff-base);
  font-size:19px;
  letter-spacing:.14em;
  font-weight:500;
}

/* 下層ページ上部の全幅ビジュアルを動画にしたとき、写真と同じ見え方に揃える
   （style.css の .figure-full img と同じ 16:7・切り取り表示） */
.figure-full video{ width:100%; aspect-ratio:16/7; object-fit:cover; display:block; }

/* =============================================================================
 * 下層ページのタイトル背景（COMPANY / SERVICE などの大見出しの後ろ）
 * -----------------------------------------------------------------------------
 * data/marushin-site.js の pages.headMedia に動画または写真を指定すると、
 * このブロックが効いて、タイトルの背景になります。
 * 指定が無いページは、これまでどおり白い背景・黒い文字のままです。
 *
 * ・背景は白いヘッダーの下から始まります（ヘッダーは白のまま重なります）
 * ・白い文字が読めるよう、映像の上に暗い膜を1枚かけています。
 *   映像が明るすぎ／暗すぎるときは、下の rgba() の3つの数字を調整してください
 * ========================================================================== */
.pagehead--media{
  position:relative;
  color:#fff;
  background:#0a0e14;            /* 動画の読み込み前に見える下地 */
  border-bottom-color:transparent;
}
.pagehead__media{ position:absolute; inset:0; overflow:hidden; }
.pagehead__media video,
.pagehead__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.pagehead__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(8,11,16,.55) 0%,
    rgba(8,11,16,.50) 45%,
    rgba(8,11,16,.72) 100%);
}
.pagehead--media > .container{ position:relative; z-index:1; }
.pagehead--media .pagehead__en{ color:#fff; }
.pagehead--media .breadcrumb,
.pagehead--media .breadcrumb a,
.pagehead--media .pagehead__ja,
.pagehead--media .pagehead__lead{ color:rgba(255,255,255,.84); }
/* 日本語タイトルの前の四角は、暗い地色の上なので明るい青にする */
.pagehead--media .pagehead__ja::before{ background:var(--c-accent-bright); }

/* 見出しの「カーテン」を止める。
   通常の見出しは、背景色と同じ色の板で文字を隠しておき、その板が下から
   めくれて文字が現れます。板の色は背景色に合わせますが、背景が動画だと
   合わせようがなく、白い四角が一瞬出てしまいます。
   （トップのヒーローや CTA と同じ考え方で、映像の上では板を使いません）
   引かれる線は残し、暗い地色でも見えるよう明るい青にしています。 */
.pagehead--media .linetext::before{ display:none; }
.pagehead--media .linetext::after{ background:var(--c-accent-bright); }

/* -----------------------------------------------------------------------------
 * 明るい画像を敷く場合（データ側に tone: "light" を書いたとき）
 * -----------------------------------------------------------------------------
 * 白やパステルの画像に暗い膜をかけると、せっかくの明るさが濁ってしまいます。
 * そこで膜を「白」に変え、文字は黒のまま（白地のページと同じ）にします。
 * 画像の一部が濃くても文字が読めるよう、白い膜の濃さで調整してください。
 * -------------------------------------------------------------------------- */
.pagehead--light{ color:var(--c-text); background:#fff; }
.pagehead--light .pagehead__media::after{
  background:linear-gradient(180deg,
    rgba(255,255,255,.56) 0%,
    rgba(255,255,255,.44) 45%,
    rgba(255,255,255,.70) 100%);
}
.pagehead--light .pagehead__en{ color:var(--c-text); }
/* 補助文字は通常のグレー（--c-sub）より濃くします。
   画像に銀色の濃い帯が入っていると、白い膜をかけてもグレー文字では
   コントラストが 2.6:1 程度しか出ず、読みにくくなるためです（基準は 4.5:1）。
   この色なら、いちばん濃いところに重なっても 5.5:1 を確保できます。 */
.pagehead--light .breadcrumb,
.pagehead--light .breadcrumb a,
.pagehead--light .pagehead__ja,
.pagehead--light .pagehead__lead{ color:#3d444b; }
.pagehead--light .pagehead__ja::before,
.pagehead--light .linetext::after{ background:var(--c-accent); }

/* =============================================================================
 * タイトル背景（グラフィック）— 写真を使わないページの地紋
 * -----------------------------------------------------------------------------
 * data/marushin-site.js の pages.<ページ>.pattern に "mesh" と書くと効きます。
 * スラブ配筋（床の鉄筋の網）を思わせる格子を、白地の上にごく薄く敷いたものです。
 *
 * ・写真ではないので、タイトル下の全幅写真と主張がぶつかりません
 * ・膜（暗くするフィルター）は一切かけないので、文字は黒のまま＝いちばん読みやすい
 * ・新しい画像を1枚も読み込まないので、表示は今と同じ速さです
 * ・動きがないので、再訪問の人にも「動きを減らす」設定の人にも同じように見えます
 *
 * 濃さ・間隔を変えたいときは、すぐ下の4つの数字だけを触ってください。
 *   --pat-step  … 細い線の間隔。狭いほど密＝現場的、広いほど疎＝落ち着いた印象
 *   --pat-line  … 細い線の色（配筋のピッチ）
 *   --pat-main  … 4本に1本だけ濃くする線の色（主筋のイメージ）
 *   --pat-dot   … 主筋どうしの交点に置く点の色（結束点のイメージ）
 * ========================================================================== */
.pagehead--pattern{ position:relative; overflow:hidden; }
.pagehead--pattern > .container{ position:relative; z-index:1; }

/* 地紋の置き場所（種類によらず共通） */
.pagehead__pattern{
  position:absolute;
  /* 白いヘッダーの下から始めます。0 にすると地紋がロゴとメニューにかかります */
  top:var(--header-h); right:0; bottom:0; left:0;
  pointer-events:none;
}

/* --- mesh：スラブ配筋（床の鉄筋の網）を思わせる格子 ------------------------- */
.pagehead__pattern--mesh{
  /* 縦筋と横筋でピッチを変えています（正方形の方眼にすると方眼紙に見えるため）。
     実際の配筋も、たとえば D13@200 / D13@250 のように縦横で間隔が違います。 */
  --pat-x:    92px;                 /* 縦筋のピッチ */
  --pat-y:    68px;                 /* 横筋のピッチ */
  --pat-line: #e9ecee;              /* 細い線 */
  --pat-main: #d3d9dc;              /* 3本に1本だけ濃くする線（主筋） */
  --pat-dot:  rgba(26,60,240,.20);  /* 主筋の交点に置く点（結束点） */


  background-image:
    /* 主筋どうしの交点に置く小さな点（結束点） */
    radial-gradient(circle at center, var(--pat-dot) 0 2px, transparent 2.6px),
    /* 3本に1本の濃い線（主筋）縦・横 */
    repeating-linear-gradient(90deg, var(--pat-main) 0 1px, transparent 1px calc(var(--pat-x) * 3)),
    repeating-linear-gradient(0deg,  var(--pat-main) 0 1px, transparent 1px calc(var(--pat-y) * 3)),
    /* 細い線（配筋のピッチ）縦・横 */
    repeating-linear-gradient(90deg, var(--pat-line) 0 1px, transparent 1px var(--pat-x)),
    repeating-linear-gradient(0deg,  var(--pat-line) 0 1px, transparent 1px var(--pat-y));
  /* 点の層だけは「主筋3本ぶん」を1マスとして敷き、
     マスの中心が主筋の交点に重なるように半マスぶんずらしています。 */
  background-size:
    calc(var(--pat-x) * 3) calc(var(--pat-y) * 3), auto, auto, auto, auto;
  background-position:
    calc(var(--pat-x) * -1.5) calc(var(--pat-y) * -1.5), 0 0, 0 0, 0 0, 0 0;

  /* 右上ほど濃く、大見出しのある左下へ向かって消えます。
     こうすると四角い面が置かれたようには見えず、文字の後ろもきれいに空きます。 */
  -webkit-mask-image:radial-gradient(108% 125% at 100% 0%, #000 10%, rgba(0,0,0,.55) 40%, transparent 74%);
          mask-image:radial-gradient(108% 125% at 100% 0%, #000 10%, rgba(0,0,0,.55) 40%, transparent 74%);
}

/* --- mark：ロゴのMマークを大きな「窓」にする ---------------------------------
 * Mマークの形に切り抜いた面に、ごく薄い青のグラデーションを入れています。
 * 塗りつぶしたロゴではなく、「Mの形の窓からうっすら青が覗いている」状態です。
 * 右へ大きくはみ出させ、わざとMの全形を見せません（ヘッダーのロゴと競合しないため）。
 * 濃さを変えるときは、下の rgba() の最後の数字（.13 と .035）を触ってください。
 * -------------------------------------------------------------------------- */
.pagehead__pattern--mark{
  /* 右端・上下ともマイナスを使わず、マークの全体が枠の中に収まるようにしています。
     右端は本文（リード文）の右端と同じ位置（--pad-x）に揃えています。 */
  left:auto;
  /* 本文（リード文）の右端に正確に揃えます。
     .container は max-width:1440px で中央寄せなので、画面が1440pxより広いときは
     本文が中央に寄ります。その分も含めて計算しています。 */
  right:max(var(--pad-x), calc((100% - var(--maxw)) / 2 + var(--pad-x)));
  top:calc(var(--header-h) + 5%);
  bottom:7%;
  width:46%;
  background-image:linear-gradient(160deg, rgba(26,60,240,.13), rgba(26,60,240,.035));
  /* ロゴのMマークの形。file:// で直接開いても表示できるよう、
     外部SVGを参照せずCSSのなかに埋め込んでいます（形だけが効くので色は黒固定）。
     元データは images/marushin/logo/marushin-mark.svg とまったく同じ形です。 */
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 513 355' fill-rule='evenodd'%3E%3Cpath fill='%23000' d='M0,355 L74,0 L256,199 L438,0 L513,355 L419,152 L256,281 L93,152 Z'/%3E%3Cpath fill='%23000' d='M166,26 L350,26 L258,128 Z'/%3E%3C/svg%3E") no-repeat right center/contain;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 513 355' fill-rule='evenodd'%3E%3Cpath fill='%23000' d='M0,355 L74,0 L256,199 L438,0 L513,355 L419,152 L256,281 L93,152 Z'/%3E%3Cpath fill='%23000' d='M166,26 L350,26 L258,128 Z'/%3E%3C/svg%3E") no-repeat right center/contain;
}

/* 画面が狭いときは、Mが大見出しに近づきすぎるので右へ逃がして小さくします */
@media (max-width:767px){
  .pagehead__pattern--mark{ width:58%; right:calc(var(--pad-x) * .5); top:calc(var(--header-h) + 12%); bottom:11%; }
}

/* 画面が狭いときは、格子が細かすぎて目が粗く見えるため間隔を詰めます */
@media (max-width:767px){
  .pagehead__pattern--mesh{ --pat-x:60px; --pat-y:46px; }
}

/* 地紋の上に重なる小さな文字は、通常のグレー（--c-sub）より濃くします。
   薄い青の面に重なると --c-sub ではコントラストが 3.7:1 まで落ちて基準（4.5:1）を割るためです。
   この色なら、いちばん濃いところに重なっても 7.9:1 を確保できます。
   （明るい画像を敷いたページ .pagehead--light とまったく同じ考え方・同じ色です） */
.pagehead--pattern .breadcrumb,
.pagehead--pattern .breadcrumb a,
.pagehead--pattern .pagehead__ja,
.pagehead--pattern .pagehead__lead{ color:#3d444b; }

/* 印刷では地紋を出しません（インクの無駄・かすれ防止） */
@media print{
  .pagehead__pattern{ display:none; }
}


/* --- 写真・動画の上に重なる小さな文字と細い線は白にする -------------------
   下地の明るさが写真によって変わるため、青だと読めなくなることがあります。
   青は「地色が決まっている面」＝白いヘッダー・フッター・本文と、
   暗いドロワー（メニュー）の上でだけ使います。 */
.cta__en{ color:#fff; }
.hero__scroll::after,
.hero__num.is-active::after{ background:#fff; }

/* 建設業らしく、罫線をわずかに強めて情報の区切りを明確にする */
.pagehead{ border-bottom-color:var(--c-line-strong); }
.deftable__row,
.spec__row{ align-items:flex-start; }

/* 会社情報は項目名を見つけやすく */
.deftable__label{ color:var(--c-text); font-size:13px; }

/* 沿革は「2009年（平成21年）」のように和暦を併記するため、年の欄を広げ、
   欧文用ではなく本文用の書体で表示する（幅が足りないと2行に折り返します） */
.timeline__row{ grid-template-columns:176px 1fr; }
.timeline__year{ font-family:var(--ff-base); letter-spacing:.06em; }

/* 資格タグは数が多いので、ややコンパクトに */
.taglist__item{ padding:.6em 1.1em; font-size:11.5px; }

/* -----------------------------------------------------------------------------
 * 採用情報の冒頭メッセージ
 * -----------------------------------------------------------------------------
 * 「一緒にはたらいてくださる方、／募集中です。」を、データに書いたとおりの
 * 位置で2行に折り返すための幅の確保です。
 * 通常の container--narrow（900px）だと、画面が広いほど左右の余白（6vw）が
 * 増えて文字を置ける幅が逆に狭くなり、1行目が入りきらずに3行へ折れてしまいます。
 * ここだけ最大幅を広げ、左右の余白に上限（96px）を付けて、
 * どの画面幅でも1行目が収まるようにしています。
 * -------------------------------------------------------------------------- */
.recruitmsg{
  max-width:1120px;
  padding-inline:clamp(24px,6vw,96px);
}
/* スマートフォンでは本文の1行が画面幅に収まらず、指定位置で折り返すと
   「2文字だけの行」ができてしまいます。狭い画面では本文の強制改行だけを
   解除して自然に流します（見出しの改行はそのまま活きます）。 */
@media (max-width:767px){
  .recruitmsg .statement__text br{ display:none; }
}

/* =============================================================================
 * 社員インタビューの「1日の流れ」
 * -----------------------------------------------------------------------------
 * 時刻の列が 70px 固定で、実際の文字（7:50 ＝ 約33px）に対して余白が広く、
 * 時刻と内容が離れて読みにくくなっていました。
 *   ・時刻の列を文字幅に合わせる（数字は等幅にして桁をそろえる）
 *   ・内容に回る幅が約25px広がるので、「施工中の現場パトロール…」のような
 *     長い行の折り返しも減ります
 *   ・12pxの小さな文字なので、時刻の色を半段だけ濃くして読みやすくします
 * ========================================================================== */
.schedule__row{
  grid-template-columns:minmax(3.2em,max-content) 1fr;
  gap:.2em 1.1em;
  align-items:baseline;
  /* 時刻が罫線の左端にぴったり付いて窮屈に見えるため、行の内側に余白を入れます
     （罫線は端まで引いたまま、文字だけを内側へ寄せます） */
  padding-inline:1em;
}
.schedule dt{
  color:#5f666d;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* 工事実績は件数が多いため、カードの余白を詰めて一覧性を上げる */
.workcard__cat{ margin-top:1.3em; }
.workcard__title{ font-size:15px; margin-top:.5em; }

/* 詳細ページを作らない工事実績の写真カード（リンクではないので、ホバーの動きを止める） */
.workcard--static{ margin:0; }
.workcard--static:hover .workcard__media img{ transform:none; }
.workcard--static:hover .workcard__media::after{ transform:scaleX(0); }
.workcard--static:hover .workcard__title{ opacity:1; color:inherit; }
/* 写真カードの下の注記（サンプル写真のときの「※ 写真はイメージです。」） */
.works-photonote{ margin-top:2em; font-size:12px; color:var(--c-sub); line-height:2; }

/* トップページの工事実績：縦長の写真1枚（左）＋見出し・説明・リンク（右）
   （data/marushin-site.js の home.works.image があるときの形）。
   写真は 3:4 の縦長で表示します（横長の写真を入れると上下が切れます）。 */
.homeworks{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  grid-template-areas:"media body";
  gap:clamp(32px,6vw,100px); align-items:center;
}
.homeworks__body{ grid-area:body; }
.homeworks__body .sectionhead{ margin-bottom:0; }
.homeworks__media{ grid-area:media; margin:0; }
.homeworks__photo{ position:relative; overflow:hidden; background:var(--c-tint); }
.homeworks__photo img{ display:block; width:100%; aspect-ratio:3/4; object-fit:cover; }
/* 理念セクションの写真と同じ、左端に下りてくる帯 */
.homeworks__photo::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px; z-index:1;
  background:var(--c-accent);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform 1.1s var(--ease) .25s;
}
.homeworks__photo.is-in::after{ transform:scaleY(1); transform-origin:top; }
.homeworks__media .works-photonote{ margin-top:1.2em; }
@media (max-width:767px){
  .homeworks{ grid-template-columns:1fr; grid-template-areas:"body" "media"; gap:40px; }
}

/* =============================================================================
 * 主な工事経歴（2026-09-16 ご支給「工事実績HP掲載用.pdf」より）
 * -----------------------------------------------------------------------------
 * 「所在地 ／ 建物用途 ／ 構造 ／ 規模」を年ごとに並べる一覧です。
 * 既存の定義表（.deftable）と同じ罫線・字送り・色に合わせているため、
 * 見た目は他のページと地続きになります。
 * 幅が 900px 以下では「建物用途・規模」「所在地・構造」の2段組みへ自動で切り替わります。
 * ========================================================================== */
.worklog__group + .worklog__group{ margin-top:clamp(34px,4.5vh,64px); }
.worklog__year{
  font-family:var(--ff-en);
  font-size:13px; letter-spacing:.2em; font-weight:600; color:var(--c-accent);
  padding-bottom:.9em; border-bottom:2px solid var(--c-accent);
}
.worklog__row{
  display:grid;
  grid-template-columns:200px minmax(0,1fr) 122px 84px;
  gap:1.8em; align-items:baseline;
  padding:1.15em 0; border-bottom:1px solid var(--c-line);
  font-size:13px; line-height:1.85;
  transition:background-color .35s var(--ease);
}
.worklog__row:hover{ background-color:rgba(2,119,189,.045); }
/* 補助情報の文字色。この一覧はうすいグレーの帯（--c-tint）の上に置くため、
   通常の --c-sub（#6f767d）だと 11.5〜12px の小さな文字でコントラストが
   4.3:1 と、読みやすさの基準（4.5:1）にわずかに届きません。
   ここだけ半段だけ濃い色にして 4.8:1 を確保しています。 */
.worklog{ --c-sub-worklog:#666d74; }
.worklog__location{ color:var(--c-sub-worklog); letter-spacing:.06em; }
.worklog__struct{ font-family:var(--ff-en); font-size:12px; letter-spacing:.1em; color:var(--c-sub-worklog); }
.worklog__scale{ font-size:12.5px; letter-spacing:.08em; text-align:right; white-space:nowrap; }
.worklog__note{ margin-top:2.6em; font-size:12px; color:#666d74; line-height:2; }

@media (max-width:900px){
  .worklog__row{ grid-template-columns:1fr auto; gap:.15em 1.2em; }
  .worklog__use{ order:1; }
  .worklog__scale{ order:2; }
  .worklog__location{ order:3; font-size:11.5px; }
  .worklog__struct{ order:4; font-size:11.5px; text-align:right; white-space:nowrap; }
}

/* =============================================================================
 * 主な取引先（工事実績ページの最下部）
 * -----------------------------------------------------------------------------
 * 社名を3列で並べます（900px 以下は2列、スマートフォンは1列）。
 * 上の「主な工事経歴」と同じ青い線・罫線でそろえています。
 * ========================================================================== */
.clientlist{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(20px,3vw,44px);
  border-top:2px solid var(--c-accent);
}
.clientlist__item{
  padding:1.2em 0; border-bottom:1px solid var(--c-line);
  font-size:14px; line-height:1.8; letter-spacing:.06em;
}
@media (max-width:900px){
  .clientlist{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px){
  .clientlist{ grid-template-columns:1fr; }
  .clientlist__item{ font-size:13.5px; }
}

/* スマートフォンでは横幅が足りないため、ロゴと社名を一段ずつ詰める */
@media (max-width:767px){
  .logo{ gap:.62em; }
  .logo__name{ font-size:13px; letter-spacing:.02em; white-space:nowrap; }
  .logo__sub{ display:none; }
  .logo__mark img{ height:22px; }
  .logo .logo__text{ padding-left:.62em; }
  .footer__logo{ font-size:16px; letter-spacing:.06em; }
  .footer__mark{ height:26px; }
}

/* さらに狭い端末（iPhone SE など）では、ロゴだけにして社名を隠す */
@media (max-width:359px){
  .logo .logo__text{ display:none; }
}

/* フッターの連絡先リンクは縦並びに */
.footer__sns{ flex-direction:column; gap:.9em; align-items:flex-start; }
.footer__bottom .footer__sns{ flex-direction:row; gap:1.6em; }
.drawer__foot .footer__sns{ flex-direction:row; gap:1.6em; }

/* ---------- プライバシーポリシー（2026-09-18 追加） ----------
   文章は data/marushin-site.js の privacy、描画は main.js の renderPrivacy() です。 */
.policy{ font-size:14px; line-height:2.1; }
.policy p + p{ margin-top:1.2em; }
.policy__section{ margin-top:3.6em; }
.policy__title{ font-size:17px; font-weight:500; line-height:1.7; letter-spacing:.05em;
  padding-bottom:.7em; margin-bottom:1.2em; border-bottom:1px solid var(--c-line); }
/* 小見出し（(1) (2) …）。線は引かず、少し小さく・少し字下げ */
.policy__section--sub{ margin-top:1.8em; padding-left:1em; }
.policy__section--sub .policy__title{ font-size:15px; border-bottom:0; padding-bottom:0; margin-bottom:.4em; }
.policy__list{ margin-top:.8em; padding-left:1.5em; list-style:disc; }
.policy__list li + li{ margin-top:.5em; }
.policy__list + p, p + .policy__list{ margin-top:1.2em; }
.policy__spec{ margin-top:0; }
.policy__date{ margin-top:4em; text-align:right; color:var(--c-sub); font-size:13px; line-height:2; }
.policy a{ word-break:break-all; }
@media (max-width:767px){
  .policy{ font-size:13.5px; line-height:2; }
  .policy__title{ font-size:15.5px; }
  .policy__spec .spec__row{ flex-direction:column; gap:.4em; }
  .policy__spec .spec__label{ flex:none; }
}

/* ---------- トップ：ヒーロー左下の新着表示（2026-09-23 追加） ----------
   いちばん新しいお知らせが、掲載日から data/marushin-site.js の hero.newsDays 日以内のとき、
   main.js が #hero-text の最後に .heronews を足し、.hero に has-heronews を付けます。
   見た目は上の英字ラベル（.hero__label）と同じ、半透明の黒＋すりガラスの角丸です。
   #hero-text の中にあるので、キャッチコピーと同時に出て、動画のロゴの間は一緒に隠れます。 */
.heronews{
  position:absolute; left:var(--pad-x); bottom:30px; z-index:3;
  display:flex; align-items:center; gap:14px;
  max-width:min(620px, calc(100% - var(--pad-x) * 2 - 60px));
  padding:6px 22px 6px 6px;
  border:1px solid rgba(255,255,255,.22); border-radius:999px;
  background:rgba(12,16,20,.42);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  color:#fff; font-size:13px; line-height:1.4; letter-spacing:.04em;
  animation:heroIn 1.3s var(--ease) calc(var(--hero-delay,0s) + .56s) both;
}
.heronews__new{
  flex:none; background:var(--c-accent); border-radius:999px; padding:.6em 1.1em;
  font-family:var(--ff-en); font-size:10.5px; font-weight:600; line-height:1; letter-spacing:.16em;
}
.heronews__date{ flex:none; font-family:var(--ff-en); font-size:11.5px; font-weight:500; line-height:1; letter-spacing:.1em; opacity:.78; }
/* 長いタイトルは1行に収めて「…」で省略 */
.heronews__title{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.heronews__arrow{ flex:none; transition:transform .5s var(--ease); }
.heronews:hover .heronews__arrow{ transform:translateX(4px); }
/* 新着表示とボタンが重ならないよう、キャッチコピー一式を 24px（スマートフォンは 12px）上げる */
.hero.has-heronews .hero__body{ padding-bottom:calc(clamp(84px,12.5vh,150px) + 24px); }
@media (max-width:767px){
  .heronews{ bottom:20px; gap:10px; padding-right:16px; max-width:calc(100% - var(--pad-x) * 2); font-size:12.5px; }
  .heronews__date{ display:none; }   /* スマートフォンは日付を省いてタイトルを長く見せる */
  .hero.has-heronews .hero__body{ padding-bottom:calc(clamp(84px,12.5vh,150px) + 12px); }
}
@media (prefers-reduced-motion:reduce){
  .heronews{ animation:none; }
}