/* -------------------------------------------------- */
/* speakers - css */
/* -------------------------------------------------- */

/* ベース */
main { background-color:var(--bl-3); }
.speakers-content { padding:24px 20px 40px 20px; margin:auto; }

/* 一覧 */
.speaker-list { display:grid; gap:40px; grid-template-columns:1fr; list-style:none; padding:0; margin:0; }

/* カード */
.speaker { display:grid; grid-template-areas:'photo' 'name' 'role' 'button'; grid-template-columns:1fr; justify-items:center; }

/* 写真 */
.speaker-photo { grid-area:photo; padding:0; margin:0 0 14px 0; position:relative; height:208px; width:208px; }
.speaker-photo::before { background-color:var(--bl); content:''; display:block; opacity:0.2; position:absolute; top:8px; left:8px; height:200px; width:200px; }
.speaker-photo img { object-fit:cover; position:relative; height:200px; width:200px; }

/* 名前 */
.speaker-name { color:var(--bl); font-size:20px; font-weight:500; text-align:left; line-height:24px; grid-area:name; justify-self:stretch; margin:0 0 8px 0; }

/* 肩書き */
.speaker-role { font-size:16px; font-weight:500; text-align:left; line-height:24px; letter-spacing:0.48px; grid-area:role; justify-self:stretch; margin:0; }

/* ボタン */
.speaker-button { grid-area:button; justify-self:start; margin:16px 0 0 0; }
.speaker-button button { background-color:transparent; border:1px solid var(--bl); border-radius:100px; color:var(--bl); cursor:pointer; font-family:inherit; font-size:14px; font-weight:500; text-align:center; line-height:1; transition:.3s; padding:0 20px; height:40px; min-width:180px; }
.speaker-button button:hover { background-color:var(--bl); color:var(--wh); transition:.3s; }

/* -------------------------------------------------- */
/* モーダルウインドウ */
/* -------------------------------------------------- */

/* 背面固定 */
html:has(.modal-window[open]) { overflow:hidden; }

/* ベース */
.modal-window { background-color:var(--wh); border:none; border-radius:30px; overflow:hidden; padding:16px 20px 24px 20px; margin:auto; max-height:80vh; max-width:none; width:90%; }
.modal-window[open] { display:flex; flex-direction:column; }
.modal-window::backdrop { background-color:rgba(0,0,0,0.7); }

/* 閉じる */
.modal-close { align-self:flex-end; background-color:transparent; border:none; color:var(--bk); cursor:pointer; flex:0 0 auto; font-family:inherit; font-size:32px; font-weight:600; line-height:1; padding:0; margin-bottom:8px; height:32px; width:32px; }

/* 本文エリア */
.modal-body { column-gap:14px; display:grid; grid-template-columns:auto 1fr; flex:1 1 auto; overflow-y:auto; min-height:0; }

/* 写真 */
.modal-photo { grid-column:1; grid-row:1 / 3; padding:0; margin:0; position:relative; height:108px; width:108px; }
.modal-photo::before { background-color:var(--bl); content:''; display:block; opacity:0.2; position:absolute; top:8px; left:8px; height:100px; width:100px; }
.modal-photo img { object-fit:cover; position:relative; height:100px; width:100px; }

/* 名前 */
.modal-name { color:var(--bl); font-size:20px; font-weight:700; text-align:left; line-height:30px; grid-column:2; grid-row:1; align-self:end; margin:0 0 4px 0; }

/* 肩書き */
.modal-role { font-size:14px; font-weight:500; text-align:left; line-height:22px; letter-spacing:0.42px; grid-column:2; grid-row:2; align-self:start; margin:0; }

/* テキスト */
.modal-text { font-size:16px; font-weight:500; text-align:left; line-height:26px; letter-spacing:0.48px; grid-column:1 / -1; margin:16px 0 0 0; }

@container ( min-width:1000px ) {

/* ベース */
.speakers-content { padding:40px 20px 80px 20px; margin:auto; max-width:1000px; width:100%; }

/* 一覧 */
.speaker-list { grid-template-columns:repeat(2,1fr); }

/* カード */
.speaker { column-gap:14px; grid-template-areas:'photo name' 'photo role' 'photo .' 'photo button'; grid-template-columns:208px 1fr; grid-template-rows:auto auto 1fr auto; justify-items:start; }

/* 写真 */
.speaker-photo { margin:0; }

/* 名前 */
.speaker-name { font-size:24px; line-height:32px; }

/* 肩書き */
.speaker-role { font-size:18px; line-height:32px; letter-spacing:0.54px; }

}

@media ( min-width:1000px ) {

/* -------------------------------------------------- */
/* モーダルウインドウ */
/* -------------------------------------------------- */

/* ベース */
.modal-window { padding:24px 40px 40px 40px; max-width:800px; }

/* 写真 */
.modal-photo { height:168px; width:168px; }
.modal-photo::before { height:160px; width:160px; }
.modal-photo img { height:160px; width:160px; }

/* 名前 */
.modal-name { font-size:24px; line-height:38px; }

/* 肩書き */
.modal-role { font-size:16px; line-height:26px; letter-spacing:0.48px; }

/* テキスト */
.modal-text { font-size:18px; line-height:32px; letter-spacing:0.54px; margin:24px 0 0 0; }

}