/* ==================================================================================================== */
/* 汎用 */
/* ==================================================================================================== */

/* 見出し */
.page-title { text-align:center; padding-top:40px; margin-bottom:16px; }
.page-title img { margin:auto; max-width:292px; }

@container(min-width:960px) {

/* 見出し */
.page-title { margin-bottom:80px; }
.page-title img { max-width:559px; }

}

/* ==================================================================================================== */
/* ページ内ナビメニュー */
/* ==================================================================================================== */

/* ベース  */
nav.voice-nav ul { align-items:center; background-color:var(--wh); justify-content:center; margin:auto; max-width:calc( 100% - 20px ); width:100%; }
nav.voice-nav ul li { font-size:16px; font-weight:500; flex:1; line-height:200%; }
nav.voice-nav ul li a { align-items:center; box-sizing:border-box; display:flex; justify-content:center; padding:4px 0; }
nav.voice-nav ul li.voice a { border:1px solid var(--gr-1); color:var(--gr-1); }
nav.voice-nav ul li.discourse a { border:1px solid var(--gr-3); color:var(--gr-3); }
nav.voice-nav ul li.statement a { border:1px solid var(--gl); color:var(--gl); }
nav.voice-nav ul li.request a { border:1px solid var(--ye); color:var(--ye); }
nav.voice-nav ul li.current a.current { border:1px solid var(--gr-2); background-color:var(--gr-2); color:var(--wh); }

@container(min-width:960px) {

/* ベース  */
nav.voice-nav ul { max-width:1000px; }
nav.voice-nav ul li a { padding:8px 0; }
nav.voice-nav ul li.voice a, nav.voice-nav ul li.discourse a, nav.voice-nav ul li.statement a, nav.voice-nav ul li.request a { border:1px solid var(--gr-1); color:var(--gr-1); opacity:0.6; }
nav.voice-nav ul li.current a.current { opacity:1; }

}

/* ==================================================================================================== */
/* コンテンツ */
/* ==================================================================================================== */

/* ベース */
section.voice { background-color:var(--wh); padding:0 20px; margin:auto; margin-bottom:40px; max-width:calc( 100% - 20px ); width:100%; }
section.voice ul { padding:80px 0; }

/* リスト */
section.voice ul, section.voice ul li { flex-direction:column; }
section.voice ul { gap:64px; }
section.voice ul li { gap:24px; }

/* サムネイル */
div.samune-ph { margin:auto; margin-bottom:24px; }
div.samune-ph a { aspect-ratio:150/190; align-items:center; border:1px solid var(--gr-1); box-sizing:border-box; display:flex; justify-content:center; margin:auto; height:auto; max-width:150px; width:100%; }
div.samune-ph a img { object-fit:cover; height:100%; width:100%; }

/* 記事カテゴリ・日付 */
div.kiji-data { align-self:center; gap:24px; justify-content:flex-start; }
div.kiji-data time { font-size: 16px; font-weight:300; line-height:200%; }
div.kiji-data p.cate a { background-color:var(--gr-1); border-radius:40px; color:var(--wh); display:inline-block; padding:3px 16px 4px 16px }
div.kiji-data p.cate.discourse a { background-color:var(--gr-3); }
div.kiji-data p.cate.statement a { background-color:var(--gl); }
div.kiji-data p.cate.request a { background-color:var(--ye); color:var(--bk); }

/* テキスト */
p.pol-text { font-size:16px; font-weight:500; line-height:200%; }

@container(min-width:960px) {

/* ベース */
section.voice { max-width:1000px; }
section.voice ul { padding:80px 100px; }

/* リスト */
section.voice ul li { flex-direction:row; justify-content:flex-start; }
div.all-text { align-content:flex-start; display:flex; flex-direction:column; justify-content:flex-start; gap:24px; width:calc( 100% - 225px ); }
div.kiji-data { align-self: flex-start; }

/* サムネイル */
div.samune-ph { margin:0; }

}