@font-face {
  font-family: "Helsinki";
  src: url("../font/Helsinki\ Narrow\ BRHENBS0.ttf") format("TrueType");
}

.main-area {
  font-family: "yu-gothic-pr6n", sans-serif;
  font-weight: 400;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #DBEEF4;
}

.main-area img {
  width: 100%;
  height: auto;
}

.sp_only {
  display: block;
}

.pc_only {
  display: none;
}

.pointnone {
  pointer-events: none;
}


/************** js **************/
  .js-fade.active {
    opacity: 1;
      transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  .js-fade {
    opacity: 0;
    will-change: opacity, transform;
    transition: ease-in, opacity 2500ms, transform 1000ms;
      transform: translate3d(0, 0, 0) scale(1);
  }

  .slide_box div {
    opacity: 0;
    transform: translate(100%, 0);
    transition: opacity 1.6s ease 0s, transform 1.6s ease 0s;
  }

  .slide_box div.is-show {
    opacity: 1;
    transform: none;
  }


/************** common **************/
  .main-area {
    padding-bottom: calc(117* (100vw /375));
  }

  .sec {
    margin: 0 auto;
  }

  /*** grid_box ***/
  .grid_box {
    display: grid;
  }

  /*** flex_box ***/
  .flex_box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 auto;
  }

  /*** ttl ***/
  .sec_ttl {
    margin: 0 auto calc(10* (100vw /375));
  }

  /*** sec_img ***/
  .sec .sec_img {
    margin: 0 auto calc(11* (100vw /375));
    width: calc(355* (100vw /375));
  }

  /*** sec_tax ***/
  .sec_tax {
    margin: 0 auto 0;
    width: calc(308*(100vw / 375));
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: calc(11*(100vw / 375)) 0;
  }

  .sec_tax li {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }

  .sec_tax li a {
    display: inline-block;
    width: max-content;
  }

  .sec_tax li a span {
    display: inline-block;
    width: max-content;
  }

  .sec_tax li a:nth-of-type(1) {
    font-size: calc(14* (100vw /375));
    letter-spacing: 0;
    color: #000;
    line-height: 1;
    display: flex;
    flex-wrap: nowrap;
    width: calc(203* (100vw /375));
    justify-content: space-between;
    align-items: flex-end;
    white-space: nowrap;
  }

  .sec_tax li a:nth-of-type(1) span:nth-of-type(1) {
    width: 30%;
    text-align: left;
  }

  .sec_tax li a:nth-of-type(1) span:nth-of-type(2) {
    width: 62.5%;
    text-align: left;
    /* letter-spacing: 0.05em; */
  }

  .sec_tax li a:nth-of-type(1) small {
    margin-left: calc(3* (100vw /375));
    font-size: calc(13* (100vw /375));
    letter-spacing: 0.05em;
  }

  .sec_tax li a.tax_buy_btn {
    display: block;
    text-align: center;
    text-decoration: none;
    width: calc(40* (100vw /375));
    padding: calc(4* (100vw /375)) 0 calc(4* (100vw /375));
    font-size: calc(11* (100vw /375));
    font-family: "nimbus-sans-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.1em;
    line-height: 1;
    color: #fff;
    background-color: #707070;
  } 

  .sec_tax li a.pointer_none {
    margin-top: calc(5* (100vw /375));
    pointer-events: none;
    font-size: calc(13* (100vw /375));
    letter-spacing: 0.05em;
    line-height: 1;
  }


/************** mv **************/
  .sec_mv {
    margin: 0 auto calc(53* (100vw /375));
  }

  .sec_mv .mv_img {
    margin: 0 auto calc(-4* (100vw /375));
  }

  .mv_text {
    margin: 0 auto;
    width: max-content;
    font-size: calc(14* (100vw /375));
    letter-spacing: 0.02em;
    line-height: 2;
    text-align: center;
  }

  .mv_text01 {
    margin-bottom: calc(19* (100vw /375));
    font-size: calc(16* (100vw /375));
    font-weight: 700;
    font-family: var(--yugothic);
    letter-spacing: 0.05em;
    line-height: 1.5;
  }


