@charset "UTF-8";
/**
 * ESP_SOKA-494【グランドデザイン】トップページ導線バナー
 * Figma: Frame 256(PC) / Frame 257(SP) / コンテンツ列 15084:44085
 * 読み込み: elements/header.php（home テンプレートのみ）
 * マークアップ: トップページ Main エリアの Advanced HTML ブロック
 *
 * PC の単位について:
 *   Frame 256 は 1280px 固定の構図。固定 px だと幅が広がったとき背景だけが
 *   拡大して比率が崩れるため、tokyo-life と同じく vw（px / 1280 * 100）で
 *   構図ごと拡縮する。各値のコメントは Figma の px 実数値。
 *
 * 見出しの扱い:
 *   SP … デザイナー書き出しの headline.svg（343 x 73.31）をそのまま使用
 *   PC … 同 SVG は比率が異なり流用できないため Figma 実数値でテキスト組み
 *         書体 FOT-TsukuMin Pro は商用フォントのため明朝フォールバック
 */

.gdb {
    --gdb-navy: #002d77;
    --gdb-navy-mid: #0043ad;
    --gdb-gold: #ba7602;
    --gdb-gold-line: #efb700;
    --gdb-chip: #4b4c5e;

    /* 全幅化。left ではなく負マージンで箱ごと広げる
       （left:50% だとレイアウト箱が動かず編集モードのハンドル位置がズレる） */
    position: relative;
    width: 100vw;
    margin-top: 90px; /* 直前の Events セクションとの間の余白 */
    margin-right: calc(50% - 50vw);
    margin-bottom: 0;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    background: #fff;
    color: #000;
}

/* 直後が「データが示す教育力」(.topics-layout) の場合、
   そちら側の共通余白（style.css の margin-top: 90px）を打ち消す。
   .topics-layout はサイト全体で使う共通クラスなので、
   本体側は変更せずここで直後関係だけ上書きする。 */
.gdb + .topics-layout {
    margin-top: 0;
}

.gdb *,
.gdb *::before,
.gdb *::after {
    box-sizing: border-box;
}

/* テーマ側の .global-wrapper img:not([class]) が padding: 8px 0 16px を付ける。
   box-sizing: border-box と併せて画像が縮む・上下がずれるため打ち消す。
   マークアップ側でも img にクラスを付けて :not([class]) から外している。 */
.gdb .gdb__badge-mark img,
.gdb .gdb__headline img,
.gdb .gdb__lead img {
    padding: 0;
}

/* ---------------- 背景 ---------------- */
.gdb__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.gdb__bg-photo,
.gdb__bg-illust {
    position: absolute;
    display: block;
    background-repeat: no-repeat;
}

.gdb__bg-photo {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/granddesign/bg-photo.png);
    background-size: cover;
    background-position: center;
}

.gdb__bg-illust {
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/granddesign/illust.png);
    background-size: cover;
    background-position: center top;
    opacity: .9;
}

/* ---------------- レイアウト ---------------- */
.gdb__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 363px; /* 323px + 左右 padding */
    margin: 0 auto;
    padding: 23px 20px 32px;
    text-align: center;
}

/* ---------------- バッジ ---------------- */
.gdb__badge {
    position: relative;
    display: block;
    min-height: 45px;
    margin: 0;
    padding-left: 37.52px;
}

.gdb__badge-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 317px;
    max-width: 100%;
    height: 25px;
    margin-top: 10px;
    padding-left: 22px;
    background: linear-gradient(to right, var(--gdb-navy) 0%, var(--gdb-navy-mid) 35.096%, var(--gdb-navy) 100%);
    color: #fff;
    font-family: Lora, "Times New Roman", serif;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .48px;
    white-space: nowrap;
}

/* 白丸。flex で中のロゴを上下左右中央に置く */
.gdb__badge-mark {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border: 1px solid #003180;
    border-radius: 100px;
    background: #fff;
}

