@charset "UTF-8";

/* command */
.sec-ttl{
    text-align: center;
    margin: 50px auto 32px;
}

.sec-ttl .icon{
    display: inline-block;
    margin-bottom: 7px;
}

.sec-ttl .main{
    display: block;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.1em;
    line-height: 120%;
    margin-bottom: 10px;
}

.sec-ttl .sub{
    display: block;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.15em;
    line-height: 120%;
}

@media (min-width: 768px) {
    .sec-ttl .main{
        font-size: 40px;
    }

    .sec-ttl .sub{
        font-size: 20px;
    }
}


/* end command */

.hero .mainimg {
    padding: 0 5vw;
}

.hero .mainimg .mainimg-txt {
    bottom: 5%;
    left: 10%;
}

.hero .mainimg .mainimg-txt .main {
    color: #fff;
    font-size: 34px;
    letter-spacing: 0.2em;
    line-height: 50.7px;
    font-weight: 700;
}

.hero .mainimg .mainimg-txt .sub {
    color: var(--c-gry);
    font-size: 16px;
    letter-spacing: 0.1em;
    line-height: 28.16px;
    font-weight: 500;
    margin-top: 11px;
}

.hero .mainimg .mySwiper .swiper-wrapper {
    overflow: hidden;
    border-radius: 1.25rem;
    height: 50vh;
}

.hero .mainimg .mySwiper .swiper-pagination-vertical.swiper-pagination-bullets {
    width: 12px;
    height: auto;
    right: 1rem;
    transform: translate3d(0, -35%, 0);
}

.hero .mainimg .mySwiper .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
    display: block;
    margin: 20px 0;
    width: 12px;
    height: 12px;
    background: transparent;
    border: solid 2.7px #fff;
    opacity: 1;
}

.hero .mainimg .mySwiper .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: #fff;
}

.hero .mainimg .mySwiper .swiper-slide-duplicate-active .zoom-image,
.hero .mainimg .mySwiper .swiper-slide-active .zoom-image,
.hero .mainimg .mySwiper .swiper-slide-prev .zoom-image {
    animation: zoomanime 5s linear 0s normal both;
}

.hero .mainimg .mySwiper .zoom-image{
    object-position:70% 50%;
}

.hero .frame-i.left {
    width: 25%;
    top: 0;
}

.hero .frame-i.left .i-orange {
    width: 100%;
    transform: translateX(-35%) translateY(50%);
    border-radius: 8.85%;
}

.hero .frame-i.left .i-green {
    width: 45%;
    transform: translateX(86%) translateY(130%);
    border-radius: 13.6%;
}

.hero .frame-i.left .i-dot {
    background-image: url(../img/top/i_dot_s_wh.svg);
    width: 45%;
    transform: translateX(100%) translateY(-250%);
}

.hero .frame-i.right {
    width: 100%;
    bottom: -32%;
    right: 0;
    overflow: hidden;
    padding-bottom: 23%;
}

.hero .frame-i.right .i-orange {
    width: 9%;
    transform: translateX(898%) translateY(0);
    border-radius: 26.5%;
}

.hero .frame-i.right .i-green {
    width: 20%;
    transform: translateX(440%) translateY(0);
    border-radius: 14.7%;
}

.hero .frame-i.right .i-dot {
    background-image: url(../img/top/i-dot-s-gr.svg);
    width: 16%;
    transform: translateX(0) translateY(123%);
}

@keyframes zoomanime {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.05);
    }
}

@media (min-width: 768px) {
    .hero .mainimg .mainimg-txt {
        bottom: auto;
        top: 30%;
        left: 15%;
    }
    .hero .mainimg .mainimg-txt .main {
        font-size: 32px;
        line-height: 150%;
    }

    .hero .mainimg .mainimg-txt .sub {
        color: #fff;
        font-size: 18px;
        line-height: 150%;
    }
    .hero .mainimg .mySwiper .swiper-wrapper {
        height: 50vh;
    }

    .hero .mainimg .mySwiper .swiper-pagination-vertical.swiper-pagination-bullets {
        right: 2rem;
        transform: translate3d(0, 0, 0);
    }

    .hero .frame-i.left {
        width: 15%;
        top: 40%;
    }

    .hero .frame-i.left .i-orange {
        transform: translateX(-35%) translateY(0);
        border-radius: 8.85%;
    }

    .hero .frame-i.left .i-green {
        width: 30%;
        transform: translateX(56%) translateY(130%);
        border-radius: 29.5%;
    }

    .hero .frame-i.left .i-dot {
        width: 40%;
        transform: translateX(120%) translateY(-92%);
    }

    .hero .frame-i.right {
        width: 20%;
        bottom: -20%;
        overflow: visible;
        padding-bottom: 0;
    }

    .hero .frame-i.right .i-orange {
        width: 25%;
        transform: translateX(68%) translateY(0);
        border-radius: 26.5%;
    }

    .hero .frame-i.right .i-green {
        width: 45%;
        transform: translateX(100%) translateY(0);
        border-radius: 14.7%;
    }

    .hero .frame-i.right .i-dot {
        width: 32%;
        transform: translateX(26%) translateY(16%);
    }
}

