/*
 * サイト TOP の、幅 631px 以下の見た目（2026-11-01）。協業タスク「サイト TOP のスマホ幅: 本文 300px 固定をやめて画面をたっぷり使う」案 A。
 * スマホの CSS（Cloudinary の home-sp210630）は本文を幅 300px に固定し、高さも手で決めている。ここで画面の幅に合わせる。
 * 読み込みは front-page.php（media で幅を限っている）。幅 632px 以上は top-tablet.css の 2 列。
 */

main > :nth-child(n+1) { width: calc(100% - 32px); max-width: 568px; }
main > article > div.polybanana { width: 100%; }

/* 並び順は今と同じ。スマホの CSS は、おすすめの英会話（section.mssg の中）を絶対配置で「ピックアップ」の上の余白へ置いていた（Mama の次）。
   高さが幅で変わると位置がずれるので、section.mssg をほどいて article の並びに入れる */
main > article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
main > article > * { grid-column: 1 / -1; min-width: 0; }
main > article > section.pickup { margin-top: 0; }
main > article > section.mssg { display: contents; }
main > article > section.mssg > * { grid-column: 1 / -1; order: 7; }
/* メッセージの 2 人は、おすすめの英会話の前（元の Mama の場所）。Mama は編集部イチオシの次 */
main > article > section.mssg-top > * { order: 4; }
main > article > section.mssg > p.temp-h3,
main > article > section.mssg > a.oe,
main > article > section.mssg > p.seemore { position: static; width: auto; order: 4; }
main > article > section.mssg > p.seemore { margin-bottom: 40px; }
main > article > section.mssg-low > p.mama-more { order: 7; }
/* 写真の下に文字を置く。スマホの CSS は高さ 256px の枠に写真を繰り返し、文字を下に重ねていたので、広げると両脇に写真の続きが出る */
main > article > section.mssg > a.oe > div { box-sizing: border-box; height: auto; padding-top: 38%; background-size: 100% auto; background-repeat: no-repeat; }
main > article > section.mssg > a.oe > div > div { position: static; }

/* スライダー。高さ固定をやめて今の縦横比（300×240）のまま広げる */
main > article > section.world > div ul > li > a > section { height: auto; aspect-ratio: 5 / 4; }
main > article > section.world > div ul > li > a > section > div { width: calc(100% - 61px); }

/* メッセージは 2 列のまま、写真を今の縦横比（144×121）で広げる。説明は 4 行まで。下の余白を p に持たせると、5 行目がそこに見える */
main > article > section.mssg-top > a { grid-column: auto; }
main > article > section.mssg-top > a > section,
main > article > section.mssg-top > a ~ a > section { float: none; width: 100%; height: 100%; margin-left: 0; padding-bottom: 8px; }
main > article > section.mssg-top > a > section > div { height: auto; aspect-ratio: 144 / 121; background-position: center 20%; }
main > article > section.mssg-top > a > section > p { max-height: 5.6em; padding-bottom: 0; overflow: hidden; }

/* 特集。写真は今の縦横比で広げる */
main > aside { max-height: none; }
main > aside > a:nth-of-type(n+2):nth-of-type(-n+3) > section { height: auto; aspect-ratio: 15 / 8; }
main > aside > a:nth-of-type(n+4) { width: calc(50% - 6px); }
main > aside > a:nth-of-type(n+4) > section { height: auto; aspect-ratio: 1; }

/* 絵本。枠の高さは文字に合わせ、2 冊で揃える */
main > section.books > div > a { display: flex; width: calc(50% - 6px); }
main > section.books > div > a > section { width: 100%; height: auto; padding-bottom: 8px; }
main > section.books > div > a > section > div { height: auto; aspect-ratio: 144 / 100; }