@charset "utf-8";
/* ==================================================================
   旧ページを 2026 の器に収めるための、すり合わせ CSS  [2026-09-16]

   ■ 読み込む順番
     1. legacy-scoped.xxxx.css … 旧 CSS 全部に .rd-legacy を付けた複製（自動生成）
     2. top2026.css            … 2026 のデザイン
     3. このファイル

   1 を読んでいるのは、原稿（#main_contents の中身）が旧 CSS の
   道具クラス（mb10 / w33 / text-center / cell …）で組まれているため。
   捨てると原稿が崩れる。ここでは「幅 700px・2カラム・文字 13px」という
   旧デザインの前提だけを外して、2026 のワンカラム・文字 16px に寄せる。

   ■ 選択子に #rd-legacy を使っている理由
     旧 CSS は #main_contents から始まる指定ばかりで、id を 1 つ持っている。
     クラスをいくつ重ねても id には勝てない。
     そこで器の div にも id を付け、同じ重さにしたうえで
     「後に書いたほうが勝つ」に持ち込んでいる。

   ■ 原則
     原稿の HTML には手を入れない。直すのは見た目だけ。
   ================================================================== */

/* ==================================================================
   国別サイトの中のメニュー（旧 #globalNavi の置き換え）
   ================================================================== */
.rd-subnav{ background:var(--paper); border-bottom:1px solid var(--rule); }
.rd-subnav-in{ display:flex; align-items:center; gap:18px; min-height:52px; flex-wrap:wrap; }
.rd-subnav-now{
	margin:0; flex:none;
	font-family:var(--jp); font-weight:900; font-size:14px; letter-spacing:.04em;
	color:var(--brand-deep);
}
.rd-subnav-now::after{
	content:""; display:inline-block; width:1px; height:14px;
	margin-left:18px; vertical-align:-2px; background:var(--rule);
}
.rd-subnav ul{
	display:flex; flex-wrap:wrap; align-items:center; gap:4px 2px;
	margin:0; padding:0; list-style:none; min-width:0;
}
.rd-subnav li{ margin:0; }
.rd-subnav a{
	display:inline-block; padding:8px 13px; border-radius:999px;
	font-family:var(--jp); font-weight:700; font-size:13.5px; line-height:1.4;
	color:var(--ink-soft); text-decoration:none; white-space:nowrap;
	transition:background-color .18s ease, color .18s ease;
}
.rd-subnav a:hover{ background:var(--brand-tint); color:var(--brand-deep); }
@media only screen and (max-width:900px){
	.rd-subnav-in{ min-height:0; padding-top:10px; padding-bottom:10px; gap:8px; }
	.rd-subnav-now{ width:100%; }
	.rd-subnav-now::after{ display:none; }
	.rd-subnav ul{
		flex-wrap:nowrap; overflow-x:auto; width:100%;
		-webkit-overflow-scrolling:touch; scrollbar-width:none;
	}
	.rd-subnav ul::-webkit-scrollbar{ display:none; }
}

/* ==================================================================
   原稿を入れる箱
   ================================================================== */
.rd-page.rd-legacy{ padding:0 0 64px; background:var(--ground); }
#rd-legacy{ width:100%; max-width:var(--wrap); margin:0 auto; padding:36px 24px 0; }

/* 旧レイアウトは「本文 700px を左に流して、右にサイドバー」。
   サイドバーは出していないので、流し込みと幅を外して 1 カラムに戻す。 */
#rd-legacy #main_contents,
#rd-legacy #school_summary,
#rd-legacy #contents,
#rd-legacy .schooldetails{
	float:none; width:auto; max-width:none;
	margin-left:0; margin-right:0; background:none; border:0;
}
#rd-legacy #secondary,
#rd-legacy .pagetop,
#rd-legacy #container_bottom{ display:none; }

/* 原稿は白い紙の上に置く。まわりの薄い青（--ground）と分ける */
#rd-legacy > #main_contents,
#rd-legacy > #school_summary{
	background:var(--paper); border:1px solid var(--rule); border-radius:18px;
	box-shadow:var(--shadow); padding:34px 38px 40px; margin:0 0 24px;
}
@media only screen and (max-width:959px){
	#rd-legacy{ padding:22px 16px 0; }
	#rd-legacy > #main_contents,
	#rd-legacy > #school_summary{ padding:22px 18px 28px; border-radius:14px; }
	.rd-page.rd-legacy{ padding-bottom:40px; }
}

/* ==================================================================
   文字

   旧 CSS は 13px 前提。読ませる文章としては小さいので 16px にそろえる。
   ================================================================== */
.rd-page.rd-legacy{ font-family:var(--body); color:var(--ink); font-size:16px; line-height:1.95; }
#rd-legacy,
#rd-legacy p, #rd-legacy li, #rd-legacy dd, #rd-legacy dt,
#rd-legacy td, #rd-legacy th, #rd-legacy div, #rd-legacy span{
	font-size:16px; line-height:1.95; color:var(--ink);
}
#rd-legacy p{ margin:0 0 1.2em; }
#rd-legacy strong, #rd-legacy b{ font-weight:700; }

/* 旧 CSS の細かい文字指定。小さいほうだけ底上げして、大きいほうは活かす */
#rd-legacy .font10, #rd-legacy .font11, #rd-legacy .font12, #rd-legacy .font13{ font-size:14px; }
#rd-legacy .font14{ font-size:15px; }
#rd-legacy .font15, #rd-legacy .font16{ font-size:16.5px; }
#rd-legacy .smaller, #rd-legacy .rsmaller{ font-size:14px; }
#rd-legacy .bold{ font-weight:700; }

/* リンク */
#rd-legacy a{ color:var(--brand-deep); text-decoration:none; }
#rd-legacy a:hover{ color:var(--brand); text-decoration:underline; }

/* ==================================================================
   見出し

   旧サイトの見出しは背景画像で青い帯や色棒を描いていた。
   画像をやめて、2026 と同じ描き方（CSS の罫線と色）に置き換える。
   ================================================================== */
