/*
 * サイト TOP の、幅 481〜1167px の見た目（2026-11-01）。協業タスク「タブレット幅のレイアウトを作る」。
 * 読み込みは front-page.php（media で幅を限っている）。幅 480px 以下と幅 1168px 以上には効かない。
 */

/* スマホの見た目（幅 481〜767px）。スマホの CSS は幅 300px の列で作られているので、入る時は 2 列に並べる */
@media (min-width: 632px) and (max-width: 767px) {
	main > :nth-child(n+1) { box-sizing: border-box; width: 624px; }
	/* 左右の高さが近くなる組み合わせで 2 列に置く。左右を float で別々に積むので、片方が高くても反対側の下が空かない（段組みや行のある grid だと空く） */
	main > article { display: block; }
	main > article::after { content: ""; display: block; clear: both; }
	main > article > section.world,
	main > article > section.mssg { float: left; clear: left; width: calc(50% - 12px); }
	main > article > section.mssg-top::after { content: ""; display: block; clear: both; }
	main > article > section.pickup,
	main > article > section.p1,
	main > article > section.intvw { float: right; clear: right; width: calc(50% - 12px); }
	body div.polybanana { clear: both; }
	/* 編集部イチオシは下に全幅で 2 列。右の列に積むと、左のメッセージの下が大きく空く */
	main > article > section.ichioshi { clear: both; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 12px; width: auto; }
	main > article > section.ichioshi > :not(a) { grid-column: 1 / -1; }
	main > article > section.ichioshi > a > section,
	main > article > section.ichioshi > a ~ a > section { margin-top: 0; height: 100%; box-sizing: border-box; }
	main > article > section { margin-bottom: 24px; }
	/* スライドの丸印は枠の下に絶対配置なので、その場所を取る */
	main > article > section.world { padding-bottom: 40px; }
	body div.polybanana { margin-bottom: 24px; }
	/* スマホの CSS は 1 列の並びを前提に、おすすめの英会話を絶対配置で「ピックアップ」の上の余白へ置いている。段組みでは流れの中に戻す */
	main > article > section.pickup,
	main > article > section.p1 { margin-top: 0; }
	main > article > section.mssg > p.temp-h3,
	main > article > section.mssg > a.oe,
	main > article > section.mssg > p.seemore { position: static; }
	main > article > section.mssg > a.oe > div { background-repeat: no-repeat; }
	main > aside { max-height: none; }
	main > aside > a:nth-of-type(2),
	main > aside > a:nth-of-type(3) { width: 300px; }
	main > aside > a:nth-of-type(n+4) { width: 144px; }
	main > div.pv { flex-direction: row; justify-content: space-between; }
	main > div.pv > section { width: 300px; margin-left: 0; }
	main > section.books > div { justify-content: center; gap: 24px; }
}
@media (max-width: 767px) {
	body div.polybanana { box-sizing: border-box; width: 100%; max-width: 100%; }
}

