@charset "utf-8";

#main_block { padding-top:100px; }
#main_block::before { content: ""; position:absolute; top:0; left:0; width:100%; height:100px; background-color:#fff; z-index: 0; }
#main_block div#main_img { color:#fefefe; width:100%; height:650px; background-image: url("/img/main01.jpg");  background-repeat: no-repeat; background-position: center top; background-size: cover; background-attachment: fixed; position:relative; overflow: hidden; z-index: -1;  }
#main_block div#main_img::before { content: ""; background: rgba(0,0,0,0.4); position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; }
#main_block div#main_img > div { position:absolute; width:90%; margin:auto; top:49%; left:50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%, -50%); }
#main_block div#main_img h2 { font-size:24px; letter-spacing: 0.4em; font-weight: 100; padding-bottom:20px; }
#main_block div#main_img h3 img { width:100%; max-width:460px; margin:auto; }
#main_block div#main_img p { padding-top:15px; font-size:18px; letter-spacing: 1em; font-family: 'Inter', sans-serif; }
@media screen and (max-width:900px) {
    #main_block { padding-top:70px; }
    #main_block::before { height:70px; }
    #main_block div#main_img { color:#fefefe; width:100%; height:420px; background-image: none; background-repeat: no-repeat; background-position: center; background-size: cover; position:relative; overflow: hidden; z-index: -1;  }
    #main_block div#main_img::before { content: ""; background: rgba(0,0,0,0.4); position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; left: 0; }
    #main_block div#main_img::after { background-image: url("../img/main01.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; background-color:#fefefe; content: ""; height: 100vh; left: 0; position: fixed; top: 0; width: 100%; z-index: -2; }
    #main_block div#main_img h2 { font-size:17px; letter-spacing: 0.3em; }
    #main_block div#main_img h3 img { width:80%; }
    #main_block div#main_img p { font-size:15px; letter-spacing: 0.8em; padding-top:20px; }
}


#main_movie { padding-top:100px; }
#main_movie #movie_block { position:relative; }
#main_movie #movie_block video { width:100%; height:680px; object-fit: cover; }
#main_movie #movie_block #movie_txt { position:absolute; top:50%; left:50%; transform: translate(-50%, -52%); }
#main_movie #movie_block #movie_txt h2 { font-size:24px; color:#fefefe; letter-spacing: 0.4em; font-weight: 100; padding-bottom:20px; }
#main_movie #movie_block #movie_txt h3 img { width:100%; max-width:460px; margin:auto; }
#main_movie #movie_block #movie_txt p { padding-top:15px; color:#fefefe; font-size:18px; letter-spacing: 1em; font-family: 'Inter', sans-serif; }
@media screen and (max-width:900px) {
    #main_movie { padding-top:70px; }
    #main_movie #movie_block video { height:500px; }
    #main_movie #movie_block #movie_txt { width:100%; }
    #main_movie #movie_block #movie_txt h2 { font-size:17px; letter-spacing: 0.2em; }
    #main_movie #movie_block #movie_txt h3 img { width:70%; }
    #main_movie #movie_block #movie_txt p { font-size:14px; letter-spacing: 0.8em; }
}




#copy_block { padding-top:80px; padding-bottom:80px; background-color:#fefefe; position:relative; }
/*#copy_block #copy_content::before { content: ""; position: absolute; width:280px; height:220px; background-image: url("../img/icon04.png"); background-repeat: no-repeat; background-size: contain; top:40%; left:50%; transform: translateX(-200%); top:14%; z-index: 0; }*/
#copy_block #copy_content h2 { font-size:24px; font-weight: 100; letter-spacing: 0.5em; margin-bottom:40px; padding-bottom:35px; position:relative; display: inline-block; }
#copy_block #copy_content h2::after { content: ""; position:absolute; bottom:0; left:20%; width:60%; height:20px; background-image: url("../img/icon02.png"); background-position:center; background-repeat: no-repeat; background-size: contain; }
#copy_block #copy_content p { letter-spacing: 2px; line-height: 2; padding-bottom:25px; }
#copy_block #copy_time { width:100%; max-width: 660px; background-color:#faf9f4; padding:30px; margin:auto; margin-top:50px; margin-bottom:30px; }
#copy_block #copy_time > p { display: inline-block; padding:50px; width:100%; border:solid 1px #e4dfcc; font-size:20px; letter-spacing: 0.2em; }
#copy_block #copy_time > p span.copy_timeInfo { display: block; font-size:13px; letter-spacing: 0.1em; color:#666; }
@media screen and (max-width:900px) {
    #copy_block { padding-top:40px; padding-bottom:60px; }
    #copy_block #copy_content { width:84%; margin:auto; }
    #copy_block #copy_content h2 { font-size:18px; letter-spacing: 0.3em; }
    #copy_block #copy_content p { text-align:left; line-height: 1.8; padding-bottom:20px; }
    #copy_block #copy_time { width:84%; margin-top:30px; padding:3%; }
    #copy_block #copy_time > p { padding:5%; font-size:15px;  }
    #copy_block #copy_time > p span.copy_timeInfo { font-size:10px; letter-spacing: 1px; }
}

