@charset "utf-8";
/* ==========================================================================
   株式会社SANEI リニューアル版 共通スタイル
   - 新テンプレート（common/site/）を使うページで読み込む
   - 既存ページの css/style.css とは独立しており、既存ページには影響しない

   デザインの基本
   - 色：ロゴの青を基準に、白と淡いグレーを広く使い、濃紺は文字と最下部だけに使う
   - 形：角丸・影・グラデーションは使わず、細い罫線と余白で区切る
   - 文字：サイズの大小は見出しの要所だけ。ウェイトと字間・余白で階層をつくる
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
    --c-blue: #0080cc;           /* ロゴの青：罫線・アイコン・大きな要素 */
    --c-blue-ink: #006db3;       /* 文字・ボタン用の青（白地でコントラスト 5.5:1） */
    --c-cyan: #00aacc;           /* ロゴの水色：アクセントとしてごく一部に */
    --c-navy: #0b2545;           /* 見出し・最下部 */
    --c-text: #243647;           /* 本文 */
    --c-text-sub: #56687a;       /* 補足文（白地で 5.7:1） */
    --c-line: #d9e1e8;           /* 罫線 */
    --c-bg: #ffffff;
    --c-bg-gray: #f4f6f8;        /* 淡いグレー */
    --c-bg-blue: #eef6fb;        /* ごく薄いブルー */

    --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    --fs-xs: 0.8125rem;   /* 13px */
    --fs-sm: 0.875rem;    /* 14px */
    --fs-md: 1.0625rem;   /* 17px */
    --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);

    --container: 1200px;
    --gutter: 20px;
    --section-y: clamp(72px, 9vw, 128px);
    --header-h: 64px;
}
@media (min-width: 768px) {
    :root { --gutter: 40px; }
}
@media (min-width: 1080px) {
    :root { --header-h: 84px; --gutter: 48px; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}
body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-base);
    font-size: 1rem;
    line-height: 1.9;
    letter-spacing: 0.03em;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
/* 見出しは文節で改行し、文節が1行に収まらない長い語句（施工実績のタイトル等）は文字単位で改行する */
h1, h2, h3 { text-wrap: balance; word-break: auto-phrase; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
a { color: var(--c-blue-ink); text-underline-offset: 0.2em; }
a:hover { color: var(--c-navy); }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
}

.skip-link {
    position: absolute; left: 8px; top: -100px; z-index: 1000;
    padding: 8px 16px; background: var(--c-navy); color: #fff;
}
.skip-link:focus { top: 8px; color: #fff; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.u-pc { display: none; }
@media (min-width: 1080px) { .u-pc { display: inline; } }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }

/* セクション見出し：英字ラベルや装飾線は付けず、文字の大きさと余白で示す */
.section-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 760px; }
.section-head--split {
    display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: none;
}
.section-title {
    color: var(--c-navy);
    font-size: var(--fs-h2); font-weight: 700; line-height: 1.55; letter-spacing: 0.04em;
}
.section-lead { margin-top: 16px; color: var(--c-text-sub); }
@media (min-width: 768px) {
    .section-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 48px; }
    .section-head--split > div { max-width: 760px; }
}

/* --------------------------------------------------------------------------
   Buttons / links
   リンクの優先順位は全ページ共通で次の2段階にそろえる。
   - 主要な行動（お問い合わせ・応募・送信・トップの「事業案内」）：.button--primary（青地・白文字の角型）
   - それ以外の移動（詳しく見る・施工実績を見る・関連ページ）：.text-link（青文字＋右の線）
   .button--outline はトップページの見出し横の一覧リンクにのみ使う。
   カテゴリ切り替え・ページ内リンク・前後の移動は役割に合わせた個別の部品（.works-filter 等）を使う。
   フォーカス表示は Base の :focus-visible（青の枠線）で全部品共通。
   -------------------------------------------------------------------------- */
