@charset "UTF-8";

/* ==========================================================================
   役員体制および就任のご挨拶 — dedicated stylesheet (v4)
   ・全員同じ行の型（役職＝固定幅カラム／氏名＝可変カラム）で統一。
     役職の文字数やバッジの有無で氏名の開始位置がズレないようにする。
   ・役職ごとの文字サイズ差はつけない（会長〜取締役まで氏名は同一サイズ）。
   ・中身（.yakuinInner）に読みやすい上限幅を持たせ、
     ウルトラワイド画面でも間延びしないようにする。
   ・色は黒/グレーの濃淡のみ。
   ========================================================================== */

/* ---- 既存TitleH2の保険（.fineが付与されない場合でも崩れないように） ----
   ※ flex-basis はブラウザ幅が広い時の段折れを避けるため calc(100% - 80px) を使用 */
.contents02NoPdding .TitleH2{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	width: 100%;
	align-items: center;
}
.contents02NoPdding .TitleH2 div:nth-of-type(1){
	flex-basis: 80px;
}
.contents02NoPdding .TitleH2 div img{
	width: 90%;
	padding-right: 10%;
}
.contents02NoPdding .TitleH2 div:nth-of-type(2){
	flex-basis: calc(100% - 80px);
	color: #000;
	font-size: 3.0rem;
}
@media screen and (max-width: 1024px){
	.contents02NoPdding .TitleH2 div:nth-of-type(1){ flex-basis: 60px; }
	.contents02NoPdding .TitleH2 div:nth-of-type(2){ font-size: 2.0rem; }
}
@media screen and (max-width: 896px){
	.contents02NoPdding .TitleH2 div:nth-of-type(1){ flex-basis: 50px; }
	.contents02NoPdding .TitleH2 div:nth-of-type(2){ font-size: 1.5rem; }
}
@media screen and (max-width: 480px){
	.contents02NoPdding .TitleH2 div:nth-of-type(1){ flex-basis: 35px; }
	.contents02NoPdding .TitleH2 div:nth-of-type(2){ font-size: 1.1rem; }
}

/* ---- 外枠：ページの余白と揃える（既存 .hyou01custumWraper と同方式） ---- */
#yakuinBoardSection {
	--yk-black: #1a1a1a;
	--yk-gray-900: #333;
	--yk-gray-700: #555;
	--yk-gray-500: #808080;
	--yk-gray-300: #b8b8b8;
	--yk-line: #e4e4e4;
	display: block;
	box-sizing: border-box;
	margin: 0 calc(15px + 80px);
	color: var(--yk-gray-900);
}
@media screen and (max-width: 1024px){
	#yakuinBoardSection{ margin: 0 calc(15px + 60px); }
}
@media screen and (max-width: 896px){
	#yakuinBoardSection{ margin: 0 calc(15px + 0px); }
}

/* ---- 中身：読みやすい幅に上限を設ける。広い画面でも間延びしない ---- */
#yakuinBoardSection .yakuinInner {
	/*max-width: 900px;*/
}

#yakuinBoardSection .yakuinBoard{
	max-width: 750px;
	line-height: 1.45;
}

#yakuinBoardSection .yakuinIntro {
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 16px 24px;
	padding-bottom: 22px;
	margin-bottom: 18px;
	/*border-bottom: 1px solid var(--yk-line);*/
}
#yakuinBoardSection .yakuinIntro p {
	font-size: 1.5rem;
	line-height: 1.5;
	color: var(--yk-gray-900);
	font-weight: 800;
	display: block;
}
@media screen and (max-width: 1024px){
#yakuinBoardSection .yakuinIntro p {
	font-size: 1.0rem;
}
}

#yakuinBoardSection .yakuinDate {
	flex-shrink: 0;
	font-family: 'Source Code Pro', monospace;
	font-size: .78rem;
	letter-spacing: .05em;
	color: var(--yk-gray-700);
	border: 1px solid var(--yk-gray-300);
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

/* -------------------------------- 役員一覧：共通の行レイアウト -------------------------------- */

#yakuinBoardSection .yakuinGroup {
	list-style: none;
	margin: 0;
	padding: 0;
}
#yakuinBoardSection .yakuinBoard {
	border-top: 1px solid var(--yk-line);
}

/* 役職カラムは固定幅。氏名の開始位置は役職の文字数やバッジの有無に関わらず常に同じ */
#yakuinBoardSection .yakuinRow {
	display: grid;
	grid-template-columns: 11rem 1fr;
	align-items: center;
	column-gap: 24px;
	padding: 34px 2px;
	border-bottom: 1px solid var(--yk-line);
}

#yakuinBoardSection .yakuinRoleCol {
	font-size: 1.15rem;
	letter-spacing: .02em;
	color: var(--yk-gray-500);
}
#yakuinBoardSection .yakuinRoleCol span {
	display: block;
	font-size: 1rem;
	margin-top: 3px;
	color: var(--yk-gray-300);
}
#yakuinBoardSection .yakuinNameCol {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 8px;
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--yk-black);
	letter-spacing: .02em;
}
#yakuinBoardSection .yakuinNameText {
	display: block;
}

