@charset "UTF-8";
/* =========================================================
シンジダイ株式会社 トップページ
写真・イラストは assets/img/ の書き出し画像を使用しています。
ロゴ : logo_shinjidai_blue.png（先方ロゴ logo_shinjidai＿blue.png の余白を詰めて横1200pxにしたもの。濃い地用に logo_shinjidai_white.png も用意。以前は logo_c.png）
FVイラスト : fv-japan.png（日本地図。元データ fv7.png）＋ fv-street.png（地域の地図。元データ fv5）。以前は道路地図 fv-map6.png・街の線画 fv-map4.png など、d案は線画の街
FVの空 : fv-sky.jpg（元データ AdobeStock_580572140.jpeg を軽量化）
MESSAGE写真 : message.jpg（元データ img01.jpeg）
SERVICE写真 : service.jpg（元データ img02.jpeg）
取引先ロゴ : clients/*.svg（見た目確認用の仮素材。本番で差し替え）
========================================================= */
:root {
--sky: #10AAC5; /* メインの水色（修正後ロゴと同じ） */
--sky-deep: #0E93AA; /* ホバー時（上の色を暗くしたもの） */
--sky-pale: #E7F6F9; /* FVの背景・斜めの帯・SERVICEの面 */
--sky-band: #E7F6F9; /* 上と同色（旧指定との互換用） */
--ink: #1A1A1A; /* 見出し */
--ink-sub: #444444; /* 本文 */
--ink-mute: #8A8A8A; /* 補助 */
--line: #DCDCDC;
--star: #F5B500;
/* 濃い色は、日本地図・カード・ピンの線と同じ濃い青緑にそろえています（以前は紺 #0C3556） */
--navy: #135664; /* 無料相談ボタン・メニュー・地図の線 */
--navy-deep: #0C3E49; /* 無料相談ボタンのホバー */
/* 写真・マーキー・カードの縁取り（トップイラストの線と同じ太さ） */
--outline: 2px solid var(--navy); /* 写真の枠（地図・カードの線と同じ濃い青緑） */
--bg-soft: #FFFFFF; /* CLIENTS（取引先ロゴ）の背景。FV下端の波も同じ色にして、境目が見えないようにしています（以前は #FCFEFF。下の企業メッセージの白との境目に直線が出たので白に） */
--ph: #EFEFEF; /* 画像の仮置き色 */
--ph-text: #8A8A8A;
--container: 1240px;
--gutter: 40px;
--header-h: 76px;
/* FVの高さ：画面いっぱい（ヘッダーはFVの上に重ねます。低すぎる画面では 640px を確保） */
--fv-h: max(640px, 100svh);
/* セクションの境目の波の高さ（FV下端の波と同じ） */
--wave-h: clamp(24px, 4vw, 60px);
--font-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-base);
font-size: 15px;
line-height: 1.9;
color: var(--ink-sub);
background: #fff;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
a { color: inherit; text-decoration: none; transition: color .25s ease, background-color .25s ease; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--ink); color: #fff; padding: 10px 18px;
}
.skip-link:focus { left: 0; }
/* 写真の枠。中の ![]()
は枠いっぱいに収めます */
.message__photo,
.service__photo {
overflow: hidden;
border: var(--outline);
}
.message__photo img,
.service__photo img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* ---------- 下層ページの本文 ----------
中身ができるまでは、フッターがヘッダーのすぐ下に来ないよう高さだけ確保しています */
.sub-main { min-height: 60vh; }
/* ---------- 共通の見出し ----------
取引先ロゴ（CLIENTS）の見出しにそろえています：濃い青緑の英字ラベル＋水色の短い線、濃い青緑の見出し、後ろに大きな透かし文字
CLIENTS は中央寄せ、ほかのセクションは左寄せ。透かし文字は data-mark の文字を出します（採用のバナーの中のラベルには付けません） */
.sec-label {
position: relative;
color: var(--navy);
font-size: 15px;
font-weight: 500;
letter-spacing: .2em;
line-height: 1.4;
margin-bottom: 26px;
}
/* 英字ラベルの横に添える日本語のセクション名（下層ページ。上の目次の名前と同じ） */
.sec-label__ja {
display: inline-block;
margin-left: 14px;
padding-left: 14px;
border-left: 1.5px solid #B9D6DD;
color: #0E3038;
font-size: .93em;
font-weight: 700;
letter-spacing: .08em;
vertical-align: 1px;
}
.sec-label::after {
content: "";
display: block;
width: 40px; height: 3px;
margin-top: 14px;
border-radius: 2px;
background: var(--sky);
}
.sec-label[data-mark]::before {
content: attr(data-mark);
position: absolute;
z-index: -1;
/* CLIENTS と同じく、ラベルの下（見出しの後ろ）に置きます */
left: -.04em;
top: calc(100% - .06em);
font-size: clamp(64px, 9.4vw, 160px);
font-weight: 900;
line-height: 1;
letter-spacing: .02em;
white-space: nowrap;
color: rgba(16, 170, 197, .035); /* 見出しと重なっても文字が二重に見えないよう、ごく薄く（以前は .05） */
pointer-events: none;
user-select: none;
}
/* 淡い水色の地では、白地と同じくらいに見えるよう少し濃く */
.biz .sec-label[data-mark]::before,
.works .sec-label[data-mark]::before,
.news .sec-label[data-mark]::before { color: rgba(16, 170, 197, .065); }
.sec-title {
text-wrap: pretty; /* 最後の1文字だけが次の行に落ちないように */
color: var(--navy);
font-size: 38px;
font-weight: 700;
line-height: 1.6;
letter-spacing: .06em;
}
/* ---------- ヘッダー ---------- */
/* ヘッダー・フッターを差し込む箱（index.html の