/*
 * 健康経営優良法人／SDGsの取り組み（企業情報ページ）。
 * 原本には事業内容ページのような斜めの帯はない。
 */

/*
 * セクション名の下の「健康経営優良法人の取り組み」「SDGsの取り組み」は、
 * サブセクションの見出し「〜とは」（.c-sdgs-heading、1.2rem＝24.96px）より小さくする
 * （共通の .c-section-subtitle は1440px幅で26.8pxあり、大小が逆転するため）。
 * 1440px幅で20px、狭い画面では0.8rem（16.64px）まで縮め、どの幅でも見出しより小さく保つ。
 */
.c-kenko .c-section-subtitle,
.c-sdgs .c-section-subtitle {
    font-size: clamp(0.8rem, 1.39vw, 20px);
}

/* 見出し（ロゴ・アイコン＋紺の太字） */
.c-sdgs-heading {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: var(--color-primary);
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-sm);
}

.c-sdgs-heading__icon {
    flex: 0 0 auto;
    width: 48px;
    height: auto;
}

/* 健康経営優良法人ロゴは使用ガイドラインの最小サイズ（タテ組は幅100px）未満にしない */
.c-sdgs-heading__icon--kenko {
    width: 100px;
}

/*
 * アイコンは position:absolute で見出し（h3）を基準に置く。
 * - 左端は h3 の左端＝パネルの padding-left＝直下の説明文の開始位置と自然に一致する
 * - アイコンをフローから外す分、テキスト側に padding-left で場所を空ける
 * - bottom 基準で「タイトルと下揃え」にし、アイコンの背の高さが h3 の高さを超える分だけ
 *   自動的に上（グレー枠の外）へ飛び出す
 * - 下揃えの基準からさらに10px下げる（原本の見え方）
 */
.c-sdgs-panel .c-sdgs-heading {
    position: relative;
    padding-left: 78px;
}

/*
 * くまモンの左足の内側（またの間の切れ込みの左端）が本文の開始位置に来るようにする。
 * 画像は著作権表示つきの合成版（kumamoto-icon-with-copyright.png、680×1041、キャラクターは幅639で上端0〜969）。
 *   元画像（1252角）での内側の縁 x=478、キャラクターの切り抜き原点 x=303、
 *   合成画像内でのキャラクターの左余白 20px → (478-303+20)/680 ≒ 28.68%（表示幅に対する割合）
 * 高さは合成画像の縦横比（1041/680）で決まる。
 * 足のすぐ下に著作権テキストの帯（合成画像の下6.9%）があるので、
 * 「タイトル下端から10px下」を足の位置で保つよう、bottom をその分余分に下げる。
 */
/* くまモンの表示幅は63px。左端・下端のずらし量も同じ比率で縮めた値 */
.c-sdgs-heading__icon--kumamon {
    position: absolute;
    left: -18px;
    bottom: -13px;
    width: 63px;
    height: 96px;
}

/*
 * ロゴ画像と著作権表記を揃える。img は reset.css で display:block のため、max-width で幅が縮んでも
 * margin:auto が無ければ左端に寄る。一方 figcaption は親の text-align:center で全幅の中央に寄るので、
 * キャプション側をロゴと同じ最大幅にして、同じ左端・同じ中央に揃える。
 */
/* ロゴ画像側に margin-left:40px を付けたので、著作権表記も同じ分だけ寄せて中心をそろえる */
.c-sdgs-about__figure--logo .c-kumamon-copyright {
    max-width: 220px;
    margin-left: 60px;
}

/* 熊本県SDGsロゴ（くまモン）の著作権表示。使用管理規程で必須 */
.c-kumamon-copyright {
    font-size: 0.6rem;
    color: var(--color-text-light);
    letter-spacing: 0.02em;
    margin-top: 0.3em;
}

/* --- 健康経営優良法人 --- */
.c-kenko {
    padding: var(--space-lg) 0 0;
    overflow-x: clip;
}

.c-kenko__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.c-kenko__text {
    color: var(--color-text);
    /* 説明文は本文より小さく */
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    line-height: 1.95;
    margin: 0;
    padding-left: var(--space-sm);
}

.c-kenko__logo {
    align-self: center;
    /*
     * ロゴの上端は本文の開始位置に合わせ（見出しを intro の外に出してある）、
     * 下端は集合写真に少しかかる大きさにする
     */
    width: 380px;
    max-width: 70%;
    height: auto;
}

