@charset "UTF-8";
/***********************************************/
/*BASE*/
/***********************************************/
body#knit #content{ font-size-adjust: none;}
body#knit #content { width: 640px; min-width: 640px; max-width: 100% !important; margin: 0 auto; font-size: 12px; line-height: 1.6; letter-spacing: 0.26em; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif; font-feature-settings: "palt" 1; color: #202020; background: #fff; padding: 52px 0 0; overflow: hidden;}
body#knit #content img { vertical-align: bottom; max-width: 100%; height: auto;}
body#knit #content a{ transition: 0.3s;}
body#knit #content a:hover{ opacity: 0.7;}
body#knit #content p{ font-size: 1vw;}
body#knit #content p:not(:last-child){ margin-bottom: 1em;}
@media screen and (max-width:640px){
body#knit #content { width: 100%; min-width: 100%; font-size: 1.875vw;}
body#knit #content p{ font-size: 3vw; line-height: 1.6em;}
}

/*kv*/
body#knit #kv{ margin: 0 auto; background: rgba(0,0,0,0.1);}
body#knit #kv .kv01_in{ width: 100%; height: 640px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
body#knit #kv .kv01_in ul{ margin: 170px 30px 30px; display: flex; flex-wrap: wrap; padding: 6px; background: #fff;}
body#knit #kv .kv01_in ul li{ width: calc(33.33% - 8px); margin: 4px;}
body#knit #kv .kv01_in .kv_btn{ display: flex; align-items: center; justify-content: center; background: #fff; color: #202020; width: 280px; height: 36px; font-weight: bold; font-size: 14px; margin: 0; padding: 18px;}
body#knit #kv .kv01_in .kv_btn img{ height: 12px !important;}
body#knit #kv{ position: relative;}
body#knit #kv .bx-viewport { height: 810px !important;}
@media screen and (max-width:640px){
body#knit #kv .kv01_in{ height: 124vw;}
body#knit #kv .kv01_in ul{ margin: 6vw; padding: 1vw;}
body#knit #kv .kv01_in ul li{ width: calc(33.33% - 1.25vw); margin: 0.625vw;}
body#knit #kv .kv01_in .kv_btn{ width: 53.75vw; height: 5.625vw; font-size: 2.1875vw; padding: 3.6vw;}
body#knit #kv .kv01_in .kv_btn img{ height: 2.8vw !important;}
body#knit #kv .bx-viewport { height: 508px !important;}
}

/*lead*/
body#knit #lead{ padding: 70px 0 60px; text-align: center;}
body#knit #lead h1{ text-align: center; margin-bottom: 30px;}
body#knit #lead h1 strong{ display: block;}
body#knit #lead h1 strong img{ height: 16px !important;}
body#knit #lead h1 span{ display: block; font-size: 12px; margin-top: 1.2em;}
@media screen and (max-width:640px){
body#knit #lead{ padding: 10.9375vw 0 9.375vw;}
body#knit #lead h1{ margin-bottom: 4.6875vw;}
body#knit #lead h1 strong img{ height: 3.6vw !important;}
body#knit #lead h1 span{ font-size: 3vw; font-weight: 600;}
}