.button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 12px 28px;
    border: 1px solid transparent; border-radius: 2px;
    font-family: inherit; font-size: 0.9375rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.06em;
    text-decoration: none; text-align: center; cursor: pointer;
    -webkit-appearance: none; appearance: none; /* フォームの送信ボタン（input）にも同じ見た目を適用 */
    transition: background-color .2s, color .2s, border-color .2s;
}
.button--primary { background: var(--c-blue-ink); color: #fff; }
.button--primary:hover { background: var(--c-navy); color: #fff; }
.button--outline { border-color: var(--c-blue-ink); color: var(--c-blue-ink); background: transparent; }
.button--outline:hover { background: var(--c-blue-ink); color: #fff; }
.button--wide { width: 100%; }

.text-link {
    position: relative; display: inline-flex; align-items: center; gap: 10px;
    color: var(--c-blue-ink); font-weight: 700; text-decoration: none;
}
/* 見た目と配置は変えずに、タップできる範囲を上下に広げる（44px 程度） */
.text-link::before { content: ""; position: absolute; inset: -7px 0; }
.text-link::after {
    content: ""; width: 18px; height: 1px; background: currentColor;
    transition: width .2s;
}
.text-link:hover { color: var(--c-navy); }
.text-link:hover::after { width: 26px; }


/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    height: var(--header-h);
    background: #fff;
    border-bottom: 1px solid transparent;
    transition: border-color .2s;
}
.site-header.is-scrolled { border-bottom-color: var(--c-line); }
.site-header__inner {
    display: flex; align-items: center; gap: 32px; height: 100%;
    max-width: calc(1360px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);
}
.site-header__logo { flex-shrink: 0; display: block; line-height: 0; }
.site-header__logo img { width: auto; height: 38px; }
.site-header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.site-header__tel { display: none; }
.site-header__contact { display: none; }
.site-header__tel-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; color: var(--c-blue-ink);
}
.menu-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 52px; height: 48px; margin-right: -8px; padding: 0;
    background: none; border: 0; color: var(--c-navy); cursor: pointer;
}
.menu-toggle__bar, .menu-toggle__bar::before, .menu-toggle__bar::after {
    display: block; width: 22px; height: 2px; background: currentColor;
    transition: transform .25s, background-color .25s;
}
.menu-toggle__bar { position: relative; margin-top: 6px; }
.menu-toggle__bar::before, .menu-toggle__bar::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bar::before { top: -6px; }
.menu-toggle__bar::after { top: 6px; }
.menu-toggle__label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1; margin-top: 4px; }
.is-menu-open .menu-toggle__bar { background: transparent; }
.is-menu-open .menu-toggle__bar::before { transform: translateY(6px) rotate(45deg); }
.is-menu-open .menu-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); }

/* スマートフォン・タブレット：全面メニュー */
.global-nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
    display: flex; flex-direction: column;
    padding: 8px var(--gutter) 40px; overflow-y: auto;
    background: #fff; border-top: 1px solid var(--c-line);
    visibility: hidden; opacity: 0;
    transition: opacity .2s, visibility .2s;
}
.is-menu-open { overflow: hidden; }
.is-menu-open .global-nav { visibility: visible; opacity: 1; }
.global-nav__list a {
    display: block; padding: 18px 0; border-bottom: 1px solid var(--c-line);
    color: var(--c-navy); font-size: 1.0625rem; font-weight: 700; text-decoration: none;
}
.global-nav__list a[aria-current="page"] { color: var(--c-blue-ink); }
/* 子ページ（スマートフォンのメニューのみ表示） */
.global-nav__children { padding: 4px 0 12px 1em; border-bottom: 1px solid var(--c-line); }
.global-nav__list .global-nav__children a { padding: 10px 0; border-bottom: 0; font-size: 0.9375rem; font-weight: 500; }
.global-nav__list li:has(> .global-nav__children) > a { border-bottom: 0; }
.global-nav__contact { margin-top: 32px; }
.global-nav__contact-label, .global-nav__contact-note { color: var(--c-text-sub); font-size: var(--fs-sm); }
.global-nav__tel {
    display: inline-block; color: var(--c-navy); font-size: 1.75rem; font-weight: 700;
    letter-spacing: 0.04em; line-height: 1.4; text-decoration: none;
}

.global-nav__sns { margin-top: 16px; }

