@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  line-height: 1.5;
  letter-spacing: 0.6px;
  font-size: 13px;
  transition: all 1.6s ease 0s;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-style: normal;
  background-color: #C3AA9C;
  color: #fff;
}
@media screen and (min-width: 1101px) {
  body {
    font-size: 1.1111111111vw;
  }
}

img {
  display: block;
  width: 100%;
}

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

@media screen and (min-width: 1101px) {
  .pcNone {
    display: none !important;
  }
}
@media screen and (max-width: 1100px) {
  .pcNone {
    display: block;
  }
}

/* .load
===================================================== */
.load {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}

.○○○○○○ {
  opacity: 0;
  transition: opacity 1s;
}
.○○○○○○.on {
  opacity: 1;
}

#page-top {
  position: fixed;
  bottom: 3%;
  right: 3%;
  z-index: 99;
}
@media screen and (max-width: 1100px) {
  #page-top {
    right: 3%;
  }
}
#page-top img {
  width: 2.3611111111vw;
}
@media screen and (max-width: 1100px) {
  #page-top img {
    width: 7.6vw;
  }
}

#page-top a {
  display: block;
  opacity: 0.9;
  transition: all 0.3s ease;
}

#page-top a:hover {
  opacity: 0.5;
}

.fv {
  text-align: center;
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: normal;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s;
}
.fv.on {
  opacity: 1;
}
@media screen and (min-width: 1101px) {
  .fv {
    position: fixed;
  }
}
.fv h1 {
  font-size: 28vw;
  line-height: 0.8;
  margin-top: -2vw;
}
.fv h1 .h1_top {
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: italic;
  font-size: 10.6666666667vw;
  margin-bottom: 5vw;
  display: inline-block;
}
@media screen and (min-width: 1101px) {
  .fv h1 .h1_top {
    font-size: 2.7972222222vw;
    margin-bottom: 2vw;
    margin-top: 5vw;
  }
}
.fv .fv_img {
  width: 148.2666666667vw;
  margin: -34vw -20vw -6vw;
  opacity: 0;
  transition: opacity 1s;
}
.fv .fv_img.on {
  opacity: 1;
}
@media screen and (min-width: 1101px) {
  .fv .fv_img {
    width: 39vw;
    margin: -8vw auto -3vw;
  }
}
.fv .sub_ttl {
  font-size: 5.6vw;
}
@media screen and (min-width: 1101px) {
  .fv .sub_ttl {
    font-size: 1.4583333333vw;
  }
}
.fv .fv_dis {
  font-size: 3.7333333333vw;
  line-height: 1.1;
  width: 90%;
  margin: 1vw auto 11vw;
}
@media screen and (min-width: 1101px) {
  .fv .fv_dis {
    font-size: 1.1111111111vw;
    width: 74%;
    margin: 1vw auto 1vw;
  }
}

.lead {
  text-align: center;
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
  background-color: #866561;
  line-height: 2.5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lead .lead_inner {
  flex-shrink: 0;
  padding: 0 20px;
  z-index: 1;
}
.lead .lead_inner p {
  padding: 15% 0 37%;
}
@media screen and (min-width: 1101px) {
  .lead .lead_inner p {
    padding: 0 0 92%;
  }
}
.lead .lead_scroll {
  width: 21.3333333333vw;
  height: 116vw;
  overflow: hidden;
  font-family: "garamond-premier-pro-display", serif;
  font-weight: 300;
  font-style: normal;
  color: #C3AA9C;
  letter-spacing: 2px;
}
@media screen and (min-width: 1101px) {
  .lead .lead_scroll {
    width: 7vw;
    height: 49vw;
  }
}
.lead .lead_scroll .lead_scroll_inner {
  display: flex;
  flex-direction: column;
  animation: scroll-loop 20s linear infinite;
  width: 20vw;
}
@media screen and (min-width: 1101px) {
  .lead .lead_scroll .lead_scroll_inner {
    width: 10.5vw;
  }
}
.lead .lead_scroll .lead_scroll_inner_r {
  display: flex;
  flex-direction: column;
  animation: scroll-loop2 20s linear infinite;
  width: 20vw;
}
@media screen and (min-width: 1101px) {
  .lead .lead_scroll .lead_scroll_inner_r {
    width: 10.5vw;
  }
}
.lead .lead_scroll p {
  writing-mode: vertical-rl;
  white-space: nowrap;
  font-size: 13.3333333333vw;
  text-align: center;
  width: 100%;
  margin: 4vw 0;
}
@media screen and (min-width: 1101px) {
  .lead .lead_scroll p {
    font-size: 7vw;
    margin: 2vw 0;
  }
}

.right_scroll {
  transform: rotate(180deg);
}

@keyframes scroll-loop {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-50%);
  }
}
@keyframes scroll-loop2 {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(0%);
  }
}
/* 回転アニメーション */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.menu_top {
  background: #866561;
  margin-top: -18vw;
}