/* ロゴのサイズはこの 2 行だけ。比率は 56:47（= height を width x 0.8393 に保つ） */
.gdb__badge-mark img {
    display: block;
    flex: 0 0 auto;
    width: 36px;
    height: 30.2px;
    max-width: none;
}

/* ---------------- 見出し ---------------- */
/* 筑紫明朝は Web フォント化できないため、デザイナー書き出しの SVG を使う。
   幅を SVG の実寸に合わせると字の大きさが Figma と一致する
   （headline.svg 639px = 字 61px で組まれた幅） */
.gdb__headline {
    margin: 11px 0 0;
    line-height: 0;
}

.gdb__headline img {
    display: block;
    width: 343px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ---------------- 後期計画、始動 ---------------- */
.gdb__lead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 0 0;
}

/* lead.svg 241px = 字 36px で組まれた幅。SP は 23/36 に縮小 */
.gdb__lead img {
    display: block;
    width: 154px;
    max-width: none;
    height: auto;
}

.gdb__lead::before,
.gdb__lead::after {
    content: "";
    display: block;
    width: 68px;
    height: 1px;
    background: var(--gdb-gold);
}

/* ---------------- 説明文 ---------------- */
.gdb__desc {
    margin: 14px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
}

/* SP のみ改行を差し込む */
.gdb__br-sp {
    display: block;
    height: 0;
}

/* ---------------- タグ ---------------- */
.gdb__tags {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 323px;
    max-width: 100%;
    margin-top: 23px;
}

.gdb__tags-row {
    display: flex;
    gap: 1px;
}

