/* ============================================================
   トップページ専用スタイル
   ============================================================ */

/* ============================================================
   メインビジュアル（スライドショー）
   PC Figma: h-[721px] / slides h-[595px] / 白いカードオーバーレイ
   SP Figma: 画像h-[172px] + 青いテキストブロック
   ============================================================ */
.p-top-hero {
    position: relative;
    height: 721px;
    background: var(--color-white); /* 画像エリア外は白背景 */
    overflow: hidden;
}

/* スライドコンテナ: Figma top-[3px] h-[595px]
   overflow はヒーロー全体（.p-top-hero）で制御するため省略 */
.p-top-hero__slides {
    position: absolute;
    top: 3px;
    left: 0;
    width: 100%;
    height: 595px;
}

/* 各スライド
   非アクティブなスライドは opacity:0 で不可視だが、pointer-events を切らないと
   同じ位置に重なった状態でクリックを奪ってしまう（DOM順で後のスライドが最前面になるため） */
.p-top-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

/* URLが設定されている場合、画像・メッセージカードをこの要素で直接内包してリンク化する
   （透明オーバーレイ＋z-index方式は、他要素のz-index次第でクリックが奪われるため不採用） */
.p-top-hero__slide-link {
    position: absolute;
    inset: 0;
    display: block;
    cursor: pointer;
}

.p-top-hero__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* 背景画像: スライドエリア全体に広がる */
.p-top-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.p-top-hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 白いカードオーバーレイ
   Figma: bg-[rgba(255,255,255,0.9)] rounded-[24px] p-[32px] w-[700px]
   位置: top=453px (513px container - 60px card offset), left=16px */
.p-top-hero__card {
    position: absolute;
    top: 453px;
    left: 16px;
    width: 700px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
    z-index: 5;
}

/* メタ行（日付 + カテゴリバッジ） */
.p-top-hero__meta {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Figma: Regular 24px black tracking-[0.48px] leading-[1.5] */
.p-top-hero__date {
    font-size: 1.5rem;
    font-weight: 400;
    color: #000;
    letter-spacing: 0.48px;
    line-height: 1.5;
    white-space: nowrap;
}

/* Figma: bg-[#f2f2f2] border-[#333] rounded-[8px] px-[16px] py-[8px] Bold 17px */
.p-top-hero__category {
    background: #f2f2f2;
    border: 1px solid #333;
    border-radius: 8px;
    min-width: 136px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem; /* 17px */
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    letter-spacing: 0.34px;
    padding: 8px 16px;
    white-space: nowrap;
}

/* テキストブロック: タイトルwrap + 説明文 */
.p-top-hero__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* タイトルラップ: Figma border-b-2 border-[#0068ce] pb-[16px] */
.p-top-hero__title-wrap {
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 16px;
}

.p-top-hero__title-link {
    text-decoration: none;
}

.p-top-hero__title-link:hover {
    text-decoration: underline;
    text-decoration-color: #000;
}

/* Figma: Bold 36px black tracking-[0.36px] leading-[1.4] */
.p-top-hero__title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
    letter-spacing: 0.36px;
    margin: 0;
}

/* Figma: Regular 20px black tracking-[0.4px] leading-[1.5] */
.p-top-hero__desc {
    font-size: 1.25rem;
    font-weight: 400;
    color: #000;
    line-height: 1.5;
    letter-spacing: 0.4px;
    margin: 0;
}

/* ナビゲーション矢印: Figma size-[57.488px] top-[272.8px] */
.p-top-hero__arrow {
    position: absolute;
    top: 272.8px;
    width: 57.5px;
    height: 57.5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transition: background 0.2s;
    z-index: 10;
}

.p-top-hero__arrow:hover {
    background: rgba(255, 255, 255, 0.5);
}

.p-top-hero__arrow:focus-visible {
    outline: 3px solid var(--color-white);
    outline-offset: 2px;
}

.p-top-hero__arrow--prev {
    left: 20px;
}

.p-top-hero__arrow--next {
    right: 20px;
}

/* ページャー（ドット）
   Figma PC: container(left:16,top:513) + pager(left:1288,top:119)
   → left:1304px, top:632px → right:56px */
.p-top-hero__pager {
    position: absolute;
    top: 632px;
    right: 56px;
    display: flex;
    gap: 8px;
    align-items: center;
    height: 16px;
    z-index: 10;
}

.p-top-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 104, 206, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}

