@charset "UTF-8";

:root {
  /* --bg-color: #EDECE7; */
  /* background-image: url(img/bg_textile.png);
  background-repeat: round; */
}

/*--------------------------------
 全体
---------------------------------*/
body {
  font-family: "Noto Sans JP", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 2;
  color: #333;
  background-color: var(--bg-color);
  background-image: url(img/bg_textile.png);
  background-repeat: round;
  font-feature-settings: "palt";
  letter-spacing: 0.06em;
  margin: 0;
  padding: 0;
}

.pc { display: block !important; }
.sp { display: none !important; }

.back{
  /* background-color: #EDECE7; */
  background-image: url(img/bg_textile.png);
  background-repeat: round;
}

h1{
  font-family: Noto Serif JP, Noto Serif ;
  font-size: 32px;
  font-weight: 300;
  margin-top: 0;
  margin-bottom: 40px;
}

h2 {
  display: inline-block;
  position: relative;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.1em;
}
h2:before {
  content: '';
  position: absolute;
  left: 14%;
  bottom: -10px; /*下線の上下位置調整*/
  display: inline-block;
  width: 50px; /*下線の幅*/
  height: 3px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: #3C825D; /*下線の色*/
}
.h2_01:before {
  content: '';
  position: absolute;
  left: 8%;
  bottom: -10px; /*下線の上下位置調整*/
  display: inline-block;
  width: 50px; /*下線の幅*/
  height: 3px; /*下線の太さ*/
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%); /*位置調整*/
  background-color: #3C825D; /*下線の色*/
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

.scroll::-webkit-scrollbar{
  display: none;
}
/*--------------------------------
 ボタン
---------------------------------*/


/*--------------------------------
 レイアウト
---------------------------------*/
.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

.section {
  padding: 110px 0;
}

.section__heading {
  text-align: center;
  margin-bottom: 60px;
}

/*--------------------------------
 見出し
---------------------------------*/
.heading01 {
  font-size: 60px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--main-color);
  text-transform: uppercase;
}

.heading01__subtitle {
  display: block;
  font-size: 20px;
  color: #fff;
  margin-top: 10px;
}

/*--------------------------------
about_h1_ブロック
---------------------------------*/

.section__inner::before{
  content: "";
  position: absolute;
  top: 4.68vw;
  right: 0;
  width: 74vw;
  height: 690px;
  background-color: #fff;
  z-index: -1;
}

.section__inner_3::before{
  content: "";
  position: absolute;
  top: 4.68vw;
  right: 0;
  width: 74vw;
  height: 500px;
  background-color: #fff;
  z-index: -1;
}

.section__inner__circular::before{
  content: "";
  position: absolute;
  top: 4.68vw;
  left: 0;
  width: 74vw;
  height: 490px;
  background-color: #fff;
  z-index: -1;
}

