/*
 * サイト TOP のデザインの見直し（2026-11-02）。協業タスク「サイト TOP のデザインの見直し（デザイナー目線の指摘 13 点）」の 1・2・3・4・5・6・7・8・10・11・13。
 * 読み込みは front-page.php。幅ごとの CSS（top-tablet.css・top-sp-fluid.css）の後なので、同じ強さならこちらが勝つ。
 * 文の「…」は front-page.php の末尾の JS（行数は幅で変わるので、画面で測って -webkit-line-clamp を付ける）。ここは写真の上の見出しだけ。
 */

/* 1. 写真の上の見出し（親子留学・プリスクールおすすめ）。明るい写真でも読めるよう下を暗くし、文字は左下に 2 行まで。
   余白は padding でなく margin（line-clamp は padding の所に 3 行目を描くので、3 行目の頭が見える） */
main > aside > a > section { align-items: flex-end; justify-content: flex-start; text-align: left; }
main > aside > a > section::before { background: linear-gradient(to top, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .38) 42%, rgba(0, 0, 0, 0) 72%); }
main > aside > a > section > h3,
main > aside > a:not(:nth-of-type(1)) > section > h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: none; overflow: hidden; margin: 12px 16px; padding: 0; line-height: 1.45; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
main > aside > a:nth-of-type(1) > section > h3 { margin: 24px; padding: 0; font-size: 20px; } /* PC の CSS の padding: 48px（:nth-of-type(1) の分だけ強い）を消す */
main > aside > a:nth-of-type(n+2):nth-of-type(-n+3) > section > h3 { font-size: 17px; }
main > aside > a:nth-of-type(n+4) > section > h3 { margin: 10px 12px; font-size: 14px; }
@media only screen and (min-width: 768px) {
	main > aside > a:nth-of-type(1) > section > h3 { margin: 32px max(16px, calc((100% - 1136px) / 2)); font-size: 24px; } /* 横いっぱいの写真。文字の左端は本文にそろえる */
	main > aside > a:nth-of-type(n+2):nth-of-type(-n+3) > section > h3 { margin: 16px 20px; font-size: 19px; }
	main > aside > a:nth-of-type(n+4) > section > h3 { font-size: 15px; }
}

/* 3. ピンク地の白い文字。色は変えず（ブランドの色）、太くして読みやすくする */
#glolea-nav > div > div > ul > li > a,
main > article > section.ichioshi > a > section > div > ul > li,
main > article > section.p1 > a > section > div > ul > li,
main > article > section.mssg > a.oe > div > div > dl > dt { font-weight: 700; }
/* 「短期・長期」の薄いピンクは、他のタグと同じピンクにそろえる */
main > article > section.p1 > a > section > div > ul > li { background-color: rgba(234, 105, 134, .9); }

/* 8. SNS。Twitter は X に、Instagram は家の形のアイコン（スプライトに無い）を替える */
main > div.sns > div:nth-of-type(2) > ul > li > a[href^="https://x.com"]::before { background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M17.75 3h3.07l-6.7 7.66L22 21h-6.17l-4.83-6.32L5.47 21H2.4l7.17-8.19L2 3h6.33l4.37 5.77L17.75 3Zm-1.08 16.18h1.7L7.4 4.73H5.58l11.09 14.45Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; }
main > div.sns > div:nth-of-type(2) > ul > li > a[href*="instagram.com"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.3' cy='6.7' r='.6' fill='%23fff' stroke='none'/%3E%3C/svg%3E"), linear-gradient(45deg, #f9a53c, #e1306c 50%, #833ab4); background-size: 18px 18px, 100% 100%; background-position: center; background-repeat: no-repeat; }

/* 13. 細かい揃い。イチオシの地域タグの 1 つ目を説明文の左端にそろえる */
main > article > section.ichioshi > a > section > div > ul > li:first-child,
main > article > section.p1 > a > section > div > ul > li:first-child { margin-left: 0; }
/* おすすめ英会話の「受講料・年齢・特典」を 1 行ずつ、項目名の幅をそろえて並べる */
main > article > section.mssg > a.oe > div > div > dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 8px; align-items: baseline; margin: 4px 0 6px; }
main > article > section.mssg > a.oe > div > div > dl > dt { margin: 0; text-align: center; }
main > article > section.mssg > a.oe > div > div > dl > dd { margin: 0; }

