@charset "utf-8";
/* CSS Document */

/*--------------------------------------
    main
--------------------------------------*/

main{
    overflow: clip;
}

/*--------------------------------------
    visualArea
--------------------------------------*/

.visualArea{
    width:100%;
    height: 100vh;      /* 800px でも 100svh でも何でも可 */
    height: 100svh;
    position: relative;
}
.visualArea .bgArea{
    position: absolute;
    inset:0;
    background: url("../images/top/bg_visual.jpg") no-repeat center top / 100% auto;
}
.visualArea h2{
    font-size:2.67vw;
    color:#FFFFFF;
    width:fit-content;
    position: absolute;
    top:7.0833vw;
    left:0;
    right:0;
    bottom:auto;
    margin: auto;
    writing-mode: vertical-rl;
    line-height: 6vw;
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
}
.visualArea .detailArea{
    color:#FFFFFF;
    position: absolute;
    top:30%;
    left:3.75vw;
    font-size:24px;
}
.visualArea .scrollBtn{
    position: absolute;
    right:3.333vw;
    bottom:2.5vw;
}
@media (max-width: 768px) {
    .visualArea .bgArea{
        height:100% !important;
        background: url("../images/top/bg_visual_sp.jpg") no-repeat center bottom / cover;
    }
    .visualArea h2{
        font-size:20px;
        top:120px;
        line-height: 2;
    }
    .visualArea .detailArea{
        width:44%;
        font-size:16px;
        top:56%;
        left:10px;
    }
    .visualArea .scrollBtn{
        right:10px;
        bottom:20px;
    }
}

/*--------------------------------------
    aboutArea
--------------------------------------*/

.aboutArea{
    width:100%;
    padding: 16.66vw 0 25vw 0;
}
.aboutArea h2.style001{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vw;
}
.aboutArea dl{
    width:35vw;
    display: grid;
    gap:1.166vw 1.66vw;
    grid-template-columns: 6.25vw 1fr;
    margin: 0 auto;
}
.aboutArea dl dt{
    width:100%;
    font-size:1.4166vw;
    color:#FFFFFF;
    background: #2c5796;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1vw 0;
    line-height: 1.2;
}
.aboutArea dl dd{
    width:100%;
    font-size:1.25vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    border:1px solid #2c5796;
    padding: 0.75vw 1.25vw;
}
.aboutArea .btnstyle001{
    margin: 5.66vw auto 0 auto;
}
@media (max-width: 768px) {
    .aboutArea{
        width:100%;
        box-sizing: border-box;
        padding: 50px 20px 50px 20px;
    }
    .aboutArea h2.style001{
        margin-bottom: 30px;
    }
    .aboutArea dl{
        width:100%;
        gap:10px 20px;
        grid-template-columns: 70px 1fr;
    }
    .aboutArea dl dt{
        font-size:13px;
        padding: 5px 7px;
        box-sizing: border-box;
    }
    .aboutArea dl dd{
        font-size:14px;
        padding: 5px 7px;
    }
    .aboutArea .btnstyle001{
        margin: 30px auto 0 auto;
    }
}

/*--------------------------------------
    recruitArea
--------------------------------------*/

.recruitArea{
    width:100%;
    padding: 0 0 25vw 0;
}
.recruitArea .areaContent{
    width:70.83vw;
    margin-left:auto;
    margin-right: auto;
    padding: 3.75vw 0 4.167vw 0;
}
.recruitArea .areaContent h2{
    font-size:3vw;
    text-align: center;
    line-height: 1.5;
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
    margin-bottom: 3vw;
    color: #2c5796;
}
.recruitArea .areaContent .js-border__line {
    height: 2px;
}
@media (max-width: 768px) {
    .recruitArea{
        width:100%;
        box-sizing: border-box;
        padding: 0 20px 50px 20px;
    }
    .recruitArea .areaContent{
        width:100%;
        padding: 40px 0 40px 0;
    }
    .recruitArea .areaContent h2{
        font-size:18px;
        margin-bottom: 30px;
    }
}

