@charset "utf-8";
/* ****************************************************************************
MEMO -記載方法確認用メモ

【共通設定】
_表示設定
_SP表示設定
_PC表示設定
_Float設定
_clear設定
_clearfix設定
_flexContainer設定
_flexContainer設定_PcRow-SpCol
_flexContainer設定_PcCol-SpRow

@media screen and (min-width: 769px) { } 【タブレット縦以上】※breakpoint
**************************************************************************** */


/*____MEMO____*/

/*__【共通設定】__*/
/*_表示設定_*/
.dp_no {
    display: none !important;
}

.dp_bl {
    display: block !important;
}

.dp_il {
    display: inline !important;
}

/*_SP表示設定_*/
.dp-sp_bl {
    display: block !important;
}

.dp-sp_il {
    display: inline !important;
}

.dp-sp_fl {
    display: flex !important;
}

@media only screen and (max-width : 768px) {
    .dp-sp_no {
        display: none !important;
    }
}


@media only screen and (min-width : 769px) {

    .dp-pc_bl {
        display: block !important;
    }

    .dp-pc_il {
        display: inline !important;
    }

    .dp-pc_fl {
        display: flex !important;
    }

    .dp-pc_no {
        display: none !important;
    }
}

/*PC時表示幅設定*/
@media only screen and (min-width : 1080px) {
    .pc_w-1080_px {
        width: 1080px !important;
        margin: 0 auto;
    }
}

@media only screen and (min-width : 769px) {
    .pc_w-100_per {
        width: 100%;
    }

    .pc_w-90_per {
        width: 90% !important;
        margin: 0 auto;
    }

    .pc_w-80_per {
        width: 80% !important;
        margin: 0 auto;
    }
}



/*_Float設定_*/
.fl-right {
    float: right;
}

.fl-left {
    float: left;
}

/*_clear設定_*/
.cl-both {
    clear: both;
}

.cl-right {
    clear: right;
}

.cl-left {
    clear: left;
}

.cl-box {
    clear: both;
    height: 0;
    overflow: hidden;
}

/*_clearfix設定_*/
.cl-fix {
    zoom: 1;
}

.cl-fix:after {
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    line-height: 0;
    content: ".";
}

.cl-fix:after {
    content: "";
    display: block;
    clear: both;
    height: 0;
}

@media only screen and (min-width : 769px) {
    .cl-fix_pc {
        zoom: 1;
    }

    .cl-fix_pc:after {
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
        line-height: 0;
        content: ".";
    }

    .cl-fix_pc:after {
        content: "";
        display: block;
        clear: both;
        height: 0;
    }

}

/* no ie mac \*/
* html .cl-fix {
    height: 1%;
}

.cl-fix {
    display: block;
}