/* 10. ヘッダー。幅 1167px 以下では画面の端にくっつくので、本文と同じ 16px の余白を付ける（PC の CSS の幅 1136px は margin: auto だけ） */
@media only screen and (min-width: 768px) and (max-width: 1167px) {
	.tonbo-guide { box-sizing: border-box; width: 100%; padding-left: 16px; padding-right: 16px; }
	#nav-ad { padding-left: 16px; padding-right: 16px; }
}
/* メニューは 8 項目で幅 990px あり、幅 1023px 以下では右端の項目が切れて見えていた（横にはずらせる）。続きがあることを右端のぼかしで示す */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	#glolea-nav > div > div > ul { margin-right: 24px; } /* 端までずらした時、最後の項目がぼかしに掛からないように */
	#glolea-nav::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; background: linear-gradient(to right, rgba(229, 68, 104, 0), #e54468); pointer-events: none; }
}

/* 5. セクションの間の余白。前のセクションの最後（「〜一覧」など）から次の見出しまでを、スマホは約 44px、幅 632px 以上は約 48px にそろえる。
   各行の数字は、今の余白からの差で決めた（2026-11-02 に幅 390・700・900・1300px で測定） */
/* おすすめ英会話の見出し。高さ 32px 固定で、幅 632〜767px では 2 行になり、2 行目が写真の裏に入っていた。
   アイコンは縦に並んだ画像の一部なので、枠を高くすると下の別のアイコンが見える。文字を少し小さくして 1 行に収める */
@media only screen and (min-width: 632px) and (max-width: 767px) {
	main > article > section.mssg > p.temp-h3 { white-space: nowrap; font-size: 14px; letter-spacing: 0; }
}
@media only screen and (max-width: 631px) {
	main > div.pv > section.rnkn { margin-bottom: 20px; } /* 人気記事ランキング → 世界の食卓 */
}
@media only screen and (min-width: 632px) {
	main > article > section.mssg > p.temp-h3 { margin-top: 44px; }
	main > div.pv { margin-bottom: 24px; } /* 世界の食卓・ランキング → 絵本 */
}
@media only screen and (min-width: 632px) and (max-width: 767px) {
	main > article > section.mssg-top { margin-top: 36px; } /* スライダー → メッセージ */
	main > article > div.polybanana { margin-bottom: 48px; } /* CloseUp → Mama・インタビュー */
	main > article > section.mssg-low { margin-bottom: 44px; } /* おすすめ英会話 → 編集部イチオシ */
}
@media only screen and (min-width: 768px) {
	main > article > section.mssg-low > h3.mssg-rest { margin-top: 44px; } /* Mama の「もっと見る」→ メッセージ */
}
@media only screen and (min-width: 768px) and (max-width: 1167px) {
	main > article > div.polybanana { margin-bottom: 24px; } /* 下に 2 段組みの行の間 24px が足される */
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	main > div.pv > section.rnkn { margin-top: 28px; } /* 世界の食卓 → ランキング（縦に並ぶ幅） */
}
@media only screen and (min-width: 1168px) {
	main > article > div.polybanana { margin-bottom: 48px; }
}

