@charset "UTF-8";

header { background-color:#fefefe; padding-top:60px; padding-bottom:40px; }

h1 { font-size:28px; font-weight: normal; text-indent: 0.5em; letter-spacing: 0.5em; margin:auto; text-align:center; padding-top:40px; position:relative; }
h1::before { content: ""; display: block; position: absolute; width:50px; height:37px; top:0; left:50%; transform: translateX(-50%); background:url("../img/icon_img01.png"); background-repeat: no-repeat; background-size: contain; }
h1::after { content: ""; display: none; }
@media (max-width:900px) {
    header { padding-top:50px; padding-bottom:30px; }
    h1 { font-size:21px; padding-top:26px; }
    h1::before { width:32px; }
}

div#main_img { position:relative; height:240px; z-index: -1; }
div#main_img::before { content: ''; position:fixed; width:100%; height:50vh; z-index: -1; top:0; background:url("../img/main_news.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat;  }
div#main_img::after { content: ''; display: block; position:absolute; left:0; bottom:-10px; width:100%; height: 20px; background: linear-gradient(to right, #cdf4f4, #99c2c4); }

@media (max-width:900px) {
    div#main_img { height:150px; }
    div#main_img::after { height:10px; bottom:-5px; }
}


div#logo_icon { position:fixed; left:30px; top:30px; width:35%; max-width:250px; z-index: 10000; }
div#logo_icon img { width:100%; }
@media (max-width:900px) {
    div#logo_icon { top:15px; left:20px; }
}

div#news_block { margin:auto; padding-top:80px; padding-bottom:100px; width:100%;  position: relative; background:linear-gradient(to bottom, #ffffff 0%, #f5fafa 22%, #cbe3e5 100%); }
div#newsTop3 { display: flex; justify-content: flex-start; flex-wrap: wrap; width:940px; margin:auto; margin-bottom:100px; gap:20px; }
@media (max-width:900px) {
    div#news_block { padding-top:50px; padding-bottom:50px; }
    div#newsTop3 { width:84%; box-sizing: border-box; flex-direction: column;  }
}

div.item { background-color:#fff; width:300px; max-width:300px; box-sizing: border-box; position:relative; margin-top:5px; transition:all 0.3s ease-in-out; }
div.item:hover { transform: translateY(-5px); }
div.item::after { content:""; position:absolute; width:80px; height:5px; border-bottom:solid 1px #9dd4d8; border-right:solid 1px #9dd4d8; transform: skew(45deg); bottom:12px; right:15px; transition:all 0.5s ease-in-out; }
div.item:hover::after { right:8px; border-bottom:solid 1px #5bc1c8; border-right:solid 1px #5bc1c8; }
div.item { width:100%; height:100%; }
div.item div.news_img { text-align:center; background-color:#ddf4f4; }
div.item div.news_img img { width:100%; height:200px; object-fit: cover; object-position: 50% 50%; transition:all 0.3s ease-in-out; }
div.item div.news_img img.vertical_photo { width:auto; }
div.item:hover div.news_img img { filter: brightness(1.2); } 
div.item_txt { color:#333; padding:3% 7% 5%; box-sizing: border-box; min-height: 170px; }
div.item_txt div.news_date > p { font-size:16px; padding-left:15px; letter-spacing: 1px; position:relative; }
div.item_txt div.news_date > p::before { content:""; left:0; bottom:0; display: block; position:absolute; width:5px; height:70px; background-color: #9dd4d8; }
div.item_txt div.news_date > p > span { font-size:12px; }
div.item_txt div.news_title > p { font-size:16px; line-height: 1.4; padding-top:10px; padding-bottom:10px; }
div.item_txt div.news_txt > p { font-size:14px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
@media (max-width:900px) {
    div.item { margin:auto; }
    div.item div.news_img img { height:160px; }
    div.item_txt { padding:1% 6% 5%; height:auto; min-height: 140px; }
    div.item_txt div.news_date > p { font-size:15px; }
    div.item_txt div.news_date > p > span { font-size:11px; }
    div.item_txt div.news_title > p { font-size:15px; }
    div.item_txt div.news_txt > p { font-size:12px; }
}


div#news_link { margin:80px auto 20px; text-align:center; }
div#news_link > a { font-size:16px; letter-spacing: 1px; line-height: 2.2; display: block; width:60%; background:linear-gradient(to right, #cdf4f4 50%, #fefefe 50%); background-size:200% 100%; background-position: right top; transition: all 0.6s ease-in-out; max-width:540px; box-sizing: border-box; margin:auto; border:solid 1px #333; color:#333; position: relative; }
div#news_link > a:hover { background-position: left; }
div#news_link > a::after { content: ""; top:33%; transform: translateY(-50%); left:-41px; border-bottom:solid 1px #333; border-left:solid 1px #333; width:80px; height:5px; transform: skew(-45deg); background-position: right; position:absolute; transition:all 0.4s ease-in-out; }
div#news_link > a:hover::after { left:-51px; }
@media (max-width:900px) {
    div#news_link { margin:40px auto 30px }
    div#news_link > a { font-size:14px; }
    div#news_link > a::after { width:50px; left:-26px; }
    div#news_link > a:hover::after { left:-36px; }
}


div#news_content { background-color:#fefefe; width:84%; max-width:800px; padding:50px 80px; margin:auto; box-sizing: border-box; }
div#news_content > h2 { font-size:24px; font-weight: normal; letter-spacing: 0.1em; }
div#news_content > div#news_date { margin:auto; margin-bottom:20px; }
div#news_content > div#news_date > p { font-size:16px; letter-spacing: 1px; }
div#news_content > div#news_date > p > span { font-size:13px; }
div#news_content > div#news_img01 { margin:auto; margin-bottom:20px; width:100%; text-align: center; }
div#news_content > div#news_img01 > img { width:100%; height:auto; max-height: 360px; object-fit: contain; }
div#news_content > div#news_img01 > img.vertical_photo { height:480px; width:auto; margin:auto; text-align:center; }
div#news_content > div#news_txt > p { line-height: 2; padding-bottom:20px; }
div#news_content > div#news_txt > p.newsSubtitle { font-size:18px; color:#2ba1b8; padding-top:20px; padding-bottom:10px; }
div#news_content > div#news_txt > p.newsSubtitle::before { content:"◆ ";  }
@media (max-width:900px) {
    div#news_content { padding:20px 25px 10px; }
    div#news_content > h2 { font-size:16px; }
    div#news_content > div#news_date > p { font-size:15px; }
    div#news_content > div#news_date > p > span { font-size:12px; }
    div#news_content > div#news_img01 > img { height:auto; }
    div#news_content > div#news_img01 > img.vertical_photo { height:auto; max-height: 300px; width:auto; max-width: 100%; }
    div#news_content > div#news_txt > p { font-size:12px; line-height: 1.8; }
    div#news_content > div#news_txt > p.newsSubtitle { font-size:14px; }
}