#rd-legacy h2, #rd-legacy h3, #rd-legacy h4, #rd-legacy h5,
#rd-legacy #main_contents h2, #rd-legacy #main_contents h3,
#rd-legacy #main_contents h4, #rd-legacy #main_contents h5{
	background:none; border:0; border-radius:0; box-shadow:none;
	font-family:var(--jp); color:var(--ink); text-indent:0; text-shadow:none;
	letter-spacing:.01em;
}
#rd-legacy h2, #rd-legacy #main_contents h2{
	position:relative; font-weight:900; font-size:25px; line-height:1.55;
	margin:46px 0 18px; padding:0 0 12px;
	border-bottom:2px solid var(--brand-tint);
}
#rd-legacy h2::after, #rd-legacy #main_contents h2::after{
	content:""; position:absolute; left:0; bottom:-2px;
	width:72px; height:2px; background:var(--brand);
}
#rd-legacy h3, #rd-legacy #main_contents h3{
	font-weight:900; font-size:20px; line-height:1.6;
	margin:38px 0 14px; padding:0 0 0 14px;
	border-left:4px solid var(--brand);
}
#rd-legacy h4, #rd-legacy #main_contents h4{
	font-weight:700; font-size:17.5px; line-height:1.7;
	margin:28px 0 10px; color:var(--brand-deep);
}
#rd-legacy h5, #rd-legacy #main_contents h5{ font-weight:700; font-size:16.5px; margin:22px 0 8px; }
#rd-legacy > #main_contents > h2:first-child,
#rd-legacy > #main_contents > h3:first-child{ margin-top:0; }

/* ==================================================================
   表
   ================================================================== */
#rd-legacy table{ width:100%; border-collapse:collapse; margin:0 0 22px; background:var(--paper); }
#rd-legacy table th, #rd-legacy table td{
	border:1px solid var(--rule); padding:12px 14px; text-align:left; vertical-align:top;
}
#rd-legacy table th{
	background:var(--sky); color:var(--brand-deep); font-weight:700; white-space:nowrap;
}
/* 旧サイトは div を表の代わりにも使っている（.table / .cell）。そちらは触らない */
#rd-legacy .table{ border-collapse:separate; }
#rd-legacy .table th, #rd-legacy .table td{ border:0; padding:0; background:none; }

#rd-legacy .rd-table-scroll{ overflow-x:auto; margin:0 0 22px; }
#rd-legacy .rd-table-scroll table{ margin:0; min-width:520px; }

/* ==================================================================
   箇条書き（本文の中のものだけ。ナビや部品の ul は触らない）
   ================================================================== */
#rd-legacy .entry-content ul, #rd-legacy > #main_contents > ul{
	margin:0 0 22px; padding:0 0 0 1.4em; list-style:disc;
}
#rd-legacy .entry-content ol, #rd-legacy > #main_contents > ol{
	margin:0 0 22px; padding:0 0 0 1.6em; list-style:decimal;
}
#rd-legacy .entry-content li,
#rd-legacy > #main_contents > ul > li,
#rd-legacy > #main_contents > ol > li{ margin:0 0 .4em; }

/* ==================================================================
   国の一覧（/country）

   旧 CSS は 49% / 50% の左右流し込み＋点線、さらに
   padding-bottom:32767px / margin-bottom:-32767px で高さをそろえる
   古い手を使っている。grid に置き換えて、その手を全部外す。
   ================================================================== */
#rd-legacy .countrylist .inner{
	display:grid; grid-template-columns:1fr 1fr; gap:18px;
	margin:0 0 18px; overflow:visible;
}
#rd-legacy .countrylist .innerL,
#rd-legacy .countrylist .innerR,
#rd-legacy .countrylist .innerLno,
#rd-legacy .countrylist .innerRno{
	float:none; width:auto; margin:0; border:1px solid var(--rule);
	padding:22px 22px 20px; border-radius:14px; background:var(--paper);
	transition:box-shadow .2s ease, border-color .2s ease;
}
#rd-legacy .countrylist .innerL:hover,
#rd-legacy .countrylist .innerR:hover,
#rd-legacy .countrylist .innerLno:hover,
#rd-legacy .countrylist .innerRno:hover{
	border-color:var(--brand); box-shadow:var(--shadow-lift);
}
#rd-legacy .countrylist .innerTitle{
	display:flex; align-items:center; gap:14px;
	margin:0 0 14px; padding:0 0 13px; border-bottom:1px solid var(--rule);
	background:none; font-size:19px;
}
#rd-legacy .countrylist .innerTitle .box{
	display:block; float:none; width:auto; height:auto; margin:0; padding:0;
	font-family:var(--jp); font-weight:900; font-size:19px; line-height:1.5; color:var(--ink);
	text-align:left; background:none;
}
#rd-legacy .countrylist .innerTitle .box:first-child{ flex:none; width:72px; }
#rd-legacy .countrylist .innerTitle .box:first-child img{
	display:block; width:72px; height:50px; object-fit:cover; border-radius:8px;
}
#rd-legacy .countrylist .innerTitle .box + .box{ flex:1 1 auto; min-width:0; }
#rd-legacy .countrylist .innerTitle .box2{
	display:block; float:none; width:auto; height:auto;
	margin:0 0 0 auto; padding:0; background:none; flex:none;
}
#rd-legacy .countrylist .innerTitle .box2 a{
	display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 15px;
	border-radius:999px; border:1.5px solid var(--rule); background:var(--paper);
	font-family:var(--jp); font-weight:700; font-size:13.5px; color:var(--brand-deep);
	text-decoration:none; white-space:nowrap; background-image:none;
}
#rd-legacy .countrylist .innerTitle .box2 a::after{ content:"›"; font-size:15px; line-height:1; }
#rd-legacy .countrylist .innerTitle .box2 a:hover{
	background:var(--brand); border-color:var(--brand); color:#fff; text-decoration:none;
}
#rd-legacy .countrylist p{ margin:0; color:var(--ink-soft); font-size:15.5px; }
@media only screen and (max-width:760px){
	#rd-legacy .countrylist .inner{ grid-template-columns:1fr; }
}

/* ==================================================================
   世界地図

   ピンの位置は mod/css/singles/country.css が px で持っている。
   地図の絵（bg.jpg）は 673×368 で、その中に空の吹き出しが描かれていて、
   国旗と国名はその吹き出しの上に重ねている。
   絵を本文いっぱい（約 1000px）に伸ばすと、絵だけが大きくなって
   ピンが左上に取り残される。

   そこで
     ・位置を px から % に置き換えて、絵と一緒に動くようにする
     ・絵の幅は 760px までにして、吹き出しとピンの大きさが離れすぎないようにする
   ================================================================== */