.h1_icon_01{
  position: relative;
  padding-left: 35px;
}
.h1_icon_01::before{
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-image: url(img/kk_logo.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 20px;
  left: 0;
}

.h1_icon_02{
  position: relative;
  padding-left: 35px;
}
.h1_icon_02::before{
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-image: url(img/yarn.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 20px;
  left: 0;
}

.h1_icon_03{
  position: relative;
  padding-left: 35px;
}
.h1_icon_03::before{
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-image: url(img/order_icon.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 20px;
  left: 0;
}

/*--------------------------------
cta
---------------------------------*/

/*--------------------------------
ヘッダー
---------------------------------*/
.header {
  display: flex;
  /* position: fixed; */
  z-index: 10;
  align-items: center;
  justify-content: space-between;
  /* width: 100%; */
  height: 90px;
  padding: 30px;
}

.header__logo {
  max-width: 170px;
}

/*--------------------------------
 グローバルナビ
---------------------------------*/
.gnav__list {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  column-gap: 30px;
  padding-left:0;
}

.gnav__item {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  list-style:none;
}

.tel::before{
  content: url(img/phone.png);
  padding-right: 5px;
  color: #222;
}

.mail {
  background-color: #61A883;
  padding: 12px 28px;
  border-radius: 5px;
  text-transform:capitalize;

}

.mail::before{
  content: url(img/mail.png);
  padding-right: 5px;

}

.mail_2 {
  background-color: #61A883;
  padding: 16px 24px;
  border-radius: 5px;
  width: 30%;
  margin: 0 0 0 auto;
  text-align: center;

}

.mail_2::before{
  content: url(img/mail.png);
  padding-right: 8px;

}

.gnav__link {
  color: #222;
  text-decoration: none;
}

/*--------------------------------
 メインビジュアル
---------------------------------*/
.hero{
  margin-bottom: 120px; 
  max-width: 1920px; 
  margin: 0 auto; 
  padding-bottom: 100px;
}

.hero_container{
  max-width: 1200px; 
  margin: 0 auto; 
  padding-bottom: 40px; 
  padding-top: 40px; 
  text-align: center; 
  position: relative; 
  z-index: 0;
}

.hero_block_1{
  display: flex; 
  align-items: center; 
  justify-content: flex-end;
}

.hero_keywords{
  position: absolute; 
  z-index: 2; 
  top: 0%;
}

.hero_keywords p{
  font-size: 22px; 
  font-family: trajan-pro-3, serif; 
  text-align: left; 
  letter-spacing: 0.2em; 
  line-height: 1.8; 
  margin-top: 0%;
}

.hero_keywords span{
  background-color: rgba(60,130,93,0.7); 
  color: #fff; 
  padding: 2px 8px; 
  border-radius: 5px;
}

.hero_block_2{
  display: flex; 
  align-items: center; 
  justify-content: flex-start;
}

.hero_keywords_2{
  position: absolute; 
  z-index: 2; top: 30%; 
  transform: translate(0,-50%);
}

.hero_keywords_2 p{
  font-family: Noto Serif JP, Noto Serif; 
  font-size: 32px; 
  text-align: left; 
  letter-spacing: 0.1em; 
  line-height: 2.4;
}

.hero_keywords_2 span{
  background-color: rgba(237,236,231,0.8); 
  padding: 0 16px;
}

.hero_block_3{
  display: flex;  
  align-items: center; 
  justify-content: flex-end;
}

.hero_keywords_3{
  position: absolute;  
  z-index: 2; 
  bottom: 0; 
  right: 3%;
}

.hero_keywords_3 img{
  width: 110px;
  height: auto;
}

.hero_img{
  position: relative; 
  z-index: 1;
  margin-left: 6vw;
}

.hero_img img{
  border-radius: 5px;
}

.fadeIn{
  animation-name:fadeInAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeInAnime{
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }

  .fadeLeft1{
    animation-name:fadeLeftAnime;
    animation-duration:2.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeLeftAnime{
      from {
        opacity: 0;
      transform: translateX(-100px);
      }
    
      to {
        opacity: 1;
      transform: translateX(0);
      }
    }

    /*--------------------------------
ふわっとあらわれるJS
---------------------------------*/

.fade-in {
  opacity: 0;
  transform: translateY(20px); /* 少し下に配置しておく */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* 各要素に遅延を設定 */
.fade-in:nth-child(1) {
  transition-delay: 0s; /* すぐに表示 */
}
.fade-in:nth-child(2) {
  transition-delay: 0.5s; /* 0.5秒後に表示 */
}
.fade-in:nth-child(3) {
  transition-delay: 1s; /* 1秒後に表示 */
}
.fade-in:nth-child(4) {
  transition-delay: 1.5s; /* 1.5秒後に表示 */
}
.fade-in:nth-child(5) {
  transition-delay: 2s; /* 2秒後に表示 */
}
.fade-in:nth-child(6) {
  transition-delay: 2.5s; /* 2.5秒後に表示 */
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻す */
}





/*--------------------------------
ABOUT
---------------------------------*/

#about{
  background-color: #fff;
}

.about_inner{
  max-width: 1100px; 
  margin: 0 auto; 
  padding: 100px 0 140px 0;
}

.about_box{
  display: flex; 
  justify-content: space-between;
}

.about_box_img{
  flex: 0 1 45%;
}


/*--------------------------------
cta_01 02
---------------------------------*/
.cta_01{
  margin-bottom: 120px; 
  position: -webkit-sticky; 
  position: sticky; 
  top: 0; 
  z-index: -2;
  transform:translateZ(1px);
}


.cta_02{
  position: -webkit-sticky; 
  position: sticky; 
  top: 0; 
  z-index: -2;
  transform:translateZ(1px);
}

/*--------------------------------
様々なオーダーができます
---------------------------------*/
.back{
  padding-bottom: 200px; 
  padding-top: 40px; 
  background-image: url(img/bg_textile.png); 
  background-repeat: round;
}

.introdaction_inner_bg{
  background-image: url(img/yarn_01.png);
  background-repeat: no-repeat;
  background-position: center 20em;
  z-index: 0;
}

.introdaction_inner{
  max-width: 1100px; 
  margin: 0 auto;
}

.socks{
  width: 356px;
  height: auto;
}

.socksup {
  margin-top: -64px;
}

.socksdown {
  margin-top: 64px;
}

.introdaction_img{
  margin-top: 144px;
  text-align: center;
}

.introdaction_01,.introdaction_02,.introdaction_03{
  display: flex;
  column-gap: 107px;
}

.introdaction_02{
  justify-content: center;
}

.introdaction_01,.introdaction_02{
  margin-bottom: 64px;
}



/*--------------------------------
circular
---------------------------------*/
.section__inner{
  position: relative; 
  background-image: url(img/bg_textile.png);  
  z-index: -1; 
  padding-bottom: 100px;
  transform:translateZ(1px);
}


.circular .imgarea{
  max-width: 600px;
}

.circular__inner__flex{
  max-width: 1752px; 
  margin-bottom: 120px; 
  display: flex;
}

.circular__inner__flex .textarea{
  max-width: 39vw; 
  margin: 10.93vw 30px 0 8vw;
}

/*--------------------------------
編み地例
---------------------------------*/

.exsample{
  position: relative;
  height: 20vh;
  margin-bottom: 24px;
}

.ex02,.ex03,.ex04,.ex05{
  /* margin-top: 24px; */
}

.kinds .imgarea{
  height: 100%;
  overflow: hidden;
}

.kinds .imgarea img{
  width: 100%;
}

.textbox{
  position: absolute; 
  top: 0; 
  background-color: rgba(23,44,63,0.5); 
  width: 440px; 
  height: 20vh; 
  color: #fff; 
  display: table;
}

.ex01 .textbox,.ex03 .textbox,.ex05 .textbox{
  left: 0;
  border-radius: 8px 0 0 8px; 
}

.ex02 .textbox ,.ex04 .textbox {
  right: 0;
  border-radius: 0 8px 8px 0; 
}

.textbox_inner{
  display: table-cell; 
  vertical-align: middle; 
  padding: 0 40px;
}

.textbox_name{
  border: 1px solid #fff; 
  border-radius: 20px; 
  width: fit-content; 
  padding: 0 24px; 
  margin-left: 0; 
  margin-right: auto;
}

/*--------------------------------
神木の強み
---------------------------------*/
.section__inner__circular{
  position: relative; 
  background-image: url(img/bg_textile.png); 
  background-repeat: round; 
  z-index: -1; 
  padding-bottom: 100px;
  transform:translateZ(1px);
}

.advantage .inner__flex{
  max-width: 1920px; 
  margin-bottom: 120px; 
  display: flex; 
  flex-direction: row-reverse;
}

.advantage .textarea{
  max-width: 38vw; 
  margin: 10.93vw 8vw 0 0vw;
}

.advantage .imgarea{
  max-width: 600px;
}

 
.anim-box {
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
 
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

/*--------------------------------
私たちのものづくり
---------------------------------*/
.craftmanship{
  padding-bottom: 200px; 
  padding-top: 40px;
}

.craft{
  display: flex;  
  width: 850px;
}

.cs01{
  padding-top: 40px;
}

.cs02{
  flex-direction: row-reverse;
  margin-left: 64px; 
  margin: 0 0 0 auto; 
  padding-top: 88px;
}

.craft img{
  width: 500px; 
  height: auto; 
  border-radius: 215px;
}

.craft .text_box{
  margin-left: 40px;
}

.cs02 img{
  margin-left: 40px;
}


.cs03{
  padding-top: 88px;
}

.craftmanship__title{
  font-size: 64px; 
  line-height: normal; 
  margin: 0 auto; 
  color: #d3d3d3; 
  font-family: trajan-pro-3,serif;
}

.craftmanship__text{
  background-color: #61A883; 
  padding: 4px 24px; 
  border-radius: 30px; 
  font-size: 20px; 
  margin-top: 8px; 
  width: fit-content;
}

/*--------------------------------
オーダーについて
---------------------------------*/

#order .section__inner_3{
  position: relative;  
  background-image: url(img/bg_textile.png); 
  background-repeat: round; 
  z-index: -1; 
  padding-bottom: 100px;
  transform:translateZ(1px);
}

#order .section__inner_3 .inner__flex{
  max-width: 1752px; 
  margin-bottom: 120px; 
  display: flex;
}

#order .textarea{
  max-width: 34vw; 
  margin: 10.93vw 30px 0 8vw;
}

#order .imgarea{
  max-width: 600px;
}


/*--------------------------------
オーダーの流れ
---------------------------------*/

.orderflow__inner{
  display: flex; 
  justify-content: space-between;
}

.orderflow__inner .textarea{
  width: 48%;
}

.orderflow__inner .textarea table{
  margin-bottom: 80px;
}

.orderflow__inner .item{
  font-size: 40px; 
  font-family: trajan-pro-3,serif; 
  font-weight: 400; 
  color: #959595;
  width: 72px; 
  height: 100px; 
  border-bottom: 2px solid #418064; 
  vertical-align: bottom;
}

.orderflow__inner .content{
  font-weight: 400; 
  text-align: left; 
  border-bottom: 1px solid #A6A5A2; 
  padding: 16px 24px; 
  vertical-align: bottom;
}

/*--------------------------------
会社概要
---------------------------------*/
#company{
  padding-top: 200px;
}

.company__inner{
  display: flex; 
  justify-content: space-between;
}

#company .leftarea{
  width: 30%;
}

