@charset "utf-8";

/* ==========================================================
   page.css  下層ページ専用（会社案内ほか）
   - common.css の変数・.container を利用（HOME用CSSは変更しない）
   - 下層専用クラスは .sub- / .page- プレフィックス
   - 読み込み順：common.css → page.css → responsive.css
     （responsive.css の .visible-xs / .hidden-xs を利用）
   ========================================================== */

:root {
    --sub-label-w: 200px;
    --sub-gap: 40px;
    --color-bg-green: #f2f5f2;
}

/* ---------- 共通：見出し（英字ラベル＋日本語見出し＋短いライン） ---------- */
.sub-heading { margin: 0; }
.sub-heading-en {
    display: block;
    color: var(--color-green-dark);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
    line-height: 1.4;
}
.sub-heading-ja {
    display: block;
    margin-top: 6px;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .06em;
}
.sub-heading::after {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin-top: 16px;
    background: var(--color-green);
}

/* 見出し列＋内容の2カラム（PHILOSOPHY / PROFILE / CERTIFICATION / HISTORY / ACCESS） */
.sub-section { padding: 64px 0; background: #fff; }
.sub-section--tint { background: var(--color-bg-green); }
.sub-section-inner {
    display: grid;
    grid-template-columns: var(--sub-label-w) minmax(0, 1fr);
    gap: 0 var(--sub-gap);
}
.sub-lead { margin: 0 0 24px; font-size: .875rem; line-height: 2; }

/* 写真：差し替え前提（比率はCSS、トリミングは object-position で調整） */
.sub-photo { margin: 0; background: #d9e0da; overflow: hidden; }
.sub-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--photo-pos, center);
}

/* ---------- 下層共通FV ---------- */
.sub-fv {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 340px;
    overflow: hidden;
    color: #fff;
    background: #5f7f68; /* 写真未配置時の仮色 */
}
.sub-fv-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}
.sub-fv::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 40, 24, .72) 0%, rgba(10, 40, 24, .35) 45%, rgba(10, 40, 24, 0) 75%);
    pointer-events: none;
}
.sub-fv-inner { position: relative; z-index: 1; padding-block: 40px; }
.sub-fv-en { margin: 0; font-size: .75rem; letter-spacing: .16em; }
.sub-fv-title {
    margin: 4px 0 0;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .08em;
}
.breadcrumb { margin-top: 14px; font-size: .75rem; letter-spacing: .06em; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li + li::before { content: ">"; margin-right: 8px; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- OUR MISSION ---------- */
.sub-mission { padding: 64px 0; background: #fff; }
.sub-mission-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.sub-mission-en {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: var(--color-green-dark);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
}
.sub-mission-en::before { content: ""; width: 20px; height: 2px; background: var(--color-green); }
.sub-mission-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .06em;
}
.sub-mission-text { margin: 22px 0 0; font-size: .875rem; line-height: 2.1; }
.sub-mission .sub-photo { aspect-ratio: 4 / 3; }

/* ---------- PHILOSOPHY ---------- */
.sub-philosophy-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sub-gap);
    align-items: center;
}
.sub-philosophy .sub-photo { aspect-ratio: 16 / 10; }
.sub-philosophy-title {
    margin: 0 0 14px;
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .06em;
}
.sub-philosophy-list { margin: 0 0 14px; padding: 0; list-style: none; font-size: .875rem; line-height: 2; }
.sub-philosophy-list li { position: relative; padding-left: 1.2em; }
.sub-philosophy-list li::before {
    content: "";
    position: absolute;
    top: .95em;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--color-green);
}
.sub-philosophy-motto { margin: 0; font-size: .875rem; line-height: 2; }

