@charset "utf-8";
/* =============================================================================
 * marushin-lv1.css  —  ビジュアル近代化 Lv.1
 * -----------------------------------------------------------------------------
 * style.css → marushin.css → このファイル の順に読み込みます。
 * 既存の3ファイル（style.css / marushin.css / main.js）は一切変更していません。
 * HTML の構造（タグ・クラス）も変えていません。上書きだけで印象を作っています。
 *
 * 【やめたいとき】
 *   HTML の <link ... marushin-lv1.css> の1行を消す（またはコメントアウト）だけで
 *   完全に元の見た目へ戻ります。
 *
 * 【その場で比べたいとき】
 *   URL の末尾に ?lv1=off を付けると、この装飾を切った状態で表示されます。
 *     例）marushin-index.html?lv1=off
 *   プレゼンで「現行 → 新案」を切り替えて見せるときに使ってください。
 *
 * 【変更した5点】
 *   1. 書体      … Web フォント（Noto Sans JP / Inter）を導入
 *   2. 文字の大小 … 見出しを大きく、本文との差を広げた
 *   3. 英字ラベル … ABOUT US / 01 などを大きく。括弧と罫線は付けない
 *   4. 余白      … セクションの上下と、見出し下の余白を広げた
 *   5. 配色      … ヘッダー・フッターを白地にし、青はロゴの青ひと色に統一
 * ============================================================================= */


/* =============================================================================
 * 1. 書体（Web フォント）
 * -----------------------------------------------------------------------------
 * これまでは閲覧者のパソコンに入っている書体（游ゴシック・メイリオなど）任せで、
 * 環境ごとに見た目が変わり、古い印象の主な原因になっていました。
 * Web フォントにすると、どの端末でも同じ書体で表示されます。
 *
 * 和文：Noto Sans JP … Google 製。可読性が高く、企業サイトの標準的な選択。
 * 欧文：Inter        … 英字の小さなラベル（SERVICE / WORKS / 01）に強い書体。
 *
 * ★別の書体に変えたいときは、下の2行の先頭の書体名だけを差し替えてください。
 *   和文の候補： "Zen Kaku Gothic New"（やや柔らかい） / "Shippori Mincho"（明朝）
 *   HTML 側の Google Fonts の URL も同じ書体名に変える必要があります。
 *
 * ★通信できない場所（オフラインのプレゼン等）では、自動的に従来の
 *   游ゴシック・メイリオへ戻ります。表示が崩れることはありません。
 * ========================================================================== */

:root{
  --ff-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
             "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --ff-en:   "Inter", "Helvetica Neue", Arial, sans-serif;

  /* 英字ラベルの字間。Inter は字面が整っているため、従来より少し詰める */
  --ls-wide: .14em;

  /* 画面が広いときの本文の最大幅（1440px → 1500px）。
     大きな画面で中央に寄りすぎて見えるのを防ぎます */
  --maxw: 1500px;
}

/* 和文は字間を詰めたほうが締まって見える（"palt" は style.css 側で有効化済み） */
body{
  letter-spacing:.02em;
  line-height:1.95;
}


/* =============================================================================
 * 2. 文字の大小（タイポスケール）
 * -----------------------------------------------------------------------------
 * 現行は見出しの上限が小さく（トップの見出しで最大62px）、本文との差が
 * 出ていませんでした。上限を引き上げ、行間を詰めることで「見出しらしさ」を出します。
 *
 * clamp( 最小 , 画面幅に応じた値 , 最大 ) の3つの数字で決まります。
 * 「大きすぎる」と感じたら、3つめ（最大値）だけ下げてください。
 * ========================================================================== */

/* --- トップのヒーロー --------------------------------------------------- */
.hero__copy{
  font-size:clamp(30px,6.2vw,104px);   /* 旧：clamp(26px,4.6vw,62px) */
  line-height:1.28;
  letter-spacing:.005em;
  font-weight:500;
}
.hero__lead{
  margin-top:1.9em;
  max-width:32em;
  font-size:14px;
  line-height:2.05;
}