#company table{
  border-collapse: collapse; 
  width: 30vw;
}

#company th{
  border-bottom: 1px solid #97B6A5;
}

#company .top{
  border-top: 1px solid #97B6A5;
}

#company .item{
  text-align: left; 
  font-weight: 400;  
  width: 40%; 
  height: 72px;
}

#company .content{
  text-align: left; 
  font-weight: 400;  
  width: 60%;
}

/*--------------------------------
bottom_photo_gallary
---------------------------------*/
.bottom, .swiper_box02 .swiper{
  position: relative;
}


.bottom p{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:50%;
  left: 28vw;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #fff;
  font-size: 18px;
  line-height: 2.5;
  letter-spacing: 0.3rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
  z-index: 1;
}

.swiper-slide img{
  transition-timing-function: linear;
}


/*--------------------------------
 フッター
---------------------------------*/
.footer {
  display: grid;
  padding: 40px 20px;
  place-items: center;
}

.footer__copyright {
  letter-spacing: 0.08em;
}


@media (min-width: 767px) {
  a[href^="tel:"] {
      pointer-events: none;
      cursor: default;
  }
  }

/*media Queries 767
----------------------------------------------------*/
@media screen and (max-width: 767px) {
  body {
    font-size: 15px;
  }

  .wrapper{
    overflow: hidden;
  }

  .pc {
    display: none !important;
  }

  .sp {
    display: block !important;
  }

  h1{
    font-size: 1.4rem;
  }

  h2{
    font-size: 1.2rem;
    margin-top: 40px;
  }

  P{
    font-size: 14px;
    font-weight: 400;
  }

  .imgarea{
    max-width: 325px;
  }

  .h1_icon_01::before,.h1_icon_02::before{
    width: 24px;
  }

  .h1_icon_03::before{
    width: 22px;
  }

  .h1_icon_01,.h1_icon_02,.h1_icon_03{
    padding-left: 30px;
  }

  /* .tel::before{
    font-size: 22px;
    padding-left: 10px;
  } */

  .sp_group{
    display: flex;
    justify-content: flex-end;
  }

  .sp_icon_tel{
    font-size: 22px;
    color: #333;
    text-decoration: none;
    padding-left: 20px;
    z-index: 11;
    /* position: relative; */
  }

  .sp_icon_mail{
    font-size: 38px;
    color: #333;
    text-decoration: none;
    padding-left: 20px;
    padding-right: 10px;
    z-index: 11;
    /* position: relative; */
    line-height: 1;
  }

  /* レイアウト */
  /* .container {
    padding: 0 20px;
  }

  .section {
    padding: 50px 0;
  }

  .section__heading {
    margin-bottom: 20px;
  } */

  /* テーブル */


  /* ヘッダー */
  .header {
    height: 60px;
    padding: 20px;
  }

  .header__logo {
    width: 107px;
    margin-top: -7px;
  }

  .header__logo img {
    max-width: 100%;
  }

  .gnav__list {
    column-gap: 15px;
  }

  .gnav__item {
    font-size: 16px;
  }

  .gnav__link:hover {
    color: #fff;
  }

  /* メインビジュアル */
  .hero{
    padding-bottom: 180px;
  }

  .hero_keywords p{
    font-size: 14px;
    margin-right: 20px;
  }

  .hero_img{
    width: 100vw;
    height: 34vh;
  }

  .hero_img img{
    max-width: 100%;
    object-fit: cover;
  }

  .hero_keywords_2{
    top: 100%;
  }

  .hero_keywords_2 p{
    font-size: 20px;
    line-height: 1.9;
  }

  .hero_keywords_3 img{
    width: 80px;
  }

  .hero_keywords_3 {
    top: 80%;
  }



  /* ABOUT */

  .about_inner{
    margin: 0 auto; 
    padding: 0;
  }
  
  .about_box{
    flex-direction: column;
    flex-direction: column-reverse;
    padding: 0px;
  }

  .h1_icon_01::before{
    top: 13px;
  }

  .about_box_img img{
    width: 100vw;
    height: 224px;
    object-fit: cover;
    border-radius: 0 !important;
  }

  #about .text_box{
    margin-top: 24px;
    padding: 20px;
    padding-bottom: 48px;
  }

 /* cta_01 */