.p-top-hero__dot.is-active {
    width: 24px;
    border-radius: 4px;
    background: var(--color-primary);
}

.p-top-hero__dot:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* スライドが1枚のみの場合、矢印・ページャーを非表示 */
.p-top-hero--single .p-top-hero__arrow,
.p-top-hero--single .p-top-hero__pager {
    display: none;
}

/* ============================================================
   お知らせセクション
   Figma: pt-[80px] pb-[100px] / gap-[36px] (header→list)
   ============================================================ */
.p-top-news {
    background-color: var(--color-white);
}

.p-top-news__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 80px var(--gutter) 100px;
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* ヘッダー行: heading左 + "一覧はこちら"右 */
.p-top-news__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.p-top-news__heading-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.p-top-news__icon {
    width: 90px;
    height: 72px;
    flex-shrink: 0;
    overflow: hidden;
}

.p-top-news__icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.p-top-news__heading-text {
    display: flex;
    flex-direction: column;
}

/* Figma: "NEWS" 18px bold #0068ce */
.p-top-news__en-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.6;
    letter-spacing: 0.36px;
}

/* Figma: "お知らせ" 32px bold #333 */
.p-top-news__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.5;
    letter-spacing: 0.32px;
    margin: 0;
}

/* "お知らせ一覧はこちら" リンク: Figma min-h-[48px] px-[16px] py-[12px] underline #0055ad */
.p-top-news__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: #0055ad;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.p-top-news__more:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* SP用リンク: PCでは非表示 */
.p-top-news__more.p-top-news__more--sp {
    display: none;
}

/* アイテムリスト: Figma flex-col gap-[24px] */
.p-top-news__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 各アイテム: Figma bg-[#f4f8fd] rounded-[24px] px-[24px] py-[32px] flex items-center justify-between */
.p-top-news__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f4f8fd;
    border-radius: 24px;
    padding: 32px 24px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}

.p-top-news__item:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* アイテム左: Figma flex gap-[16px] items-center */
.p-top-news__item-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1;
}

/* バッジ: p-news-archive__badge を流用、サイズ調整 */
.p-top-news__badge {
    flex-shrink: 0;
    padding: 10px 24px;
    min-height: 32px;
    font-size: 1rem;
}

/* 日付: Figma Regular 20px #7f7f7f leading-[1.5] */
.p-top-news__item-date {
    font-size: 1.25rem;
    font-weight: 400;
    color: #7f7f7f;
    line-height: 1.5;
    white-space: nowrap;
    flex-shrink: 0;
}

/* タイトル: Figma Regular 18px black leading-[1.6] w-[266px] */
.p-top-news__item-title {
    font-size: 1.0625rem; /* 17px */
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.7;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/* 右矢印 */
.p-top-news__item-arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--color-text-sub);
    margin-left: 16px;
}

.p-top-news__empty {
    text-align: center;
    color: var(--color-text-sub);
    padding: 24px 0;
}

/* ============================================================
   クイックリンク（課題・シーズへの導線）
   Figma: pb-[40px] / 2cards w-[522px] h-[101px] gap-[47px] bg-[#e6f1fb]
   ============================================================ */
.p-top-links {
    background-color: var(--color-white);
}

.p-top-links__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 var(--gutter) 40px;
}

/* Figma: flex gap-[47px] */
.p-top-links__wrap {
    display: flex;
    gap: 47px;
}

/* 各カード: Figma bg-[#e6f1fb] rounded-[24px] h-[101px] w-[522px] */
.p-top-links__card {
    flex: 1;
    height: 101px;
    background-color: #e6f1fb;
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
    position: relative;
}

