@charset "UTF-8";
/*--------------------------------------*
 * foundation
 *--------------------------------------*/
/* mixin
--------------------------- */
/* font-style
--------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");

/* font-size
--------------------------- */
/* color
--------------------------- */
/*--------------------------------------*
 * foundation
 *--------------------------------------*/
img, video {
  width: 100%;
  height: auto;
}

@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "JostItalic";
  src: url("../fonts/Jost-LightItalic.ttf") format("truetype");
}

#footer {
  margin-top: 0;
  padding-top: 80px;
  background-color: #fff;
}

._fs_chat_icon {
  display: none;
}

.fs-body-custom .fs-l-main {
  width: 100% !important;
  margin: 0;
  background: #fff;
  position: relative;
  z-index: 0;
}

.fs-c-breadcrumb {
  position: relative;
  z-index: 1;
  background-color: #fff;
}

.fs-l-main {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0px;
}

.fs-l-pageMain {
  width: 100% !important;
  max-width: 100% !important;
}

.main {
  width: 100%;
  background: #f0f0f0;
  text-align: center;
  z-index: 10;
  font-size: 2.5vw;
  line-height: 1.8;
  letter-spacing: 0.05em;
  font-weight: 400;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif;
  color: #222222;
}

@media screen and (min-width: 780px) {
  .main {
    font-size: 20px;
  }
}

.main>* {
  width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 799px) {
  .main>* {
    width: 800px;
  }
}

.serif {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "Noto Serif JP", serif;
  font-weight: normal;
}

.lookbook-contents .bg {
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  top: 0;
  position: sticky;
  z-index: 1;
}

#top .lookbook-contents .bg {
  background: url(https://tu-hacci.co.jp/img/lookbook/202509/bg_kv.jpg) top center no-repeat;
  background-size: cover;
}

#section01 .lookbook-contents .bg {
  background: url(https://tu-hacci.co.jp/img/lookbook/202509/bg_sec01.jpg) top left no-repeat;
}

#section02 .lookbook-contents .bg {
  background: url(https://tu-hacci.co.jp/img/lookbook/202509/bg_sec02.jpg) top left no-repeat;
}

#section03 .lookbook-contents .bg {
  background: url(https://tu-hacci.co.jp/img/lookbook/202509/bg_sec03.jpg) top center no-repeat;
}

#section04 .lookbook-contents .bg {
  background: url(https://tu-hacci.co.jp/img/lookbook/202509/bg_sec04.jpg) top center no-repeat;
}

#section05 .lookbook-contents .bg {
  background: url(https://tu-hacci.co.jp/img/lookbook/202509/bg_sec05.jpg) top center no-repeat;
}

#section06 .lookbook-contents .bg {
  background: url(https://tu-hacci.co.jp/img/lookbook/202509/bg_sec06.jpg) top center no-repeat;
}

.lookbook-contents .bg.is-hidden {
  opacity: 0;
}

.lookbook-contents .contents {
  margin-top: -100vh;
  position: relative;
  z-index: 2;
}

.item_notes {
  font-size: 1.875vw;
  margin-top: 0 !important;
  letter-spacing: 0;
  font-feature-settings: "palt";
}

@media screen and (min-width: 800px) {
  .item_notes {
    font-size: 14px;
  }
}

.fade {
  opacity: 0;
}

.fade.is-show {
  -webkit-animation: fadeup 2.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  animation: fadeup 2.5s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  /*   animation: fadeIn 2.5s cubic-bezier(0.33, 1, 0.68, 1) forwards; */
  /*    animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards; */
}