#rd-legacy #country_map{
	margin:0 auto 34px; max-width:760px;
	border-radius:14px; overflow:hidden; background:var(--sky);
}
#rd-legacy #country_map img{ width:100%; display:block; }
#rd-legacy #country_map .country_links a .name{ font-size:13px; }

#rd-legacy #country_map .country_links a.link_irl{ top:10.598%; left:3.269%; }
#rd-legacy #country_map .country_links a.link_uk{ top:18.750%; left:7.281%; }
#rd-legacy #country_map .country_links a.link_ger{ top:25.815%; left:10.698%; }
#rd-legacy #country_map .country_links a.link_fra{ top:34.239%; left:12.779%; }
#rd-legacy #country_map .country_links a.link_mlt{ top:42.120%; left:14.264%; }
#rd-legacy #country_map .country_links a.link_esp{ top:50.000%; left:4.160%; }
#rd-legacy #country_map .country_links a.link_ind{ top:58.424%; left:17.533%; }
#rd-legacy #country_map .country_links a.link_sgp{ top:67.935%; left:18.722%; }
#rd-legacy #country_map .country_links a.link_mys{ top:48.641%; left:34.175%; }
#rd-legacy #country_map .country_links a.link_philippine{ top:57.065%; left:45.319%; }
#rd-legacy #country_map .country_links a.link_bali{ top:76.087%; left:28.529%; }
#rd-legacy #country_map .country_links a.link_aus{ top:89.674%; left:28.975%; }
#rd-legacy #country_map .country_links a.link_nz{ top:85.326%; left:60.921%; }
#rd-legacy #country_map .country_links a.link_fji{ top:72.283%; left:60.773%; }
#rd-legacy #country_map .country_links a.link_haw{ top:58.696%; left:66.270%; }
#rd-legacy #country_map .country_links a.link_canada{ top:22.011%; left:75.780%; }
#rd-legacy #country_map .country_links a.link_us{ top:38.315%; left:83.804%; }

/* ==================================================================
   もう使っていない導線を隠す

   ・資料請求フォーム／お見積りフォーム（廃止）
   ・拠点でのカウンセリング予約（拠点は非公開）
   ・全国◯都市の説明会（開催していない）
   HTML は残したまま、表に出さない。原稿を消して回る作業をしないで済む。
   ================================================================== */
#rd-legacy .button2-request,
#rd-legacy .to_request,
#rd-legacy .bottom_bn,
#rd-legacy .banner2,
#rd-legacy .mod-fixed-banner{ display:none !important; }

/* 行き先のないリンク（小窓を開くだけのもの）は、
   mod/parts/legacy_2026.php の rd_legacy_strip_dead_links() が
   HTML から外している。理由はそちらに書いた。
   ここでは、リンクを外したあとに空になる入れ物だけを畳む。 */
#rd-legacy .block_to_reasons,
#rd-legacy .mobile_school_banner.schoolseats,
#rd-legacy .mobile_school_banner .to_chart{ display:none !important; }

/* ==================================================================
   ボタン
   ================================================================== */
/* .rdl-btn（相談の2ボタン）はここでは触らない。
   あれは mod/parts/cta_legacy.php が自前で 2026 の見た目を持っている部品で、
   ここで背景だけ塗ると、文字色（!important 付き）が残って読めなくなる。
   実際 [2026-09-16] に「フォームで相談する」が青地に濃紺で出ていた。 */
#rd-legacy .button2-review{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	height:44px; padding:0 22px; border-radius:999px;
	background:var(--brand); color:#fff; border:0; background-image:none;
	font-family:var(--jp); font-weight:700; font-size:15px; text-decoration:none;
	box-shadow:none; width:auto; text-indent:0;
}
#rd-legacy .button2-review:hover{ background:var(--brand-deep); color:#fff; text-decoration:none; }

/* ==================================================================
   学校ページ
   ================================================================== */

/* 学校名は上の見出し帯にもう出ている。ここでは読みがなだけ残す */
#rd-legacy #school_summary .schoolTitle{
	font-size:0; margin:0 0 6px; padding:0; background:none; border:0;
}
#rd-legacy #school_summary .schoolTitle .jpTitle{
	display:block; font-family:var(--jp); font-weight:500;
	font-size:15px; letter-spacing:.06em; color:var(--ink-faint);
}
#rd-legacy #school_summary .blue{
	color:var(--brand-deep); font-family:var(--jp); font-weight:700;
	font-size:19px; line-height:1.7; margin:0 0 22px;
}

/* 満足度のレーダーチャート。
   六角形のまわりの数字は left:225px のように座標で置かれていて、
   図の横幅が 470px くらいであることが前提になっている。
   本文が 1120px に広がったぶん、外側の箱で幅を止めておかないと
   数字だけが外へ散っていく。 */
/* 上半分は「左＝評価／右＝写真」の 2 列。旧 CSS は display:table で
   組んでいて、幅が本文いっぱいに広がる。flex に置き換えて、
   右の写真を 280px で固定し、左を残りに収める。 */
@media only screen and (min-width:960px){
	#rd-legacy #school_summary > .table{ display:flex; gap:30px; width:100%; }
	#rd-legacy #school_summary > .table > .cell{ display:block; width:auto; }
	#rd-legacy #school_summary > .table > .cell:first-child{ flex:1 1 auto; min-width:0; }
	#rd-legacy #school_summary > .table > .cell + .cell{ flex:none; width:280px; padding-left:0; }
	#rd-legacy .rating_total{ max-width:820px; }
}

/* 六角形のまわりの数字。旧 CSS は左右 225px の位置に置いていて、
   幅が変わると図に重なる。左右の端に寄せ、幅を決めて折り返さないようにする。 */
@media only screen and (min-width:960px){
	#rd-legacy .radar_chart .wrap{ height:250px; }
	#rd-legacy .radar_chart .wrap .scores > .score-1,
	#rd-legacy .radar_chart .wrap .scores > .score-2{
		left:auto; right:6px; width:96px; text-align:left;
	}
	#rd-legacy .radar_chart .wrap .scores > .score-4,
	#rd-legacy .radar_chart .wrap .scores > .score-5{
		right:auto; left:6px; width:96px; text-align:right;
	}
}
#rd-legacy .rating-box{
	background:var(--sky); border:1px solid var(--rule); border-radius:14px;
	padding:18px 20px;
}
#rd-legacy .radar_chart{ border:1px solid var(--rule); border-radius:10px; }
#rd-legacy .radar_chart_title{
	background:var(--brand-tint); color:var(--brand-deep);
	border-right:1px solid var(--rule); font-weight:700;
}
#rd-legacy .rating_total .total_rating,
#rd-legacy .rating_total .total_rating .rate{ color:var(--ink); }
#rd-legacy .rating_total .rate{ color:var(--brand-deep); }

