@charset "UTF-8";
/* CSS Document */


/******************************************************

PC設定 1200px以上の場合に適用

*******************************************************/

/* mvLower */
.mvLower__img {
	background-image: url("/img/coach/mv.jpg");
}


/* ==========================================
   coach_lead — リード文
   ========================================== */
.coach_lead {
	background-color: #FFFFFF;
}

.coach_lead__txt {
	line-height: 2;
	text-align: justify;
}


/* ==========================================
   director — クラブ代表(固定)
   ========================================== */
.director {
	background-color: #FFFFFF;
	padding-bottom: 100px;
}

/* ヒーロー画像 (wrapper_small 内) */
.director__hero {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: #DDDDDD;
	border-radius: 15px;
	margin-bottom: 20px;
}

.director__hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 代表 情報ブロック */
.director__body {
	margin-top: 48px;
}

.director__role {
	font-family: var(--font-en);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-primary);
	margin-bottom: 8px;
}

.director__name {
	font-size: 36px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-text);
	margin-bottom: 32px;
}

.director__name-en {
	margin-left: 16px;
	font-family: var(--font-en);
	font-size: 18px;
	font-weight: 500;
	color: var(--color-text-sub);
	letter-spacing: 0.04em;
}

.director__meta {
	border-top: 1px solid #DDDDDD;
	margin-bottom: 68px;
}

.director__meta-row {
	display: flex;
	border-bottom: 1px solid #DDDDDD;
}

.director__meta-row dt {
	flex: 0 0 200px;
	background-color: #FAFAFA;
	padding: 16px 24px;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1.6;
}

.director__meta-row dd {
	flex: 1;
	padding: 16px 24px;
	line-height: 1.6;
}

.director__message {
	max-width: 960px;
	margin: 0 auto;
}

.director__message-label {
	font-size: 22px;
	font-weight: 700;
	color: var(--color-primary);
	padding-bottom: 12px;
	margin-bottom: 24px;
	border-bottom: 2px solid var(--color-primary);
}

.director__message-body p {
	line-height: 2;
	margin-bottom: 1.5em;
}

.director__message-body p:last-child {
	margin-bottom: 0;
}


/* ==========================================
   coach_archive — CMS管理コーチ一覧
   ========================================== */
.coach_archive {
	background-color: var(--color-bg-gray);
}

.coach_archive__list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.coach_archive__item {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	background-color: #FFFFFF;
	border-radius: 8px;
	padding: 32px;
}

.coach_archive__thumb {
	flex: 0 0 40%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background-color: #DDDDDD;
	border-radius: 6px;
}

.coach_archive__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.coach_archive__info {
	flex: 1;
	min-width: 0;
}

.coach_archive__role {
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-primary);
	margin-bottom: 6px;
}

.coach_archive__name {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-text);
	margin-bottom: 20px;
}

.coach_archive__history {
	margin-bottom: 25px;
}

.coach_archive__history-row {
	display: flex;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px dotted #DDDDDD;
}

.coach_archive__history-row dt {
	flex: 0 0 80px;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1.6;
}

.coach_archive__history-row dd {
	flex: 1;
	line-height: 1.6;
}

.coach_archive__message {
	background-color: var(--color-bg-gray);
	border-left: 3px solid var(--color-primary);
	padding: 16px 20px;
	border-radius: 0 4px 4px 0;
}

.coach_archive__message-label {
	font-size: 15px;
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: 6px;
}

.coach_archive__message-txt {
	font-size: 14px;
	line-height: 1.9;
}

.coach_archive__empty {
	text-align: center;
	padding: 80px 0;
	color: var(--color-text-sub);
}




/******************************************************

タブレットの設定 960px〜1199pxの場合に適用

*******************************************************/

@media screen and (max-width: 1199px){

/* director */
.director__name {
	font-size: 32px;
}


/* coach_archive */
.coach_archive__item {
	gap: 32px;
	padding: 24px;
}

.coach_archive__name {
	font-size: 22px;
}


}



/******************************************************

タブレットの設定 768px〜959pxの場合に適用

*******************************************************/

@media screen and (max-width: 959px){

/* director */
.director__hero {
	aspect-ratio: 16 / 10;
}

.director__name {
	font-size: 28px;
}

.director__meta-row dt {
	flex: 0 0 160px;
}


/* coach_archive */
.coach_archive__item {
	gap: 24px;
}

.coach_archive__history-row dt {
	flex: 0 0 70px;
}


}



/******************************************************

SPの設定 767px以下の場合に適用

*******************************************************/

@media screen and (max-width: 767px){

/* director */
.director {
	padding-bottom: 60px;
}

.director__hero {
	aspect-ratio: 3 / 2;
	border-radius: 8px;
}

.director__body {
	margin-top: 32px;
}

.director__role {
	font-size: 12px;
}

.director__name {
	font-size: 24px;
	margin-bottom: 24px;
}

.director__name-en {
	display: block;
	margin-left: 0;
	margin-top: 4px;
	font-size: 14px;
}

.director__meta {
	margin-bottom: 32px;
}

.director__meta-row {
	flex-direction: column;
}

.director__meta-row dt {
	flex: 0 0 auto;
	padding: 10px 16px;
}

.director__meta-row dd {
	padding: 12px 16px;
}

.director__message-label {
	font-size: 16px;
	padding-bottom: 8px;
	margin-bottom: 16px;
}


/* coach_archive */
.coach_archive__list {
	gap: 24px;
}

.coach_archive__item {
	flex-direction: column;
	gap: 20px;
	padding: 16px;
}

.coach_archive__thumb {
	flex: 0 0 auto;
	width: 100%;
}

.coach_archive__name {
	font-size: 20px;
	margin-bottom: 16px;
}

.coach_archive__history-row {
	flex-direction: column;
	gap: 2px;
	padding: 6px 0;
}

.coach_archive__history-row dt {
	flex: 0 0 auto;
}

.coach_archive__message {
	padding: 12px 16px;
}


}