.cta_01 img{
  max-width: 190%;
}

.cta_01{
  margin-bottom: 0;
  position: static;
  width: 100vw;
  overflow: hidden;
}

 /* 様々なオーダー */
.etc .introdaction_inner{
  padding: 0 20px;
}

.back{
  padding-bottom: 100px;
}

.h2_01:before{
  left: 7%;
  bottom: -6px;
  width: 32px;
  height: 2px;
}

.introdaction_img{
  margin-top: 0;
}

.introdaction_01,.introdaction_02,.introdaction_03{
  display: block;
  margin-bottom: 0;;
}

.socks{
  width: 48vw;
}

.socks04,.socks05{
  width: 56vw;
}

.socks02,.socks04,.socks06,.socks08{
  margin: 0 0 0 auto;
}

.socks02,.socks03,.socks04,.socks06,.socks08{
  margin-top: -40px;
}

.socks07,.socks05{
  margin-top: -20px;
}

 /* 丸編みニットとは */
 .circular__inner__flex{
  flex-direction: column;
  margin-bottom: 40px;
 }

 .h1_icon_02::before,.h1_icon_03::before{
  top: 15px;
 }

 .circular .imgarea{
  margin-right: 20px;
 }

 .circular__inner__flex .textarea{
  max-width: 100vw;
 }