.fade.is-show.duration {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.looping-container {
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin: 0 auto;
  text-align: center;
}

@media screen and (min-width: 799px) {
  .looping-container {
    width: 800px;
  }
}

.looping-image {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 120px;
}

.looping-container:not(.no-tick) .looping-image:nth-child(odd) {
  -webkit-animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear;
  animation: MoveLeft var(--tick-duration, 24s) var(--tick-delay, -12s) infinite linear;
}

.looping-container:not(.no-tick) .looping-image:nth-child(even) {
  -webkit-animation: MoveLeft2 var(--tick-duration, 24s) infinite linear;
  animation: MoveLeft2 var(--tick-duration, 24s) infinite linear;
}

/* アニメーション一覧 */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-filter: blur(5px);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-filter: blur(5px);
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@-webkit-keyframes fadeup {
  0% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-filter: blur(5px);
    filter: blur(5px);
    opacity: 0;
  }

  80% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeup {
  0% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-filter: blur(5px);
    filter: blur(5px);
    opacity: 0;
  }

  80% {
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes slideIn-lr {
  0% {
    -webkit-transform: translateX(-180px);
    transform: translateX(-180px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  40%,
  100% {
    opacity: 1;
  }
}

@keyframes slideIn-lr {
  0% {
    -webkit-transform: translateX(-180px);
    transform: translateX(-180px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  40%,
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes slideIn-rl {
  0% {
    -webkit-transform: translateX(180px);
    transform: translateX(180px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  40%,
  100% {
    opacity: 1;
  }
}

@keyframes slideIn-rl {
  0% {
    -webkit-transform: translateX(180px);
    transform: translateX(180px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  40%,
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes MoveLeft {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes MoveLeft {
  0% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@-webkit-keyframes MoveLeft2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

@keyframes MoveLeft2 {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

.swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

/*--------------------------------------*
 * content
 *--------------------------------------*/
/*--------------------------------------*
 * foundation
 *--------------------------------------*/
#top {
  color: #645c52;
}

#top .kv-ttl {
  width: 73.75vw;
  margin: 0 auto;
  margin-top: 5.625vw;
  margin-bottom: 12.5vw;
}

@media screen and (min-width: 799px) {
  #top .kv-ttl {
    width: 590px;
    margin-top: 45px;
    margin-bottom: 100px;
  }
}

#top .kv-img {
  width: 91.25vw;
  margin: 0 auto;
}

@media screen and (min-width: 799px) {
  #top .kv-img {
    width: 730px;
  }
}

#top .intro {
  margin-top: 15vw;
}

@media screen and (min-width: 799px) {
  #top .intro {
    margin-top: 200px;
  }
}

#top .intro-ttl {
  margin: 0 auto 8vw;
  font-size: 6.65vw;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.1em;
}

@media screen and (min-width: 799px) {
  #top .intro-ttl {
    margin: 0 auto 90px;
    font-size: 50px;
  }
}

#top .intro-art {
  display: block;
  width: 1px;
  height: 11.75vw;
  background-color: #5b6a6f;
  margin: 8.75vw auto 6.25vw;
}

@media screen and (min-width: 799px) {
  #top .intro-art {
    width: 1px;
    height: 94px;
    margin: 70px auto 50px;
  }
}

#top .intro-copy {
  font-size: 3.25vw;
  margin-bottom: 8.75vw;
}

@media screen and (min-width: 799px) {
  #top .intro-copy {
    font-size: 24px;
    margin-bottom: 70px;
  }
}

#top .intro-copy p+p {
  margin-top: 3.75vw;
}

@media screen and (min-width: 799px) {
  #top .intro-copy p+p {
    margin-top: 30px;
  }
}

#top .intro-video {
  width: 62.5vw;
  /* height: 82.5vw; */
  /* background-color: #ccc; */
  margin: 0 auto;
}

#top .menu-list {
  list-style-type: none;
  padding: 12.5vw 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 26.25vw);
  -ms-flex-pack: center;
  justify-content: center;
  gap: 5vw;
}

@media screen and (min-width: 799px) {
  #top .intro-video {
    width: 500px;
    /* height: 660px; */
  }

  #top .menu-list {
    padding: 120px 0;
    grid-template-columns: repeat(3, 210px);
    gap: 35px;
  }
}

#top .menu-list_item {
  position: relative;
}

#top .menu-list_item::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 1.25vw solid transparent;
  border-left: 1.25vw solid transparent;
  border-top: 1.75vw solid #fff;
  border-bottom: 0;
  position: absolute;
  bottom: 3vw;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (min-width: 799px) {
  #top .menu-list_item::after {
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 10px solid #fff;
    bottom: 25px;
  }
}

#top .menu-list_item .menu-ttl {
  font-size: 6.25vw;
  font-family: "the-seasons", sans-serif;
  position: absolute;
  opacity: 0.58;
  left: 0;
  z-index: 3;
  color: #434343;
  mix-blend-mode: multiply;
}

@media screen and (min-width: 799px) {
  #top .menu-list_item .menu-ttl {
    font-size: 50px;
  }
}

#top .menu-list_item .menu-link_wrap {
  display: grid;
  grid-template-rows: 1fr;
}

#top .menu-list_item .menu-txt {
  font-family: "kudryashev-d-contrast", sans-serif;
  font-weight: 400;
  font-style: normal;
  background-color: #645c52;
  height: 27.5vw;
  color: #fff;
  font-size: 3.5vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 18vw 0 0 0;
  line-height: 1.5;
  padding-top: 2vw;
}

@media screen and (min-width: 799px) {
  #top .menu-list_item .menu-txt {
    height: 220px;
    font-size: 28px;
    border-radius: 120px 0 0 0;
    padding-top: 5px;
  }
}