/* PC の見た目（幅 768〜1167px）。固定幅を幅に合わせて縮める */
@media (min-width: 768px) and (max-width: 1167px) {
	:root { width: auto; }
	.tonbo-guide { box-sizing: border-box; width: 100%; max-width: 1136px; }
	#scrollable-menu { overflow-x: auto; }
	#glolea-nav > div > div > ul { white-space: nowrap; }

	main > :nth-child(n) { box-sizing: border-box; width: calc(100% - 32px); max-width: 1136px; }
	main > aside > a:nth-of-type(1) { width: 100%; }

	/* 最初の 4 列と次の 3 列 */
	main > article { gap: 24px 16px; justify-content: space-between; }
	main > article > section.pickup { width: 160px; }
	main > article > section.world { flex: 1 1 0; width: auto; min-width: 0; }
	main > article > section.mssg-top { flex: none; width: 144px; }
	main > article > section.p1 { width: 280px; }
	/* 見出しは 1 行のまま（高さが固定なので、2 行になると下の写真に重なる） */
	main > article > section.p1 > h3 { font-size: 15px; white-space: nowrap; }
	/* 写真は枠の幅に合わせる。枠より小さいと右に白が出る */
	main > article > section.p1 > a > section { width: 100%; background-size: 100% auto; background-repeat: no-repeat; }
	/* 写真は PC と同じ縦横比（336×208）。国旗は写真のすぐ下に置く。写真の高さは枠の幅で変わるので cqw で合わせる */
	main > article > section.p1 > a { display: block; container-type: inline-size; }
	main > article > section.p1 > a[hidden] { display: none; }
	main > article > section.p1 > a > section { background-size: 100% 61.9cqw; }
	main > article > section.p1 > a > section > div { padding-top: calc(61.9% + 8px); background-position: right 0 top 61.9cqw; }
	main > article > section.mssg-low { flex: 320 1 0; width: auto; min-width: 0; }
	main > article > section.intvw { flex: 432 1 0; width: auto; min-width: 0; }
	main > article > section.ichioshi { flex: 336 1 0; width: auto; min-width: 0; }

	/* 下の段のメッセージ。1 人目（a の 3 番目。前に Mama が 2 つある）は大きく、ほかは 2 列のまま。写真は PC と同じ縦横比で幅に合わせる（高さ固定で幅だけ広げると、顔が切れた横長になる） */
	main > article > section.mssg-low { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-content: start; }
	main > article > section.mssg-low > * { grid-column: 1 / -1; }
	main > article > section.mssg-low > a:nth-of-type(n+4):not(.oe):not([rel=nofollow]) { grid-column: auto; }
	main > article > section.mssg-low > a:nth-of-type(3) { margin-bottom: 16px; }
	main > article > section.mssg-low > a:nth-of-type(n+3):not(.oe) > section { float: none; width: auto; height: 100%; margin: 0; padding-bottom: 8px; }
	main > article > section.mssg-low > a:nth-of-type(n+3):not(.oe) > section > div { width: auto; height: auto; aspect-ratio: 152 / 121; background-size: cover; background-repeat: no-repeat; background-position: center; }
	main > article > section.mssg-low > a:nth-of-type(3):not(.oe) > section > div { aspect-ratio: 320 / 219; }
	/* 説明は 2 行まで。p の下に余白があると 3 行目がそこに見えるので、余白は枠（上の section）に持たせる */
	main > article > section.mssg-low > a:nth-of-type(n+3):not(.oe) > section > p { max-height: 2.8em; padding-bottom: 0; }
	main > article > section.mssg > p.temp-h3 { float: none; margin: 8px 0 0; }
	main > article > section.mssg > a.oe > div { background-repeat: no-repeat; background-position: center top; }

	/* インタビュー。写真は枠の幅に合わせ、文字はその下から始める（PC は 432×186） */
	main > article > section.intvw > a > section { height: auto; background-size: 100% auto; background-repeat: no-repeat; }
	main > article > section.intvw > a > section > div { margin-top: 43%; padding-bottom: 8px; }

	/* 1 段を占める。これが無いと、次の段の 3 列が右の余りに入る */
	body div.polybanana { box-sizing: border-box; flex: 0 0 100%; width: 100%; max-width: none; }
	body div.polybanana > ul > li > div { width: calc(100% - 264px); }
	body div.polybanana > ul > li > div > a > div.img { width: 100%; }
	body div.polybanana > ul > li > a { margin-left: calc(100% - 264px); }

	/* 特集の段 */
	main > aside > a:nth-of-type(2) { flex: 736 1 0; width: auto; min-width: 0; }
	main > aside > a:nth-of-type(3) { flex: 368 1 0; width: auto; min-width: 0; }
	main > aside > a:nth-of-type(n+4) { width: calc(25% - 12px); }

	/* レシピと人気記事 */
	main > div.pv { gap: 16px; }
	main > div.pv > section.cook { flex: 752 1 0; width: auto; min-width: 0; }
	main > div.pv > section.rnkn { flex: 368 1 0; width: auto; min-width: 0; }
	main > div.pv > section.cook > div { gap: 16px; }
	main > div.pv > section.cook > div > a { flex: 1 1 0; min-width: 0; }
	main > div.pv > section.cook > div > a > section { width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; }

	main > div.sns > div:nth-of-type(1) { flex: 736 1 0; width: auto; min-width: 0; }
	main > div.sns > div:nth-of-type(2) { flex: 336 1 0; width: auto; min-width: 0; }
	main img { max-width: 100%; height: auto; }
	main > section.books > div { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 8px; }
	main > section.books > div > a,
	main > section.books > div > a > section { width: auto; min-width: 0; }
	/* 絵本の表紙は PC と同じ縦横比で幅に合わせる */
	main > section.books > div > a > section > div { height: auto; aspect-ratio: 176 / 112; }
}