/*--------------------------------------
    galleryArea
--------------------------------------*/

.galleryArea{
    width:100%;
    padding: 0 0 26.6666vw 0;
    position: relative;
}
.galleryArea h2{
    font-size:1.4166vw;
    line-height: 2.5vw;
    color:#2c5796;
    width:100%;
    margin: 0 auto;
    z-index: 999;
    transform: translate(0,50%);
    font-family: univers-next-pro, sans-serif;
    font-weight: 400;
    font-style: italic;
    display: flex;
    align-items: center;
    gap:7.5vw;
}
.galleryArea h2::before,
.galleryArea h2::after{
    content: "";
    flex: 1; 
    height: 2px;
    background: #2c5796;
}
.galleryArea .gallery{
    width:100%;
    padding: 3.33vw calc(50% - 37.5vw);
    margin: 0 auto;
    box-sizing: border-box;
    border-bottom: 2px solid #2c5796;
}
.galleryArea .gallery .slick-list{
    overflow: visible;
}
.galleryArea .gallery p{
    width:37.5vw;
    height:25.83vw;
    box-sizing: border-box;
    padding: 0 1.66vw;
}
.galleryArea .gallery img{
    width:100%;
    height:100%;
    object-fit: cover;
}
@media (max-width: 768px) {
    .galleryArea{
        padding: 0 0 50px 0;
    }
    .galleryArea h2{
        font-size:10px;
        line-height: 1.2;
        text-align: center;
        gap:10px;
    }
    .galleryArea h2::before,
    .galleryArea h2::after{
        height: 1px;
    }
    .galleryArea .gallery{
        width:100%;
        padding: 30px 20px;
        border-bottom: 1px solid #2c5796;
    }
    .galleryArea .gallery p{
        width:auto;
        height:auto;
        padding: 0 20px;
    }
}

/*--------------------------------------
    themeArea
--------------------------------------*/

.themeArea{
    width:100%;
    background: #2c5796;
    position: relative;
    box-sizing: border-box;
    overflow-x: clip; /* 100vw由来の横スクロール防止 */
}
.themeArea__inner{
    padding: 15vw calc(50% - 35vw) 7.5vw calc(50% - 35vw);
    display: flow-root;
}
.themeArea .bgArea{
    float: right;
    width: 46vw;
    height: 40vw;
    margin: -15vw -15vw 1vw 2vw;  /* 上:上パディング / 右:右パディング / 下・左:テキストとの間隔 */
    --line: 2px;
    --line-color: #FFFFFF;
    filter:
        drop-shadow(var(--line) 0 0 var(--line-color))
        drop-shadow(calc(var(--line) * -1) 0 0 var(--line-color))
        drop-shadow(0 var(--line) 0 var(--line-color))
        drop-shadow(0 calc(var(--line) * -1) 0 var(--line-color));
}
.themeArea .bgArea img{
    display: block;
    width:100%;
    height:100%;
    object-fit: cover;
    background: #f1f1f1;
    clip-path: polygon(30% 0, 0 100%, 70% 100%, 100% 0);
}
.themeArea h2{
    font-size: 3.7vw;
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
    color: #FFFFFF;
    font-weight: 500;
    margin-bottom: 7vw;
}
.themeArea h2 span{
    display: block;
    margin-bottom: 1.5vw;
    font-weight: 500;
    font-size: 0.7em;
}
.themeArea h2 small{
    display: block;
    font-weight: 500;
    font-size: 0.43em;
}
.themeArea .text{
    font-size:1.58333vw;
    color:#FFFFFF;
    line-height: 2.4;
}
@media (max-width: 768px) {
    .themeArea__inner{
        padding: 50px 20px 50px 20px;
    }
    .themeArea .bgArea{
        width: 45vw;
        height: 160px;
        margin: -50px -20px 20px 15px;
        clip-path: polygon(10% 0, 0 100%, 90% 100%, 100% 0);
    }
    .themeArea h2{
        font-size:16px;
        margin-bottom: 30px;
    }
    .themeArea h2 span{
        font-size:12px;
        margin-bottom: 10px;
    }
    .themeArea .text{
        font-size:14px;
    }
}