.menu_slider {
  position: relative;
  width: 100%;
  padding: 0 0 10%;
  background-color: #C3AA9C;
  box-sizing: border-box;
  z-index: 2;
}
@media screen and (min-width: 1101px) {
  .menu_slider {
    border-left: 0.8px solid #866561;
  }
}

.menu {
  /* 右端に SVG を表示 */
}
.menu .c_ttl {
  text-align: center;
  font-family: "garamond-premier-pro-display", serif;
  font-weight: 300;
  font-style: normal;
  font-size: 32vw;
  margin-top: 12vw;
  line-height: 0.5;
}
@media screen and (min-width: 1101px) {
  .menu .c_ttl {
    font-size: 10.5416666667vw;
    margin-top: 2vw;
  }
}
.menu .wear {
  font-size: 42.6666666667vw;
}
@media screen and (min-width: 1101px) {
  .menu .wear {
    font-size: 13.8888888889vw;
  }
}
.menu .bag {
  font-size: 40vw;
}
@media screen and (min-width: 1101px) {
  .menu .bag {
    font-size: 13.8888888889vw;
  }
}
.menu .hair {
  font-size: 20vw;
}
@media screen and (min-width: 1101px) {
  .menu .hair {
    font-size: 8.3333333333vw;
  }
}
.menu .ace {
  font-size: 26.6666666667vw;
}
@media screen and (min-width: 1101px) {
  .menu .ace {
    font-size: 10.5416666667vw;
  }
}
.menu .other {
  font-size: 34.6666666667vw;
}
@media screen and (min-width: 1101px) {
  .menu .other {
    font-size: 11.1111111111vw;
  }
}
.menu .menu_img {
  margin: -10vw auto 0;
  width: 86%;
}
@media screen and (min-width: 1101px) {
  .menu .menu_img {
    margin: -8% auto 0;
    width: 70%;
  }
}
.menu .detail {
  display: inline-block; /* 幅をテキストに合わせるため */
  position: relative; /* ::after の基準にする */
  padding-right: 30px; /* アイコン分の余白を確保 */
  line-height: 1; /* 縦位置の調整が必要なら変更 */
  vertical-align: middle;
  font-family: "dnp-shuei-gothic-gin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 5.3333333333vw;
  border-bottom: 1px solid #fff;
  padding-bottom: 2vw;
  left: 32%;
}
@media screen and (min-width: 1101px) {
  .menu .detail {
    font-size: 1.5277777778vw;
    left: 39%;
    padding-bottom: 1vw;
  }
}
.menu .detail::after {
  content: "";
  position: absolute;
  top: 40%;
  right: 4px; /* 右端からの余白（調整） */
  transform: translateY(-50%);
  width: 16px; /* アイコン幅（調整可） */
  height: 16px; /* アイコン高さ（調整可） */
  background-image: url("../images/v.svg"); /* 実際のパスに置き換えてください */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none; /* 装飾なのでクリックなどは無効 */
}
@media screen and (min-width: 1101px) {
  .menu .detail::after {
    top: 35%;
    width: 1vw; /* アイコン幅（調整可） */
    height: 1vw; /* アイコン高さ（調整可） */
  }
}
.menu .menu_cre {
  font-size: 2.9333333333vw;
}
.menu .menu_cre a {
  display: flex;
  text-align: right;
  align-items: flex-end;
  gap: 9px;
  line-height: 1.3;
  letter-spacing: 0.7px;
}
@media screen and (min-width: 1101px) {
  .menu .menu_cre a {
    font-size: 0.9027777778vw;
  }
}
.menu .menu_cre img {
  width: 6vw;
  display: inline-block;
}
@media screen and (min-width: 1101px) {
  .menu .menu_cre img {
    width: 1.8vw;
  }
}

