@charset "UTF-8";
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* ベースカラー
*--------------------------------------*/
/*--------------------------------------*
* フォント
*--------------------------------------*/
/*--------------------------------------*
* ブレイクポイント
*--------------------------------------*/
/*--------------------------------------*
* vw変換(SP用)
*--------------------------------------*/
/*--------------------------------------*
* vw変換(PC用)
*--------------------------------------*/
/*--------------------------------------*
* デフォルトスタイル
*--------------------------------------*/
html,
body {
  width: 100%;
  font-size: 16px;
  margin: 0 auto;
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #1d5a69;
  contain: paint;
}

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

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

@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.8s cubic-bezier(0.11, 0, 0.5, 0);
  color: #000;
}
@media screen and (min-width: 769px) {
  a:hover {
    opacity: 0.6;
    transition: all 0.8s cubic-bezier(0.11, 0, 0.5, 0);
  }
}
a[href=""] {
  pointer-events: none;
}

/*--------------------------------------*
* ローディング
*--------------------------------------*/
#loading-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 999;
}

/*--------------------------------------*
* layout
*--------------------------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* フッター
*--------------------------------------*/
footer .container {
  width: 87.5vw;
  margin-inline: auto;
}
footer h1 {
  font-size: 1.015625vw;
  letter-spacing: 0.2em;
}
footer .title_logo {
  width: 23.828125vw;
  margin: 1.328125vw 0 2.34375vw;
}
footer .staff_credit {
  font-size: 0.9375vw;
  line-height: 1.796875vw;
  font-weight: 300;
}
footer .link_wrap {
  display: flex;
  justify-content: right;
  font-size: 1.25vw;
  gap: 3.125vw;
  margin: 0.3125vw 0 1.953125vw;
}
footer .link_wrap a {
  color: #1d5a69;
}
footer .copy {
  border-top: 2px solid #1d5a69;
  padding: 1.5625vw 0;
  text-align: center;
  font-size: 0.859375vw;
  letter-spacing: 0.2em;
}

@media screen and (max-width: 768px) {
  footer .container {
    width: 86.6666666667vw;
  }
  footer h1 {
    font-size: 3.2vw;
  }
  footer .title_logo {
    width: 83.4666666667vw;
    margin: 4.8vw 0 8vw;
  }
  footer .staff_credit {
    font-size: 3.0666666667vw;
    line-height: 5.6vw;
  }
  footer .link_wrap {
    justify-content: center;
    font-size: 4vw;
    gap: 12vw;
    margin: 33.8666666667vw 0 10.6666666667vw;
  }
  footer .copy {
    padding: 4vw 0;
    font-size: 2.6666666667vw;
  }
}
/*--------------------------------------*
* object
*--------------------------------------*/
/*-------------------
* component
-------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* コンテンツ幅
*--------------------------------------*/
/*-------------------
* project
-------------------*/
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* FV
*--------------------------------------*/
.fv {
  position: relative;
}
.fv__header {
  position: absolute;
  top: 36px;
  font-size: 14px;
  width: 100%;
}
.fv__header-ul {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 0 24px;
}
.fv__header-ol {
  display: grid;
  grid-auto-flow: column;
  column-gap: 40px;
  justify-self: end;
}
.fv__header-li a {
  color: #1d5a69;
}
.fv__top {
  padding: 20px 0;
}
.fv__top img {
  object-fit: cover;
  height: 100%;
  object-position: top;
}
.fv__bottom-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 0 30px;
  align-items: flex-end;
}
.fv .left {
  width: 12.5vw;
}
.fv .right {
  width: 40.625vw;
  margin: 0 0 0 auto;
}
.fv .right .sub {
  width: 24.6875vw;
  margin-bottom: 1.5625vw;
}
.fv .right .sub,
.fv .right .main_title {
  overflow: hidden;
}
.fv .brand_top {
  font-size: 16px;
}
.fv .line {
  width: 100%;
  height: 2px;
  background-color: #1d5a69;
  position: relative;
}
.fv .line span {
  position: absolute;
  height: 3px;
  width: 50%;
  background-color: #fff;
  top: 0;
}
.fv .line span:nth-child(1) {
  left: 0;
}
.fv .line span:nth-child(2) {
  right: 0;
}
.fv__text p {
  padding-top: 18px;
  font-size: 12px;
  line-height: 2;
  letter-spacing: 0.2em;
}

