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

/* 切り替えボタン読み込み */
body::after { 
content:'';
display:none;
background:url(../img/top/04publications/button-01tuushin-ov.png) no-repeat,
url(../img/top/04publications/button-02hakusyo-ov.png) no-repeat;
}

/* ==================================================================================================== */
/* ヘッダ */
/* ==================================================================================================== */

/* ヘッダー基礎 */
header { background-color:var(--wh); }

/* ==================================================================================================== */
/* ファーストビュー */
/* ==================================================================================================== */

/* 共通箇所まとめ */
div.first-view, div.first-view div.splide ul.splide__list li.splide__slide { aspect-ratio:390/496; }

/* ベース */
div.first-view { position:relative; margin-bottom:31px; height:auto; width:100%; z-index:-1; }

/* 画像調整 */
div.first-view img { aspect-ratio:333/150; display:block; position:absolute; left:5vw; top:50%; transform:translateY(-50%) translateX(0); height:auto; max-width:333px; width:333px; z-index:1; }

/* スライダー */
div.first-view div.splide ul.splide__list li.splide__slide { background-size:contain; background-position:center; background-repeat:no-repeat; height:100%; width:100%; }
div.first-view div.splide ul.splide__list li.splide__slide:nth-child(1) { background-image:url(../img/top/01first-view/slide/sp-slide01.jpg); }
div.first-view div.splide ul.splide__list li.splide__slide:nth-child(2) { background-image:url(../img/top/01first-view/slide/sp-slide02.jpg); }
div.first-view div.splide ul.splide__list li.splide__slide:nth-child(3) { background-image:url(../img/top/01first-view/slide/sp-slide03.jpg); }

@container(min-width:769px) {

/* トップは汎用外 */
main::before, main::after { display:none; }

/* ベース */
div.first-view::before, div.first-view::after { background-position:center; background-size:contain; background-repeat:no-repeat; content:''; display:inline-block; position:absolute; top:397px; z-index:-1; }
div.first-view::before { aspect-ratio:211/1050; background-image:url(../img/mimosa/left-mimosa.png); left:0; height:auto; max-width:211px; width:211px; }
div.first-view::after { aspect-ratio:160/1093; background-image:url(../img/mimosa/right-mimosa.png); right:0; height:auto; max-width:160px; width:160px; }

}

@container(min-width:960px) {

/* 共通箇所まとめ */
div.first-view, div.first-view div.splide ul.splide__list li.splide__slide { aspect-ratio:1440/496; }

/* ベース */
div.first-view { margin-bottom:80px; }

/* 画像調整 */
div.first-view img { top:50%; left:10vw; transform:translateY(-50%) translateX(0); max-width:700px; width:700px; }

/* スライダー */
div.first-view div.splide ul.splide__list li.splide__slide:nth-child(1) { background-image:url(../img/top/01first-view/slide/pc-slide01.jpg); }
div.first-view div.splide ul.splide__list li.splide__slide:nth-child(2) { background-image:url(../img/top/01first-view/slide/pc-slide02.jpg); }
div.first-view div.splide ul.splide__list li.splide__slide:nth-child(3) { background-image:url(../img/top/01first-view/slide/pc-slide03.jpg); }

}

/* ==================================================================================================== */
/* トピックス＆バナーリスト */
/* ==================================================================================================== */

/* ベース */
section.content-block { gap:80px; margin-bottom:80px; }

@container(min-width:960px) {

/* ベース */
section.content-block { margin:auto; margin-bottom:80px; max-width:1200px; }

}

/* ==================================================================================================== */
/* トピックス */
/* ==================================================================================================== */

/* ベース */
section.content-block.content-block-topics { flex-direction:column-reverse; }

/* 見出し */
section.topics-block h2, h2.topics-title { margin-bottom:16px; }
section.topics-block h2 img { margin:auto; height:auto; max-width:269px; width:100%; }

/* トピックスなかみ */
div.topics-area { background-color:var(--wh); padding:24px 20px 40px 20px; }
h2.topics-title { font-size:20px; font-weight:500; line-height:160%; }
div.topics-text p { font-size:16px; font-weight:300; line-height:30px; }