.m_flex {
  margin: 0 auto;
}

.swiper-button-prev,
.swiper-button-next {
  top: 45%;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

.swiper-button-prev {
  left: 2vw;
}
@media screen and (min-width: 1101px) {
  .swiper-button-prev {
    left: 3vw;
  }
}
.swiper-button-prev img {
  width: 12vw;
  transform: rotate(180deg);
}

.swiper-button-next {
  right: 2vw;
}
@media screen and (min-width: 1101px) {
  .swiper-button-next {
    right: 3vw;
  }
}
.swiper-button-next img {
  width: 12vw;
}

.searh_area {
  background-color: #866561;
  padding-bottom: 15%;
}
.searh_area div {
  width: 50%;
  margin: 0 auto;
  padding: 15% 0 7%;
}
@media screen and (min-width: 1101px) {
  .searh_area div {
    width: 36%;
  }
}
.searh_area ul {
  display: flex;
  flex-wrap: wrap;
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 5.8666666667vw;
  justify-content: center;
  gap: 3vw;
}
@media screen and (min-width: 1101px) {
  .searh_area ul {
    font-size: 1.9444444444vw;
    gap: 1vw;
  }
}
.searh_area ul li {
  width: 43%;
  border: 1px solid #fff;
  border-radius: 50px;
  text-align: center;
}
@media screen and (min-width: 1101px) {
  .searh_area ul li {
    padding: 1% 0;
  }
}

.credit {
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 3.0666666667vw;
  line-height: 1.3;
  height: fit-content;
  width: fit-content;
  display: block;
}
@media screen and (min-width: 1101px) {
  .credit {
    font-size: 0.9027777778vw;
  }
}
.credit .kago {
  width: 4vw;
  margin-top: 1vw;
  display: inline-block;
}
@media screen and (min-width: 1101px) {
  .credit .kago {
    width: 1.2vw;
    margin-top: 0.5vw;
  }
}

.t_r {
  text-align: right;
}
.t_r .kago {
  margin-left: auto;
}

#sec01 {
  background-color: #A18D9E;
}

#sec03 {
  background-color: #9BA2B0;
}
#sec03 .sec03_top {
  position: relative; /* クレジットを絶対配置するための基準 */
  overflow: hidden;
  height: 177vw;
}
@media screen and (min-width: 1101px) {
  #sec03 .sec03_top {
    height: 87vw;
  }
}
#sec03 .bag_text_circle_wrap {
  width: 63%;
  overflow: hidden;
  margin: -30% 0 0 -36%;
}
#sec03 .circle_wrap_2 {
  width: 86%;
  overflow: hidden;
  margin: -75% 0 0 -48%;
}
#sec03 .circle_wrap_3 {
  width: 63%;
  overflow: hidden;
  position: absolute;
  right: -30%;
  bottom: -20%;
}
#sec03 .circle_wrap_4 {
  width: 86%;
  overflow: hidden;
  position: absolute;
  right: -42%;
  bottom: -27%;
}
#sec03 .bag_text_circle_wrap img {
  animation: spin 15s linear infinite; /* 15秒で1回転し、無限に繰り返す */
  margin: 0 auto; /* 中央寄せ */
}
#sec03 #bag-credit-wrapper {
  position: absolute;
  bottom: 4%;
  left: 14%;
  z-index: 20; /* 他の要素より手前に表示 */
  white-space: nowrap;
}
#sec03 #bag-credit-wrapper .credit {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  position: absolute; /* 重ねて表示するため */
  bottom: 0;
  left: 0;
}
#sec03 #bag-credit-wrapper .credit.is-visible {
  opacity: 1;
}

.cate1_flex {
  display: flex;
}
.cate1_flex .cate1_2 {
  position: relative;
}
.cate1_flex .cate1_2 .credit {
  position: absolute;
  bottom: 5%;
  right: 5%;
  text-align: right;
}
.cate1_flex .cate1_2 .credit p:nth-child(1) {
  font-size: 4vw;
}
@media screen and (min-width: 1101px) {
  .cate1_flex .cate1_2 .credit p:nth-child(1) {
    font-size: 1.3vw;
  }
}
.cate1_flex .cate1_2 .credit p:nth-child(2) {
  font-size: 3.2vw;
}
@media screen and (min-width: 1101px) {
  .cate1_flex .cate1_2 .credit p:nth-child(2) {
    font-size: 1.1vw;
  }
}
.cate1_flex .cate1_2 .credit div {
  width: 19%;
  margin-left: auto;
  margin-top: 5%;
}

