@charset "utf-8";

/*----- flex設定 */
.flex{
    display: flex;
    flex-wrap: wrap;
}
.flexCC{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.flexCB{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.flexCA{
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}
.flexCS{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.flexCE{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.flexSC{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}
.flexSB{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.flexSA{
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    flex-wrap: wrap;
}
.flexSS{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.flexSE{
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.flexEC{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
}
.flexEB{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
}
.flexEA{
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    flex-wrap: wrap;
}
.flexEE{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ----- 横幅設定 */
.w100{
    width: 100%;
}
.w50{
    width: 50%;
}
.w25{
    width: 25%;
}

/* ----- 3点リーダー */
.trimming{
    width: 100%;
    overflow: hidden;
    display: block;
}
.trimming__inner{
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/* -----リスト設定 */
.list-dot li,
.list-circle li,
.list-circle2 li,
.list-square li,
.list-no li,
.list-ast li{
    text-indent: -1em;
    padding-left: 1em;
}.list-dot li:not(:last-child),
.list-circle li:not(:last-child),
.list-circle2 li:not(:last-child),
.list-square li:not(:last-child),
.list-no li:not(:last-child),
.list-ast li:not(:last-child){
    margin-bottom: 1rem;
}
.list-dot li:before{
    content: "・";
}
.list-ast li:before{
    content: "※";
}
.list-circle li:before{
    content: "●";
}
.list-circle2 li:before{
    content: "○";
}
.list-square li:before{
    content: "■";
}
.list-no > li:nth-of-type(1):before{
    content: "\002460";
}
.list-no > li:nth-of-type(2):before{
    content: "\002461";
}
.list-no > li:nth-of-type(3):before{
    content: "\002462";
}
.list-no > li:nth-of-type(4):before{
    content: "\002463";
}
.list-no > li:nth-of-type(5):before{
    content: "\002464";
}
.list-no > li:nth-of-type(6):before{
    content: "\002465";
}
.list-no > li:nth-of-type(7):before{
    content: "\002466";
}
.list-no > li:nth-of-type(8):before{
    content: "\002467";
}
.list-no > li:nth-of-type(9):before{
    content: "\002468";
}
.list-no > li:nth-of-type(10):before{
    content: "\002469";
}
.list-no > li:nth-of-type(11):before{
    content: "\00246a";
}
.list-no > li:nth-of-type(12):before{
    content: "\00246b";
}
.list-no > li:nth-of-type(13):before{
    content: "\00246c";
}
.list-no > li:nth-of-type(14):before{
    content: "\00246d";
}
.list-no > li:nth-of-type(15):before{
    content: "\00246e";
}
.list-no > li:nth-of-type(16):before{
    content: "\00246f";
}
.list-no > li:nth-of-type(17):before{
    content: "\002470";
}
.list-no > li:nth-of-type(18):before{
    content: "\002471";
}
.list-no > li:nth-of-type(19):before{
    content: "\002472";
}
.list-no > li:nth-of-type(20):before{
    content: "\002473";
}

/*----- アニメーション（GSAP） */
/* マスク */
.g-mask{
    display: block;
    overflow: hidden;
    z-index: 5000;
    position: relative;
}
.g-mask::before{
    width: 100%;
    height: 100%;
    left: -100%;
    top: 0;
    z-index: 6000;
    transition: 1s ease-in-out;
    background: #eee;
    position: absolute;
    display: block;
    content: "";
}
.g-mask > *{
    width: 100%;
    z-index: -1;
    position: relative;
    left: -100%;
    transition: 1s ease-in-out;
}
.g-mask.on > *{
    left: 0;
}
.g-mask.on::before{
    left: 0;
    animation: g-maks 1s ease-in-out 1s forwards;
}
@keyframes g-maks{
    0%{
        left: 0;
    }
    100%{
        left: 100%;
    }
}

/* 拡大した状態から元のサイズに戻しながら表示（画像での使用を想定） */
.g-img{
    overflow: hidden;
    z-index: 5000;
    position: relative;
}
.g-img > *{
    width: 100%;
    transform: scale(1.2);
    filter: blur(.25rem);
    opacity: 0;
    transition: 1s ease-in-out;
}
.g-img.on > *{
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
}
.g-img.end > *{
    transition: none;
}

/* パララックス画像 */
.g-parallaxImg{
    overflow: hidden;
    z-index: 5000;
    position: relative;
}
.g-parallaxImg > *{
    width: 100%;
}

/* 画像拡大 */
.hover_zoom img{
    transition: .3s all ease;
}
.hover_zoom:hover img{
    transform: scale(1.2);
}



/*-------------------------------
    PC専用
-------------------------------*/
@media screen and (min-width:769px) , print{

    .sp,
    .spi,
    .spf,
    .spt,
    .spib{
        display: none !important;
    }
    .pc{
        display: block !important;
    }
    .pci{
        display: inline !important;
    }
    .pcf{
        display: flex !important;
    }
    .pct{
        display: table !important;
    }
    .pcib{
        display: inline-block !important;
    }

    /*----- flex設定 */
    .pcflexCC{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    .pcflexCB{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .pcflexCA{
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .pcflexCS{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .pcflexCE{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .pcflexSC{
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
    }
    .pcflexSB{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .pcflexSA{
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .pcflexSS{
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .pcflexSS{
        display: flex;
        align-items: flex-start;
        justify-content: flex-Start;
        flex-wrap: wrap;
    }
    .pcflexSE{
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .pcflexEC{
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex-wrap: wrap;
    }
    .pcflexEB{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .pcflexEA{
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .pcflexEE{
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    /* ----- 3点リーダー */
    .trimming__inner--pc1{
        -webkit-line-clamp: 1;    
    }
    .trimming__inner--pc2{
        -webkit-line-clamp: 2;    
    }
    .trimming__inner--pc3{
        -webkit-line-clamp: 3;    
    }

}





/*-------------------------------
    SP専用
-------------------------------*/
@media screen and (max-width:768px){

    .pc,
    .pci,
    .pcf,
    .pct,
    .pcib{
        display: none !important;
    }
    .sp{
        display: block !important;
    }
    .spi{
        display: inline !important;
    }
    .spf{
        display: flex !important;
    }
    .spt{
        display: table !important;
    }
    .spib{
        display: inline-block !important;
    }

    /*----- flex設定 */
    .spflexCC{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }
    .spflexCB{
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .spflexCA{
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .spflexCS{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .spflexCE{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .spflexSC{
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
    }
    .spflexSB{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .spflexSA{
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .spflexSS{
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .spflexSE{
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .spflexEC{
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex-wrap: wrap;
    }
    .spflexEB{
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .spflexEA{
        display: flex;
        align-items: flex-end;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .spflexEE{
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    /* ----- 3点リーダー */
    .trimming__inner--sp1{
        -webkit-line-clamp: 1;    
    }
    .trimming__inner--sp2{
        -webkit-line-clamp: 2;    
    }
    .trimming__inner--sp3{
        -webkit-line-clamp: 3;    
    }

}