@charset "UTF-8";
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* ベースカラー
*--------------------------------------*/
/*--------------------------------------*
* フォント
*--------------------------------------*/
/*--------------------------------------*
* ブレイクポイント
*--------------------------------------*/
/*--------------------------------------*
* vw変換(SP用)
*--------------------------------------*/
/*--------------------------------------*
* vw変換(PC用)
*--------------------------------------*/
/*--------------------------------------*
* min関数(PC用)
*--------------------------------------*/
/*--------------------------------------*
* clamp関数(PC用)
*--------------------------------------*/
/*--------------------------------------*
* デフォルトスタイル
*--------------------------------------*/
html,
body {
  width: 100%;
  margin: 0 auto;
}

.main {
  font-family: din-condensed, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sub {
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: normal;
}

.sub2 {
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: italic;
}

.ja {
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ja2 {
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 600;
  font-style: normal;
}

img,
video,
object {
  width: 100%;
  border: none;
  display: block;
}

@media screen and (min-width: 769px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 768px) {
  .spNone {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  .pcNone {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .pcNone {
    display: block;
  }
}

/*--------------------------------------*
* aタグ
*--------------------------------------*/
a {
  display: block;
  text-decoration: none;
  transition: all 0.4s;
  color: #222;
}
@media screen and (min-width: 769px) {
  a:hover {
    opacity: 0.8;
    transition: all 0.5s;
    cursor: pointer;
  }
}
a[href=""] {
  pointer-events: none;
}
a:hover, a:focus, a:active {
  opacity: 0.5;
}

/*--------------------------------------*
* layout
*--------------------------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* ヘッダー
*--------------------------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* フッター
*--------------------------------------*/
/*--------------------------------------*
* object
*--------------------------------------*/
/*-------------------
* component
-------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* コンテンツ幅
*--------------------------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* 共通ボタン
*--------------------------------------*/
.btn_wrap {
  display: block;
}
@media screen and (max-width: 768px) {
  .btn_wrap {
    width: 11.1959287532vw;
    height: 3.8167938931vw;
  }
}
@media screen and (min-width: 769px) {
  .btn_wrap {
    width: 3.8875vw;
    height: 1.3402777778vw;
  }
}
.btn_wrap .btn {
  font-family: din-condensed, sans-serif;
  font-weight: 400;
  font-style: normal;
  box-sizing: border-box;
  background-color: #262626;
  color: #fff;
  letter-spacing: 0.05em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .btn_wrap .btn {
    font-size: 3.0534351145vw;
  }
}
@media screen and (min-width: 769px) {
  .btn_wrap .btn {
    font-size: 1.0555555556vw;
  }
}

.btn_wrap.all_btn {
  position: relative;
}
@media screen and (max-width: 768px) {
  .btn_wrap.all_btn {
    width: 76.3358778626vw;
    height: 13.9949109415vw;
    margin: 25.4452926209vw auto 30.534351145vw;
  }
}
@media screen and (min-width: 769px) {
  .btn_wrap.all_btn {
    width: 31.25vw;
    height: 5.7291666667vw;
    margin: 8.3333333333vw auto 10.4166666667vw;
  }
}
.btn_wrap.all_btn .btn {
  letter-spacing: 0.05em;
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .btn_wrap.all_btn .btn {
    font-size: 5.0890585242vw;
  }
}
@media screen and (min-width: 769px) {
  .btn_wrap.all_btn .btn {
    font-size: 1.9444444444vw;
  }
}

/*-------------------
* project
-------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* FV
*--------------------------------------*/
.fv {
  width: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
  position: relative;
}
.fv.is-visible {
  opacity: 1;
}
@media screen and (max-width: 768px) {
  .fv {
    height: 163.1043256997vw;
  }
}
@media screen and (min-width: 769px) {
  .fv {
    height: 45.3722222222vw;
  }
}
.fv .fv_inner {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .fv .fv_inner {
    height: auto;
    display: flex;
    align-items: center;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner {
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; /* 画像の縦横比を維持しつつ全体表示 */
  }
}
.fv .fv_inner .fv_container {
  width: 100%;
  height: 100%;
  background: #fbfaf5;
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .fv_container {
    height: auto;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .fv_container {
    height: 100%;
  }
}
.fv .fv_inner .fv_container::after {
  content: none;
}
.fv .fv_inner .fv_container img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.fv .fv_inner .fv_container .bottom {
  min-height: 100vh;
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .fv_container .bottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
.fv .fv_inner .fv_container .bottom img {
  min-height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@keyframes loop {
  to {
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .ttl_en {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 3.8167938931vw;
    padding-right: 4.0712468193vw;
    z-index: 2;
    background-color: #fbfaf5;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .ttl_en {
    height: 100%;
    padding-top: 10px;
  }
}
.fv .fv_inner .ttl_en img {
  min-height: 100svh;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: top;
  object-position: top;
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .ttl_en img {
    width: 14.1170483461vw;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .ttl_en img {
    width: 8.2vh;
    height: 100%;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .ttl_wrap {
    width: 29.2361111111vw;
    height: 100%;
    display: flex;
    align-items: center;
  }
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .ttl_wrap .ttl {
    width: 82.4427480916vw;
    position: absolute;
    top: 141.2213740458vw;
    right: 0;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .ttl_wrap .ttl {
    width: 29.2361111111vw;
  }
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .ttl_wrap .ttl h1 {
    width: 69.7201017812vw;
    margin: 0 auto;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .ttl_wrap .ttl h1 {
    width: 23.8888888889vw;
  }
}
.fv .fv_inner .ttl_wrap .ttl .sub {
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .ttl_wrap .ttl .sub {
    text-align: center;
    font-size: 2.5445292621vw;
    line-height: 1.28;
    margin-top: 2.5445292621vw;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .ttl_wrap .ttl .sub {
    text-align: left;
    font-size: 0.9027777778vw;
    line-height: 1.315;
    margin-top: 0.9027777778vw;
  }
}
.fv .fv_inner .grid_area {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .grid_area {
    width: 50.625vh;
    position: absolute;
    height: 135.6234096692vw;
    top: 0vw;
    right: 0;
    opacity: 1;
    transition: none;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .grid_area {
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: none;
  }
}
.fv .fv_inner .grid_area .grid_wrapper {
  display: flex;
  height: 100svh;
  /* 1.2sの遅延を削除し、即座にアニメーションを開始 */
  animation: loop 20s linear infinite;
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .grid_area .grid_wrapper {
    width: 936.010178117vw;
    -moz-column-gap: 1.5267175573vw;
         column-gap: 1.5267175573vw;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .grid_area .grid_wrapper {
    height: auto;
    width: 307.9166666667vw;
    -moz-column-gap: 0.4166666667vw;
         column-gap: 0.4166666667vw;
  }
}
.fv .fv_inner .grid_area .grid_wrapper .grid_container {
  display: grid;
  width: 100%;
  background-color: #fbfaf5;
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container {
    grid-template-rows: 50.0712468193vw 17.6921119593vw 16.2086513995vw 51.6513994911vw;
    grid-template-columns: 48.6615776081vw 32.5572519084vw 32.524173028vw 88.5496183206vw 32.5572519084vw 32.524173028vw 48.6615776081vw 88.5496183206vw 32.5572519084vw 32.524173028vw;
    gap: 1.5267175573vw;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container {
    grid-template-rows: 15.9819444444vw 4.1125vw 5.1388888889vw 16.5277777778vw;
    grid-template-columns: 15.5881944444vw 10.4930555556vw 10.6361111111vw 27.7034722222vw 10.4930555556vw 10.6361111111vw 15.5881944444vw 27.7034722222vw 10.4930555556vw 10.6361111111vw;
    gap: 0.4166666667vw;
    height: 100%;
  }
}
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_1 {
  grid-row: 1/3;
  grid-column: 1/2;
}
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_2 {
  grid-row: 3/5;
  grid-column: 1/2;
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_3 {
    grid-row: 1/4;
    grid-column: 2/4;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_3 {
    grid-row: 2/5;
    grid-column: 2/4;
  }
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_4 {
    grid-row: 4/5;
    grid-column: 2/3;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_4 {
    grid-row: 1/2;
    grid-column: 3/4;
  }
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_5 {
    grid-row: 4/5;
    grid-column: 3/4;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_5 {
    grid-row: 4/5;
    grid-column: 5/6;
  }
}
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_6 {
  grid-row: 1/5;
  grid-column: 4/5;
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_7 {
    grid-row: 1/2;
    grid-column: 5/6;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_7 {
    grid-row: 4/5;
    grid-column: 6/7;
  }
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_8 {
    grid-row: 1/2;
    grid-column: 6/7;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_8 {
    grid-row: 1/2;
    grid-column: 2/3;
  }
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_9 {
    grid-row: 2/5;
    grid-column: 5/7;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_9 {
    grid-row: 1/4;
    grid-column: 5/7;
  }
}
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_10 {
  grid-row: 1/3;
  grid-column: 7/8;
}
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_11 {
  grid-row: 3/5;
  grid-column: 7/8;
}
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_12 {
  grid-row: 1/5;
  grid-column: 8/9;
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_13 {
    grid-row: 1/2;
    grid-column: 9/10;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_13 {
    grid-row: 4/5;
    grid-column: 10/11;
  }
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_14 {
    grid-row: 1/2;
    grid-column: 10/11;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_14 {
    grid-row: 4/5;
    grid-column: 9/10;
  }
}
@media screen and (max-width: 768px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_15 {
    grid-row: 2/5;
    grid-column: 9/11;
  }
}
@media screen and (min-width: 769px) {
  .fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_15 {
    grid-row: 1/4;
    grid-column: 9/11;
  }
}
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_1,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_2,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_3,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_4,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_5,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_6,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_7,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_8,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_9,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_10,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_11,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_12,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_13,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_14,
.fv .fv_inner .grid_area .grid_wrapper .grid_container .fv_15 {
  overflow: hidden;
}
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* lead
*--------------------------------------*/
.lead {
  position: relative;
}
@media screen and (max-width: 768px) {
  .lead {
    width: 84.9872773537vw;
    margin: 21.6284987277vw auto 0;
    padding: 0 0 15.2671755725vw;
    z-index: 2;
  }
}
@media screen and (min-width: 769px) {
  .lead {
    width: 23.6111111111vw;
    position: relative;
    margin: 6.1111111111vw 0 0;
  }
}
.lead::after {
  content: "";
  display: inline-block;
  background-color: #262626;
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  position: absolute;
}
@media screen and (max-width: 768px) {
  .lead::after {
    width: 9.9236641221vw;
    height: 0.5089058524vw;
    top: -12.7226463104vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
}
@media screen and (min-width: 769px) {
  .lead::after {
    width: 2.7083333333vw;
    height: 0.1388888889vw;
    top: -3.0555555556vw;
    left: 0;
  }
}
.lead.start::after {
  animation: anime_left_to_right 1s ease forwards;
}
.lead p {
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 500;
  font-style: normal;
  text-align: left;
  letter-spacing: 0.03em;
}
@media screen and (max-width: 768px) {
  .lead p {
    font-size: 3.0534351145vw;
    line-height: 1.917;
  }
}
@media screen and (min-width: 769px) {
  .lead p {
    font-size: 0.9027777778vw;
    line-height: 2;
  }
}

/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* credit
*--------------------------------------*/
.credit {
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .credit {
    width: 84.7328244275vw;
    margin: 11.4503816794vw auto 12.7226463104vw;
  }
}
@media screen and (min-width: 769px) {
  .credit {
    width: 67.6388888889vw;
    margin: 2.4305555556vw auto 6.25vw;
  }
}
.credit ul {
  margin: 0 auto;
  display: flex;
}
@media screen and (max-width: 768px) {
  .credit ul {
    flex-direction: column;
    -moz-column-gap: 3.8167938931vw;
         column-gap: 3.8167938931vw;
    row-gap: 1.7811704835vw;
  }
}
@media screen and (min-width: 769px) {
  .credit ul {
    flex-wrap: wrap;
    -moz-column-gap: 9.0277777778vw;
         column-gap: 9.0277777778vw;
    row-gap: 0.5555555556vw;
  }
}
@media screen and (max-width: 768px) {
  .credit ul li {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .credit ul li {
    width: 29.3055555556vw;
  }
}
.credit ul li:last-child {
  margin-bottom: 0;
}
.credit ul li a {
  color: #111;
}
.credit ul li a:hover {
  opacity: 0.4;
}
.credit ul li.sample .btn_wrap .btn, .credit ul li.coming .btn_wrap .btn {
  background: none;
  color: #262626;
  border: 1px solid #262625;
  letter-spacing: 0em;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .credit ul li.sample .btn_wrap .btn, .credit ul li.coming .btn_wrap .btn {
    font-size: min(2.1628498728vw, 8.5px) !important;
  }
}
@media screen and (min-width: 769px) {
  .credit ul li.sample .btn_wrap .btn, .credit ul li.coming .btn_wrap .btn {
    font-size: 0.6944444444vw !important;
  }
}

@media screen and (min-width: 769px) {
  .other_st .credit {
    width: 27.7027777778vw;
    margin: 0 auto;
  }
}
.other_st .credit ul {
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  .other_st .credit ul li.creditAjax {
    -moz-column-gap: 0.6944444444vw;
         column-gap: 0.6944444444vw;
  }
}
@media screen and (min-width: 769px) {
  .other_st .credit ul li.creditAjax .creditAjax_img120 {
    width: 3.2861111111vw;
  }
}
@media screen and (min-width: 769px) {
  .other_st .credit ul li.creditAjax .creditAjax_brand,
  .other_st .credit ul li.creditAjax .creditAjax_item,
  .other_st .credit ul li.creditAjax .creditAjax_price {
    font-size: min(0.7486111111vw, 10.78px);
    width: 19.3506944444vw;
  }
}
@media screen and (min-width: 769px) {
  .other_st .credit ul li.creditAjax .btn_wrap {
    width: 3.6770833333vw;
    height: 1.2680555556vw;
  }
}
@media screen and (min-width: 769px) {
  .other_st .credit ul li.creditAjax .btn_wrap .btn {
    font-size: 0.9986111111vw;
  }
}

.modal-text .credit {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .modal-text .credit {
    width: 91.6743002545vw;
  }
}
@media screen and (min-width: 769px) {
  .modal-text .credit {
    width: 27.1013888889vw;
  }
}
@media screen and (max-width: 768px) {
  .modal-text .credit ul {
    -moz-column-gap: 5.0890585242vw;
         column-gap: 5.0890585242vw;
    row-gap: 5.0890585242vw;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: left;
  }
}
@media screen and (min-width: 769px) {
  .modal-text .credit ul {
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .modal-text .credit ul li.creditAjax {
    -moz-column-gap: 0vw;
         column-gap: 0vw;
    width: 43.0737913486vw;
  }
}
@media screen and (min-width: 769px) {
  .modal-text .credit ul li.creditAjax {
    -moz-column-gap: 0.6944444444vw;
         column-gap: 0.6944444444vw;
  }
}
@media screen and (max-width: 768px) {
  .modal-text .credit ul li.creditAjax .creditAjax_link {
    flex-direction: column;
    row-gap: 1.272264631vw;
  }
}
.modal-text .credit ul li.creditAjax .creditAjax_img120 {
  display: none;
}
@media screen and (max-width: 768px) {
  .modal-text .credit ul li.creditAjax .creditAjax_brand,
  .modal-text .credit ul li.creditAjax .creditAjax_item,
  .modal-text .credit ul li.creditAjax .creditAjax_price {
    width: 100% !important;
  }
}
@media screen and (min-width: 769px) {
  .modal-text .credit ul li.creditAjax .creditAjax_brand,
  .modal-text .credit ul li.creditAjax .creditAjax_item,
  .modal-text .credit ul li.creditAjax .creditAjax_price {
    width: 100% !important;
  }
}
@media screen and (min-width: 769px) {
  .modal-text .credit ul li.creditAjax .btn_wrap {
    width: 3.6770833333vw;
    height: 1.2680555556vw;
  }
}
@media screen and (min-width: 769px) {
  .modal-text .credit ul li.creditAjax .btn_wrap .btn {
    font-size: 0.9986111111vw;
  }
}
@media screen and (max-width: 768px) {
  .modal-text .credit ul li.creditAjax.sample .creditAjax_link {
    row-gap: 0;
  }
}
@media screen and (max-width: 768px) {
  .modal-text .credit ul li.creditAjax.sample .btn_wrap .btn {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .modal-text .credit .cre_sample {
    margin-top: 2.5445292621vw;
  }
}
@media screen and (min-width: 769px) {
  .modal-text .credit .cre_sample {
    margin-top: 0.7638888889vw;
  }
}

/*===========
  商品URLから取得（creditajax）
  ===========*/
.creditAjax_link {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media screen and (max-width: 768px) {
  .creditAjax_link {
    -moz-column-gap: 2.2900763359vw;
         column-gap: 2.2900763359vw;
  }
}
@media screen and (min-width: 769px) {
  .creditAjax_link {
    -moz-column-gap: 0.7638888889vw;
         column-gap: 0.7638888889vw;
  }
}

@media screen and (max-width: 768px) {
  .creditAjax_img120 {
    width: 9.9236641221vw;
  }
}
@media screen and (min-width: 769px) {
  .creditAjax_img120 {
    width: 3.4722222222vw;
  }
}

.detail {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .detail {
    row-gap: 1.0178117048vw;
  }
}
@media screen and (min-width: 769px) {
  .detail {
    row-gap: 0.3472222222vw;
  }
}

@media screen and (max-width: 768px) {
  .creditAjax_brand,
  .creditAjax_item,
  .creditAjax_price {
    font-size: min(2.2900763359vw, 9px);
    width: 59.0330788804vw;
  }
}
@media screen and (min-width: 769px) {
  .creditAjax_brand,
  .creditAjax_item,
  .creditAjax_price {
    font-size: min(0.7916666667vw, 11.4px);
    width: 20.4166666667vw;
  }
}

.creditAjax_price__proper::before,
.creditAjax_price__sale::before {
  content: "¥";
}

.creditAjax_price__sale {
  color: red;
  margin-left: 5px;
}

.creditAjax_price__off {
  color: red;
}
.creditAjax_price__off::before {
  content: "(";
}
.creditAjax_price__off::after {
  content: ")";
}

.creditAjax__saleOn .creditAjax_price__proper {
  text-decoration: line-through;
}

.creditAjax_item {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.3;
}

/*===========
  商品一覧ページから取得
  ===========*/
.other-items {
  margin-top: 85px;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .other-items {
    width: 100%;
    padding: 11.4503816794vw 0 38.1679389313vw;
  }
}
@media screen and (min-width: 769px) {
  .other-items {
    width: 70.0694444444vw;
    padding: 6.9444444444vw 0 13.8888888889vw;
  }
}
.other-items::after {
  content: "";
  height: 1px;
  display: inline-block;
  background-color: #a1a1a1;
  position: absolute;
  top: 0;
}
@media screen and (max-width: 768px) {
  .other-items::after {
    width: 89.058524173vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
}
@media screen and (min-width: 769px) {
  .other-items::after {
    width: 67.5vw;
    left: 0;
  }
}
@media screen and (max-width: 768px) {
  .other-items .scroll {
    width: 11.3409669211vw;
    margin: 0 5.3435114504vw 3.3078880407vw auto;
  }
}
@media screen and (min-width: 769px) {
  .other-items .scroll {
    width: 3.125vw;
    margin: 0 2.9166666667vw 1.3888888889vw auto;
  }
}
.other-items .hide_img {
  position: absolute;
  z-index: 5;
}
@media screen and (max-width: 768px) {
  .other-items .hide_img {
    width: 6.106870229vw;
    right: 0;
    top: 0;
  }
}
@media screen and (min-width: 769px) {
  .other-items .hide_img {
    width: 12.1527777778vw;
    right: 0;
    top: 0;
  }
}
.other-items .btn_wrap {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .other-items .btn_wrap {
    width: 43.0025445293vw;
    height: 7.8880407125vw;
    margin-top: 7.6335877863vw;
  }
}
@media screen and (min-width: 769px) {
  .other-items .btn_wrap {
    width: 19.7916666667vw;
    height: 2.7777777778vw;
    margin-top: 4.1666666667vw;
  }
}
.other-items .btn_wrap .btn {
  letter-spacing: 0.07em;
}
@media screen and (max-width: 768px) {
  .other-items .btn_wrap .btn {
    font-size: 4.0712468193vw;
  }
}
@media screen and (min-width: 769px) {
  .other-items .btn_wrap .btn {
    font-size: 1.3888888889vw;
  }
}

@media screen and (max-width: 768px) {
  .other-items .swiper {
    width: 100%;
    padding-left: 7.6335877863vw;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 768px) {
  .other-items .swiper-wrapper {
    -moz-column-gap: 0.7633587786vw;
         column-gap: 0.7633587786vw;
    padding-bottom: 7.6335877863vw;
  }
}
@media screen and (min-width: 769px) {
  .other-items .swiper-wrapper {
    -moz-column-gap: 0.6944444444vw;
         column-gap: 0.6944444444vw;
    padding-bottom: 4.1666666667vw;
  }
}

@media screen and (max-width: 768px) {
  .other-items .swiper-slide {
    width: 34.096692112vw;
    margin: 0 !important;
  }
}
@media screen and (min-width: 769px) {
  .other-items .swiper-slide {
    width: 13.4722222222vw !important;
    margin: 0 !important;
  }
}

.other-items-list a {
  display: block;
  color: #222;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .other-items-list a > p {
    width: 34.096692112vw;
  }
}
@media screen and (min-width: 769px) {
  .other-items-list a > p {
    width: 13.4027777778vw;
  }
}

.other-items-list img {
  position: relative;
}
@media screen and (max-width: 768px) {
  .other-items-list img {
    margin-bottom: 2.0356234097vw;
  }
}
@media screen and (min-width: 769px) {
  .other-items-list img {
    margin-bottom: 0.5555555556vw;
  }
}

.other-items-list img + span {
  /* padding: 0 9px; */
  padding: 2px 4px;
  background: #219bd9;
  color: #fff;
  font-size: 0.6rem;
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 1;
}

.other-items-list .ico_box {
  display: none;
}

.other-items-list p {
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 11px;
  position: relative;
}

.other-items-list .label,
.other-items-list .textOverflow {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 3行で省略 */
  overflow: hidden;
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .other-items-list .label,
  .other-items-list .textOverflow {
    margin-bottom: 0.5089058524vw;
    font-size: min(2.2900763359vw, 9px);
  }
}
@media screen and (min-width: 769px) {
  .other-items-list .label,
  .other-items-list .textOverflow {
    margin-bottom: 0.1388888889vw;
    font-size: min(0.7638888889vw, 11px);
  }
}

.other-items-list .ico_box + p {
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .other-items-list .ico_box + p {
    margin-bottom: 0.5089058524vw;
    font-size: min(2.2900763359vw, 9px);
  }
}
@media screen and (min-width: 769px) {
  .other-items-list .ico_box + p {
    margin-bottom: 0.1388888889vw;
    font-size: min(0.7638888889vw, 11px);
  }
}

.other-items-list .price,
.other-items-list .salecolor,
.other-items-list .salecolor + .price {
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .other-items-list .price,
  .other-items-list .salecolor,
  .other-items-list .salecolor + .price {
    font-size: min(2.2900763359vw, 9px);
  }
}
@media screen and (min-width: 769px) {
  .other-items-list .price,
  .other-items-list .salecolor,
  .other-items-list .salecolor + .price {
    font-size: min(0.7638888889vw, 11px);
  }
}

.other-items-list .salecolor,
.other-items-list .salecolor + .price {
  color: #f00;
}

.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  bottom: 0;
  background: #cdcdcd;
}
@media screen and (max-width: 768px) {
  .swiper-horizontal > .swiper-scrollbar,
  .swiper-scrollbar.swiper-scrollbar-horizontal {
    left: 24.0712468193vw;
    width: 51.1450381679vw;
    height: 0.7048346056vw;
  }
}
@media screen and (min-width: 769px) {
  .swiper-horizontal > .swiper-scrollbar,
  .swiper-scrollbar.swiper-scrollbar-horizontal {
    left: 19.3055555556vw;
    width: 29.4319444444vw;
    height: 0.2583333333vw;
  }
}

@media screen and (max-width: 768px) {
  .cre_sample {
    font-size: min(2.5445292621vw, 10px);
    margin-top: 1.7811704835vw;
  }
}
@media screen and (min-width: 769px) {
  .cre_sample {
    font-size: min(0.7916666667vw, 11.4px);
    margin-top: 0.5555555556vw;
  }
}

/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* セクション共通
*--------------------------------------*/
svg {
  display: block;
  width: 100%;
}

.inner {
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
}

.dummy {
  position: sticky;
  top: 0;
  z-index: -1;
  height: 500px;
  width: 100%;
}

.wrapper {
  position: relative;
  background-color: #fbfaf5;
  color: #262626;
  overflow-x: clip;
  font-family: din-condensed, sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  .wrapper {
    padding-top: 10.1781170483vw;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
  }
}
@media screen and (min-width: 769px) {
  .wrapper {
    padding-top: 50px;
  }
}

.flex_wrap {
  display: flex;
}

.overflow_h {
  overflow: hidden;
}

svg {
  width: 100%;
}

figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.transform_90 {
  width: -moz-fit-content;
  width: fit-content;
  transform: rotate(-90deg);
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

/*--------------------------------------*
* ローディング
*--------------------------------------*/
.load {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}

@media screen and (max-width: 768px) {
  .pc_flex {
    display: block;
  }
}
@media screen and (min-width: 769px) {
  .pc_flex {
    display: flex;
    justify-content: space-around;
    background: #fbfaf5;
  }
}
@media screen and (min-width: 769px) {
  .pc_flex .pc_left {
    width: 37.7777777778vw;
    position: sticky;
    top: 50px; /* ヘッダーの高さ分下げる */
    left: 0;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    z-index: 15;
    -moz-column-gap: 4.8611111111vw;
         column-gap: 4.8611111111vw;
  }
}
@media screen and (max-width: 768px) {
  .pc_flex .pc_right {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .pc_flex .pc_right {
    width: 62.2222222222vw;
    height: 100%;
    background-color: #eeebe0;
  }
}

#index {
  background-color: #eeebe0;
  position: relative;
}
@media screen and (max-width: 768px) {
  #index {
    position: relative;
    z-index: 2;
    min-height: 152.6717557252vw; /* コンテンツが収まる最低限の高さを確保 */
    margin-bottom: 19.3384223919vw;
  }
}
@media screen and (min-width: 769px) {
  #index {
    width: 62.2222222222vw;
    min-height: 42.4305555556vw; /* コンテンツが収まる最低限の高さを確保 */
  }
}
#index h3 {
  color: #fff;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
  font-family: din-condensed, sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  #index h3 {
    font-size: min(19.8473282443vw, 78px);
    letter-spacing: 0.09em;
    position: relative;
    top: -2.5445292621vw;
  }
}
@media screen and (min-width: 769px) {
  #index h3 {
    font-size: 8.6111111111vw;
    letter-spacing: 0.2em;
    padding-top: 4.0277777778vw;
  }
}
@media screen and (max-width: 768px) {
  #index ul {
    position: relative;
    top: -20.3562340967vw;
  }
}
#index ul li {
  position: absolute;
}
#index ul li .txt {
  position: absolute;
  left: 0;
}
#index ul li .txt p {
  position: relative;
  line-height: 1.063;
  font-family: din-condensed, sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  #index ul li .txt p {
    font-size: 4.0712468193vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li .txt p {
    font-size: 1.4888888889vw;
  }
}
#index ul li .txt p::after {
  content: "";
  height: 1px;
  display: inline-block;
  background-color: #262626;
  position: absolute;
  bottom: -10px;
  left: 0;
}
@media screen and (max-width: 768px) {
  #index ul li .txt p::after {
    bottom: -1.5267175573vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li .txt p::after {
    bottom: -0.4861111111vw;
  }
}
#index ul li .txt p span {
  display: block;
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: italic;
}
@media screen and (max-width: 768px) {
  #index ul li .txt p span {
    font-size: 2.5445292621vw;
    letter-spacing: 0em;
    margin-bottom: 1.0178117048vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li .txt p span {
    font-size: 0.8333333333vw;
    letter-spacing: 0.02em;
    margin-bottom: 0.2777777778vw;
  }
}
#index ul li img {
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  #index ul li img {
    width: 29.7709923664vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li img {
    width: 9.1694444444vw;
  }
}
@media screen and (max-width: 768px) {
  #index ul li.tre1 {
    width: 37.4045801527vw;
    left: 5.5979643766vw;
    top: 6.6157760814vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre1 {
    width: 12.2993055556vw;
    left: 4.375vw;
    top: 8.8888888889vw;
  }
}
@media screen and (max-width: 768px) {
  #index ul li.tre1 a .txt {
    top: 33.8422391858vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre1 a .txt {
    top: 11.8055555556vw;
  }
}
@media screen and (max-width: 768px) {
  #index ul li.tre1 a .txt p::after {
    width: 17.8117048346vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre1 a .txt p::after {
    width: 6.1805555556vw;
  }
}
#index ul li.tre1 a img {
  margin: 0 0 0 auto;
}
@media screen and (max-width: 768px) {
  #index ul li.tre2 {
    width: 34.3511450382vw;
    left: 32.8244274809vw;
    top: 35.1145038168vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre2 {
    width: 11.3451388889vw;
    left: 16.6666666667vw;
    top: 11.5277777778vw;
  }
}
@media screen and (max-width: 768px) {
  #index ul li.tre2 a .txt {
    top: 58.7786259542vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre2 a .txt {
    top: 17.2916666667vw;
    right: 0;
    left: auto;
  }
}
@media screen and (max-width: 768px) {
  #index ul li.tre2 a .txt p::after {
    width: 17.8117048346vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre2 a .txt p::after {
    width: 5.0694444444vw;
    right: 0;
    left: auto;
  }
}
@media screen and (max-width: 768px) {
  #index ul li.tre2 a img {
    margin: 0 0 0 auto;
  }
}
@media screen and (max-width: 768px) {
  #index ul li.tre3 {
    width: 38.6768447837vw;
    left: 57.2519083969vw;
    top: 6.3613231552vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre3 {
    width: 12.3756944444vw;
    left: 24.0277777778vw;
    top: 8.0555555556vw;
  }
}
@media screen and (max-width: 768px) {
  #index ul li.tre3 a .txt {
    top: 21.1195928753vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre3 a .txt {
    top: 4.7222222222vw;
  }
}
@media screen and (max-width: 768px) {
  #index ul li.tre3 a .txt p::after {
    width: 17.8117048346vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre3 a .txt p::after {
    width: 5vw;
  }
}
#index ul li.tre3 a img {
  margin: 0 0 0 auto;
}
@media screen and (max-width: 768px) {
  #index ul li.tre4 {
    width: 32.3155216285vw;
    left: 4.5801526718vw;
    top: 60.5597964377vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre4 {
    width: 10.6597222222vw;
    left: 36.6666666667vw;
    top: 12.0138888889vw;
  }
}
@media screen and (max-width: 768px) {
  #index ul li.tre4 a .txt {
    top: 58.0152671756vw;
    right: -2.5445292621vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre4 a .txt {
    top: 18.75vw;
    right: 0;
    left: auto;
  }
}
@media screen and (max-width: 768px) {
  #index ul li.tre4 a .txt p::after {
    width: 14.5038167939vw;
    right: 0;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre4 a .txt p::after {
    width: 5vw;
    right: 0;
    left: auto;
  }
}
@media screen and (max-width: 768px) {
  #index ul li.tre4 a img {
    margin: 0 0 0 auto;
  }
}
@media screen and (max-width: 768px) {
  #index ul li.tre5 {
    width: 36.3867684478vw;
    left: 58.524173028vw;
    top: 60.5597964377vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre5 {
    width: 11.3791666667vw;
    left: 45.8333333333vw;
    top: 8.0555555556vw;
  }
}
#index ul li.tre5 a .txt {
  right: 0;
  left: auto;
}
@media screen and (max-width: 768px) {
  #index ul li.tre5 a .txt {
    top: 57.7608142494vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre5 a .txt {
    top: 8.75vw;
  }
}
#index ul li.tre5 a .txt p::after {
  right: 0;
  left: auto;
}
@media screen and (max-width: 768px) {
  #index ul li.tre5 a .txt p::after {
    width: 17.8117048346vw;
  }
}
@media screen and (min-width: 769px) {
  #index ul li.tre5 a .txt p::after {
    width: 5vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area {
    margin-top: 52.0833333333vw;
  }
}
#main_area section {
  position: relative;
}
#main_area section .st1.group {
  position: relative;
  top: 0;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group {
    width: 83.3333333333vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  }
}
#main_area section .st1.group::before {
  content: "";
  display: block;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group::before {
    padding-top: 347.582697201vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group::before {
    padding-top: 74.9305555556vw;
  }
}
#main_area section .st1.group h2 {
  letter-spacing: 0.01em;
  position: absolute;
  z-index: 2;
  white-space: nowrap;
  font-family: din-condensed, sans-serif;
  font-weight: 400;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group h2 {
    font-size: 15.1603053435vw;
    padding-left: 5.3435114504vw;
    padding-top: 1.272264631vw;
    top: 0vw;
    left: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group h2 {
    font-size: 6.1097222222vw;
    padding-top: 0.3472222222vw;
    top: 0vw;
    left: 0vw;
  }
}
#main_area section .st1.group h2 span {
  display: flex;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group h2 span {
    -moz-column-gap: 1.272264631vw;
         column-gap: 1.272264631vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group h2 span {
    -moz-column-gap: 0.4861111111vw;
         column-gap: 0.4861111111vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group h2 span.sub2 {
    font-size: 4.6132315522vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group h2 span.sub2 {
    font-size: 1.8597222222vw;
  }
}
#main_area section .st1.group h2 span.main {
  position: relative;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group h2 span.main {
    font-size: 6.0559796438vw;
    top: -1.272264631vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group h2 span.main {
    font-size: 2.4409722222vw;
    top: -0.3472222222vw;
  }
}
#main_area section .st1.group h2 span.ja {
  letter-spacing: 0.07em;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group h2 span.ja {
    font-size: 3.8167938931vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group h2 span.ja {
    font-size: 1.5020833333vw;
  }
}
#main_area section .st1.group .tre_comment {
  position: absolute;
  z-index: 2;
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .tre_comment {
    width: 36.3867684478vw;
    padding-top: 11.1959287532vw;
    padding-left: 6.3613231552vw;
    font-size: min(3.0534351145vw, 12px);
    letter-spacing: 0.02em;
    line-height: 1.575;
    top: 26.9720101781vw;
    left: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .tre_comment {
    width: 12.9166666667vw;
    padding-top: 4.7222222222vw;
    font-size: 0.9722222222vw;
    letter-spacing: 0.03em;
    line-height: 1.7;
    top: 10.7638888889vw;
    left: 0vw;
  }
}
#main_area section .st1.group .tre_comment::after {
  content: "";
  display: inline-block;
  background-color: #262626;
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .tre_comment::after {
    width: 9.9236641221vw;
    height: 0.5089058524vw;
    top: 5.0890585242vw;
    left: 6.3613231552vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .tre_comment::after {
    width: 3.9993055556vw;
    height: 0.2048611111vw;
    top: 2.0833333333vw;
    left: 0;
  }
}
#main_area section .st1.group .model_comment {
  position: absolute;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .model_comment {
    width: 40.203562341vw;
    top: 142.2391857506vw;
    left: 54.1984732824vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .model_comment {
    width: 19.4444444444vw;
    top: 44.0972222222vw;
    left: 57.9166666667vw;
  }
}
#main_area section .st1.group .model_comment h3 {
  position: relative;
  display: flex;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .model_comment h3 {
    -moz-column-gap: 1.7811704835vw;
         column-gap: 1.7811704835vw;
    margin-bottom: 2.5445292621vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .model_comment h3 {
    -moz-column-gap: 0.4861111111vw;
         column-gap: 0.4861111111vw;
    margin-bottom: 0.6944444444vw;
  }
}
#main_area section .st1.group .model_comment h3::after {
  content: "";
  display: inline-block;
  background-color: #262626;
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .model_comment h3::after {
    width: 53.1806615776vw;
    height: 0.2544529262vw;
    bottom: 0vw;
    right: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .model_comment h3::after {
    width: 24.4444444444vw;
    height: 0.0694444444vw;
    bottom: 0vw;
    right: 0;
  }
}
#main_area section .st1.group .model_comment h3 .sub2 {
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .model_comment h3 .sub2 {
    font-size: 4.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .model_comment h3 .sub2 {
    font-size: 1.3888888889vw;
  }
}
#main_area section .st1.group .model_comment h3 .main {
  position: relative;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .model_comment h3 .main {
    font-size: 8.3969465649vw;
    top: -2.5445292621vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .model_comment h3 .main {
    font-size: 2.7777777778vw;
    top: -0.6944444444vw;
  }
}
#main_area section .st1.group .model_comment p {
  letter-spacing: 0em;
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .model_comment p {
    width: 40.203562341vw;
    font-size: min(2.7989821883vw, 11px);
    line-height: 1.791;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .model_comment p {
    width: 19.4444444444vw;
    font-size: 0.9513888889vw;
    line-height: 1.723;
  }
}
#main_area section .st1.group .swiper_fade_area {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .swiper_fade_area {
    width: 80.1526717557vw;
    top: 14.7582697201vw;
    right: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .swiper_fade_area {
    width: 32.2916666667vw;
    top: 6.1111111111vw;
    left: 5.1388888889vw;
  }
}
#main_area section .st1.group .img_cut {
  position: absolute;
  z-index: 3;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .img_cut {
    width: 48.8549618321vw;
    top: 103.5623409669vw;
    left: 3.8167938931vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .img_cut {
    width: 17.4326388889vw;
    top: 9.0277777778vw;
    left: 40.5555555556vw;
  }
}
#main_area section .st1.group .img_other1 {
  position: absolute;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .img_other1 {
    width: 45.8015267176vw;
    top: 202.2900763359vw;
    right: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .img_other1 {
    width: 20.6944444444vw;
    top: 4.1666666667vw;
    right: 0vw;
  }
}
#main_area section .st1.group .img_other2 {
  position: absolute;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .img_other2 {
    width: 61.3231552163vw;
    top: 220.8651399491vw;
    left: 18.0661577608vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .img_other2 {
    width: 25.8277777778vw;
    top: 18.6111111111vw;
    left: 53.4027777778vw;
  }
}
#main_area section .st1.group .icon_detail {
  position: absolute;
  z-index: 0;
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .icon_detail {
    width: 7.3791348601vw;
    top: 205.5979643766vw;
    left: 5.8524173028vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .icon_detail {
    width: 2.3013888889vw;
    top: 49.7222222222vw;
    left: 42.0833333333vw;
  }
}
#main_area section .st1.group .credit {
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  #main_area section .st1.group .credit {
    top: 282.6972010178vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .st1.group .credit {
    top: 61.875vw;
  }
}
#main_area section .other_st {
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st {
    padding-top: 12.7226463104vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st {
    padding-top: 3.8194444444vw;
  }
}
#main_area section .other_st h4 {
  color: #e5e1d8;
  letter-spacing: 0.03em;
  white-space: nowrap;
  position: relative;
  display: flex;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st h4 {
    font-size: 18.320610687vw;
    top: 4.0712468193vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st h4 {
    font-size: 6.2131944444vw;
    top: 1.25vw;
  }
}
#main_area section .other_st h4 span {
  display: inline-block;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st h4 span {
    padding-left: 4.5801526718vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st h4 span {
    padding-left: 1.5277777778vw;
  }
}
#main_area section .other_st .bg {
  background-color: #e5e1d8;
}
#main_area section .other_st .inner {
  display: flex;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner {
    flex-direction: column;
    row-gap: 7.6335877863vw;
    padding: 12.7226463104vw 0 16.5394402036vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner {
    justify-content: flex-start;
    -moz-column-gap: 4.1666666667vw;
         column-gap: 4.1666666667vw;
    width: 73.6111111111vw;
    margin: 0 auto;
    padding: 4.1666666667vw 0 7.6388888889vw;
  }
}
#main_area section .other_st .inner .st2 .group,
#main_area section .other_st .inner .st3 .group {
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .group,
  #main_area section .other_st .inner .st3 .group {
    width: 100vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .group,
  #main_area section .other_st .inner .st3 .group {
    width: 34.7222222222vw;
  }
}
#main_area section .other_st .inner .st2 .group .img_st,
#main_area section .other_st .inner .st3 .group .img_st {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .group .img_st,
  #main_area section .other_st .inner .st3 .group .img_st {
    width: 76.3358778626vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .group .img_st,
  #main_area section .other_st .inner .st3 .group .img_st {
    width: 23.6506944444vw;
    min-height: 48.3246527778vw;
  }
}
#main_area section .other_st .inner .st2 .group .brand_wrap,
#main_area section .other_st .inner .st3 .group .brand_wrap {
  position: absolute;
}
#main_area section .other_st .inner .st2 .group .brand_wrap .brand,
#main_area section .other_st .inner .st3 .group .brand_wrap .brand {
  position: relative;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .group .brand_wrap .brand,
  #main_area section .other_st .inner .st3 .group .brand_wrap .brand {
    width: 25.4452926209vw;
    font-size: 3.0534351145vw;
    line-height: 1.242;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .group .brand_wrap .brand,
  #main_area section .other_st .inner .st3 .group .brand_wrap .brand {
    width: 10.4166666667vw;
    font-size: 0.9027777778vw;
    line-height: 1.223;
  }
}
#main_area section .other_st .inner .st2 .group .brand_wrap .brand.clip_left::after, #main_area section .other_st .inner .st2 .group .brand_wrap .brand.clip_right::after, #main_area section .other_st .inner .st2 .group .brand_wrap .brand.clip_top::after, #main_area section .other_st .inner .st2 .group .brand_wrap .brand.clip_bottom::after,
#main_area section .other_st .inner .st3 .group .brand_wrap .brand.clip_left::after,
#main_area section .other_st .inner .st3 .group .brand_wrap .brand.clip_right::after,
#main_area section .other_st .inner .st3 .group .brand_wrap .brand.clip_top::after,
#main_area section .other_st .inner .st3 .group .brand_wrap .brand.clip_bottom::after {
  content: "";
  display: inline-block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
}
#main_area section .other_st .inner .st2 .group .brand_wrap .brand .sub2,
#main_area section .other_st .inner .st3 .group .brand_wrap .brand .sub2 {
  display: block;
  margin-bottom: 1%;
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .group .brand_wrap .brand .spNone,
  #main_area section .other_st .inner .st3 .group .brand_wrap .brand .spNone {
    display: inline-block;
  }
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .group .brand_wrap .brand .pcNone,
  #main_area section .other_st .inner .st3 .group .brand_wrap .brand .pcNone {
    display: inline-block;
  }
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .group .brand_wrap.b1,
  #main_area section .other_st .inner .st3 .group .brand_wrap.b1 {
    top: 7.6335877863vw;
    left: 8.1424936387vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .group .brand_wrap.b1,
  #main_area section .other_st .inner .st3 .group .brand_wrap.b1 {
    top: 2.6013888889vw;
    right: 0.7638888889vw;
    left: auto;
  }
}
#main_area section .other_st .inner .st2 .group .brand_wrap.b1 .brand.clip_left::after,
#main_area section .other_st .inner .st3 .group .brand_wrap.b1 .brand.clip_left::after {
  background-image: url("../assets/images/tre1_st2_b1.svg");
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .group .brand_wrap.b1 .brand.clip_left::after,
  #main_area section .other_st .inner .st3 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 9.0076335878vw;
    height: 3.7633587786vw;
    left: 7.8880407125vw;
    bottom: -4.0712468193vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .group .brand_wrap.b1 .brand.clip_left::after,
  #main_area section .other_st .inner .st3 .group .brand_wrap.b1 .brand.clip_left::after {
    background-image: url("../assets/images/tre1_st2_b1_pc.svg");
    width: 2.6013888889vw;
    height: 1.3375vw;
    left: 0.1388888889vw;
    bottom: -1.5972222222vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .group .brand_wrap.b2,
  #main_area section .other_st .inner .st3 .group .brand_wrap.b2 {
    bottom: 14.5038167939vw;
    left: 73.2824427481vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .group .brand_wrap.b2,
  #main_area section .other_st .inner .st3 .group .brand_wrap.b2 {
    bottom: 6.8055555556vw;
    left: 4.8611111111vw;
  }
}
#main_area section .other_st .inner .st2 .group .brand_wrap.b2 .brand.clip_top::after,
#main_area section .other_st .inner .st3 .group .brand_wrap.b2 .brand.clip_top::after {
  background-image: url("../assets/images/tre1_st2_b2.svg");
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .group .brand_wrap.b2 .brand.clip_top::after,
  #main_area section .other_st .inner .st3 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 2.272264631vw;
    height: 5.4351145038vw;
    left: -1.0178117048vw;
    top: -6.6157760814vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .group .brand_wrap.b2 .brand.clip_top::after,
  #main_area section .other_st .inner .st3 .group .brand_wrap.b2 .brand.clip_top::after {
    background-image: url("../assets/images/tre1_st2_b2_pc.svg");
    width: 2.2291666667vw;
    height: 1.4861111111vw;
    left: 0.9027777778vw;
    top: -1.5972222222vw;
  }
}
#main_area section .other_st .inner .st2 .other_comment,
#main_area section .other_st .inner .st3 .other_comment {
  display: flex;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .other_comment,
  #main_area section .other_st .inner .st3 .other_comment {
    width: 84.7328244275vw;
    margin: 3.8167938931vw auto 10.1781170483vw;
    -moz-column-gap: 8.6513994911vw;
         column-gap: 8.6513994911vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .other_comment,
  #main_area section .other_st .inner .st3 .other_comment {
    width: 27.7777777778vw;
    margin: 2.7777777778vw auto 3.125vw;
    -moz-column-gap: 2.7777777778vw;
         column-gap: 2.7777777778vw;
  }
}
#main_area section .other_st .inner .st2 .other_comment h3,
#main_area section .other_st .inner .st3 .other_comment h3 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .other_comment h3,
  #main_area section .other_st .inner .st3 .other_comment h3 {
    row-gap: 1.272264631vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .other_comment h3,
  #main_area section .other_st .inner .st3 .other_comment h3 {
    row-gap: 0.3472222222vw;
  }
}
#main_area section .other_st .inner .st2 .other_comment h3::after,
#main_area section .other_st .inner .st3 .other_comment h3::after {
  content: "";
  display: inline-block;
  background-color: #262626;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  height: 100%;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .other_comment h3::after,
  #main_area section .other_st .inner .st3 .other_comment h3::after {
    width: 0.5089058524vw;
    right: -4.3256997455vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .other_comment h3::after,
  #main_area section .other_st .inner .st3 .other_comment h3::after {
    width: 0.1388888889vw;
    right: -1.3888888889vw;
  }
}
#main_area section .other_st .inner .st2 .other_comment h3 span,
#main_area section .other_st .inner .st3 .other_comment h3 span {
  display: block;
}
#main_area section .other_st .inner .st2 .other_comment h3 .sub2,
#main_area section .other_st .inner .st3 .other_comment h3 .sub2 {
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .other_comment h3 .sub2,
  #main_area section .other_st .inner .st3 .other_comment h3 .sub2 {
    font-size: 4.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .other_comment h3 .sub2,
  #main_area section .other_st .inner .st3 .other_comment h3 .sub2 {
    font-size: 1.3888888889vw;
  }
}
#main_area section .other_st .inner .st2 .other_comment h3 .main,
#main_area section .other_st .inner .st3 .other_comment h3 .main {
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .other_comment h3 .main,
  #main_area section .other_st .inner .st3 .other_comment h3 .main {
    font-size: 8.3969465649vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .other_comment h3 .main,
  #main_area section .other_st .inner .st3 .other_comment h3 .main {
    font-size: 2.7993055556vw;
  }
}
#main_area section .other_st .inner .st2 .other_comment p,
#main_area section .other_st .inner .st3 .other_comment p {
  letter-spacing: 0.03em;
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .other_comment p,
  #main_area section .other_st .inner .st3 .other_comment p {
    width: 68.1933842239vw;
    font-size: min(2.7989821883vw, 11px);
    line-height: 1.7;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st2 .other_comment p,
  #main_area section .other_st .inner .st3 .other_comment p {
    width: 22.2916666667vw;
    font-size: 0.9152777778vw;
    line-height: 1.882;
  }
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st2 .credit,
  #main_area section .other_st .inner .st3 .credit {
    margin-bottom: 0;
  }
}
#main_area section .other_st .inner .st3 .group {
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .group {
    width: 100vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .group {
    width: 34.7222222222vw;
  }
}
#main_area section .other_st .inner .st3 .group .img_st {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .group .img_st {
    width: 76.3358778626vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .group .img_st {
    width: 23.6506944444vw;
  }
}
#main_area section .other_st .inner .st3 .group .brand_wrap {
  position: absolute;
}
#main_area section .other_st .inner .st3 .group .brand_wrap .brand {
  position: relative;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap .brand {
    width: 25.4452926209vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap .brand {
    width: 10.4166666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap.b1 {
    top: 7.6335877863vw;
    left: auto;
    right: -0.5089058524vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap.b1 {
    top: 2.0833333333vw;
    right: 0vw;
    left: auto;
  }
}
#main_area section .other_st .inner .st3 .group .brand_wrap.b1 .brand.clip_left::after {
  background-image: url("../assets/images/tre1_st3_b1.svg");
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 11.5470737913vw;
    height: 4.2824427481vw;
    left: -3.8167938931vw;
    bottom: -4.3256997455vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 3.125vw;
    height: 1.1111111111vw;
    left: -0.8333333333vw;
    bottom: -1.25vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap.b2 {
    bottom: 45.8015267176vw;
    left: auto;
    right: -6.6157760814vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap.b2 {
    bottom: 17.9861111111vw;
    left: auto;
    right: -0.8333333333vw;
  }
}
#main_area section .other_st .inner .st3 .group .brand_wrap.b2 .brand.clip_top::after {
  background-image: url("../assets/images/tre1_st3_b2.svg");
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 3.7659033079vw;
    height: 4.9847328244vw;
    left: -3.0534351145vw;
    top: -6.6157760814vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 0.9722222222vw;
    height: 1.3194444444vw;
    left: -0.9722222222vw;
    top: -1.6666666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap.b3 {
    bottom: 25.4452926209vw;
    left: 10.1781170483vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap.b3 {
    bottom: 14.8611111111vw;
    left: 5.4861111111vw;
  }
}
#main_area section .other_st .inner .st3 .group .brand_wrap.b3 .brand.clip_top::after {
  background-image: url("../assets/images/tre1_st3_b3.svg");
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap.b3 .brand.clip_top::after {
    width: 10.5318066158vw;
    height: 4.2773536896vw;
    left: 5.8524173028vw;
    top: -5.3435114504vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .group .brand_wrap.b3 .brand.clip_top::after {
    background-image: url("../assets/images/tre1_st3_b1.svg");
    width: 3.125vw;
    height: 1.1111111111vw;
    left: 1.7361111111vw;
    top: -1.4583333333vw;
    transform: scaleX(-1) scaleY(-1);
  }
}
#main_area section .other_st .inner .st3 .other_comment {
  display: flex;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .other_comment {
    width: 84.7328244275vw;
    margin: 3.8167938931vw auto 10.1781170483vw;
    -moz-column-gap: 8.6513994911vw;
         column-gap: 8.6513994911vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .other_comment {
    width: 27.7777777778vw;
    margin: 2.7777777778vw auto 3.125vw;
    -moz-column-gap: 2.7777777778vw;
         column-gap: 2.7777777778vw;
  }
}
#main_area section .other_st .inner .st3 .other_comment h3 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .other_comment h3 {
    row-gap: 1.272264631vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .other_comment h3 {
    row-gap: 0.3472222222vw;
  }
}
#main_area section .other_st .inner .st3 .other_comment h3::after {
  content: "";
  display: inline-block;
  background-color: #262626;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  height: 100%;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .other_comment h3::after {
    width: 0.5089058524vw;
    right: -4.3256997455vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .other_comment h3::after {
    width: 0.1388888889vw;
    right: -1.3888888889vw;
  }
}
#main_area section .other_st .inner .st3 .other_comment h3 span {
  display: block;
}
#main_area section .other_st .inner .st3 .other_comment h3 .sub2 {
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .other_comment h3 .sub2 {
    font-size: 4.3333333333vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .other_comment h3 .sub2 {
    font-size: 1.3888888889vw;
  }
}
#main_area section .other_st .inner .st3 .other_comment h3 .main {
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .other_comment h3 .main {
    font-size: 8.3969465649vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .other_comment h3 .main {
    font-size: 2.7993055556vw;
  }
}
#main_area section .other_st .inner .st3 .other_comment p {
  letter-spacing: 0.03em;
  font-family: dnp-shuei-gothic-gin-std, sans-serif;
  font-weight: 500;
  font-style: normal;
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .other_comment p {
    width: 68.1933842239vw;
    font-size: 2.7989821883vw;
    line-height: 1.7;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .other_st .inner .st3 .other_comment p {
    width: 22.2916666667vw;
    font-size: 0.9152777778vw;
    line-height: 1.882;
  }
}
@media screen and (max-width: 768px) {
  #main_area section .other_st .inner .st3 .credit {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 768px) {
  #main_area section .more_area {
    padding: 12.7226463104vw 0 0;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .more_area {
    padding: 6.0416666667vw 0 6.9444444444vw;
  }
}
#main_area section .more_area h4 {
  color: #262626;
  letter-spacing: 0em;
  white-space: nowrap;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #main_area section .more_area h4 {
    font-size: 6.6157760814vw;
    margin-bottom: 8.9058524173vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .more_area h4 {
    font-size: 2.3298611111vw;
    margin-bottom: 5vw;
  }
}
#main_area section .more_area .h4_sub {
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  #main_area section .more_area .h4_sub {
    width: 91.3486005089vw;
    margin-bottom: 10.6870229008vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .more_area .h4_sub {
    width: 68.6805555556vw;
    margin-bottom: 4.0972222222vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .more_area .inner {
    display: flex;
    align-items: end;
    -moz-column-gap: 4.7916666667vw;
         column-gap: 4.7916666667vw;
    width: 67.8472222222vw;
    margin: 0 auto;
  }
}
@media screen and (max-width: 768px) {
  #main_area section .more_area .inner .credit {
    margin-top: 6.6157760814vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .more_area .inner .credit {
    width: 28.6638888889vw;
    margin: 0;
  }
}
#main_area section .more_area .inner .credit .note {
  letter-spacing: 0.03em;
}
@media screen and (max-width: 768px) {
  #main_area section .more_area .inner .credit .note {
    font-size: min(2.5445292621vw, 10px);
    margin-bottom: 2.5445292621vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .more_area .inner .credit .note {
    font-size: min(0.8659722222vw, 12.47px);
    margin-bottom: 1.0416666667vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .more_area .inner .credit ul {
    flex-direction: column;
  }
}
#main_area section .more_area .img_more {
  margin: 0 auto;
  border: solid 2px #000;
}
@media screen and (max-width: 768px) {
  #main_area section .more_area .img_more {
    width: 89.058524173vw;
    margin-bottom: 5.5979643766vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section .more_area .img_more {
    width: 34.35vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group::before {
    padding-top: 411.1959287532vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group::before {
    padding-top: 79.5833333333vw;
  }
}
#main_area section#tre2 .st1.group h2 {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group h2 {
    padding-left: 0vw;
    top: 75.8269720102vw;
    right: 7.1246819338vw;
    text-align: right;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group h2 {
    top: 0.4166666667vw;
    left: 42.0138888889vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group h2 span {
    justify-content: end;
  }
}
#main_area section#tre2 .st1.group .tre_comment {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group .tre_comment {
    width: 31.2977099237vw;
    padding-left: 0vw;
    top: 104.3256997455vw;
    right: 6.6157760814vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group .tre_comment {
    width: 12.9166666667vw;
    padding-top: 4.7222222222vw;
    top: 11.8055555556vw;
    left: 42.0138888889vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group .tre_comment::after {
    top: 4.5801526718vw;
    right: 0vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group .tre_comment::after {
    top: 2.0833333333vw;
    left: 0;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group .model_comment {
    width: 40.203562341vw;
    top: 238.4223918575vw;
    left: 7.6335877863vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group .model_comment {
    width: 19.4444444444vw;
    top: 52.5694444444vw;
    left: 12.8472222222vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group .model_comment h3::after {
    left: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group .model_comment h3::after {
    width: 24.4444444444vw;
    height: 0.0694444444vw;
    bottom: 0vw;
    right: auto;
    left: 0;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group .model_comment p {
    width: 40.203562341vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group .model_comment p {
    width: 13.6805555556vw;
  }
}
#main_area section#tre2 .st1.group .swiper_fade_area {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group .swiper_fade_area {
    width: 85.4961832061vw;
    top: 0vw;
    left: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group .swiper_fade_area {
    width: 32.2916666667vw;
    top: 0.2777777778vw;
    right: 0vw;
    left: auto;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group .img_cut {
    width: 48.8549618321vw;
    top: 182.1882951654vw;
    left: 48.8549618321vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group .img_cut {
    width: 17.9625vw;
    top: 25.0694444444vw;
    left: 28.3333333333vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group .img_other1 {
    width: 53.4351145038vw;
    top: 139.6946564885vw;
    left: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group .img_other1 {
    width: 23.8486111111vw;
    top: 5.1388888889vw;
    left: 1.8055555556vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group .img_other2 {
    width: 54.9618320611vw;
    top: 158.7786259542vw;
    left: 29.0076335878vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group .img_other2 {
    width: 23.575vw;
    top: 21.3888888889vw;
    left: 9.9305555556vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group .icon_detail {
    width: 7.3791348601vw;
    top: 293.6386768448vw;
    left: 47.3282442748vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group .icon_detail {
    width: 2.3013888889vw;
    top: 69.0277777778vw;
    left: 27.8472222222vw;
  }
}
#main_area section#tre2 .st1.group .credit {
  margin: 0;
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st1.group .credit {
    top: 320.1017811705vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group .credit {
    width: 32.2222222222vw;
    top: 47.9861111111vw;
    left: 50.9027777778vw;
    transform: none;
  }
}
#main_area section#tre2 .st1.group .credit ul {
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st1.group .credit ul {
    align-items: end;
  }
}
#main_area section#tre2 .st2 .group .brand_wrap .brand {
  position: relative;
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st2 .group .brand_wrap .brand {
    width: 25.4452926209vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st2 .group .brand_wrap .brand {
    width: 10.4166666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st2 .group .brand_wrap.b1 {
    top: 7.6335877863vw;
    right: -3.8167938931vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st2 .group .brand_wrap.b1 {
    top: 2.3611111111vw;
    right: -0.6944444444vw;
    left: auto;
  }
}
#main_area section#tre2 .st2 .group .brand_wrap.b1 .brand.clip_left::after {
  background-image: url("../assets/images/tre2_st2_b1.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st2 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 8.9058524173vw;
    height: 3.5623409669vw;
    left: -5.0890585242vw;
    bottom: -4.0712468193vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st2 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 2.4305555556vw;
    height: 0.9722222222vw;
    left: -1.0416666667vw;
    bottom: -1.1111111111vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st2 .group .brand_wrap.b2 {
    bottom: 44.0203562341vw;
    left: 8.9058524173vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st2 .group .brand_wrap.b2 {
    bottom: 13.1944444444vw;
    left: 5.1388888889vw;
  }
}
#main_area section#tre2 .st2 .group .brand_wrap.b2 .brand.clip_top::after {
  background-image: url("../assets/images/tre2_st2_b2.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st2 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 12.8218829517vw;
    height: 5.2951653944vw;
    left: 6.3613231552vw;
    top: -6.6157760814vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st2 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 3.4993055556vw;
    height: 1.4451388889vw;
    left: 2.1527777778vw;
    top: -1.8055555556vw;
  }
}
#main_area section#tre2 .st3 .group .brand_wrap .brand {
  position: relative;
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st3 .group .brand_wrap .brand {
    width: 25.4452926209vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st3 .group .brand_wrap .brand {
    width: 10.4166666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st3 .group .brand_wrap.b1 {
    top: 7.6335877863vw;
    right: -0.2544529262vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st3 .group .brand_wrap.b1 {
    top: 3.1944444444vw;
    right: -0.4166666667vw;
    left: auto;
  }
}
#main_area section#tre2 .st3 .group .brand_wrap.b1 .brand.clip_left::after {
  background-image: url("../assets/images/tre2_st3_b1.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st3 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 9.0152671756vw;
    height: 4.7709923664vw;
    left: -4.5801526718vw;
    bottom: -5.8524173028vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st3 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 2.4604166667vw;
    height: 1.3020833333vw;
    left: -1.0416666667vw;
    bottom: -1.5277777778vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st3 .group .brand_wrap.b2 {
    bottom: 33.0788804071vw;
    left: 8.9058524173vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st3 .group .brand_wrap.b2 {
    bottom: 15.2777777778vw;
    left: 5.6944444444vw;
  }
}
#main_area section#tre2 .st3 .group .brand_wrap.b2 .brand.clip_top::after {
  background-image: url("../assets/images/tre2_st3_b2.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre2 .st3 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 8.7557251908vw;
    height: 4.0178117048vw;
    left: 10.6870229008vw;
    top: -3.0534351145vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre2 .st3 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 2.3895833333vw;
    height: 1.0965277778vw;
    left: 2.9166666667vw;
    top: -0.8333333333vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st1.group::before {
    padding-top: 363.6132315522vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st1.group::before {
    padding-top: 80.625vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st1.group h2 {
    padding-left: 7.6335877863vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st1.group .tre_comment {
    width: 31.8066157761vw;
    padding-left: 8.1424936387vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st1.group .tre_comment {
    width: 12.9166666667vw;
    padding-top: 4.7222222222vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st1.group .tre_comment::after {
    top: 4.5801526718vw;
    left: 8.1424936387vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st1.group .tre_comment::after {
    top: 2.0833333333vw;
    left: 0;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st1.group .model_comment {
    width: 40.203562341vw;
    top: 170.2290076336vw;
    left: 7.6335877863vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st1.group .model_comment {
    width: 16.0416666667vw;
    top: 42.0833333333vw;
    right: 3.125vw;
    left: auto;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st1.group .model_comment h3::after {
    left: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st1.group .model_comment h3::after {
    width: 22.2222222222vw;
    height: 0.0694444444vw;
    bottom: 0vw;
    right: 0.8333333333vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st1.group .model_comment p {
    width: 40.203562341vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st1.group .model_comment p {
    width: 16.0416666667vw;
  }
}
#main_area section#tre3 .st1.group .swiper_fade_area {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st1.group .swiper_fade_area {
    top: 17.8117048346vw;
    right: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st1.group .swiper_fade_area {
    width: 32.29375vw;
    top: 6.4583333333vw;
    left: 5.0694444444vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st1.group .img_cut {
    width: 48.8549618321vw;
    top: 135.6234096692vw;
    left: 48.8549618321vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st1.group .img_cut {
    width: 17.4326388889vw;
    top: 13.8888888889vw;
    left: 45.3472222222vw;
  }
}
#main_area section#tre3 .st1.group .img_other1 {
  z-index: 0;
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st1.group .img_other1 {
    width: 73.2824427481vw;
    top: 101.0178117048vw;
    left: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st1.group .img_other1 {
    width: 25.7395833333vw;
    top: 37.2916666667vw;
    left: 18.5416666667vw;
    right: auto;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st1.group .img_other2 {
    width: 49.6183206107vw;
    top: 227.989821883vw;
    left: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st1.group .img_other2 {
    width: 21.5618055556vw;
    top: 6.4583333333vw;
    right: 0vw;
    left: auto;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st1.group .icon_detail {
    width: 7.3791348601vw;
    top: 255.7251908397vw;
    left: 55.4707379135vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st1.group .icon_detail {
    width: 2.3013888889vw;
    top: 56.4583333333vw;
    left: 48.2638888889vw;
  }
}
#main_area section#tre3 .st1.group .credit {
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st1.group .credit {
    top: 297.7099236641vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st1.group .credit {
    top: 67.3611111111vw;
  }
}
#main_area section#tre3 .st2 .group .brand_wrap .brand {
  position: relative;
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st2 .group .brand_wrap .brand {
    width: 25.4452926209vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st2 .group .brand_wrap .brand {
    width: 10.4166666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st2 .group .brand_wrap.b1 {
    top: 7.6335877863vw;
    right: -3.8167938931vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st2 .group .brand_wrap.b1 {
    top: 1.7361111111vw;
    right: -1.3888888889vw;
    left: auto;
  }
}
#main_area section#tre3 .st2 .group .brand_wrap.b1 .brand.clip_left::after {
  background-image: url("../assets/images/tre3_st2_b1.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st2 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 9.0076335878vw;
    height: 3.7633587786vw;
    left: -2.7989821883vw;
    bottom: -4.0712468193vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st2 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 2.4583333333vw;
    height: 1.0270833333vw;
    left: -0.7638888889vw;
    bottom: -1.25vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st2 .group .brand_wrap.b2 {
    bottom: 25.4452926209vw;
    left: 13.9949109415vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st2 .group .brand_wrap.b2 {
    bottom: 10.9722222222vw;
    left: 6.9444444444vw;
  }
}
#main_area section#tre3 .st2 .group .brand_wrap.b2 .brand.clip_top::after {
  background-image: url("../assets/images/tre3_st2_b2.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st2 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 11.3002544529vw;
    height: 5.2875318066vw;
    left: 6.3613231552vw;
    top: -6.6157760814vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st2 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 3.0840277778vw;
    height: 1.4430555556vw;
    left: 1.7361111111vw;
    top: -1.8055555556vw;
  }
}
#main_area section#tre3 .st3 .group .brand_wrap .brand {
  position: relative;
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st3 .group .brand_wrap .brand {
    width: 25.4452926209vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st3 .group .brand_wrap .brand {
    width: 10.4166666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st3 .group .brand_wrap.b1 {
    top: 6.106870229vw;
    right: auto;
    left: 7.3791348601vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st3 .group .brand_wrap.b1 {
    top: 2.0833333333vw;
    right: auto;
    left: 5vw;
  }
}
#main_area section#tre3 .st3 .group .brand_wrap.b1 .brand.clip_left::after {
  background-image: url("../assets/images/tre3_st3_b1.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st3 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 8.4936386768vw;
    height: 3.2646310433vw;
    left: 11.1959287532vw;
    bottom: -2.5445292621vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st3 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 2.3180555556vw;
    height: 0.8909722222vw;
    left: 3.2638888889vw;
    bottom: -0.4166666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st3 .group .brand_wrap.b2 {
    bottom: 16.2849872774vw;
    left: auto;
    right: -5.3435114504vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st3 .group .brand_wrap.b2 {
    bottom: 9.375vw;
    left: auto;
    right: -1.6666666667vw;
  }
}
#main_area section#tre3 .st3 .group .brand_wrap.b2 .brand.clip_top::after {
  background-image: url("../assets/images/tre3_st3_b2.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre3 .st3 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 7.9872773537vw;
    height: 3.2595419847vw;
    left: -4.3256997455vw;
    top: -4.5801526718vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st3 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 2.1798611111vw;
    height: 0.8895833333vw;
    left: -1.25vw;
    top: -1.25vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre3 .st2 .group .img_st,
  #main_area section#tre3 .st3 .group .img_st {
    min-height: 46.0388888889vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st1.group::before {
    padding-top: 379.1348600509vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st1.group::before {
    padding-top: 76.1805555556vw;
  }
}
#main_area section#tre4 .st1.group h2 {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st1.group h2 {
    padding-left: 0vw;
    top: 130.2798982188vw;
    left: 6.8702290076vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st1.group h2 {
    top: -0.3472222222vw;
    left: 41.3888888889vw;
  }
}
#main_area section#tre4 .st1.group .tre_comment {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st1.group .tre_comment {
    width: 60.4982188295vw;
    padding-left: 4.834605598vw;
    top: 135.1145038168vw;
    left: 31.5521628499vw;
    padding-top: 0;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st1.group .tre_comment {
    width: 28.4722222222vw;
    padding-left: 2.4305555556vw;
    padding-top: 0;
    top: 3.6805555556vw;
    left: 51.8055555556vw;
  }
}
#main_area section#tre4 .st1.group .tre_comment::after {
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st1.group .tre_comment::after {
    width: 0.5089058524vw;
    height: 17.5572519084vw;
    left: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st1.group .tre_comment::after {
    width: 0.2083333333vw;
    height: 4.7222222222vw;
    left: 0vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st1.group .model_comment {
    width: 40.203562341vw;
    top: 247.582697201vw;
    right: 9.1603053435vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st1.group .model_comment {
    width: 22.0833333333vw;
    top: 57.9861111111vw;
    left: 55.4166666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st1.group .model_comment h3::after {
    right: 0vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st1.group .model_comment h3::after {
    width: 27.2916666667vw;
    height: 0.0694444444vw;
    bottom: 0vw;
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st1.group .model_comment p {
    width: 40.203562341vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st1.group .model_comment p {
    width: 22.0833333333vw;
  }
}
#main_area section#tre4 .st1.group .swiper_fade_area {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st1.group .swiper_fade_area {
    width: 100vw;
    top: 0vw;
    left: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st1.group .swiper_fade_area {
    width: 34.2138888889vw;
    top: 0vw;
    left: 0vw;
    right: auto;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st1.group .img_cut {
    width: 48.8549618321vw;
    top: 162.5954198473vw;
    left: 5.8524173028vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st1.group .img_cut {
    width: 17.4326388889vw;
    top: 25.9722222222vw;
    left: 38.3333333333vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st1.group .img_other1 {
    width: 44.0203562341vw;
    top: 178.3715012723vw;
    right: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st1.group .img_other1 {
    width: 22.0104166667vw;
    top: 23.5416666667vw;
    right: 0vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st1.group .img_other2 {
    width: 43.7659033079vw;
    top: 166.6666666667vw;
    left: 43.0025445293vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st1.group .img_other2 {
    width: 20.1645833333vw;
    top: 15.1388888889vw;
    left: 52.0138888889vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st1.group .icon_detail {
    width: 7.3791348601vw;
    top: 180.1526717557vw;
    left: 6.8702290076vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st1.group .icon_detail {
    width: 2.3013888889vw;
    top: 33.2638888889vw;
    left: 40.1388888889vw;
  }
}
#main_area section#tre4 .st1.group .credit {
  margin: 0;
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st1.group .credit {
    top: 308.3969465649vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st1.group .credit {
    width: 32.2222222222vw;
    top: 44.2361111111vw;
    left: 0vw;
    transform: none;
  }
}
#main_area section#tre4 .st1.group .credit ul {
  flex-direction: column;
}
#main_area section#tre4 .st2 .group .brand_wrap .brand {
  position: relative;
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st2 .group .brand_wrap .brand {
    width: 25.4452926209vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st2 .group .brand_wrap .brand {
    width: 10.4166666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st2 .group .brand_wrap.b1 {
    top: 0vw;
    right: 5.8524173028vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st2 .group .brand_wrap.b1 {
    top: 0vw;
    right: 2.0833333333vw;
    left: auto;
  }
}
#main_area section#tre4 .st2 .group .brand_wrap.b1 .brand.clip_left::after {
  background-image: url("../assets/images/tre4_st2_b1.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st2 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 4.6335877863vw;
    height: 4.6335877863vw;
    left: 3.8167938931vw;
    bottom: -5.5979643766vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st2 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 1.2645833333vw;
    height: 1.2645833333vw;
    left: 1.7361111111vw;
    bottom: -1.5277777778vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st2 .group .brand_wrap.b2 {
    bottom: 44.0203562341vw;
    left: 10.6870229008vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st2 .group .brand_wrap.b2 {
    bottom: 13.2638888889vw;
    left: 5.4861111111vw;
  }
}
#main_area section#tre4 .st2 .group .brand_wrap.b2 .brand.clip_top::after {
  background-image: url("../assets/images/tre4_st2_b2.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st2 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 11.0305343511vw;
    height: 3.5267175573vw;
    left: 6.3613231552vw;
    top: -4.5801526718vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st2 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 3.0104166667vw;
    height: 0.9625vw;
    left: 2.0138888889vw;
    top: -1.4583333333vw;
  }
}
#main_area section#tre4 .st3 .group .brand_wrap .brand {
  position: relative;
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st3 .group .brand_wrap .brand {
    width: 25.4452926209vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st3 .group .brand_wrap .brand {
    width: 10.4166666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st3 .group .brand_wrap.b1 {
    top: 11.4503816794vw;
    right: -7.6335877863vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st3 .group .brand_wrap.b1 {
    top: 3.4722222222vw;
    right: -2.7777777778vw;
    left: auto;
  }
}
#main_area section#tre4 .st3 .group .brand_wrap.b1 .brand.clip_left::after {
  background-image: url("../assets/images/tre4_st3_b1.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st3 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 7.7404580153vw;
    height: 3.5063613232vw;
    left: -4.5801526718vw;
    bottom: -4.834605598vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st3 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 2.1125vw;
    height: 0.9569444444vw;
    left: -1.1805555556vw;
    bottom: -1.3888888889vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st3 .group .brand_wrap.b2 {
    bottom: 57.2519083969vw;
    left: 13.7404580153vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st3 .group .brand_wrap.b2 {
    bottom: 21.25vw;
    left: 6.5972222222vw;
  }
}
#main_area section#tre4 .st3 .group .brand_wrap.b2 .brand.clip_top::after {
  background-image: url("../assets/images/tre4_st3_b2.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre4 .st3 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 3.7659033079vw;
    height: 4.9847328244vw;
    left: 3.5623409669vw;
    top: -5.8524173028vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre4 .st3 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 1.0277777778vw;
    height: 1.3604166667vw;
    left: 0.9027777778vw;
    top: -1.5972222222vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group::before {
    padding-top: 358.2697201018vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group::before {
    padding-top: 77.5694444444vw;
  }
}
#main_area section#tre5 .st1.group h2 {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group h2 {
    padding-left: 0vw;
    top: 7.3791348601vw;
    right: 6.8702290076vw;
    text-align: right;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group h2 {
    top: 3.8194444444vw;
    right: 1.875vw;
    left: auto;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group h2 span {
    justify-content: end;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group h2 span {
    justify-content: end;
  }
}
#main_area section#tre5 .st1.group .tre_comment {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group .tre_comment {
    width: 33.8422391858vw;
    padding-left: 0vw;
    top: 35.6234096692vw;
    right: 4.834605598vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group .tre_comment {
    width: 12.9166666667vw;
    padding-top: 4.7222222222vw;
    top: 14.3055555556vw;
    left: 69.1666666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group .tre_comment::after {
    top: 4.5801526718vw;
    right: 3.0534351145vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group .tre_comment::after {
    top: 2.0833333333vw;
    right: 0.8333333333vw;
    left: auto;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group .model_comment {
    width: 40.203562341vw;
    top: 134.6055979644vw;
    left: 7.6335877863vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group .model_comment {
    width: 15.3472222222vw;
    top: 10.8333333333vw;
    left: 19.4444444444vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group .model_comment h3::after {
    left: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group .model_comment h3::after {
    width: 21.5277777778vw;
    height: 0.0694444444vw;
    bottom: 0vw;
    right: 0;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group .model_comment p {
    width: 40.203562341vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group .model_comment p {
    width: 15.3472222222vw;
  }
}
#main_area section#tre5 .st1.group .swiper_fade_area {
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group .swiper_fade_area {
    width: 85.4961832061vw;
    top: 0vw;
    left: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group .swiper_fade_area {
    width: 33.7666666667vw;
    top: 0vw;
    right: 4.9305555556vw;
    left: auto;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group .img_cut {
    width: 48.8549618321vw;
    top: 102.2900763359vw;
    left: 52.9262086514vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group .img_cut {
    width: 17.4326388889vw;
    top: 0vw;
    left: 2.4305555556vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group .img_other1 {
    width: 45.8015267176vw;
    top: 194.6564885496vw;
    left: 0vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group .img_other1 {
    width: 17.6388888889vw;
    top: 32.3611111111vw;
    left: 21.4583333333vw;
    right: auto;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group .img_other2 {
    width: 61.3231552163vw;
    top: 219.3384223919vw;
    left: 25.4452926209vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group .img_other2 {
    width: 27.8076388889vw;
    top: 47.5vw;
    left: 5.9722222222vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group .icon_detail {
    width: 7.3791348601vw;
    top: 193.893129771vw;
    left: 55.2162849873vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group .icon_detail {
    width: 2.3013888889vw;
    top: 38.5416666667vw;
    left: 3.6805555556vw;
  }
}
#main_area section#tre5 .st1.group .credit {
  margin: 0;
  position: absolute;
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st1.group .credit {
    top: 280.4071246819vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group .credit {
    width: 32.2222222222vw;
    top: 50.5555555556vw;
    right: 4.9652777778vw;
    left: auto;
    transform: none;
  }
}
#main_area section#tre5 .st1.group .credit ul {
  flex-direction: column;
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st1.group .credit ul {
    align-items: end;
  }
}
#main_area section#tre5 .st2 .group .brand_wrap .brand {
  position: relative;
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st2 .group .brand_wrap .brand {
    width: 25.4452926209vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st2 .group .brand_wrap .brand {
    width: 10.4166666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st2 .group .brand_wrap.b1 {
    top: 4.3256997455vw;
    right: 5.5979643766vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st2 .group .brand_wrap.b1 {
    top: 1.5972222222vw;
    right: 1.3888888889vw;
    left: auto;
  }
}
#main_area section#tre5 .st2 .group .brand_wrap.b1 .brand.clip_left::after {
  background-image: url("../assets/images/tre5_st2_b1.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st2 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 8.9058524173vw;
    height: 3.8167938931vw;
    left: -1.7811704835vw;
    bottom: -4.5801526718vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st2 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 2.4305555556vw;
    height: 1.0416666667vw;
    left: -0.2777777778vw;
    bottom: -1.3194444444vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st2 .group .brand_wrap.b2 {
    bottom: 13.2315521628vw;
    left: auto;
    right: 3.8167938931vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st2 .group .brand_wrap.b2 {
    bottom: 4.1666666667vw;
    left: auto;
    right: 0.5555555556vw;
  }
}
#main_area section#tre5 .st2 .group .brand_wrap.b2 .brand.clip_top::after {
  background-image: url("../assets/images/tre5_st2_b2.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st2 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 8.7557251908vw;
    height: 4.272264631vw;
    left: -5.3435114504vw;
    top: -5.3435114504vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st2 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 2.3895833333vw;
    height: 1.1659722222vw;
    left: -1.4583333333vw;
    top: -1.4583333333vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st3 .group .img_st img {
    width: 113%;
  }
}
#main_area section#tre5 .st3 .group .brand_wrap .brand {
  position: relative;
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st3 .group .brand_wrap .brand {
    width: 25.4452926209vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st3 .group .brand_wrap .brand {
    width: 10.4166666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st3 .group .brand_wrap.b1 {
    top: 3.5623409669vw;
    right: 0vw;
    left: auto;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st3 .group .brand_wrap.b1 {
    top: 1.3888888889vw;
    right: -2.2222222222vw;
    left: auto;
  }
}
#main_area section#tre5 .st3 .group .brand_wrap.b1 .brand.clip_left::after {
  background-image: url("../assets/images/tre5_st3_b1.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st3 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 7.989821883vw;
    height: 3.2569974555vw;
    left: -5.0890585242vw;
    bottom: -3.8167938931vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st3 .group .brand_wrap.b1 .brand.clip_left::after {
    width: 2.1805555556vw;
    height: 0.8888888889vw;
    left: -1.4583333333vw;
    bottom: -1.0416666667vw;
  }
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st3 .group .brand_wrap.b2 {
    bottom: 19.5928753181vw;
    left: 13.7404580153vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st3 .group .brand_wrap.b2 {
    bottom: 6.5277777778vw;
    left: 7.3611111111vw;
  }
}
#main_area section#tre5 .st3 .group .brand_wrap.b2 .brand.clip_top::after {
  background-image: url("../assets/images/tre5_st3_b2.svg");
}
@media screen and (max-width: 768px) {
  #main_area section#tre5 .st3 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 9.5165394402vw;
    height: 4.0203562341vw;
    left: 4.5801526718vw;
    top: -4.5801526718vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st3 .group .brand_wrap.b2 .brand.clip_top::after {
    width: 2.5972222222vw;
    height: 1.0972222222vw;
    left: 1.25vw;
    top: -1.25vw;
  }
}
@media screen and (min-width: 769px) {
  #main_area section#tre5 .st2 .group .img_st,
  #main_area section#tre5 .st3 .group .img_st {
    min-height: 42.5701388889vw;
  }
}
#main_area section#tre5 .other-items {
  padding-bottom: 0;
}

#staff {
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.742;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
@media screen and (max-width: 768px) {
  #staff {
    font-size: 3.0534351145vw;
    padding: 34.3511450382vw 0;
  }
}
@media screen and (min-width: 769px) {
  #staff {
    font-size: 0.9027777778vw;
    padding: 9.375vw 0;
  }
}

.icon_detail,
.img_cut {
  cursor: pointer;
}

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 1s ease;
}
.modal-container.is-open {
  visibility: visible;
  opacity: 1;
}

.modal-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fbfaf5;
  padding: 20px;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
}
.modal-content img {
  width: 100%;
  height: auto;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
}
@media screen and (max-width: 768px) {
  .modal-close {
    width: 5.0890585242vw;
    height: 5.0890585242vw;
    top: 12.7226463104vw;
    right: 10.1781170483vw;
  }
}
@media screen and (min-width: 769px) {
  .modal-close {
    width: 1.6666666667vw;
    height: 1.6666666667vw;
    top: 2.7777777778vw;
    right: 2.7777777778vw;
  }
}
.modal-close img {
  width: 100%;
  height: auto;
}

/* モーダル内のコンテンツスタイル */
.modal-style-content {
  display: flex;
}
@media screen and (max-width: 768px) {
  .modal-style-content {
    flex-direction: column;
    padding: 20.3562340967vw 0 11.4503816794vw;
    row-gap: 3.8167938931vw;
  }
}
@media screen and (min-width: 769px) {
  .modal-style-content {
    width: 62.4305555556vw;
    margin: 0 auto;
    -moz-column-gap: 4.9305555556vw;
         column-gap: 4.9305555556vw;
    align-items: end;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  }
}
.modal-style-content img {
  flex-shrink: 0;
  margin: 0 auto;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .modal-style-content img {
    max-width: 93.3002544529vw;
  }
}
@media screen and (min-width: 769px) {
  .modal-style-content img {
    max-width: 30.3298611111vw;
  }
}
.modal-style-content .modal-text h4 {
  font-weight: bold;
  margin-bottom: 1em;
}

.page_top {
  position: fixed;
  cursor: pointer;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
@media screen and (max-width: 768px) {
  .page_top {
    width: 10.941475827vw;
    bottom: 0vw;
    right: 0vw;
  }
}
@media screen and (min-width: 769px) {
  .page_top {
    width: 3.53046875vw;
    bottom: 0vw;
    right: 0vw;
  }
}
.page_top.is-active {
  opacity: 1;
  visibility: visible;
}

.typing_text {
  width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.typing_text.start-typing {
  width: 100%;
  animation: typing 2s steps(30), typingEffect 0.5s step-end infinite alternate;
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes typingEffect {
  50% {
    border-color: transparent;
  }
}
/*===========
  inview（その場で）
  ===========*/
.fadeIn_on {
  opacity: 0;
  transition: opacity 1s ease;
  transition-delay: var(--delay, 0s); /* ← JSで時間差を制御 */
}

.fadeIn_on.fadeIn {
  opacity: 1;
}

/*===========
  inview（左から）
  ===========*/
.fadeIn_left {
  opacity: 0;
  transform: translate(-15%, 0);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: var(--delay, 0s); /* ← これが重要！ */
}

.fadeIn_left.fadeIn {
  transform: translate(0, 0);
  opacity: 1;
}

/*===========
  inview（右から）
  ===========*/
.fadeIn_right {
  opacity: 0;
  transform: translate(15%, 0);
  transition: opacity 1s ease, transform 1s ease;
  transition-delay: var(--delay, 0s); /* ← これが重要！ */
}

.fadeIn_right.fadeIn {
  transform: translate(0, 0);
  opacity: 1;
}

/*===========
  inview（下から）
  ===========*/
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 3%);
  transition: 1s;
}

.fadeIn_up.fadeIn {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_up.delay15.fadeIn {
  transition-delay: 1.5s;
}

/*===========
  inview（上から）
  ===========*/
.fadeIn_down {
  opacity: 0;
  transform: translate(0, -20%);
  transition: 2s;
}

.fadeIn_down.fadeIn {
  transform: translate(0, 0);
  opacity: 1;
}

/*===========
  左から
  ===========*/
/* 最初は clip-path で完全に見えない */
.clip_left img,
.clip_left::after,
.clip_container_left {
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

/* スクロールで表示されたらアニメーション開始 */
.clip_left.start img,
.clip_left.start::after,
.clip_container_left.start {
  animation: anime_left_to_right 1s ease forwards;
}

/* 左から右へ */
@keyframes anime_left_to_right {
  0% {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
/*===========
  コンテナ自体をクリップ（左から）
  ===========*/
/* 最初は clip-path で完全に見えない */
/* スクロールで表示されたらアニメーション開始 */
/*===========
  右から
  ===========*/
.clip_right img,
.clip_right::after,
.clip_container_right {
  clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}

.clip_right.start img,
.clip_right.start::after,
.clip_container_right.start {
  animation: anime_right_to_left 1s ease forwards;
}

/* 右から左へ */
@keyframes anime_right_to_left {
  0% {
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
/*===========
  コンテナ自体をクリップ（左から）
  ===========*/
/* 最初は clip-path で完全に見えない */
/* スクロールで表示されたらアニメーション開始 */
/*===========
  上から
  ===========*/
.clip_top img,
.clip_top::after {
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
}

.clip_top.start img,
.clip_top.start::after {
  animation: anime_top_to_bottom 1s ease forwards;
}

@keyframes anime_top_to_bottom {
  0% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
/*===========
  下から
  ===========*/
.clip_bottom img,
.clip_bottom::after {
  clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}

.clip_bottom.start img,
.clip_bottom.start::after {
  animation: anime_bottom_to_top 1s ease forwards;
}

@keyframes anime_bottom_to_top {
  0% {
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}
@keyframes zoomIn {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes zoomOut {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.zoom {
  overflow: hidden;
}
.zoom .swiper_fade_area {
  overflow: hidden;
}/*# sourceMappingURL=style.css.map */