.swiper01 .swiper-slide,
.swiper02 .swiper-slide,
.swiper03 .swiper-slide,
.swiper04 .swiper-slide,
.swiper05 .swiper-slide,
.swiper06 .swiper-slide {
  -webkit-transition: 2s;
  transition: 2s;
  -webkit-transform: scale(0.85) translate(0, 0);
  transform: scale(0.85) translate(0, 0);
}

.swiper01 .swiper-slide.swiper-slide-active,
.swiper02 .swiper-slide.swiper-slide-active,
.swiper03 .swiper-slide.swiper-slide-active,
.swiper04 .swiper-slide.swiper-slide-active,
.swiper05 .swiper-slide.swiper-slide-active,
.swiper06 .swiper-slide.swiper-slide-active {
  -webkit-transform: scale(1) translate(0, 10vw);
  transform: scale(1) translate(0, 10vw);
}

@media screen and (min-width: 780px) {

  .swiper01 .swiper-slide.swiper-slide-active,
  .swiper02 .swiper-slide.swiper-slide-active,
  .swiper03 .swiper-slide.swiper-slide-active,
  .swiper04 .swiper-slide.swiper-slide-active,
  .swiper05 .swiper-slide.swiper-slide-active,
  .swiper06 .swiper-slide.swiper-slide-active {
    -webkit-transform: scale(1) translate(0, 12.5vw);
    transform: scale(1) translate(0, 12.5vw);
  }
}

@-webkit-keyframes animation_box {
  100% {
    -webkit-transform: scale(1) translate(0, 100px);
    transform: scale(1) translate(0, 100px);
  }
}

@keyframes animation_box {
  100% {
    -webkit-transform: scale(1) translate(0, 100px);
    transform: scale(1) translate(0, 100px);
  }
}

/*--------------------------------------*
 * foundation
 *--------------------------------------*/
#section01 .top {
  position: relative;
  overflow: hidden;
  z-index: 1;
  height: 162.875vw;
}

#section01 .top-img {
  position: absolute;
  width: 100%;
  height: 153.375vw;
  top: 5.625vw;
}

@media screen and (min-width: 799px) {
  #section01 .top {
    height: 1300px;
  }

  #section01 .top-img {
    width: 100%;
    height: 100%;
    top: 45px;
  }
}

#section01 .top-slider {
  height: 153.375vw;
  padding-top: 40vw;
}

@media screen and (min-width: 799px) {
  #section01 .top-slider {
    height: 1227px;
    padding-top: 210px;
  }
}

#section01 .top .between-margin {
  background-color: #f3ecde;
  width: 100%;
  height: 15.625vw;
}

@media screen and (min-width: 799px) {
  #section01 .top .between-margin {
    height: 125px;
  }
}

#section01 .top .art {
  width: 2.125vw;
  height: 53.125vw;
  position: absolute;
  bottom: -15vw;
  right: 2.75vw;
  z-index: 7;
}

@media screen and (min-width: 799px) {
  #section01 .top .art {
    width: 17px;
    height: 402px;
    bottom: 0;
    right: 22px;
  }
}

#section01 .products {
  background-color: #e3e3d7;
  color: #7b7b5b;
}

#section01 .products .intro_ttl {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "Noto Serif JP", serif;
  font-size: 5.5vw;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-top: 10vw;
}

@media screen and (min-width: 799px) {
  #section01 .products .intro_ttl {
    font-size: 48px;
    margin-top: 80px;
  }
}

#section01 .products .intro_txt {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif;
  font-size: 3vw;
}

#section01 .products .intro_txt::before {
  content: "♦♦♦";
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 1vw;
  letter-spacing: 0.7em;
  display: block;
  margin: 3.75vw auto;
}

@media screen and (min-width: 799px) {
  #section01 .products .intro_txt {
    font-size: 24px;
  }

  #section01 .products .intro_txt::before {
    font-size: 8px;
    margin: 30px auto;
  }
}

#section01 .pro-wrap {
  padding: 12.5vw 9.375vw;
  font-size: 2.25vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: left;
  font-family: "Jost", sans-serif;
}

@media screen and (min-width: 780px) {
  #section01 .pro-wrap {
    font-size: 18px;
  }
}

@media screen and (min-width: 799px) {
  #section01 .pro-wrap {
    padding: 100px 75px;
  }
}

#section01 .pro-wrap p+p {
  margin-top: 1.875vw;
}

@media screen and (min-width: 799px) {
  #section01 .pro-wrap p+p {
    margin-top: 15px;
  }
}

#section01 .pro-wrap .btn {
  width: 23.75vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

@media screen and (min-width: 799px) {
  #section01 .pro-wrap .btn {
    width: 190px;
  }
}

#section01 .pro-wrap+.pro-wrap {
  padding-top: 0;
}

#section01 .pro-wrap .color {
  height: 3.5vw;
  margin: 4vw 0 1.875vw;
}