/* コラージュ：スマホ幅は写真→青い帯の文章→写真の縦積み */
.c-kenko__collage {
    display: flex;
    flex-direction: column;
}

.c-kenko__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.c-kenko__photo--2 {
    order: 3;
}

.c-kenko__band {
    display: none;
}

.c-kenko__message {
    order: 2;
    margin: 0;
    padding: var(--space-md) var(--space-sm);
    background-color: var(--color-primary-soft);
    color: var(--color-white);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    line-height: 2;
}

.c-kenko__message-lead {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

@media (min-width: 700px) {
    .c-kenko__intro {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .c-kenko__body {
        flex: 0 1 56%;
    }

    .c-kenko__logo {
        align-self: flex-start;
        flex: 0 0 auto;
        /*
         * 見出しを行の外に出したので、上端は margin なしで本文とそろう。
         * 下端は集合写真に5〜10pxかかるよう、負の margin で引き下げる（実測で調整）。
         */
        margin: 0 5% -95px 0;
    }
}

/*
 * PC幅：原本どおり、左上に集合写真・右下に卓球の写真を置き、その間に淡い青の帯
 * （#003399 の70%。写真に掛かる部分は紺がかって見える）を重ねる。位置は原本の
 * 図形の座標（ページ幅1064px基準）を百分率にしたもの。重なり順は
 * 卓球の写真 → 帯 → 集合写真 → 文章。
 */
@media (min-width: 900px) {
    .c-kenko__collage {
        position: relative;
        display: block;
        max-width: 1440px;
        margin: 0 auto;
        aspect-ratio: 1064 / 700;
    }

    .c-kenko__photo,
    .c-kenko__band {
        position: absolute;
    }

    .c-kenko__photo {
        aspect-ratio: auto;
    }

    .c-kenko__photo--1 {
        left: 0;
        top: 0;
        width: 48.1%;
        height: 46.9%;
        z-index: 3;
    }

    .c-kenko__photo--2 {
        left: 24.4%;
        top: 45%;
        width: 75.6%;
        height: 55%;
        z-index: 1;
    }

    .c-kenko__band {
        display: block;
        left: 24.4%;
        /*
         * 帯は画面の端まで伸ばす（コラージュの max-width 1440px で止めず、
         * 中央寄せのコンテナの外＝実際のビューポート端まで）
         */
        right: calc(-50vw + 50%);
        top: 13.1%;
        height: 48.3%;
        background-color: var(--color-primary-soft-alpha);
        z-index: 2;
    }

    .c-kenko__message {
        position: absolute;
        right: 3%;
        top: 22%;
        z-index: 4;
        padding: 0;
        background: none;
        text-align: right;
        /* 原本（ページ幅1064pxで20px）と同じ比率でコラージュの幅に合わせて拡大縮小する */
        font-size: min(1.88vw, 27px);
        line-height: 3.2;
        /* 集合写真に掛かる部分でも読めるように */
        text-shadow: 0 0 6px rgba(0, 30, 90, 0.45);
    }
}

/* --- SDGs --- */
.c-sdgs {
    position: relative;
    padding: var(--space-xl) 0 var(--space-lg);
    scroll-margin-top: var(--header-height);
    /* 青い四角を画面の端まで伸ばすので、横スクロールを生まないよう切り落とす */
    overflow-x: clip;
    isolation: isolate;
}

.c-sdgs-about {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    /* 青い四角が枠の外にはみ出すぶん、次のブロックとの間を広めに取る */
    margin-bottom: calc(var(--space-xl) + var(--space-md));
}

.c-sdgs-about:last-child {
    margin-bottom: 0;
}

.c-sdgs-about__figure {
    margin: 0;
    text-align: center;
}

.c-sdgs-about__figure img {
    width: 100%;
    max-width: 400px;
    height: auto;
}

/*
 * 右のSDGs目標アイコン画像の赤い四角（1.貧困をなくそう）の上端を、左のグレー枠の上端に揃える。
 * 画像（sdgs-goals.png）は上部に「SUSTAINABLE DEVELOPMENT GOALS」のロゴ文字を含み、
 * 画像高さの約17.7%（105/594px、実測）が色付きアイコンより上の余白なので、その分引き上げる
 * （%指定は画像の描画幅基準。縦横比が一定なので幅が変わっても比率は保たれる）。
 */
.c-sdgs-about--text-left .c-sdgs-about__figure img {
    margin-top: -10.5%;
}

/*
 * ロゴの色の入った部分の上端をグレー枠の上端に合わせる。画像ファイルの上に
 * 6.15%（77/1252px、アルファ値の bbox で実測）の透明な余白があるので、その分（幅220pxで約13.5px）引き上げる。
 * 横方向は右へ40px。
 */
.c-sdgs-about__figure--logo img {
    max-width: 220px;
    margin-left: 60px;
    margin-top: -13.5px;
}

/*
 * 本文のグレーの枠。原本は枠の後ろに淡い青の四角が画面の端まで伸びている
 * （SDGsとは：左下、熊本県SDGsとは：右上）。
 */
.c-sdgs-panel {
    position: relative;
    background-color: #f2f2f2;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text);
    /* 説明文は本文より小さく */
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    line-height: 1.9;
}

.c-sdgs-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    background-color: var(--color-primary-soft);
}

.c-sdgs-panel p {
    margin: 0 0 var(--space-sm);
}

.c-sdgs-panel p:last-child {
    margin-bottom: 0;
}

/* グレー背景の後ろの青い四角は、画面端までではなく、グレー枠から20pxほどはみ出す程度で切る */
.c-sdgs-about--text-left .c-sdgs-panel::before {
    top: 3.5em;
    bottom: -1.9em;
    /* 左へのはみ出し量の微調整（2px） */
    left: -22px;
    right: 6.5%;
}

.c-sdgs-about--text-right .c-sdgs-panel::before {
    top: -2.5em;
    bottom: 45%;
    left: 20%;
    /*
     * 「熊本県SDGsとは」のグレー枠は20px左にずらしているが、青い四角は画面上の位置を保つため、
     * パネル基準の right をその分伸ばして打ち消す（-44px）。
     */
    right: -44px;
}

@media (min-width: 900px) {
    .c-sdgs-about {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-lg);
    }

    .c-sdgs-about--text-left .c-sdgs-about__main {
        flex: 0 0 55%;
    }

    .c-sdgs-about--text-left .c-sdgs-about__figure {
        flex: 1 1 auto;
    }

    /*
     * くまモンは、原本のように頬より上がグレー枠の上端から飛び出す構図にする。
     * align-items:flex-start でグレー枠と画像の上端をそろえた上で、画像側だけ上へ引き上げる。
     */
    .c-sdgs-about--text-right {
        align-items: flex-start;
    }

    /*
     * この右の大きなバッジ画像は、他の figure と同じ上端そろえ
     * （頬より上が飛び出すのは「熊本県SDGsとは」の文字の左の小さいアイコン .c-sdgs-heading__icon--kumamon）。
     */
    .c-sdgs-about--text-right .c-sdgs-about__figure {
        flex: 0 0 34%;
    }

    /*
     * グレー枠（中のくまモンを含む）全体を20px左に動かす。
     * margin-left:-20px だと flex-grow:1 が空いた分だけ幅を広げ、右端が動かないため、
     * transform で平行移動する（幅・右端の位置はそのまま）。
     */
    .c-sdgs-about--text-right .c-sdgs-about__main {
        flex: 1 1 auto;
        transform: translateX(-20px);
    }

    .c-sdgs-about__figure--logo img {
        max-width: 240px;
        /* 240px幅では余白比率(6.15%)から約14.8px */
        margin-top: -14.8px;
    }

    .c-sdgs-about__figure--logo .c-kumamon-copyright {
        max-width: 240px;
        margin-left: 60px;
    }
}

/* スマホ幅：青い四角は控えめに、画面の端から少しだけのぞかせる */
@media (max-width: 599px) {
    /* スマホでは「SDGsとは」の画像と熊本県SDGsのロゴの間が空きすぎるので詰める（依頼主の指示） */
    .c-sdgs-about {
        margin-bottom: var(--space-lg);
    }

    .c-sdgs-panel {
        padding: var(--space-sm);
    }

    .c-sdgs-about--text-left .c-sdgs-panel::before {
        bottom: -1em;
        right: 12%;
    }

    .c-sdgs-about--text-right .c-sdgs-panel::before {
        top: -1em;
        left: 12%;
    }

    /*
     * スマホでは、青い四角が下（左）／上（右）にはみ出す分、隣の画像との隙間がほぼ無くなるので、
     * その分を吸収する余白を足す。
     */
    .c-sdgs-about--text-left .c-sdgs-about__figure {
        margin-top: var(--space-sm);
    }

    .c-sdgs-about--text-right .c-sdgs-about__main {
        margin-top: var(--space-sm);
    }
}