/*!
 SCRUM-Japan 追加調整（2026-08 MTG後）  MOOBON
 ヘッダー内で fontsize.css より後に読み込む。文字サイズ機能とは別の
 サイト調整（レイアウト・色・フォント等）をここに集約する。
 ______________________________*/

/* #2 モバイルで「参加方法(#js-tab-04)」「プロジェクトの成果(#js-tab-05)」タブも表示する。
   モバイルはタブを縦積み表示するが、元は 01/02/03 のみ display:block で 04/05 が非表示だった。 */
@media screen and (max-width: 1180px) {
  /* 04/05もモバイルで表示。カード間の区切り(余白＋DNA装飾)は本文側に追加した
     <div class="tab_blank"> が担うため、応急のmargin-bottomは廃止（native方式に統一） */
  .top_tab #js-tab-04,
  .top_tab #js-tab-05 { display: block; opacity: 1; }
}

/* #2 プロジェクトの成果(05)をモバイル表示に出すと、緑背景の帯より下にコンテンツが伸びて
   白地になる件。緑帯は .top_about の背景画像 top_bg_l.jpg（16×2921px・repeat-xで横に敷く固定高さ帯）。
   画像下端と同じ薄緑 #edfae9 を背景色に敷き、帯の下も継ぎ目なく緑にする（PC・SP共通で安全） */
.top_about { background-color: #edfae9; }

/* #2 プロジェクトの成果(05)はPCで「テキスト左50%＋背景画像(js-tab-05-bg.jpg)右」の左右分割。
   モバイルは「タイトル→テキスト→画像→ボタン」の縦積みに（南指定）。
   背景画像を消し、articleをflex縦積みにして、画像は article::before で
   テキスト(p)とボタンの間(order:3)に挿入する。HTMLは変更しない。 */
@media screen and (max-width: 1180px) {
  .top_tab #js-tab-05 { background-image: none; }
  .top_tab #js-tab-05 article { width: 100%; display: flex; flex-direction: column; }
  /* 並びを order で明示：タイトル→テキスト→画像→ボタン */
  .top_tab #js-tab-05 article h3 { order: 1; }
  .top_tab #js-tab-05 article p  { order: 2; }
  .top_tab #js-tab-05 article::before {
    content: "";
    order: 3;
    display: block;
    width: 100%;
    aspect-ratio: 760 / 540;
    background: url(../img/top/js-tab-05-bg.jpg) center center / contain no-repeat;
    margin: 10px 0 20px;
  }
  /* 詳細ボタンはモバイルのみ右寄せ（PCの text-align:left を上書き） */
  .top_tab #js-tab-05 .tab_button { order: 4; text-align: right; }
}

/* #3(PPT) PCで文字サイズ中/大にするとカードが縦に伸び、背景画像が background-size:cover で
   高さに追従して拡大→崩れる。固定高さ＋右寄せに変え、文字サイズを変えても拡大しないようにする。
   ※高さ(480px)は見た目調整可。デスクトップ限定。 */
@media screen and (min-width: 1181px) {
  .top_tab #js-tab-05 { background-size: auto 480px; background-position: right center; }
}

/* #6 下層ページも中央固定（TOPと同じ 130rem 上限・中央寄せ）
   TOPは #top .container だけに max-width が付いていた。下層(#page)にも付与する。
   さらに、サイドバー帯(.sub_area)は max-width がコメントアウトで左寄せ(margin-left:0)に
   なっていたため、本文と同じ中央固定に揃える。これで「サイドバー＋本文」が一体で中央に収まる。 */
/* #1 参加方法タブ(#js-tab-04)：イラストが背景画像(cover)なので文字と被る。
   positionでは解決しないため、画像を縮小(contain)して下寄せし、上部に文字用の余白を作る。
   あわせて「詳しくは…」直前のbr（余計な改行）を除去してテキストを詰める。 */
.top_tab #js-tab-04 {
  background-size: auto 500px;        /* イラストを高さ500pxまで大きく（南指定） */
  background-position: center bottom; /* 下部中央に固定 */
}
.top_tab #js-tab-04 p br { display: none; } /* 「詳しくは…」前の余計な改行を除去 */
/* モバイルではイラストが大きすぎ・横が切れてアンバランスなので、全体を小さく表示。
   さらに背景を下端から80px上げる（南指定・モバイルのみ） */
@media screen and (max-width: 1180px) {
  .top_tab #js-tab-04 { background-size: contain; background-position: center bottom 80px; }
}

/* #3 SCRUM-Japanとはカード(#js-tab-01)：背景DNA(js-tab-01-bg.jpg)を消して白く＋
   LC-SCRUM/MONSTARロゴ(top_logos.png 512px)を少し大きく。 */
.top_tab #js-tab-01 { background-image: none; }
.top_tab #js-tab-01 img { width: 640px; max-width: 100%; }

#page .container { max-width: var(--grid-maxWidth); }
#page .sub_area { max-width: var(--grid-maxWidth); margin-left: auto; margin-right: auto; }
/* 中央固定で左端が浮いたため、左メニュー(サイドバー)を全角丸のカードにする（元は右側のみ角丸） */
#page .sub_in { border-radius: 30px; }

/* #7 フォントを Noto Sans JP に（webフォントは header.php で Google Fonts から読込） */
:root { --font-family-sans: "Noto Sans JP", sans-serif; }

/* #9 TOPのNEWSカード：日付が中/大でカード幅(184px)に収まらず右へはみ出す。
   日付は右寄せのまま、収まらない時は日付を下の行(右寄せ)へ折り返す（はみ出し防止）。 */
.news .news_detail { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.news .news_detail > li:nth-child(2) { margin-left: auto; }
/* サムネ画像を固定幅298px→スライド幅いっぱいに（画面が広いほど画像も広がる／狭い時の溢れも解消） */
.news .swiper-slide img { width: 100%; height: auto; }

/* #5 メッセージカード：研究代表者名が絶対配置で、大にすると枠の固定下パディングを
   超えて枠外へはみ出す。名前を通常フローに戻し、枠(高さ=内容依存)が名前まで伸びるようにする。
   カードは変種で左右反転（モンスター/SCRUM-Japan=名前右、LC-SCRUM=名前左）。 */
#page .top_msg_doc_info { position: static; }
#page .monstar-screen_top_msg .top_msg_doc_info,
#page .scramjapan-msg .top_msg_doc_info { margin-left: auto; }
#page .lc-scrum_top_msg .top_msg_doc_info { margin-right: auto; }
#page .top_msg_main_wrap { padding-bottom: 40px; }

/* #8 薄いグレー文字を #333 に（くっきり見せる）。ブランド色は据え置き。
   フォームの placeholder(#bdbfc4) は UX 上あえて薄いままにする。 */
.date,
.toggle_label span,
.footer_link_ul a,
.btn_gray,
.tab_year > ul li a,
.main_contents h3 span { color: #333 !important; }