/*item*/
body#knit .item_sec{ background: rgba(0,0,0,0.05); padding: 30px 0; position: relative;}
body#knit .item_sec .num{ display: flex; align-items: center; justify-content: center; width: 140px; padding: 0 30px 5px; border-bottom: 1px solid #000; position: absolute; left: 0; top: 30px;}
body#knit .item_sec .num img{ height: 15px !important;}
body#knit .item_mv{ padding: 40px 0 20px; width: 486px; margin: 0 196px 0 20px; position: relative; z-index: 1;}
body#knit .item_mv .ico{ position: absolute; right: -108px; top: 0; z-index: -1;}
body#knit .item_mv .ico img{ width: 130px;}
body#knit .item_mv .ico.w170 img{ width: 170px;}
body#knit .item_mv .ico02{ position: absolute; right: -108px; top: 0; z-index: -1;}
body#knit .item_mv .ico02 img{ width: 130px;}
body#knit .item_mv .ico02.w170 img{ width: 170px;}
body#knit .item_mv figure{ margin-bottom: 30px;}
body#knit .item_mv h3{ margin-bottom: 12px;}
body#knit .item_mv h3 img{ height: 14px !important;}
body#knit .item_mv h3.h17 img{ height: 17px !important;}
body#knit .item_mv p{ font-size: 10px; letter-spacing: 0.1em;}
body#knit .item_mv figure.color{ margin: 20px 0 0;}
body#knit .item_mv figure.color img{ height: 61px !important;}
body#knit .item_cont{ margin: 0 20px; padding: 20px 0; position: relative; z-index: 3;}
body#knit .item_cont:after{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; left: -76px; top: 0; z-index: -1;}
body#knit .item_cont ul{ display: flex; width: 100%; align-items: center; justify-content: center; margin: auto;}
body#knit .item_cont ul li{ width: calc(50% - 12px); margin: 0 6px;}
body#knit .item_cont ul li:nth-child(2) img{ position: relative; top: -96px;}
body#knit .item_cont figure.item_btn{ margin: 0;}
body#knit .item_cont figure.item_btn a{ display: flex; align-items: center; justify-content: center; width: 140px; height: 45px; border: 1px solid #2d2c2f; background: #fff; position: absolute; right: 6px; bottom: 20px; font-weight: bold; letter-spacing: 0.1em;}
body#knit .item_cont figure.item_btn a span{ line-height: 0; margin-left: 20px;}
body#knit .item_cont figure.item_btn a img{ height: 9px !important;}
@media screen and (max-width:640px){
body#knit .item_sec{ padding: 4.6875vw 0;}
body#knit .item_sec .num{ width: 21.875vw; padding: 0 4.6875vw 0.78125vw; top: 4.6875vw;}
body#knit .item_sec .num img{ height: 2.8vw !important;}
body#knit .item_mv{ padding: 6.25vw 0 3.125vw; width: 74.625vw; margin: 0 30.625vw 0 3.75vw;}
body#knit .item_mv .ico{ right: -16.875vw;}
body#knit .item_mv .ico img{ width: 26vw;}
body#knit .item_mv .ico.w170 img{ width: 34.5625vw;}
body#knit .item_mv .ico02{ right: -16.875vw;}
body#knit .item_mv .ico02 img{ width: 26vw;}
body#knit .item_mv .ico02.w170 img{ width: 34.5625vw;}
body#knit .item_mv figure{ margin-bottom: 4.6875vw;}
body#knit .item_mv h3{ margin-bottom: 3vw;}
body#knit .item_mv h3 img{ height: 3.8vw !important;}
body#knit .item_mv h3.h17 img{ height: 4vw !important;}
body#knit .item_mv p{ font-size: 2.6vw;}
body#knit .item_mv figure.color{ margin: 3.125vw 0 0;}
body#knit .item_mv figure.color img{ height: 13vw !important;}
body#knit .item_cont{ margin: 0 2.8125vw; padding: 3.125vw 0;}
body#knit .item_cont:after{ left: -11.875vw;}
body#knit .item_cont ul li{ width: calc(50% - 1.875vw); margin: 0 0.9375vw;}
body#knit .item_cont ul li img{ width: 100%;}
body#knit .item_cont ul li:nth-child(2) img{ top: -15vw;}
body#knit .item_cont figure.item_btn a{ font-size: 3vw; width: 27.875vw; height: 10.03125vw; right: 0.9375vw; bottom: 3.375vw;}
body#knit .item_cont figure.item_btn a span{ line-height: 0; margin-left: 3.125vw;}
body#knit .item_cont figure.item_btn a img{ height: 1.33vw !important;}
}
body#knit .item_sec.even{ background: #fff; padding: 48px 0 30px;}
body#knit .item_sec.even .num{ text-align: right; left: auto; right: 0; top: 48px;}
body#knit .item_sec.even .item_mv{ margin: 0 88px 0 126px;}
body#knit .item_sec.even .item_mv .ico{ position: absolute; right: auto; left: -64px; top: 0; z-index: -1;}
body#knit .item_sec.even .item_mv .ico02{ position: absolute; right: auto; left: -64px; top: 0; z-index: -1;}
body#knit .item_sec.even .item_mv figure.color{ text-align: right;}
body#knit .item_sec.even .item_cont:after{ width: calc(100% - 48px); background: rgba(0,0,0,0.1); left: auto; right: -6px; top: 0; z-index: -1;}
body#knit .item_sec.even .item_cont ul{ flex-direction: row-reverse;}
body#knit .item_sec.even .item_cont figure.item_btn a{ right: auto; left: 6px; bottom: 20px;}
@media screen and (max-width:640px){
body#knit .item_sec.even{ padding: 7.5vw 0 4.6875vw;}
body#knit .item_sec.even .num{ top: 7.5vw;}
body#knit .item_sec.even .item_mv{ margin: 0 13.75vw 0 22.625vw;}
body#knit .item_sec.even .item_mv .ico{  left: -19vw;}
body#knit .item_sec.even .item_mv .ico02{  left: -12vw;}
body#knit .item_sec.even .item_cont:after{ width: calc(100% - 7.5vw); right: -2.9375vw;}
body#knit .item_sec.even .item_cont figure.item_btn a{ left: 0.9375vw; bottom: 3.125vw;}
}

/*last*/
body#knit #last{ margin: 60px auto 88px;}
body#knit #last .last_btn a{ display: flex; align-items: center; justify-content: center; width: 290px; height: 40px; border: 1px solid #2d2c2f; background: #fff; font-weight: bold; margin: auto;}
@media screen and (max-width:640px){
body#knit #last{ margin: 9.375vw auto 13.75vw;}
body#knit #last .last_btn a{ width: 54.3125vw; height: 9.25vw; font-size: 3vw;}
}



/***********************************************/
/* ACTION */
/***********************************************/
/* スクロールフェードイン */
.scroll-block {
  opacity: 0;
  transform: translateY(0);
  transition: all 1s ease-out; }

.scroll-block.active {
  opacity: 1;
  transform: translateY(0); }