/*
 * サイト TOP のメッセージと Mama（2026-11-02）。協業タスク「サイト TOP の再構成」。
 * メッセージの 2 人を Mama の場所（section.mssg-top）へ上げ、Mama は元のメッセージの場所（section.mssg-low）へ移して写真を小さく出す。
 * 読み込みは front-page.php。Cloudinary の home-sp・home-pc の後、幅ごとの top-tablet.css・top-sp-fluid.css の前。
 */

/* Mama。幅 96px の写真の右に名前を置く（元画像が幅 250px なので、これより大きく出さない） */
main > article > section.mssg-low > h3.mama-h3 { background-position: 0 0; clear: both; }
main > article > section.mssg-low > a.mama-a { display: block; clear: both; margin-bottom: 12px; }
main > article > section.mssg-low > a.mama-a > section { position: static; float: none; display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 96px; margin: 0; padding: 0 0 0 108px; background-size: 96px 96px; background-position: left center; background-repeat: no-repeat; overflow: visible; }
main > article > section.mssg-low > a.mama-a > section::after { display: none; }
main > article > section.mssg-low > a.mama-a > section > h4 { margin: 0; padding: 0; max-height: none; font-weight: 400; font-size: 14px; line-height: 1.5; }
main > article > section.mssg-low > p.mama-more { clear: both; }
main > article > section.mssg-low > h3.mssg-rest { clear: both; }

@media only screen and (max-width: 767px) {
	main > article > section.mssg-low > h3.mama-h3::before { content: "Glolea!"; margin-right: .25em; }
	main > article > section.mssg-low > h3.mama-h3::after { content: "Style"; margin-left: .25em; }
	/* スマホのメッセージは今も 2 人だけ（Cloudinary の CSS が 3 人目から隠す） */
	main > article > section.mssg-low > h3.mssg-rest { display: none; }
}

/* PC。幅 144px の枠に 2 人。Cloudinary の CSS は 1 人目を大きくするので、:nth-of-type(n) でそれより強くする */
@media only screen and (min-width: 768px) {
	main > article > section.mssg-top { width: 144px; }
	main > article > section.mssg-top > a:nth-of-type(n) > section { float: none; width: 100%; height: auto; margin: 0; padding-bottom: 4px; }
	main > article > section.mssg-top > a:nth-of-type(n) > section > div { height: auto; aspect-ratio: 144 / 100; background-position: center 25%; }
	main > article > section.mssg-top > a > section > h4 { padding: 6px 6px 0; max-height: none; font-size: 12px; }
	main > article > section.mssg-top > a > section > p { display: -webkit-box; padding: 2px 6px 0; max-height: none; overflow: hidden; font-size: 12px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	main > article > section.mssg-top > a:nth-of-type(2) > section { margin-top: 12px; }
	main > article > section.mssg-top > p.seemore { clear: both; }

	/* 下の段のメッセージ。1 人目を大きく（a の 3 番目。前に Mama が 2 つある） */
	main > article > section.mssg-low > a:nth-of-type(3) > section { width: 100%; height: 300px; }
	main > article > section.mssg-low > a:nth-of-type(3) > section > div { height: 219px; }
}