.section__inner::before{
  width: 100vw;
  height: 114vh;
}

.section__inner{
  padding-bottom: 0;
}

.back{
  padding-top: 0 !important;
}

/* 編み地の一例 */
.kinds {
  padding-bottom: 110px !important;
}

.kinds .introdaction_inner{
  padding: 0 20px;
}

.kinds h2{
  padding-top: 40px;
}

.kinds h2:before{
  left: 11%;
  bottom: -4px;
  width: 32px;
  height: 2px;
}

.desc{
  margin-bottom: 32px !important;
}

.kinds .textbox{
  width: 100%;
}

.textbox_inner{
  padding: 0 24px;
  padding-top: 8px;
}

.textbox_name{
  background-color: rgba(255,255,255,0.7);
  color: #222;
  border: none;
}

.textbox{
  background-color: transparent;
}

.kinds .imgarea{
  height: 100%;
  max-width: 100%;
}

.kinds .imgarea img{
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
  border-radius: 8px !important;
}

.exsample .textbox{
  border-radius: 8px;
  height: 16vh;
}

.textbox_name{
  padding: 0 16px;
  line-height: 1.8;
  margin-bottom: 8px;
  /* margin-top: 8px; */
}

.textbox_text{
  margin-top: 0;
  line-height: 1.8;
}

