@charset "Shift_JIS";

/*レスポンシブ2〜3カラムセクション*/


/*///////2カラム////////////*/


/*カラムここから*/

.mask {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.header {
    float: left;
    width: 100%;
}

.colleft {
    position: relative;
    width: 100%;
}

.col1 {
    /*右ボックス%*/
    position: relative;
    overflow: hidden;
    float: left;
    left: 101%;
    /*左余白（固定）*/
}

.col2 {
    /*左ボックス%*/
    position: relative;
    overflow: hidden;
    float: left;
    left: 3%;
    /*左余白（固定）*/
}

.footer {
    float: left;
    width: 100%;
}


/*パーセント*/

.colleft.p5 {
    right: 5%;
}

.col1.p5 {
    width: 3%;
    /*横幅% - 余白2%*/
}

.col2.p5 {
    width: 93%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p10 {
    right: 10%;
}

.col1.p10 {
    width: 8%;
    /*横幅% - 余白2%*/
}

.col2.p10 {
    width: 88%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p15 {
    right: 15%;
}

.col1.p15 {
    width: 13%;
    /*横幅% - 余白2%*/
}

.col2.p15 {
    width: 83%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p20 {
    right: 20%;
}

.col1.p20 {
    width: 18%;
    /*横幅% - 余白2%*/
}

.col2.p20 {
    width: 78%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p25 {
    right: 25%;
}

.col1.p25 {
    width: 23%;
    /*横幅% - 余白2%*/
}

.col2.p25 {
    width: 73%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p30 {
    right: 30%;
}

.col1.p30 {
    width: 28%;
    /*横幅% - 余白2%*/
}

.col2.p30 {
    width: 68%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p35 {
    right: 35%;
}

.col1.p35 {
    width: 33%;
    /*横幅% - 余白2%*/
}

.col2.p35 {
    width: 63%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p40 {
    right: 40%;
}

.col1.p40 {
    width: 38%;
    /*横幅% - 余白2%*/
}

.col2.p40 {
    width: 58%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p45 {
    right: 45%;
}

.col1.p45 {
    width: 43%;
    /*横幅% - 余白2%*/
}

.col2.p45 {
    width: 53%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p50 {
    right: 50%;
}

.col1.p50 {
    width: 48%;
    /*横幅% - 余白2%*/
}

.col2.p50 {
    width: 48%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p55 {
    right: 55%;
}

.col1.p55 {
    width: 53%;
    /*横幅% - 余白2%*/
}

.col2.p55 {
    width: 43%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p60 {
    right: 60%;
}

.col1.p60 {
    width: 58%;
    /*横幅% - 余白2%*/
}

.col2.p60 {
    width: 38%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p65 {
    right: 65%;
}

.col1.p65 {
    width: 63%;
    /*横幅% - 余白2%*/
}

.col2.p65 {
    width: 33%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p70 {
    right: 70%;
}

.col1.p70 {
    width: 68%;
    /*横幅% - 余白2%*/
}

.col2.p70 {
    width: 28%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p75 {
    right: 75%;
}

.col1.p75 {
    width: 73%;
    /*横幅% - 余白2%*/
}

.col2.p75 {
    width: 23%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p80 {
    right: 80%;
}

.col1.p80 {
    width: 78%;
    /*横幅% - 余白2%*/
}

.col2.p80 {
    width: 18%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p85 {
    right: 85%;
}

.col1.p85 {
    width: 83%;
    /*横幅% - 余白2%*/
}

.col2.p85 {
    width: 13%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p90 {
    right: 90%;
}

.col1.p90 {
    width: 88%;
    /*横幅% - 余白2%*/
}

.col2.p90 {
    width: 8%;
    /*横幅% - 余白2%*/
}


/*パーセント*/

.colleft.p95 {
    right: 95%;
}

.col1.p95 {
    width: 93%;
    /*横幅% - 余白2%*/
}

.col2.p95 {
    width: 3%;
    /*横幅% - 余白2%*/
}


/*順序変え*/

.colleft.p5.l2r {
    right: 100%;
}

.col2.p5.l2r {
    left: 103%;
}

.colleft.p10.l2r {
    right: 100%;
}

.col2.p10.l2r {
    left: 103%;
}

.colleft.p15.l2r {
    right: 100%;
}

.col2.p15.l2r {
    left: 103%;
}

.colleft.p20.l2r {
    right: 100%;
}

.col2.p20.l2r {
    left: 103%;
}

.colleft.p25.l2r {
    right: 100%;
}

.col2.p25.l2r {
    left: 103%;
}

.colleft.p30.l2r {
    right: 100%;
}

.col2.p30.l2r {
    left: 103%;
}

.colleft.p35.l2r {
    right: 100%;
}

.col2.p35.l2r {
    left: 103%;
}

.colleft.p40.l2r {
    right: 100%;
}

.col2.p40.l2r {
    left: 103%;
}

.colleft.p45.l2r {
    right: 100%;
}

.col2.p45.l2r {
    left: 103%;
}

.colleft.p50.l2r {
    right: 100%;
}

.col2.p50.l2r {
    left: 103%;
}

.colleft.p55.l2r {
    right: 100%;
}

.col2.p55.l2r {
    left: 103%;
}

.colleft.p60.l2r {
    right: 100%;
}

.col2.p60.l2r {
    left: 103%;
}

.colleft.p65.l2r {
    right: 100%;
}

.col2.p65.l2r {
    left: 103%;
}

.colleft.p70.l2r {
    right: 100%;
}

.col2.p75.l2r {
    left: 103%;
}

.colleft.p75.l2r {
    right: 100%;
}

.col2.p80.l2r {
    left: 103%;
}

.colleft.p80.l2r {
    right: 100%;
}

.col2.p85.l2r {
    left: 103%;
}

.colleft.p85.l2r {
    right: 100%;
}

.col2.p90.l2r {
    left: 103%;
}

.colleft.p90.l2r {
    right: 100%;
}

.col2.p95.l2r {
    left: 103%;
}

.colleft.p95.l2r {
    right: 100%;
}


/*レスポンシブ*/

@media screen and (max-width: 568px) {
    .mask.col_responsive,
    .col2.col_responsive,
    .col1.col_responsive {
        overflow: hidden;
    }
    .colleft.col_responsive,
    .col2.col_responsive,
    .col1.col_responsive {
        position: initial;
    }
    .col1.col_responsive,
    .col2.col_responsive {
        float: none;
        text-align: center;
    }
    /*パーセント*/
    .col1.p5.col_responsive,
    .col2.p5.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p10.col_responsive,
    .col2.p10.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p15.col_responsive,
    .col2.p15.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p20.col_responsive,
    .col2.p20.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p25.col_responsive,
    .col2.p25.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p30.col_responsive,
    .col2.p30.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p35.col_responsive,
    .col2.p35.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p40.col_responsive,
    .col2.p40.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p45.col_responsive,
    .col2.p45.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p50.col_responsive,
    .col2.p50.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p55.col_responsive,
    .col2.p55.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p60.col_responsive,
    .col2.p60.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p65.col_responsive,
    .col2.p65.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p70.col_responsive,
    .col2.p70.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p75.col_responsive,
    .col2.p75.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p80.col_responsive,
    .col2.p80.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p85.col_responsive,
    .col2.p85.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p90.col_responsive,
    .col2.p90.col_responsive {
        width: 100%;
    }
    /*パーセント*/
    .col1.p95.col_responsive,
    .col2.p95.col_responsive {
        width: 100%;
    }
    .col1.col_responsive,
    .col2.col_responsive {
        right: auto;
        left: auto;
    }
    .l2r.col1.col_responsive,
    .l2r.col2.col_responsive {
        left: auto;
        right: auto;
    }
    .colleft.p5.col_responsive,
    .colleft.p10.col_responsive,
    .colleft.p15.col_responsive,
    .colleft.p20.col_responsive,
    .colleft.p25.col_responsive,
    .colleft.p30.col_responsive,
    .colleft.p35.col_responsive,
    .colleft.p40.col_responsive,
    .colleft.p45.col_responsive,
    .colleft.p50.col_responsive,
    .colleft.p55.col_responsive,
    .colleft.p60.col_responsive,
    .colleft.p65.col_responsive,
    .colleft.p70.col_responsive,
    .colleft.p75.col_responsive,
    .colleft.p80.col_responsive,
    .colleft.p85.col_responsive,
    .colleft.p90.col_responsive,
    .colleft.p95.col_responsive {
        right: auto;
        left: auto;
    }
}


/*2カラムここまで*/


/*3カラムここから*/

.colmask_3clm {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.header_3clm {
    float: left;
    width: 100%;
}

.colmid_3clm {
    position: relative;
    width: 100%;
    right: 33%;
}

.colleft_3clm {
    position: relative;
    width: 100%;
    right: 33%;
}

.col1_3clm {
    position: relative;
    overflow: hidden;
    float: left;
    width: 31%;
    /*余白2%マイナス*/
    left: 68%;
    /*余白固定*/
}

.col2_3clm {
    position: relative;
    overflow: hidden;
    float: left;
    width: 32%;
    /*余白2%マイナス（割り切れないので34計算）*/
    left: 70%;
    /*余白2%追加*/
}

.col3_3clm {
    position: relative;
    overflow: hidden;
    float: left;
    width: 31%;
    /*余白2%マイナス*/
    left: 71%;
    /*余白固定*/
}

.footer_3clm {
    float: left;
    width: 100%;
}

@media screen and (max-width: 568px) {
    .colmask_3clm.col_responsive,
    .col1_3clm.col_responsive,
    .col2_3clm.col_responsive,
    .col3_3clm.col_responsive {
        overflow: hidden;
    }
    .colmid_3clm.col_responsive,
    .colleft_3clm.col_responsive,
    .col1_3clm.col_responsive,
    .col2_3clm.col_responsive,
    .col3_3clm.col_responsive {
        position: initial;
    }
    .col1_3clm.col_responsive,
    .col2_3clm.col_responsive,
    .col3_3clm.col_responsive {
        float: none;
        text-align: center;
        width: 100%;
    }
}


/*3カラムここまで*/


/*表示・非表示切り替え*/

.pcnone {
    display: none;
}

@media screen and (max-width: 568px) {
    .spnone {
        display: none;
    }
}