/* 幅が足りない時は、1 段目と 2 段目を 2 列に並べる */
@media (min-width: 768px) and (max-width: 1023px) {
	/* 2 列に置き、行ごとに左右の高さを揃える（段組みや float だと片側の下が空く） */
	main > article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-items: stretch; }
	main > article > section.world,
	main > article > section.pickup,
	main > article > section.p1,
	main > article > section.mssg,
	main > article > section.intvw { width: auto; min-width: 0; }
	main > article > section.world { grid-column: 1; grid-row: 1; }
	main > article > section.pickup { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; }
	main > article > section.pickup > a { flex: 1 1 auto; display: block; }
	main > article > section.pickup > a ~ a { margin-top: 16px; }
	main > article > section.pickup > a > section { height: 100%; box-sizing: border-box; }
	main > article > section.mssg-top { grid-column: 1; grid-row: 2; }
	main > article > section.p1 { grid-column: 2; grid-row: 2; }
	body div.polybanana { grid-column: 1 / -1; grid-row: 3; }
	main > article > section.mssg-low { grid-column: 1; grid-row: 4; }
	main > article > section.intvw { grid-column: 2; grid-row: 4; }
	/* 編集部イチオシは下に全幅で 2 列。右の列に積むと、左のメッセージの下が大きく空く */
	main > article > section.ichioshi { grid-column: 1 / -1; grid-row: 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; width: auto; }
	main > article > section.ichioshi > :not(a) { grid-column: 1 / -1; }
	/* 高さは PC の CSS の 144px のまま。PC は地名と説明を絶対配置で枠の下に置くので、height: 100% にすると枠が縮んで店名に重なる */
	main > article > section.ichioshi > a > section,
	main > article > section.ichioshi > a ~ a > section { margin-top: 0; }
	main > article > section { flex: none; margin-bottom: 24px; }
	main > article > section.world,
	main > article > section.pickup,
	main > article > section.p1,
	main > article > section.intvw { display: block; }
	body div.polybanana { flex: none; margin: 0 auto 24px; }
	/* ピックアップは、写真を引き伸ばさず、左に写真・右に文字で並べる。写真ごとの位置の指定（dr の style）より強くする */
	main > article > section.pickup > a > section { min-height: 107px; padding-left: 168px; background-size: 158px 105px !important; background-position: left center !important; background-repeat: no-repeat; }
	/* 写真は上下を切らず 3:2 で出す（dr の style の画像は PC の枠に合わせて切ってある） */
	main > article > section.pickup > a > section.dr1 { background-image: url(//res.cloudinary.com/glolea/image/upload/f_auto,c_fill,w_316,h_210/common/pickup/learn-916677_640_tmasfo.jpg) !important; }
	main > article > section.pickup > a > section.dr2 { background-image: url(//res.cloudinary.com/glolea/image/upload/f_auto,c_fill,w_316,h_210/common/pickup/phonics_sj8jdn.jpg) !important; }
	main > article > section.pickup > a > section.dr3 { background-image: url(//res.cloudinary.com/glolea/image/upload/f_auto,c_fill,w_316,h_210/common/pickup/6b31952b573e900e84e9f3afe1a20436_m_nzedye.jpg) !important; }
	main > article > section.pickup > a > section > h4 { position: static; width: auto; max-height: none; background-color: transparent; }
	/* メッセージの 2 人は横に並べ、右の親子留学と同じくらいの高さにする。写真は正方形（顔が切れない） */
	main > article > section.mssg-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-content: start; }
	main > article > section.mssg-top > h3,
	main > article > section.mssg-top > p.seemore { grid-column: 1 / -1; }
	main > article > section.mssg-top > a:nth-of-type(n) > section { height: 100%; margin-top: 0; }
	main > article > section.mssg-top > a:nth-of-type(n) > section > div { aspect-ratio: 1; background-position: center 20%; }
	main > article > section.mssg-top > a > section > h4 { font-size: 14px; }
	main > article > section.mssg-top > a > section > p { font-size: 13px; -webkit-line-clamp: 4; }
	/* インタビューは写真を少し大きくして、左のメッセージとの高さの差を小さくする */
	main > article > section.intvw > a { display: block; container-type: inline-size; }
	main > article > section.intvw > a[hidden] { display: none; }
	main > article > section.intvw > a > section { background-size: auto 60cqw; background-position: center top; }
	main > article > section.intvw > a > section > div { margin-top: 60cqw; }
	main > section.books > div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	main > aside > a:nth-of-type(n+4) { width: calc(50% - 8px); }
	main > div.pv { flex-wrap: wrap; }
	main > div.pv > section.cook,
	main > div.pv > section.rnkn { flex: none; width: 100%; margin-left: 0; }
}