.exsample{
  height: 21vh;
  margin-bottom: 16px;
}

/* .ex04 {
  height: 18vh;
} */

/* .tx4{
  height: 18vh !important;
} */

 /* 神木の強み */
 .advantage .inner__flex{
  flex-direction: column;
  margin-bottom: 0;
 }

 .advantage .imgarea{
  margin-left :20px;
 }

 .advantage .textarea{
  max-width: 100vw;
  margin-left: 8vw;
 }

 .section__inner__circular::before{
  width: 100vw;
  height: 87vh;
 }


   /* 私たちのものづくり */

   .craftmanship{
    padding-bottom: 64px;
   }

   .craftmanship .introdaction_inner{
    padding: 0 32px;
   }

   .craftmanship h2:before{
    left: 9%;
    bottom: -4px;
    width: 32px;
    height: 2px;
   }

   .craft{
    flex-direction: column;
    width: auto;
   }

   .cs01{
    padding-top: 24px;
   }

   .cs02,.cs03{
    padding-top: 32px;
   }

   .cs02 img{
    margin-left: 0;
   }

   .craft img{
    width: 67vw;
    margin: 0 auto;
   }

   .craft .text_box{
    margin-left: 0;
   }

   .craftmanship__title{
    font-size: 45px;
    margin: -42px 16px 0 0;
    line-height: 100%;
   }

   .craftmanship__text{
    height: fit-content;
    padding: 0 16px;
    margin-top: 12px;
    margin-bottom: 0;
    font-size: 16px;
   }


  /* オーダーについて */
  #order .inner__flex{
    flex-direction: column;
   }

   #order .section__inner_3 .inner__flex{
    margin-bottom: 64px;
   }
  
   #order .imgarea{
    margin-right: 20px;
   }
  
   #order .textarea{
    max-width: 100vw;
   }
  
  .section__inner::before{
    width: 100vw;
    height: 120vh;
  }

  #order .section__inner_3{
    padding-bottom: 0;
  }

  .section__inner_3::before{
    width: 100vw;
    height: 80vh;
  }

  /* オーダーの流れ */
.order_flow{
  padding-bottom: 56px !important;
}

  .order_flow .introdaction_inner{
    padding: 0 32px;
  }

  .orderflow__inner{
    flex-direction: column;
  }

  .order_flow h2{
    margin-bottom: 32px !important;
  }

  .order_flow h2::before{
    left: 9%;
    bottom: -4px;
    width: 32px;
    height: 2px;
  }

  .orderflow__inner .item{
    height: 88px;
  }

  .orderflow__inner .content{
    padding: 16px 0 16px 16px;
  }

  .company__inner .content{
    padding: 16px 0px;
  }

  .order_flow .textarea{
    width: 100%;
  }

  .flow__img{
    display: none;
  }

  .orderflow__inner .item{
    font-size: 28px;
    width: 44px;
  }

  .order_flow p{
    text-align: center !important;
  }

  .imgbtn {
    width: 60% !important;
  }

  .mail_2{
    width: 50%;
    margin: 0 auto;
  }

  .mail_2::before{
    display: none;
  }

  /* cta_02 */
  .cta_02 img{
    max-width: 140%;
  }

  .cta_02{
    width: 100vw;
    overflow: hidden;
  }

  /* 会社概要 */
  #company .introdaction_inner{
    padding: 0 20px;
  }

  #company .leftarea{
    width: 100%;
  }

  .company_img{
    text-align: center;
  }

  .company_img img{
    width: 70%;
  }

  #company table{
    width: 82vw;
    margin: 0 auto;
    margin-top: 24px;
  }

  #company .item{
    width: 30%;
  }

  .company__inner{
    flex-direction: column;
    padding-top: 40px;
  }

   /* フッターギャラリー */
   .bottom P{
    font-size: 14px;
    left: 50vw;
    width: 80vw;
   }

   .bottom img{
    max-width: 160%;
    width: 160vw !important;
   }


  /* フッター */
  .footer {
    padding: 24px 20px;
  }

  .footer__copyright {
    font-size: 11px;
  }

  .page-top {
    right: 20px;
    bottom: 20px;
  }

  .page-top__link {
    width: 50px;
    height: 50px;
  }

  .page-top__icon {
    font-size: 24px;
  }

  /* ハンバーガーメニュー */

  .menu-toggle {
    cursor: pointer;
    display: block;
    padding: 20px;
  }
  
  .hamburger {
    width: 30px;
    height: 3px;
    background-color: #333;
    position: relative;
  }
  
  .hamburger span {
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #333;
    transition: transform 0.3s ease;
  }
  
  .hamburger span:nth-child(1) {
    top: 0;
  }
  
  .hamburger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }
  
  .hamburger span:nth-child(3) {
    bottom: 0;
  }
  
  .menu {
    display: none;
  }
  
  .menu.active {
    display: block;
    background-color: rgba(202,218,206,1.0);
    z-index: 10;
    right: 0;
    width: 94vw;
    height: 64vh;
    position: absolute;
  }
  
  .menu ul {
    display: block;
    list-style: none;
    padding: 0 8vw;
  }
  
  .menu ul li {
    padding: 32px 32px 32px 16px;
    border-bottom: 1px dotted;
  }
  
  .menu ul li a {
    text-decoration: none;
    color: #333;
  }

  .menu img {
    width: 60% !important;
  }

}