/* 写真。旧 CSS は 168px の灰色の箱に画像を置いていた */
#rd-legacy #school_summary .school-thumbnail{
	background:none; min-height:0; line-height:normal; text-align:left;
}
#rd-legacy #school_summary .school-thumbnail img{
	max-width:100%; width:100%; border-radius:14px; display:block;
}

/* 学校の条件（エリア・施設タイプ・経営…） */
#rd-legacy .school-status{
	margin:20px 0 0; padding:20px 0 0;
	background:none; border:0; border-top:1px solid var(--rule);
}
#rd-legacy .school-status ul{
	display:flex; flex-wrap:wrap; gap:12px 26px; margin:0 0 12px; padding:0; width:auto;
}
#rd-legacy .school-status li{
	display:flex; align-items:center; gap:9px; width:auto; float:none; padding:0;
}
#rd-legacy .label-school-status{
	display:inline-block; padding:3px 11px; border-radius:999px;
	background:var(--brand-tint); color:var(--brand-deep); background-image:none;
	font-family:var(--jp); font-weight:700; font-size:12.5px; line-height:1.7; white-space:nowrap;
}

/* タブ。旧デザインは1本ずつ色が違った。2026 では色で区別せず、いま見ているものだけを塗る */
#rd-legacy .school-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; padding:0; background:none; border:0; }
#rd-legacy .school-tabs a{
	flex:1 1 auto; display:flex; align-items:center; justify-content:center;
	min-height:54px; padding:8px 16px; border-radius:12px;
	background:var(--paper); border:1.5px solid var(--rule); background-image:none;
	font-family:var(--jp); font-weight:700; font-size:15px; line-height:1.45;
	color:var(--ink-soft); text-align:center; text-decoration:none; width:auto; height:auto;
}
#rd-legacy .school-tabs a:hover{ border-color:var(--brand); color:var(--brand-deep); text-decoration:none; }
/* 旧 CSS はタブ1本ずつに色を付けていた（クチコミ＝桃、レポート＝緑）。
   下の帯もスプライト画像で描いていた。どちらも外す。 */
#rd-legacy .school-tabs a.reviews,
#rd-legacy .school-tabs a.reports,
#rd-legacy .school-tabs a.data,
#rd-legacy .school-tabs a.course,
#rd-legacy .school-tabs a.price{
	background-color:var(--paper); color:var(--ink-soft);
}
#rd-legacy .school-tabs a::after{ content:none; display:none; }
#rd-legacy .school-tabs a.active,
#rd-legacy .school-tabs a.reviews.active,
#rd-legacy .school-tabs a.reports.active{
	background-color:var(--brand); border-color:var(--brand); color:#fff; text-decoration:none;
}
#rd-legacy .school-tabs a:hover{ text-decoration:none; }
#rd-legacy .school-tabs a span{ font-size:inherit; color:inherit; }

/* キャンペーン・お知らせ・選んだ理由 */
#rd-legacy .school-campaign,
#rd-legacy .school-news,
#rd-legacy .block_to_reasons{
	background:var(--sky); border:1px solid var(--rule); border-radius:14px;
	padding:18px 22px; margin:0 0 20px;
}

/* クチコミ */
#rd-legacy .review{
	background:var(--paper); border:1px solid var(--rule); border-radius:14px;
	padding:22px 24px; margin:0 0 16px;
}
#rd-legacy .review-head{ border-bottom:1px solid var(--rule); }
#rd-legacy .label{
	display:inline-block; padding:3px 11px; border-radius:999px; background-image:none;
	background:var(--brand-tint); color:var(--brand-deep);
	font-family:var(--jp); font-weight:700; font-size:12.5px; line-height:1.7;
}
#rd-legacy .school-thumbnail img{ border-radius:14px; }

/* ==================================================================
   画像
   ================================================================== */
#rd-legacy img{ max-width:100%; height:auto; }


/* クチコミ投稿のボタン。旧 CSS は幅を持たない inline だったので、
   細い列に入れると文字が縦に折れる。 */
#rd-legacy #school_summary .button2-review{
	width:100%; margin:14px 0 0; height:48px;
}


/* ==================================================================
   国別トップ
   ================================================================== */

/* 一番上の大きなバナー。リンク先が /request（廃止した資料請求フォーム）で、
   絵柄も「オーストラリアをはじめ…」と、どの国のページでも同じものだった。
   行き止まりになるので出さない。 [2026-09-16] */
#rd-legacy #main_img{ display:none; }

/* シェアボタン（Facebook / X / LINE / はてブ）は出さない  [2026-09-16]
   アイコンだけの四角が横に並んで場所を取っていた割に、押されていない。
   共有は端末の共有機能で足りるので、置かない。
   HTML は原稿側に残っているので、この 1 行を消せば戻る。 */
#rd-legacy #social_buttons,
#rd-legacy .social_buttons{ display:none; }

/* ランキングの箱。旧デザインは 6 種類を 6 色で塗り分けていた。
   数字を読む場所なので、色は 1 つに絞って、中身を読ませる。 */
/* minmax(0,1fr) にしているのは、1fr だと中身（学校名）より狭くならず、
   長い名前が入った側の列だけ広がってしまうため。 */
/* display だけ !important が要る。旧 CSS が .pc{display:block!important} で
   PC/スマホを切り替えていて、重さでは勝てないため。
   なお旧サイトの切り替えは 960px。このファイルの原稿まわりも同じ 960px に
   そろえてある（別の値にすると、あいだの幅で表示が食い違う）。 */
