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

/*------------------------------------------------
 index.css
------------------------------------------------*/

ul,
ol,
li {
    list-style: none;
}

h1 {
    display: block;
}

/*コンテンツ名ふわあげjs*/
h1 span {
    transform: translateY(150%);
    opacity: 0;
    display: inline-block;
    font-family: var(--sans);
    line-height: 2;
    font-weight: 300;
    transition: .5s ease-in;
}

h1.__enable span {
    transform: translateY(0%);
    opacity: 1;
}

/*------------------------------------------------
header
------------------------------------------------*/

/*------------------------------------------------
 index01
------------------------------------------------*/
.index01 {
    position: relative;
    width: 100%;
    height: 50vh;
    background-image: url(../img/index/index01_u991_thumb.png);
    background-size: cover;
    background-position: 0 40%;
}

.index01_thumb {
    position: absolute;
    content: "";
    z-index: 10;
    background-image: url(../img/index/index01_txt.png);
    background-repeat: no-repeat;
    background-size: cover;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-60%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 550px;
    height: 450px;
}

/*------------------------------------------------
 index02
------------------------------------------------*/


/*------------------------------------------------
 index03
------------------------------------------------*/
.grid_3 li a img {
    width: 100%;
    /* 横幅を100%に */
    height: auto;
    /* 固定の高さを設定 */
    object-fit: cover;
    /* 画像の比率を保ったまま正方形に切り取る */
    object-position: top;
    aspect-ratio: 1/1;
}

.grid3_inner_img_txt {
    background-color: var(--btn);
    border-radius: 5px;
    padding: 26px;
}

/*ふわあげ*/
.fade-in-grid-item{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in-grid-item.is-visible{
    opacity: 1;
    transform: translateY(0);
}


/*------------------------------------------------
 index05
------------------------------------------------*/
/*------------------------------------------------
 footer
------------------------------------------------*/
/*------------------------------------------------
 レスポンシブ　　　max-width:1199px
------------------------------------------------*/
@media screen and (max-width:1199px) {}

/*------------------------------------------------
 レスポンシブ　　　max-width:991px
------------------------------------------------*/
@media screen and (max-width:991px) {
    .index01 {
        width: 100%;
        height: 50vh;
        background-size: cover;
        background-position: 65% 0;
    }

    .index01_thumb {
        top: 50%;
        left: 40%;
        -webkit-transform: translate(-50%, -50%);
        width: 500px;
        height: 430px;
    }
}

/*------------------------------------------------
 レスポンシブ　　　max-width:767px
------------------------------------------------*/
@media screen and (max-width:767px) {
    .index01_thumb {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        width: 480px;
        height: 400px;
    }
}

/*------------------------------------------------
 レスポンシブ　　　max-width:480px
------------------------------------------------*/
@media screen and (max-width:480px) {
    .index01_thumb {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        width: 400px;
        height: 320px;
        max-width: 100%;
    }
}