@media screen and (min-width: 799px) {
  #section01 .pro-wrap .color {
    height: 28px;
    margin: 35px 0 15px;
  }
}

#section01 .pro-wrap .color img {
  width: auto;
  height: 100%;
}

#section01 .pro-wrap .name {
  line-height: 1.6;
  font-feature-settings: "palt";
}

#section01 .pro-wrap .name .attention {
  font-size: 1.75vw;
}

@media screen and (min-width: 780px) {
  #section01 .pro-wrap .name .attention {
    font-size: 14px;
  }
}

#section01 .sec01-pro01 {
  display: grid;
  grid-template-columns: 47.25vw auto;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  gap: 5vw;
}

@media screen and (min-width: 799px) {
  #section01 .sec01-pro01 {
    grid-template-columns: 380px auto;
    gap: 35px;
  }
}

#section01 .sec01-pro02 {
  display: grid;
  grid-template-columns: auto 47.25vw;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  gap: 5vw;
  text-align: right;
}

@media screen and (min-width: 799px) {
  #section01 .sec01-pro02 {
    grid-template-columns: auto 380px;
    gap: 35px;
  }
}

#section01 .sec01-pro02 .btn {
  margin-left: auto;
}

/*--------------------------------------*
 * foundation
 *--------------------------------------*/
#section02 .top {
  position: relative;
  overflow: hidden;
  z-index: 1;
  height: 173.125vw;
}

#section02 .top-img {
  position: absolute;
  width: 100%;
  height: 173.125vw;
  top: 5.625vw;
}

@media screen and (min-width: 799px) {
  #section02 .top {
    height: 1385px;
  }

  #section02 .top-img {
    width: 100%;
    height: 100%;
    top: 45px;
  }
}

#section02 .top-slider {
  height: 153.375vw;
  padding-top: 50vw;
}

@media screen and (min-width: 799px) {
  #section02 .top-slider {
    height: 1227px;
    padding-top: 305px;
  }
}

#section02 .top .between-margin {
  background-color: #e4e4e4;
  width: 100%;
  height: 15.625vw;
}

@media screen and (min-width: 799px) {
  #section02 .top .between-margin {
    height: 125px;
  }
}

#section02 .top .art {
  width: 2.125vw;
  height: 53.125vw;
  position: absolute;
  bottom: -15vw;
  right: 2.75vw;
  z-index: 7;
}

@media screen and (min-width: 799px) {
  #section02 .top .art {
    width: 17px;
    height: 402px;
    bottom: 0;
    right: 22px;
  }
}

#section02 .products {
  background-color: #eeebda;
  color: #7c785e;
}

#section02 .products .intro_ttl {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "Noto Serif JP", serif;
  font-size: 5.5vw;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-top: 10vw;
}

@media screen and (min-width: 799px) {
  #section02 .products .intro_ttl {
    font-size: 48px;
    margin-top: 80px;
  }
}

#section02 .products .intro_txt {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif;
  font-size: 3vw;
}

#section02 .products .intro_txt::before {
  content: "♦♦♦";
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 1vw;
  letter-spacing: 0.7em;
  display: block;
  margin: 3.75vw auto;
}

@media screen and (min-width: 799px) {
  #section02 .products .intro_txt {
    font-size: 24px;
  }

  #section02 .products .intro_txt::before {
    font-size: 8px;
    margin: 30px auto;
  }
}

#section02 .pro-wrap {
  padding: 12.5vw 9.375vw;
  font-size: 1.875vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: left;
  font-family: "Jost", sans-serif;
}

@media screen and (min-width: 780px) {
  #section02 .pro-wrap {
    font-size: 15px;
  }
}

@media screen and (min-width: 799px) {
  #section02 .pro-wrap {
    padding: 100px 75px;
  }
}

#section02 .pro-wrap p+p {
  margin-top: 1.875vw;
}

@media screen and (min-width: 799px) {
  #section02 .pro-wrap p+p {
    margin-top: 15px;
  }
}

#section02 .pro-wrap .btn {
  width: 23.75vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

@media screen and (min-width: 799px) {
  #section02 .pro-wrap .btn {
    width: 190px;
  }
}

#section02 .pro-wrap+.pro-wrap {
  padding-top: 0;
}

#section02 .pro-wrap .color {
  height: 3.5vw;
  margin: 4vw 0 1.875vw;
}

@media screen and (min-width: 799px) {
  #section02 .pro-wrap .color {
    height: 28px;
    margin: 35px 0 15px;
  }
}

#section02 .pro-wrap .color img {
  width: auto;
  height: 100%;
}

#section02 .pro-wrap .name {
  font-size: 2.25vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

#section02 .pro-wrap .name .attention {
  font-size: 1.75vw;
}