/* サムネイル */
div.thumbnail { text-align:center; margin:auto; margin-bottom:24px; }
div.thumbnail img { aspect-ratio:100/141; border:1px solid var(--dg); box-sizing:border-box; object-fit:contain; object-position:top center; margin:auto; height:auto; max-width:200px; width:100%; }

@container(min-width:960px) {

/* ベース */
section.content-block.content-block-topics { flex-direction:row; gap:57px; }

/* 見出し */
section.topics-block h2 { background-color:var(--wh); border-radius:8px 8px 0 0; box-shadow:4px 4px 4px 0 rgba(0,0,0,0.25); padding-top:40px; padding-bottom:40px; margin-bottom:0; }
section.topics-block h2.topics-title { box-shadow:0 0 0 0 transparent; font-size:26px; padding-top:0; padding-bottom:0; margin-bottom:16px; }
section.topics-block h2 img { max-width:368px; }

/* 全体 */
section.topics-block { max-width:70%; width:70%; }

/* トピックスなかみ */
div.topics-area { align-items:center; border-radius:0 0 8px 8px; box-shadow:4px 4px 4px 0 rgba(0,0,0,0.25); display:flex; gap:24px; padding:40px; padding-top:0; }
div.thumbnail { margin-bottom:auto; width:272px }
div.thumbnail img { max-width:100%; }
div.topics-area article { width:calc( 100% - ( 272px + 24px ) ); }

}

/* ==================================================================================================== */
/* バナーリスト */
/* ==================================================================================================== */

/* ベース */
aside.bnr-list ul { flex-wrap:wrap; gap:16px; padding:0 20px; max-width:100%; width:100%; }
aside.bnr-list ul li { width:calc( 50% - 8px ); }
aside.bnr-list ul li a { aspect-ratio:167/61; background-size:contain; background-position:center; background-repeat:no-repeat; display:block; height:100%; width:100%; }
aside.bnr-list ul li:nth-child(1) a { background-image:url(../img/top/02topics-block/bnr01.png); }
aside.bnr-list ul li:nth-child(2) a { background-image:url(../img/top/02topics-block/bnr02.png); }
aside.bnr-list ul li:nth-child(3) a { background-image:url(../img/top/02topics-block/bnr03.png); }
aside.bnr-list ul li:nth-child(4) a { background-image:url(../img/top/02topics-block/bnr04.png); }

@container(min-width:960px) {

/* ベース */
aside.bnr-list { max-width:30%;width:30%; }
aside.bnr-list ul { flex-direction:column; flex-wrap:nowrap; padding:0; }
aside.bnr-list ul li { width:100%; }

}


/* ==================================================================================================== */
/* 新着情報 */
/* ==================================================================================================== */

/* 見出し */
div.news-block h2.center { margin-bottom:24px; }
div.news-block h2.center img { margin:auto; height:auto; max-width:248px; }

/* 新着リスト */
ul.news-list { background-color:var(--wh); padding:40px 20px 0 20px; }
ul.news-list li { border-bottom:1px solid var(--bk); }
ul.news-list li:last-child { border-bottom:none; }
ul.news-list li a { align-items:center; gap:16px; justify-content:space-between; padding:24px 0; }
div.news-ph { aspect-ratio:1/1; overflow:hidden; height:120px; width:120px; }
div.news-ph img { aspect-ratio:1/1; box-sizing:border-box; object-fit:contain; object-position:top; height:100%; width:100%; }
div.news-txt { width:calc(100% - 128px) }
div.news-txt p, div.news-txt time { font-size:16px; font-weight:400; line-height:200%; }
div.news-txt p { font-weight:300; }

/* もっと見るボタン */
p.more-button-area { background-color:var(--wh); padding:40px 20px 40px 20px; }
a.more-button { aspect-ratio:225/40; align-items:center; background-image:url(../img/top/03news/more-button.png); background-size:contain; background-position:center; background-repeat:no-repeat; display:flex; justify-content:center; margin:auto; height:auto; max-width:225px; width:225px; }
a.more-button:active, a.more-button:hover { background-image:url(../img/top/03news/more-button-ov.png); }
a.more-button span { text-indent:-9999px; overflow:hidden; visibility:hidden; height:1px; width:1px; }