.p-top-links__card:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* 背景の装飾円: Figma size-[147px] left-[407px] top-[-67px] */
/* right: 522px(card) - 407px(left) - 147px(width) = -32px */
.p-top-links__card::before {
    content: '';
    position: absolute;
    width: 147px;
    height: 147px;
    border-radius: 50%;
    right: -32px;
    top: -67px;
}

/* Figma: fill="#B5D4F4" fill-opacity="0.5" */
.p-top-links__card--needs::before {
    background-color: rgba(181, 212, 244, 0.5);
}

/* Figma: fill="#FAC775" fill-opacity="0.5" */
.p-top-links__card--seeds::before {
    background-color: rgba(250, 199, 117, 0.5);
}

/* カード内: Figma flex items-center justify-between px-[24px] py-[16px] */
.p-top-links__card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    height: 100%;
    position: relative;
    z-index: 1;
}

.p-top-links__card-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* "Needs List" / "Seeds List": Figma 16px bold #0068ce */
.p-top-links__card-en {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.7;
    letter-spacing: 0.32px;
    margin: 0;
}

/* "栃木県…" / "会員の…": Figma 24px bold #333 */
.p-top-links__card-ja {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.5;
    letter-spacing: 0.48px;
    margin: 0;
}

.p-top-links__card-arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--color-text);
}

/* ============================================================
   DX推進プラットフォームとは？（About）
   Figma: pt-[50px] pb-[100px] / card bg-[#f4f8fd] rounded-[32px] px-[40px] py-[60px]
   ============================================================ */
.p-top-about {
    background-color: var(--color-white);
}

.p-top-about__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 50px var(--gutter) 100px;
}

/* カード全体: Figma bg-[#f4f8fd] rounded-[32px] px-[40px] py-[60px] */
.p-top-about__card {
    position: relative;
    background-color: #f4f8fd;
    border-radius: 32px;
    padding: 60px 40px;
}

/* カード全体（画像含む）をクリック可能にする透明オーバーレイ */
.p-top-about__card-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 32px;
}

/* 2カラムレイアウト: Figma flex gap-[36px] items-center justify-center */
.p-top-about__layout {
    display: flex;
    gap: 36px;
    align-items: center;
    justify-content: center;
}

/* 左: テキストコンテンツ: Figma flex-col gap-[36px] */
.p-top-about__content {
    display: flex;
    flex-direction: column;
    gap: 36px;
    flex: 1;
    min-width: 0;
}

.p-top-about__heading-block {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Figma: "About" 18px bold #0068ce */
.p-top-about__en-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.6;
    letter-spacing: 0.36px;
}

/* Figma: 32px bold rgba(0,0,0,0.8) */
.p-top-about__title {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.5;
    letter-spacing: 0.32px;
    margin: 0;
}

/* 本文 + ボタン */
.p-top-about__body {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

/* Figma: Regular 20px #333 leading-[1.5] tracking-[0.4px] */
.p-top-about__text {
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
    letter-spacing: 0.4px;
    margin: 0;
}

/* テキストリンク「詳しくはこちら」: Figma Bold 16px #0055ad underline + arrow
   カード全体が p-top-about__card-link でリンク化されているため、このテキストは視覚表現のみ（非リンク） */
.p-top-about__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: #0055ad;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 右: 画像エリア: Figma h-[260px] w-[420px] rounded-[32px] */
.p-top-about__image-area {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    flex-shrink: 0;
    background-color: #fff;
    border-radius: 32px;
}

.p-top-about__image-wrap {
    width: 420px;
    height: 260px;
    border-radius: 32px;
    overflow: hidden;
    flex-shrink: 0;
}

.p-top-about__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.p-top-about__image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #b3b3b3;
    border-radius: 32px;
}

/* ============================================================
   シーズセクション
   Figma: py-[100px] gap-[36px] / 3カラムグリッド
   ============================================================ */