.gdb__tag {
    display: flex;
    flex: 1 0 0;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    height: 46px;
    padding: 1px 8px;
    background: var(--gdb-chip);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.gdb__tags-row:first-child .gdb__tag:first-child { border-radius: 4px 0 0 0; }
.gdb__tags-row:first-child .gdb__tag:last-child  { border-radius: 0 4px 0 0; }
.gdb__tags-row:last-child  .gdb__tag:first-child { border-radius: 0 0 0 4px; }
.gdb__tags-row:last-child  .gdb__tag:last-child  { border-radius: 0 0 4px 0; }

/* アイコンは Figma の実寸どおりに個別指定する（一括指定は不可） */
.gdb__tag-icon {
    display: block;
    flex: 0 0 auto;
    max-width: none;
    object-fit: contain;
}

/* PC と SP でサイズが異なるため項目ごとに指定する（Frame 257 の実数値） */
.gdb__tag-icon--education  { width: 37px; height: 37px; }
.gdb__tag-icon--research   { width: 34px; height: 34px; }
.gdb__tag-icon--sdgs       { width: 35px; height: 36px; }
.gdb__tag-icon--diversity  { width: 34px; height: 34px; }
.gdb__tag-icon--management { width: 32px; height: 35px; }

/* ---------------- CTA ---------------- */
.gdb__cta {
    margin: 22px 0 0;
}

.gdb__btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 15px 28px;
    border: 2px solid var(--gdb-gold-line);
    border-radius: 100px;
    background: linear-gradient(to right, var(--gdb-navy) 0%, var(--gdb-navy-mid) 35.096%, var(--gdb-navy) 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: opacity .3s ease;
}

.gdb__btn:hover,
.gdb__btn:focus {
    color: #fff;
    opacity: .85;
}

/* SVG 実寸 8.864 x 14.90 を PC 比 0.8517 で縮小した値 */
.gdb__btn-arrow {
    display: block;
    flex: 0 0 auto;
    width: 7.55px;
    height: 12.69px;
    max-width: none;
}

/* ================ PC（Frame 256 / 1280px 基準） ================ */
@media screen and (min-width: 768px) {
    .gdb__bg-photo {
        width: 75%; /* 960px */
    }

    .gdb__bg-illust {
        opacity: 1;
    }

    /* Figma のコンテンツ列は left:410px / 幅 683px / right:187px。
       つまり中央から 111.5px（8.71vw）右寄り。
       --gdb-shift を増やすとさらに右へ、減らすと中央へ寄る。 */
    .gdb__inner {
        --gdb-shift: 8.71vw; /* 中央からの右オフセット（Figma: 111.5px） */
        --gdb-col: 56vw;     /* コンテンツ列の幅（683px + 書体差のゆとり） */

        max-width: none;
        min-height: 50vw;    /* 640px */
        padding-top: 3.6719vw;    /* 47px */
        padding-right: calc((100vw - var(--gdb-col)) / 2 - var(--gdb-shift));
        padding-bottom: 3.2031vw; /* 41px */
        padding-left: calc((100vw - var(--gdb-col)) / 2 + var(--gdb-shift));
    }

    .gdb__badge {
        min-height: 72px;
        padding-left: 46.25px;
    }

    .gdb__badge-pill {
        width: 550px;
        height: 47px;
        margin-top: 13px;
        padding-left: 34px;
        font-size: 19px;
        letter-spacing: .76px;
    }

    /* バッジは Figma の px をそのまま使う（拡縮しない） */
    .gdb__badge-mark {
        width: 72px;
        height: 72px;
    }

    /* Figma: 55.41 x 46.96（viewBox の余白込みで 56 x 47） */
    .gdb__badge-mark img {
        width: 56px;
        height: 47px;
    }

    .gdb__headline {
        margin-top: 1.3281vw; /* 17px */
    }

    /* SVG 実寸のまま（639px） */
    .gdb__headline img {
        width: 49.9219vw;
    }

    .gdb__lead {
        gap: 1.3281vw;        /* 17px */
        margin-top: 1.0938vw; /* 14px */
    }

    /* SVG 実寸のまま（241px） */
    .gdb__lead img {
        width: 18.8281vw;
    }

    .gdb__lead::before,
    .gdb__lead::after {
        width: 5.3125vw;  /* 68px */
        height: .1563vw;  /* 2px */
    }

    .gdb__desc {
        margin-top: 1.4063vw; /* 18px */
        font-size: 1.3281vw;  /* 17px */
    }

    .gdb__br-sp {
        display: none;
    }

    .gdb__tags {
        flex-direction: row;
        width: auto;
        margin-top: 1.7969vw; /* 23px */
    }

    /* PC は 5 つを 1 行に並べる */
    .gdb__tags-row {
        display: contents;
    }

    .gdb__tag {
        flex: 0 0 auto;
        gap: .7813vw;          /* 10px */
        height: 3.5938vw;      /* 46px */
        padding: 1px 1.0156vw; /* 13px */
        border-radius: 0;
        font-size: 1.1719vw;   /* 15px */
    }

    .gdb__tags-row:first-child .gdb__tag:first-child { border-radius: .4688vw 0 0 .4688vw; }
    .gdb__tags-row:last-child  .gdb__tag:last-child  { border-radius: 0 .4688vw .4688vw 0; }

    /* Frame 256 の実数値（37 / 34 / 39x40 / 36 / 34x37） */
    .gdb__tag-icon--education  { width: 2.8906vw; height: 2.8906vw; }
    .gdb__tag-icon--research   { width: 2.6563vw; height: 2.6563vw; }
    .gdb__tag-icon--sdgs       { width: 3.0469vw; height: 3.125vw; }
    .gdb__tag-icon--diversity  { width: 2.8125vw; height: 2.8125vw; }
    .gdb__tag-icon--management { width: 2.6563vw; height: 2.8906vw; }

    .gdb__cta {
        margin-top: 2.8125vw; /* 36px */
    }

    .gdb__btn {
        gap: 1.25vw;                       /* 16px */
        padding: 1.3281vw 2.6563vw;        /* 17px / 34px */
        border-width: .1563vw;             /* 2px */
        font-size: 1.25vw;                 /* 16px */
    }

    .gdb__btn-arrow {
        width: .6925vw;   /* 8.864px */
        height: 1.1641vw; /* 14.9px */
    }
}