@charset "utf-8";
/* ================================================================================
色設定
================================================================================ */

/* お知らせ（リスト） */
ul.info_list li { border:1px solid #333; }
ul.info_list li.active { border-bottom:none; }

/* お知らせ（本文） */
div.c_item { border:1px solid #333; border-top:none; }
a.saiyo { background-color:#d3efb7; }
a.etc { background-color:#f7e795; }

/* 一覧を見るボタン */
p.list_yudo a { background-color:#b5de1d; color:#fff; }

/* なぜの木会の魅力 */
div.appeal_block { background-color:#b5de1d; }

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

}

@media only screen and (min-width:1025px) { 
/* PC版記述 */

}

/* ================================================================================
汎用設定CSS
================================================================================ */

/* iframe */
iframe { width:100%; }

/* ヘッダー */
header h1 { padding:45px 0 0 0; }

/* イントロ */
div.intro { position:relative; height:auto; width:100vw; z-index:1; }
div.intro img { margin:auto; width:100vw; z-index:1; }

/* お知らせ（リスト） */
ul.info_list {  display:flex;  justify-content:space-around; }
ul.info_list li { border-radius:5px 5px 0 0; cursor:pointer; font-size:1.2rem; line-height:1.5; padding:10px 0; text-align:center; width:20%; }

/* お知らせ（本文） */
div.tab_content { border-radius:0 0 30px 30px; margin:auto; }
div.c_item { display:none; padding:20px 20px; margin:0; }
div.c_item.show { display:block; }
ul.oshirase_list li { margin:0 0 20px 0; }
ul.oshirase_list li:last-child { margin:0; }
div.cate_date { display:flex; justify-content:flex-end; align-items:center; flex-direction:row-reverse; margin:0 0 5px 0; }
div.cate_date p.list_cate a { display:inline-block; padding:2.5px 15px; margin:0 10px 0 0; }
div.oshirase_txt { padding:0 5px; }
div.oshirase_txt p { text-align:justify; }

/* 一覧を見るボタン */
p.list_yudo { margin:30px 0 0 0; }
p.list_yudo a { border-radius:3rem; display:inline-block; padding:10px 15px; width:200px; }
p.list_yudo.list_yudo_pc { display:none; }

/* なぜの木会の魅力 */
div.appeal div.line_title { margin:auto; position:relative; z-index:1; width:300px; }
div.appeal div.line_title::before, div.appeal div.line_title::after { content:''; background-repeat:no-repeat; background-size:contain; background-position:center center; display:inline-block; position:absolute; top:50%; transform:translate( 0,-50% ); height:45px; width:45px; }
div.appeal div.line_title::before { background-image:url("../img/top/appeal_icon_01.svg"); left:0; }
div.appeal div.line_title::after { background-image:url("../img/top/appeal_icon_02.svg"); right:0; }
div.appeal_block { border-radius:0 20px 0 0; padding:30px 25px; }
div.appeal_ph p { margin:0 0 30px 0; }
div.appeal_ph p img { width:100%; }
div.appeal_ph p.lesp_p { display:none; }

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

/* ヘッダー */
header h1 { padding:40px 0 0 0; }

/* イントロ */
div.intro { transform:translate(0,0); }

/* お知らせ（リスト） */
ul.info_list li { font-size:1.4rem; }

/* お知らせ（本文） */
div.c_item { padding:30px 40px; }

/* なぜの木会の魅力 */
div.appeal_ph p img { display:block; }

/* イラスト */
div.bottom_illust div.tab { display:block; }

}

@media only screen and (min-width:1025px) { 
/* PC版記述 */

/* メニュー本体 */
div.main_nav { position:static; z-index:100; top:auto; left:auto; transform:translate( 0, 0 ); }
div.main_nav.menu_lock { position:fixed; z-index:100; top:0; left:50%; transform:translate( -50%,0 ); }
div.main_nav nav::before, div.main_nav nav ul li.nav_home, div.main_nav nav ul li p { display:none; }
div.main_nav nav { display:block; position:static; top:auto; left:auto; height:auto; width:auto; }
div.main_nav nav ul { display:flex; justify-content:center; align-items:center; padding:20px 0 0 0; position:relative; margin:auto; max-width:600px; z-index:1; }
div.main_nav nav ul::before, div.main_nav nav ul::after { content:''; display:inline-block; background-repeat:no-repeat; background-size:contain; background-position:center center; position:absolute; top:50%; height:75px; width:75px; }
div.main_nav nav ul::before { background-image:url("../img/nav/nav_i_l.svg"); left:0; transform:translate(-50px,-50%); }
div.main_nav nav ul::after { background-image:url("../img/nav/nav_i_r.svg"); right:0; transform:translate(50px,-50%); }
div.main_nav nav ul li a::after { content:''; }
div.main_nav.menu_lock nav ul::before { display:none; }
div.main_nav.menu_lock nav ul::after { display:none; }

/* ヘッダー */
header { position:static; top:0px; }
header::before { display:none; }
header h1 { padding:65px 0 0 0; }
header h1 img { max-height:150px; }

/* イントロ */
div.intro { position:static; text-align:center; z-index:auto; }
div.intro img { max-width:1600px; width:100%; }
div.intro span img { background-color:#fff; }

/* メイン */
main { transform:translate(0,0); border-radius:0 0 50px 50px; }

/* お知らせ */
div.info div.line_title { position:relative; z-index:1; }
div.info div.line_title::after { background-position:center center; background-size:contain; background-repeat:no-repeat; background-image:url("../img/top/i_oshirase_pc.svg"); content:''; position:absolute; top:50%; left:550px; transform:translate(0,-60%); height:100px; width:100px; }

/* お知らせ（リスト） */
ul.info_list li { border-radius:20px 20px 0 0; font-size:1.6rem; padding:20px 0; }
ul.info_list li::before { background-position:center center; background-size:contain; background-repeat:no-repeat; content:''; display:inline-block; height:25px; width:25px; vertical-align:middle; }
ul.info_list li:first-child:before { display:none; }
ul.info_list li:nth-child(2):before { background-image:url("../img/top/i_saiyo_pc.svg"); }
ul.info_list li:nth-child(3):before { background-image:url("../img/top/i_koho_pc.svg"); }
ul.info_list li:nth-child(4):before { background-image:url("../img/top/i_jouhou_pc.svg"); }
ul.info_list li:nth-child(5):before { background-image:url("../img/top/i_etc_pc.svg"); }

/* お知らせ（本文） */
ul.oshirase_list li { display:flex; justify-content:flex-start; align-items:center; }
div.cate_date { display:block; width:200px; }
div.cate_date p { text-align:center; line-height:2; }
div.cate_date p.list_date { padding:0 0 5px 0; }
div.cate_date p.list_cate a { padding:0px 15px; margin:0; width:90%; }
div.oshirase_txt { width:calc( 100% - 200px ); }
div.oshirase_txt p { text-align:justify; }
p.list_yudo.list_yudo_pc { display:block; }
p.list_yudo.list_yudo_sp { display:none; }

/* なぜの木会の魅力 */
div.appeal div.line_title { width:400px; }
div.appeal div.line_title::before, div.appeal div.line_title::after { height:75px; width:75px; }
div.appeal_block { display:flex; justify-content:flex-start; align-items:center; padding:30px; }
div.appeal_ph { width:400px; }
div.appeal_ph p.lesp_s { display:none; }
div.appeal_ph p.lesp_p { display:block; margin:0; }
div.appeal_txt { padding:0 0 0 30px; width:calc( 100% - 400px ); }

/* イラスト */
div.bottom_illust div.tab { display:none; }
div.bottom_illust div.pc { display:block; }
div.bottom_illust img { position:relative; z-index:2; transform:translate(0,90px);}

}