@charset "UTF-8";

/* ====================================================
   プロフィール 共通スタイル
   ==================================================== */

/* ====================================================
   プロフィール 共通
   ==================================================== */
.prof-body { padding-top: 0; }

/* ====================================================
   プロフィールA 専用（写真センター・グレーボックスオーバーラップ）
   ==================================================== */
.prof-img {
	display: flex; margin: 0 auto;
	width: 350px; height: 350px; object-fit: cover; }
.top-section-body-wrap.prof01 {
	margin-top: -160px; padding-top: 180px;
	padding-left: 4em; padding-right: 4em; padding-bottom: 3em;
	background: var(--color-bg-subtle); border: none; }

.top-section-body-wrap.prof01 .prof-name {
	font-size: 3em; font-weight: 900 !important; color: var(--color-text);
	text-align: center !important; line-height: 1.4em; margin-top: 0em; margin-bottom: 0em; }
.top-section-body-wrap.prof01 .prof-name-kana {
	font-size: 1em; font-weight: 700 !important; color: var(--color-text);
	letter-spacing: .2em; text-align: center; margin-bottom: 1em; }

@media (max-width: 768px) {
	.prof-img { width: 200px; height: 200px; }
	.top-section-body-wrap.prof01 {
		margin-top: -100px; padding-top: 100px;
		padding-left: 1.5em; padding-right: 1.5em; padding-bottom: 2em; }
	.top-section-body-wrap.prof01 .prof-name { font-size: 2.2em; margin-top: 10px; }
	/* B では media-container の margin-bottom: 10px が同位置の余白を作るため、A も合わせる */
	.module--profile-a .prof-content-main { margin-bottom: 10px; }
}

/* ====================================================
   プロフィールB 専用（グレーボックス内・キャッチ＋画像左テキスト右）
   ==================================================== */
.top-section-body-wrap.prof02 {
	padding: 3em 4em;
	background: var(--color-bg-subtle); border: none; }

.top-section-body-wrap.prof02 .prof-intoro {
	font-weight: 500; border-bottom: 3px solid var(--color-primary);
	padding-bottom: .5em; margin-bottom: 2em; text-align: justify; }
.top-section-body-wrap.prof02 .prof-name {
  font-size: 3em;
  font-weight: 900;
  line-height: 1.4em;
  margin-top: 0em;
  margin-bottom: 0em;
}
.top-section-body-wrap.prof02 .prof-name-kana {
	font-size: 1em; font-weight: 700; letter-spacing: .2em; text-align: left; margin-bottom: 1em; }

@media (max-width: 768px) {
	.top-section-body-wrap.prof02 { padding: 1em 1em 1.5em; }
	.top-section-body-wrap.prof02 .prof-name { font-size: 2.2em; text-align: center; margin-top: 10px; }
	.top-section-body-wrap.prof02 .prof-name-kana { text-align: center; }
}

/* ====================================================
   media-container 共通（A・Bどちらでも使用）
   ==================================================== */

.media-container { display: flex; gap: 20px; margin-bottom: 10px; align-items: flex-start; }
.image-area { flex-shrink: 0; }
.image-area img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; border: 1px solid var(--color-border-image); }
.text-area { flex: 1; }

@media (max-width: 768px) {
	.media-container { flex-direction: column; }
}

/* ====================================================
   プロフィールリスト（共通）
   ==================================================== */

.profile-list { margin-top: 2em; margin-bottom: 1em; }
.profile-item { display: grid; grid-template-columns: 8em 1fr; gap: 20px; margin-bottom: .25em; }
.profile-title { font-weight: 700; }
@media (max-width: 768px) {
	.profile-list { margin-top: 0; margin-bottom: 2em; }
	.profile-item { grid-template-columns: 1fr; gap: 0; margin-bottom: .5em; }
	.profile-title { font-size: 1em; }
	.profile-text { font-size: 1em; }
}

/* ---- 経歴のアコーディオン -------------------- */

.accordion__list_prof .qah2-2 {
	font-size: 1.2em; font-weight: 700; text-align: left; padding-left: .3em; padding-right: 2em;
	/* !important: 親テーマ/WP 既定の h2 margin-top を打ち消すため */
	margin-top: 0em !important; margin-bottom: .75em; color: var(--color-primary); }
.accordion__list_prof .accordion__head { border-top: 2px solid var(--color-primary); }
.accordion__list_prof .accordion__head::after {
	font-family: "FontAwesome"; content: "\f107" / ""; position: absolute; top: 17px; right: 10px; font-size: 1.4em !important;
	color: var(--color-primary); display: inline-block; transform-origin: center; transition: transform 0.5s ease; }
.accordion__list_prof .accordion__item.active .accordion__head::after {
	transform: rotate(180deg); right: 10px; font-size: 1.4em; }