.text_flex {
  display: flex;
  justify-content: space-between;
  font-family: "neue-haas-grotesk-display", sans-serif;
  font-weight: 500;
  font-style: normal;
  width: 95%;
  margin: 5% auto;
  font-size: 2.9333333333vw;
}
@media screen and (min-width: 1101px) {
  .text_flex {
    font-size: 1.1vw;
  }
}

.cate1_3 {
  width: 90%;
  margin: 5% auto;
}
@media screen and (min-width: 1101px) {
  .cate1_3 {
    width: 77%;
  }
}

.cate1_4 {
  display: flex;
  gap: 3%;
  justify-content: end;
  margin: 15% auto -26%;
}
@media screen and (min-width: 1101px) {
  .cate1_4 {
    margin: 15% 7% -26%;
  }
}
.cate1_4 .cate1_4_img {
  width: 51%;
}

.cate1_5 {
  width: 45%;
  position: relative;
  z-index: 5;
}
@media screen and (min-width: 1101px) {
  .cate1_5 {
    width: 39%;
    margin-left: 7%;
  }
}
.cate1_5 .credit {
  margin-left: 5%;
  margin-top: 3%;
}

.cate1_6 {
  width: 55%;
  margin: -27% 10% 0 auto;
  padding-bottom: 13%;
}
@media screen and (min-width: 1101px) {
  .cate1_6 {
    width: 47%;
    margin: -19% 15% 0 auto;
  }
}
.cate1_6 .credit {
  margin-left: auto;
  margin-top: 3%;
}

.cate2_1 .cate2_2 {
  width: 60%;
  margin: -112% auto 0%;
}
.cate2_1 p {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: -63% auto 57%;
  text-shadow: 1px 1px ４px rgba(29, 28, 28, 0.3);
}
@media screen and (min-width: 1101px) {
  .cate2_1 p {
    margin: -63% auto 59%;
    width: 83%;
  }
}
@media screen and (min-width: 1101px) {
  .cate2_1 .credit {
    font-size: 1.2vw;
  }
}

.cate7_1 .cate7_2 {
  width: 80%;
  margin: -112% auto 0;
}
.cate7_1 p {
  display: flex;
  justify-content: space-between;
  width: 90%;
  margin: -63% auto 67%;
}
@media screen and (min-width: 1101px) {
  .cate7_1 .credit {
    font-size: 1vw;
  }
}

.cate2_3 {
  position: relative;
  z-index: 10;
}
.cate2_3 .credit {
  display: flex;
  align-items: center;
  margin: -7% 3% 0 auto;
  gap: 5%;
  white-space: nowrap;
  width: auto;
  justify-content: end;
}
.cate2_3 .credit .kago {
  margin-top: 0;
}

.swiper02 {
  overflow-x: hidden; /* 横方向のはみ出しだけを隠す */
  overflow-y: visible; /* 縦方向のはみ出しは表示を許可 */
  padding: 33% 0;
  margin: -32% auto 0;
  /* 中央のスライド(is-activeがついたもの) */
  /* 左のスライド */
  /* 右のスライド */
}
.swiper02 .swiper-slide {
  width: 65%; /* スライドの幅 */
  transform: scale(0.8); /* 基本は縮小 */
  transition: transform 0.5s; /* アニメーションを滑らかに */
}
.swiper02 .swiper-slide img {
  height: auto;
  width: 100%;
}
.swiper02 .swiper-slide-active {
  transform: scale(1);
  cursor: pointer; /* 中央のスライドにカーソルポインターを適用 */
  z-index: 1; /* 中央のスライドを一番上にする */
}
.swiper02 .swiper-slide-prev:not(.swiper-slide-active),
.swiper02 .swiper-slide-duplicate-prev:not(.swiper-slide-active) {
  transform: scale(0.8) translateY(40vw) !important; /* 縮小しつつ下に移動 */
}
.swiper02 .swiper-slide-next:not(.swiper-slide-active),
.swiper02 .swiper-slide-duplicate-next:not(.swiper-slide-active) {
  transform: scale(0.8) translateY(-40vw) !important; /* 縮小しつつ上に移動 */
}
.swiper02 .swiper-wrapper {
  align-items: flex-start; /* 上揃えにして、transformYを有効にする */
}
@media screen and (min-width: 1101px) {
  .swiper02 {
    /* PC表示の時、左右スライドの縦の距離を縮める */
  }
  .swiper02 .swiper-slide-prev:not(.swiper-slide-active),
  .swiper02 .swiper-slide-duplicate-prev:not(.swiper-slide-active) {
    transform: scale(0.8) translateY(20vw) !important; /* SPより上に移動 */
  }
  .swiper02 .swiper-slide-next:not(.swiper-slide-active),
  .swiper02 .swiper-slide-duplicate-next:not(.swiper-slide-active) {
    transform: scale(0.8) translateY(-20vw) !important; /* SPより下に移動 */
  }
}