@media (min-width: 1024px) {
    .hero .mainimg .mainimg-txt .main {
        font-size: 54px;
        line-height: 89.8px;
    }

    .hero .mainimg .mainimg-txt .sub {
        font-size: 24px;
        line-height: 50px;
    }
}

@media (min-width: 1280px) {
    .hero .mainimg .mySwiper .swiper-wrapper {
        height: 85vh;
    }
}


.sec-purpose .block-bnr{
    max-width: 1176px;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.sec-purpose .block-bnr .item a{
    text-decoration: none;
}
.cube-wrap .front{
    display: none;
}
/* 画像 */
.sec-purpose .block-bnr .item .front img,
.sec-purpose .block-bnr .item .bottom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sec-purpose .block-bnr .item .label{
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 1.6rem 4rem 1.6rem 1.6rem;
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 120%;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
}

.sec-purpose .block-bnr .item a:before{
    content: "";
    position: absolute;
    right: 15px;
    bottom: 15px;
    z-index: 11;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: url(../img/common/ico_arrow_01_wh.svg);
    background-color: var(--c-orange);
    background-size: 17px auto;
    background-repeat: no-repeat;
    background-position: center;
}

.sec-purpose .block-bnr .item:nth-of-type(even) a:before{
    background-color: var(--c-green);
}

@media (min-width: 768px) {
    .sec-purpose .block-bnr{
        border-radius: 0;
    }

    .sec-purpose .block-bnr .item .label{
        aspect-ratio: 1 / 1;
    }

    .sec-purpose .block-bnr .item .bg{
        aspect-ratio: 1/1;
    }

    .sec-purpose .block-bnr .item:hover .coverimg{
        opacity: 0;
    }
}

@media (min-width: 1280px) {
    /* キューブ全体のラッパー */
    .cube-wrap {
    width: 392px;
    height: 392px;
    perspective: 1200px;
    overflow: hidden;
    }

    /* 内側（3D処理対象） */
    .cube-inner {
        height:100%;
        transform-style:preserve-3d;
        -webkit-transition-duration:.3s;
        transition-duration:.3s;
        -webkit-transform:translateZ(-196px);
        transform: translateZ(-196px);
    }

    /* ホバーで回転 */
    .cube-wrap:hover .cube-inner {
        -webkit-transform: rotateX(-90deg) translateY(196px);
        transform: rotateX(-90deg) translateY(196px);
    }

    /* 各面共通 */
    .cube-wrap .front,
    .cube-wrap .bottom {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* 表面 */
    .cube-wrap .front {
        display: block;
        -webkit-transform:translateZ(196px);
        transform:translateZ(196px);
    }

    /* 底面（ホバー時に見える側） */
    .cube-wrap .bottom {
        -webkit-transform: translateY(-196px) rotateX(90deg);
        transform: translateY(-196px) rotateX(90deg);
    }
}

.sec-aboutus .frame-i.left {
    width: 20%;
    top: 1.5rem;
    left: 0;
}

.sec-aboutus .frame-i.left .i-green {
    width: 45%;
    transform: translateX(150%) translateY(0);
    border-radius: 17.1%;
}

.sec-aboutus .frame-i.left .i-orange {
    width: 100%;
    transform: translateX(-30%) translateY(4%);
    border-radius: 14.2%;
}

.sec-aboutus .frame-i.right {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.sec-aboutus .frame-i.right .i-dot {
    position: absolute;
    bottom: -2rem;
    left: -1rem;
    z-index: -1;
    background-image: url(../img/top/i-dot-s-gr.svg);
    width: 16%;
}

.sec-aboutus .frame-i.right .i-dot:nth-of-type(2){
    left: auto;
    right: -1rem;
    z-index: 1;
    bottom: auto;
    top: -2.5rem;
}

@media (min-width: 768px) {
    .sec-aboutus .txt{
        width: 35%;
    }

    .sec-aboutus .txt .comment{
        font-size: 22px;
        line-height: 190%;
        max-width: 345px;
        margin: 2.5rem auto;
    }

    .sec-aboutus .img{
        width: 60%;
    }

    .sec-aboutus .frame-i.left {
        width: 20%;
        top: 1.5rem;
        left: 0;
    }

    .sec-aboutus .frame-i.left .i-green {
        width: 42%;
        transform: translateX(-30%) translateY(26%);
    }

    .sec-aboutus .frame-i.left .i-orange {
        width: 25%;
        transform: translateX(125%) translateY(-227%);
    }

    .sec-aboutus .frame-i.right .i-dot{
        bottom: -2rem;
        left: -4rem;
        width: 12%;
    }
    .sec-aboutus .frame-i.right .i-dot:nth-of-type(2){
        display: none;
    }
}


.sec-facility .frame-i.right {
    width: 20%;
    top: -10%;
    right: -5vw;
    overflow: hidden;
}

.sec-facility .frame-i.right .i-green {
    width: 45%;
    transform: translateX(0) translateY(0);
    border-radius: 17.1%;
}

.sec-facility .frame-i.right .i-orange {
    width: 100%;
    transform: translateX(46%) translateY(0);
    border-radius: 14.2%;
}

.sec-facility .bg{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 0.6;
}

.sec-facility .bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 768px) {
    .sec-facility{
        aspect-ratio: 1/0.4;
        margin-top: 6rem;
    }
    .sec-facility .frame-i.right{
        display: none;
    }

    .sec-facility .txt{
        background: #fff;
        max-width: 380px;
        margin: 0 auto;
        padding: 1rem 3rem;
        border-radius: 15px;
    }

    .sec-facility .bg{
        top: 0;
        left: 0;
        z-index: -1;
    }
}



.sec-news .frame-i.top {
    width: 100%;
    top: -2.5rem;
    left: 0;
    z-index: -1;
}

.sec-news .frame-i.top .i-green {
    width: 20%;
    transform: translateX(-30%) translateY(4%);
    border-radius: 14.2%;
}

.sec-news .frame-i.top .i-orange {
    width: 10%;
    transform: translateX(150%) translateY(0);
    border-radius: 17.1%;
}

.sec-news .frame-i.top .i-dot {
    background-image: url(../img/top/i-dot-s-gr.svg);
    width: 14%;
    transform: translateX(600%) translateY(-100%);
}

.block-news-contents:nth-child(n+4){
    display: none;
}

@media (min-width: 768px) {

    .sec-news .frame-i.top {
        top: -5rem;
        overflow: hidden;
    }

    .sec-news .frame-i.top .i-orange {
        width: 4%;
        transform: translateX(2243%) translateY(174%);
    }

    .sec-news .frame-i.top .i-green {
        width: 8%;
        transform: translateX(1175%) translateY(88%);
    }

    .sec-news .frame-i.top .i-dot {
        width: 7%;
        transform: translateX(80%) translateY(-189%);
    }

    .sec-news .frame-i.bottom{
        width: 100%;
        bottom: -7rem;
        left: 0;
        z-index: -1;
        overflow: hidden;
    }

    .sec-news .frame-i.bottom .i-green {
        width: 4.5%;
        transform: translateX(149%) translateY(42%);
        border-radius: 29.5%;
    }

    .sec-news .frame-i.bottom .i-orange {
        width: 8%;
        transform: translateX(-18%) translateY(25%);
        border-radius: 17.1%;
    }

    .sec-news .frame-i.bottom .i-dot {
        background-image: url(../img/top/i-dot-s-gr.svg);
        width: 7%;
        transform: translateX(1340%) translateY(-177%);
    }

    .block-news-contents:nth-child(n+4){
        display: block;
    }
}

#top_support, #top_out{
    margin-bottom: 60px;
}
#top_support .title, #top_out .title{
    display: block;
    font-weight: 700;
    font-size: 24px;
    text-align: center;
    letter-spacing: 0.1em;
    line-height: 120%;
    margin-bottom: 10px;
}

#top_support .title small, #top_out .title small{
    font-weight: normal;
    font-size: 13px;
}

#top_support ul, #top_out ul{
    max-width: 1158px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    justify-content: center;
    gap: 10px 10px;
}

#top_support ul li, #top_out ul li{
    flex: 0 1 calc(50% - 10px);
    text-align: center;
}

@media (min-width: 768px) {
    #top_support, #top_out{
        margin-bottom: 100px;
    }

    #top_support .title, #top_out .title{
        font-size: 34px;
        margin-bottom: 30px;
    }

    #top_support .title small, #top_out .title small{
        font-size: 1rem;
    }

    #top_support ul li, #top_out ul li{
        flex: 0 1 calc(25% - 10px);
    }
}