/*media Queries 1025px以上
----------------------------------------------------*/
@media screen and (min-width:768px) and ( max-width:1080px) {
  /* レイアウト */
  .about_box,.introdaction_inner,.craftmanship .introdaction_inner {
    padding: 0 5vw;

  }

  .introdaction_img li{
    width: 300px;
  }

  .circular .imgarea,.advantage .imgarea,#order .imgarea{
    max-width: 42vw;
  }

  .flow__img{
    height: 100%;
  }

  #company table{
    width: 48vw;
  }

  .craft{
    width: auto;
  }

  .craft img{
    width: 400px;
  }

  .craft__inner{
    margin: 0 auto;
  }

  /* 様々なオーダーができます */
  .socks{
    max-width: 290px;
  }

  .introdaction_01,.introdaction_02,.introdaction_03{
    column-gap: 8vw;
  }

  .introdaction_inner_bg{
    background-size: 180vw;
  }

  /* 編み時の一例 */
.circular .section__inner{
  /* padding-bottom: 0 !important; */
}

.kinds{
  padding-top: 0 !important;
}

  .exsample{
    height: 18vh;
    margin-bottom: 16px;
  }

  .textbox{
    height: 18vh;
  }

  .kinds .imgarea img{
    height: 100%;
    width: 100vw;
  }

  .order_flow {
    padding-top: 0 !important;
  }

   /* オーダーする */

   .mail_2{
    width: 50%;
   }


  /* ハンバーガーメニュー */

  .menu-toggle {
    cursor: pointer;
    display: block;
    padding: 20px;
  }
  
  .hamburger {
    width: 30px;
    height: 3px;
    background-color: #333;
    position: relative;
  }
  
  .hamburger span {
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #333;
    transition: transform 0.3s ease;
  }
  
  .hamburger span:nth-child(1) {
    top: 0;
  }
  
  .hamburger span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }
  
  .hamburger span:nth-child(3) {
    bottom: 0;
  }
  
  .menu {
    display: none;
  }
  
  .menu.active {
    display: block;
    background-color: rgba(202,218,206,0.9);
    z-index: 10;
    right: 0;
    width: 64vw;
    height: 48vh;
    position: absolute;
  }
  
  .menu ul {
    display: block;
    list-style: none;
    padding: 0 3vw;
  }
  
  .menu ul li {
    padding: 24px;
    border-bottom: 1px dotted;
  }
  
  .menu ul li a {
    text-decoration: none;
    color: #333;
  }

  .menu img {
    width: 29% !important;
  }

  /* アバウト */
  


}

/*media Queries 400
----------------------------------------------------*/
/* @media screen and (max-width: 400px){
  .ex05{
    margin-top: 60px;
  }

  .kinds .imgarea img{
    height: 125px;
  }

  .kinds .ex04 .imgarea img{
    height: 153px;
  }


} */