@charset "UTF-8";
/* ========================================
   company.css - 会社概要ページ
   （page-hero は service.php とも共通利用）
======================================== */

/* ================================
   ページヒーロー（下層ページ共通）
================================ */
.page-hero {
    position: relative;
    padding: calc(var(--header-height-sp) + 3.5rem) 1.5rem 3.5rem;
    background-color: var(--color-primary);
    color: #fff;
    overflow: hidden;
    text-align: center;
}

@media (min-width: 768px) {
    .page-hero {
        padding: calc(var(--header-height-pc) + 5rem) 2rem 5rem;
    }
}

/* 和の幾何パターン（青海波風のドット） */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at center, rgba(95, 191, 179, 0.18) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    opacity: 0.5;
    pointer-events: none;
}

.page-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--section-width-md);
    margin: 0 auto;
}

.page-hero__en {
    display: block;
    font-family: var(--font-en);
    font-size: 0.85rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 0;
}

.page-hero__title {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

@media (min-width: 768px) {
    .page-hero__title { font-size: 2.75rem; }
}

/* ================================
   代表挨拶（index-about の「ずらし重なり」レイアウトを踏襲）
   左上：縦書きタイトル＋キャッチ ／ 右上：ロゴ面（段差で下げた帯）／
   下段：挨拶文＋署名の濃い面（左・右上面に重なってせり上がる、前面）
================================ */
/* 1024px未満：縦積み（head → ロゴ面 → 挨拶文）。
   page-top-section でセクションの上下左右パディングは0になるため、
   index-about と同じく余白は中身側（greeting__layout）で持たせる。
   下側セクション（会社概要）との間にも下余白を取る。 */
.greeting {
    /* page-hero は FV ではないため、食い込み量は0に（せり上がりの仕組みは活かしつつ重なりすぎを防ぐ）。 */
    --fv-overlap: 0px;
}

.greeting__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* セクション地：きなりいろ（--color-ivory-dark）。index-about と揃える */
    background-color: var(--color-ivory-dark);
    /* index-about と同じく、inner（layout）には左右パディングを持たせず、
       中身（head / body）側のパディングだけで余白を作る（画像面を端まで届ける）。 */
}

/* SP（1024px未満）の縦並び順：head → 挨拶文。空きセルは非表示 */
.greeting__head {
    order: 1;
}

.greeting__body {
    order: 2;
}

.greeting__slot {
    display: none;
}

/* head：縦書きタイトルを絶対配置、キャッチはタイトルを避けた領域で中央。
   index-about__head と同構造。背景面は擬似要素で敷き、右上を角切り。
   ベース（SP～）：左端から95%幅（右に5%余白）。1024px以上は width:auto に戻す */
.greeting__head {
    --greeting-title-w: 4.5rem;
    position: relative;
    width: 95%;
    min-height: 256px;
    padding: 2rem 1.5rem;
    isolation: isolate;
}

@media (min-width: 576px) {
    .greeting__head {
        padding: 3rem 2rem;
    }
}

@media (min-width: 1024px) {
    .greeting__head {
        --greeting-title-w: 5.5rem;
        min-height: 320px;
        padding: 3.5rem 2.5rem 3.5rem 3rem;
    }
}

/* head の背景面：擬似要素で敷き、右上を角切り。
   上に飛び出したタイトルが切れないよう背景だけをクリップ */
.greeting__head::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background-color: var(--color-beige-down);
    background-image: linear-gradient(rgba(250, 246, 238, 0.85), rgba(250, 246, 238, 0.85)), url("../images/bg-01.jpg");
    background-size: cover;
    background-position: center;
    -webkit-clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}

/* 縦書きタイトル：head 内の左端に絶対配置、縦中央。罫線の枠で囲う */
.greeting__title {
    position: absolute;
    top: -2.5rem;
    left: 5%;
    z-index: 1;
    margin-bottom: 0;
    align-items: center;
    border: 1px solid var(--color-silver-beige);
    padding: 1.25rem 0.5rem;
    background-color: var(--color-bg-light);
}