@media screen and (max-width: 768px) {
  .fv__top {
    position: relative;
    padding: 74px 0 0 0;
    z-index: -1;
  }
  .fv__header {
    top: 18px;
  }
  .fv__header-ul {
    padding: 0 14px;
    align-items: flex-start;
  }
  .fv__header-ol {
    grid-auto-flow: row;
    text-align: right;
    row-gap: 10px;
  }
  .fv__bottom-inner {
    display: block;
    padding: 0 18px;
  }
  .fv .th_logo {
    position: absolute;
    bottom: 17px;
    left: 10px;
    width: 30.1333333333vw;
  }
  .fv .right {
    width: 100%;
  }
  .fv .right .sub {
    width: 64vw;
    margin-bottom: 2.6666666667vw;
  }
  .fv .title_logo {
    padding: 18px 0 25px;
  }
  .fv .brand_top {
    font-size: 14px;
  }
  .fv__text p {
    padding: 0;
    font-size: 11px;
    line-height: 2;
  }
}
@media screen and (min-width: 769px) {
  .fv {
    height: 100vh;
    overflow: hidden;
  }
  .fv__header {
    z-index: 2;
  }
  .fv__top {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .fv__bottom {
    width: 100%;
    position: absolute;
    bottom: 45px;
    z-index: 2;
  }
}
/*--------------------------------------*
* foundation
*--------------------------------------*/
/*--------------------------------------*
* セクション共通
*--------------------------------------*/
.slider_slow .swiper-wrapper,
.text_slider .swiper-wrapper {
  transition-timing-function: linear;
}

#archive {
  position: sticky;
  top: 0;
}
#archive .container {
  width: 82.8125vw;
  margin: 20.3125vw auto;
  position: relative;
}
#archive .inner {
  padding: 8.59375vw 0 5.078125vw;
  position: relative;
}
#archive .line {
  height: 1px;
  width: 100%;
  background-color: #000;
  position: absolute;
  display: block;
  translate: -50% 0;
  left: 50%;
}
#archive .line.top {
  top: 0;
  transform-origin: center;
}
#archive .line.bottom {
  bottom: 0;
  transform-origin: center;
}
#archive .aniversary_logo {
  background-color: #fff;
  padding: 0 2.34375vw;
  width: 12.5vw;
  position: absolute;
  translate: -50% 0;
  left: 50%;
  top: -4.453125vw;
}
#archive .grid {
  width: 73.828125vw;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5.078125vw;
}