/*_flexContainer設定_*/
.flex-con {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.flex-con_r {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.flex-con_c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

/*_flexContainer設定_PcRow-SpCol_*/
.flex-con_r-c {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

@media only screen and (min-width : 769px) {
    .flex-con_r-c {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;

    }
}

/*_flex設定_PcCol-SpRow_*/
.flex-con_c-r {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;

    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

@media only screen and (min-width : 769px) {
    .flex-con_c-r {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}

/*flex アイテム　PC:2 SP:1*/
/*flex アイテム　PC:3 SP:2-1*/
.flex-con_2-1,
.flex-con_3-2-1 {
    /*SP 基本表示　縦*/
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

    width: 100%;

}

@media only screen and (min-width : 480px) {

    .flex-con_2-1,
    .flex-con_3-2-1 {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;

        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;

    }

    .flex-con_2-1,
    .flex-con_3-2-1 {

        width: 100%;

    }

    .flex-con_2-1 .flex-item,
    .flex-con_3-2-1 .flex-item {
        width: 50%;
    }
}

@media only screen and (min-width : 769px) {

    .flex-con_2-1 .flex-item {
        width: 50%;
    }

    .flex-con_3-2-1 .flex-item {
        width: 33.33%;
    }

    .flex-con_3-2-1 .flex-item:nth-child(3n) {
        width: 33.34%;
    }
}


/*--Fadein設定--*/
.fade-box {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

/* Fading Effect - visible state - */
.fade-box.fade-vis {
    opacity: 1;
    visibility: visible;
}

/*--borderアニメーション--*/
.animeLine_bottom {
    position: relative;
    display: inline-block;
}

.animeLine_bottom:before,
.animeLine_bottom:after {
    content: '';
    position: absolute;
    bottom: -1px;
    display: block;
    width: 0;
    height: 2px;
    background-color: #000;
    -webkit-transition: width .3s;
    transition: width .3s
}

.animeLine_bottom:before {
    left: 0;
}

.animeLine_bottom:after {
    right: 0;
}

.animeLine_bottom:hover:before,
.animeLine_bottom:hover:after {
    width: 50%;
}

.animeLine_bottom:hover:before {
    left: 50%;
}

.animeLine_bottom:hover:after {
    right: 50%;
}

/*---------列切替　PC-SP---------*/
/*PC5-SP2*/
ul.col_pc5-sp2 li {
    width: 49%;
    margin-right: 2%;
}

ul.col_pc5-sp2 li:nth-child(2n) {
    margin-right: 0;
}

@media only screen and (min-width : 769px) {

    ul.col_pc5-sp2 li:nth-child(2n),
    ul.col_pc5-sp2 li {
        width: 18%;
        margin-right: 2.5%;
    }

    ul.col_pc5-sp2 li:nth-child(5n) {
        margin-right: 0;
    }
}

/*PC5-SP3*/
ul.col_pc5-sp3 li {
    width: 32%;
    margin-right: 2%;
}

ul.col_pc5-sp3 li:nth-child(3n) {
    margin-right: 0;
}

@media only screen and (min-width : 769px) {

    ul.col_pc5-sp3 li:nth-child(3n),
    ul.col_pc5-sp3 li {
        width: 18%;
        margin-right: 2.5%;
    }

    ul.col_pc5-sp3 li:nth-child(5n) {
        margin-right: 0;
    }
}

/*PC5-SP1*/
ul.col_pc5-sp1 li {
    width: 100%;
}

@media only screen and (min-width : 769px) {

    ul.col_pc5-sp1 li:nth-child(3n),
    ul.col_pc5-sp1 li {
        width: 18%;
        margin-right: 2.5%;
    }

    ul.col_pc5-sp1 li:nth-child(5n) {
        margin-right: 0;
    }
}



/*PC4-SP3*/
ul.col_pc4-sp3 li {
    width: 32%;
    margin-right: 2%;
}

ul.col_pc4-sp3 li:nth-child(3n) {
    margin-right: 0;
}

@media only screen and (min-width : 769px) {

    ul.col_pc4-sp3 li:nth-child(3n),
    ul.col_pc4-sp3 li {
        width: 24%;
        margin-right: 1.3%;
    }

    ul.col_pc4-sp3 li:nth-child(3n) {
        margin-right: 1.4%;
    }

    ul.col_pc4-sp3 li:nth-child(4n) {
        margin-right: 0;
    }
}

/*PC4-SP2*/
ul.col_pc4-sp2 li {
    width: 49%;
    margin-right: 2%;
}

ul.col_pc4-sp2 li:nth-child(2n) {
    margin-right: 0;
}

@media only screen and (min-width : 769px) {

    ul.col_pc4-sp2 li:nth-child(2n),
    ul.col_pc4-sp2 li {
        width: 24%;
        margin-right: 1.3%;
    }

    ul.col_pc4-sp2 li:nth-child(3n) {
        margin-right: 1.4%;
    }

    ul.col_pc4-sp2 li:nth-child(4n) {
        margin-right: 0;
    }
}

/*PC4-SP1*/
ul.col_pc4-sp1 li {
    width: 98%;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width : 769px) {
    ul.col_pc4-sp1 li {
        width: 24%;
        margin-right: 1.3%;
        margin-left: 0;
    }
    ul.col_pc4-sp1 li:nth-child(4n) {
        margin-right: 0;
    }
}

/*------------------------------*/