/*--------------------------------------
    movieArea
--------------------------------------*/

.movieArea{
    width:100%;
    padding: 17vw calc(50% - 25vw) 0 calc(50% - 25vw);
    position: relative;
    box-sizing: border-box;
}
.movieArea .movie{
    width:51.58vw;
    height:31.67vw;
    box-sizing: border-box;
    border:1px solid #2c5796;
    padding: 1vw;
    position: relative;
}
.movieArea .movie::after{
    content: "";
    display: inline-block;
    padding-top: 65%;
}
.movieArea .movie .movie_inner{
    width:calc(100% - 2vw);
    height:calc(100% - 2vw);
    position: absolute;
    top:1vw;
    left:1vw;
    right:1vw;
    bottom:1vw;
    background: #000000;
}
@media (max-width: 768px) {
    .movieArea{
        width:100%;
        box-sizing: border-box;
        padding: 50px 20px 50px 20px;
    }
    .movieArea .movie{
        width:100%;
        height:auto;
        padding: 10px;
        box-sizing: border-box;
    }
    .movieArea .movie::after{
        content: "";
        display: inline-block;
        padding-top: 65%;
    }
    .movieArea .movie .movie_inner{
        width:calc(100% - 20px);
        height:calc(100% - 20px);
        top:10px;
        left:10px;
        right:10px;
        bottom:10px;
    }
}

/*--------------------------------------
    informationArea
--------------------------------------*/

.informationArea{
    width:100%;
    padding: 18vw calc(50% - 26.5vw) 22vw calc(50% - 26.5vw);
    position: relative;
    box-sizing: border-box;
}
.informationArea h2.style001{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5.8333vw;
}
.informationArea article a{
    width:100%;
    height:4.6667vw;
    display: flex;
    gap:6.5vw;
    justify-content: flex-start;
    align-items: center;
    font-size:1.1667vw;
    padding: 0 0 0 3vw;
    position: relative;
}
.informationArea article a::before,
.informationArea article a:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #43609b;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s ease;
  transition-delay: var(--delay, 0s);
}
.informationArea article a::before { top: 0; }
.informationArea article a:last-child::after { bottom: 0; }

.informationArea article a.is-active::before,
.informationArea article a.is-active:last-child::after {
  transform: scaleX(1);
}
.informationArea .btnstyle001{
    margin: 5.67vw auto 0 auto;
}
@media (max-width: 768px) {
    .informationArea{
        width:100%;
        box-sizing: border-box;
        padding: 50px 20px 50px 20px;
    }
    .informationArea h2.style001{
        margin-bottom: 30px;
    }
    .informationArea article a{
        height:auto;
        padding: 20px 10px;
        display: block;
        font-size:14px;
    }
    .informationArea article a h3{
        font-size:16px;
        margin-top: 10px;
        font-weight: normal;
    }
    .informationArea .btnstyle001{
        margin: 30px auto 0 auto;
    }
}

/*--------------------------------------
    newsArea
--------------------------------------*/

.newsArea{
    width:100%;
    padding: 5.5vw calc(50% - 30.33vw) 4.5vw calc(50% - 30.33vw);
    background: #2c5796;
    position: relative;
    box-sizing: border-box;
}
.newsArea h2{
    font-size:2.166vw;
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
    color:#FFFFFF;
    text-align: center;
    margin-bottom: 4.5vw;
}
.newsArea .areaContent{
    width:100%;
    box-sizing: border-box;
    border:1.5vw solid #FFFFFF;
    background: #f1f1f1;
}
.newsArea .btnstyle002{
    margin: 4vw auto 0 auto;
}
@media (max-width: 768px) {
    .newsArea{
        width:100%;
        box-sizing: border-box;
        padding: 50px 20px 50px 20px;
    }
    .newsArea h2{
        font-size:21px;
        margin-bottom: 30px;
    }
    .newsArea .areaContent{
        border:10px solid #FFFFFF;
    }
    .newsArea .btnstyle002{
        margin: 30px auto 0 auto;
    }
}