/* --- 下層ページの大見出し（SERVICE / WORKS / COMPANY …） ----------------- */
.pagehead__en{
  font-size:clamp(40px,7.6vw,112px);   /* 旧：clamp(34px,6vw,76px) */
  line-height:.96;
  letter-spacing:-.02em;
  font-weight:500;
}
.pagehead__ja{ font-size:12.5px; letter-spacing:.18em; }
.pagehead__lead{ font-size:14px; line-height:2.05; }

/* --- セクション見出し ---------------------------------------------------- */
.sectionhead__title{
  font-size:clamp(23px,3.3vw,46px);    /* 旧：clamp(21px,2.6vw,34px) */
  line-height:1.45;
  letter-spacing:.01em;
  font-weight:500;
}
.sectionhead__lead{ font-size:14px; line-height:2.05; }

/* --- 理念（ABOUT US）セクション ------------------------------------------ */
.statement__copy{
  font-size:clamp(21px,3.1vw,44px);    /* 旧：clamp(19px,2.3vw,30px) */
  line-height:1.6;
  letter-spacing:.01em;
  font-weight:500;
}
.statement__text{ font-size:14px; line-height:2.1; }

/* --- 工事実績 ------------------------------------------------------------ */
.workmeta__title{ font-size:clamp(24px,3.6vw,52px); line-height:1.42; font-weight:500; }
.workmeta__lead{ font-size:15px; line-height:2.05; }
.workmeta__body{ font-size:14px; line-height:2.1; }
.workcard__title{ font-size:16px; line-height:1.65; }
.workcard__client{ font-size:12.5px; }

/* --- 事業案内の工程 ------------------------------------------------------ */
.flowstep__title{ font-size:clamp(20px,2.6vw,34px); line-height:1.45; font-weight:500; }
.flowstep__text{ font-size:14px; line-height:2.1; }

/* --- 会社概要・採用・お知らせ・お問い合わせ ------------------------------ */
.field__title{ font-size:17px; line-height:1.6; }
.philosophy__title{ font-size:18px; line-height:1.6; }
.philosophy__text{ font-size:13px; line-height:2.05; }
.profile__name{ font-size:clamp(26px,3.4vw,50px); line-height:1.35; font-weight:500; }
.profile__body{ font-size:14px; line-height:2.1; }
.interview__role{ font-size:18px; line-height:1.6; }
.interview__quote{ font-size:15.5px; line-height:1.85; }
.accesscard__name{ font-size:18px; }
.newsrow__title{ font-size:15px; line-height:1.85; }
.article__title{ font-size:clamp(22px,3vw,44px); line-height:1.5; font-weight:500; }
.article__body{ font-size:14.5px; line-height:2.15; }
.article__body h3{ font-size:19px; }
.contactinfo__value{ font-size:16px; }
.deftable__value{ font-size:14px; line-height:2.05; }
.cta__title{ font-size:clamp(24px,3.9vw,56px); line-height:1.45; font-weight:500; }
.cta__text{ font-size:13.5px; line-height:2.05; }

/* --- メニュー（ドロワー） ------------------------------------------------ */
.drawer__en{ font-size:clamp(30px,6vw,68px); letter-spacing:-.005em; font-weight:500; }
.drawer__ja{ font-size:11.5px; }

/* --- 英字の小さなラベル（Inter は 500 のほうが小さくても読みやすい） ------ */
.gnav__link,
.link-line,
.btn,
.breadcrumb,
.workcard__cat,
.field__en,
.flowstep__en,
.accesscard__en,
.footer__navtitle,
.contactinfo__label,
.newsrow__date{ font-weight:500; }
.gnav__link{ font-size:11.5px; letter-spacing:.13em; }
.btn,
.link-line{ font-size:11.5px; letter-spacing:.14em; }

/* --- 見出しの上に引かれる線（linetext）を、文字の大きさに追従させる ------
   従来は 8px の固定値だったため、見出しを大きくすると位置がずれます。
   em（文字サイズ基準）に変えて、どの大きさでも同じ見え方にします。 */
.linetext::after{
  top:-.2em;
  height:max(2px,.03em);
}