/* ---------- COMPANY PROFILE ---------- */
.sub-profile-body {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--sub-gap);
    align-items: start;
}
.sub-table { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.8; }
.sub-table th,
.sub-table td { padding: 12px 16px; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.sub-table tr:first-child th,
.sub-table tr:first-child td { border-top: 1px solid var(--color-line); }
.sub-table th { width: 8.5em; background: #eef3ee; color: var(--color-green-dark); font-weight: 700; letter-spacing: .08em; }
.sub-table td { background: #fafcfa; }
.sub-table small { display: block; color: var(--color-subtext); font-size: .8125rem; }
.sub-profile .sub-photo { aspect-ratio: 4 / 5; position: sticky; top: 24px; }
.sub-profile .sub-photo {
    --photo-pos: 20% center;
}

/* ---------- CERTIFICATION ---------- */
.sub-cert-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sub-cert-card {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--color-line);
}
.sub-cert-card img { display: block; width: 100%; height: auto; background: #eee; }
.sub-cert-title { margin: 0; color: var(--color-green-dark); font-family: var(--font-serif); font-size: 1.375rem; font-weight: 500; line-height: 1.4; }
.sub-cert-name { margin: 2px 0 8px; font-size: .875rem; font-weight: 700; }
.sub-cert-meta { margin: 0; font-size: .8125rem; line-height: 1.8; }
.sub-cert-meta dt { margin-top: 6px; color: var(--color-subtext); font-weight: 700; }
.sub-cert-meta dd { margin: 0; }

/* ---------- HISTORY（行は <li> を足すだけで追加可能） ---------- */
.sub-history-list { position: relative; margin: 0; padding: 0; list-style: none; }
.sub-history-list::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 190px;
    width: 1px;
    background: var(--color-line);
}
.sub-history-item {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 0 40px;
    position: relative;
    padding: 6px 0;
    font-size: .9375rem;
    line-height: 1.9;
}
.sub-history-item::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 186px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-green);
}
.sub-history-date { font-family: var(--font-serif); letter-spacing: .04em; }
.sub-history-text { margin: 0; padding-left: 16px; }

/* ---------- ACCESS ---------- */
.sub-access-body {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: var(--sub-gap);
    align-items: stretch;
}
.sub-access-address { margin: 0 0 8px; font-size: .9375rem; line-height: 1.9; }
.sub-access-contact { margin: 0 0 24px; font-size: .875rem; }
.sub-access-contact span { display: inline-block; margin-right: 16px; }
.sub-access .btn-outline { min-width: 240px; }
.sub-map { min-height: 300px; background: #e6ece7; }
.sub-map iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }

/* ---------- 施工実績（OUR WORKS）----------
   ※ HOMEの .works / .works-* とは別系統（.sub-works-* のみ使用）
   カードは <li class="sub-works-item"> を ul の先頭に足すだけで追加可能 */
.sub-works { padding: 56px 0 88px; background: #fff; }
.sub-works-en {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    color: var(--color-green-dark);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
}
.sub-works-en::before { content: ""; width: 20px; height: 2px; background: var(--color-green); }
.sub-works-lead {
    margin: 0 0 40px;
    font-family: var(--font-serif);
    font-size: clamp(1.125rem, 1.9vw, 1.5rem);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .06em;
}
.sub-works-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 40px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sub-works-photo {
    margin: 0;
    background: #d9e0da; /* 写真未配置時の仮色 */
}
.sub-works-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3; /* 加工済み 1000×750。比率が同じなので黒板は切れない */
    object-fit: cover;
}
.sub-works-name {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 14px 0 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .08em;
}

.sub-works-name::before {
    content: "";
    flex-shrink: 0;
    width: 26px;
    height: 2px;
    margin-top: .8em;
    background: var(--color-green);
}

/* ==========================================================
   Responsive
   ========================================================== */

/* タブレット・スマホ：900px以下 */
@media screen and (max-width: 900px) {
    .sub-section { padding: 48px 0; }
    .sub-section-inner { grid-template-columns: 1fr; row-gap: 24px; }
    .sub-heading::after { margin-top: 12px; }
    .sub-mission { padding: 48px 0; }
    .sub-mission-inner { grid-template-columns: 1fr; gap: 28px; }
    .sub-philosophy-body,
    .sub-access-body { grid-template-columns: 1fr; gap: 24px; }
    .sub-profile-body { grid-template-columns: 1fr; gap: 24px; }
    .sub-profile .sub-photo { position: static; aspect-ratio: 16 / 9; }
    .sub-cert-card { grid-template-columns: 90px minmax(0, 1fr); padding: 18px; gap: 16px; }
    .sub-history-list::before { left: 150px; }
    .sub-history-item { grid-template-columns: 130px minmax(0, 1fr); gap: 0 28px; }
    .sub-history-item::before { left: 146px; }
    .sub-works { padding: 44px 0 64px; }
    .sub-works-list { gap: 32px 24px; }
}

