@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
================= */
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;
    flex-wrap: wrap-reverse;
}
.t_price{
    font-size: 14px;
    letter-spacing: 0.073em;
    line-height: 0.93;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    display: block;
}
.price{
    font-size: calc( 24 * (100vw / 750));
    letter-spacing: 0.07em;
    line-height: 1.5;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-style: normal;
    display: block;
}
.c_name{
    font-size: calc( 26 * (100vw / 750));
    line-height: 1.89;
    letter-spacing: 0.05em;
    font-feature-settings: normal;
    display: block;
}
.colorbox{
    display: block;
}
.pc_only{
    display: none !important;
}
/* =================
	ttl
================= */
.kcl_all{
    min-width: calc( 750 * (100vw / 750));
    margin: 0 auto;
}
.kcl_all h2 span{
    display: block;
}
.kcl_all h2 span:nth-of-type(1){
    width: calc( 252 * (100vw / 750));
    margin: 0 auto;
    margin-top: calc( 109 * (100vw / 750));
    margin-bottom: calc( 12 * (100vw / 750));
}
.kcl_all h2 span:nth-of-type(2){
    width: calc( 581 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc( 35 * (100vw / 750));
}
/* =================
	sec1
================= */
.kcl_all .sec1{
    width: 100%;
    margin: 0 auto;
    margin-bottom: calc( 158 * (100vw / 750));
    position: relative;
}
.kcl_all .sec1 .flexbox._01 .imgbox{
    width: calc( 600 * (100vw / 750));
    margin-left: calc( 37 * (100vw / 750));
    margin-bottom: calc( 60 * (100vw / 750));
}
.kcl_all .sec1 .flexbox._01 .posibox{
    width: calc( 362 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc( 80 * (100vw / 750));
}
.kcl_all .sec1 .flexbox._01 .posibox figure{
    margin-bottom: calc( -10 * (100vw / 750));
}
.kcl_all .sec1 .flexbox._01::before{
    content: "";
    width: 100%;
    height: calc( 2020 * (100vw / 750));
    background-color: #cea897;
    position: absolute;
    top: calc( 200 * (100vw / 750));
    left: 0;
    right: 0;
    z-index: -1;
}
.kcl_all .flexbox .posibox p{
    text-align: center;
}
.kcl_all .sec1 .flexbox._01 .posibox .c_name{
    width: calc( 400 * (100vw / 750));
    margin-left: calc( -20 * (100vw / 750));
    margin-bottom: calc( 15 * (100vw / 750));
}
.kcl_all .sec1 .flexbox._01 .posibox .t_price{
    font-size: calc( 26 * (100vw / 750));
    margin-bottom: calc(24 * (100vw / 750));
}
.kcl_all .sec1 .flexbox._01 .posibox .price{
    margin-bottom: calc( 20 * (100vw / 750));
}
.kcl_all .flexbox .posibox .colorbox{
    width: calc( 100 * (100vw / 750));
    margin: 0 auto;
}
.kcl_all .sec1 .flexbox._02 .imgbox{
    width: calc( 450 * (100vw / 750));
    margin-left: calc( 263 * (100vw / 750));
    margin-bottom: calc( 54 * (100vw / 750));
}
.kcl_all .sec1 .flexbox._02 .price{
    margin-left: calc( 37 * (100vw / 750));
}
/* =================
	sec2
================= */
.kcl_all .sec2{
    width: 100%;
    margin: 0 auto;
    margin-bottom: calc( 250 * (100vw / 750));
    position: relative;
}
.kcl_all .sec2 .inner{
    display: flex;
    flex-wrap: wrap;
}
.kcl_all .sec2 .flexbox._01{
    flex-wrap: wrap;
    order: 1;
}
.kcl_all .sec2 .flexbox._01 .imgbox{
    width: calc( 526 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc( 62 * (100vw / 750));
}
.kcl_all .sec2 .flexbox._01 .posibox{
    width: calc( 362 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc( 82 * (100vw / 750));
}
.kcl_all .sec2 .flexbox._01 .posibox figure{
    margin-bottom: calc( -9 * (100vw / 750));
}
.kcl_all .sec2 .flexbox._01::before{
    content: "";
    width: 100%;
    height: calc( 2046 * (100vw / 750));
    background-color: #eae4dc;
    position: absolute;
    top: calc( 200 * (100vw / 750));
    left: 0;
    right: 0;
    z-index: -1;
}
.kcl_all .sec2 .flexbox._01 .posibox .c_name{
    width: calc( 400 * (100vw / 750));
    margin-left: calc( -18 * (100vw / 750));
    margin-bottom: calc( -17 * (100vw / 750));
    letter-spacing: 0.08em;
}
.kcl_all .sec2 .flexbox._01 .posibox .t_price{
    font-size: calc( 26 * (100vw / 750));
    margin-bottom: calc( -6 * (100vw / 750));
}
.kcl_all .sec2 .flexbox._01 .posibox .price{
    margin-bottom: calc( 20 * (100vw / 750));
}
.kcl_all .flexbox .posibox .colorbox{
    width: calc( 100 * (100vw / 750));
    margin: 0 auto;
}
.kcl_all .sec2 .price{
    order: 3;
    text-align: right;
    padding-left: calc( 195 * (100vw / 750));
    letter-spacing: 0.065em;
}
.kcl_all .sec2 .flexbox._02{
    width: calc( 674 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc( 58 * (100vw / 750));
    flex-wrap: nowrap;
    justify-content: space-between;
    order: 2;
}
.kcl_all .sec2 .flexbox._02 .model{
    width: calc( 322 * (100vw / 750));
}
/* =================
	sec3
================= */
.kcl_all .sec3{
    width: 100%;
    margin: 0 auto;
    margin-bottom: calc( 158 * (100vw / 750));
    position: relative;
}
.kcl_all .sec3 .flexbox._01 .imgbox{
    width: calc( 676 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc( 60 * (100vw / 750));
}
.kcl_all .sec3 .flexbox._01 .posibox{
    width: calc( 362 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc( 80 * (100vw / 750));
}
.kcl_all .sec3 .flexbox._01 .posibox figure{
    margin-bottom: calc( -9 * (100vw / 750));
}
.kcl_all .sec3 .flexbox._01::before{
    content: "";
    width: 100%;
    height: calc( 2246 * (100vw / 750));
    background-color: #ede1d9;
    position: absolute;
    top: calc( 200 * (100vw / 750));
    left: 0;
    right: 0;
    z-index: -1;
}
.kcl_all .sec3 .flexbox._01 .posibox .c_name{
    width: calc( 400 * (100vw / 750));
    margin-left: calc( -20 * (100vw / 750));
    margin-bottom: calc( 15 * (100vw / 750));
    letter-spacing: 0.08em;
}
.kcl_all .sec3 .flexbox._01 .posibox .t_price{
    font-size: calc( 26 * (100vw / 750));
    margin-bottom: calc(24 * (100vw / 750));
}
.kcl_all .sec3 .flexbox._01 .posibox .price{
    margin-bottom: calc( 20 * (100vw / 750));
}
.kcl_all .flexbox .posibox .colorbox{
    width: calc( 100 * (100vw / 750));
    margin: 0 auto;
}
.kcl_all .sec3 .flexbox._02 .imgbox{
    width: calc( 526 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc( 54 * (100vw / 750));
}
.kcl_all .sec3 .flexbox._02 .price{
    margin-left: calc( 150 * (100vw / 750));
    text-align: right;
}
/* =================
	sec4
================= */
.kcl_all .sec4{
    width: 100%;
    margin: 0 auto;
    margin-bottom: calc( 180 * (100vw / 750));
    position: relative;
}
.kcl_all .sec4 .flexbox{
    flex-wrap: wrap;
}
.kcl_all .sec4 .flexbox .imgbox{
    width: calc( 600 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc( 60 * (100vw / 750));
}
.kcl_all .sec4 .flexbox .imgbox .model{
    margin-bottom: calc( 53 * (100vw / 750));
}
.kcl_all .sec4 .flexbox .posibox{
    width: calc( 362 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc( 80 * (100vw / 750));
}
.kcl_all .sec4 .flexbox .posibox figure{
    margin-bottom: calc( -9 * (100vw / 750));
}
.kcl_all .sec4 .flexbox::before{
    content: "";
    width: 100%;
    height: calc( 1612 * (100vw / 750));
    background-color: #ddd9d4;
    position: absolute;
    top: calc( 200 * (100vw / 750));
    left: 0;
    right: 0;
    z-index: -1;
}
.kcl_all .sec4 .flexbox .posibox .c_name{
    width: calc( 400 * (100vw / 750));
    margin-left: calc( -20 * (100vw / 750));
    margin-bottom: calc( 15 * (100vw / 750));
    letter-spacing: 0.08em;
}
.kcl_all .sec4 .flexbox .posibox .t_price{
    font-size: calc( 26 * (100vw / 750));
    margin-bottom: calc(24 * (100vw / 750));
}
.kcl_all .sec4 .price{
    text-align: center;
    margin-bottom: calc( 20 * (100vw / 750));
}
.kcl_all .flexbox .posibox .colorbox{
    width: calc( 100 * (100vw / 750));
    margin: 0 auto;
}
/* =================
	sec5
================= */
.kcl_all .sec5{
    width: 100%;
    margin: 0 auto;
    margin-bottom: calc( 158 * (100vw / 750));
    position: relative;
}
.kcl_all .sec5 .flexbox._01 .imgbox{
    width: calc( 600 * (100vw / 750));
    margin-right: auto;
    margin-bottom: calc( 60 * (100vw / 750));
}
.kcl_all .sec5 .flexbox._01 .posibox{
    width: calc( 362 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc( 78 * (100vw / 750));
}
.kcl_all .sec5 .flexbox._01 .posibox figure{
    margin-bottom: calc( -10 * (100vw / 750));
}
.kcl_all .sec5 .flexbox._01::before{
    content: "";
    width: 100%;
    height: calc( 2246 * (100vw / 750));
    background-color: #e5d6ca;
    position: absolute;
    top: calc( 200 * (100vw / 750));
    left: 0;
    right: 0;
    z-index: -1;
}
.kcl_all .flexbox .posibox p{
    text-align: center;
}
.kcl_all .sec5 .flexbox._01 .posibox .c_name{
    width: calc( 400 * (100vw / 750));
    margin-left: calc( -20 * (100vw / 750));
    margin-bottom: calc( 15 * (100vw / 750));
}
.kcl_all .sec5 .flexbox._01 .posibox .t_price{
    font-size: calc( 26 * (100vw / 750));
    margin-bottom: calc(24 * (100vw / 750));
}
.kcl_all .sec5 .flexbox._01 .posibox .price{
    margin-bottom: calc( 20 * (100vw / 750));
}
.kcl_all .flexbox .posibox .colorbox{
    width: calc( 100 * (100vw / 750));
    margin: 0 auto;
}
.kcl_all .sec5 .flexbox._02 .imgbox{
    width: calc( 600 * (100vw / 750));
    margin-left: auto;
    margin-bottom: calc( 54 * (100vw / 750));
}
.kcl_all .sec5 .flexbox._02 .price{
    margin-left: calc( 37 * (100vw / 750));
}
/* =================
	bnt
================= */
.kcl_all .kcl_btn{
    width: calc( 676 * (100vw / 750));
    margin: 0 auto;
    margin-bottom: calc( 200 * (100vw / 750));
}