/* 左上角の水色三角ワンポイント（border テクニックの直角三角、枠線1pxに重ねる） */
.greeting__title::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 12px 0 0;
    border-color: var(--color-accent) transparent transparent transparent;
}

@media (min-width: 1024px) {
    .greeting__title {
        left: 3rem;
    }
}

.greeting__title .title__en {
    margin-bottom: 0.75rem;
}

/* 日本語見出し：全ブレークポイントで縦書き */
.greeting__title .title__ja {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size: 1.6rem;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-align: initial;
}

@media (min-width: 768px) {
    .greeting__title .title__ja {
        font-size: 1.9rem;
    }
}

/* キャッチ：タイトル幅を避けた領域で中央配置、行は左寄せ */
.greeting__head-catch {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    min-height: inherit;
    padding-left: var(--greeting-title-w);
}

.greeting__catch {
    font-family: var(--font-heading);
    /* キャッチコピー（モバイルファース）：index の catch と揃える。ベース（〜575px）＝1.6rem。
       行間詰めで塊感を出し、各行（<br>区切り）は nowrap で意図しない折り返しを防ぐ */
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--color-title);
}

@media (min-width: 576px) {
    .greeting__catch {
        font-size: 1.8rem;
    }
}

/* 880px以上：clamp で流動。中間はvw追従→大画面で最大2rem（index と揃える） */
@media (min-width: 880px) {
    .greeting__catch {
        font-size: clamp(1.8rem, 1.1rem + 1.4vw, 2rem);
    }
}

/* キャッチ下の画像2枚：中央斜め区切りと同角度で噛み合わせて横並び。
   1024px未満（縦積み）では非表示。推奨案通り PC のみ表示 */
.greeting__head-images {
    display: none;
}

