/*
 * 記事・固定ページ・タグの、幅 768〜1135px の見た目（2026-11-01）。協業タスク「タブレット幅のレイアウトを作る」。
 * PC の見た目のまま、固定幅を幅に合わせて縮める。右の列（300px）は残す。読み込みは v6.php（media で幅を限っている）。
 */

/* PC の CSS はページ全体の最小幅を 1168px にしている */
html, body { min-width: 0; }

/* 上のメニューと本文の枠 */
.tonbo-guide { box-sizing: border-box; width: 100%; max-width: 1136px; }
/* メニューは 1 段のまま横に動かす（2 段にすると、固定した時に 2 段目が下の段に隠れる） */
#scrollable-menu { overflow-x: auto; }
#glolea-nav > div > div > ul { white-space: nowrap; }
body > main { box-sizing: border-box; width: calc(100% - 32px); max-width: 1000px; }

/* 本文と右の列 */
/* 幅は計算で決める。flex と max-width で決めると、AdSense が広告を 680px で作り、右の列の下に入り込む */
#content { flex: none; width: calc(100% - 316px); max-width: none; overflow-wrap: break-word; }
#side-bar { flex: 0 0 300px; width: 300px; margin-left: 16px; }
#content img { max-width: 100%; height: auto; }
#content iframe,
#content .wp-caption,
#review-area { box-sizing: border-box; max-width: 100%; }
#content .v1-card > div.v1card-detail { box-sizing: border-box; width: auto; }

/* SNS のボタン。文字の途中で折り返さない */
#content div.sns-enchantment > ul > li > a { display: inline-block; white-space: nowrap; }

/* 絵本のページの見出し。写真（340px）の右に残りの幅で並べる */
.v1-book .titleArea { width: calc(100% - 340px); }
.v1-book #detail { width: calc(100% - 340px); }
.v1-book #detail .authorDetail { float: none; width: auto; margin-left: 70px; }

@media (max-width: 1023px) {
	/* SNS のボタン。1 列に入らないので、スマホと同じようにアイコンだけにする */
	#content div.sns-enchantment > ul > li > a { padding: 6px 14px 8px; }
	#content div.sns-enchantment > ul > li > a > span { display: none; }

	/* 表が本文の幅より広い時は、表だけ横に動かす */
	#content table { display: block; overflow-x: auto; max-width: 100%; }

	/* インタビューの見出し。本文の列が狭いので、写真の下に説明を出す */
	.single-interview header.v2-Comment { display: block; }
	.single-interview header.v2-Comment:before { position: static; display: block; }
	.single-interview header.v2-Comment > div:first-of-type { width: auto; border-right: 0; }
	.single-interview header.v2-Comment > div:nth-of-type(2) { padding: 0.25em 1em 1em; }

	/* 絵本のページの見出し。写真の下に説明を出す */
	.v1-book .titleArea { position: static; width: auto; height: auto; }
	.v1-book #photo,
	.v1-book #detail { float: none; width: auto; }
}

/* 一覧の下の特集バナー。CSS を head で読むので、後から読み込まれる polybanana に負けないよう body を付ける */
body div.polybanana { box-sizing: border-box; width: 100%; max-width: 970px; }
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); }