/*--------------------------------------
    messageArea
--------------------------------------*/

.messageArea{
    width:100%;
    padding: 19vw calc(50% - 35.4vw) 0 calc(50% - 35.4vw);
    position: relative;
    box-sizing: border-box;
}
.messageArea h2.style001{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5.5vw;
}
.messageArea .areaContent{
    padding: 6.5vw 2.5vw 5.3333vw 2.5vw;
}
.messageArea .areaContent .titleArea{
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-bottom: 7.5vw;
}
.messageArea .areaContent .titleArea .textArea .desc{
    font-size:2.16vw;
    line-height: 1.5;
    color:#2c5796;
    margin-bottom: 4.5vw;
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
}
.messageArea .areaContent .titleArea .textArea h3{
    font-size:3.3333vw;
    line-height: 1.2;
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
}
.messageArea .areaContent .titleArea .textArea h3 span{
    font-size:2.2222vw;
}
.messageArea .areaContent .titleArea .textArea .ruby{
    font-size:1.3333vw;
    line-height: 1.2;
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
    padding:0 0 6px 0;
}
.messageArea .areaContent .titleArea .picArea{
    width:18vw;
    height:17vw;
}
.messageArea .areaContent .titleArea .picArea img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.messageArea .areaContent .text{
    font-size:1.4166vw;
    line-height: 2.4;
}
@media (max-width: 768px) {
    .messageArea{
        width:100%;
        box-sizing: border-box;
        padding: 50px 20px 0 20px;
    }
    .messageArea h2.style001{
        margin-bottom: 30px;
    }
    .messageArea .areaContent{
        padding: 30px 15px;
    }
    .messageArea .areaContent .titleArea{
        display: block;
        margin-bottom: 10px;
    }
    .messageArea .areaContent .titleArea .textArea .desc{
        font-size:16px;
        margin-bottom: 40px;
    }
    .messageArea .areaContent .titleArea .textArea h3{
        font-size:24px;
    }
    .messageArea .areaContent .titleArea .textArea .ruby{
        font-size:12px;
    }
    .messageArea .areaContent .titleArea .picArea{
        width:50%;
        height:auto;
        margin:0 auto 30px auto;
    }
    .messageArea .areaContent .text{
        font-size:14px;
        line-height: 1.8;
    }
}

/*--------------------------------------
    conceptArea
--------------------------------------*/

.conceptArea{
    width:100%;
    padding: 21.33vw calc(50% - 35.4vw) 15vw calc(50% - 35.4vw);
    position: relative;
    box-sizing: border-box;
}
.conceptArea h2.style001{
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5vw;
}
.conceptArea .areaContent{
    padding: 8vw 5.25vw 5vw 5.25vw;
}
.conceptArea .areaContent h3{
    width:31.3333vw;
    margin: 0 auto 6.5vw auto;
}
.conceptArea .areaContent h4{
    font-size:1.75vw;
    color:#43609b;
    text-align: center;
    margin-bottom: 2vw;
}
.conceptArea .areaContent .text{
    font-size:1.5833vw;
    line-height: 2;
}
.conceptArea .areaContent .comment{
    font-size:1vw;
    line-height: 2;
    margin-top: 10px;
    margin-bottom: 5vw;
}
@media (max-width: 768px) {
    .conceptArea{
        width:100%;
        box-sizing: border-box;
        padding: 50px 20px 20px 20px;
    }
    .conceptArea h2.style001{
        margin-bottom: 30px;
    }
    .conceptArea .areaContent{
        padding: 30px 15px;
    }
    .conceptArea .areaContent h3{
        width:90%;
        text-align: center;
        margin: 0 auto 30px auto;
    }
    .conceptArea .areaContent h3 img{
        max-width:60%;
        height:auto;
    }
    .conceptArea .areaContent h4{
        font-size:16px;
        margin-bottom: 20px;
    }
    .conceptArea .areaContent .text{
        font-size:14px;
    }
    .conceptArea .areaContent .comment{
        font-size:12px;
        margin-bottom: 30px;
    }
}