.accordion__list_prof .accordion__item-last { border-bottom: 2px solid var(--color-primary) !important; }
.accordion__list_prof .accordion__body p { font-size: 1em; margin-top: 0; }
.accordion__list_prof .accordion__item.active .accordion__body { padding-left: .5em; }
.accordion__list_prof .accordion__body ul { margin-top: 0; padding-left: 0; padding-right: 0; }
.accordion__list_prof .accordion__body ul li { margin-top: 0; margin-left: 0; }
.accordion__list_prof .accordion__body .card-container { display: flex; flex-wrap: wrap; justify-content: left;
	padding-left: 0px; margin-bottom: 0px; }
.accordion__list_prof .accordion__body .card-container .card-img { width: 30%; }
.accordion__list_prof .accordion__body .card-container .card-text { width: 67%; margin-left: 1em; text-align: justify; }
.accordion__list_prof .accordion__body .card-container .card-img img { width: 100%; height: auto !important;
	aspect-ratio: 1/1; }

@media (max-width: 768px) {
	.accordion__list_prof { margin-top: 1em; margin-bottom: 2em; padding-top: 0; }
	.accordion__list_prof .qah2-2 { font-size: 1em; font-weight: 700; color: var(--color-primary);
		/* !important: 親テーマ/WP 既定の h2 margin-top を打ち消すため（SP） */
		text-align: left; padding-left: .3em; padding-right: 2em; margin-top: 0em !important; margin-bottom: .6em; }
	.accordion__list_prof .accordion__head::after { position: absolute; font-family: "FontAwesome"; content: "\f107" / "";
		top: 11px; right: 10px; font-size: 1em !important; color: var(--color-primary); }
	.accordion__list_prof .accordion__item.active .accordion__head::after {
		top: 11px; right: 10px; font-size: 1em !important; color: var(--color-primary); }
	.accordion__list_prof .accordion__body { margin-bottom: 0 !important; }
	.accordion__list_prof .accordion__body .card-container { display: block; }
	.accordion__list_prof .accordion__body .card-container .card-img { width: 100%; }
	.accordion__list_prof .accordion__body .card-container .card-img img { margin-bottom: 1em; }
	.accordion__list_prof .accordion__body .card-container .card-text { width: 100%; margin-left: 0; text-align: justify; }
}

.profile-history-caption {
	margin-top: 10px !important; margin-bottom: 10px !important; font-size: .9em !important; line-height: 1.4em;
	width: 100%; word-break: break-all; overflow-wrap: break-word; white-space: normal;
}

/* ====================================================
   ミニギャラリー（共通）
   ==================================================== */

.close-button { -webkit-tap-highlight-color: transparent; }

.photo-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 1.2%; row-gap: 0.3%;
	list-style: none; padding-left: 0;
	margin-top: 60px; margin-bottom: 0;
}

/* IMG を display: block にして wrapper 下の 8px line-height 余白を消した分を
   padding-bottom で補い、行間を従来通り確保する */
.photo-card-container { padding-bottom: 9px; }

.photo-card-container img {
	width: 100%;
	object-fit: cover; aspect-ratio: 1/1; cursor: pointer;
	display: block; transition: transform 0.4s ease;
}

/* 枠内ズーム：.image-wrapper を IMG サイズちょうどでクリップ */
.image-wrapper { position: relative; overflow: hidden; border: 1px solid var(--color-border-image); }
@media (hover: hover) {
	.photo-card-container:hover img { transform: scale(1.04); }
}

.mushimegane {
	position: absolute; bottom: 0; right: 0;
	background: var(--color-primary); width: 30px; height: 30px;
	display: flex; justify-content: center; align-items: center; cursor: pointer;
}

.fa-solid.fa-magnifying-glass {
	font-size: .9em; color: var(--color-white); background: var(--color-primary); padding: 3px;
}

@media (max-width: 768px) {
	/* row-gap の % は親の高さ基準、column-gap の % は親の幅基準で挙動が違う。
	   親の .prof-module に container-type を付けて cqw（コンテナ幅 1%）を有効化し、
	   row-gap を column-gap と同じ視覚値（コンテナ幅基準）で表現する */
	.module-mini-gallery { container-type: inline-size; }
	.photo-container { margin-top: 30px; column-gap: 3%; row-gap: 3cqw; grid-template-columns: repeat(2, 1fr); }
	.photo-card-container { padding-bottom: 0; }
}

/* ---- ライトボックス -------------------- */

.lightbox {
	position: fixed; top: 0; left: 0; width: 100dvw; height: 100dvh;
	background: var(--color-overlay);
	display: flex; justify-content: center; align-items: center;
	z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}

.lightbox.active { opacity: 1; pointer-events: auto; }

.lightbox-content { position: relative; display: block; max-width: 90%; z-index: 10000; }