@container(min-width:960px) {

/* 見出し */
div.news-block h2.center { background-color:var(--wh); border-radius:8px 8px 0 0; box-shadow:4px 4px 4px 0 rgba(0,0,0,0.25); margin:auto; padding-top:80px; padding-bottom:40px; margin:auto; margin-bottom:0; max-width:767px; }
div.news-block h2.center img { max-width:336px; }

/* 新着リスト */
ul.news-list { box-shadow:4px 4px 4px 0 rgba(0,0,0,0.25); padding:0 80px; margin:auto; max-width:767px; }

/* もっと見るボタン */
p.more-button-area { background-color:var(--wh); border-radius:0 0 8px 8px; box-shadow:4px 4px 4px 0 rgba(0,0,0,0.25); padding:40px 80px 80px 80px; margin:auto; max-width:767px; }

}


/* ==================================================================================================== */
/* 発行物 */
/* ==================================================================================================== */

/* ベース */
section.content-block.publications { background-image:url(../img/top/04publications/bg.png); background-size:cover; background-position:center center; padding:40px; margin:auto; margin-bottom:80px; max-width:350px; }

/* 見出し */
section.publications h2.center { margin-bottom:16px; }
section.publications h2.center img { margin:auto; height:auto; max-width:221px; }

/* リスト */
ul.button-list { align-items:center; flex-direction:column; gap:16px; align-self:stretch; }
ul.button-list li a { aspect-ratio:229/215; background-repeat:no-repeat; background-size:contain; background-position:center; display:block; transition:.3s; height:auto; max-width:229px; width:229px; }
ul.button-list li:first-child a { background-image:url(../img/top/04publications/button-01tuushin.png); }
ul.button-list li:first-child a:active, ul.button-list li:first-child a:hover { background-image:url(../img/top/04publications/button-01tuushin-ov.png); transition:.3s; }
ul.button-list li:nth-child(2) a { background-image:url(../img/top/04publications/button-02hakusyo.png); }
ul.button-list li:nth-child(2) a:active, ul.button-list li:nth-child(2) a:hover { background-image:url(../img/top/04publications/button-02hakusyo-ov.png); transition:.3s; }
ul.button-list li:nth-child(3) a { background-image:url(../img/top/04publications/button-03other.png); }
ul.button-list li:nth-child(3) a:active, ul.button-list li:nth-child(3) a:hover { background-image:url(../img/top/04publications/button-03other-ov.png); transition:.3s; }

@container(min-width:960px) {

/* ベース */
section.content-block.publications { padding:80px 0; max-width:100%; width:100%; }

/* 見出し */
section.publications h2.center { margin-bottom:16px; }
section.publications h2.center img { margin:auto; height:auto; max-width:304px; }

/* リスト */
ul.button-list { align-items:flex-start; flex-direction:row; gap:80px; justify-content:center; }
ul.button-list li a { aspect-ratio:320/300; max-width:100%; width:320px; }

}

/* ==================================================================================================== */
/* 各種署名 */
/* ==================================================================================================== */

/* ベース */
div.signature-block { background-color:var(--wh); padding:40px 0; position:relative; z-index:1; }

/* ノート罫線 */
div.signature-block::before { background-image:url(../img/top/05signature/ruled-lines-sp.svg); background-position:center top; background-size:auto 16px; background-repeat:repeat; content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:calc( 100% - 80px ); width:calc( 100% - 40px ); z-index:-1; }

/* 見出し */
section.signature h2.center { padding-top:17px; margin-bottom:32px; }
section.signature h2.center img { margin:auto; height:auto; max-width:245px; }
h3.four-signature-midashi { text-align:center; margin:auto; margin-bottom:10px; height:auto; max-width:291px; }
h3.four-signature-midashi img { margin:auto; height:auto; width:100%; }