@media (min-width: 1024px) {
    /* PC：images を layout 全体に絶対配置し、左ベージュ背景面（.greeting__layout::before）と
       完全に同じ inset:0 ・同じ clip-path（全幅50%を slant 振る中央斜線）にする。
       こうすれば画像の右端が背景の中央斜線と完全に一致し、body 側にはみ出さない。
       画像はこの範囲の下端に横並べ（align-items:flex-end）。overflow:hidden で斜線外を切る */
    .greeting__head-images {
        --greeting-img-slant: 64px;
        position: absolute;
        inset: 0;
        z-index: 1;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        -webkit-clip-path: polygon(0 0, calc(50% + var(--greeting-split-slant) / 2) 0, calc(50% - var(--greeting-split-slant) / 2) 100%, 0 100%);
        clip-path: polygon(0 0, calc(50% + var(--greeting-split-slant) / 2) 0, calc(50% - var(--greeting-split-slant) / 2) 100%, 0 100%);
    }

    /* 各画像面：images ブロック内に絶対配置で左・右を固定。下揃え・高さ180px。
       職人（左）= layout 左端から50%位置まで、街並み（右）= 50〜100%。
       ブロックの clip + overflow:hidden で左半分（中央斜線まで）だけ見えるので、
       街並みの右半は斜線より右に出た分が切り取られる */
    .greeting__head-image {
        position: absolute;
        bottom: 0;
        height: 180px;
        overflow: hidden;
    }

    .greeting__head-image--left {
        left: 0;
        width: 25%;
    }

    /* 右画像：左画像の右端（25%＝見える左半分の真ん中）から斜辺幅（64px）だけ左に戻した位置に置く。
       右端は中央斜線（上端側で約58%相当）を超えるまで広げ、超えた分はブロックの clip で切られる。
       重なりを px 固定にすることで、画面幅が変わっても斜辺の噛み合わせがずれず隔間が出ない */
    .greeting__head-image--right {
        left: calc(25% - var(--greeting-img-slant));
        width: 35%;
    }

    .greeting__head-image-img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        display: block;
    }

    /* 左画像：右下を斜めにカットして右上が出っ張る形 */
    .greeting__head-image--left {
        -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - var(--greeting-img-slant)) 100%, 0 100%);
        clip-path: polygon(0 0, 100% 0, calc(100% - var(--greeting-img-slant)) 100%, 0 100%);
    }

    /* 右画像：左上を同角度で斜めにカットして左下が出っ張る形。
       左画像の右下斜辺と、この右画像の左上斜辺が接して一本の斜線に見える。
       右辺はブロック側の clip + overflow:hidden で中央斜線に沿って切る */
    .greeting__head-image--right {
        -webkit-clip-path: polygon(var(--greeting-img-slant) 0, 100% 0, 100% 100%, 0 100%);
        clip-path: polygon(var(--greeting-img-slant) 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* ロゴ：head の右上に絶対配置。head 背景面（::before）より前面、タイトル・キャッチと同層。
   右上の角切り（::before の clip）にかからないよう、右上から少し内側に置く */
.greeting__logo {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1;
    display: block;
    width: 92px;
    height: 92px;
    opacity: 0.85;
}

@media (min-width: 576px) {
    .greeting__logo {
        top: 2rem;
        right: 2rem;
        width: 100px;
        height: 100px;
    }
}

@media (min-width: 1024px) {
    .greeting__logo {
        top: 2.5rem;
        right: 2.5rem;
    }
}

@media (min-width: 1440px) {
    .greeting__logo {
        width: 112px;
        height: 112px;
    }
}

/* 下段：挨拶文＋署名。
   1024px未満（縦積み）は斜辺クリップなしの素の白面。
   1024px以上は PC グリッドで中央斜分割の右半面を担う（背景は layout 擬似要素に任せる）。
   ベース（SP～）：右端揃えで95%幅（左に5%余白） */
.greeting__body {
    position: relative;
    width: 95%;
    margin-right: auto;
    padding: 2rem 1.5rem;
    background-color: var(--color-white-light);
    /* 中身（body-inner）を上下中央に。高さが伸びる1024px以上（headの高さに揃う右セル）で効く */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 右下を角切り（統一値 28px）。1024px以上では clip-path:none で打ち消される（中央斜線レイアウト） */
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

/* 1024px未満の body パディングを head に揃える（head：ベース 2rem 1.5rem、576px以上 3rem 2rem）。
   ベースは head と同じ 2rem 1.5rem なので、576px以上を head と揃えて 3rem 2rem に */
@media (min-width: 576px) {
    .greeting__body {
        padding: 3rem 2rem;
    }
}

/* 挨拶文・署名を包む内側ラッパー：幅・中央寄せをここで一括管理。
   text/sign 個別の max-width / margin:auto は不要に */
.greeting__body-inner {
    width: 100%;
    max-width: 720px;
    align-self: center;
}

@media (min-width: 1024px) {

    /* PC：セクション中央を斜め 1 本の境界で左右分割（インスタバナーと同方式）。
       左列：head（上）＋images（下）の縦並び、右列：body（左2行分の高さ）。
       背景は layout の擬似要素 1 枚で中央斜線により 2 色に分ける。head/body 自身の背景・角切り・斜辺は打ち消す。
       --greeting-split-slant で中央斜線の振れ幅を管理 */
    .greeting__layout {
        --greeting-split-slant: 64px;
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        column-gap: 0;
        row-gap: 0;
    }

    /* 中央斜分割の背景面：layout 全面に敷き、左半を head 地色、右半を body 地色に。
       境界は中央（50%）を --greeting-split-slant だけ斜めに走らせる。
       上が右寄り・下が左寄りの斜線。二面をただ揃えるため境界は 1px 重ねて隣間を防ぐ */
    .greeting__layout::before,
    .greeting__layout::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
    }

    /* 左半（head 地色）：中央斜線より左を塗る。
       shilver テクスチャ背景をここに敷く（layout全体・中央斜線クリップ）。cover・center で全面を覆い、半透明ベージュ0.85を重ねる */
    .greeting__layout::before {
        background-color: var(--color-bg-light);
        background-image: linear-gradient(rgba(250, 246, 238, 0.85), rgba(250, 246, 238, 0.85)), url("../images/shilver.webp");
        background-size: cover;
        background-position: center;
        -webkit-clip-path: polygon(0 0, calc(50% + var(--greeting-split-slant) / 2) 0, calc(50% - var(--greeting-split-slant) / 2) 100%, 0 100%);
        clip-path: polygon(0 0, calc(50% + var(--greeting-split-slant) / 2) 0, calc(50% - var(--greeting-split-slant) / 2) 100%, 0 100%);
    }

    /* 右半（body 地色）：中央斜線より右を塗る（1px 重ねて隣間防止） */
    .greeting__layout::after {
        background-color: var(--color-white-light);
        -webkit-clip-path: polygon(calc(50% + var(--greeting-split-slant) / 2 - 1px) 0, 100% 0, 100% 100%, calc(50% - var(--greeting-split-slant) / 2 - 1px) 100%);
        clip-path: polygon(calc(50% + var(--greeting-split-slant) / 2 - 1px) 0, 100% 0, 100% 100%, calc(50% - var(--greeting-split-slant) / 2 - 1px) 100%);
    }

    /* PCでも空きセルは非表示（左右横並びのみ） */
    .greeting__slot {
        display: none;
    }

    /* 左列：head。背景は layout 擬似要素に任せ、自身は透明。中央斜線に本文がかからないよう
       右パディングを斜線分上乗せ。head::before（右上角切り背景）は打ち消す。
       images は layout 全体に絶対配置（下端）されるため、重なる画像の高さ分の下パディングを確保 */
    .greeting__head {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        padding: 3.5rem calc(2.5rem + var(--greeting-split-slant)) calc(180px + 2rem) 3rem;
    }

    .greeting__head::before {
        display: none;
    }

    /* 右列：body。背景・斜辺クリップは打ち消し、layout 擬似要素の右半面に任せる。
       中央斜線に本文がかからないよう左パディングを斜線分上乗せ */
    .greeting__body {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        background-color: transparent;
        -webkit-clip-path: none;
        clip-path: none;
        padding: 3.5rem 3rem 3.5rem calc(3rem + var(--greeting-split-slant));
    }
}

.greeting__text {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    line-height: 2.1;
    color: var(--color-text);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .greeting__text { font-size: 1.02rem; }
}

.greeting__sign {
    text-align: right;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--color-title);
    margin-top: 2rem;
}

.greeting__sign-name {
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    margin-left: 0.25rem;
}

/* ================================
   会社情報（お問い合わせセクションと同じ 2:8 グリッド。左：縦書きタイトル／右：テーブル）
================================ */
/* セクションの左右パディングは消し（中身側で幅を管理）、上下は .section 相当のパディングを付ける */
.company-outline {
    padding-top: var(--spacing-section);
    padding-bottom: var(--spacing-section);
    padding-left: 0;
    padding-right: 0;
}

/* contact-layout と揃える：ベースは縦積み、576px以上で 2fr:8fr（576～767は 1fr:9fr）。
   ベース（～1023px）：横幅90%・中央寄せ（1024px以上で width:auto に戻す） */
.company-outline__layout {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--section-width-md);
}