.polaroid-frame {
	background: var(--color-white); padding: 10px;
	box-shadow: var(--shadow);
	display: flex; flex-direction: column; align-items: center;
	width: fit-content; margin: 0 auto;
	transform: scale(0.85); transition: transform 0.4s ease, opacity 0.3s ease-in-out;
}

.lightbox.active .polaroid-frame { transform: scale(1.0); }

#lightbox-image {
	display: block; width: auto; max-width: 100%; max-height: 75vh; height: auto;
}
.lightbox .polaroid-frame.lb-out-next,
.lightbox .polaroid-frame.lb-out-prev { opacity: 0; transition: opacity 0.3s ease-in-out; }
.lightbox .polaroid-frame.lb-in-next,
.lightbox .polaroid-frame.lb-in-prev  { opacity: 0; transition: none; }

.lightbox-caption {
	margin-top: 10px; margin-bottom: 0; font-size: .9em; line-height: 1.4em;
	width: 100%; word-break: break-all; overflow-wrap: break-word; white-space: normal;
}

.close-button {
	display: none; position: absolute;
	top: calc(100% + 10px); left: calc(50% - 20px);
	font-size: 32px; color: var(--color-white); background: var(--color-primary);
	width: 40px; height: 40px; line-height: 36px;
	text-align: center; cursor: pointer; user-select: none; padding: 0;
}
@media (max-width: 768px) {
	.close-button { left: 45%; }
}

.lightbox.active .close-button { display: block; }

/* Prev/Next はビューポート基準（fixed）で固定配置し、ライトボックスの寸法・
   アスペクト比に関わらず常に画面の両端近くに置く。 */
.lightbox-nav {
	position: fixed; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px;
	background: var(--color-primary); color: var(--color-white);
	border: 0; padding: 0; cursor: pointer; user-select: none;
	z-index: 10001;
}
.lightbox-nav::before {
	content: "" / "";
	position: absolute; top: 50%; left: 50%;
	width: 10px; height: 10px;
	border-top: 2px solid var(--color-white);
	border-right: 2px solid var(--color-white);
}
.lightbox-nav--next::before { transform: translate(-65%, -50%) rotate(45deg); }
.lightbox-nav--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.lightbox-nav.is-hidden { display: none; }
.lightbox-nav:hover { background: var(--color-accent); }
.lightbox-nav:hover::before {
	border-top-color: var(--color-primary);
	border-right-color: var(--color-primary);
}
.lightbox-nav--prev { left: 20px; }
.lightbox-nav--next { right: 20px; }
@media (max-width: 768px) {
	.lightbox-content { max-width: calc(100% - 90px); }
	.lightbox-nav { width: 36px; height: 36px; }
	.lightbox-nav::before { width: 8px; height: 8px; }
	.lightbox-nav--prev { left: 8px; }
	.lightbox-nav--next { right: 8px; }
}

/* ====================================================
   プロフィール経歴：タイムライン型（parts/profile-history-timeline.php）
   ==================================================== */

.kn-timeline-wrapper {
	width: 100%;
	box-sizing: border-box;
	margin-top: 40px;
}

.kn-timeline {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 1 行 */
.kn-timeline-item {
	display: flex;
	position: relative;
	padding-bottom: 30px;
}

/* 縦線：左端のボーダーで連結を表現 */
.kn-timeline-item::before {
	content: "" / "";
	position: absolute;
	left: 7px;
	top: 8px;
	bottom: -8px;
	width: 2px;
	background-color: var(--color-primary);
	z-index: 0;
}
.kn-timeline-item:last-child::before { display: none; }
.kn-timeline-item:last-child { margin-bottom: 0; padding-bottom: 0; }

/* 年号（左） */
.kn-timeline-item dt {
	position: relative;
	width: 120px;
	flex-shrink: 0;
	padding-left: 30px;
	font-weight: bold;
	line-height: 1.5;
	margin: 0;
}

/* ドット */
.kn-timeline-item dt::after {
	content: "" / "";
	position: absolute;
	left: 0;
	top: calc(0.75em - 8px); /* 1行目（line-height 1.5）の中央にドットを合わせる */
	width: 16px;
	height: 16px;
	background-color: var(--color-primary);
	border-radius: 50%;
	z-index: 1;
}

/* 出来事（右） */
.kn-timeline-item dd {
	margin: 0;
	flex-grow: 1;
	font-size: 1em;
	line-height: 1.6;
	padding-top: 0;
}

@media (max-width: 768px) {
	/* スマホでは年号（dt）と出来事（dd）を縦積みにして改行表示にする */
	.kn-timeline-item { flex-direction: column; }
	.kn-timeline-item dt,
	.kn-timeline-item dd { width: 100%; font-size: 1em; }
	.kn-timeline-item dd { padding-left: 30px; line-height: 1.6; }
}