/* -------------------------------------------------- */
/* 汎用 */
/* -------------------------------------------------- */

/* よく使うタグ */
.container { container-type:inline-size; } /* コンテナクエリ用 */
.flex { display:flex; } /* flexコンテンツ用 */
.column { flex-direction:column; }
.grid { display:grid; } /* gridコンテンツ用 */
.none { display:none; } /* 要素を消す */
.visually-hidden { border:0; clip:rect(0 0 0 0); overflow:hidden; position:absolute; margin:-1px; height:1px; width:1px; white-space:nowrap; } /* 要素非表示 */
.b { font-weight:700; }

/* 見出し */
div.intro { margin-bottom:30px; }
.content h2 { font-size:20px; margin-bottom:16px; }
.sukuwaku-main-title { color:#f8b62a; font-weight:700; }

/* コンテンツ */
.content { padding:0 20px; margin-bottom:40px; }
.content-text p { line-height:1.8; }

/* 最初のコンテンツ */
.first-content div.flex.lead { flex-direction:column; gap:20px; margin-bottom:30px; }

/* 写真 */
.sukuwaku-ph { gap:20px; }
.sukuwaku-ph li { gap:10px; }
.sukuwaku-ph li .theme-title { color:#0aa198; font-size:18px; font-weight:700; }
.sukuwaku-ph li .cap { font-size:16px; font-weight:700; text-align:left; margin:10px 0; }
.sukuwaku-ph li .text-box p { font-size:16px; }
.sukuwaku-ph.flex.column div.flex.sukuwaku-ph-content { flex-direction:column; gap:10px; }

/* 活動報告書リスト */
.sukuwaku-report h2 { border-bottom:2px solid #0aa198; color:#0aa198; padding:0 10px; padding-bottom:10px; margin:auto; margin-bottom:16px; width:fit-content; }
.report-list { align-items:center; flex-direction:column; gap:20px; justify-content:center; }
.report-list li { gap:10px; }
.report-list li p { text-align:center; }
.report-list img { border:1px solid #ddd; box-sizing:border-box; }
.pager { display:flex; justify-content:center; margin:20px auto; }

@container( min-width:1000px ) {

/* コンテンツ */
.content { padding:0; margin:auto; margin-bottom:80px; max-width:1000px; width:100%; }
.content h2 { font-size:24px; margin-bottom:50px; }

/* 最初のコンテンツ */
.first-content div.flex.lead { align-items:center; flex-direction:row; gap:50px; justify-content:center; margin-bottom:50px; }
.logo { max-width:400px; width:100%; }
.content-text { max-width:calc( 100% - ( 400px + 50px ) ); }

/* 写真 */
.sukuwaku-ph { gap:50px; }
.sukuwaku-main-title { text-align:center; }
.sukuwaku-main-title img { margin:auto; height:auto; max-width:750px; }
.sukuwaku-ph.flex.column { flex-direction:column; }
.sukuwaku-ph.flex.column li { flex:1; }
.sukuwaku-ph li .theme-title { font-size:30px; text-align:center; margin-bottom:50px; }
.sukuwaku-ph.flex.column li .cap { font-size:16px; text-align:center; }
.sukuwaku-ph.flex.column div.flex.sukuwaku-ph-content { align-items:center; flex-direction:row; gap:50px; }
.sukuwaku-ph.flex.column li:nth-child(even) div.flex.sukuwaku-ph-content { flex-direction:row-reverse; }
.sukuwaku-ph.flex.column .ph-box { width:calc( 50% - 50px ) }
.sukuwaku-ph.flex.column div.flex.sukuwaku-ph-content .text-box { padding-bottom:16px; width:50%; }
.sukuwaku-ph.flex.column div.flex.sukuwaku-ph-content .text-box p { font-size:18px; line-height:2; }

/* 活動報告書リスト */
.sukuwaku-report h2 { margin-bottom:18px; }
.report-list { align-items:flex-start; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:30px;  }
.report-list li { flex:0 0 calc((100% - 60px) / 3); width:calc( 100% / 3 ); }
.pager { margin:40px auto; }

}