/************** first_box **************/
  .first_box {
    margin: 0 auto calc(72* (100vw /375));
    width: calc(355* (100vw /375));
  }

  .first_box .sec_img.model__img01 {
    margin: 0 auto calc(69* (100vw /375));
  }

  .knit_box {
    margin: 0 auto;
    padding: calc(48* (100vw /375)) 0 calc(40* (100vw /375));
    position: relative;
    background-color: #fff;
  }
  
  .knit_box::before,
  .knit_box::after {
    content: '';
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 99;
    height: 1px;
    background-color: #000;
    width: calc(80* (100vw /375));
  }

  .knit_box::before {
    top: 0;
    left: 0;
  }

  .knit_box::after {
    top: 0;
    left: auto;
    right: 0;
  }
  
  .knit_box .main_ttl {
    width: calc(169* (100vw /375));
    position: absolute;
    top: -1.1%;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .knit_box .item_box {
    margin: 0 auto;
    width: calc(335* (100vw /375));
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: calc(26* (100vw /375)) calc(2* (100vw /375));
  }

  .knit_box .item_box li {
    width: calc(110* (100vw /375));
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .knit_box .item_box li .text01 {
    margin-bottom: calc(2* (100vw /375));
    font-family: "nimbus-sans-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: calc(20* (100vw /375));
    letter-spacing: 0.1em;
  }

  .knit_box .item_box li .item_img {
    margin: 0 auto calc(3* (100vw /375));
  }

  .knit_box .item_box li .text02 {
    margin-bottom: calc(11* (100vw /375));
    font-size: calc(13* (100vw /375));
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1.75;
  }

  .knit_box .item_box li .text02 small {
    font-size: calc(12* (100vw /375));
  }

  .knit_box .item_box li .tax_buy_btn {
    display: block;
    text-align: center;
    text-decoration: none;
    width: calc(60* (100vw /375));
    padding: calc(4* (100vw /375)) 0 calc(5* (100vw /375));
    font-size: calc(10* (100vw /375));
    font-family: "nimbus-sans-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.1em;
    line-height: 1;
    color: #fff;
    background-color: #726F6A;
  } 


/************** sec01 **************/
  .sec01 {
    margin: 0 auto calc(72* (100vw /375));
  }

  .sec01 .sec_ttl {
    width: calc(145* (100vw /375));
  }

  .sec01 .sec_tax {
    align-items: center;
  }


/************** sec02 **************/
  .sec02 {
    margin: 0 auto calc(72* (100vw /375));
  }

  .sec02 .sec_ttl {
    width: calc(140* (100vw /375));
  }


/************** sec03 **************/
  .sec03 {
    margin: 0 auto calc(73* (100vw /375));
  }

  .sec03 .sec_ttl {
    width: calc(140* (100vw /375));
  }


/************** sec04 **************/
  .sec04 {
    margin: 0 auto calc(72* (100vw /375));
  }

  .sec04 .sec_ttl {
    width: calc(140* (100vw /375));
  }

  .sec04 .sec_tax {
    width: calc(326*(100vw / 375));
    gap: calc(12*(100vw / 375)) 0;
  }

  .sec04 .sec_tax li a.pointer_none {
    margin-top: 0;
  }

  .sec04 .sec_tax li a:nth-of-type(1) {
    width: calc(218*(100vw / 375));
  }

  .sec04 .sec_tax li:nth-of-type(1) a:nth-of-type(1) {
    justify-content: flex-start;
  }
  
  .sec04 .sec_tax li:nth-of-type(1) a:nth-of-type(1) span:nth-of-type(2) {
    margin-left: calc(10* (100vw /375));
  }

  .sec04 .sec_tax li a:nth-of-type(1) span:nth-of-type(2) {
    width: 62%;
  }


/************** sec05 **************/ 
  .sec05 {
    margin: 0 auto calc(71* (100vw /375));
  }

  .sec05 .sec_ttl {
    width: calc(103* (100vw /375));
  }

  .sec05 .sec_img {
    margin: 0 auto calc(14*(100vw / 375));
  }


/************** sec06 **************/
  .sec06 {
    margin: 0 auto calc(81* (100vw /375));
  }

  .sec06 .sec_ttl {
    width: calc(230* (100vw /375));
  }

  .sec06 .sec_tax {
    align-items: center;
  }


/************** btn **************/
  .black_btn {
    margin: 0 auto;
    width: calc(335* (100vw /375));
    height: calc(50* (100vw /375));
    font-size: calc(14* (100vw /375));
    max-width: 100%;
    max-height: 100%;
    font-weight: 400;
    letter-spacing: 0.075em;
    line-height: 1;
    position: relative;
    z-index: 15;
    font-family: var(--arial);
  }

  .sec_btn .black_btn:nth-of-type(2) {
    margin-top: calc(30* (100vw /375));
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
  }


/* ===============================================
### PC用デザイン###
=============================================== */
@media screen and (min-width:768px) {

  .sp_only {
    display: none;
  }

  .pc_only {
    display: block;
  }

  .main-area {
    margin-bottom: 0;
  }


/************** common **************/
  .main-area {
    padding-bottom: 11.7rem;
  }

  .sec {
    margin: 0 auto;
  }

  /*** ttl ***/
  .sec_ttl {
    margin: 0 auto 3rem;
  }

  /*** sec_img ***/
  .sec .sec_img {
    margin: 0 auto 2.2rem;
    width: 48rem;
  }

  /*** sec_tax ***/
  .sec_tax {
    margin: 0 auto 0;
    width: 45.3em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 1.1rem 0;
  }

  .sec_tax li a:nth-of-type(1) {
    font-size: 1.5rem;
    letter-spacing: 0;
    color: #000;
    line-height: 1;
    display: flex;
    flex-wrap: nowrap;
    width: 24rem;
  }

  .sec_tax li a:nth-of-type(1) span:nth-of-type(1) {
    width: 30%;
    text-align: left;
  }

  .sec_tax li a:nth-of-type(1) span:nth-of-type(2) {
    width: 62.5%;
    text-align: left;
    /* letter-spacing: 0.05em; */
  }

  .sec_tax li a:nth-of-type(1) small {
    margin-left: .3rem;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
  }

  .sec_tax li a.tax_buy_btn {
    display: block;
    text-align: center;
    text-decoration: none;
    width: 4.0rem;
    padding: .4rem 0 .4rem;
    font-size: 1.1rem;
    font-family: "nimbus-sans-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.1em;
    line-height: 1;
    color: #fff;
    background-color: #707070;
  } 

  .sec_tax li a.pointer_none {
    margin-top: .5rem;
    pointer-events: none;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    line-height: 1;
  }


/************** mv **************/
  .sec_mv {
    margin: 0 auto 7.3rem;
    width: 120rem;
  }

  .sec_mv .mv_img {
    margin: 0 auto 5rem;
  }

  .mv_text {
    margin: 0 auto;
    width: max-content;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: center;
  }

  .mv_text01 {
    margin-bottom: 2.5rem;
    font-size: 1.8rem;
    font-weight: 700;
    font-family: var(--yugothic);
    letter-spacing: 0.05em;
    line-height: 2;
  }


/************** first_box **************/
  .first_box {
    margin: 0 auto 14.5rem;
    width: 100%;
  }

  .first_box .sec_img.model__img01 {
    margin: 0 auto 11.4rem;
    width: 48rem;
  }

  .knit_box {
    padding: 6.6rem 0 7rem;
    position: relative;
    background-color: #fff;
    width: 120rem;
  }

  .knit_box::before,
  .knit_box::after {
    width: 40rem;
  }

  .knit_box::before {
    top: 0;
    left: 0;
  }

  .knit_box::after {
    top: 0;
    left: auto;
    right: 0;
  }

  .knit_box .main_ttl {
    width: 25.3rem;
    position: absolute;
    top: -2.5%;
    left: 50%;
    transform: translate(-50%, 0);
  }

  .knit_box .item_box {
    margin: 0 auto;
    width: 104rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  .knit_box .item_box li {
    width: 20rem;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .knit_box .item_box li .text01 {
    margin-bottom: .2rem;
    font-family: "nimbus-sans-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2.8rem;
    letter-spacing: 0.1em;
  }

  .knit_box .item_box li .item_img {
    margin: 0 auto 1.3rem;
  }

  .knit_box .item_box li .text02 {
    margin-bottom: 1.1rem;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 2;
  }

  .knit_box .item_box li .text02 small {
    font-size: 1.4rem;
  }

  .knit_box .item_box li .tax_buy_btn {
    width: 8rem;
    padding: .5rem 0 .7rem;
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    line-height: 1;
  } 


/************** sec01 **************/
  .sec01 {
    margin: 0 auto 9.2rem;
  }

  .sec01 .sec_ttl {
    width: 21.9rem;
  }

  .sec01 .sec_tax {
    align-items: center;
  }


/************** sec02 **************/
  .sec02 {
    margin: 0 auto 9.2rem;
  }

  .sec02 .sec_ttl {
    width: 21.9rem;
  }

  .sec02 .sec_tax li {
    padding-left: 8.6rem;
  }


/************** sec03 **************/
  .sec03 {
    margin: 0 auto 9.3rem;
  }

  .sec03 .sec_ttl {
    width: 21.9rem;
  }

  .sec03 .sec_tax li {
    padding-left: 8.6rem;
  }


/************** sec04 **************/
  .sec04 {
    margin: 0 auto 8rem;
  }

  .sec04 .sec_ttl {
    width: 21.9rem;
  }

  .sec04 .sec_tax {
    width: 32.6rem;
    gap: 1.2rem 0;
  }

  .sec04 .sec_tax li a.pointer_none {
    margin-top: 0;
  }

  .sec04 .sec_tax li a:nth-of-type(1) {
    width: 24rem;
  }

  .sec04 .sec_tax li:nth-of-type(1) a:nth-of-type(1) {
    justify-content: flex-start;
  }

  .sec04 .sec_tax li:nth-of-type(1) a:nth-of-type(1) span:nth-of-type(2) {
    margin-left: 1.7rem;
  }

  .sec04 .sec_tax li a:nth-of-type(1) span:nth-of-type(2) {
    width: 62%;
  }

  .sec04 .sec_tax li {
    padding-left: 1.3rem;
  }


/************** sec05 **************/ 
  .sec05 {
    margin: 0 auto 9.1rem;
  }

  .sec05 .sec_ttl {
    width: 11.8rem;
  }

  .sec05 .sec_img {
    margin: 0 auto 2rem;
  }

  .sec05 .sec_tax li {
    padding-left: 8.6rem;
  }


/************** sec06 **************/
  .sec06 {
    margin: 0 auto 10.1rem;
  }

  .sec06 .sec_ttl {
    width: 35.7rem;
  }

  .sec06 .sec_tax {
    align-items: center;
  }


/************** btn **************/
  .black_btn {
    margin: 0 auto;
    width: 40rem;
    height: 5.0rem;
    font-size: 1.6em;
    max-width: 100%;
    max-height: 100%;
    font-weight: 400;
    letter-spacing: 0.075em;
    line-height: 1;
    position: relative;
    z-index: 15;
    font-family: var(--arial);
  }

  .sec_btn .black_btn:nth-of-type(2) {
    margin-top: 2rem;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
  }


}


/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px) {
  .breadcrumb__list {
    padding-bottom: 1.6rem;
  }
}