#rd-legacy .nation-top-ranking .rankings.pc{
	display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px;
	letter-spacing:normal;
}
#rd-legacy .nation-top-ranking .rankings.pc > *{ width:auto; float:none; margin:0; }
/* 最後の「もっと見る」は箱ではないので、2 列ぶんを使う */
#rd-legacy .nation-top-ranking .rankings.pc > .text-right{ grid-column:1 / -1; }
#rd-legacy .nation-top-ranking .ranking.receptions > div,
#rd-legacy .nation-top-ranking .ranking.requests > div,
#rd-legacy .nation-top-ranking .ranking.rating > div,
#rd-legacy .nation-top-ranking .ranking.schoolstaff > div,
#rd-legacy .nation-top-ranking .ranking.access > div,
#rd-legacy .nation-top-ranking .ranking.good > div{
	border:1px solid var(--rule); border-radius:14px; overflow:hidden;
	background:var(--paper);
}
#rd-legacy .nation-top-ranking .ranking.receptions .ranking_title,
#rd-legacy .nation-top-ranking .ranking.requests .ranking_title,
#rd-legacy .nation-top-ranking .ranking.rating .ranking_title,
#rd-legacy .nation-top-ranking .ranking.schoolstaff .ranking_title,
#rd-legacy .nation-top-ranking .ranking.access .ranking_title,
#rd-legacy .nation-top-ranking .ranking.good .ranking_title{
	background:var(--brand); color:#fff; border:0; border-radius:0;
	padding:11px 16px; text-align:left; background-image:none;
}
#rd-legacy .nation-top-ranking .ranking_title > span,
#rd-legacy .nation-top-ranking .ranking_title > span > span{
	color:#fff; font-family:var(--jp); font-weight:700; font-size:14.5px;
}
#rd-legacy .nation-top-ranking table.ranking_body{ background:var(--paper); margin:0; }
#rd-legacy .nation-top-ranking table.ranking_body td{
	border:0; border-bottom:1px solid var(--rule); background:none; padding:10px 8px;
}
#rd-legacy .nation-top-ranking table.ranking_body tr:last-child td{ border-bottom:0; }
#rd-legacy .nation-top-ranking table.ranking_body td *{ font-size:12.5px; }
#rd-legacy .nation-top-ranking table.ranking_body td .number,
#rd-legacy .nation-top-ranking table.ranking_body td .number span{ font-size:13px; }

/* セクションの見出し（旧 .TOPtitle） */
#rd-legacy .TOPtitle{
	background:none; border:0; border-left:4px solid var(--brand);
	padding:0 0 0 14px; margin:40px 0 18px;
	font-family:var(--jp); font-weight:900; font-size:21px; line-height:1.6; color:var(--ink);
}
#rd-legacy .TOPtitle .titlepink{
	display:inline-block; margin-left:10px; color:var(--ink-soft);
	font-weight:500; font-size:14.5px; background:none;
}

/* 地域名（セブ／クラーク／バギオ）が 1 文字ずつ縦に折れないようにする。
   旧 CSS は文字を 9px にして収めていた。読める大きさに戻したので、
   折り返さない指定のほうで収める。 */
#rd-legacy .nation-top-ranking table.ranking_body td.area,
#rd-legacy .nation-top-ranking table.ranking_body td.area .cell{ white-space:nowrap; }
#rd-legacy .label-school-status br{ display:none; }
#rd-legacy .label-school-status.mini{ padding:2px 8px; font-size:11.5px; }


/* ==================================================================
   スマホ

   旧サイトはスマホ用の CSS をサーバー側の端末判定で出し分けている。
   ここでは、上で入れた「PC 向けの幅の指定」が残って画面からはみ出すのを
   止めるのが主な仕事。
   ================================================================== */
