@charset "UTF-8";

/* PC
=================================================================== */

/* <ul class="index_nav_01"> */
/* <ul class="index_nav_02"> */
/*---------------------------------------------*/
a.index_btn {
    font-size: 14px;
    height: auto;
    background-color: #fff;
    color: #222222;
    width: fit-content;
    padding: 9px 24px;
    border-radius: 5px;
    border: solid 1px #222222;
    font-weight: normal;
    display: block !important;
}
.index_nav_01,.index_nav_02 {margin: 30px auto; display: flex; justify-content: center;}
.index_nav_01 li,.index_nav_02 li{margin-right: 10px; margin-left: 10px;}
.index_nav_01 li:last-child,.index_nav_02 li:last-child{margin-right: 0px;}
.index_nav_01 p,.index_nav_02 p{display: block;padding-right: 24px;}
.index_nav_01 a,.index_nav_02 a { display: flex; justify-content: flex-end; position: relative;}
.index_nav_01 a:after,.index_nav_02 a:after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    border-right: 1px solid #222222;
    border-top: 1px solid #222222;
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
    position: absolute;
    right: 24px;
    top: 32%;
}

a.index_btn:hover {
    color: #808080;
    border: solid 1px #808080;
    text-decoration: none;
}

.index_nav_01 a::after,.index_nav_02 a::after {
    transition: inherit;
}
.index_nav_01 a:hover::after,.index_nav_02 a:hover::after {
    border-top-color: #808080;
    border-right-color: #808080;
}


/* <div class="detail-btn"> */
/*---------------------------------------------*/

.detail-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 14px;
}
.detail-btn a {
    font-size: 14px;
    height: auto;
    background-color: #222222;
    color: #fff;
    width: fit-content;
    padding: 9px 24px;
    border-radius: 5px;
    border: none;
}
.detail-btn a:hover {
    background-color: #808080;
    color: #fff;
    text-decoration: none;
}


/* <div class="other_link"> */
/*---------------------------------------------*/

.other_link {
    margin: 60px auto;
}

ul.link_btn_01{ display: flex;flex-flow: column; justify-content: center; align-items: center;}
ul.link_btn_02{ display: flex;flex-flow: wrap; justify-content: center;}

ul.link_btn_01 li {margin-bottom: 40px;}
ul.link_btn_01 li:last-child {margin-bottom: 0px;}

ul.link_btn_02 li {margin-right: 40px;}
ul.link_btn_02 li:last-child {margin-right: 0px;}

.other_link a {
    font-size: 14px;
    height: auto;
    background-color: #222222;
    color: #fff;
    width: fit-content;
    padding: 9px 24px;
    border-radius: 5px;
    border: none;
    font-weight: normal;
}
.other_link a:hover {
    background-color: #808080;
    color: #fff;
    text-decoration: none;
}


.pc_lp {
    display: block;
}

.sp_lp {
    display: none;
}

/* SP
=================================================================== */


@media screen and (max-width: 600px) {

    
    /* <ul class="index_nav_01"> */
    /* <ul class="index_nav_02"> */
    /*---------------------------------------------*/
    
    .index_nav_01 {width: 95%; margin: 30px auto; display: flex; flex-flow: column; justify-content: center; align-items: center;}
    .index_nav_01 li{width: fit-content; margin-right: 0px;}
    
    .index_nav_02 {width: 95%; margin: 30px auto; display: flex; flex-flow: wrap; justify-content: center; align-items: center;}
    .index_nav_02 li{width: fit-content; margin-right: 10px; margin-left: 10px;}
    .index_nav_02 li:last-child{margin-right: 10px;}

    .index_nav_01 p,.index_nav_02 p{display: block;padding-right: 24px;}
    .index_nav_01 a,.index_nav_02 a { display: flex; justify-content: flex-start; position: relative;}
    .index_nav_01 a:after,.index_nav_02 a:after {
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        border-right: 1px solid #222222;
        border-top: 1px solid #222222;
        -webkit-transform: rotate(-225deg);
        transform: rotate(-225deg);
        position: absolute;
        right: 24px;
        top: 32%;
    }


    a.index_btn {
        font-size: 14px;
        height: auto;
        background-color: #ffffff;
        color: #222222;
        width: fit-content;
        padding: 9px 25px;
        border-radius: 5px;
        border: solid 1px #222222;
        margin: 0 auto 5vw;
    }
    a.index_btn:hover,a.index_btn:active,.index_nav_01 p:hover,.index_nav_02 p:hover {
        color: #808080;
    }

    /* <div class="detail-btn"> */
    /*---------------------------------------------*/

    .detail-btn a {
        font-size: 14px;
        height: auto;
        background-color: #222222;
        color: #ffff !important;
        width: fit-content;
        padding: 9px 25px;
        border-radius: 5px;
        border: none;
        margin: 0 auto 5vw;
    }

    
    /* <div class="other_link"> */
    /*---------------------------------------------*/

    ul.link_btn_02{ display: flex;flex-flow: column; justify-content: center; align-items: center;}
    ul.link_btn_02 li {margin-bottom: 40px; margin-right: 0px;}
    ul.link_btn_02 li:last-child {margin-bottom: 0px;}


    .other_link {
        margin: 0px auto 40px auto;
    }
    .other_link a {
        font-size: 14px;
        height: auto;
        background-color: #222222;
        color: #ffff !important;
        width: fit-content;
        padding: 9px 25px;
        border-radius: 5px;
        border: none;
        font-weight: normal;
        text-align: center;
    }

    .pc_lp {
        display: none;
    }

    .sp_lp {
        display: block;
    }

}