/* =====================================================================
 * swell_child/model-profile.css
 * ---------------------------------------------------------------------
 * モデル個別ページ専用のスタイル。
 *
 * このファイルは functions.php の hanaya_conditional_css_map() により、
 * is_singular('model') のときだけ読み込まれる。
 * そのため .single-model という限定は本来不要だが、SWELL側の要素
 * （#top_title_area など）を対象にする指定では、意図を明示する意味で
 * 残している。
 *
 * ---------------------------------------------------------------------
 * 整理した点（旧版からの修正）
 *  1. .model-header / .model-name-jp / .model-name-en の指定が
 *     2箇所に重複していたため、詳細度の高い方に統合した。
 *     旧版の前半（.model-name-jp 単体）は .post_content h2 に負けて
 *     効いていなかった。
 *  2. margin-top: 1m → 1em に修正。
 *     「1m」は存在しない単位で、宣言ごと無視されていたため、
 *     本文上部の余白を縮める指定が効いていなかった。
 *  3. .model-single-photo を追加（写真1枚のときの中央寄せ）。
 *  4. 関連記事エリアの非表示を追加。
 *  5. インデントをタブに統一。
 * ================================================================== */


/* =====================================================================
 * 1. SWELLの要素を隠す・詰める
 * ================================================================== */

/* トップタイトルエリアを非表示にする */
.single-model #top_title_area {
	display: none !important;
}

/* ピックアップバナーを非表示にする */
.single-model #pickup_banner {
	display: none !important;
}

/* パンくずリスト直下の余白を縮小（初期値はPCで4em、SPで2em） */
.single-model .l-content {
	padding-top: 1em !important;
}

/* 本文エリア上部の余白を縮小（初期値は4em）
   ※ 旧版は「1m」という無効な単位で、宣言ごと無視されていた */
.single-model .l-mainContent__inner > .post_content {
	margin-top: 1em !important;
}

/* 関連記事エリアを隠す
 *
 * SWELLの実際のマークアップは以下のとおり。
 *   article.l-mainContent__inner
 *     └ div.l-articleBottom
 *         └ section.l-articleBottom__section.-related   ← これを隠す
 *             └ h2.l-articleBottom__title.c-secTitle    （「関連記事」）
 *
 * -related は「セクション自身」に付いているので複合セレクタで指定する。
 * :has(.-related) は「-related を子孫に持つ要素」を探すセレクタなので
 * マッチしない。ここを間違えると見出しだけが残る。
 *
 * 関連記事のリンク自体は functions.php 側でクエリを空振りさせて0件に
 * してあるため、ここで隠すのは残る見出しとセクションの余白だけ。 */
.l-articleBottom__section.-related {
	display: none;
}


/* =====================================================================
 * 2. プロフィール全体の囲み
 * ================================================================== */
.model-profile-container {
	max-width: 800px;
	margin: 0 auto;
}


/* =====================================================================
 * 3. モデル名・読み
 * ---------------------------------------------------------------------
 * 表示順は「モデル名 → 読み → スライダー」。
 *
 * ★ セレクタの詳細度に注意
 *   SWELLは .post_content h2 { margin: 4em 0 2em } を指定している。
 *   詳細度は (0,1,1) なので、.model-name-jp 単体（0,1,0）では負ける。
 *   .model-header .model-name-jp（0,2,0）で上回らせている。
 *   !important は使わない。この先の微調整が効かなくなるため。
 * ================================================================== */
.model-header {
	text-align: center;
	margin-bottom: 1em;          /* 読みとスライダーの間の余白 */
}

/* h2 のため .post_content h2 を上回る詳細度が必要 */
.model-header .model-name-jp {
	font-size: 2em;
	letter-spacing: 0.1em;
	line-height: 1.3;
	margin: 0 0 0.1em;           /* 上の4emと下の2emを打ち消す */
}

/* p のためテーマ側の余白も打ち消しておく */
.model-header .model-name-en {
	font-size: 0.9em;
	/* #888 は白背景でコントラスト比 3.54:1 となり WCAG AA（4.5:1）に届かない。
	   #666 なら 5.74:1 で適合する。 */
	color: #666;
	letter-spacing: 0.15em;
	line-height: 1.4;
	margin: 0;
}


/* =====================================================================
 * 4. 写真（カルーセル／1枚表示）
 * ================================================================== */

.model-slider-wrap {
	margin-bottom: 3em;
	overflow: hidden;            /* 横揺れ防止 */
}

/* --- 複数枚：Swiperのカルーセル --- */
.my-model-slider {
	width: 100%;
	padding-bottom: 40px;        /* ページネーション（ドット）の余白 */
}
/* 写真の見た目はカルーセルでも1枚表示でも同じ。
   枚数によって質感が変わらないよう、1箇所にまとめている。
   （1枚のときの中央寄せなど、配置に関する指定は .model-single-photo 側） */