@media only screen and (max-width:959px){
	/* 横にはみ出させない。広い表だけはその場で横スクロールさせる */
	.rd-page.rd-legacy{ overflow-x:clip; }
	#rd-legacy, #rd-legacy > #main_contents, #rd-legacy > #school_summary{ max-width:100%; }
	#rd-legacy #school_summary > .table,
	#rd-legacy #school_summary > .table > .cell{ display:block; width:auto; padding-left:0; }
	#rd-legacy #school_summary > .table > .cell + .cell{ margin-top:20px; }
	#rd-legacy .rating_total,
	#rd-legacy .rating_total > .c1,
	#rd-legacy .rating_total > .c2{ display:block; width:auto; max-width:100%; }
	#rd-legacy .rating_total > .c2{ margin-top:14px; }
	#rd-legacy .rating-box{ padding:14px; }
	/* 「各項目の平均スコア」の縦書きの帯は、スマホでは出さない。
	   もともと旧サイトも .rnone（スマホでは非表示）を付けていた。
	   すぐ上に「総合満足度」と出ているので、無くても意味は通る。 */
	#rd-legacy #school_summary .radar_chart{ display:block !important; width:auto !important; }
	#rd-legacy #school_summary .radar_chart > *{ display:block !important; }
	#rd-legacy #school_summary .radar_chart .radar_chart_title{ display:none !important; }
	/* !important を付けているのは、旧スマホ CSS（mod.sp.css）が
	   同じ場所を id 付きで押さえていて、端末によって読み込まれたり
	   読み込まれなかったりするため。どちらでも同じ見た目にしたい。 */
	#rd-legacy #school_summary .radar_chart .wrap{
		display:block !important; height:auto !important; width:auto !important;
		padding:14px !important; text-align:center;
	}
	#rd-legacy #school_summary .radar_chart .wrap canvas{
		display:block !important; margin:0 auto !important; max-width:100%;
	}
	/* 項目名は「授業内容/雰囲気」「インターネット環境」のように長い。
	   狭い画面で 2 列にすると 1 行に収まらず、3 行に割れて読みにくい。
	   480px 未満は 1 列にする。 */
	#rd-legacy #school_summary .radar_chart .wrap .scores{
		display:grid !important; grid-template-columns:1fr; gap:0 18px;
		width:auto !important; margin:0 0 12px !important; text-align:left;
	}
	@media only screen and (min-width:480px){
		#rd-legacy #school_summary .radar_chart .wrap .scores{ grid-template-columns:1fr 1fr; }
	}
	/* 数字は「項目名 …… 数値」の 1 行にする。折り返して 2 行に割れると読みにくい */
	#rd-legacy #school_summary .radar_chart .wrap .scores > [class^="score-"]{
		position:static !important; top:auto; left:auto; right:auto; bottom:auto;
		width:auto !important; min-width:0;
		display:flex; align-items:baseline; gap:8px;
		padding:6px 0; border-bottom:1px dotted var(--rule);
	}
	#rd-legacy #school_summary .radar_chart .wrap .scores .col_name{
		flex:1 1 auto; min-width:0; font-size:13.5px; color:var(--ink-soft);
	}
	#rd-legacy #school_summary .radar_chart .wrap .scores .rate{
		flex:none; display:inline; margin:0; font-size:15.5px; font-weight:700; color:var(--brand-deep);
	}

	/* タブ。旧スマホ CSS が .schooldetails .school-tabs > a に 1本ずつ色を
	   付けている（クチコミ＝桃、レポート＝緑…）。同じ重さでは勝てないので
	   こちらも id を 2 つにして、色を1つにそろえる。 */
	#rd-legacy #main_contents .schooldetails .school-tabs{
		display:flex; flex-wrap:wrap; gap:8px; background:none; border:0; padding:0;
	}
	#rd-legacy #main_contents .schooldetails .school-tabs > a{
		flex:1 1 calc(50% - 4px); width:auto; height:auto; min-height:56px;
		display:flex; align-items:center; justify-content:center; text-align:center;
		padding:8px 10px; border-radius:12px;
		background:var(--paper); background-image:none; border:1.5px solid var(--rule);
		font-family:var(--jp); font-weight:700; font-size:14px; line-height:1.45;
		color:var(--ink-soft); text-decoration:none;
	}
	#rd-legacy #main_contents .schooldetails .school-tabs > a.active{
		background:var(--brand); border-color:var(--brand); color:#fff;
	}
	#rd-legacy #main_contents .schooldetails .school-tabs > a span{ font-size:inherit; color:inherit; }

	/* 六角形のまわりの数字は、狭い画面では図に置ききれない。
	   図の下に 2 列で並べ直す。 */
	#rd-legacy .radar_chart .wrap{
		display:flex; flex-direction:column; align-items:center;
		height:auto; padding:14px; width:auto;
	}
	#rd-legacy .radar_chart .wrap canvas{ order:1; margin:0 auto; }
	#rd-legacy .radar_chart .wrap .scores{
		order:2; width:100%; display:grid; grid-template-columns:1fr 1fr;
		gap:8px 14px; margin:14px 0 0; text-align:left;
	}
	#rd-legacy .radar_chart .wrap .scores > [class^="score-"]{
		position:static; top:auto; left:auto; right:auto; bottom:auto;
		width:auto; text-align:left;
	}
	#rd-legacy .radar_chart .wrap .scores .col_name{ font-size:13px; color:var(--ink-soft); }
	#rd-legacy .radar_chart .wrap .scores .rate{ display:inline; margin-left:6px; font-weight:700; }

	#rd-legacy .nation-top-ranking .rankings.pc{ display:none !important; }
	#rd-legacy #school_summary .school-thumbnail img{ width:auto; max-width:100%; }
	/* 学校データの表。4列（項目・内容・項目・内容）を 375px に詰めると
	   1文字ずつ改行されて読めない。縦に積み直す。 */
	#rd-legacy #main_contents .basic-table,
	#rd-legacy #main_contents .basic-table tbody,
	#rd-legacy #main_contents .basic-table tr,
	#rd-legacy #main_contents .basic-table th,
	#rd-legacy #main_contents .basic-table td{ display:block; width:auto; }
	#rd-legacy #main_contents .basic-table{ border:0; }
	#rd-legacy #main_contents .basic-table tr{
		margin:0 0 12px; border:1px solid var(--rule); border-radius:10px; overflow:hidden;
	}
	#rd-legacy #main_contents .basic-table th{
		background:var(--sky); color:var(--brand-deep); border:0;
		padding:8px 13px; font-size:13.5px; font-weight:700; white-space:normal; text-align:left;
	}
	#rd-legacy #main_contents .basic-table td{
		border:0; border-bottom:1px solid var(--rule); padding:10px 13px; font-size:15px;
	}
	#rd-legacy #main_contents .basic-table tr > *:last-child{ border-bottom:0; }
}


/* ==================================================================
   ランキング（国別トップの中／ランキングページ）  [2026-09-16]

   旧デザインは、見出しも順位もボタンも画像で作られていた。
   スマホだと画像の文字が小さすぎて読めず、行間だけが空いていたので、
   文字と CSS で組み直す。
   ================================================================== */

/* セクションの見出し。旧 CSS が中央ぞろえにしていて、
   「フィリピン語学学校 人気ランキン／グ」のように最後の 1 文字だけが
   次の行に落ちていた。左ぞろえに戻し、補足は改行して下に置く。 */
#rd-legacy .TOPtitle,
#rd-legacy #main_contents .TOPtitle{
	display:block; text-align:left; background:none; border:0;
	border-left:4px solid var(--brand); border-radius:0;
	padding:0 0 0 14px; margin:40px 0 18px; min-height:0; height:auto;
	font-family:var(--jp); font-weight:900; font-size:21px; line-height:1.6; color:var(--ink);
}
#rd-legacy #main_contents .TOPtitle .titlepink{
	display:inline-block; margin:2px 0 0 10px; padding:0; background:none;
	color:var(--ink-soft); font-weight:500; font-size:14.5px; line-height:1.7;
}

/* ランキングページの見出し（「インド語学学校／パンフ請求数 ランキング」） */
#rd-legacy #main_contents h2.page-title{
	background:none; border:0; border-left:4px solid var(--brand); border-radius:0;
	padding:0 0 0 14px; margin:0 0 18px; text-indent:0;
	font-family:var(--jp); font-weight:900; font-size:24px; line-height:1.5; color:var(--ink);
}
#rd-legacy #main_contents h2.page-title .font18{
	display:block; font-size:14px; font-weight:700; color:var(--brand-deep); line-height:1.7;
}