/* 公式SNS（common/site/partials/sns.php）：フッター・メニュー共通。アイコンは 20px、タップ範囲は 44px */
.sns-links { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -12px; }
.sns-links__link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; color: var(--c-text-sub);
    transition: color .2s;
}
.sns-links__link:hover, .sns-links__link:focus-visible { color: var(--c-blue-ink); }
.sns-links__link:focus-visible { outline-offset: -2px; }
.sns-links__link svg { display: block; }
/* ヘッダーのSNSは PC の 1行に収まる幅のみ（下の @media (min-width: 1280px) で表示） */
.site-header__sns { display: none; }

@media (min-width: 768px) {
    .site-header__contact { display: inline-flex; min-height: 44px; padding: 8px 20px; font-size: var(--fs-sm); margin-right: 8px; }
}
@media (min-width: 1080px) {
    .site-header__logo img { height: 46px; }
    .menu-toggle, .site-header__tel-icon, .global-nav__sp-only, .global-nav__contact, .global-nav__children { display: none; }
    .global-nav {
        position: static; display: block; padding: 0; overflow: visible;
        background: none; border: 0; visibility: visible; opacity: 1;
        /* 余った幅をロゴ側と右側（SNS・TEL）に均等に配分し、ナビを中央寄りに置く */
        margin-inline: auto;
    }
    .global-nav__list { display: flex; gap: 4px; }
    .global-nav__list a {
        position: relative; padding: 8px 14px; border: 0;
        color: var(--c-text); font-size: 0.9375rem; font-weight: 500; white-space: nowrap;
    }
    .global-nav__list a::after {
        content: ""; position: absolute; left: 14px; right: 14px; bottom: 0;
        height: 2px; background: var(--c-blue); transform: scaleX(0); transition: transform .2s;
    }
    .global-nav__list a:hover { color: var(--c-blue-ink); }
    .global-nav__list a:hover::after,
    .global-nav__list a[aria-current="page"]::after,
    .global-nav__list a.is-current-section::after { transform: scaleX(1); }
    .site-header__actions { gap: 24px; margin-left: 0; }
    .site-header__tel {
        display: block; color: var(--c-navy); font-size: 1.125rem; font-weight: 700;
        letter-spacing: 0.04em; text-decoration: none; white-space: nowrap;
    }
    .site-header__tel-label { margin-right: 6px; color: var(--c-blue-ink); font-size: 0.75rem; }
    .site-header__contact { margin-right: 0; white-space: nowrap; }
}
/* PCヘッダーの最小幅帯：文字サイズは変えず、要素間の余白とナビの左右の余白だけを詰めて1行に収める */
@media (min-width: 1080px) and (max-width: 1129px) {
    .site-header__inner { gap: 24px; }
    .site-header__actions { gap: 16px; }
    .global-nav__list a { padding-inline: 11px; }
    .global-nav__list a::after { left: 11px; right: 11px; }
}
/* PCヘッダーのSNS：ロゴ・ナビ・SNS・TEL・お問い合わせが1行に収まる幅で表示（狭い幅ではSNSだけを隠す） */
@media (min-width: 1280px) {
    .site-header__sns { display: flex; flex-wrap: nowrap; gap: 0; margin: 0 -6px 0 0; }
    .site-header__sns .sns-links__link { width: 32px; }
}

/* --------------------------------------------------------------------------
   共通の情報パーツ（トップ・下層ページで共用）
   -------------------------------------------------------------------------- */
/* 項目名と内容の表（会社情報・募集要項など） */
.data-table { border-top: 1px solid var(--c-line); }
.data-table > div {
    display: grid; grid-template-columns: 6.5em 1fr; gap: 16px;
    padding: 14px 0; border-bottom: 1px solid var(--c-line); font-size: 0.9375rem;
}
.data-table dt { color: var(--c-text-sub); font-size: var(--fs-sm); line-height: 2; }
.data-table--wide > div { grid-template-columns: 7.5em 1fr; gap: 12px; }
@media (min-width: 768px) {
    .data-table--wide > div { grid-template-columns: 9em 1fr; gap: 24px; padding: 18px 0; }
}