@media screen and (max-width: 768px) {
  .number {
    position: sticky;
    padding-top: 30px;
    top: 0;
    z-index: 10;
    margin: 16vw auto 0;
    height: 17px;
    overflow: hidden;
  }
  .number ul {
    width: 29px;
    height: 17px;
    display: grid;
    gap: 10px;
    position: relative;
    margin-inline: auto;
    overflow: hidden;
  }
  .number li {
    display: flex;
    width: 29px;
    margin-inline: auto;
    position: absolute;
    left: 0;
  }
  .number li .left,
  .number li .right {
    position: relative;
    top: 17px;
  }
  .number li .left {
    transition: all 0.4s;
  }
  .number li .right {
    transition: all 0.5s;
  }
  .number li.center .left {
    top: 0;
  }
  .number li.center .right {
    top: 0;
  }
  .number li.top .left {
    top: -17px;
  }
  .number li.top .right {
    top: -17px;
  }
  .line_anim1 {
    position: relative;
  }
  .line_anim1:before, .line_anim1:after {
    content: "";
    background-color: #1d5a69;
    position: absolute;
    width: 0;
    height: 2px;
    z-index: 9;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .line_anim1:before {
    left: 0;
  }
  .line_anim1:after {
    right: 0;
  }
  .line_anim1.line_active:before, .line_anim1.line_active:after {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .line_anim1 figure {
    overflow: hidden;
  }
  .line_anim2 {
    position: relative;
  }
  .line_anim2:before, .line_anim2:after {
    content: "";
    background-color: #1d5a69;
    position: absolute;
    width: 0%;
    height: 2px;
    z-index: 9;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .line_anim2:before {
    left: 0;
  }
  .line_anim2:after {
    right: 0;
  }
  .line_anim2 .line:before {
    content: "";
    background-color: #1d5a69;
    position: absolute;
    width: 2px;
    height: 0%;
    left: 0;
    bottom: 0;
    z-index: 9;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .line_anim2.line_active:before, .line_anim2.line_active:after {
    width: 100%;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .line_anim2.line_active .line:before {
    height: 100%;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .line_anim3,
  .line_anim4 {
    position: relative;
  }
  .line_anim3:before, .line_anim3:after,
  .line_anim4:before,
  .line_anim4:after {
    content: "";
    background-color: #1d5a69;
    position: absolute;
    width: 0%;
    height: 2px;
    z-index: 9;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .line_anim3 .line:before, .line_anim3 .line:after,
  .line_anim4 .line:before,
  .line_anim4 .line:after {
    content: "";
    background-color: #1d5a69;
    position: absolute;
    width: 2px;
    height: 0%;
    z-index: 9;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .line_anim3 .line:before,
  .line_anim4 .line:before {
    left: 0;
    top: 0;
  }
  .line_anim3 .line:after,
  .line_anim4 .line:after {
    right: 0;
    top: 0;
  }
  .line_anim3.line_active:before, .line_anim3.line_active:after,
  .line_anim4.line_active:before,
  .line_anim4.line_active:after {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
  }
  .line_anim3.line_active .line:before, .line_anim3.line_active .line:after,
  .line_anim4.line_active .line:before,
  .line_anim4.line_active .line:after {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
  }
  #sec1 .container {
    position: relative;
    padding: 12vw 0 18.6666666667vw;
  }
  #sec1 .grid {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    gap: 19.7333333333vw;
  }
  #sec1 .grid > li:nth-child(1) {
    width: 61.8666666667vw;
    margin: 0 8vw 0 auto;
  }
  #sec1 .title_wrap {
    margin: -5px auto 0;
    position: relative;
    z-index: -1;
  }
  #sec1 .title_wrap .first {
    width: 82.6666666667vw;
  }
  #sec1 .title_wrap .second {
    width: 39.4666666667vw;
    margin: 4.8vw 0 0 53.8666666667vw;
  }
  .sec1_liner {
    overflow: hidden;
    width: 100vw;
    height: 92.2666666667vw;
    margin-bottom: 18.6666666667vw;
  }
  .sec1_liner img {
    width: 130vw;
    margin: 0 calc(50% - 70vw);
    object-fit: cover;
    height: 100%;
    object-position: left;
  }
  #sec2 .container {
    position: relative;
    padding: 40vw 0 24vw;
  }
  #sec2 .title_wrap {
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    z-index: -1;
    gap: 4.2666666667vw;
    top: 136vw;
    left: 8.2666666667vw;
  }
  #sec2 .title_wrap .first,
  #sec2 .title_wrap .second {
    width: 14.6666666667vw;
  }
  #sec2 .title_wrap .second {
    margin-top: 37.6vw;
  }
  #sec2 .grid_first {
    display: flex;
  }
  #sec2 .grid_first > li:nth-child(2) {
    margin: 20vw 0 0 -3.4666666667vw;
  }
  #sec2 .grid_second {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    margin-top: 66.9333333333vw;
  }
  #sec2 .grid_second > li:nth-child(1) {
    width: 91.4666666667vw;
    margin: -4vw auto 0 0;
  }
  #sec2 .grid_second > li:nth-child(2) {
    width: 80vw;
    margin: 0 0 0 auto;
    position: relative;
  }
  #sec3 .container {
    padding: 24vw 0 26.6666666667vw;
    position: relative;
  }
  #sec3 .title_wrap {
    position: absolute;
    z-index: -1;
    top: 173.3333333333vw;
    width: 100%;
  }
  #sec3 figure {
    overflow: hidden;
  }
  #sec3 .grid {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    gap: 27.2vw;
  }
  #sec3 .grid > li:nth-child(1) {
    width: 64.2666666667vw;
    margin: 0 auto;
  }
  #sec3 .grid > li:nth-child(2) {
    width: 94.6666666667vw;
    margin: 0 auto;
  }
  #sec4 .bg {
    position: relative;
    padding: 32.5333333333vw 0 24vw;
    background: linear-gradient(180deg, #e4ddd3 0%, #e4ddd3 90%, #fff 90%, #fff 100%);
  }
  #sec4 .title_wrap:not(.double) {
    position: absolute;
    top: 208vw;
    left: 4.8vw;
  }
  #sec4 .title_wrap .inner {
    overflow: hidden;
  }
  #sec4 .grid > li:nth-child(1) {
    width: 92vw;
    position: relative;
  }
  #sec4 .grid > li:nth-child(2) {
    width: 80.8vw;
    margin: -4vw 0 0 auto;
  }
  #sec4 .single {
    width: 94.6666666667vw;
    margin: 31.4666666667vw auto 0;
  }
  #sec4 .title_wrap.double {
    position: absolute;
    translate: -50% 0;
    left: 50%;
    bottom: 0;
  }
  #sec4 .title_wrap.double .first {
    width: 62.1333333333vw;
    margin: 0 auto 4vw;
  }
  #sec4 .title_wrap.double .second {
    width: 89.3333333333vw;
  }
  #sec5 .container {
    position: relative;
    padding: 48vw 0 26.6666666667vw;
  }
  #sec5 .single {
    width: 92.5333333333vw;
  }
  #sec5 .title_wrap {
    position: absolute;
    z-index: -1;
    width: 79.4666666667vw;
    top: 171.7333333333vw;
    right: 0;
  }
  #sec5 .small {
    width: 48vw;
    margin: 31.2vw auto 0 5.3333333333vw;
    position: relative;
    z-index: 3;
  }
  #sec5 .slider_slow {
    margin-top: -2.6666666667vw;
  }
  #sec6 .container {
    padding: 29.3333333333vw 0 26.6666666667vw;
  }
  #sec6 .title_wrap {
    width: 92.2666666667vw;
    margin: 12.2666666667vw auto 2.1333333333vw;
    display: grid;
    gap: 4vw;
  }
  #sec6 .title_wrap > li:nth-child(1) {
    width: 60.2666666667vw;
    margin: 0 0 0 auto;
  }
  #sec6 .title_wrap > li:nth-child(2) {
    width: 56.2666666667vw;
    margin: 0 auto 0 0;
  }
  #sec6 .title_wrap > li:nth-child(3) {
    width: 39.4666666667vw;
    margin: 0 10.6666666667vw 0 auto;
  }
  #sec6 .grid {
    width: 88vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #sec7 .bg {
    position: relative;
    padding: 32.5333333333vw 0 34.1333333333vw;
    background: #e4ddd3;
    overflow: hidden;
  }
  #sec7 .title_wrap {
    display: flex;
    gap: 1.3333333333vw;
    align-items: flex-end;
    position: absolute;
    bottom: 20.2666666667vw;
    left: -0.8vw;
    overflow: hidden;
  }
  #sec7 .title_wrap li:nth-child(1) {
    width: 14.1333333333vw;
  }
  #sec7 .title_wrap li:nth-child(2) {
    width: 55.2vw;
  }
  #sec7 .single {
    width: 96vw;
  }
  #sec7 .mono {
    width: 60vw;
    margin: 4vw 0 0 auto;
  }
  #sec7 .bottom {
    width: 49.6vw;
    margin: -3.4666666667vw auto 0 11.2vw;
    position: relative;
  }
  #archive .container {
    width: 89.6vw;
    margin: 53.3333333333vw auto 32vw;
  }
  #archive .inner {
    padding: 17.3333333333vw 0 10.6666666667vw;
  }
  #archive .aniversary_logo {
    padding: 0 5.3333333333vw;
    width: 30.6666666667vw;
    top: -14.1333333333vw;
  }
  #archive .grid {
    width: 78.6666666667vw;
    grid-template-columns: 1fr;
    gap: 6.6666666667vw;
  }
}
@media screen and (min-width: 769px) {
  .number {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    align-items: center;
    margin: 0 0 0 auto;
    justify-content: right;
    pointer-events: none;
    z-index: 10;
  }
  .number ul {
    right: 1.71875vw;
    width: 1.5625vw;
    height: 1.09375vw;
    display: grid;
    place-content: center;
    gap: 3px;
    position: relative;
    margin-inline: auto;
    overflow: hidden;
    transform-origin: center;
    rotate: 90deg;
  }
  .number li {
    display: flex;
    width: 1.5625vw;
    height: 1.09375vw;
    margin-inline: auto;
    position: absolute;
    left: 0;
  }
  .number li:nth-child(1) {
    width: 1.40625vw;
  }
  .number li .left,
  .number li .right {
    position: relative;
    top: 1.09375vw;
  }
  .number li .left {
    transition: all 0.4s;
  }
  .number li .right {
    transition: all 0.5s;
  }
  .number li.center .left {
    top: 0;
  }
  .number li.center .right {
    top: 0;
  }
  .number li.top .left {
    top: -1.09375vw;
  }
  .number li.top .right {
    top: -1.09375vw;
  }
  .line_anim1,
  .line_anim2,
  .line_anim3,
  .line_anim4 {
    position: relative;
  }
  .line_anim1:before, .line_anim1:after,
  .line_anim2:before,
  .line_anim2:after,
  .line_anim3:before,
  .line_anim3:after,
  .line_anim4:before,
  .line_anim4:after {
    content: "";
    background-color: #1d5a69;
    position: absolute;
    width: 0%;
    height: 2px;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 9;
  }
  .line_anim1:before,
  .line_anim2:before,
  .line_anim3:before,
  .line_anim4:before {
    left: 0;
  }
  .line_anim1:after,
  .line_anim2:after,
  .line_anim3:after,
  .line_anim4:after {
    right: 0;
  }
  .line_anim1 .line:before, .line_anim1 .line:after,
  .line_anim2 .line:before,
  .line_anim2 .line:after,
  .line_anim3 .line:before,
  .line_anim3 .line:after,
  .line_anim4 .line:before,
  .line_anim4 .line:after {
    content: "";
    background-color: #1d5a69;
    position: absolute;
    width: 2px;
    height: 0%;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 9;
  }
  .line_anim1 .line:before,
  .line_anim2 .line:before,
  .line_anim3 .line:before,
  .line_anim4 .line:before {
    bottom: 0;
  }
  .line_anim1 .line:after,
  .line_anim2 .line:after,
  .line_anim3 .line:after,
  .line_anim4 .line:after {
    top: 0;
    right: 0;
  }
  .line_anim1.line_active:before, .line_anim1.line_active:after,
  .line_anim2.line_active:before,
  .line_anim2.line_active:after,
  .line_anim3.line_active:before,
  .line_anim3.line_active:after,
  .line_anim4.line_active:before,
  .line_anim4.line_active:after {
    width: 100%;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .line_anim1.line_active .line:before, .line_anim1.line_active .line:after,
  .line_anim2.line_active .line:before,
  .line_anim2.line_active .line:after,
  .line_anim3.line_active .line:before,
  .line_anim3.line_active .line:after,
  .line_anim4.line_active .line:before,
  .line_anim4.line_active .line:after {
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    height: 100%;
  }
  .line_anim1 figure,
  .line_anim2 figure,
  .line_anim3 figure,
  .line_anim4 figure {
    overflow: hidden;
  }
  #sec1 {
    margin-top: -100vh;
  }
  #sec1 .container {
    padding: 10.9375vw 0;
    position: relative;
  }
  #sec1 .grid {
    display: grid;
    gap: 7.34375vw;
    grid-template-columns: 18.125vw 37.734375vw;
    place-content: center;
    align-items: center;
  }
  #sec1 .title_wrap {
    position: absolute;
    bottom: 7.8125vw;
    left: 7.03125vw;
  }
  #sec1 .title_wrap .first {
    width: 27.1875vw;
  }
  #sec1 .title_wrap .second {
    width: 13.4375vw;
    margin: 1.5625vw 0 0 17.96875vw;
  }
  .sec1_liner {
    overflow: hidden;
    height: 46.875vw;
  }
  #sec2 .container {
    position: relative;
    padding: 12.5vw 0 6.25vw;
  }
  #sec2 .title_wrap {
    position: absolute;
    display: flex;
    flex-direction: row-reverse;
    gap: 1.5625vw;
    top: 13.125vw;
    right: 26.640625vw;
  }
  #sec2 .title_wrap .first,
  #sec2 .title_wrap .second {
    width: 4.140625vw;
  }
  #sec2 .title_wrap .second {
    margin-top: 12.34375vw;
  }
  #sec2 .grid_first {
    margin-left: 10vw;
    display: grid;
    grid-template-columns: 20vw 20vw;
  }
  #sec2 .grid_first > li:nth-child(2) {
    margin: 7.734375vw 0 0 max(-2.34375vw, -30px);
  }
  #sec2 .grid_second {
    margin-top: 12.5vw;
    align-items: flex-end;
    display: grid;
    grid-template-columns: 48.4375vw 46.5625vw;
  }
  #sec2 .grid_second > li:nth-child(2) {
    margin: 0 0 7.5vw max(-2.34375vw, -30px);
  }
  #sec3 .container {
    padding: 6.25vw 0 9.375vw;
  }
  #sec3 .title_wrap {
    width: 72.5vw;
    margin: 0 0 0 8.59375vw;
  }
  #sec3 .title_wrap .inner {
    overflow: hidden;
  }
  #sec3 .grid {
    display: grid;
    gap: 5.078125vw;
    grid-template-columns: 32.8125vw 45vw;
    margin: max(-0.546875vw, -7px) 0 0 10.15625vw;
  }
  #sec4 .bg {
    position: relative;
    padding: 11.40625vw 0 7.8125vw 0;
    background: linear-gradient(180deg, #e4ddd3 0%, #e4ddd3 83%, #fff 83%, #fff 100%);
  }
  #sec4 .title_wrap:nth-child(1) {
    width: 4.8046875vw;
    position: absolute;
    top: 26.875vw;
    right: 39.84375vw;
    z-index: 2;
  }
  #sec4 .title_wrap .inner {
    overflow: hidden;
  }
  #sec4 .grid > li:nth-child(1) {
    width: 52.734375vw;
    position: relative;
  }
  #sec4 .grid > li:nth-child(2) {
    width: 49.453125vw;
    margin: -24.21875vw 0 0 auto;
  }
  #sec4 .title_wrap.double {
    margin: 7.421875vw auto 0;
    width: fit-content;
  }
  #sec4 .title_wrap.double .first {
    width: 28.046875vw;
  }
  #sec4 .title_wrap.double .second {
    width: 40.390625vw;
    margin: 1.5625vw 0 0 19.921875vw;
  }
  #sec4 .single {
    width: 51.09375vw;
    margin: -0.9375vw auto 0;
  }
  #sec5 .container {
    padding: 7.8125vw 0;
    position: relative;
  }
  #sec5 .single {
    width: 47.109375vw;
    margin: 0 auto 0 14.609375vw;
  }
  #sec5 .title_wrap {
    position: absolute;
    width: 4.140625vw;
    top: 23.4375vw;
    right: 29.0625vw;
  }
  #sec5 .small {
    width: 23.4375vw;
    margin: -15.625vw 9.765625vw 0 auto;
    position: relative;
    z-index: 3;
  }
  #sec5 .swiper {
    margin-top: -2.34375vw;
  }
  #sec6 .container {
    padding: 7.8125vw 0 12.5vw 0;
    position: relative;
  }
  #sec6 .single {
    width: 43.984375vw;
    margin: 0 6.796875vw 0 auto;
  }
  #sec6 .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 41.40625vw;
    margin: -3.125vw auto 0 0;
  }
  #sec6 .title_wrap {
    display: grid;
    gap: 1.5625vw;
    position: absolute;
    top: 37.734375vw;
    left: 8.984375vw;
  }
  #sec6 .title_wrap li:nth-child(1) {
    width: 24.140625vw;
  }
  #sec6 .title_wrap li:nth-child(2) {
    width: 22.578125vw;
    margin: 0 0 0 10.390625vw;
  }
  #sec6 .title_wrap li:nth-child(3) {
    width: 15.9375vw;
    margin: 0 0 0 5.46875vw;
  }
  #sec7 .bg {
    position: relative;
    padding: 7.8125vw 0 0;
    background: linear-gradient(180deg, #e4ddd3 0%, #e4ddd3 85%, #fff 85%, #fff 100%);
  }
  #sec7 .title_wrap {
    display: flex;
    gap: 1.171875vw;
    align-items: flex-end;
    position: absolute;
    top: 11.640625vw;
    right: 22.96875vw;
    overflow: hidden;
  }
  #sec7 .title_wrap > li:nth-child(1) {
    width: 4.140625vw;
  }
  #sec7 .title_wrap > li:nth-child(2) {
    width: 16.171875vw;
  }
  #sec7 .single {
    width: 44.53125vw;
    margin: 0 auto 0 8.359375vw;
  }
  #sec7 .mono {
    width: 31.953125vw;
    margin: -22.265625vw 13.90625vw 0 auto;
  }
  #sec7 .bottom {
    width: 29.53125vw;
    margin: -19.140625vw 43.828125vw 0 auto;
  }
}
/*--------------------------------------*
* foundation
*--------------------------------------*/
.credit_card {
  position: relative;
  font-size: 0.9375vw;
  letter-spacing: 0.02em;
  cursor: pointer;
}
.credit_card .credit {
  position: absolute;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 100%;
  inset: 0;
}
.credit_card .plus {
  transition: all 0.5s cubic-bezier(0.11, 0, 0.5, 0);
  width: 3.125vw;
  height: 3.125vw;
  position: absolute;
  bottom: 1.5625vw;
  right: 1.5625vw;
  z-index: 10;
}
.credit_card .plus:before, .credit_card .plus:after {
  content: "";
  translate: -50% -50%;
  left: 50%;
  top: 50%;
  background-color: #fff;
  position: absolute;
}
.credit_card .plus:before {
  width: 3.125vw;
  height: 1px;
  transition: all 0.6s cubic-bezier(0.11, 0, 0.5, 0);
}
.credit_card .plus:after {
  width: 1px;
  height: 3.125vw;
}
.credit_card.active > .plus {
  rotate: 90deg;
  transition: all 0.6s cubic-bezier(0.11, 0, 0.5, 0);
}
.credit_card.active > .plus:before {
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.11, 0, 0.5, 0);
}
.credit_card .credit ol {
  position: absolute;
  left: 1.796875vw;
  bottom: 2.96875vw;
}
.credit_card .credit li:not(li:last-child) {
  margin-bottom: 1.875vw;
}
.credit_card .credit li a {
  font-weight: 300;
  color: #fff;
}
.credit_card .credit li span {
  white-space: nowrap;
}
.credit_card .credit li:has(.nolink) .buy {
  display: none;
}
.credit_card .credit .buy {
  text-decoration: underline;
}

@media screen and (min-width: 769px) {
  .credit_card:hover .plus {
    opacity: 0.6;
  }
}
@media screen and (max-width: 768px) {
  .credit_card {
    font-size: 3.7333333333vw;
    letter-spacing: 0.02em;
  }
  .credit_card .plus {
    width: 8vw;
    height: 8vw;
    bottom: 4vw;
    right: 4vw;
    z-index: 10;
  }
  .credit_card .plus:before {
    width: 8vw;
  }
  .credit_card .plus:after {
    height: 8vw;
  }
  .credit_card .credit ol {
    bottom: 7.4666666667vw;
    left: 5.3333333333vw;
  }
  .credit_card .credit ol li:not(li:last-child) {
    margin-bottom: 8vw;
  }
}/*# sourceMappingURL=style.css.map */