.main-area {
  margin-bottom: calc(62* (100vw /375));
  font-family: var(--hirakaku);
  font-weight: normal;
  overflow: hidden;
  box-sizing: border-box;
}

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

.sp_only {
  display: block;
}

.pc_only {
  display: none;
}

/************** js **************/
.main-area .fadeIn {
  opacity: 0;
  transition: transform 1s ease-in-out, opacity 1s ease-in-out;
  transition: 1s;
  transform: translateY(10rem);
  overflow: hidden;
}

.model_wrap {
  margin: 0 auto;
  width: calc(345* (100vw /375));
}

/************** model_box **************/
.model_box {
  margin: 0;
  width: calc(165* (100vw /375));
  position: relative;
  display: block;
}

@media screen and (max-width: 767px) {

  .model_open_layout {
    display: flex;
    gap: calc(20* (100vw /375)) calc(15* (100vw /375));
    flex-wrap: wrap;
  }

  .model_open_layout.flex {
    display: flex;
    justify-content: space-between;
    margin: calc(20*(100vw / 375)) auto calc(20*(100vw / 375));
  }

  .model_open_layout_inner .model_box {
    width: 100%;
  }

  .model_open_layout_inner01 {
    display: flex;
  }

  /* 
  .model_open_layout_inner02 {
    width: 42rem;
  } */

}

.model_flex_box {
  margin: 0 auto calc(20* (100vw /375));
  width: calc(345* (100vw /375));
  display: flex;
  justify-content: space-between;
}

.model_center_box {
  margin: 0 auto calc(20* (100vw /375));
  width: calc(345* (100vw /375));
}

.model_center_box img {
  display: block;
}

.model_center_box.model_7 img {
  margin: 0 0 0 auto;
  width: calc(165* (100vw /375));
}

.model_center_box.model_8 img {
  margin: 0 0 0 0;
  width: calc(240* (100vw /375));
}

.model_center_box.model_15 img {
  margin: 0 auto 0;
  width: calc(260* (100vw /375));
}


/************** model_sub_box **************/
.model_sub_box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #FFFFFF;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: 0.1s;
  box-sizing: border-box;
  z-index: -1;
}

.model_sub_box.active {
  opacity: 1;
  display: block;
  visibility: visible;
  transition: 0.5s;
  z-index: 100;
}

.model_sub_body {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 100vw;
  height: 100vh;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  /* margin: 0 auto calc(400* (100vw /750)); */
}

.model_sub_content {
  width: 100%;
  height: 100svh;
  margin: 0 auto calc(0* (100vw /375));
  position: relative;
  padding-top: calc(64* (100vw / 375));
  /* overflow-x: hidden;
  overflow-y: scroll; */
}

.main-area .model_open:hover {
  cursor: pointer;
  transition: .1s;
  opacity: 0.7;
}

.main-area .scrollIn {
  opacity: 1;
  transform: translateX(0);
  transform: translateY(0);
}


/*** model_close_btn ***/
.model_close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(42*(100vw / 375));
  height: calc(42*(100vw / 375));
  cursor: pointer;
  z-index: 1;
  transition: 0.5s;
  left: auto;
  right: 2.8%;
  top: 1.6%;
  background: url(../img/btn01.svg) no-repeat center / 100%;
}

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

/*** model_sub_text ***/
.model_sub_text {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: calc(18* (100vw /375)) 0;
  flex-shrink: 0;
  margin: 0 auto;
  width: calc(335* (100vw /375));
  padding-bottom: calc(110* (100vw /375));
}

.model_sub_text a {
  width: calc(336* (100vw /375));
  font-size: calc(13* (100vw /375));
  font-family: var(--ebgaramond);
  letter-spacing: 0.05em;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: calc(9* (100vw /375)) 0;
  flex-shrink: 0;
  pointer-events: none;
}

.model_sub_text a .text02 {
  font-family: "Noto Serif JP", serif;
  font-size: calc(11* (100vw /375));
}

.model_sub_text a .text02 span {
  font-family: var(--ebgaramond);
  font-size: calc(13* (100vw /375));
}

.item_tax_margin_left {
  margin-left: calc(12* (100vw /375));
}

