@charset "utf-8";
main .main-slide div .s1 { background: url(../img/sub3/1/image1.jpg) no-repeat center/cover; }
main .main-slide div .s2 { background: url(../img/sub3/1/image2.jpg) no-repeat center/cover; }
main .main-slide div .s3 { background: url(../img/sub3/1/image3.jpg) no-repeat center/cover; }

main .contents p { margin: 0; }
main .contents h1 { margin-bottom: 80px; color: #FDFDFD; text-align: center; }


.finfo> .imgbox { position: relative; width: 50%; aspect-ratio: 1.414/1; border-top-right-radius: 340px; border-bottom-right-radius: 340px; background-image: url(../img/sub3/1/image1.jpg ); }
.finfo .imgbox .backimg { position: absolute; top: 50%; right: 15%; transform: translate(100%, -50%);  width: 80%; aspect-ratio: 1.414/1; background-image: url(../img/sub3/1/image1.jpg ); border-top-right-radius: 240px; border-bottom-right-radius: 240px; z-index: -1; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; padding-right: 10%; }
.finfo .imgbox .backimg::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: rgba(240, 240, 240,0.9); border-top-right-radius: 240px; border-bottom-right-radius: 240px; }
.finfo .imgbox .backimg> div { z-index: 1; width: 70%; }
.finfo .imgbox .backimg div .tit { margin-bottom: 80px; }
.finfo .imgbox .backimg div .tit::before { display: none; }
.finfo .imgbox .backimg div .tit::after { background: #0C073B; }
/* .finfo .c-1600 { display: flex align-items: flex-end; justify-content: center;  } */
.finfo .c-1600 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.finfo .c-1600 div { margin: 0 0 0 auto; width: fit-content; }
.finfo .c-1600 div .decop { writing-mode: vertical-lr; color: #737379; margin-bottom: 10px;  }
.finfo .c-1600 div span { display: block; width: 1px; height: 150px; background: #737379; margin: 0 auto; opacity: 0.5; }


.fdetail { background: rgba(115, 115, 121, 0.1); }
.fdetail div .img1 { position: relative; width: 50%; aspect-ratio: 4/3; background-image: url(../img/sub3/1/image3.jpg ); margin-bottom: 100px; }
.fdetail div .img1 div { position: absolute; top: 0; right: -20px; transform: translateX(100%); }
.fdetail div .img1 div .decop { writing-mode: vertical-lr; color: #737379; margin-bottom: 10px; }
.fdetail div .img1 div span { display: block; width: 1px; height: 150px; background: #737379; margin: 0 auto; opacity: 0.5; }
.fdetail div ul { display: flex; margin-bottom: 100px; }
.fdetail div ul li { width: 50%; }
.fdetail div ul> :first-child { display: flex; align-items: flex-end; padding-bottom: 160px; }
.fdetail div ul li .decop { color: rgba(115, 115, 121, 0.5); font-size: 24px; line-height: 1.5em; }
.fdetail div ul> :last-child { position: relative; }
.fdetail div ul .img2 { width: 50%; aspect-ratio: 1/1.414; background-image: url(../img/sub3/1/image2.jpg); margin-bottom: 60px; }
.fdetail div ul .img3 { position: absolute; right: 0; bottom: 0; width: 80%; aspect-ratio: 1/1.414; background-image: url(../img/sub3/1/image1.jpg); z-index: -1; }
.fdetail div ul .img3::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: rgba(240, 240, 240, 0.8); }
.fdetail div .img4 { display: flex; align-items: center; justify-content: center; width: 100%; height: 350px; background-image: url(../img/sub3/1/image2.jpg); }
.fdetail div .img4 div { font-family: 'SchoolPeaceOfMindNature'; font-size: 128px; color: #FDFDFD; line-height: 1em; }


@media screen and (max-width: 1440px){
    .finfo .imgbox .backimg { width: 90%; aspect-ratio: 1.618/1; }
    .finfo .imgbox .backimg div .tit{ margin-bottom: 40px;}
}

@media all and (max-width: 1280px){
    .finfo .imgbox .backimg div .tit{ margin-bottom: 20px;}
    .finfo .imgbox .backimg> div { width: 75%;}
}

@media screen and (max-width: 1024px){
    .finfo .imgbox { width: 35%; aspect-ratio: 3/4; border-top-right-radius: 240px; border-bottom-right-radius: 240px; }
    .finfo .imgbox .backimg { width: 160%; right: 27%; padding-right: 20%; }

    .fdetail div .img1 div span { height: 80px; }
    .fdetail div .img4 div { font-size: 100px; }
    .fdetail div ul li .decop { font-size: 16px; }
}

@media screen and (max-width: 840px){
    .finfo .imgbox { aspect-ratio: initial; height: 400px; border-top-right-radius: 180px; border-bottom-right-radius: 180px; }
    .finfo .imgbox .backimg { aspect-ratio: initial; width: 180%; height: 320px; }
    .finfo .c-1600 div span { height: 80px; }

    .fdetail div ul> :first-child { padding-bottom: 100px; }
    .fdetail div ul .img2 { width: 60%; }
    .fdetail div .img1 { aspect-ratio: 1/1; }
    .fdetail div .img4 div { font-size: 80px; }
    .fdetail div ul { margin-bottom: 60px; }
    .fdetail div .img4 { height: 250px; }
}

@media all and (max-width: 768px){
    .finfo .c-1600{ display: none;}
    .finfo .imgbox .backimg{ right: 30%; width: 200%; height: auto;}
    .finfo .imgbox{ width: 36%;}
    .finfo .imgbox .backimg> div{ width: 78%; padding: 20px 0;}
}

@media screen and (max-width: 600px){
    .finfo .imgbox { background: none; width: auto; height: auto; }
    .finfo .imgbox .backimg { position: relative; top: auto; right: auto; transform: none; width: 97%; padding: 0 20px; align-items: flex-start; }
    .finfo .c-1600 { position: static; transform: none; }
    .finfo .c-1600 div { display: flex; align-items: center; }
    .finfo .c-1600 div .decop { writing-mode: initial; margin: 0 10px 0 0; }
    .finfo .c-1600 div span { width: 80px; height: 1px; }

    .fdetail div .img1 { width: 90%; margin-bottom: 40px; }
    .fdetail div .img1 div { right: -10px; }
    .fdetail div ul { display: block; margin-bottom: 40px; }
    .fdetail div ul li { width: 100%; }
    .fdetail div ul> :first-child { padding-bottom: 60px; }
    .fdetail div ul> :last-child { width: 100%; }
    .fdetail div ul .img2 { width: 68%; margin: 0 0 40px auto; }
    .fdetail div ul .img3 { width: 50%; bottom: 20px; right: auto; left: 0; bottom: 40px; }
    .fdetail div .img4 div { font-size: 36px; }

    .finfo .imgbox .backimg> div{ width: 95%; padding: 30px 0;}
    
}

@media all and ( max-width: 320px){
    .finfo .imgbox .backimg{ border-top-right-radius: 150px; border-bottom-right-radius: 150px; }
    .finfo .imgbox .backimg::after { border-top-right-radius: 150px; border-bottom-right-radius: 150px; }
}