@charset "UTF-8";

#loading { width: 100vw; height: 100vh; transition: all 3s; background-color: #fefefe; position: fixed; top: 0; left: 0; z-index: 10010; display: hidden; }
#loading.loaded { opacity: 0; visibility: hidden; }
#loading_screen { width:100vw; height:100vh; background:url('../img/bg03.jpg'); background-size: cover; background-position: center; position: relative; overflow: hidden; }
#loading_screen::before { content: ""; width:100vw; height:100vh; background:url('../img/bg01.webp'); background-size: cover; background-position: center; background-blend-mode:overlay; mix-blend-mode:overlay; position:absolute; top:0; left: 0; z-index: 11; }
#loading_screen::after { content: ""; width:100vw; height:100vh; background:url('../img/bg02.png'); background-size: cover; background-position: center; position:absolute; top:0; left: 0; z-index: 10; animation: infinite bgLoading 10s linear;  }
@keyframes bgLoading { 
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
#left_cloud { position:absolute; z-index: 12; width:80%; top:50%; transform: translateY(-100%); left:-30%; animation: cloudLeft 15s linear;  }
#left_cloud > img { width:100%; }
@keyframes cloudLeft { 
    0% { left:-30%; transform: translateY(-100%) scale(1); }
    100% { left:0; transform: translateY(-100%) scale(1.4); }
}
#right_cloud { position:absolute; z-index: 13; width:80%; top:50%; transform: translateY(-10%); right:-30%; animation: cloudRight 25s linear;  }
#right_cloud > img { width:100%; }
@keyframes cloudRight { 
    0% { right:-30%; transform: translateY(-10%) scale(1); }
    100% { right:0; transform: translateY(-10%) scale(2); }
}

#loading_txt { position:absolute; z-index: 121; top:50%; left:50%; transform: translate(-50%,-50%); animation: loadingTxt 10s linear; }
#loading_txt > p { font-size:26px; letter-spacing: 0.5em; }
@keyframes loadingTxt {
    0% { transform: translate(-50%,-50%) scale(1); }
    100% { transform: translate(-50%,-50%) scale(1.5); }
}
@media (max-width:900px) {
    #loading_txt { width:100%; top:45%; }
    #loading_txt > p { font-size:18px; letter-spacing: 0.5em; text-align:center; }
}

header::before { content: ""; display: block; width:100%; height:5px; background: linear-gradient(to right, #cdf4f4, #99c2c4); }

h1 { font-size:28px; width:420px; font-weight: normal; letter-spacing: 2px; margin:auto; margin-top:50px; margin-bottom:35px; text-align:center; padding-top:60px; position:relative; }
h1 > img { width:100%; }
h1::before { content: ""; display: block; position: absolute; width:50px; height:64px; top:-10px; left:50%; transform: translateX(-95%); background:url("../img/icon_yatagarasu.svg"); background-repeat: no-repeat; background-size: contain; }
h1::after { content: ""; display: block; position: absolute; width:36px; height:42px; top:0; left:50%; transform: translateX(45%); background:url("../img/icon_mitsudomoe.svg"); background-repeat: no-repeat; background-size: contain; }

div#main_img { width:100%; height:640px; position:relative; overflow: hidden; }
div#main_img::after { content: ""; display: block; position:absolute; bottom:0; width:100%; height: 20px; background: linear-gradient(to right, #cdf4f4, #99c2c4); z-index: 100; }
div#main_img > div { width:100%; height:640px; background:url("../img/main.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; position:relative; animation: infinite bgScall 30s ease-in-out; position:relative; }
@keyframes bgScall { 
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
@media (max-width:900px) {
    header::before { height:3px; }

    h1 { font-size:21px; margin-top:30px; margin-bottom:18px; padding-top:34px; width:60%; max-width:340px; }
    h1::before { width:40px; height:44px; transform: translateX(-80%); }
    h1::after { width:30px; height:26px; transform: translateX(40%); }

    div#main_img { height:420px; }
    div#main_img::after { height:10px; }
    div#main_img > div { height:420px; background:url("../img/main_sp.webp"); background-repeat: no-repeat; background-position: center; background-size: cover; }

    @keyframes bgScall { 
        0% { transform: scale(1); }
        50% { transform: scale(1.3); }
    }
}



div#copy_bg { background: radial-gradient(#ffffff, #e9f5f8); position:relative; z-index: 0; width:100%; overflow: hidden; }
div#bgCloud01 { position:absolute; top:-220px; left:-200px; z-index: -1; width:1000px; animation: infinite 15s bgCloudLeft ease-in-out; }
div#bgCloud01 > img { width:100%; }
div#bgCloud02 { position:absolute; bottom:150px; right:-220px; z-index: -1; width:1000px; animation: infinite 20s bgCloudRight ease-in-out; }
div#bgCloud02 > img { width:100%; }
@keyframes bgCloudLeft {
    0% { left:-220px; top:-200px; transform: scale(1); opacity: 1; }
    50% { left:-180px; top:-150px; transform: scale(1.2); opacity: 0.7; }
    100% { left:-220px; top:-200px; transform: scale(1); opacity: 1; }
}
@keyframes bgCloudRight {
    0% { right:-220px; bottom:150px; transform: scale(1); opacity: 1; }
    60% { right:-180px; bottom:180px; transform: scale(1.2); opacity: 0.7; }
    100% { right:-220px; bottom:150px; transform: scale(1); opacity: 1; }
}



div#copy_block { margin:auto; padding-top:60px; padding-bottom:80px; text-align:center; position:relative; z-index: 10; }
div#copy_block > h2 { font-size:28px; font-weight: normal; letter-spacing: 0.2em; }
div#copy_block > h2::before { content: ""; display: block; text-align:center; margin:auto; padding-bottom:50px; width:68px; height:44px; position:relative; background-image: url('../img/icon_img01.png'); background-repeat: no-repeat; background-size: contain; }
div#copy_block > p { font-size:15px; color: #5dbfc4; padding-top:40px; letter-spacing: 1px; }
@media (max-width:900px) {
    div#copy_block { padding-top:40px; padding-bottom:30px; }
    div#copy_block > h2 { font-size:18px; letter-spacing: 0.5em; }
    div#copy_block > h2::before { padding-bottom:30px; width:48px; height:26px; }
    div#copy_block > p { font-size:12px; padding-top:25px; }
}

div#copy_block p#toPrayerLink { margin:auto; margin-bottom:80px; padding-top:30px; }
div#copy_block p#toPrayerLink > a { font-size:22px; color:#c64242; background:linear-gradient(to right, #c64242 50%, rgba(255,255,255,0) 50%); background-size: 200% 100%; background-position: top right; letter-spacing: 0.1em; border:solid 1px #c64242; display: block; width:60%; max-width:540px; margin:auto; padding:1px 0 3px; border-radius: 2px; position:relative; transition: all 0.6s ease-in-out; }
div#copy_block p#toPrayerLink > a::before { content: ""; width:8px; height:8px; border-bottom:solid 1px #c64242; border-right:solid 1px #c64242; display: block; position:absolute; top:50%; right:0.5em; transform: translateY(-50%) rotateZ(-45deg); transition: all 0.6s ease-in-out; }
div#copy_block p#toPrayerLink > a:hover { color:#fefefe; background-position: top left; }
div#copy_block p#toPrayerLink > a:hover::before { border-bottom:solid 1px #fefefe; border-right:solid 1px #fefefe; }
@media (max-width:900px) {
    div#copy_block p#toPrayerLink { margin-bottom:50px; }
    div#copy_block p#toPrayerLink > a { font-size:16px; width:84%; }
    div#copy_block p#toPrayerLink > a::before { width:6px; height:6px; }
}

div#news_block { margin:50px auto; width:100%;  position: relative; }
div#news_block::before { content:""; display: block; bottom:110px; position:absolute; width:100%; height:10px; background:linear-gradient(to right, #abdee0 0%, #5dbfc4 100%); }
div#news_block::after { content:""; display: block; bottom:-50px; position:absolute; width:100%; height:160px; background:linear-gradient(to right, #cdf4f4 0%, #99c2c4 100%); }
div#news_lineup { display: flex; gap:3%; align-items: center; width:100%; overflow: hidden; }
div#news_lineup > div:first-child { width:30%; min-width: 30%; text-align: center; }
div#news_lineup > div:first-child > h3 { font-size:32px; font-weight: normal; letter-spacing: 0.1em; margin-left:30%; }
div#news_lineup > div:last-child { width:70%; min-width: 70%; }
@media (max-width:900px) {
    div#news_lineup { flex-direction: column; }
    div#news_lineup > div:first-child { width:100%; margin:auto; }
    div#news_lineup > div:first-child > h3 { font-size:21px; margin-left: 0; letter-spacing: 0.5em; margin-bottom:20px; }
    div#news_lineup > div:last-child { width:94%; min-width: 94%; }
}


div.swiper-wrapper { margin:auto; }
div.swiper-slide { background-color:#fff; position:relative; margin-top:5px; transition:all 0.3s ease-in-out; box-sizing: border-box; }
div.swiper-slide:hover { transform: translateY(-5px); }
div.swiper-slide::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.swiper-slide:hover::after { right:8px; border-bottom:solid 1px #5bc1c8; border-right:solid 1px #5bc1c8; }
div.item { width:100%; height:100%; }
div.swiper-slide div.news_img { text-align:center; background-color:#ddf4f4; }
div.swiper-slide div.news_img img { width:100%; height:200px; object-fit: cover; object-position: 50% 50%; transition:all 0.3s ease-in-out; }
div.swiper-slide div.news_img img.vertical_photo { width:auto; }
div.swiper-slide:hover div.news_img img { filter: brightness(1.2); } 
div.item_txt { color:#333; padding:3% 7% 5%; box-sizing: border-box; min-height: 181px; }
div.item_txt div.news_date > p { font-size:16px; padding-left:20px; 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.swiper-slide div.news_img img { height:180px; }
    div.item_txt { padding:1% 7% 5%; 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:60px auto 120px; text-align:center; }
div#news_link > a { font-size:16px; letter-spacing: 1px; line-height: 2.2; padding-top:3px; padding-bottom:3px; 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; 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%); right:-36px; border-bottom:solid 1px #333; border-right: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 { right:-46px; }
@media (max-width:900px) {
    div#news_link { margin:30px auto 80px; }
    div#news_link > a { font-size:14px; }
    div#news_link > a::after { width:50px; right:-25px; }
    div#news_link > a:hover::after { right:-35px; }
}


#nittaphoto_block { position:relative; }

#nittaphoto_text { padding-top:40px; padding-left:5%; position:absolute; }
#nittaphoto_text div#first_txt { display: block; position:relative; padding-bottom:10px; margin-bottom:40px; }
#nittaphoto_text div#first_txt::after { content: ""; width:100px; height:2px; background-color:#fefefe; position:absolute; bottom:0; left:0; }
#nittaphoto_text div#first_txt > h4 { font-size:15px; letter-spacing: 1px; color:#fefefe; font-weight: normal; }
#nittaphoto_text div#first_txt > h4::before { content: "【公式】"; letter-spacing: 2px; display: block; }
#nittaphoto_text div#first_txt > p { font-size:28px; color:#fefefe; letter-spacing: 0.5em; font-weight: normal; }
#nittaphoto_text div#second_txt > p { letter-spacing: 2px; display: inline-block; background-color:#fefefe; margin-bottom:10px; padding:1px 20px; }
#nittaphoto_text div#second_txt > a { letter-spacing: 2px; display: inline-block; color:#fefefe; border:solid 1px #fefefe; padding:2px 40px 3px; margin-top:10px; position:relative; }
#nittaphoto_text div#second_txt > a:hover { background-color: #287784; }
#nittaphoto_text div#second_txt > a::after { content: ""; top:33%; transform: translateY(-50%); right:-26px; border-bottom:solid 1px #fefefe; border-right:solid 1px #fefefe; width:50px; height:5px; transform: skew(45deg); background-position: right; position:absolute; transition:all 0.4s ease-in-out }
#nittaphoto_text div#second_txt > a:hover::after { right:-31px; }
@media (max-width:900px) {
    #nittaphoto_text { padding-top:25px; padding-left:0; padding-bottom:30px; box-sizing: border-box; position:relative; background-color:#58a7b4; }
    #nittaphoto_text div#first_txt { width:84%; margin:auto; margin-bottom:20px; }
    #nittaphoto_text div#first_txt > h4 { font-size:13px; }
    #nittaphoto_text div#first_txt > h4::before { display: inline-block; }
    #nittaphoto_text div#first_txt > p { font-size:21px; }
    #nittaphoto_text div#second_txt { width:84%; margin:auto; }
    #nittaphoto_text div#second_txt > p:first-child { font-size:11px; box-sizing: border-box; width:100%; line-height: 1.5; letter-spacing: 1px; margin-bottom:0; vertical-align: bottom; padding:10px 15px 0; }
    #nittaphoto_text div#second_txt > p:nth-child(3) { font-size:11px; box-sizing: border-box; width:100%; line-height: 1.5; letter-spacing: 1px; margin-bottom:10px; padding:0 15px 10px; }
    #nittaphoto_text div#second_txt > a { width:40%; text-align:center; }
}

#nittaphoto_bg { display: flex; width:100%; height:340px; gap:1%; overflow: hidden; position:relative; top:0; z-index: -1; }
#nittaphoto_bg > div { height:340px; }
#nittaphoto_bg > div#bg01 { width:23%; clip-path: polygon(0 0, 100% 0, calc(100% + 50px) 100%, 0 100%); background-color:#58a7b4; transform: scale(2); }
#nittaphoto_bg > div#bg02 { width:18%; clip-path: polygon(0 0, 100% 0, calc(100% + 50px) 100%, 50px 100%); }
#nittaphoto_bg > div#bg03 { width:18%; clip-path: polygon(0 0, 100% 0, calc(100% + 50px) 100%, 50px 100%); }
#nittaphoto_bg > div#bg04 { width:18%; clip-path: polygon(0 0, 100% 0, calc(100% + 50px) 100%, 50px 100%); }
#nittaphoto_bg > div#bg05 { width:19%; clip-path: polygon(0 0, 100% 0, 100% 100%, 50px 100%); }
#nittaphoto_bg > div img { width:100%; height:340px; object-fit: cover; object-position: center; transform: scale(1.6); }
#nittaphoto_bg > div#bg02 img { object-position: 60% 20%; transform: scale(1.2); position:relative; left:10%; overflow: visible; }
#nittaphoto_bg > div#bg03 img { object-position: center 10%; position:relative; top:8%; }
#nittaphoto_bg > div#bg04 img { object-position: center 20%; }
#nittaphoto_bg > div#bg05 img { object-position: center 20%; }
@media (max-width:900px) {
    #nittaphoto_bg { flex-wrap: wrap; gap:1%; height:auto; overflow: auto; box-sizing: border-box; }
    #nittaphoto_bg > div { height:180px; }
    #nittaphoto_bg > div#bg01 { width:100%; transform: scale(1); display: none; height:auto; }
    #nittaphoto_bg > div#bg02 { width:18%; clip-path: polygon(0 0, 100% 0, calc(100% + 50px) 100%, 0 100%); }
    #nittaphoto_bg > div#bg03 { width:25%;  }
    #nittaphoto_bg > div#bg04 { width:25%; }
    #nittaphoto_bg > div#bg05 { width:29%; }
    #nittaphoto_bg > div#bg02 img { transform: scale(0.9); position:relative; top:-27%; left:17%; overflow: visible; }
    #nittaphoto_bg > div#bg03 img { transform: scale(1.4); position:relative; top:-1%; left:6%; overflow: visible; }
    #nittaphoto_bg > div#bg04 img { transform: translateX(20px) scale(1.2); position:relative; top:-30%; left:-14%; overflow: visible; }
    #nittaphoto_bg > div#bg05 img { transform: scale(1); position:relative; top:-30%; }
    #nittaphoto_bg > div img { transform: translateX(30px) scale(1.9); }
}
@media (max-width:600px) {
    #nittaphoto_bg > div#bg02 img { transform: scale(0.7); top:-36%; left:31%; }
    _::-webkit-full-page-media, _:future, :root #nittaphoto_bg > div#bg02 img { left:-38%; width:245%; }
    _::-webkit-full-page-media, _:future, :root #nittaphoto_bg > div#bg03 img { left:-40%; width:200%; }
    _::-webkit-full-page-media, _:future, :root #nittaphoto_bg > div#bg04 img { left:-64%; width:200%; }
}



div#note_block { margin:60px auto 50px; text-align:center; }
div#note_block div > button { color:#333333; display: block; background-color:#fefefe; margin:auto; border:solid 10px #16a0a8; border-image: linear-gradient(to right, #cdf4f4, #99c2c4) 10; padding-top:30px; padding-bottom:30px; width:84%; max-width:800px; box-sizing: border-box; font-family: "Hina Mincho", serif; transition: all 0.6s ease-in-out; }
div#note_block div > button:hover { color:#000; background-color:#e1edf1; cursor: pointer; filter:brightness(1.1); border:solid 10px #16a0a8; border-image: linear-gradient(to right, #99c2c4, #36b4ba) 10; }
div#note_block div > button > p:first-child { font-size:20px; letter-spacing: 3px; font-weight: normal; display: inline-block; position:relative; padding-bottom:10px; margin-bottom:15px; }
div#note_block div > button > p:first-child::after { content: ""; position:absolute; background-color: #333333; width:70%; height:1px; bottom:0; left:50%; transform: translateX(-50%); }
div#note_block div > button:hover > p:first-child::after { background-color: #16a0a8; }
div#note_block div > button > p:last-child { letter-spacing: 1px; }
div#note_block div > button > p:last-child > span { border-bottom: solid #333 1px; }
div#note_block div > button:hover > p:last-child > span { border-bottom: solid #16a0a8 1px; }
@media (max-width:900px) {
    div#note_block { margin:40px auto 30px; }
    div#note_block div > button { width:90%; border:solid 5px #16a0a8; border-image: linear-gradient(to right, #cdf4f4, #99c2c4) 1; }
    div#note_block div > button:hover { border:solid 5px #16a0a8; border-image: linear-gradient(to right, #99c2c4, #36b4ba) 1; }
    div#note_block div > button > p:first-child { font-size:15px; letter-spacing: 3px; }
    div#note_block div > button > p:last-child { font-size:11px; letter-spacing: 2px; }
}

/* モーダルウィンドウ */
.modal { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; background: rgba(0, 0, 0, 0.8); z-index: 99999; animation-name: show; animation-duration: 0.5s; }
.modal-content { position: relative; background-color: #fff; margin: 10% auto; border: 1px solid #888; width: 84%; max-width:800px; padding:60px; box-sizing: border-box; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); position:relative; }
@keyframes show {
    0% { display: none; opacity: 0; }
    100% { display: block; opacity: 1; }
}
.modal-content #modal_close { position: absolute; top:10px; right:30px; }
.modal-content #modal_close p.close { font-size:40px; font-weight: normal; }
.modal-content #modal_title { margin-bottom:20px; }
.modal-content #modal_title h3 { font-size:21px; font-weight: normal; letter-spacing: 1px; }
.modal-content #modal_title p { font-size:16px; letter-spacing: 1px; }
.modal-content #modal_txt { padding:30px; }
.modal-content #modal_txt p { text-align:left; line-height: 1.6; margin-bottom:15px; }
.modal-content #modal_txt p.caution_txt { color:#cd2222; }
.modal-content #modal_txt p.right_txt { text-align:right; }
.close { color: #aaa; font-size: 16px; }
.close:hover, .close:focus { color: black; cursor: pointer; }
@media (max-width:900px) {
    .modal-content { padding:50px 5% 30px; }
    .modal-content #modal_close { top:-10px; right:20px; }
    .modal-content #modal_title h3 { font-size:15px; letter-spacing: 0; }
    .modal-content #modal_title p { font-size:13px; }
    .modal-content #modal_txt { padding:5px; }
    .modal-content #modal_txt p.right_txt { font-size:11px; }
}


div#banner_block { margin:50px auto; text-align:center; }
div#banner_block a { display: block; margin:auto; width:90%; max-width: 800px; }
div#banner_block a img { width:100%; transition: all 0.5s ease-in-out; }
div#banner_block a:hover img { filter: brightness(1.2); }
@media (max-width:900px) {
    div#banner_block { margin:30px auto 40px; }
}


div#map_block { width:100%; margin-top:80px; }
div#map_block > iframe { width:100%; height:400px; vertical-align: bottom; }
div#map_block > a { font-size:13px; color:#fefefe; display: block; text-align:center; height:44px; line-height: 40px; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 400; font-style: normal; background: linear-gradient(to right,#fefefe, #cdf4f4, #99c2c4); background-size: 200% 100%; background-position: right top; transition:all 1s ease-in-out; }
div#map_block > a:hover { color:#16a0a8; background-position: left top; }
@media (max-width:900px) {
    div#map_block > iframe { height:240px; }
    div#map_block > a { height:38px; line-height: 38px; }
}