@media screen and (min-width: 780px) {
  #section02 .pro-wrap .name {
    font-size: 18px;
  }

  #section02 .pro-wrap .name .attention {
    font-size: 14px;
  }
}

#section02 .sec02-pro01 {
  display: grid;
  grid-template-columns: auto 47.25vw;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  gap: 5vw;
}

@media screen and (min-width: 799px) {
  #section02 .sec02-pro01 {
    grid-template-columns: auto 380px;
    gap: 35px;
  }
}

#section02 .sec02-pro02 {
  display: grid;
  grid-template-columns: 47.25vw auto;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  gap: 5vw;
}

@media screen and (min-width: 799px) {
  #section02 .sec02-pro02 {
    grid-template-columns: 380px auto;
    gap: 35px;
  }
}

@media screen and (min-width: 799px) {
  #section02 .extra-img {
    width: 305px;
  }
}

/*--------------------------------------*
 * foundation
 *--------------------------------------*/
#section03 .top {
  position: relative;
  overflow: hidden;
  z-index: 1;
  height: 162.875vw;
}

#section03 .top-img {
  position: absolute;
  width: 100%;
  height: 162.875vw;
  top: 5.625vw;
}

@media screen and (min-width: 799px) {
  #section03 .top {
    height: 1300px;
  }

  #section03 .top-img {
    width: 100%;
    height: 100%;
    top: 45px;
  }
}

#section03 .top-slider {
  height: 153.375vw;
  padding-top: 41vw;
}

@media screen and (min-width: 799px) {
  #section03 .top-slider {
    height: 1227px;
    padding-top: 230px;
  }
}

#section03 .top .between-margin {
  background-color: #e4efea;
  width: 100%;
  height: 15.625vw;
}

@media screen and (min-width: 799px) {
  #section03 .top .between-margin {
    height: 125px;
  }
}

#section03 .top .art {
  width: 2.125vw;
  height: 53.125vw;
  position: absolute;
  bottom: -15vw;
  right: 2.75vw;
  z-index: 7;
}

@media screen and (min-width: 799px) {
  #section03 .top .art {
    width: 17px;
    height: 402px;
    bottom: 0;
    right: 22px;
  }
}

#section03 .products {
  background-color: #ede9e3;
  color: #7d7871;
}

#section03 .products .intro_ttl {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "Noto Serif JP", serif;
  font-size: 5.5vw;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-top: 10vw;
}

@media screen and (min-width: 799px) {
  #section03 .products .intro_ttl {
    font-size: 48px;
    margin-top: 80px;
  }
}

#section03 .products .intro_txt {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif;
  font-size: 3vw;
}

#section03 .products .intro_txt::before {
  content: "♦♦♦";
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 1vw;
  letter-spacing: 0.7em;
  display: block;
  margin: 3.75vw auto;
}

@media screen and (min-width: 799px) {
  #section03 .products .intro_txt {
    font-size: 24px;
  }

  #section03 .products .intro_txt::before {
    font-size: 8px;
    margin: 30px auto;
  }
}

#section03 .pro-wrap {
  padding: 12.5vw 9.375vw;
  font-size: 1.875vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: left;
  font-family: "Jost", sans-serif;
}

@media screen and (min-width: 780px) {
  #section03 .pro-wrap {
    font-size: 15px;
  }
}

@media screen and (min-width: 799px) {
  #section03 .pro-wrap {
    padding: 100px 75px;
  }
}

#section03 .pro-wrap p+p {
  margin-top: 1.875vw;
}

@media screen and (min-width: 799px) {
  #section03 .pro-wrap p+p {
    margin-top: 15px;
  }
}

#section03 .pro-wrap .btn {
  width: 23.75vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

@media screen and (min-width: 799px) {
  #section03 .pro-wrap .btn {
    width: 190px;
  }
}

#section03 .pro-wrap+.pro-wrap {
  padding-top: 0;
}

#section03 .pro-wrap .color {
  height: 3.5vw;
  margin: 4vw 0 1.875vw;
}

@media screen and (min-width: 799px) {
  #section03 .pro-wrap .color {
    height: 28px;
    margin: 35px 0 15px;
  }
}

#section03 .pro-wrap .color img {
  width: auto;
  height: 100%;
}

#section03 .pro-wrap .name {
  font-size: 2.25vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

#section03 .pro-wrap .name .attention {
  font-size: 1.75vw;
}

@media screen and (min-width: 780px) {
  #section03 .pro-wrap .name {
    font-size: 18px;
  }

  #section03 .pro-wrap .name .attention {
    font-size: 14px;
  }
}

#section03 .sec03-pro01 {
  display: grid;
  grid-template-columns: auto 40vw;
  gap: 3.75vw;
  padding-bottom: 16vw;
  text-align: right;
}