.p-top-seeds {
    background-color: var(--color-white);
}

.p-top-seeds__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 100px var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.p-top-seeds__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.p-top-seeds__heading-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.p-top-seeds__icon {
    width: 80px;
    height: 84px;
    flex-shrink: 0;
    overflow: hidden;
}

.p-top-seeds__icon img {
    width: 100%;
    height: 100%;
    display: block;
}

/* SP用リンク: PCでは非表示（.p-top-seeds__more より高い特異度が必要） */
.p-top-seeds__more.p-top-seeds__more--sp {
    display: none;
}

.p-top-seeds__heading-text {
    display: flex;
    flex-direction: column;
}

.p-top-seeds__en-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.6;
    letter-spacing: 0.36px;
}

.p-top-seeds__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.5;
    letter-spacing: 0.32px;
    margin: 0;
}

/* Figma: min-h-[48px] px-[16px] py-[12px] rounded-[8px] → リンク位置を見出しブロック下端に合わせる */
.p-top-seeds__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: #0055ad;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.p-top-seeds__more:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* 説明文 */
.p-top-seeds__desc {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--color-text);
    letter-spacing: 0.32px;
    margin: 0;
}

/* 4カラムグリッド */
.p-top-seeds__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* シーズカード */
.p-top-seeds__card {
    background-color: #fafbfc;
    border: 2px solid #e5e9f0;
    border-radius: 24px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.15s;
}

.p-top-seeds__card:hover {
    opacity: 0.85;
    text-decoration: none;
}

.p-top-seeds__card-date {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.7;
    letter-spacing: 0.32px;
    margin: 0;
}

.p-top-seeds__card-divider {
    height: 1px;
    background-color: #0055ad;
    width: 100%;
}

.p-top-seeds__card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.p-top-seeds__card-company {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1;
    letter-spacing: 0.32px;
    margin: 0;
}

.p-top-seeds__card-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.6;
    letter-spacing: 0.36px;
    margin: 0;
}

.p-top-seeds__empty {
    text-align: center;
    color: var(--color-text-sub);
    padding: 24px 0;
}

/* シーズ登録申込ボタン
   Figma: bg-[#0068ce] border-4 rounded-[9999px] min-h-[56px] px-[24px] py-[16px]
   中央配置: flex flex-col items-center w-full */
.p-top-seeds__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.p-top-seeds__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 56px;
    padding: 16px 24px;
    background-color: var(--color-primary);
    border: 4px solid var(--color-primary);
    border-radius: 9999px;
    color: var(--color-white);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.32px;
    line-height: 1.6;
    text-decoration: none;
    white-space: normal;
    transition: opacity 0.15s;
}

.p-top-seeds__cta-btn:hover {
    opacity: 0.85;
    text-decoration: none;
}

.p-top-seeds__cta-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================================
   課題セクション
   Figma: py-[100px] gap-[36px] / p-need-card 再利用
   ============================================================ */
/* Figma: bg-[#fafbfc] */
.p-top-needs {
    background-color: #fafbfc;
}

.p-top-needs__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 100px var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.p-top-needs__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.p-top-needs__heading-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.p-top-needs__icon {
    width: 80px;
    height: 103px;
    flex-shrink: 0;
    overflow: hidden;
}

.p-top-needs__icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.p-top-needs__heading-text {
    display: flex;
    flex-direction: column;
}

.p-top-needs__en-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.6;
    letter-spacing: 0.36px;
}

.p-top-needs__title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.5;
    letter-spacing: 0.32px;
    margin: 0;
}

/* Figma: min-h-[48px] px-[16px] py-[12px] */
.p-top-needs__more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 48px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: #0055ad;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.p-top-needs__more:hover {
    opacity: 0.7;
    text-decoration: underline;
}

/* SP用リンク: PCでは非表示 */
.p-top-needs__more.p-top-needs__more--sp {
    display: none;
}

/* グリッドは p-need-archive__grid を流用。gap のみ Figma 値に上書き */
/* Figma: gap-[30px] */
.p-top-needs__grid {
    gap: 30px;
}