/* スマホの「どのランキングを見るか」の切り替え（6つ） */
#rd-legacy .ranking_table_sp_tabs .table,
#rd-legacy #main_contents .ranking_table_sp_tabs .table{ display:block; width:auto; }
#rd-legacy .ranking_table_sp_tabs .tr,
#rd-legacy #main_contents .ranking_table_sp_tabs .tr{ display:flex; gap:6px; margin:0 0 6px; }
#rd-legacy .ranking_table_sp_tabs a.slider_button,
#rd-legacy #main_contents .ranking_table_sp_tabs a.slider_button{
	flex:1 1 0; width:auto; height:auto; min-height:46px; padding:6px 8px;
	display:flex; align-items:center; justify-content:center; text-align:center;
	border-radius:10px; background:var(--paper); background-image:none;
	border:1.5px solid var(--rule); color:var(--ink-soft);
	font-family:var(--jp); font-weight:700; font-size:12.5px; line-height:1.35;
	text-decoration:none;
}
#rd-legacy .ranking_table_sp_tabs a.slider_button.active,
#rd-legacy #main_contents .ranking_table_sp_tabs a.slider_button.active{
	background:var(--brand); border-color:var(--brand); color:#fff;
}
#rd-legacy .ranking_table_sp_tabs a.slider_button span{ font-size:inherit; color:inherit; }

/* 「◯◯ランキング をもっと詳しく見る」 */
#rd-legacy #main_contents .ranking_table tfoot td a{
	display:flex; align-items:center; justify-content:center; gap:6px;
	min-height:50px; padding:10px 18px; border-radius:999px;
	background:var(--brand); background-image:none; color:#fff;
	font-family:var(--jp); font-weight:700; font-size:14.5px; line-height:1.5;
	text-align:center; text-decoration:none;
}
#rd-legacy #main_contents .ranking_table tfoot td{ background:none; border:0; padding:14px 0 0; }
#rd-legacy #main_contents .ranking_table tfoot td.hide{ display:none; }

/* ランキングページの下にある 6 つのボタン。
   もとは文字を描いた画像で、スマホではほぼ読めなかった。
   画像は mod/parts/legacy_2026.php で文字に置き換えている。 */
#rd-legacy .ranking_buttons{
	display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px;
	margin:26px 0 0; text-align:left;
}
#rd-legacy .ranking_buttons > div{ display:block; width:auto; padding:0; }
#rd-legacy .ranking_buttons a{
	display:flex; align-items:center; justify-content:center; text-align:center;
	width:auto; min-height:54px; padding:8px 10px; border-radius:12px;
	background:var(--paper); border:1.5px solid var(--rule); color:var(--brand-deep);
	font-family:var(--jp); font-weight:700; font-size:13px; line-height:1.45;
	text-decoration:none;
}
#rd-legacy .ranking_buttons a:hover{ border-color:var(--brand); background:var(--sky); text-decoration:none; }

/* 順位の表 */
#rd-legacy #main_contents .ranking_table{
	width:100%; border-collapse:collapse; background:var(--paper);
	border:1px solid var(--rule); border-radius:14px; overflow:hidden; margin:0 0 8px;
}
#rd-legacy #main_contents .ranking_table caption{ display:none; }
#rd-legacy #main_contents .ranking_table th.rank{
	width:62px; padding:16px 6px; vertical-align:top; text-align:center;
	background:var(--sky); border:0; border-bottom:1px solid var(--rule);
}
#rd-legacy #main_contents .ranking_table th.rank .rank{ margin:0 0 2px; font-size:12px; color:var(--ink-soft); }
#rd-legacy #main_contents .ranking_table th.rank .rank .num{
	font-family:var(--en); font-size:24px; font-weight:700; line-height:1.1; color:var(--brand-deep);
}
#rd-legacy #main_contents .ranking_table th.rank .past_rank{
	font-size:10.5px; line-height:1.4; color:var(--ink-faint);
}
#rd-legacy #main_contents .ranking_table th.rank img{ max-width:34px; height:auto; }
#rd-legacy #main_contents .ranking_table td{
	border:0; border-bottom:1px solid var(--rule); padding:16px 14px; vertical-align:top;
}
#rd-legacy #main_contents .ranking_table tr:last-child td,
#rd-legacy #main_contents .ranking_table tr:last-child th{ border-bottom:0; }

/* 1件ぶんの中身：写真＋（学校名・読み・数値・ひとこと） */
#rd-legacy #main_contents .ranking_table td > .table.w100 > .pv10{ padding:0 0 0 12px; }
#rd-legacy #main_contents .ranking_table .font14 a,
#rd-legacy #main_contents .ranking_table .font12 a{
	font-family:var(--jp); font-weight:700; font-size:16px; line-height:1.55; color:var(--brand-deep);
}
#rd-legacy #main_contents .ranking_table .font11{
	font-size:12.5px; line-height:1.6; color:var(--ink-faint); margin:2px 0 8px;
}
#rd-legacy #main_contents .ranking_table .catch_copy{
	margin:8px 0 0; font-size:14.5px; line-height:1.75; color:var(--ink-soft);
}
#rd-legacy #main_contents .ranking_table .reviews_count .font24{ font-size:15px; }
#rd-legacy #main_contents .ranking_table .mb10{ margin-bottom:0; }

@media only screen and (max-width:959px){
	#rd-legacy .TOPtitle,
	#rd-legacy #main_contents .TOPtitle{ font-size:18px; margin:30px 0 14px; }
	#rd-legacy #main_contents .TOPtitle .titlepink{
		display:block; margin:4px 0 0; font-size:13px; line-height:1.65;
	}
	#rd-legacy #main_contents h2.page-title{ font-size:20px; }

	#rd-legacy .ranking_buttons{ grid-template-columns:repeat(2,minmax(0,1fr)); }

	#rd-legacy #main_contents .ranking_table th.rank{ width:48px; padding:14px 4px; }
	#rd-legacy #main_contents .ranking_table th.rank .rank .num{ font-size:20px; }
	#rd-legacy #main_contents .ranking_table td{ padding:14px 12px; }
	#rd-legacy #main_contents .ranking_table .thumbnail img{ width:84px; height:63px; }
	#rd-legacy #main_contents .ranking_table .side-thumbnail,
	#rd-legacy #main_contents .ranking_table td .table > .sp.rb{ width:84px; }
	#rd-legacy #main_contents .ranking_table .font14 a,
	#rd-legacy #main_contents .ranking_table .font12 a{ font-size:15px; }
	#rd-legacy #main_contents .ranking_table .catch_copy{ font-size:13.5px; }
}


/* ------------------------------------------------------------------
   ランキング部品の色は !important で押さえる  [2026-09-16]

   旧スマホ CSS は
     body.nation_home #main_contents #rankings_top_sp_wrap
       .ranking_table_sp_tabs a.slider_button.receptions
   のように、body のクラス＋id 2 つ＋クラス 3 つで書かれている。
   同じ土俵で重さを競うと選択子が読めなくなるので、
   ここだけは !important で止める。対象は色と背景だけ。

   タブの背景には文字入りの画像（ranking_top_sp_tab.png）が
   300% に引き伸ばして敷かれていて、これが文字と重なって見えていた。
   ------------------------------------------------------------------ */