@media screen and (min-width: 799px) {
  #section03 .sec03-pro01 {
    grid-template-columns: auto 380px;
    gap: 35px;
    padding-bottom: 150px;
  }
}

#section03 .sec03-pro01 .btn {
  margin-left: auto;
}

/*--------------------------------------*
 * foundation
 *--------------------------------------*/
#section04 .top {
  position: relative;
  overflow: hidden;
  z-index: 1;
  height: 162.875vw;
}

#section04 .top-img {
  position: absolute;
  width: 100%;
  height: 162.875vw;
  top: 5.625vw;
}

@media screen and (min-width: 799px) {
  #section04 .top {
    height: 1300px;
  }

  #section04 .top-img {
    width: 100%;
    height: 100%;
    top: 45px;
  }
}

#section04 .top-slider {
  height: 153.375vw;
  padding-top: 40vw;
}

@media screen and (min-width: 799px) {
  #section04 .top-slider {
    height: 1227px;
    padding-top: 220px;
  }
}

#section04 .top .between-margin {
  background-color: #f6eeeb;
  width: 100%;
  height: 15.625vw;
}

@media screen and (min-width: 799px) {
  #section04 .top .between-margin {
    height: 125px;
  }
}

#section04 .top .art {
  width: 2.125vw;
  height: 53.125vw;
  position: absolute;
  bottom: -15vw;
  right: 2.75vw;
  z-index: 7;
}

@media screen and (min-width: 799px) {
  #section04 .top .art {
    width: 17px;
    height: 402px;
    bottom: 0;
    right: 22px;
  }
}

#section04 .products {
  background-color: #f6eeeb;
  color: #645c52;
}

#section04 .products .intro_ttl {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "Noto Serif JP", serif;
  font-size: 5.5vw;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-top: 10vw;
}

@media screen and (min-width: 799px) {
  #section04 .products .intro_ttl {
    font-size: 48px;
    margin-top: 80px;
  }
}

#section04 .products .intro_txt {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif;
  font-size: 3vw;
}

#section04 .products .intro_txt::before {
  content: "♦♦♦";
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 1vw;
  letter-spacing: 0.7em;
  display: block;
  margin: 3.75vw auto;
}

@media screen and (min-width: 799px) {
  #section04 .products .intro_txt {
    font-size: 24px;
  }

  #section04 .products .intro_txt::before {
    font-size: 8px;
    margin: 30px auto;
  }
}

#section04 .pro-wrap {
  padding: 12.5vw 9.375vw;
  font-size: 1.875vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: left;
  font-family: "Jost", sans-serif;
}

@media screen and (min-width: 780px) {
  #section04 .pro-wrap {
    font-size: 15px;
  }
}

@media screen and (min-width: 799px) {
  #section04 .pro-wrap {
    padding: 100px 75px;
  }
}

#section04 .pro-wrap p+p {
  margin-top: 1.875vw;
}

@media screen and (min-width: 799px) {
  #section04 .pro-wrap p+p {
    margin-top: 15px;
  }
}

#section04 .pro-wrap .btn {
  width: 23.75vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

@media screen and (min-width: 799px) {
  #section04 .pro-wrap .btn {
    width: 190px;
  }
}

#section04 .pro-wrap+.pro-wrap {
  padding-top: 0;
}

#section04 .pro-wrap .color {
  height: 3.5vw;
  margin: 4vw 0 1.875vw;
}

@media screen and (min-width: 799px) {
  #section04 .pro-wrap .color {
    height: 28px;
    margin: 35px 0 15px;
  }
}

#section04 .pro-wrap .color img {
  width: auto;
  height: 100%;
}

#section04 .pro-wrap .name {
  font-size: 2.25vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

#section04 .pro-wrap .name .attention {
  font-size: 1.75vw;
}

@media screen and (min-width: 780px) {
  #section04 .pro-wrap .name {
    font-size: 18px;
  }

  #section04 .pro-wrap .name .attention {
    font-size: 14px;
  }
}

#section04 .sec04-pro01 {
  display: grid;
  grid-template-columns: 47.25vw auto;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  gap: 5vw;
  padding-right: 0;
}

@media screen and (min-width: 799px) {
  #section04 .sec04-pro01 {
    grid-template-columns: 380px auto;
    gap: 35px;
  }
}

#section04 .sec04-pro02 {
  display: grid;
  grid-template-columns: auto 47.25vw;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  gap: 5vw;
  text-align: right;
}

@media screen and (min-width: 799px) {
  #section04 .sec04-pro02 {
    grid-template-columns: auto 378px;
    gap: 50px;
  }
}

#section04 .sec04-pro02 .btn {
  margin-left: auto;
}

/*--------------------------------------*
 * foundation
 *--------------------------------------*/
#section05 .top {
  position: relative;
  overflow: hidden;
  z-index: 1;
  height: 161vw;
}