.p-top-needs__empty {
    text-align: center;
    color: var(--color-text-sub);
    padding: 24px 0;
}

/* ============================================================
   ノートPC対応（ビューポート高さ820px以下・PC幅維持）
   MacBook 13インチ等ではヒーローが画面に収まらないため、
   viewport高さからヘッダー分(100px)を引いた高さに調整する
   ============================================================ */
@media (max-height: 820px) and (min-width: 769px) {
    /* ヒーロー高さをviewportに収める */
    .p-top-hero {
        height: calc(100vh - 100px);
        min-height: 500px;
    }

    /* スライド画像エリア: ヒーロー高さ - 下部白エリア126px */
    .p-top-hero__slides {
        height: calc(100% - 126px);
    }

    /* カード: 常にヒーロー下端から12px
       計算: slides.bottom(hero-123px) + 111px = hero - 12px */
    .p-top-hero__card {
        top: auto;
        bottom: -111px;
    }

    /* ページャーはheroの直接子要素のため単純にbottom指定 */
    .p-top-hero__pager {
        top: auto;
        bottom: 73px;
        right: 56px;
        left: auto;
        transform: none;
    }
}

/* ============================================================
   レスポンシブ（SP）
   ============================================================ */
@media (max-width: 768px) {
    .p-top-hero {
        height: 500px;
    }

    .p-top-hero__slides {
        top: 5px;
        height: 450px;
    }

    .p-top-hero__overlay {
        top: 240px;
        padding: 60px 16px 16px;
    }

    .p-top-hero__date {
        font-size: 1rem;
    }

    .p-top-hero__title {
        font-size: 1.375rem; /* 22px */
    }

    .p-top-hero__desc {
        font-size: 1rem;
    }

    .p-top-hero__arrow {
        top: 170px;
        width: 40px;
        height: 40px;
    }

    .p-top-hero__arrow--prev {
        left: 8px;
    }

    .p-top-hero__arrow--next {
        right: 8px;
    }

    .p-top-hero__pager {
        bottom: 5px;
    }

    /* ========== ヒーロー SP ==========
       Figma SP: 画像h-[172px] + 青いテキストブロック bg-[#0068ce]
    */
    .p-top-hero {
        height: 420px; /* 画像172px + 青ブロック約248px */
        box-shadow: none;
    }

    /* 全スライドがメッセージ非表示のときは画像のみの高さ(172px) */
    .p-top-hero--no-message {
        height: 172px;
    }

    .p-top-hero__slides {
        top: 0;
        height: 100%;
    }

    /* SP背景画像: 上部172pxのみ画像、残りは青 */
    .p-top-hero__bg {
        height: 172px;
        bottom: auto; /* 上部のみ */
    }

    .p-top-hero__bg-img {
        height: 172px;
        object-position: center top;
    }

    /* SP カード: 青い背景ブロック（絶対配置、画像直下から） */
    .p-top-hero__card {
        top: 172px;
        left: 0;
        right: 0;
        width: auto;
        background: var(--color-primary);
        border-radius: 0;
        padding: 24px 16px;
        gap: 16px;
        bottom: 0;
    }

    /* SP メタ: バッジ→日付 の順（Figmaに合わせて逆順） */
    .p-top-hero__meta {
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: 16px;
    }

    /* SP 日付: 白, 18px */
    .p-top-hero__date {
        font-size: 1.125rem;
        color: var(--color-white);
        letter-spacing: 0.36px;
    }

    /* SP カテゴリバッジ: 変更なし（グレーのまま） */

    /* SP テキストブロック */
    .p-top-hero__text {
        gap: 16px;
    }

    /* SP タイトルwrap: 下線なし（青背景上では不要） */
    .p-top-hero__title-wrap {
        border-bottom: none;
        padding-bottom: 0;
    }

    /* SP タイトル: 白, 24px */
    .p-top-hero__title {
        font-size: 1.5rem;
        color: var(--color-white);
    }

    .p-top-hero__title-link:hover {
        text-decoration-color: var(--color-white);
    }

    /* SP 説明文: 白, 16px */
    .p-top-hero__desc {
        font-size: 1rem;
        color: var(--color-white);
    }

    /* SP 矢印: 画像エリア内 (top:68px), 小さく */
    .p-top-hero__arrow {
        top: 68px;
        width: 36px;
        height: 36px;
    }

    .p-top-hero__arrow--prev {
        left: 10px;
    }

    .p-top-hero__arrow--next {
        right: 10px;
    }

    /* SP ページャー: 中央下 */
    .p-top-hero__pager {
        top: auto;
        bottom: 8px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    /* SP ドット: 白 */
    .p-top-hero__dot {
        background: rgba(255, 255, 255, 0.5);
    }

    .p-top-hero__dot.is-active {
        background: var(--color-white);
    }

    /* お知らせ SP */
    .p-top-news__inner {
        padding: 60px 0;
        gap: 24px;
    }

    .p-top-news__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .p-top-news__icon {
        width: 68px;
        height: 54px;
    }

    .p-top-news__heading-block {
        gap: 16px;
    }

    .p-top-news__title {
        font-size: 1.5rem;
    }

    .p-top-news__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px 16px;
    }

    .p-top-news__item-left {
        flex-wrap: wrap;
        gap: 8px;
    }

    .p-top-news__item-date {
        font-size: 1rem;
    }

    .p-top-news__item-arrow {
        display: none;
    }

    /* SP: ヘッダー内リンクを非表示、コンテンツ下のリンクを中央揃えで表示 */
    .p-top-news__more.p-top-news__more--pc {
        display: none;
    }

    .p-top-news__more.p-top-news__more--sp {
        display: inline-flex;
        align-self: center;
    }

    /* クイックリンク SP */
    .p-top-links__wrap {
        flex-direction: column;
        gap: 16px;
    }

    .p-top-links__card {
        height: auto;
    }

    .p-top-links__card-ja {
        font-size: 1.125rem;
    }

    /* About SP */
    .p-top-about__inner {
        padding: 40px 0;
    }

    .p-top-about__card {
        padding: 40px 20px;
    }

    .p-top-about__layout {
        flex-direction: column;
    }

    .p-top-about__title {
        font-size: 1.5rem;
    }

    .p-top-about__text {
        font-size: 1rem;
    }

    .p-top-about__image-area {
        width: 100%;
    }

    .p-top-about__image-wrap {
        width: 100%;
        height: 200px;
    }

    /* シーズ SP */
    .p-top-seeds__inner {
        padding: 60px var(--gutter);
        gap: 24px;
    }

    .p-top-seeds__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .p-top-seeds__title {
        font-size: 1.5rem;
    }

    .p-top-seeds__heading-block {
        gap: 16px;
    }

    .p-top-seeds__icon {
        width: 60px;
        height: 63px;
    }

    .p-top-seeds__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* SP: ヘッダー内リンクを非表示、カード下のリンクを中央揃えで表示 */
    .p-top-seeds__more.p-top-seeds__more--pc {
        display: none;
    }

    .p-top-seeds__more.p-top-seeds__more--sp {
        display: inline-flex;
        align-self: center;
    }

    /* 課題 SP */
    .p-top-needs__inner {
        padding: 60px var(--gutter);
        gap: 24px;
    }

    .p-top-needs__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .p-top-needs__icon {
        width: 60px;
        height: 77px;
    }

    .p-top-needs__heading-block {
        gap: 16px;
    }

    .p-top-needs__title {
        font-size: 1.5rem;
    }

    /* SP: ヘッダー内リンクを非表示、コンテンツ下のリンクを中央揃えで表示 */
    .p-top-needs__more.p-top-needs__more--pc {
        display: none;
    }

    .p-top-needs__more.p-top-needs__more--sp {
        display: inline-flex;
        align-self: center;
    }
}