/* =============================================================================
 * 3. 英字ラベル（ABOUT US / SERVICE / 01 …）を大きく・括弧なしに
 * -----------------------------------------------------------------------------
 * 以前は「( ABOUT US )」のように括弧で囲み、11px で置いていました。
 * 小さくて目立たないため、括弧をやめて文字そのものを大きくしています。
 * 見出しの前に入っていた短い罫線も出しません（英字だけで見せます）。
 *
 * ★大きさを変えたいときは、下の font-size の数字だけを触ってください。
 *   clamp( 最小 , 画面幅に応じた値 , 最大 ) の3つの数字で決まります。
 * ★括弧付きの小さい表記に戻したいときは、README の 2-4 に元の指定があります。
 * ========================================================================== */

/* --- セクションの英字ラベル（ABOUT US / WORKS / PLANT / DB HEAD …） ------
   全ページの見出しの上に出る、いちばん数の多い英字ラベルです。 */
.sectionhead__en{
  gap:0;
  font-size:clamp(13px,1.1vw,16px);   /* 旧：11px */
  font-weight:600;
  letter-spacing:.18em;
  color:var(--c-accent);
}
/* もとの「短い罫線」も、あとから足した括弧も、どちらも出しません */
.sectionhead__en::before{ display:none; }
.sectionhead__en::after{ content:none; }

/* --- 番号（4つの工程・3つの強み・工程・DBヘッドの特長） 01 / 02 / 03 ----- */
.field__num,
.philosophy__num,
.flowstep__num{
  font-size:13px;                     /* 旧：10〜11px */
  font-weight:600;
  letter-spacing:.2em;
}
.field__num::before,    .field__num::after,
.philosophy__num::before, .philosophy__num::after,
.flowstep__num::before,   .flowstep__num::after{ content:none; }

/* --- 見出しに添える英字（FABRICATION / INTERVIEW / HEAD OFFICE …）-------
   日本語の見出しとセットで出る小さな英字も、同じ考え方で一段大きくします。 */
.flowstep__en     { font-size:12.5px; letter-spacing:.18em; }
.interview__en    { font-size:12.5px; letter-spacing:.18em; }
.accesscard__en   { font-size:12px;   letter-spacing:.18em; }
.field__en        { font-size:12px;   letter-spacing:.16em; }
.contactinfo__label{ font-size:12px;  letter-spacing:.18em; }
.workcard__cat    { font-size:11.5px; letter-spacing:.16em; }
.footer__navtitle { font-size:12px;   letter-spacing:.2em; }

/* --- CTA（お問い合わせ誘導）の英字ラベル -------------------------------- */
.cta__en{ font-size:13px; font-weight:600; letter-spacing:.2em; opacity:1; }
.cta__en::before,        .cta__en::after,
.interview__en::before,  .interview__en::after{ content:none; }

/* --- ヒーローのラベル ----------------------------------------------------
   青いベタ塗りのタグ（面で色を置く古い作り）から、すりガラス調の枠へ。
   背景がどんな明るさの動画でも白文字が読めるよう、半透明の黒を敷いています。 */
.hero__label{
  /* inline-block にしているのは、ラベルが長いとき（REINFORCING BAR CONSTRUCTION）
     に枠の中で自然に折り返させるためです（flex だと折り返せず枠がはみ出します） */
  display:inline-block; max-width:100%;
  background:rgba(12,16,20,.42);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  color:#fff;
  padding:.62em 1.35em;
  margin-bottom:2em;
  font-family:var(--ff-en);
  font-size:12px;                     /* 旧：10.5px */
  font-weight:600;
  letter-spacing:.2em;
}
.hero__label::before,
.hero__label::after{ content:none; }


/* =============================================================================
 * 4. 余白
 * -----------------------------------------------------------------------------
 * 文字を大きくした分、周囲の余白も広げないと窮屈に見えます。
 * セクションの上下と、見出しの下を中心に広げています。
 * ========================================================================== */