#section05 .top-img {
  position: absolute;
  width: 100%;
  height: 161vw;
  top: 5.625vw;
}

@media screen and (min-width: 799px) {
  #section05 .top {
    height: 1288px;
  }

  #section05 .top-img {
    width: 100%;
    height: 100%;
    top: 45px;
  }
}

#section05 .top-slider {
  height: 153.375vw;
  padding-top: 39vw;
}

@media screen and (min-width: 799px) {
  #section05 .top-slider {
    height: 1227px;
    padding-top: 225px;
  }
}

#section05 .top .between-margin {
  background-color: #ededf3;
  width: 100%;
  height: 15.625vw;
}

@media screen and (min-width: 799px) {
  #section05 .top .between-margin {
    height: 125px;
  }
}

#section05 .top .art {
  width: 2.125vw;
  height: 53.125vw;
  position: absolute;
  bottom: -15vw;
  right: 2.75vw;
  z-index: 7;
}

@media screen and (min-width: 799px) {
  #section05 .top .art {
    width: 17px;
    height: 402px;
    bottom: 0;
    right: 22px;
  }
}

#section05 .products {
  background-color: #ebded9;
  color: #82665a;
}

#section05 .products .intro_ttl {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "Noto Serif JP", serif;
  font-size: 5.5vw;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-top: 10vw;
}

@media screen and (min-width: 799px) {
  #section05 .products .intro_ttl {
    font-size: 48px;
    margin-top: 80px;
  }
}

#section05 .products .intro_txt {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif;
  font-size: 3vw;
}

#section05 .products .intro_txt::before {
  content: "♦♦♦";
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 1vw;
  letter-spacing: 0.7em;
  display: block;
  margin: 3.75vw auto;
}

@media screen and (min-width: 799px) {
  #section05 .products .intro_txt {
    font-size: 24px;
  }

  #section05 .products .intro_txt::before {
    font-size: 8px;
    margin: 30px auto;
  }
}

#section05 .pro-wrap {
  padding: 12.5vw 9.375vw;
  font-size: 1.875vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: left;
  font-family: "Jost", sans-serif;
}

@media screen and (min-width: 780px) {
  #section05 .pro-wrap {
    font-size: 15px;
  }
}

@media screen and (min-width: 799px) {
  #section05 .pro-wrap {
    padding: 100px 75px;
  }
}

#section05 .pro-wrap p+p {
  margin-top: 1.875vw;
}

@media screen and (min-width: 799px) {
  #section05 .pro-wrap p+p {
    margin-top: 15px;
  }
}

#section05 .pro-wrap .btn {
  width: 23.75vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

@media screen and (min-width: 799px) {
  #section05 .pro-wrap .btn {
    width: 190px;
  }
}

#section05 .pro-wrap+.pro-wrap {
  padding-top: 0;
}

#section05 .pro-wrap .color {
  height: 3.5vw;
  margin: 4vw 0 1.875vw;
}

@media screen and (min-width: 799px) {
  #section05 .pro-wrap .color {
    height: 28px;
    margin: 35px 0 15px;
  }
}

#section05 .pro-wrap .color img {
  width: auto;
  height: 100%;
}

#section05 .pro-wrap .name {
  font-size: 2.25vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

#section05 .pro-wrap .name .attention {
  font-size: 1.75vw;
}

@media screen and (min-width: 780px) {
  #section05 .pro-wrap .name {
    font-size: 18px;
  }

  #section05 .pro-wrap .name .attention {
    font-size: 14px;
  }
}

#section05 .sec05-pro01 {
  display: grid;
  grid-template-columns: auto 47.25vw;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  gap: 5vw;
}

@media screen and (min-width: 799px) {
  #section05 .sec05-pro01 {
    grid-template-columns: auto 380px;
    gap: 35px;
  }
}

#section05 .sec05-pro02 {
  display: grid;
  grid-template-columns: 47.25vw auto;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
  gap: 5vw;
}

@media screen and (min-width: 799px) {
  #section05 .sec05-pro02 {
    grid-template-columns: 380px auto;
    gap: 35px;
  }
}

/*--------------------------------------*
 * foundation
 *--------------------------------------*/
#section06 .top {
  position: relative;
  overflow: hidden;
  height: 162.875vw;
  z-index: 1;
}

#section06 .top-img {
  position: absolute;
  width: 100%;
  height: 162.875vw;
  top: 5.625vw;
}

@media screen and (min-width: 799px) {
  #section06 .top {
    height: 1300px;
  }

  #section06 .top-img {
    width: 100%;
    height: 100%;
    top: 45px;
  }
}

#section06 .top-slider {
  height: 153.375vw;
  padding-top: 42vw;
}