#copy_block #photo_01 { margin-top:100px; width:100%; height:380px; overflow: hidden; position: relative; }
#copy_block #photo_01::before { content: "Yoroi Jinja"; position:absolute; bottom:calc(2.2%); left:5%; color:rgba(255,255,255,0.5); font-size:18px; letter-spacing: 0.5em; font-family: 'Inter', sans-serif; z-index: 10; }
#copy_block #photo_01::after { content: ""; position:absolute; width:90%; height:90%; border:solid 1px rgba(255,255,255,0.5); top:5%; left:5%; }
#copy_block #photo_01 img.img_parallax { width:100%; }
@media screen and (max-width:900px) {
    #copy_block #photo_01 { height:260px; margin-top:60px; }
    #copy_block #photo_01::before { font-size:14px; letter-spacing: 0.3em; }
}
/*
#copy_block #photo_01 { margin-top:100px; width:100%; height:320px; background-image: url("/img/photo01.jpg"); background-color:#fefefe; background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; }
@media screen and (max-width:900px) {
    #copy_block #photo_01 { height:260px; margin-top:60px; }
    #copy_block #photo_01::after { content: ""; position:fixed; background-image: url("/img/photo01.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100vh; left: 0; top: 0; width: 100%; z-index: -1; }
}
*/

#news_block { background-color:#fefefe; padding:80px 0; position:relative; overflow: hidden; }
#news_block::before { content: ""; position: absolute; width:280px; height:220px; background-image: url("../img/icon03.png"); background-repeat: no-repeat; background-size: contain; right:50%; transform: translateX(230%); top:100px; z-index: 1; }
#news_block h2 { font-size:24px; font-weight: 100; letter-spacing: 0.4em; padding-bottom:20px; position:relative; margin-bottom:10px; }
#news_block h2::before { content: ""; position:absolute; top:-80%; 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; }
@media screen and (max-width:900px) {
    #news_block { padding:60px 0; }
    #news_block::before { width:200px; height:160px; top:80%; right:50%; transform: translateX(120%); }
    #news_block h2 { font-size:18px; }
    #news_block h2::before { width:30px; height:30px; }
}

#news_flex { width:84%; max-width:900px; margin:auto; display:flex; justify-content: center; 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; line-clamp: 2; -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; }
}

#news_block #news_link { margin-top:20px; z-index:10; }
#news_block #news_link a { color:#333; letter-spacing: 1px; position:relative; display: inline-block; transition: all 0.3s ease-in-out; }
#news_block #news_link a:hover { color:#777; }
#news_block #news_link a::before { width:0; height:1px; left:0; bottom:0; background-color:#777; content:""; position:absolute; transition:all 0.4s ease-in-out; }
#news_block #news_link a:hover::before { width:100%; transform-origin: left bottom; }
#news_block #news_link a::after { content:"＞"; padding-left:5px; transition: all 0.3s ease-in-out; }
#news_block #news_link a:hover::after { padding-left:10px; }
@media screen and (max-width:900px) {
    #news_block #news_link a { border:solid 1px #333; width:70%; line-height: 2.4; z-index:10; background-color:#fefefe; }
    #news_block #news_link a:hover::before { width:0; }
}