/* 年表 */
.history { border-top: 1px solid var(--c-line); }
.history li { display: grid; grid-template-columns: 7.5em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.history__date { color: var(--c-blue-ink); font-size: var(--fs-sm); font-weight: 700; line-height: 1.9; }
.history__text { font-size: 0.9375rem; }

/* 補足の箇条書き */
.note-list { margin-top: 24px; }
.note-list li { position: relative; padding-left: 1.2em; font-size: 0.9375rem; }
.note-list li + li { margin-top: 6px; }
.note-list li::before { content: "・"; position: absolute; left: 0; color: var(--c-blue-ink); }

/* --------------------------------------------------------------------------
   下層ページ：タイトル領域（common/site/partials/page-head.php）
   -------------------------------------------------------------------------- */
.page-head { padding-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--c-line); }
.breadcrumb { padding-block: 16px; font-size: var(--fs-xs); color: var(--c-text-sub); }
.breadcrumb ol { display: flex; flex-wrap: wrap; }
.breadcrumb li + li::before { content: "/"; margin: 0 10px; color: #a3b1bf; }
.breadcrumb a { color: var(--c-text-sub); }
.breadcrumb a:hover { color: var(--c-blue-ink); }
.page-head__title {
    margin-top: clamp(24px, 4vw, 48px);
    color: var(--c-navy); font-size: clamp(1.875rem, 1.4rem + 1.9vw, 2.75rem); font-weight: 700;
    line-height: 1.4; letter-spacing: 0.06em;
}
.page-head__lead { margin-top: 16px; max-width: 46em; color: var(--c-text-sub); }
/* ページ内リンク */
.page-toc { margin-top: 32px; }
.page-toc ul { display: flex; flex-wrap: wrap; border-top: 1px solid var(--c-line); }
/* 短い項目は2列、項目名が半分の幅に収まらない場合はその項目だけ1行を使う（途中で折り返さない） */
.page-toc li { flex: 1 0 50%; border-bottom: 1px solid var(--c-line); }
.page-toc a {
    display: flex; align-items: center; min-height: 48px; padding-right: 12px;
    color: var(--c-blue-ink); font-size: 0.9375rem; font-weight: 700; text-decoration: none; white-space: nowrap;
}
@media (min-width: 768px) {
    .page-toc ul { display: flex; flex-wrap: wrap; border-top: 0; }
    .page-toc li { flex: 0 0 auto; border-bottom: 0; }
    .page-toc a { min-height: 44px; padding-right: 20px; margin-right: 20px; border-right: 1px solid var(--c-line); }
    .page-toc li:last-child a { border-right: 0; }
}
.page-toc a::before {
    content: ""; width: 7px; height: 7px; margin-right: 10px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg);
}
.page-toc a:hover { color: var(--c-navy); }

/* --------------------------------------------------------------------------
   下層ページ：本文レイアウト
   -------------------------------------------------------------------------- */
.page-section { padding-block: clamp(64px, 8vw, 112px); }
.page-section--gray { background: var(--c-bg-gray); }

/* 見出しを左、内容を右に置く構成（表・要項向け） */
.split { display: grid; gap: 28px; }
@media (min-width: 1024px) {
    .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
}

