@charset "utf-8";

section#main_block { padding-top:100px; background-color:#fefefe; }

div#main_block_bg { position:relative; /* background-image: url("../img/main_history.jpg");  background-repeat: no-repeat; background-position: center top; background-size: contain; background-attachment: fixed; */ }
div#main_block_bg::before { content: ""; display: block; position:fixed; top:0; left:0; z-index: -1; width:100%; height:80%; background-repeat: repeat-y; background-image:url('../img/main_access.jpg'); background-position: top center; background-size: cover; }

div#main_block_bg > h2 { font-size:22px; letter-spacing: 0.2em; font-weight: normal; position:absolute; top:300px; left:50%; transform: translateX(-50%); }
div#main_block_bg > h2::before { content: ""; position:absolute; top:-110%; left:50%; transform: translateX(-50%); width:40px; height:40px; background-image: url("../img/logo_green.png"); background-size: contain; background-repeat: no-repeat; background-position: center; }
div#main_block_bg > p { position:absolute; top:350px; left:50%; transform: translateX(-50%); }

@media screen and (max-width:900px) {
    section#main_block { padding-top:70px; background-color:#fefefe; }
    section#main_block::before { height:70px; }
    div#main_block_bg::before { height:50%; background-image:url('../img/main_access.jpg'); background-repeat: no-repeat; background-position: top center; background-size: contain; }
    div#main_block_bg > h2 { font-size:18px; top:230px; }
    div#main_block_bg > h2::before{ top:-110%; width:32px; height:32px; }
    div#main_block_bg > p { top:275px; width:100%; }
}

#white_bg { background-color:#fefefe; }

#content_block { padding:180px 0 100px; width:720px; margin:auto; margin-top:200px; text-align: left; }
#content_block > h3 { padding-bottom:10px; margin-bottom:20px; text-align:left; font-size:22px; font-weight: normal; letter-spacing: 0.2em; border-bottom:dashed 1px #8bcb81; }
#content_block > h3 > span { font-size:18px; letter-spacing: 0.1em; position:relative; padding-left:2em; }
#content_block > h3 > span::before { content:""; top:50%; left:0; width:1.5em; height:1px; background-color:#555; position:absolute; display: inline-block; }
@media screen and (max-width:900px) {
    #content_block { padding:130px 0 80px; width:84%; margin-top:160px; }
    #content_block > h3 { font-size:18px; }
    #content_block > h3 > span { font-size:16px; }
}

#news_flex { width:100%; max-width:900px; margin:auto; display:flex; justify-content: flex-start; flex-wrap: wrap; align-items: flex-start; gap:4%; position: relative; z-index: 10; }
#news_flex > div { width:48%; margin-bottom:20px; }
#news_flex > div > a { display: flex; justify-content: flex-start; align-items: stretch; color:#333; background-color:#f8f8f8; transition: all .5s ease-in-out; }
#news_flex > div > a:hover { filter: brightness(1.1); transform: scale(1.01); }
#news_flex > div > a > div:first-child { width:120px; height:120px; }
#news_flex > div > a > div:first-child img { width:120px; height:120px; object-fit: cover; }
#news_flex > div > a > div:last-child { text-align:left; padding:15px 25px; position:relative; width:100%; }
#news_flex > div > a > div:last-child::before { content: ''; position: absolute; bottom:10px; right:6%; width: 25%; height: 1px; background:#8bcb81; transition: all .5s; }
#news_flex > div > a:hover > div:last-child::before { right:2%; }
#news_flex > div > a > div:last-child::after { content: ''; position: absolute; bottom:14px; right:6%; width: 13px; height:1px; background:#8bcb81; transform: rotate(35deg); transition: all .5s; }
#news_flex > div > a:hover > div:last-child::after { right:2%; }
#news_flex > div > a > div:last-child p.news_date { font-size:12px; color:#888; padding-bottom:5px; }
#news_flex > div > a > div:last-child p.news_title { font-size:15px; line-height: 1.5; letter-spacing: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media screen and (max-width:900px) {
    #news_flex { flex-direction: column; gap:0; }
    #news_flex > div { width:100%; }
    #news_flex > div > a > div:last-child p.news_date { font-size:11px; }
    #news_flex > div > a > div:last-child p.news_title { font-size:14px; }
}