/* ジェンダー4署名 */
div.midashi-block { background-color:var(--wh); padding:20px 25px 10px 25px; margin:auto; margin-bottom:24px; max-width:80%; }
div.midashi-block p { font-size:16px; font-weight:300; line-height:200%; }

/* 吹き出し部分 */
div.fukidashi-block a { aspect-ratio:257/158; background-size:contain; background-position:center; background-repeat:no-repeat; background-image:url(../img/top/05signature/singature-fukudashi-sp.png); display:block; margin:auto; margin-bottom:16px; height:auto; max-width:257px; width:257px; }

/* 4署名ボタン */
ul.signature-list { flex-direction:column; gap:24px; }
ul.signature-list li a { aspect-ratio:334/300; background-size:contain; background-position:center; background-repeat:no-repeat; display:block; margin:auto; height:auto; max-width:300px; width:100%; }
ul.signature-list li:nth-child(1) a::after, ul.signature-list li:nth-child(2) a::after, ul.signature-list li:nth-child(3) a::after, ul.signature-list li:nth-child(4) a::after, div.fukidashi-block a::after { content:''; overflow:hidden; text-indent:-9999px; visibility:hidden; height:1px; width:1px; }
ul.signature-list li:nth-child(1) a::after { background-image:url(../img/top/05signature/singature-button01-ov.png); }
ul.signature-list li:nth-child(4) a::after { background-image:url(../img/top/05signature/singature-button02-ov.png); }
ul.signature-list li:nth-child(3) a::after { background-image:url(../img/top/05signature/singature-button03-ov.png); }
ul.signature-list li:nth-child(2) a::after { background-image:url(../img/top/05signature/singature-button04-ov.png); }
ul.signature-list li:nth-child(1) a { background-image:url(../img/top/05signature/singature-button01.png); }
ul.signature-list li:nth-child(1) a:active, ul.signature-list li:nth-child(1) a:hover { background-image:url(../img/top/05signature/singature-button01-ov.png); }
ul.signature-list li:nth-child(4) a { background-image:url(../img/top/05signature/singature-button02.png); }
ul.signature-list li:nth-child(4) a:active, ul.signature-list li:nth-child(4) a:hover { background-image:url(../img/top/05signature/singature-button02-ov.png); }
ul.signature-list li:nth-child(3) a { background-image:url(../img/top/05signature/singature-button03.png); }
ul.signature-list li:nth-child(3) a:active, ul.signature-list li:nth-child(3) a:hover { background-image:url(../img/top/05signature/singature-button03-ov.png); }
ul.signature-list li:nth-child(2) a { background-image:url(../img/top/05signature/singature-button04.png); }
ul.signature-list li:nth-child(2) a:active, ul.signature-list li:nth-child(2) a:hover { background-image:url(../img/top/05signature/singature-button04-ov.png); }

@container(min-width:960px) {

/* 見出し */
section.signature h2.center img { max-width:336px; }
h3.four-signature-midashi { max-width:443px; }

/* ノート罫線 */
div.signature-block::before { background-image:url(../img/top/05signature/ruled-lines-pc.svg); width:calc( 100% - 80px ); }

/* ジェンダー4署名 */
div.midashi-block { background-color:var(--wh); padding:40px; margin:auto; margin-bottom:40px; max-width:792px; }
div.midashi-block p br { display:none; }

/* 吹き出し部分 */
div.fukidashi-block { position:absolute; z-index:1; top:120px; right:25px; }
div.fukidashi-block a { aspect-ratio:285/235; background-image:url(../img/top/05signature/singature-fukudashi-pc.png); margin-bottom:0; height:auto; max-width:285px; width:285px; }
div.fukidashi-block a::after { background-image:url(../img/top/05signature/singature-fukudashi-pc-ov.png); }
div.fukidashi-block a:active, div.fukidashi-block a:hover { background-image:url(../img/top/05signature/singature-fukudashi-pc-ov.png); }

/* 4署名ボタン */
ul.signature-list { flex-direction:row; flex-wrap:wrap; gap:40px; margin:auto; margin-bottom:118px; max-width:792px; }
ul.signature-list li { width:calc( 50% - 20px ); }
ul.signature-list li a { max-width:369px; }

}