@charset "UTF-8";

/* -------------------------------------------------------------------
headで読み込むフォント
----------------------------------------------------------------------
	<link href="https://fonts.googleapis.com/css2?family=Caveat:wght@700&family=Playfair+Display:wght@700;900&family=Shippori+Mincho:wght@500;700;800&family=Noto+Sans+JP:wght@400;700;900&display=swap" rel="stylesheet">
*/
		/* ========================================
		   Magazine Cover (パターンA: MORE風)
		======================================== */
		:root {
			--mag-bg-color: #92b1c4; /* 雑誌のベースとなる水色 */
			--mag-text-white: #ffffff;
			--mag-text-pink: #e45b7b;
		}

		/* カバー全体のコンテナ */
		.mag-cover-wrapper {
			position: relative;
			width: 100%;
			height: 100vh; /* 画面いっぱいの高さ */
			max-height: 900px; min-height: 600px;
			background-color: var(--mag-bg-color);
			overflow: hidden;
			color: var(--mag-text-white);
			display: flex;
			justify-content: center;
			margin:0;
		}

		/* 中央の安全領域（PC横長画面でもコンテンツが散らばらないようにする枠） */
		.mag-safe-area {
			position: relative;
			width: 100%;
			max-width: 1000px; /* PC版での最大幅 */
			height: 100%;
		}

		/* 【レイヤー1】最背面の巨大タイトル */
		.mag-bg-title {
			position: absolute;
			top: 2%;
			left: 50%;
			transform: translateX(-50%);
			font-family: 'Playfair Display', serif;
			font-size: clamp(10rem, 30vw, 22rem); /* 画面幅に合わせて伸縮 */
			font-weight: 900;
			line-height: 0.8;
			letter-spacing: -0.02em;
			color: rgba(255, 255, 255, 0.95);
			z-index: 1;
			white-space: nowrap;
			pointer-events: none;
		}

		/* 【レイヤー2】人物画像 */
		.mag-hero-image {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			height: 85%; /* 文字の下から配置 */
			z-index: 2;
			pointer-events: none;
		}

		.mag-hero-image img {
			width: 100%;
			height: 100%;
			object-fit: contain; /* 見切れないように配置 */
			object-position: bottom center; /* ★画像を常に下端の中央に固定する設定 */
		}

		/* 【レイヤー3】前面のテキストコンテンツ群 */
		.mag-front-content {
			position: absolute;
			inset: 0;
			z-index: 3;
			pointer-events: none; /* テキストはクリックさせない */
		}

		/* テキストにドロップシャドウをかけて、どんな画像でも読めるようにする */
		.mag-text-shadow {
			text-shadow: 0 3px 10px rgba(0,0,0,0.3);
		}

		/* --- 左上の情報 (年月やカバーモデル) --- */
		.mag-top-left {
			position: absolute;
			top: 4%;
			left: 5%;
			color: var(--mag-text-pink);
			text-align: center;
			font-family: 'Noto Sans JP', sans-serif;
		}
		.mag-tl-shop { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; }
		.mag-tl-month { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900; line-height: 1; margin: -5px 0; }
		.mag-tl-cover { font-size: 0.7rem; font-weight: 700; margin-top: 5px; color: var(--mag-text-white); }
		.mag-tl-name { font-size: 0.9rem; font-weight: 700; color: var(--mag-text-pink); letter-spacing: 0.1em; }

		/* --- 右上の情報 (特集など) --- */
		.mag-top-right {
			position: absolute;
			top: 25%;
			right: 5%;
			text-align: center;
		}
		.mag-tr-main { font-family: 'Playfair Display', serif; font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900; color: var(--mag-text-pink); line-height: 1; }
		.mag-tr-sub { font-size: 0.75rem; font-weight: 700; background: rgba(255,255,255,0.2); padding: 5px 10px; margin-top: 5px; display: inline-block; color: var(--mag-text-pink); }

		/* --- 左側のコラム (連載やピックアップ) --- */
		.mag-left-col {
			position: absolute;
			top: 30%;
			left: 5%;
			font-size: clamp(0.75rem, 1.5vw, 0.9rem);
			line-height: 1.8;
			font-weight: 700;
		}
		.mag-left-col p { margin-bottom: 1.2rem; }
		.mag-left-col span.badge { border: 1px solid #fff; padding: 1px 6px; font-size: 0.65rem; margin-right: 5px; }
		.mag-left-col strong { font-size: 1.1em; }
		.mag-eng-font { font-family: 'Playfair Display', serif; letter-spacing: 0.05em; }

		/* --- メインキャッチコピー (中央) --- */
		.mag-center-catch {
			position: absolute;
			top: 62%; /* ★ 55%から62%へ下げました */
			left: 50%;
			transform: translate(-50%, -50%);
			width: 90%;
			text-align: center;
		}
		.mag-catch-sub {
			font-size: clamp(1rem, 3vw, 1.5rem);
			font-weight: 700;
			margin-bottom: 0.5rem;
		}
		.mag-catch-main {
			font-family: 'Shippori Mincho', serif; /* 美しい明朝体 */
			font-size: clamp(2.2rem, 7vw, 4.5rem);
			font-weight: 800;
			line-height: 1.3;
			letter-spacing: 0.05em;
		}
		/* 筆記体の装飾 */
		.mag-catch-script {
			font-family: 'Caveat', cursive;
			font-size: clamp(1.5rem, 5vw, 3rem); /* ★ 半分程度に縮小しました */
			color: var(--mag-text-pink);
			text-align: right; /* ★ 右寄せ */
			padding-right: 10%; /* ★ 右側に配置 */
			transform: rotate(-5deg) translateY(10px); /* ★ 位置を下へ調整 */
			/* 筆記体に白いフチをつけて目立たせる */
			text-shadow:
				2px 2px 0 #fff, -2px -2px 0 #fff,
				2px -2px 0 #fff, -2px 2px 0 #fff,
				0px 4px 15px rgba(0,0,0,0.2);
		}

		/* --- 丸いバッジ (左下) --- */
		.mag-round-badge {
			position: absolute;
			bottom: 5%; /* ★ 15% から 5% へ下げました */
			left: 3%;  /* ★ 8% から 3% へ左に寄せました */
			width: clamp(90px, 20vw, 130px);
			height: clamp(90px, 20vw, 130px);
			background: #fff;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			color: #6a95a8;
			box-shadow: 0 5px 15px rgba(0,0,0,0.15);
			transform: rotate(-10deg);
		}
		.mag-rb-eng { font-size: clamp(0.5rem, 1vw, 0.65rem); font-weight: 700; margin-bottom: 5px; }
		.mag-rb-ja { font-size: clamp(0.75rem, 1.5vw, 0.95rem); font-weight: 900; line-height: 1.3; color: var(--mag-text-pink); }

		/* --- フッターテキスト (最下部) --- */
		.mag-bottom-text {
			position: absolute;
			bottom: 2%;
			width: 100%;
			text-align: center;
			font-size: clamp(0.6rem, 1.2vw, 0.75rem);
			font-weight: 500;
			letter-spacing: 0.1em;
			opacity: 0.9;
		}

		/* ========================================
		   スマホ用微調整 (画面幅が狭い場合)
		======================================== */
		@media (max-width: 768px) {
			.mag-top-left { top: 2%; left: 3%; }
			.mag-top-right { top: 15%; right: 3%; }

			/* ★スマホでは位置を調整し、.hidden-sp 以外の文字を残す */
			.mag-left-col { top: 25%; left: 3%; }

			.mag-center-catch { top: 60%; width: 95%; }
			.mag-catch-script { padding-right: 5%; }
			.mag-round-badge { bottom: 3%; left: 1%; }
			.mag-bottom-text { display: none; /* スマホでは1行テキストを隠す */ }

			/* ★スマホ非表示用ユーティリティクラス */
			.hidden-sp { display: none !important; }

			/* 【レイヤー2】人物画像 */
			.mag-hero-image {
				width: 120%;
				height: 110%; /* 文字の下から配置 */
			}

		}