.main-area {
    font-family: var(--yugothic);
    font-weight: normal;
    overflow: hidden;
    box-sizing: border-box;
    background-color: #EDE8E2;
  }

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

  .sp_only {
    display: block;
  }

  .pc_only {
    display: none;
  }

  .position_box {
    position: relative;
  }

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

  .pointer_none {
    pointer-events: none;
    display: block;
  }


/************** common **************/
  .main-area {
    margin: 0 auto calc(118* (100vw /375));
    background-color: #fff;
  }

  /*** h3 ***/
  .sec h3 {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: calc(10* (100vw /375));
  }

  .sec h3 p {
    width: max-content;
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  .sec h3 p:nth-of-type(1) {
    font-size: calc(26* (100vw /375));
    font-family: 'Hanken Grotesk', sans-serif;
  }

  .sec h3 p:nth-of-type(2) {
    font-size: calc(14* (100vw /375));
  }
  
  /*** sec_ttl ***/
  .sec .sec_ttl {
    margin: 0 auto calc(25* (100vw /375));
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: calc(11* (100vw /375)) 0;
  }

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

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

  .sec .sec_ttl span {
    width: max-content;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: calc(26* (100vw /375));
    font-family: 'Hanken Grotesk', sans-serif;
  }

  .sec .sec_ttl span:last-child {
    font-size: calc(14* (100vw /375));
  }

  .number_text {
    font-size: calc(24* (100vw /375))!important;
  }


  /*** sec_box01 ***/
  .sec_box01 {
    margin: 0 auto calc(38* (100vw /375));
    padding: calc(33* (100vw /375)) 0;
    background-color: #fff;
    width: calc(346* (100vw /375));
  }

  .sec_box01 .sec_img {
    margin: 0 auto calc(24* (100vw /375));
    width: calc(230* (100vw /375));
  }

  .sec_box01 .item_text {
    margin-bottom: calc(10* (100vw /375));
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .sec_box01 .item_text span {
    width: max-content;
    text-align: center;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: calc(14* (100vw /375));
    letter-spacing: 0.1em;
    line-height: 1.75;
    display: inline-block;
  }

  .sec_box01 .item_text span:nth-of-type(1) {
    margin-bottom: calc(6* (100vw /375));
    font-size: calc(16* (100vw /375));
    letter-spacing: 0.1em;
    font-family: var(--yugothic);
  }

  .sec_box01 .item_text span:nth-of-type(2) {
    margin-bottom: calc(9* (100vw /375));
  }

  /*** sec_box02 ***/
  .sec_box02 {
    padding: calc(52* (100vw /375)) 0;
    background-color: #fff;
  }

  .sec_box02 .size_box {
    margin: 0 auto;
    width: calc(285* (100vw /375));
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: calc(31* (100vw /375)) 0;
  }

  .sec_box02 .size_box li {
    width: 100%;
  }

  .sec_box02 .size_box li p {
    margin: calc(11* (100vw /375)) auto 0;
    width: max-content;
    font-size: calc(15* (100vw /375));
    letter-spacing: 0.1em;
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 400;
  }

  .size_img {
    position: relative;
  }

  .size_img::before {
    width: calc(65* (100vw /375));
    height: calc(65* (100vw /375));
    content: '';
    display: block;
    position: absolute;
    top: 2.2%;
    right: 3.5%;
    left: auto;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 5;
  }

  .sec_box02 .size_box li:nth-of-type(1) .size_img::before {
    background-image: url(../img/svg/size0.svg);
  }

  .sec_box02 .size_box li:nth-of-type(2) .size_img::before {
    background-image: url(../img/svg/size1.svg);
  }

  .sec_box02 .size_box li:nth-of-type(3) .size_img::before {
    background-image: url(../img/svg/size2.svg);
  }

  .sec_box02 .size_box li:nth-of-type(4) .size_img::before {
    background-image: url(../img/svg/size3.svg);
  }

  /*** sec_box03 ***/
  .sec_box03 {
    padding: calc(53* (100vw /375)) 0 calc(50* (100vw /375));
    background-color: #F5F5F5;
  }

  .sec_box03 .sub_box {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: calc(55* (100vw /375)) 0;
  }

  .sec_box03 .sub_box .corde_box {
    margin: 0 auto;
    width: calc(345* (100vw /375));
    padding: 0 calc(15* (100vw /375)) calc(40* (100vw /375));
    background-color: #fff;
  }

  .sec_box03 .sub_box .corde_box .corde_color {
    margin: calc(-13* (100vw /375)) auto calc(24* (100vw /375));
    width: max-content;
    font-size: calc(26* (100vw /375));
    letter-spacing: 0.1em;
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 700;
  }

  .sec_box03 .sub_box .corde_box .corde_img {
    margin-bottom: calc(20* (100vw /375));
  }

  /*** corde_tax_link ***/
  .corde_tax_link li a {
    padding: calc(9* (100vw /375)) calc(11* (100vw /375)) calc(9* (100vw /375)) calc(6* (100vw /375));
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    font-size: calc(11* (100vw /375));
    letter-spacing: 0.1em;
    background-image: linear-gradient(to right, #848484, #848484 1px, transparent 1px);
    background-size: 3px 1px;
    background-position: left top;
    background-repeat: repeat-x;
    align-items: flex-start;
  }

  .corde_tax_link li:nth-last-child(1) {
    background-image: linear-gradient(to right, #848484, #848484 1px, transparent 1px);
    background-size: 3px 1px;
    background-position: left bottom;
    background-repeat: repeat-x;
  }

  .corde_tax_text {
    width: calc(218* (100vw /375));
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-weight: 400;
  }

  .corde_tax_text span {
    width: max-content;
    letter-spacing: 0.1em;
  }

  .corde_tax_text span:nth-of-type(1) {
    font-size: calc(11* (100vw /375));
    line-height: 1.9;
    width: 68%;
  }

  .corde_tax_text span:nth-of-type(2) { 
    font-family: 'Hanken Grotesk', sans-serif;
    line-height: 1.7;
    width: 24%;
  }

  .corde_tax_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(56* (100vw /375));
    height: calc(20* (100vw /375));
    font-size: calc(11* (100vw /375));
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    color: #fff;
    background-color: #000;
    font-family: 'Hanken Grotesk', sans-serif;
  }

  .corde_item {
    font-size: calc(11* (100vw /375));
    font-weight: 500;
    letter-spacing: 0.1em;
  }

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

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

  .mv p {
    font-size: calc(13* (100vw /375));
    letter-spacing: 0.1em;
    line-height: 1.84;
    text-align: center;
  }


/************** variation **************/
  .variation {
    margin: 0 auto calc(50* (100vw /375));
    width: calc(346* (100vw /375));
  }

  .variation h3 {
    margin: 0 auto calc(30* (100vw /375));
  }

  .variation .link_box {
    width: 100%;
  }

  .variation .link_box li {
    width: calc(100* (100vw /375));
    height: calc(212* (100vw /375));
    position: relative;
  }

  .variation .link_box li::before {
    content: '';
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top: auto;
    bottom: 1%;
    left: 44%;
    width: 11px;
    height: 11px;
    border-top: 1px solid;
    border-right: 1px solid #000;
    display: inline-block;
    transform: rotate(135deg);
  }

  .variation .link_box li a {
    padding-bottom: calc(9* (100vw /375));
    display: flex;
    align-items: center;
    flex-direction: column;
    border-bottom: 1px solid #000;
  }

  .link_img {
    margin-bottom: calc(10* (100vw /375));
  }

  .link_text {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: calc(7* (100vw /375));
  }

  .link_text p {
    font-size: calc(13* (100vw /375));
    letter-spacing: 0.1em;
    font-weight: 600;
    width: max-content;
    text-align: center;
  }

  .link_text p:nth-of-type(1) {
    font-family: 'Hanken Grotesk', sans-serif;
  }


/************** sec01 **************/
  .sec01 {
    margin: 0 auto calc(50* (100vw /375));
    padding-top: calc(40* (100vw /375));
    background-color: #F5F5F5;
  }

  /*** sec_box01 ***/
  .sec01 .sec_box01 .item_color {
    margin: 0 auto;
    width: calc(187* (100vw /375));
  }

/************** sec02 **************/
  .sec02 {
    margin: 0 auto calc(49* (100vw /375));
    padding-top: calc(38* (100vw /375));
    background-color: #F5F5F5;
  }

  /*** sec_box02 ***/
  .sec02 .sec_box01 .item_color {
    margin: 0 auto;
    width: calc(85* (100vw /375));
  }

  .sec02 .sec_box02 .size_box li:nth-of-type(1) .size_img::before {
    background-image: url(../img/svg/size1.svg);
  }

  .sec02 .sec_box02 .size_box li:nth-of-type(2) .size_img::before {
    background-image: url(../img/svg/size2.svg);
  }

  .sec02 .sec_box02 .size_box li:nth-of-type(3) .size_img::before {
    background-image: url(../img/svg/size3.svg);
  }


/************** sec03 **************/
  .sec03 {
    margin: 0 auto calc(47* (100vw /375));
    padding-top: calc(40* (100vw /375));
    background-color: #F5F5F5;
  }

  /*** sec_box03 ***/
  .sec03 .sec_box01 .item_color {
    margin: 0 auto;
    width: calc(153* (100vw /375));
  }


/************** sec_btn **************/
  .sec_btn a {
    margin: 0 auto;
    width: calc(280* (100vw /375));
    height: calc(50* (100vw /375));
    font-size: calc(14* (100vw /375));
    font-weight: 600;
    letter-spacing:  0.05em;
    max-width: 100%;
    max-height: 100%;
  }


/* ===============================================
### PC用デザイン###
=============================================== */
@media screen and (min-width:768px) {
  .sp_only {
    display: none;
  }

  .pc_only {
    display: block;
  }

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

  .grid_box {
    display: grid;
  }

/************** common **************/
  .main-area {
    margin: 0 auto 9.9rem;
  }

  /*** h3 ***/
  .sec h3 {
    gap: 1.5rem;
  }

  .sec h3 p {
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  .sec h3 p:nth-of-type(1) {
    font-size: 3.2rem;
  }

  .sec h3 p:nth-of-type(2) {
    font-size: 1.6rem;
  }

  /*** sec_ttl ***/
  .sec .sec_ttl {
    margin: 0 auto 2.5rem;
    gap: 1rem 0;
  }

  .sec .sec_box02 .sec_ttl {
    gap: 1.5rem 0;
  }

  .sec .sec_box03 .sec_ttl {
    gap: 1.5rem 0;
  }

  .sec_box02 .sec_ttl {
    margin: 0 auto 4rem; 
  }

  .sec_box03 .sec_ttl {
    margin: 0 auto 5.9rem; 
  }

  .sec .sec_ttl span {
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 3.2rem;
  }

  .sec .sec_ttl span:last-child {
    font-size: 1.6rem;
  }

  .number_text {
    font-size: 2.9rem!important;
  }

  /*** sec_box01 ***/
  .sec_box01 {
    margin: 0 auto 8.2rem;
    padding: 4rem 0;
    width: 112rem;
    background-color: #F5F5F5;
  }

  .sec_box01_inner {
    margin: 0 auto;
    padding: 6rem 0;
    width: 100rem;
    background-color: #fff;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 7.9rem 15.5rem 0.3rem 11.5rem;
  }

  .sec_box01 .sec_ttl {
    margin: 0;
    text-align: left;
    grid-column: 2/3;
    grid-row: 2/3;
    align-items: flex-start;
  }

  .sec_box01 .sec_img {
    margin: 0 7.4rem 0 auto;
    width: 32.6rem;
    grid-column: 1/2;
    grid-row: 1/6;
  }

  .sec_box01 .item_text {
    margin-bottom: 0;
    grid-column: 2/3;
    grid-row: 3/4;
    align-items: flex-start;
  }

  .sec_box01 .item_text span {
    text-align: center;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
    line-height: 1.75;
    display: inline-block;
  }

  .sec_box01 .item_text span:nth-of-type(1) {
    margin-bottom: 1.1rem;
    font-size: 1.6rem;
    letter-spacing: 0.1em;
  }

  .sec_box01 .item_text span:nth-of-type(2) {
    margin-bottom: 1.4rem;
  }

  .sec_box01 .item_color {
    grid-column: 2/3;
    grid-row: 5/6;
  }

  /*** sec_box02 ***/
  .sec_box02 {
    padding: 0 0 8.3rem 0;
  }

  .sec_box02 .size_box {
    margin: 0 auto;
    width: 86rem;
    gap: 4rem 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .sec_box02 .size_box li {
    width: 40rem;
  }

  .sec_box02 .size_box li p {
    margin: 1.1rem auto 0;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    font-weight: 400;
  }

  .size_img {
    position: relative;
  }

  .size_img::before {
    width: 7.5rem;
    height: 7.5rem;
    top: 4.2%;
    right: 3.8%;
    left: auto;
  }

  /*** sec_box03 ***/
  .sec_box03 {
    padding: 8.2rem 0 8.6rem;
  }

  .sec_box03 .sub_box {
    gap: 8.2rem 0;
  }

  .sec_box03 .sub_box .corde_box {
    margin: 0 auto;
    width: 54rem;
    padding: 0 7rem 5rem;
  }

  .sec_box03 .sub_box .corde_box .corde_color {
    margin: -1.7rem auto 3.2rem;
    font-size: 3rem;
    letter-spacing: 0.1em;
    font-weight: 700;
  }

  .sec_box03 .sub_box .corde_box .corde_img {
    margin-bottom: 3.0rem;
  }

  /*** corde_tax_link ***/
  .corde_tax_link li a {
    padding: .9rem 1.1rem .9rem 1rem;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    background-size: 3px 1px;
    opacity: 1!important;
  }

  .corde_tax_link li:nth-last-child(1) {
    background-size: 3px 1px;
    background-position: left bottom;
  }

  .corde_tax_text {
    width: 28.2rem;
    font-weight: 400;
  }

  .corde_tax_text span {
    letter-spacing: 0.1em;
  }

  .corde_tax_text span:nth-of-type(1) {
    font-size: 1.1rem;
    line-height: 1.9;
    width: 70%;
  }

  .corde_tax_text span:nth-of-type(2) { 
    line-height: 1.7;
    width: 18%;
  }

  .corde_tax_btn {
    width: 5.6rem;
    height: 2.0rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.1em;
    border: 1px solid #000;
    transition: background-color 0.5s, color 0.5s;
  }

  .corde_tax_btn:hover {
    opacity: 1;
    color: #000;
    background-color: #fff;
    transition: background-color 0.5s, color 0.5s;
  }

  .corde_item {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
  }

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

  .mv_img {
    margin: 0 auto 7.4rem;
  }

  .mv p {
    font-size: 1.3rem;
    letter-spacing: 0.1em;
    line-height: 1.84;
    text-align: center;
  }

/************** variation **************/
  .variation {
    margin: 0 auto 12rem;
    width: 63.4rem;
  }

  .variation h3 {
    margin: 0 auto 4rem;
  }

  .variation .link_box {
    width: 100%;
  }

  .variation .link_box li {
    width: 16.8rem;
    height: 28rem;
    position: relative;
  }

  .variation .link_box li::before {
    bottom: 1%;
    left: 47%;
    width: 11px;
    height: 11px;
  }

  .variation .link_box li a {
    padding-bottom: 1.5rem;
    gap: .8rem 0;
  }

  .link_img {
    margin: 0 auto 1.0rem;
    width: 14.8rem;
  }

  .link_text {
    gap: .8rem;
  }

  .link_text p {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
  }

/************** sec01 **************/
  .sec01 {
    margin: 0 auto 8rem;
    padding-top: 0;
    background-color: #fff;
  }

  /*** sec_box01 ***/
  .sec01 .sec_box01 .item_color {
    margin: 0;
    width: 18.8rem;
  }

/************** sec02 **************/
  .sec02 {
    margin: 0 auto 8rem;
    padding-top: 0;
    background-color: #fff;
  }

  /*** sec_box02 ***/
  .sec02 .sec_box01 .item_color {
    margin: 0;
    width: 8.5rem;
  }

  .sec02 .sec_box02 .size_box li:nth-of-type(1) {
    width: 100%;
  }

  .sec02 .sec_box02 .size_box li:nth-of-type(1) .size_img {
    margin: 0 auto;
    width: 40rem;
  }

/************** sec03 **************/
  .sec03 {
    margin: 0 auto 8rem;
    padding-top: 0;
    background-color: #fff;
  }

  /*** sec_box03 ***/
  .sec03 .sec_box01 .item_color {
    margin: 0;
    width: 15.3rem;
  }

/************** sec_btn **************/
  .sec_btn a {
    margin: 0 auto;
    width: 28.0rem;
    height: 5.0rem;
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing:  0.05em;
  }

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