@charset "UTF-8";
/* ===============================================
    ! Foundation !
=============================================== */
/* =====================================
    * setting for animation style *
===================================== */
.fadeIn {
    opacity: 0;
    -webkit-transform: translate(0, 50px);
    -ms-transform: translate(0, 50px);
    transform: translate(0, 50px);
    -webkit-transition: all 1500ms;
    transition: all 1500ms;
  }
  
  /* jQueryでスクロール量に応じて付与された 'scrollIn' のスタイル */
  .fadeIn.scrollIn {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
/* =================
	all
================= */

a:hover img{
	opacity: 0.7;
}

img{
    color: inherit;
    text-decoration: none;
    -webkit-transition: .3s;
    transition: .3s;
    width: 100%;
}
.main-area .main-inner{
    width: 100%;
    max-width: none;
    overflow-x: hidden;
}
#kcl_201019{
    font-feature-settings: "palt";
    box-sizing: border-box;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", Noto Sans JP, "Open Sans", "メイリオ", sans-serif;
}
.flexbox{
    display: flex;
}
.t_price{
    font-size: 14px;
    letter-spacing: 0.073em;
    line-height: 1.83;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    display: block;
}
.price{
    font-size: 12px;
    letter-spacing: 0.073em;
    line-height: 2;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    display: block;
}
.c_name{
    font-size: 16px;
    line-height: 1.38;
    letter-spacing: 0.05em;
    font-feature-settings: normal;
    display: block;
}
.colorbox{
    display: block;
}
.sp_only{
    display: none !important;
}
/* =================
	ttl
================= */
.kcl_all{
    /*min-width: 1400px;*/
    margin: 0 auto;
}
.kcl_all h2 span{
    display: block;
}
.kcl_all h2 span:nth-of-type(1){
    width: 180px;
    margin: 0 auto;
    margin-top: 78px;
    margin-bottom: 11px;
}
.kcl_all h2 span:nth-of-type(2){
    width: 418px;
    margin: 0 auto;
    margin-bottom: 138px;
}
/* =================
	sec1
================= */
.kcl_all .sec1{
    width: 880px;
    margin: 0 auto;
    margin-bottom: 148px;
}
.kcl_all .sec1 .flexbox._01 .imgbox{
    width: 450px;
    margin-right: 145px;
    position: relative;
}
.kcl_all .sec1 .flexbox._01 .imgbox::before{
    content: "";
    width: 100vw;
    height: 725px;
    background-color: #cea897;
    position: absolute;
    top: 100px;
    right: -300px;
    z-index: -1;
}
.kcl_all .sec1 .flexbox._01 .posibox figure{
    width: 220px;
    margin-top: -50px;
    margin-bottom: -4px;
}
.kcl_all .flexbox .posibox p{
    text-align: center;
}
.kcl_all .sec1 .flexbox._01 .posibox .c_name{
    margin-bottom: 5px;
}
.kcl_all .sec1 .flexbox._01 .posibox .t_price{
    margin-bottom: 6px;
}
.kcl_all .sec1 .flexbox._01 .posibox .price{
    margin-bottom: 7px;
}
.kcl_all .flexbox .posibox .colorbox{
    width: 54px;
    margin: 0 auto;
}
.kcl_all .sec1 .flexbox._02 .imgbox{
    width: 350px;
    margin-top: -275px;
    margin-left: auto;
}
.kcl_all .sec1 .flexbox._02 .price{
    margin-top: 15px;
}
/* =================
	sec2
================= */
.kcl_all .sec2{
    width: 100%;
    margin: 0 auto;
    margin-bottom: 150px;
    position: relative;
}
.kcl_all .sec2::before{
    content: "";
    width: 100%;
    height: 815px;
    background-color: #eae4dc;
    position: absolute;
    top: 130px;
    left: 0;
    right: 0;
    z-index: -1;
}
.kcl_all .sec2 .inner{
    width: 850px;
    margin: 0 auto;
}
.kcl_all .sec2 .flexbox._01 .posibox figure{
    width: 221px;
    margin: 0 170px -4px 109px;
}
.kcl_all .sec2 .flexbox._01 .posibox .c_name{
    margin-bottom: -6px;
}
.kcl_all .sec2 .flexbox._01 .posibox .t_price{
    margin-bottom: -4px;
}
.kcl_all .sec2 .flexbox._01 .imgbox{
    width: 350px;
    position: relative;
    z-index: 1;
}
.kcl_all .sec2 .flexbox._01 .posibox p{
    width: 118px;
    margin-left: 161px;
}
.kcl_all .sec2 .flexbox._02{
    margin-top: -118px;
}
.kcl_all .sec2 .flexbox._02 .model._01{
    width: 270px;
    margin-right: 40px;
}
.kcl_all .sec2 .flexbox._02 .model._02{
    width: 300px;
    margin-top: 155px;
}
.kcl_all .sec2 .price{
    text-align: right;
    margin-top: 15px;
    z-index: 1;
    position: relative;
}
/* =================
	sec3
================= */
.kcl_all .sec3{
    width: 880px;
    margin: 0 auto;
    margin-bottom: 151px;
}
.kcl_all .sec3 .flexbox._01 .imgbox{
    width: 450px;
    margin-right: 145px;
    position: relative;
}
.kcl_all .sec3 .flexbox._01 .imgbox::before{
    content: "";
    width: 100vw;
    height: 735px;
    background-color: #ede1d9;
    position: absolute;
    top: 120px;
    left: 120px;
    z-index: -1;
}
.kcl_all .sec3 .flexbox._01 .posibox figure{
    width: 220px;
    margin-bottom: -4px;
}
.kcl_all .flexbox .posibox p{
    text-align: center;
}
.kcl_all .sec3 .flexbox._01 .posibox .c_name{
    margin-bottom: 5px;
}
.kcl_all .sec3 .flexbox._01 .posibox .t_price{
    margin-bottom: 5px;
}
.kcl_all .sec3 .flexbox._01 .posibox .price{
    margin-bottom: 7px;
}
.kcl_all .sec3 .flexbox._02 .imgbox{
    width: 350px;
    margin-top: -225px;
    margin-left: auto;
}
.kcl_all .sec3 .flexbox._02 .price{
    margin-top: 15px;
}
/* =================
	sec4
================= */
.kcl_all .sec4{
    width: 725px;
    margin: 0 auto;
    margin-bottom: 146px;
}
.kcl_all .sec4 .posibox{
    z-index: 1;
}
.kcl_all .sec4 .posibox figure{
    width: 220px;
    margin: 111px 120px -4px 43px;
}
.kcl_all .sec4 .posibox p{
    width: 152px;
    margin-left: 77px;
}
.kcl_all .sec4 .posibox .c_name{
    margin-bottom: 4px;
}
.kcl_all .sec4 .posibox .t_price{
    margin-bottom: 6px;
}
.kcl_all .sec4 .flexbox .imgbox .model{
    width: 400px;
    position: relative;
    margin-bottom: 15px;
}
.kcl_all .sec4 .flexbox .imgbox .model::before{
    content: "";
    width: 100vw;
    height: 500px;
    background-color: #ddd9d4;
    position: absolute;
    top: 50px;
    right: -100px;
    z-index: -1;
}
.kcl_all .sec4 .flexbox .imgbox .price{
    text-align: right;
}
/* =================
	sec5
================= */
.kcl_all .sec5{
    width: 930px;
    margin: 0 auto;
    margin-bottom: 98px;
}
.kcl_all .sec5 .flexbox._01 .imgbox{
    width: 450px;
    margin-right: 170px;
    position: relative;
}
.kcl_all .sec5 .flexbox._01 .imgbox::before{
    content: "";
    width: 100vw;
    height: 830px;
    background-color: #e5d6ca;
    position: absolute;
    top: 100px;
    left: -100px;
    z-index: -1;
}
.kcl_all .sec5 .flexbox._01 .posibox figure{
    width: 220px;
    margin-bottom: -4px;
}
.kcl_all .flexbox .posibox p{
    text-align: center;
}
.kcl_all .sec5 .flexbox._01 .posibox .c_name{
    margin-bottom: 5px;
}
.kcl_all .sec5 .flexbox._01 .posibox .t_price{
    margin-bottom: 5px;
}
.kcl_all .sec5 .flexbox._01 .posibox .price{
    margin-bottom: 7px;
}
.kcl_all .sec5 .flexbox._02 .imgbox{
    width: 400px;
    margin-top: -246px;
    margin-left: auto;
}
.kcl_all .sec5 .flexbox._02 .price{
    margin-top: 15px;
}
/* =================
	bnt
================= */
.kcl_all .kcl_btn{
    width: 380px;
    margin: 0 auto;
    margin-bottom: 141px;
}
/* for tablet */
@media only screen
and (min-width: 561px)
and (max-width: 1200px) {
	.sp_only {
		display: none !important;
    }
    .t_price{
        font-size: calc( 14 * (100vw / 1200));
    }
    .price{
        font-size: calc( 12 * (100vw / 1200));
    }
    .c_name{
        font-size: calc( 16 * (100vw / 1200));
    }
    .sp_only{
        display: none !important;
    }
    /* =================
        ttl
    ================= */
    .kcl_all{
        min-width: calc( 1200 * (100vw / 1200));
    }
    .kcl_all h2 span:nth-of-type(1){
        width: calc( 180 * (100vw / 1200));
        margin-top: calc( 78 * (100vw / 1200));
        margin-bottom: calc( 11 * (100vw / 1200));
    }
    .kcl_all h2 span:nth-of-type(2){
        width: calc( 418 * (100vw / 1200));
        margin-bottom: calc( 138 * (100vw / 1200));
    }
    /* =================
        sec1
    ================= */
    .kcl_all .sec1{
        width: calc( 880 * (100vw / 1200));
        margin-bottom: calc( 148 * (100vw / 1200));
    }
    .kcl_all .sec1 .flexbox._01 .imgbox{
        width: calc( 450 * (100vw / 1200));
        margin-right: calc( 145 * (100vw / 1200));
    }
    .kcl_all .sec1 .flexbox._01 .imgbox::before{
        height: calc( 725 * (100vw / 1200));
        top: calc( 100 * (100vw / 1200));
        right: calc( -300 * (100vw / 1200));
    }
    .kcl_all .sec1 .flexbox._01 .posibox figure{
        width: calc( 220 * (100vw / 1200));
        margin-top: calc( -50 * (100vw / 1200));
        margin-bottom: calc( -4 * (100vw / 1200));
    }
    .kcl_all .sec1 .flexbox._01 .posibox .c_name{
        margin-bottom: calc( 5 * (100vw / 1200));
    }
    .kcl_all .sec1 .flexbox._01 .posibox .price{
        margin-bottom: calc( 7 * (100vw / 1200));
    }
    .kcl_all .flexbox .posibox .colorbox{
        width: calc( 54 * (100vw / 1200));
    }
    .kcl_all .sec1 .flexbox._02 .imgbox{
        width: calc( 350 * (100vw / 1200));
        margin-top: calc( -275 * (100vw / 1200));
    }
    .kcl_all .sec1 .flexbox._02 .price{
        margin-top: calc( 15 * (100vw / 1200));
    }
    /* =================
        sec2
    ================= */
    .kcl_all .sec2{
        margin-bottom: calc( 150 * (100vw / 1200));
    }
    .kcl_all .sec2::before{
        height: calc( 815 * (100vw / 1200));
        top: calc( 130 * (100vw / 1200));
    }
    .kcl_all .sec2 .inner{
        width: calc( 850 * (100vw / 1200));
    }
    .kcl_all .sec2 .flexbox._01 .posibox figure{
        width: calc( 221 * (100vw / 1200));
        margin: 0 calc( 170 * (100vw / 1200)) calc( -4 * (100vw / 1200)) calc( 109 * (100vw / 1200));
    }
    .kcl_all .sec2 .flexbox._01 .posibox .c_name{
        margin-bottom: calc( -6 * (100vw / 1200));
    }
    .kcl_all .sec2 .flexbox._01 .posibox .t_price{
        margin-bottom: calc( -4 * (100vw / 1200));
    }
    .kcl_all .sec2 .flexbox._01 .imgbox{
        width: calc( 350 * (100vw / 1200));
    }
    .kcl_all .sec2 .flexbox._01 .posibox p{
        width: calc( 118 * (100vw / 1200));
        margin-left: calc( 161 * (100vw / 1200));
    }
    .kcl_all .sec2 .flexbox._02{
        margin-top: calc( -118 * (100vw / 1200));
    }
    .kcl_all .sec2 .flexbox._02 .model._01{
        width: calc( 270 * (100vw / 1200));
        margin-right: calc( 40 * (100vw / 1200));
    }
    .kcl_all .sec2 .flexbox._02 .model._02{
        width: calc( 300 * (100vw / 1200));
        margin-top: calc( 155 * (100vw / 1200));
    }
    .kcl_all .sec2 .price{
        margin-top: calc( 15 * (100vw / 1200));
    }
    /* =================
        sec3
    ================= */
    .kcl_all .sec3{
        width: calc( 880 * (100vw / 1200));
        margin-bottom: calc( 151 * (100vw / 1200));
    }
    .kcl_all .sec3 .flexbox._01 .imgbox{
        width: calc( 450 * (100vw / 1200));
        margin-right: calc( 145 * (100vw / 1200));
    }
    .kcl_all .sec3 .flexbox._01 .imgbox::before{
        height: calc( 735 * (100vw / 1200));
        top: calc( 120 * (100vw / 1200));
        left: calc( 120 * (100vw / 1200));
    }
    .kcl_all .sec3 .flexbox._01 .posibox figure{
        width: calc( 220 * (100vw / 1200));
        margin-bottom: calc( -4 * (100vw / 1200));
    }
    .kcl_all .sec3 .flexbox._01 .posibox .c_name{
        margin-bottom: calc( 5 * (100vw / 1200));
    }
    .kcl_all .sec3 .flexbox._01 .posibox .t_price{
        margin-bottom: calc( 5 * (100vw / 1200));
    }
    .kcl_all .sec3 .flexbox._01 .posibox .price{
        margin-bottom: calc( 7 * (100vw / 1200));
    }
    .kcl_all .sec3 .flexbox._02 .imgbox{
        width: calc( 350 * (100vw / 1200));
        margin-top: calc( -225 * (100vw / 1200));
    }
    .kcl_all .sec3 .flexbox._02 .price{
        margin-top: calc( 15 * (100vw / 1200));
    }
    /* =================
        sec4
    ================= */
    .kcl_all .sec4{
        width: calc( 725 * (100vw / 1200));
        margin-bottom: calc( 150 * (100vw / 1200));
    }
    .kcl_all .sec4 .posibox figure{
        width: calc( 220 * (100vw / 1200));
        margin: calc( 111 * (100vw / 1200)) calc( 120 * (100vw / 1200)) calc( -4 * (100vw / 1200)) calc( 43 * (100vw / 1200));
    }
    .kcl_all .sec4 .posibox p{
        width: calc( 151 * (100vw / 1200));
        margin-left: calc( 77 * (100vw / 1200));
    }
    .kcl_all .sec4 .posibox .c_name{
        margin-bottom: calc( 4 * (100vw / 1200));
    }
    .kcl_all .sec4 .flexbox .imgbox .model{
        width: calc( 400 * (100vw / 1200));
        margin-bottom: calc( 15 * (100vw / 1200));
    }
    .kcl_all .sec4 .flexbox .imgbox .model::before{
        height: calc( 500 * (100vw / 1200));
        top: calc( 50 * (100vw / 1200));
        right: calc( -100 * (100vw / 1200));
    }
    /* =================
        sec5
    ================= */
    .kcl_all .sec5{
        width: calc( 930 * (100vw / 1200));
        margin-bottom: calc( 98 * (100vw / 1200));
    }
    .kcl_all .sec5 .flexbox._01 .imgbox{
        width: calc( 450 * (100vw / 1200));
        margin-right: calc( 170 * (100vw / 1200));
    }
    .kcl_all .sec5 .flexbox._01 .imgbox::before{
        height: calc( 830 * (100vw / 1200));
        top: calc( 100 * (100vw / 1200));
        left: calc( -100 * (100vw / 1200));
    }
    .kcl_all .sec5 .flexbox._01 .posibox figure{
        width: calc( 220 * (100vw / 1200));
        margin-bottom: calc( -4 * (100vw / 1200));
    }
    .kcl_all .sec5 .flexbox._01 .posibox .c_name{
        margin-bottom: calc( 5 * (100vw / 1200));
    }
    .kcl_all .sec5 .flexbox._01 .posibox .t_price{
        margin-bottom: calc( 5 * (100vw / 1200));
    }
    .kcl_all .sec5 .flexbox._01 .posibox .price{
        margin-bottom: calc( 7 * (100vw / 1200));
    }
    .kcl_all .sec5 .flexbox._02 .imgbox{
        width: calc( 400 * (100vw / 1200));
        margin-top: calc( -246 * (100vw / 1200));
    }
    .kcl_all .sec5 .flexbox._02 .price{
        margin-top: calc( 15 * (100vw / 1200));
    }
    /* =================
        bnt
    ================= */
    .kcl_all .kcl_btn{
        width: calc( 380 * (100vw / 1200));
        margin-bottom: calc( 141 * (100vw / 1200));
    }
}