@charset "utf-8";

#governance{}
#governance .governance_content{ width: 960px; margin: auto;}
@media screen and (max-width:767px) {
#governance .governance_content{ width: 92.5%;}
}

#governance .group{ margin: 90px auto;}
#governance h2{ padding-bottom: 25px; font-size: 28px; text-align: center; position: relative; line-height: 1; margin-bottom: 40px}
#governance h2:after{ content: ""; width: 120px; height: 2px; margin: auto; display: block; background: #919ca0; position: absolute; bottom: 0; left: 0; right: 0;}
@media screen and (max-width:767px) {
#governance .group{ margin: 15% auto;}
#governance h2{ padding-bottom: 5%; font-size: 5vw; margin-bottom: 7.5%;}
#governance h2:after{ width: 15vw; height: 1px;}
}

#governance ul.offisers_list img{ max-width: 100%;}
#governance ul.offisers_list{ width: 100%; margin: 20px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;}
#governance ul.offisers_list li{ text-align: center; width: calc(20% - 16px); cursor: pointer; transition: 0.3s;}
#governance ul.offisers_list li:hover{ opacity: 0.7;}
#governance ul.offisers_list li dl dt{ margin-bottom: 10px;}
#governance ul.offisers_list li dl dd span{ display: block; font-size: 12px; line-height: 1.5em; font-weight: normal; margin-bottom: 0.5em;}
#governance ul.offisers_list li dl dd strong{ display: block; font-size: 18px; line-height: 1.25em; font-weight: bold;}
@media screen and (max-width:767px) {
#governance ul.offisers_list{ margin-top: 5vw; gap: 5vw 2.5vw; justify-content: flex-start;}
#governance ul.offisers_list li{ width: calc(50% - 1.25vw);}
#governance ul.offisers_list li dl dt{ margin-bottom: 2.5%;}
#governance ul.offisers_list li dl dd span{ font-size: 2.5vw;}
#governance ul.offisers_list li dl dd strong{ font-size: 3.5vw;}
}



/*modalウィンドウ*/
#modal_window_area{ display:none;}
.modal_window{ background:#fff; padding:40px; margin:0 auto; width:690px; height:750px; box-shadow:0 0 20px 0 #333; overflow:hidden; overflow-y: scroll; position:relative;}
.modal_window .close_btn{ cursor:pointer; display: block; text-align: center; font-size: 16px; margin-top: 2em; color: #666;}
.modal_in *{ box-sizing:border-box; font-family: "Noto Sans JP", sans-serif;}
.modal_in img{ max-width: 100%;}
.modal_in h3{ font-size: 24px;}
.modal_in h4{ font-size: 24px; border-bottom: 1px solid #000; font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ', Meiryo, serif;}
.modal_in dl{ display: table; margin: 0 0 0 auto;}
.modal_in dl dt{ display: table-cell; vertical-align: middle; font-weight: bold; font-size: 21px; text-align: right;}
.modal_in dl dt span{ display: block; font-weight: normal; font-size: 75%;}
.modal_in dl dt ul{ margin: 0 auto !important;}
.modal_in dl dt ul li{ font-weight: normal; font-size: 75%;}
.modal_in dl dd{ display: table-cell; vertical-align: middle; padding-left: 18px; width: 180px;}
.modal_in dl dd img{ width: 100%;}
.modal_in ul{ margin: 1em;}
.modal_in ul li{ font-size: 16px; margin: 10px auto;}
@media screen and (max-width:767px){
.modal_window{ padding:3%; margin:0 auto; width:94% !important; height:75vh !important; box-shadow:0 0 10px 0 #333;}
.modal_window .close_btn{ font-size: 14px;}
.modal_in h3{ font-size: 20px;}
.modal_in h4{ font-size: 20px;}
.modal_in dl dt{ font-size: 16px;}
.modal_in dl dd{ padding-left: 16px; width: 33.3333%}
.modal_in ul li{ font-size: 12px; margin: 10px auto;}
}