.my-model-slider .swiper-slide img,
.model-single-photo img {
	display: block;              /* inline由来の下部の隙間を消す */
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 4;         /* 【調整】写真を縦長の比率に統一 */
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 矢印とドットの色 */
.my-model-slider .swiper-button-next,
.my-model-slider .swiper-button-prev {
	color: #333;
}
.my-model-slider .swiper-pagination-bullet-active {
	background: #333;
}

/* PC表示時：左右の画像を少し透過させて中央を目立たせる */
@media screen and (min-width: 768px) {
	/* 中央の1枚を目立たせ、左右をちらりと見せる演出 */
	.my-model-slider .swiper-slide {
		opacity: 0.4;
		transition: opacity 0.3s ease;
	}
	.my-model-slider .swiper-slide-active {
		opacity: 1;
	}
}

/* --- 1枚のみ：カルーセルにしない場合 ---
 *
 * photo_1〜photo_5 のうち1枚だけのモデルでは、functions.php の
 * output_model_carousel_slider() が <div class="model-single-photo"> を
 * 出力する。複数枚のときは幅も配置もSwiperが制御するが、1枚のときは
 * 指定が無いと画像が左寄せになるため、ここで中央寄せにしている。
 *
 * 角丸・影・比率はカルーセル側と揃えて、枚数によって質感が
 * 変わらないようにしている。 */
.model-single-photo {
	margin: 0 auto;
	max-width: 480px;            /* 【調整】1枚表示時の最大幅 */
	text-align: center;
}



/* =====================================================================
 * 5. SNSリンク欄
 * ================================================================== */
.model-sns-wrap {
	margin-bottom: 2em;          /* スライダー下の余白 */
}
.model-sns-list {
	display: flex;
	justify-content: center;
	/* SPでも横1列を保つ。
	   wrap にすると5件のとき「4件＋1件」で折り返して見栄えが崩れるため、
	   折り返しを許すのではなく gap を詰めて収める。 */
	flex-wrap: nowrap;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.model-sns-item {
	text-align: center;
}
.model-sns-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: var(--color_deep01);  /* SWELL設定の「濃い色1」 */
	transition: opacity 0.3s;
}
.model-sns-link:hover {
	opacity: 0.7;
}
.model-sns-link:focus-visible {
	outline: 2px solid var(--color_deep01);
	outline-offset: 2px;
}
.model-sns-icon {
	font-size: 24px;
	margin-bottom: 4px;
}
.model-sns-name {
	/* 10px は小さすぎて読みづらいため 12px に引き上げた。
	   横1列を保つぶんは上の gap を詰めて吸収している。 */
	font-size: 12px;
	line-height: 1.2;
	/* break-all はアカウント名を任意の位置で割ってしまう。
	   単語の途中で折るのは、収まらないときだけにする。 */
	overflow-wrap: anywhere;
}


/* =====================================================================
 * 6. プロフィールテーブル
 * ================================================================== */
.model-info-table table {
	width: 100%;
	border-collapse: collapse;
	/* セクション間の余白は、後続セクションの margin-top で作る。
	   ここでは表そのものの下余白だけを持たせる */
	margin-bottom: 0;
}
.model-info-table th {
	width: 35%;
	text-align: left;
	background-color: #f9f9f9;
	padding: 15px;
	border-bottom: 1px solid #ddd;
	font-weight: normal;
}
.model-info-table td {
	padding: 15px;
	border-bottom: 1px solid #ddd;
}


/* =====================================================================
 * 7. インタビューセクション
 * ================================================================== */
/* インタビューセクション
   ★ 上余白は見出し（h3）ではなく、このセクション自身に持たせる。
     見出しに margin-top を書いても効かない。SWELLに
       .post_content div > :first-child { margin-top: 0 }
     という指定があり、div の最初の子である h3 は打ち消されるため。
     出演動画（.model-yt）が自身に margin を持つのと同じ考え方。 */
.model-interview-section {
	margin-top: 3em;   /* 【調整】直前のセクションとの間隔。他セクションと揃える */
}

/* セクション見出し（出演動画・インタビュー）
 *
 * ★ .model-profile-container を前置している理由
 *   どちらも h3 なので、SWELLの .post_content h3（詳細度 0,1,1）に
 *   margin を上書きされる。クラス1つ（0,1,0）では足りないため、
 *   親を足して (0,2,0) にしている。 */
.model-profile-container .model-yt__title,
.model-profile-container .interview-title {
	/* 統合前はインタビュー側だけ 1.5em だったが、
	   2つの見出しで差を付ける理由が無いので 1em に揃えた。 */
	margin: 0 0 1em;
	font-size: 1.5em;
	letter-spacing: 0.1em;
	text-align: center;
}

.qa-item {
	margin-bottom: 2em;
	padding: 1.5em;
	background-color: #fcfcfc;
	border-radius: 8px;
}
.qa-q {
	color: #333;
	margin-bottom: 0.5em !important;
}
.qa-a {
	color: #555;
	line-height: 1.8;
	margin-bottom: 0 !important;
}


/* =====================================================================
 * 8. アニメーション控えめ設定への配慮
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
	.my-model-slider .swiper-slide,
	.model-sns-link {
		transition: none;
	}
}

/* =====================================================================
 * 9. 出演動画カルーセル（[model_youtube]）
 * ---------------------------------------------------------------------
 * ACFの youtube_videos に動画IDが入力されているモデルにだけ出力される。
 * 動画が無ければショートコードが何も返さないので、この指定も働かない。
 * ================================================================== */
.model-yt {
	/* 【調整】直前のセクションとの間隔。
	   スライダー→SNS欄（3em）と揃えている */
	margin: 3em auto 3em;
}



.model-yt__viewport {
	overflow: hidden;
}

/* 横スクロールの本体。スクロールバーは隠すが操作は可能 */
.model-yt__list {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0 0 8px;
	list-style: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.model-yt__list::-webkit-scrollbar {
	display: none;
}

.model-yt__item {
	flex: 0 0 240px;      /* 【調整】カード1枚の幅 */
	scroll-snap-align: start;
}
.model-yt__item a {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* サムネイル。16:9に統一する。
   YouTubeの mqdefault(320×180) は元から16:9なので歪まない。
   hqdefault(480×360) は4:3で上下に帯が入るため使っていない。 */
.model-yt__thumb {
	display: block;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: #eee;
	aspect-ratio: 16 / 9;
}
/* ★ position と z-index を明示している理由
 *   hover で transform: scale() が付くと、画像は新しい重ね合わせ
 *   コンテキストを作る。z-index を持たない ::before（黒い丸）は
 *   その下に潜り込み、ホバーした瞬間にアイコンが消えてしまう。
 *   画像を最背面（1）、丸を2、三角を3と明示して固定する。 */
.model-yt__thumb img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s;
}
.model-yt__item a:hover .model-yt__thumb img {
	transform: scale(1.05);
}

/* 再生アイコン。画像を足さずCSSだけで描く。
 *
 * ★ 黒い丸の上に白い三角を重ねる2層構造にしている理由
 *   以前は三角形だけを置き、filter: drop-shadow() で輪郭を付けていた。
 *   border で描いた三角形には box-shadow が効かない（要素の外枠である
 *   矩形に影が付いてしまう）ため、drop-shadow しか選択肢がなかった。
 *   ただし drop-shadow はペイント負荷が高い。
 *
 *   半透明の丸を敷けば、影に頼らず明るいサムネイルでも三角が見える。
 *   YouTube本体のUIとも見た目が揃う。
 *
 *   ::before = 黒い丸 / ::after = 白い三角
 */
.model-yt__thumb::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 44px;              /* 【調整】丸の大きさ */
	height: 44px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .6);
	pointer-events: none;
	transition: background-color .3s;
}
.model-yt__thumb::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	/* 三角形は見た目の重心が右に寄るので、少し左へずらして中央に見せる */
	transform: translate(calc(-50% + 2px), -50%);
	z-index: 3;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent #fff;
	pointer-events: none;
}
.model-yt__item a:hover .model-yt__thumb::before {
	background: rgba(204, 0, 0, .85);   /* ホバーでYouTubeの赤に */
}

.model-yt__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	min-height: 3em;      /* 2行分を確保して、行数の差で高さがずれるのを防ぐ */
	color: #555;
	transition: color .2s;
}
.model-yt__item a:hover .model-yt__name {
	color: #c00;
}

/* --- 前へ／次へ --- */
.model-yt__nav {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 14px;
}
.model-yt__btn {
	width: 40px;
	height: 40px;
	padding: 0;
	border: solid 1px #ddd;
	border-radius: 50%;
	background: #fff;
	color: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, opacity .2s;
}
.model-yt__btn:hover:not(:disabled) {
	background: #f6f6f6;
}
.model-yt__btn:disabled {
	opacity: .3;
	cursor: default;
}
.model-yt__btn:focus-visible {
	outline: 3px solid var(--color_deep01);
	outline-offset: 2px;
}

/* 動画が少なくスクロールの必要が無いときはナビを隠す（JSが付与） */
.model-yt.is-noScroll .model-yt__nav {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.model-yt__list {
		scroll-behavior: auto;
	}
	.model-yt__thumb img,
	.model-yt__thumb::before,
	.model-yt__name,
	.model-yt__btn {
		transition: none;
	}
	.model-yt__item a:hover .model-yt__thumb img {
		transform: none;
	}
}