/* 4. 書体。見出しと記事の名前（h2〜h4・セクションの見出し）は今の明朝のまま、説明・タグ・一覧のリンクなど小さい文字はゴシックにして読みやすくする（2026-11-03、案 A。TOP だけ。ヘッダーとフッターは他のページと同じ明朝のまま） */
main { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", YuGothic, Meiryo, sans-serif; }
main h2, main h3, main h4, main p.temp-h3, main > div.sns > div > p { font-family: Times, serif; } /* body と同じ（日本語は明朝で出る） */

/* 6. CloseUp。PC の CSS は幅 970px で、下の 3 列（1136px）より狭かった。本文の幅にそろえ、右のリンクの列も広げて長い題名が切れないようにする（2026-11-03、案 A） */
@media only screen and (min-width: 1168px) {
	main > article > div.polybanana { box-sizing: border-box; width: 1136px; height: 284px; }
	main > article > div.polybanana > ul > li > div > a > div.img { width: 100%; height: 284px; background-position: center 45% !important; } /* 元の位置（style）は高さ 240px 用 */
	main > article > div.polybanana > ul > li > div > a > div.text { top: 40px; }
}
@media only screen and (min-width: 1024px) {
	main > article > div.polybanana > ul > li > div { width: calc(100% - 360px); }
	main > article > div.polybanana > ul > li > a { margin-left: calc(100% - 360px); padding-left: 20px; padding-right: 12px; }
}

/* 7. おすすめ英会話（幅 768px 以上）。左の列の下に縦長で入っていたのを、3 列（タブレット幅は 2 列とイチオシ）の下に横長で置く（2026-11-03、案 A）。
   場所は HTML のまま（スマホ・タブレットの並びはこの位置が前提）、article の下に余白を空けて絶対配置で置く。高さは固定なので、下の数字は合わせて変える。
   写真は高さ --oe-h（PC 240px、タブレット幅 180px）で縦横比のまま全部出す（写真ごとに比が違うので、HTML の --oe-ar で受け取る）。上下が切れていた元の位置（style）は使わない */
@media only screen and (min-width: 768px) {
	main > article { --oe-h: 240px; position: relative; padding-bottom: calc(var(--oe-h) + 126px); } /* 列の下の余白（40）の後に、48（前の行との間）+ 見出し 32 + 12 + カード（--oe-h + 2）+ 32（一覧へのリンク）を足し、下の余白 40 は最後に回す */
	main > article > section.mssg-low > p.temp-h3,
	main > article > section.mssg-low > a.oe,
	main > article > section.mssg-low > p.seemore:last-child { position: absolute; left: 0; right: 0; width: auto; margin: 0; }
	main > article > section.mssg-low > p.temp-h3 { bottom: calc(var(--oe-h) + 86px); }
	main > article > section.mssg-low > a.oe { bottom: 72px; }
	main > article > section.mssg-low > a.oe:not([hidden]) { display: block; }
	main > article > section.mssg-low > p.seemore:last-child { bottom: 40px; text-align: right; }
	main > article > section.mssg-low > a.oe > div { display: flex; box-sizing: content-box; width: auto; height: var(--oe-h); border: 1px solid #d7d7d7; background-color: #fff; background-size: auto 100% !important; background-position: left center !important; background-repeat: no-repeat; }
	main > article > section.mssg-low > a.oe > div > div { position: static; display: flex; flex-direction: column; justify-content: safe center; flex: 1 1 0; min-width: 0; box-sizing: border-box; height: 100%; margin-left: calc(var(--oe-h) * var(--oe-ar, 1.6)); padding: 20px 32px; border: 0; border-left: 1px solid #d7d7d7; background: #fff; overflow: hidden; }
	main > article > section.mssg-low > a.oe > div > div > * { flex: none; } /* 縮めると、説明が入るのに 1 行で「…」になる */
	main > article > section.mssg-low > a.oe > div > div > h4 { margin: 0 0 8px; font-size: 20px; }
	main > article > section.mssg-low > a.oe > div > div > dl { margin: 0 0 8px; font-size: 13px; }
	main > article > section.mssg-low > a.oe > div > div > p { max-height: none; margin: 0; font-size: 14px; line-height: 1.8; } /* PC の CSS の 3em（縦長の時の 2 行）を外す。入らない分は JS が「…」にする */
}

/* 11. 見出しのアイコン。色も形もばらばらだった絵（縦に並んだ画像 category-sprite の一部）を、ブランドのピンクの四角に白い線の絵にそろえる（2026-11-03、案 A）。
 見出しはどれも高さ 32px で、左の 32px にアイコン、文字は text-indent: 40px（スマホ・PC の CSS のまま） */
main > article > section.ticket.pickup > h3,
main > article > section.world > h3,
main > article > section.mssg.mssg-top > h3,
main > article > section.mssg.mssg-low > h3.mssg-rest,
main > article > section.ticket.p1 > h3,
main > article > section.mssg.mssg-low > h3.mama-h3,
main > article > section.ticket.intvw > h3,
main > article > section.ticket.ichioshi > h3,
main > article > section.mssg.mssg-low > p.temp-h3,
main > div.pv > section.cook > h2,
main > section.books > h2 { background-position: 0 0; background-size: 32px 32px; background-repeat: no-repeat; }
main > article > section.ticket.pickup > h3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e54468'/%3E%3Cg transform='translate(5 5) scale(.917)' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v16l-5-3.5L7 20z'/%3E%3C/g%3E%3C/svg%3E"); } /* しおり */
main > article > section.world > h3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e54468'/%3E%3Cg transform='translate(5 5) scale(.917)' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7.6'/%3E%3Cellipse cx='11' cy='11' rx='3.2' ry='7.6'/%3E%3Cpath d='M3.4 11h15.2'/%3E%3Cpath d='M17.6 21.2s-4.6-2.9-4.6-6a2.4 2.4 0 0 1 4.6-1 2.4 2.4 0 0 1 4.6 1c0 3.1-4.6 6-4.6 6z' fill='%23fff' stroke='%23e54468' stroke-width='1.4'/%3E%3C/g%3E%3C/svg%3E"); } /* 地球とハート（世界の子育て。2026-11-03 に地球だけの絵から替えた） */
main > article > section.mssg.mssg-top > h3, main > article > section.mssg.mssg-low > h3.mssg-rest { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e54468'/%3E%3Cg transform='translate(5 5) scale(.917)' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6h14v9H10l-4 3v-3H5z'/%3E%3Cpath d='M9 10.5h6'/%3E%3C/g%3E%3C/svg%3E"); } /* 吹き出し */
main > article > section.ticket.p1 > h3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e54468'/%3E%3Cg transform='translate(5 5) scale(.917)' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 13.5l17-7-4.5 13-3.5-5.5z'/%3E%3Cpath d='M12.5 14l8-7.5'/%3E%3C/g%3E%3C/svg%3E"); } /* 紙飛行機 */
main > article > section.mssg.mssg-low > h3.mama-h3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e54468'/%3E%3Cg transform='translate(5 5) scale(.917)' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19s-7-4.4-7-9.2A3.8 3.8 0 0 1 12 8a3.8 3.8 0 0 1 7 1.8C19 14.6 12 19 12 19z'/%3E%3C/g%3E%3C/svg%3E"); } /* ハート */
main > article > section.ticket.intvw > h3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e54468'/%3E%3Cg transform='translate(5 5) scale(.917)' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9.5' y='4' width='5' height='10' rx='2.5'/%3E%3Cpath d='M6.5 11.5a5.5 5.5 0 0 0 11 0M12 17v3M9 20h6'/%3E%3C/g%3E%3C/svg%3E"); } /* マイク */
main > article > section.ticket.ichioshi > h3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e54468'/%3E%3Cg transform='translate(5 5) scale(.917)' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10l8-5 8 5'/%3E%3Cpath d='M6 9.5V19h12V9.5M10 19v-4h4v4'/%3E%3C/g%3E%3C/svg%3E"); } /* 園舎 */
main > article > section.mssg.mssg-low > p.temp-h3 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e54468'/%3E%3Cg transform='translate(5 5) scale(.917)' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='6' width='14' height='9' rx='1'/%3E%3Cpath d='M3 18h18'/%3E%3Cpath d='M10 10.5l1.5 1.5 3-3'/%3E%3C/g%3E%3C/svg%3E"); } /* ノートパソコン */
main > div.pv > section.cook > h2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e54468'/%3E%3Cg transform='translate(5 5) scale(.917)' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13h16a8 8 0 0 1-16 0z'/%3E%3Cpath d='M9 9c0-1.5 1-1.5 1-3M13 9c0-1.5 1-1.5 1-3'/%3E%3C/g%3E%3C/svg%3E"); } /* 湯気の立つ器 */
main > section.books > h2 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23e54468'/%3E%3Cg transform='translate(5 5) scale(.917)' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-2-1.5-5-1.8-8-1.2V18c3-.6 6-.3 8 1.2 2-1.5 5-1.8 8-1.2V5.8c-3-.6-6-.3-8 1.2z'/%3E%3Cpath d='M12 7v12'/%3E%3C/g%3E%3C/svg%3E"); } /* 開いた本 */

/* スライダーの左右の矢印。FlexSlider の CSS が z-index: 10 を付けていて、スクロールするとヘッダー（8）とキーワードの帯（5）の上に出ていた。
   重なりをスライダーの中で閉じ、ヘッダーの下を通るようにする（2026-11-03） */
main .flexslider { isolation: isolate; }

/* カードにマウスを載せた時の下線。PC の CSS の a:hover { text-decoration: underline } で、カードの中の文字（説明・タグ・料金など）が全部下線になっていた。
   下線はタイトル（カードの中の h3・h4）だけにする（2026-11-03）。特集（aside）は元から下線なし。:has が使えないブラウザでは今までどおり全部に付く */
main > :not(aside) a:hover:has(h3, h4) { text-decoration: none; }
main > :not(aside) a:hover:has(h3, h4) :is(h3, h4) { text-decoration: underline; }
/* CloseUp の写真の上の箱は「CloseUp!」と題名の 2 行。下線は題名だけ */
main > article > div.polybanana > ul > li > div > a:hover { text-decoration: none; }
main > article > div.polybanana > ul > li > div > a:hover > div.text > p:last-child { text-decoration: underline; }

/* 幅 768〜1023px（2 列・3 列）の手直し（2026-11-03、ユーザーの指摘）。 */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	/* 絵本。PC の CSS はカードの高さが 200px 固定で、写真は幅に合わせて大きくなるので、幅 930px くらいからタイトルが下で切れ、説明はどの幅でも見えなかった。高さは中身に合わせ、同じ段でそろえる */
	main > section.books > div > a > section { height: 100%; padding-bottom: 8px; }
	/* おすすめ英会話（上の 7）。写真の高さを抑え、文字を少し小さくする */
	main > article { --oe-h: 180px; }
	main > article > section.mssg-low > a.oe > div > div { padding: 12px 20px; }
	main > article > section.mssg-low > a.oe > div > div > h4 { margin-bottom: 4px; font-size: 17px; }
	main > article > section.mssg-low > a.oe > div > div > dl { gap: 2px 8px; margin-bottom: 4px; }
	main > article > section.mssg-low > a.oe > div > div > p { font-size: 13px; line-height: 1.6; }
}
/* CAMBLY の写真は縦横とも 8 割に切ってあり、全体を出すと右端の文字が欠ける。横長に置く幅（768px 以上）は元の画像にする */
@media only screen and (min-width: 768px) {
	main > article > section.mssg-low > a.oe[href$="/cambly-kids.html"] > div { background-image: url("//res.cloudinary.com/glolea/image/upload/f_auto/cl/oe/cambly-kids/cambly-kids-online-english03_ouf8ke.jpg") !important; } /* HTML の画像は縦横とも 8 割に切ってあり、全体を出すと右端の文字が欠ける。元の画像にする */
}

/* スライダーの写真。front-page.php が style に --bg（記事の写真）と --bg-sp（スマホ用の 768px 版。無ければ同じ写真）を書く（2026-11-03） */
main > article > section.world li > a > section { background-image: var(--bg); }
@media only screen and (max-width: 767px) { main > article > section.world li > a > section { background-image: var(--bg-sp, var(--bg)); } }