.cate3_4 {
  display: flex;
  align-items: center;
  background-color: #80899B;
}
.cate3_4 .credit {
  width: 80%;
  margin: 0 auto;
}
.cate3_4 .credit p {
  margin-top: 3%;
}
.cate3_4 div {
  width: 50%;
}

#sec04 {
  background-color: #44554D;
}

.cate4_1_flex {
  display: flex;
  justify-content: center;
  gap: 5%;
  padding-top: 18%;
}

.sur {
  width: 11%;
}

.cate4_1 {
  width: 65%;
}
.cate4_1 .credit {
  text-align: right;
}
.cate4_1 .credit .kago {
  margin-left: 5%;
}

.cate4_2_box {
  display: flex;
}
.cate4_2_box .cate4_2 {
  width: 71%;
  margin: 16% -20% 0 0;
}
@media screen and (max-width: 1100px) {
  .cate4_2_box .cate4_2 .kago {
    width: 3.3vw;
  }
}
.cate4_2_box .cate4_2 p {
  margin: 5% auto 0 5%;
}
.cate4_2_box .cate4_2 .rabi {
  margin: 0 auto 0 5%;
}
.cate4_2_box .cate4_3 {
  width: 42%;
  position: relative;
  z-index: 10;
  margin: 45% 4% 9% auto;
}

.back_grn {
  margin-top: 15%;
  background: linear-gradient(to bottom, #44554D 11%, #667459 10%);
}

.cate4_4_flex {
  display: flex;
  justify-content: space-between;
}
.cate4_4_flex .cate4_4 {
  width: 66%;
}
.cate4_4_flex .cate4_4 p {
  transform: rotate(46deg) translate(-14vw, -24vw);
}
@media screen and (min-width: 1101px) {
  .cate4_4_flex .cate4_4 p {
    transform: rotate(46deg) translate(-15vw, -12.5vw);
    text-align: right;
  }
}
.cate4_4_flex .cate4_4 .kago {
  margin-left: 5%;
}
.cate4_4_flex .hair_text {
  width: 17.6vw;
  margin-left: 7%;
}
@media screen and (min-width: 1101px) {
  .cate4_4_flex .hair_text {
    width: 7.6vw;
  }
}

.cate4_5_flex {
  display: flex;
  width: 85%;
  margin: -30% auto 0;
}
.cate4_5_flex .cate4_5 {
  position: relative;
  z-index: 10;
}
.cate4_5_flex .cate4_5 p {
  margin-top: 3%;
}
.cate4_5_flex .cate4_6 {
  margin: 30% auto 0 -15%;
}
.cate4_5_flex .cate4_6 p {
  text-align: right;
  margin-top: 3%;
  margin-right: 1%;
}

.cate4_7 {
  width: 65%;
  margin: 5% auto 0 10%;
}
.cate4_7 p {
  margin-top: 3%;
}

.cate4_8_flex {
  display: flex;
}
.cate4_8_flex .cate4_8 {
  width: 70%;
}
.cate4_8_flex .cate4_8 p {
  text-align: right;
  margin-top: 3%;
  margin-right: 5%;
}
.cate4_8_flex .cate4_9 {
  margin: 38% -18% 15% 10%;
  width: 52%;
  position: relative;
  z-index: 10;
}
.cate4_8_flex .cate4_9 p {
  margin-top: 3%;
}

#sec05 {
  background-color: #7E8491;
  padding: 15% 0 0;
}
@media screen and (max-width: 1100px) {
  #sec05 .kago {
    width: 3.2vw;
  }
}