@media (min-width: 1024px) {
    .company-outline__layout {
        width: auto;
    }
}

@media (min-width: 576px) {
    .company-outline__layout {
        max-width: var(--section-width-xl);
        display: grid;
        /* 576～767：左列が狭いため 1fr:9fr、gap も詰める。768px以上で 2fr:8fr に上書き */
        grid-template-columns: 1fr 9fr;
        align-items: start;
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .company-outline__layout {
        grid-template-columns: 2fr 8fr;
        gap: 3rem;
    }
}

/* 左列タイトル：576px以上で縦書き・上揃え（sticky）。contact-layout__title と同様 */
.company-outline__title {
    margin-bottom: var(--spacing-lg);
}

@media (min-width: 576px) {
    .company-outline__title {
        position: sticky;
        top: calc(var(--header-height) + 2rem);
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
        gap: 1rem;
    }

    /* 576～767：左列が狭いため縦書きタイトルを一回り小さく。768px以上で大きく上書き */
    .company-outline__title .title__ja {
        writing-mode: vertical-rl;
        text-orientation: upright;
        font-size: 1.5rem;
        letter-spacing: 0.16em;
        line-height: 1.5;
    }

    .company-outline__title .title__en {
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
    .company-outline__title .title__ja {
        font-size: 1.9rem;
        letter-spacing: 0.2em;
    }
}

/* 右列：テーブルは最大幅720pxまで（列幅が広いときも広がりすぎないよう）、左寄せ */
@media (min-width: 576px) {
    .company-outline__body {
        min-width: 0;
    }

    .company-outline__body .outline-table {
        max-width: 720px;
        margin-left: 0;
        margin-right: 0;
    }
}

/* ================================
   会社概要テーブル（角切りテーブル：左上・右下を角切り。サービスカードと同方式）
   本体を枠色（シルバーベージュ）の角切り面にし、::before で 1px 内側に白面の角切りを重ねて差分を枠線に見せる。
   --outline-cut で角切り量を管理
================================ */
.outline-table {
    --outline-cut: 16px;
    position: relative;
    isolation: isolate;
    max-width: 720px;
    margin: 0 auto;
    padding: 0.5rem 1.5rem;
    background-color: var(--color-silver-beige);
    -webkit-clip-path: polygon(var(--outline-cut) 0, 100% 0, 100% calc(100% - var(--outline-cut)), calc(100% - var(--outline-cut)) 100%, 0 100%, 0 var(--outline-cut));
    clip-path: polygon(var(--outline-cut) 0, 100% 0, 100% calc(100% - var(--outline-cut)), calc(100% - var(--outline-cut)) 100%, 0 100%, 0 var(--outline-cut));
}

/* 内側の白面：1px 小さい角切り。本体との差分 1px が枠線に見える */
.outline-table::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    z-index: -1;
    background-color: var(--color-surface);
    -webkit-clip-path: polygon(calc(var(--outline-cut) - 1px) 0, 100% 0, 100% calc(100% - (var(--outline-cut) - 1px)), calc(100% - (var(--outline-cut) - 1px)) 100%, 0 100%, 0 calc(var(--outline-cut) - 1px));
    clip-path: polygon(calc(var(--outline-cut) - 1px) 0, 100% 0, 100% calc(100% - (var(--outline-cut) - 1px)), calc(100% - (var(--outline-cut) - 1px)) 100%, 0 100%, 0 calc(var(--outline-cut) - 1px));
}

.outline-table__row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}

/* 最下行の区切り線は不要（角切りの端と干渉させない） */
.outline-table__row:last-child {
    border-bottom: none;
}

.outline-table__row dt {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-primary);
    letter-spacing: 0.06em;
    flex: 0 0 35%;
}

@media (min-width: 768px) {
    .outline-table__row dt {
        flex-basis: 30%;
    }
}

@media (min-width: 1024px) {
    .outline-table__row dt {
        flex-basis: 25%;
    }
}

/* dt テキストを包む span：左に縦線マーカーを置く分、左パディングを確保 */
.outline-table__dt-label {
    position: relative;
    padding-left: 0.8rem;
}

/* 左の縦線マーカー（アクセント色） */
.outline-table__dt-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 4px;
    height: 0.9em;
    background-color: var(--color-accent);
}

.outline-table__row dd {
    flex: 1;
    min-width: 0;
    margin-left: 2rem;
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.8;
}

.outline-table__row dd a {
    color: var(--color-accent);
    transition: color 0.2s;
}

.outline-table__row dd a:hover { color: var(--color-accent-dark); }