/* 写真と文章を並べる構成 */
.media-text { display: grid; gap: 32px; }
.media-text__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--c-bg-gray); }
.media-text__body > .section-title + * { margin-top: 24px; }
.media-text__body > p + p { margin-top: 16px; }
.media-text__more { margin-top: 28px; }
@media (min-width: 900px) {
    .media-text { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
    .media-text--reverse .media-text__media { order: 2; }
}

/* 小さい写真の列（元画像の解像度以上に拡大しない） */
.photo-row { display: grid; grid-template-columns: repeat(3, minmax(0, 260px)); gap: 8px; margin-top: 40px; }
@media (min-width: 768px) { .photo-row { gap: 12px; } }
.photo-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 地図の埋め込み */
.map-embed { margin-top: 48px; aspect-ratio: 4 / 3; background: #e6ebf0; }
.map-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) { .map-embed { aspect-ratio: 16 / 7; } }

/* 代表あいさつ：写真は元画像（248px）以下で表示 */
.message { display: grid; grid-template-columns: 112px 1fr; gap: 24px 20px; align-items: center; }
.message__title { grid-column: 1 / -1; }
.message__portrait img { width: 112px; height: auto; }
.message__portrait figcaption { display: none; }
.message__body { grid-column: 1 / -1; }
.message__body p { max-width: 38em; }
.message__body p + p { margin-top: 1em; }
.message__sign { margin-top: 32px !important; color: var(--c-navy); font-weight: 700; }
@media (min-width: 768px) {
    .message { grid-template-columns: minmax(0, 1fr) 220px; grid-template-rows: auto 1fr; gap: 0 64px; align-items: start; }
    .message__title { grid-column: 1; }
    .message__body { grid-column: 1; margin-top: 32px; }
    .message__portrait { grid-column: 2; grid-row: 1 / span 2; }
    .message__portrait img { width: 220px; }
    .message__portrait figcaption { display: block; margin-top: 12px; color: var(--c-text-sub); font-size: var(--fs-sm); line-height: 1.7; }
    .message__portrait figcaption span { color: var(--c-navy); font-size: 1rem; font-weight: 700; }
}
@media (min-width: 1080px) {
    .message { grid-template-columns: minmax(0, 1fr) 248px; gap: 0 96px; }
    .message__portrait img { width: 248px; }
}

/* --------------------------------------------------------------------------
   お問い合わせ（common/site/partials/contact.php）
   -------------------------------------------------------------------------- */
.contact-block { padding-block: clamp(64px, 8vw, 104px); background: var(--c-bg-blue); }
.contact-block__inner { display: grid; gap: 40px; }
.contact-block__heading { color: var(--c-navy); font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); font-weight: 700; line-height: 1.6; letter-spacing: 0.04em; }
.contact-block__text p { margin-top: 16px; color: var(--c-text-sub); max-width: 34em; }
.contact-block__actions { display: grid; gap: 32px; }
.contact-block__label { color: var(--c-text-sub); font-size: var(--fs-sm); font-weight: 700; }
.contact-block__tel-number {
    display: inline-block; color: var(--c-navy); font-size: clamp(1.875rem, 1.6rem + 1vw, 2.375rem); font-weight: 700;
    letter-spacing: 0.04em; line-height: 1.3; text-decoration: none;
}
.contact-block__note { margin-top: 8px; color: var(--c-text-sub); font-size: var(--fs-sm); }
.contact-block__form .button { margin-top: 8px; }
@media (min-width: 768px) {
    .contact-block__actions { grid-template-columns: 1fr 1fr; gap: 0; }
    .contact-block__tel { padding-right: 40px; }
    .contact-block__form { padding-left: 40px; border-left: 1px solid #cfdde8; }
}
@media (min-width: 1080px) {
    .contact-block__inner { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: #fff; color: var(--c-text); font-size: var(--fs-sm); }
.site-footer a { color: var(--c-text); text-decoration: none; }
.site-footer a:hover { color: var(--c-blue-ink); text-decoration: underline; }
.site-footer__main { display: grid; gap: 40px; padding-block: 56px; }
.site-footer__logo { display: inline-block; line-height: 0; }
.site-footer__logo img { width: auto; height: 40px; }
.site-footer__address { margin-top: 20px; line-height: 2; }
.site-footer__license { margin-top: 4px; color: var(--c-text-sub); font-size: var(--fs-xs); }
.site-footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
.site-footer__nav-heading { margin-bottom: 8px; color: var(--c-navy); font-weight: 700; }
.site-footer__nav li a { display: inline-block; padding: 4px 0; }
.site-footer__sns { margin-top: 12px; }
.site-footer__bottom { padding-block: 14px; background: var(--c-navy); color: #b8c6d4; font-size: var(--fs-xs); }
@media (min-width: 1080px) {
    .site-footer__main { grid-template-columns: 1fr auto; gap: 64px; }
    .site-footer__nav { grid-template-columns: repeat(3, minmax(140px, auto)); gap: 48px; }
}