@charset 'utf-8';
/* ======================================== 
TOPページCSS
========================================*/


/* ==================== ▽ 色設定CSS ▽ ==================== */

/* 見出し */
div.top_midashi01 span { background-color:#333; }

/* イントロ */
div.intro h2 span { background-color:rgba( 255,255,255,0.7 ); }

/* トピックス */
div.topics_img { border:3px solid #226a73; }

/* 人気コンテンツ */
ul.flex_list li img { border:1px solid #ccc; }

@media only screen and (min-width:600px) {
/* ◆ ===== タブレット ===== ◆ */

}

@media only screen and (min-width:1025px) {
/* ◆ ===== PC ===== ◆ */

}


/* ==================== ▽ 個別CSS ▽ ==================== */

/* 見出し */
div.top_midashi01 { padding:0 0 20px 0; position:relative; margin:0 0 30px 0; z-index:1; }
div.top_midashi01 div.midashi_icon { text-align:center; margin:auto auto 15px auto; }
div.top_midashi01 div.midashi_icon img { width:50px; }
div.top_midashi01 h2 { font-size:200%; font-weight:600; letter-spacing:0.15em; }
div.top_midashi01 span { display:inline-block; position:absolute; bottom:0; left:50%; transform:translate(-50%,0); height:2px; width:150px; }
div.top_midashi02 { margin:0 0 30px 0; }
div.top_midashi02 div.midashi_icon { text-align:center; margin:20px auto auto auto; }
div.top_midashi02 div.midashi_icon img { width:180px; }
div.top_midashi02 h2 { font-size:200%; font-weight:600; letter-spacing:0.15em; }

/* イントロ */
div.intro { background-image:url("../img/top/top_intro.jpg"); background-position:center; background-size:cover; background-repeat:no-repeat; position:relative; z-index:1; }
div.intro { margin:0 0 40px 0; padding:0; }
div.intro div.table { height:40vh; }
div.intro h2 { font-size:16px; font-weight:500; position:absolute; top:50%; left:50%; transform:translate(-50%,-60%); line-height:1.8; letter-spacing:.25em; writing-mode:vertical-rl; white-space:nowrap; }
div.intro h2 span { display:inline-block; padding:7.5px 2px; margin:0 2px; }
div.intro div.intro_title { position:absolute; bottom:10px; left:0; z-index:1; width:70%; }

/* トピックス */
ul.topics_list { padding:20px 0; }
ul.topics_list li { margin:auto auto 20px auto; max-width:90%; }
ul.topics_list li:last-child { margin:auto; }
div.topics_img { padding:10px; overflow:hidden; }
div.topics_img img { aspect-ratio:4/3; object-fit:cover; width:100%; }
ul.topics_list li p { font-size:14px; padding:5px 10px 0 10px; }
ul.topics_list li p.date { font-size:90%; }
div.iframe iframe { width:100%; }

/* 新聞「農民」 */
div.top_news { padding:0 0 30px 0; }
div.news_img { text-align:center; margin:auto auto 20px auto; }
div.news_img img { width:90%; }
div.news_txt { padding:0 20px; }
div.news_txt h3 { font-size:16px; font-weight:600; margin:0 0 10px 0; }
div.news_txt p { text-indent:-1.25em; padding-left:1.25em; line-height:2; }
div.news_txt p::before { content:'●'; margin:0 .25em 0 0; }

/* 人気コンテンツ */
ul.flex_list li { margin:0 0 25px 0; }
ul.flex_list li:last-child { margin:0; }
ul.flex_list li img { box-sizing:border-box; width:90%; }

@media only screen and (min-width:600px) {
/* ◆ ===== タブレット ===== ◆ */

/* 見出し */
div.top_midashi01 div.midashi_icon img { width:70px; }

/* イントロ */
div.intro { margin:0 0 60px 0; padding:0; }
div.intro div.table { height:50vh; }
div.intro h2 { font-size:18px; }
div.intro div.intro_title { bottom:20px; width:300px; }

/* トピックス */
ul.topics_list { display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; }
ul.topics_list li { padding:0 10px; margin:auto auto 20px auto; width:50%; }
ul.topics_list li:last-child { margin:auto auto 20px auto; }
ul.topics_list li p { font-size:16px; }

/* 新聞「農民」 */
div.top_news { padding:0 0 40px 0; display:flex; justify-content:space-around; align-items:flex-start; }
div.news_img { margin:0 auto; }
div.news_img img { max-width:350px; }
div.news_txt { padding:0 0 0 10px; }
div.news_txt h3 { font-size:18px; }
div.news_txt p { font-size:14px; }

/* 人気コンテンツ */
ul.flex_list { display:flex; justify-content:space-around; align-items:flex-start; flex-wrap:wrap; margin:auto; width:90%; }
ul.flex_list li { width:50%; }
ul.flex_list li img { width:95%; }

}

@media only screen and (min-width:1025px) {
/* ◆ ===== PC ===== ◆ */

/* イントロ */
div.intro { margin:0 0 80px 0; padding:0; }
div.intro h2 { font-size:20px; }

/* トピックス */
ul.topics_list li p { font-size:16px; }
div.intro div.intro_title { bottom:40px; width:400px; }

/* 新聞「農民」 */
div.news_img img { max-width:450px; }
div.news_txt { padding:0 0 0 10px; }
div.news_txt h3 { font-size:20px; }
div.news_txt p { font-size:16px; }

/* 人気コンテンツ */
ul.flex_list { width:100%; }

}