#rd-legacy .ranking_table_sp_tabs a.slider_button{
	background:none !important; background-color:var(--paper) !important;
	color:var(--ink-soft) !important; border:1.5px solid var(--rule) !important;
	text-indent:0 !important; text-shadow:none !important;
}
#rd-legacy .ranking_table_sp_tabs a.slider_button.active{
	background-color:var(--brand) !important; border-color:var(--brand) !important;
	color:#fff !important;
}
#rd-legacy .ranking_table_sp_tabs{
	background:none !important; padding:0 !important; margin:0 0 12px !important;
}

/* 各ランキングの見出し（旧デザインはオレンジの帯） */
#rd-legacy #main_contents .ranking_table_top thead td{
	background:none !important; border:0 !important; padding:0 0 10px !important;
}
#rd-legacy #main_contents .ranking_table_top thead td.hide{ display:none !important; }
#rd-legacy #main_contents .ranking_table_top thead td a{
	display:block; padding:11px 16px; border-radius:12px 12px 0 0;
	background:var(--brand) !important; color:#fff !important; background-image:none !important;
	font-family:var(--jp); font-weight:700; font-size:15px; text-align:center; text-decoration:none;
}
#rd-legacy #main_contents .ranking_table_top thead td{ padding:0 !important; }

/* 「◯◯ ランキング をもっと詳しく見る」 */
#rd-legacy #main_contents .ranking_table tfoot td a{
	background:var(--brand) !important; background-image:none !important; color:#fff !important;
	border:0 !important;
}

/* スライダーの見出し */
#rd-legacy .ranking_table_caption{
	background:none !important; border:0; padding:0 0 10px; margin:0;
	font-family:var(--jp); font-weight:900; font-size:17px; line-height:1.6; color:var(--ink);
	text-align:left;
}

/* 1件ぶんの中身が縦に割れないように */
#rd-legacy #main_contents .ranking_table td .rb,
#rd-legacy #main_contents .ranking_table td .rps0{ min-width:0; }
#rd-legacy #main_contents .ranking_table td .font12 a,
#rd-legacy #main_contents .ranking_table td .font14 a{ display:inline-block; }


/* タブの文字。旧デザインは文字を背景画像で描いていたので、
   中の <span>（本物の文字）は display:none にされていた。出し直す。 */
#rd-legacy .ranking_table_sp_tabs a.slider_button > span{
	display:block !important; font-size:12.5px !important; color:inherit !important;
	line-height:1.35; text-indent:0;
}

/* 色は var() ではなく数値で書いている。
   旧 CSS と競るところは shorthand に var() を混ぜると効きが読みにくいため。 */
#rd-legacy #main_contents .ranking_table tfoot td a{
	background-color:#1583b8 !important; background-image:none !important;
	color:#fff !important;
}
#rd-legacy #main_contents .ranking_table_top thead td a{
	background-color:#1583b8 !important; background-image:none !important;
	color:#fff !important;
}
#rd-legacy #main_contents .ranking_table_sp,
#rd-legacy #main_contents .ranking_table_sp .ranking_table{ background:none !important; }

/* 学校名が 1 語ずつ縦に割れていた原因は、隣の写真が元のまま
   （180〜300px）で、名前の列に幅が残らなかったこと。
   表の組み方は旧のまま触らず、写真の大きさだけ決める。 */
#rd-legacy #main_contents .ranking_table .thumbnail img{
	display:block; width:92px; height:69px; object-fit:cover; border-radius:8px;
}
#rd-legacy #main_contents .ranking_table .side-thumbnail,
#rd-legacy #main_contents .ranking_table td .table > .sp.rb{ width:92px; }
#rd-legacy #main_contents .ranking_table td .table > *{ min-width:0; }
#rd-legacy #main_contents .ranking_table td .cell.ps10{ padding-left:12px; }


/* 見出しの帯。旧デザインは種類ごとに色の違う帯を敷いていた
   （クチコミ＝黄、ランキング＝橙…）。1つにそろえる。 */
#rd-legacy #main_contents .TOPtitle{
	background:none !important; background-image:none !important;
	border-top:0 !important; border-right:0 !important; border-bottom:0 !important;
	border-left:4px solid #1583b8 !important;
}
#rd-legacy #main_contents .TOPtitle .titlepink{ background:none !important; }


/* 旧デザインは「注目させたい場所」をクリーム色や黄色で塗っていた。
   2026 では薄い青の面（--sky）にそろえる。 */
#rd-legacy #main_contents .school-recent-reviews,
#rd-legacy #main_contents .school-recent-reviews .body,
#rd-legacy #main_contents #rankings_top_sp_wrap{
	background:none !important; border:0 !important; padding-left:0; padding-right:0;
}
#rd-legacy #main_contents .ranking_table tr.rank-1 > *,
#rd-legacy #main_contents .ranking_table tr.rank-2 > *,
#rd-legacy #main_contents .ranking_table tr.rank-3 > *{
	background-color:#f4fafd !important;
}
#rd-legacy #main_contents .ranking_table th.rank{ background-color:#eef7fc !important; }


/* 順位の数字。もとは金・銀・銅の帯の上に白抜きで置かれていた。
   帯をやめたので、文字色を戻す。 */
#rd-legacy #main_contents .ranking_table th.rank,
#rd-legacy #main_contents .ranking_table th.rank *{
	color:#0b5f8a !important; text-shadow:none !important;
}
#rd-legacy #main_contents .ranking_table th.rank .past_rank,
#rd-legacy #main_contents .ranking_table th.rank .past_rank *{ color:#86a0b0 !important; }

/* スライダーの中の面も白にそろえる */
#rd-legacy #main_contents .ranking_table_sp,
#rd-legacy #main_contents .ranking_table tfoot td,
#rd-legacy #main_contents .mod_js_slider_block,
#rd-legacy #main_contents .mod_js_slider_stage{ background:none !important; }

#rd-legacy #main_contents .nation-top-ranking table.ranking_body tr:nth-of-type(1) td{
	background-color:#f4fafd !important;
}