/* バッジ（新任・昇任）：塗りつぶし色なし、余分な余白を持たせない */
#yakuinBoardSection .yakuinBadge {
	display: inline-block;
	align-self: flex-start;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	padding: 3px 7px 2px;
	border: 1px solid var(--yk-gray-500);
	color: var(--yk-gray-700);
	border-radius: 2px;
	vertical-align: middle;
	white-space: nowrap;
}

/* 会長・社長の行はボタン。3カラム目にトグルラベルを置くが、
   .yakuinInner で全体幅の上限があるのでボタン自体が不自然に広がることはない */
#yakuinBoardSection .yakuinRow--toggle {
	width: 100%;
	grid-template-columns: 11rem 1fr auto;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
}
#yakuinBoardSection .yakuinTopItem {
	border-bottom: 1px solid var(--yk-line);
}

#yakuinBoardSection .yakuinToggleCol {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .9rem;
	color: var(--yk-gray-500);
	letter-spacing: .02em;
	white-space: nowrap;
	justify-self: end;
}
#yakuinBoardSection .yakuinChevron {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 1px solid var(--yk-gray-500);
	border-bottom: 1px solid var(--yk-gray-500);
	transform: rotate(45deg);
	transition: transform .3s ease;
	margin-top: -4px;
}
#yakuinBoardSection .yakuinTopItem.is-open .yakuinChevron {
	transform: rotate(-135deg);
	margin-top: 2px;
}
#yakuinBoardSection .yakuinRow--toggle:hover .yakuinToggleCol,
#yakuinBoardSection .yakuinRow--toggle:hover .yakuinNameCol {
	color: var(--yk-black);
}

#yakuinBoardSection .yakuinLetterBody {
	grid-column: 1 / -1;
	font-size: 1.00rem;
	line-height: 2;
	color: var(--yk-gray-900);
	max-height: 0;
	overflow: hidden;
	transition: max-height .5s ease, padding .5s ease;
	padding: 0 2px;
}
#yakuinBoardSection .yakuinTopItem.is-open .yakuinLetterBody {
	max-height: 40em;
	padding: 26px 2px 26px;
}
#yakuinBoardSection .yakuinLetterBody p { margin-bottom: 1em; }
#yakuinBoardSection .yakuinLetterClose { text-align: right; }
#yakuinBoardSection .yakuinLetterSign {
	text-align: right;
	color: var(--yk-black);
	font-weight: 700;
}

#yakuinBoardSection .yakuinRetired {
	margin-top: 32px;
	font-size: 1.25rem;
	color: var(--yk-black);
	width: calc( 100vw - ( 80px + 15px )*2  - 60px);
}

/* -------------------------------- responsive -------------------------------- */

@media screen and (max-width: 1024px) {
	#yakuinBoardSection .yakuinRoleCol { font-size: .95rem; }
	#yakuinBoardSection .yakuinRoleCol span { font-size: .85rem; }
	#yakuinBoardSection .yakuinNameCol { 
		font-size: 1.05rem;
	 }


	#yakuinBoardSection .yakuinRetired {
	width: calc( 100vw - ( 15px )*2  - 60px);
}

}

@media screen and (max-width: 640px) {
	#yakuinBoardSection .yakuinRow {
		grid-template-columns: 9rem 1fr; /* 左:役職幅, 右:名前 */
		row-gap: 0;
       align-items: center;
       padding: 15px 2px;
	}
	#yakuinBoardSection .yakuinRow--toggle {
		grid-template-columns: 9rem 1fr;
	}
	#yakuinBoardSection .yakuinToggleCol {
		justify-self: start;
		margin-top: 4px;
	}
	#yakuinBoardSection .yakuinLetterBody { grid-column: auto; }
	#yakuinBoardSection .yakuinRoleCol { 
		font-size: 0.9rem;
       color: var(--yk-gray-500);
		 }
	#yakuinBoardSection .yakuinNameCol { 
		padding-top: 0;
        margin-top: 0;
        font-size: 1.1rem;
	 }
	 #yakuinBoardSection .yakuinBadge {
	 	position: relative;
	 	border-color: #ccc;
	 	color: #ccc;
	 	margin-bottom: 5px;
	 	margin-right: 8px;
	 }
	 #yakuinBoardSection .yakuinRoleCol span {
    color: var(--yk-gray-500);
}
#yakuinBoardSection .yakuinNameText {
    display: block;
}


#yakuinBoardSection .yakuinToggleText {
    color: #000;
    font-size: .75rem;
}

#yakuinBoardSection .yakuinRetired {
	font-size: 0.95rem;
}

#yakuinBoardSection .yakuinLetterBody {
	font-size: .88rem;
	line-height: 1.5;
}


}

@media screen and (max-width: 480px) {
	#yakuinBoardSection .yakuinIntro { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	#yakuinBoardSection .yakuinLetterBody,
	#yakuinBoardSection .yakuinChevron { transition: none; }
}