.section{ padding-block:clamp(86px,13vh,180px); }      /* 旧：clamp(70px,11vh,140px) */
.sectionhead{ margin-bottom:clamp(44px,6.2vh,96px); }  /* 旧：clamp(36px,5vh,72px)   */
.pagehead{ padding:calc(var(--header-h) + 15vh) 0 8.5vh; }
.hero__body{ padding-bottom:clamp(84px,12.5vh,150px); }
.cta__inner{ padding-block:clamp(96px,16vh,200px); }
.statement__actions{ margin-top:3.4em; }
.article__head{ padding-bottom:3em; margin-bottom:3.4em; }


/* =============================================================================
 * 5. 配色 — ヘッダーは白。青はロゴの青ひと色で通す
 * -----------------------------------------------------------------------------
 * 以前はヘッダーをロイヤルブルーのベタにし、その上に水色を細く差していました。
 * 新ロゴ（黒＋青）を主役にするため、次のように組み替えています。
 *
 *   ヘッダー … 白。ロゴの黒と青がそのまま立つ
 *   フッター … 白（marushin.css 側で指定）。上端に青い 3px 罫線
 *   青       … ロゴの青（#1a3cf0）ひと色。水色（#03a9f4）は全廃
 *
 * 白い面が増えるほど、細い青の線と青ベタが効きます。
 * ページの一番上の 3px バーは、ロゴと同じスピードスラッシュの形です
 * （形の指定は marushin.css 側にあります）。
 *
 * ★ヘッダーを濃い青のベタに戻したいときは、下の :root の --c-royal を使って
 *   .header の background を var(--c-royal)、color を #fff にし、
 *   さらに marushin.css のロゴ出し分け（暗色版／明色版）を
 *   ヘッダーの全状態で明色版になるよう広げてください。
 * ========================================================================== */

:root{
  /* 旧・ヘッダーのロイヤルブルー。現在は使っていませんが、
     濃い青のヘッダーに戻したいときのために残しています */
  --c-royal: #1c3fbf;
}

/* --- 下層ページ：白いヘッダー -------------------------------------------
   文字色は指定しません（body から受け継いだ黒のまま）。
   白い本文との境目は、下端の 1px 罫線でつけます。 */
.header{
  background:#fff;
  border-bottom-color:var(--c-line);
}

/* --- トップページのヒーロー上：従来どおり透明のまま ----------------------
   全画面の動画を隠さないため、ここだけは色を敷きません。
   文字とロゴは style.css / marushin.css 側で自動的に白へ切り替わります。 */
.header--overlay:not(.is-solid){
  background:transparent;
  border-bottom-color:transparent;
}

/* --- スクロール後：すりガラス調の白（style.css と同じ挙動） -------------- */
.header.is-solid{
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom-color:var(--c-line);
}

/* --- メニューを開いている間：透明（黒いオーバーレイの上） ---------------- */
.header.is-menu,
.header.is-menu.is-solid{
  background:transparent;
  border-bottom-color:transparent;
}

/* --- 最上部の 3px バー：白い地の上なので、ロゴの青をそのまま置く --------- */
.header::after{ background:var(--c-accent); }

/* ロゴの暗色版／明色版の出し分けは marushin.css 側の指定どおりです。
   （白いヘッダー＝暗色版、ヒーロー上とメニュー展開中＝明色版） */


/* =============================================================================
 * スマートフォン向けの微調整
 * -----------------------------------------------------------------------------
 * 上の clamp() の最小値で足りない部分だけ、ここで詰めています。
 * ========================================================================== */

@media (max-width:767px){
  body{ font-size:14px; letter-spacing:.01em; }
  .hero__copy{ line-height:1.42; }
  .hero__label{ font-size:10px; letter-spacing:.16em; padding:.55em 1.1em; }
  .pagehead__en{ line-height:1.02; }
  .sectionhead__title{ line-height:1.55; }
  .statement__copy{ line-height:1.7; }
  .drawer__en{ letter-spacing:.01em; }
  .section{ padding-block:clamp(64px,11vh,110px); }
  .sectionhead{ margin-bottom:34px; }
  .pagehead{ padding-top:calc(var(--header-h) + 10vh); }
}