#banner_block { background-color:#fefefe; padding-top:50px; padding-bottom:60px; }
#banner_block > div.banner_content { width:800px; height:400px; margin:auto; margin-bottom:40px; box-sizing: border-box; position:relative; }
#banner_block > div.banner_content::before { top:5%; left:-2.5%; background-color: #8bcb81; position:absolute; content: ""; width:0; height:1px; transition: all 0.3s linear; transition-delay: 0.3s; }
#banner_block > div.banner_content::after { bottom:5%; right:-2.5%; background-color: #8bcb81; position:absolute; content: ""; width:0; height:1px; transition: all 0.3s linear; transition-delay: 0.3s; }
#banner_block > div.banner_content:hover::before { width:105%; transition-delay: 0.3s; }
#banner_block > div.banner_content:hover::after { width:105%; transition-delay: 0.3s; }
#banner_block > div.banner_content.image_01 { background-image: url("/img/banner01.jpg"); background-position: top left; background-repeat: no-repeat; background-origin: center center; background-size: contain; transition: all 0.3s linear; }
#banner_block > div.banner_content.image_02 { background-image: url("/img/banner02.jpg"); background-position: top left; background-repeat: no-repeat; background-origin: center center; background-size: contain; transition: all 0.3s linear; }
#banner_block > div.banner_content.image_01:hover { filter: brightness(1.2); transform: scale(1.005); }
#banner_block > div.banner_content.image_02:hover { filter: brightness(1.2); transform: scale(1.005); }
#banner_block > div.banner_content > a { display: block; width:100%; height:100%; position:relative; color:#fefefe; }
#banner_block > div.banner_content > a::before { bottom:5%; left:-2.5%; background-color: #8bcb81; position:absolute; content: ""; width:1px; height:0; transition: all 0.3s linear; }
#banner_block > div.banner_content > a::after { top:5%; right:-2.5%; background-color: #8bcb81; position:absolute; content: ""; width:1px; height:0; transition: all 0.3s linear; }
#banner_block > div.banner_content > a:hover::before { height:90%; }
#banner_block > div.banner_content > a:hover::after { height:90%; }
#banner_block > div.banner_content > a > div.banner_title { position:absolute; top:51%; left:50%; width:100%; transform: translate(-50%,-50%); text-align:center; margin:auto; }
#banner_block > div.banner_content > a > div.banner_title p { font-size:24px; font-weight: 100; letter-spacing: 0.4em; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin:auto; }
#banner_block > div.banner_content > a > div.banner_title p::before { content:""; display: inline; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); width:200px; height:172px; background: url("/img/icon01.png"); background-size: cover; background-repeat: no-repeat; background-position: center; }
#banner_block > div.banner_content > a:hover > div.banner_title p::after { transform-origin: center; transform: translate(-50%,-50%) scale(1.2);  }
#banner_block > div.banner_content > a > div.banner_info { position:absolute; top:50%; left:15%; transform: translate(-50%,-50%); }
#banner_block > div.banner_content > a > div.banner_info p { font-size:15px; font-weight: 100; letter-spacing: 0.3em; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin:auto; }
#banner_block > div.banner_content > a > div.banner_link { position:absolute; top: 50%; left:10%; transform: translate(-50%,-50%); }
#banner_block > div.banner_content > a > div.banner_link p { font-size:14px; font-weight: 100; letter-spacing: 0.2em; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin:auto; border:solid 0.8px #fff; padding:15px 1px 10px; transition: all 1s ease-in-out; }
#banner_block > div.banner_content > a:hover > div.banner_link p { position:relative; top:1px; background-color:rgba(240,240,240,0.3); }
#banner_block > div img { width:100%; vertical-align: bottom; }
@media screen and (max-width:900px) {
    #banner_block { padding-top:20px; padding-bottom:20px; }
    #banner_block > div.banner_content { height:280px; width:84%; margin:20px auto; }
    #banner_block > div.banner_content.image_01 { background-size: cover; background-position: center; }
    #banner_block > div.banner_content.image_02 { background-size: cover; background-position: center; }
    #banner_block > div.banner_content > a > div.banner_title p { font-size:18px; letter-spacing: 0.3em; }
    #banner_block > div.banner_content > a > div.banner_title p::after { width:150px; height:129px;  }
    #banner_block > div.banner_content > a > div.banner_info { left:16%; }
    #banner_block > div.banner_content > a > div.banner_info p { font-size:12px; letter-spacing: 0.2em; }
    #banner_block > div.banner_content > a > div.banner_link { left:6%; }
    #banner_block > div.banner_content > a > div.banner_link p { font-size:12px; }

    #banner_block > div.banner_content::before { left:-5%; }
    #banner_block > div.banner_content::after { right:-5%; }
    #banner_block > div.banner_content.line_effect::before { width:110%; transition-delay: 0.3s; }
    #banner_block > div.banner_content.line_effect::after { width:110%; transition-delay: 0.3s; }
    #banner_block > div.banner_content.line_effect > a::before { height:90%; }
    #banner_block > div.banner_content.line_effect > a::after { height:90%; }
    #banner_block > div.banner_content > a::before { left:-5%; }
    #banner_block > div.banner_content > a::after { right:-5%; }
}

#banner_block #banner_flex { width:800px; display: flex; margin:100px auto; }
#banner_block #banner_flex > div { max-width:400px; width:50%; }
#banner_block #banner_flex > div > a img { width:100%; transition: all 0.4s ease-in-out; }
#banner_block #banner_flex > div > a:hover img { transform: scale(0.98); filter: brightness(0.8); }
@media screen and (max-width:1000px) {
    #banner_block #banner_flex { width:84%; max-width:600px; flex-direction: column; margin:60px auto; }
    #banner_block #banner_flex > div { width: 100%; }
}