/* マイページの区分別出し分け（27卒 / 28卒 / 転職者）＝見た目
   🚨 spi-mypage-hub.css には1行も足さない（別セッションが編集中）＝クラス名は spi-seg-* で分ける。
   🚨 色は spi-mypage-hub.css と同じ実測値だけ：#26A69A(teal) #B6E9E4 #E4F8F6 #F8FFFE 文字 #252525。
      黒のベタ塗りは使わない／カードに外周の影は付けない（2026-09-08 オーナー）。
   🚨 押せる見た目の要素は本当に押せる＝ここで作るカード・ピルは全部 <a href>（JS側）。
      色・下線・cursor を明示で取り戻す（祖先の `.entry-content a` に負けないため）。 */

.spi-seg-mendan,
.spi-seg-ads { margin: 0; }

.spi-seg-kicker {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    color: #26A69A; background: #E4F8F6; border-radius: 999px; padding: 3px 10px;
}

/* ---------------- 面談CTA（収益導線の最優先・特典の上） ---------------- */
.spi-seg-mendan-box {
    background: #26A69A; border-radius: 12px; padding: 18px 16px; color: #fff;
}
.spi-seg-mendan-box .spi-seg-kicker { color: #26A69A; background: #fff; }
.spi-seg-mendan-title {
    margin: 10px 0 4px; font-size: 18px; font-weight: 700; line-height: 1.45; color: #fff;
}
.spi-seg-mendan-note { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: #E4F8F6; }
.spi-seg-mendan .spi-seg-mendan-cta {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 22px; border-radius: 999px;
    background: #FF9900; color: #fff; font-weight: 700; font-size: 15px;
    text-decoration: none; cursor: pointer; box-shadow: none;
}
.spi-seg-mendan .spi-seg-mendan-cta:hover,
.spi-seg-mendan .spi-seg-mendan-cta:focus { background: #f08c00; color: #fff; text-decoration: none; }

/* ---------------- 広告（特典の下・目的ごと） ---------------- */
.spi-seg-head { margin: 0 0 12px; }
.spi-seg-note { margin: 6px 0 0; font-size: 11px; color: #6b7280; }
.spi-seg-group + .spi-seg-group { margin-top: 18px; padding-top: 18px; border-top: 1px solid #B6E9E4; }
.spi-seg-group-title {
    margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #252525;
    padding-left: 10px; border-left: 4px solid #26A69A;
}

.spi-seg-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .spi-seg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.spi-seg-ads .spi-seg-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; border: 1px solid #B6E9E4; border-radius: 10px; background: #F8FFFE;
    color: #252525; text-decoration: none; cursor: pointer; box-shadow: none;
}
.spi-seg-ads .spi-seg-card:hover { background: #E4F8F6; color: #252525; text-decoration: none; }
.spi-seg-logo { width: 44px; height: 44px; flex: none; border-radius: 8px; object-fit: contain; background: #fff; }
.spi-seg-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.spi-seg-badge {
    align-self: flex-start; font-size: 10px; font-weight: 700; color: #fff; background: #26A69A;
    border-radius: 999px; padding: 2px 8px;
}
.spi-seg-name { font-size: 14px; font-weight: 700; line-height: 1.4; }
.spi-seg-copy { font-size: 12px; color: #4b5563; line-height: 1.5; }
.spi-seg-ads .spi-seg-cta {
    flex: none; font-size: 12px; font-weight: 700; color: #26A69A;
    border: 1px solid #26A69A; border-radius: 999px; padding: 7px 12px; white-space: nowrap;
}

/* 27卒＝画像バナー1枚（参考ページと同じ画像・同じ飛び先） */
/* 🚨 上限幅を先に決める（2026-09-09 オーナー「デカすぎてびっくりしたわ」＝v516適用直後）。
   バナーの原寸は 1180×210（5.6:1）なので、本文カラム（PCで約850px）に width:100% で出すと
   高さ150px超の帯が5枚並ぶ＝画面が広告で埋まる。**400px上限＝高さ約71px**（隣のツールカード87pxと揃う）。
   同型の指摘が9/8にもあった（「アイキャッチデカすぎだろ」）＝画像は置く前に上限幅を決める。 */
.spi-seg-ads .spi-seg-banner { display: block; margin: 0 0 10px; border-radius: 10px; overflow: hidden; max-width: 400px; }
.spi-seg-ads .spi-seg-banner img { display: block; width: 100%; height: auto; }

@media (max-width: 599px) {
    .spi-seg-ads .spi-seg-card { flex-wrap: wrap; }
    .spi-seg-ads .spi-seg-cta { width: 100%; text-align: center; }
}

/* ---------------- サイドバーの広告1枠（オーナー 2026-09-09「とりあえずサイドバーに一つ」） ----------------
 * 見た目は隣のマイページ内ナビ（`body.spi-hub-screen .spi-hub-nav`）に合わせる＝
 * 白カード＋1px #dfe9e7＋角丸16px・**外周の影なし**（影は 2026-09-08「外側の影消して」で撤去済み）。
 * 置き場所＝`.spi-hub-shell` の最後の子。PCだけ 2列目の2行目（ナビの真下）へ動かす。
 * スマホは1カラムなので DOM順どおり本文の一番下に出る（＝FVの上に広告を置かない）。 */
.spi-seg-side {
    display: block; margin: 14px 0 0; padding: 14px;
    background: #fff; border: 1px solid #dfe9e7; border-radius: 16px;
    color: #252525; text-decoration: none; cursor: pointer; box-shadow: none;
}
.spi-seg-side:hover { background: #F8FFFE; color: #252525; text-decoration: none; border-color: #26A69A; }
.spi-seg-side-kicker {
    display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    color: #26A69A; background: #E4F8F6; border-radius: 999px; padding: 3px 9px;
}
.spi-seg-side--pr .spi-seg-side-kicker { color: #677572; background: #f1f3f3; }
.spi-seg-side-logo { display: block; width: 40px; height: 40px; margin: 10px 0 0; object-fit: contain; }
.spi-seg-side-title { display: block; margin: 8px 0 0; font-size: 15px; font-weight: 700; line-height: 1.45; }
.spi-seg-side-note  { display: block; margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: #4b5563; }
.spi-seg-side-cta {
    display: block; margin: 12px 0 0; padding: 11px 10px; border-radius: 999px;
    background: #FF9900; color: #fff; font-size: 13px; font-weight: 700; text-align: center;
}
.spi-seg-side--pr .spi-seg-side-cta { background: #26A69A; }

/* PCではサイドバーのカードの中に入る（JSが nav へ足す）＝カードの中にカードを作らない。
   相手の `body.spi-hub-screen .spi-hub-nav a:not(.spi-hub-brand)` に負けるので、
   打ち勝つ指定をここで書き戻す（枠と背景を消して、区切り線1本にする）。 */
.spi-hub-nav .spi-seg-side,
body.spi-hub-screen .spi-hub-nav a.spi-seg-side {
    margin: 10px 0 2px; padding: 12px 4px 2px;
    background: transparent; border: 0; border-top: 1px solid #dfe9e7; border-radius: 0;
    font-size: 13px;
    /* 🚨 相手の `.spi-hub-nav a` は `display:flex; align-items:center; gap:8px; white-space:nowrap`
     *    ＝そのままだと中身が横1列に並んで文字が切れる（2026-09-09 実測＝高さ69pxに潰れた）。
     *    リンクの見た目を1から立て直すのではなく、崩す4つだけ打ち返す。 */
    display: block; white-space: normal; align-items: initial; gap: 0;
}
body.spi-hub-screen .spi-hub-nav a.spi-seg-side:hover { background: transparent; border-color: #26A69A; }
.spi-hub-nav .spi-seg-side-logo { width: 34px; height: 34px; }
.spi-hub-nav .spi-seg-side-title { font-size: 14px; }

/* ---------------- PC＝特典カードの真下に列を揃えて並べる（オーナー 2026-09-09「このしたに並べたら綺麗では？」） ----------------
 * セルは相手の特典グリッド（`.spi-hub-grid--5`＝900px以上で5列）の**2行目**に入る＝列は自動で揃う。
 * 🚨 相手のグリッドに入る要素なので、幅は指定しない（列幅に従う）。高さも決め打ちしない。 */
.spi-seg-rownote { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 6px 0 -8px; }
.spi-seg-rownote .spi-seg-note { margin: 0; }

.spi-seg-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.spi-seg-cell-banner { display: block; border-radius: 8px; overflow: hidden; line-height: 0; }
.spi-seg-cell-banner img { display: block; width: 100%; height: auto; }

/* 28卒＝目的ごとのツール2本を、列幅に収まる小さいカードで縦に積む */
/* 🚨 列幅（実測200px）では「ロゴ｜文｜ボタン」の横1列にすると文字が1文字ずつ縦に折れる
 *    （2026-09-09 実測＝セル高さ412px・見た目が崩れた）。**2行のグリッドにする**＝
 *    1行目にロゴと名前・説明、2行目にボタンを全幅で敷く。 */
.spi-hub .spi-seg-mini {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 6px 8px;
    min-width: 0;
    padding: 8px; border: 1px solid #B6E9E4; border-radius: 10px; background: #F8FFFE;
    color: #252525; text-decoration: none; cursor: pointer; box-shadow: none;
}
.spi-seg-cell .spi-seg-mini-logo { grid-column: 1; grid-row: 1; }
.spi-seg-cell .spi-seg-mini-body { grid-column: 2; grid-row: 1; }
.spi-seg-cell .spi-seg-mini-cta  { grid-column: 1 / -1; grid-row: 2; text-align: center; }
.spi-hub .spi-seg-mini:hover { background: #E4F8F6; color: #252525; text-decoration: none; }
.spi-seg-mini-logo { width: 26px; height: 26px; flex: none; border-radius: 6px; object-fit: contain; background: #fff; }
.spi-seg-mini-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.spi-seg-mini-name { font-size: 12px; font-weight: 700; line-height: 1.35; }
.spi-seg-mini-copy { font-size: 10px; color: #4b5563; line-height: 1.4; }
.spi-seg-mini-cta {
    flex: none; font-size: 10px; font-weight: 700; color: #26A69A;
    border: 1px solid #26A69A; border-radius: 999px; padding: 5px 8px; white-space: nowrap;
}

/* 27卒＝列に並べるときのオファーカード（バナー画像の文言をHTMLで組んだもの・オーナー 2026-09-09） */
.spi-hub .spi-seg-offer {
    display: block; padding: 10px; border: 1px solid #ffd9a3; border-radius: 10px; background: #fffaf2;
    color: #252525; text-decoration: none; cursor: pointer; box-shadow: none;
}
.spi-hub .spi-seg-offer:hover { background: #fff3e2; color: #252525; text-decoration: none; border-color: #FF9900; }
.spi-seg-offer-badge {
    display: inline-block; margin: 0 0 6px; padding: 2px 8px; border-radius: 999px;
    background: #FF9900; color: #fff; font-size: 10px; font-weight: 700;
}
.spi-seg-offer-title { display: block; font-size: 11px; font-weight: 700; line-height: 1.5; }
.spi-seg-offer-cta {
    display: block; margin: 8px 0 0; padding: 8px 6px; border-radius: 999px;
    background: #FF9900; color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 1.3;
}