.item_tax_text {
  margin-top: calc(23* (100vw /375));
  padding-top: calc(24* (100vw /375));
  font-size: calc(12* (100vw /375));
  letter-spacing: 0.1em;
  line-height: 2;
  border-top: 1px solid #000;
}


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


/************** flex_width_box **************/
.flex_width_box {
  width: 100%;
  display: block;
}


/************** btn **************/
.sec_btn {
  margin: calc(120* (100vw /750)) auto 0;
  width: calc(220* (100vw /375));
  position: relative;
}



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

  .sp_only {
    display: none;
  }

  .pc_only {
    display: block;
  }

  .main-area {
    margin: 0 auto 6rem;
    padding: 0 2rem;
    max-width: 120rem;
  }

  .model_wrap {
    margin: 0 auto;
    width: 100%;
  }

  /************** model_box **************/
  .model_box {
    margin: 0;
    width: 30rem;
  }


  .model_open_layout {
    display: grid;
    width: 100rem;
    margin: auto;
    grid-template-columns: repeat(auto-fill, 30rem);
    grid-template-rows: repeat(auto-fill, 42rem);
    gap: 5rem;
  }

  .model_open_layout.flex {
    display: flex;
    justify-content: space-between;
    margin: 5rem auto 5rem;
  }

  .model_open_layout_inner .model_box {
    width: 100%;
  }

  .model_open_layout_inner01 {
    width: 53rem;
    display: flex;
  }

  .model_open_layout_inner02 {
    width: 42rem;
  }


  .model_flex_box {
    margin: 0 auto 4rem;
    width: 80rem;
    display: flex;
    justify-content: space-between;
  }

  .model_center_box {
    margin: 0 auto 4rem;
    width: 80rem;
  }

  .model_center_box.model_7 img {
    margin: 0 0 0 auto;
    width: 38rem;
  }

  .model_center_box.model_8 img {
    margin: 0 0 0 0;
    width: 55rem;
  }

  .model_center_box.model_15 img {
    margin: 0 auto 0;
    width: 60rem;
  }

  /*** model_close_btn ***/
  .model_close {
    top: 6.4%;
    right: 1.4%;
    width: 4.2rem;
    height: 4.2rem;
  }

  .model_close:hover {
    background: url(../img/btn02.svg) no-repeat center / 100%;
    transition: 0.3s;
  }

  /************** model_sub_box **************/
  .model_sub_body {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    width: min(100%, 140rem);
    height: 100%;
  }

  .model_sub_content {
    margin: 0 auto 0;
    width: min(100%, 82.1rem);
    height: 100vh;
    display: grid;
    grid-template-columns: 16.1rem 54rem auto;
    grid-template-rows: 1fr 70.3rem 1fr;
    padding-top: 0;
  }

  .model_sub_img {
    margin: 0;
    width: 50rem;
    height: max-content;
    grid-column: 2/3;
    grid-row: 2/3;
  }

  /*** model_sub_text ***/
  .model_sub_text {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 1.5rem 0;
    flex-shrink: 0;
    margin: auto 0 0 0;
    grid-column: 3 / 4;
    grid-row: 2/3;
    width: max-content;
    padding-bottom: 0;
  }

  .model_sub_text a {
    width: max-content;
    font-size: 1.4rem;
    gap: .5rem 0;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }

  .model_sub_text a .text02 {
    font-size: 1.1rem;
    line-height: 1;
  }

  .model_sub_text a .text02 span {
    font-size: 1.3rem;
  }

  .item_tax_margin_left {
    margin-left: 0;
  }

  .item_tax_margin_left_2 {
    margin-left: 0;
  }

  .item_tax_text {
    margin-top: 2.4rem;
    padding-top: 2.4rem;
    font-size: 1.2rem;
  }


  /************** mv **************/
  .mv {
    margin: 0 auto 12rem;
  }


  /************** model_1,model_2 **************/
  .model_1 .item_tax_text,
  .model_2 .item_tax_text {
    letter-spacing: 0.095em;
  }


  /************** flex_width_box **************/
  .flex_width_box {
    display: none;
  }


  /************** btn **************/
  .sec_btn {
    margin: 8rem auto 0;
    width: 30rem
  }

}


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



/************************************************
タブレット用デザイン
*************************************************/
/* @media all and (min-width: 767px) and (max-width: 1200px) { 
  .model_close {
    top: 24.4%;
  }
} */