@media screen and (min-width: 799px) {
  #section06 .top-slider {
    height: 1227px;
    padding-top: 240px;
  }
}

#section06 .top .between-margin {
  background-color: #f7f8e8;
  width: 100%;
  height: 15.625vw;
}

@media screen and (min-width: 799px) {
  #section06 .top .between-margin {
    height: 125px;
  }
}

#section06 .top .art {
  width: 2.125vw;
  height: 53.125vw;
  position: absolute;
  bottom: -15vw;
  right: 2.75vw;
  z-index: 7;
}

@media screen and (min-width: 799px) {
  #section06 .top .art {
    width: 17px;
    height: 402px;
    bottom: 0;
    right: 22px;
  }
}

#section06 .products {
  background-color: #ece0e1;
  color: #84615f;
}

#section06 .products .intro_ttl {
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", "Noto Serif JP", serif;
  font-size: 5.5vw;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin-top: 10vw;
}

@media screen and (min-width: 799px) {
  #section06 .products .intro_ttl {
    font-size: 48px;
    margin-top: 80px;
  }
}

#section06 .products .intro_txt {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", "ＭＳ Ｐゴシック", "MS P Gothic", Osaka, Arial, Helvetica, Verdana, sans-serif;
  font-size: 3vw;
}

#section06 .products .intro_txt::before {
  content: "♦♦♦";
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 1vw;
  letter-spacing: 0.7em;
  display: block;
  margin: 3.75vw auto;
}

@media screen and (min-width: 799px) {
  #section06 .products .intro_txt {
    font-size: 24px;
  }

  #section06 .products .intro_txt::before {
    font-size: 8px;
    margin: 30px auto;
  }
}

#section06 .pro-wrap {
  padding: 12.5vw 9.375vw;
  font-size: 1.875vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-align: left;
  font-family: "Jost", sans-serif;
}

@media screen and (min-width: 780px) {
  #section06 .pro-wrap {
    font-size: 15px;
  }
}

@media screen and (min-width: 799px) {
  #section06 .pro-wrap {
    padding: 100px 75px;
  }
}

#section06 .pro-wrap p+p {
  margin-top: 1.875vw;
}

@media screen and (min-width: 799px) {
  #section06 .pro-wrap p+p {
    margin-top: 15px;
  }
}

#section06 .pro-wrap .btn {
  width: 23.75vw;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

@media screen and (min-width: 799px) {
  #section06 .pro-wrap .btn {
    width: 190px;
  }
}

#section06 .pro-wrap+.pro-wrap {
  padding-top: 0;
}

#section06 .pro-wrap .color {
  height: 3.5vw;
  margin: 4vw 0 1.875vw;
}

@media screen and (min-width: 799px) {
  #section06 .pro-wrap .color {
    height: 28px;
    margin: 35px 0 15px;
  }
}

#section06 .pro-wrap .color img {
  width: auto;
  height: 100%;
}

#section06 .pro-wrap .name {
  font-size: 2.25vw;
  line-height: 1.6;
  letter-spacing: 0.05em;
}

#section06 .pro-wrap .name .attention {
  font-size: 1.75vw;
}

@media screen and (min-width: 780px) {
  #section06 .pro-wrap .name {
    font-size: 18px;
  }

  #section06 .pro-wrap .name .attention {
    font-size: 14px;
  }
}

#section06 .sec06-pro01 {
  display: grid;
  padding: 12.5vw 9.375vw 12.5vw 4vw;
  grid-template-columns: auto 47.25vw;
  gap: 5vw;
  text-align: right;
}

@media screen and (min-width: 799px) {
  #section06 .sec06-pro01 {
    padding: 105px 70px 105px 45px;
    grid-template-columns: auto 380px;
    gap: 25px;
  }
}

#section06 .sec06-pro01 .btn {
  margin-left: auto;
}

#section06 .sec06-pro02 {
  display: grid;
  grid-template-columns: 47.25vw auto;
  gap: 5vw;
}

@media screen and (min-width: 799px) {
  #section06 .sec06-pro02 {
    grid-template-columns: 380px auto;
    gap: 50px;
  }
}

/*--------------------------------------*
 * foundation
 *--------------------------------------*/
#end {
  width: 100%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
}

#end .end-wrap {
  width: 38.25vw;
  height: 30.5vw;
  position: absolute;
  top: 50%;
  left: 7.5vw;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (min-width: 799px) {
  #end .end-wrap {
    width: 306px;
    height: 244px;
    left: 60px;
  }
}

#end .end-ttl {
  width: 100%;
  display: block;
}

#end .end-btn {
  width: 23.125vw;
  margin: 0 auto;
  margin-top: 5.625vw;
}

@media screen and (min-width: 799px) {
  #end .end-btn {
    width: 185px;
    margin-top: 45px;
  }
}