.cate5_img {
  width: 85%;
  padding: 3% 0;
  margin: 0 auto;
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: normal;
}
.cate5_img .item_name {
  text-align: center;
  font-size: 14.6666666667vw;
  margin-top: -39%;
}
@media screen and (min-width: 1101px) {
  .cate5_img .item_name {
    font-size: 8vw;
  }
}
.cate5_img .credit {
  margin: 5% 5% 0 auto;
  display: flex;
  white-space: nowrap;
  width: auto;
  align-items: center;
  justify-content: space-between;
  width: 90%;
}
@media screen and (max-width: 1100px) {
  .cate5_img .credit {
    font-size: 2.9vw;
  }
}
.cate5_img .credit .kago {
  margin-top: 0;
  margin-left: 5%;
}

.pearl .credit {
  margin: 0 5% 0 auto;
}
@media screen and (min-width: 1101px) {
  .pearl .credit {
    margin: 0.5% 5% 0 auto;
  }
}

.cate5_text {
  font-size: 2.9333333333vw;
  text-align: right;
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: normal;
  width: 44%;
  margin: 8% 10% 0 auto;
  letter-spacing: 0px;
}
@media screen and (min-width: 1101px) {
  .cate5_text {
    font-size: 1.2vw;
    margin: 5% 10% 0 auto;
  }
}

.maru {
  width: 17%;
  margin: 3% 10% 0 auto;
}
@media screen and (min-width: 1101px) {
  .maru {
    width: 13%;
  }
}

.scrolling-text {
  width: 100%;
  height: 57vw;
  margin: -21% 0 0;
  display: block;
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 5.3333333333vw;
}
@media screen and (min-width: 1101px) {
  .scrolling-text {
    height: 32vw;
    margin: -18% 0 0;
    font-size: 1.2vw;
  }
}

#sec06 {
  background-color: #866561;
}

.cate6_flex {
  width: 80%;
  padding: 15% 0 10%;
  margin: 0 auto;
}
.cate6_flex .cate6_1 {
  width: 96%;
  margin: -17% 0 -22% -3%;
}
.cate6_flex .beanie {
  width: 70%;
  margin-left: auto;
  position: relative;
  z-index: 10;
}

.cate6_2 {
  width: 70%;
  margin: 5% auto 0;
  padding-bottom: 15%;
}
.cate6_2 .credit {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 3%;
  align-items: center;
}
.cate6_2 .credit .kago {
  margin-top: 0;
}

#sec07 {
  background-color: #B8A683;
}

.cate7_4_flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1vw 1vw;
}
@media screen and (min-width: 1101px) {
  .cate7_4_flex {
    gap: 0.5vw 0.5vw;
  }
}
.cate7_4_flex div {
  width: 32.6666666667vw;
}
@media screen and (min-width: 1101px) {
  .cate7_4_flex div {
    width: 32.6533333333%;
  }
}

.cate7_13 {
  text-align: center;
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 8vw;
  margin: 15% auto 0;
}
@media screen and (min-width: 1101px) {
  .cate7_13 {
    font-size: 4vw;
  }
}
.cate7_13 p {
  margin: -51% auto 0;
  line-height: 1.3;
}

footer {
  background-color: #B8A683;
  text-align: center;
  font-family: "garamond-premier-pro", serif;
  font-weight: 400;
  font-style: normal;
  padding: 51% 0 5%;
}
footer .all {
  font-size: 5.8666666667vw;
  border: 1px solid;
  width: 70%;
  margin: 0 auto;
  padding: 1% 0;
}
@media screen and (min-width: 1101px) {
  footer .all {
    font-size: 1.866667vw;
    width: 57%;
  }
}
footer .b_logo {
  width: 33%;
  margin: 31% auto 6%;
  display: block;
}
@media screen and (min-width: 1101px) {
  footer .b_logo {
    width: 27%;
  }
}

@media screen and (min-width: 1101px) {
  .pc_flex {
    display: flex;
  }
  .fv, .pc_right {
    width: 50%;
  }
  .fv h1 {
    font-size: 7.7340277778vw;
  }
  .fv .guide {
    margin-left: 1vw;
  }
  .pc_right {
    margin-left: 50%;
  }
}/*# sourceMappingURL=style.css.map */