/* スマホ：767px以下 */
@media screen and (max-width: 767px) {
    .sub-fv { min-height: 200px; }
    .sub-fv-inner { padding-block: 28px; }
    .sub-fv-title { font-size: 1.75rem; }
    .breadcrumb { margin-top: 10px; font-size: .6875rem; }
    .sub-section,
    .sub-mission { padding: 40px 0; }
    .sub-mission-text { font-size: .875rem; }
    .sub-table th,
    .sub-table td { padding: 10px 12px; }
    .sub-table th { letter-spacing: .04em; }
    .sub-cert-list { grid-template-columns: 1fr; }
    /* ISO認証カード：スマホは縦並び */
.sub-cert-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px;
}

.sub-cert-card img {
    width: 100px;
}

.sub-cert-meta {
    font-size: .875rem;
}
    .sub-history-list::before { left: 4px; }
    .sub-history-item { grid-template-columns: 1fr; padding: 6px 0 6px 28px; }
    .sub-history-item::before { left: 0; top: 14px; }
    .sub-history-text { padding-left: 0; }
    .sub-access .btn-outline { width: 100%; }
    .sub-map,
    .sub-map iframe { min-height: 240px; }
    .sub-works { padding: 36px 0 56px; }
    .sub-works-lead { margin-bottom: 28px; font-size: 1rem; }
    .sub-works-list { grid-template-columns: 1fr; gap: 28px; }
    .sub-works-name { margin-top: 10px; font-size: .9375rem; }

}


/* ==========================================================
   事業案内（business.html）  .sub-business-*
   ※ 既存の .sub-section / .sub-heading / .sub-photo / .sub-mission を再利用
   ※ 既存ルールは変更せず、末尾に追記のみ
   ========================================================== */

/* ---------- BUSINESS FIELD（主要3事業） ---------- */
.sub-business-field { padding: 64px 0; }
.sub-business-num {
    margin: 18px 0 0;
    color: var(--color-green-dark);
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .04em;
}
.sub-business-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sub-gap);
    align-items: start; /* 文章が増えても写真の高さは固定しない */
}
.sub-business-photo { aspect-ratio: 16 / 10; }
.sub-business-catch {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .06em;
}
/* 将来追加する説明（段落・小見出し・箇条書き） */
.sub-business-text > * + * { margin-top: 16px; }
.sub-business-text p { margin: 0; font-size: .875rem; line-height: 2; }
.sub-business-text h4 {
    margin: 28px 0 0;
    color: var(--color-green-dark);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .06em;
}
.sub-business-text ul { margin: 0; padding-left: 1.4em; font-size: .875rem; line-height: 2; }

/* ---------- OTHER BUSINESS ---------- */
.sub-business-other-list { margin: 0; padding: 0; list-style: none; }
.sub-business-other-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-line);
}
.sub-business-other-item:first-child { border-top: 1px solid var(--color-line); }
.sub-business-other-name {
    margin: 0;
    color: var(--color-green-dark);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: .08em;
}
.sub-business-other-text { margin: 6px 0 0; font-size: .875rem; line-height: 2; }

/* ---------- Responsive ---------- */
@media screen and (max-width: 900px) {
    .sub-business-field { padding: 48px 0; }
    /* 見出し（左）と番号（右）を同じ行に */
    .sub-business-label {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 16px;
    }
    .sub-business-num { margin-top: 0; font-size: 2rem; }
    .sub-business-body { grid-template-columns: 1fr; gap: 20px; }
}

@media screen and (max-width: 767px) {
    .sub-business-field { padding: 40px 0; }
    .sub-business-photo { aspect-ratio: 2 / 1; }
    .sub-business-catch { font-size: 1.0625rem; }
    .sub-business-other-item { padding: 14px 0; }
}

/* 404ページ */
.error404-section {
    padding: 64px 0;
}

@media (max-width: 767px) {
    .error404-section {
        padding: 48px 0;
    }
}
@media (min-width: 901px) {
    .error404-content {
        max-width: 700px;
        margin-inline: auto;
    }
}