@charset "UTF-8";
html {
  scroll-behavior: smooth;
  overflow: hidden; /* 初期状態でスクロールを無効化 */
}

body {
  width: 100%;
  line-height: 1.5;
  letter-spacing: 0.2px;
  font-size: 11px;
  overflow-x: hidden; /* 左右のスクロールのみ禁止 */
  transition: all 1.6s ease 0s;
  background-color: #fcf9f3;
}

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

a:hover {
  opacity: 0.6;
  transition: 0.6s;
}

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

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

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

.load,
.load_2 {
  background-color: #fcf9f3;
}

.load_2 {
  height: 100svh;
  opacity: 0; /* 初期状態を非表示にする */
  visibility: hidden; /* 初期状態を非表示にする */
  position: relative;
}
.load_2 ul {
  display: flex;
  gap: 7%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.load_2 ul li {
  opacity: 0; /* 初期状態を非表示にする */
  visibility: hidden; /* 初期状態を非表示にする */
}
.load_2 .check_top {
  position: absolute;
  top: 0;
}
.load_2 .check_botom {
  position: absolute;
  bottom: 0;
}

.fv {
  opacity: 0; /* 初期状態を非表示にする */
  visibility: hidden; /* 初期状態を非表示にする */
  margin-bottom: 30%;
  margin-top: -100svh;
}
@media screen and (min-width: 1051px) {
  .fv {
    margin-bottom: 25vw;
  }
}
.fv .chektop {
  width: 100vw;
  margin-left: -34.7395833333vw;
  position: fixed;
  top: 0;
  z-index: 999;
}
.fv .topkitty {
  width: 92%;
  margin: -25% auto 0;
  clip-path: inset(100% 0 0 0); /* 下から100%の位置でマスク（初期状態） */
}
@media screen and (min-width: 1051px) {
  .fv .topkitty {
    margin: 45% auto 0;
  }
}
.fv .scroll {
  width: 6%;
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.menu {
  position: relative;
  overflow: hidden;
}
.menu .m_title {
  margin: 30% auto 10%;
  width: 48%;
}
.menu ul li a {
  display: flex;
  align-items: end;
  gap: 6%;
  padding-bottom: 9px; /* テキストと下線の間の余白 */
  padding-right: 3%;
  width: fit-content;
  white-space: nowrap; /* 丸いドットの下線 */
  background-image: radial-gradient(circle, #000 1px, transparent 2px);
  background-size: 12px 3px; /* ドットの間隔とサイズ */
  background-repeat: repeat-x;
  background-position: left bottom;
  font-family: "poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
  font-size: 4.6296296296vw;
  margin: 0 auto 14%;
}
@media screen and (min-width: 1051px) {
  .menu ul li a {
    font-size: 1.5104166667vw;
  }
}
.menu ul li a img {
  width: 8.7037037037vw;
}
@media screen and (min-width: 1051px) {
  .menu ul li a img {
    width: 2.7604166667vw;
  }
}
.menu ul li:nth-child(2) a {
  padding-left: 10%;
  padding-right: 3%;
}
@media screen and (min-width: 1051px) {
  .menu ul li:nth-child(2) a {
    padding-left: 0;
    padding-right: 0;
  }
}
.menu ul li:nth-child(4) a {
  padding-left: 5%;
  margin-left: 34%;
}
@media screen and (min-width: 1051px) {
  .menu ul li:nth-child(4) a {
    padding-left: 0;
    padding-right: 0;
  }
}
.menu ul li:nth-child(5) a {
  padding-right: 10%;
}
@media screen and (min-width: 1051px) {
  .menu ul li:nth-child(5) a {
    padding-left: 0;
    padding-right: 0;
  }
}
.menu .hand {
  position: absolute;
}
.menu .hand--1 {
  top: 22%;
  right: 0%;
  width: 25%;
}
.menu .hand--2 {
  top: 34%;
  left: -7px;
  width: 27%;
}
.menu .hand--3 {
  top: 45%;
  right: -4%;
  width: 34%;
}
.menu .hand--4 {
  top: 58%;
  left: -3%;
  width: 40%;
}
.menu .hand--5 {
  top: 63%;
  right: -3%;
  width: 37%;
}
.menu .menu_btm {
  width: 95%;
  margin: 20% auto 0;
}

.item_area {
  margin: 20% auto;
  overflow: hidden;
  font-family: "poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.item_area .heart {
  width: 17%;
  margin: 15% auto -30% 15%;
  position: relative;
  z-index: 10;
}
.item_area p {
  font-size: 6.4814814815vw;
  line-height: 1;
}
@media screen and (min-width: 1051px) {
  .item_area p {
    font-size: 2.0833333333vw;
  }
}
.item_area p .price {
  font-size: 3.4259259259vw;
}
@media screen and (min-width: 1051px) {
  .item_area p .price {
    font-size: 1.09375vw;
  }
}
.item_area p .buy {
  font-size: 4.3518518519vw;
  color: #fff;
  padding: 7px 26px 4px;
  display: inline-block;
  margin-top: 6%;
  border-radius: 50px;
  background-color: #000;
}
@media screen and (min-width: 1051px) {
  .item_area p .buy {
    font-size: 1.40625vw;
  }
}

#sec01 .heart {
  transform: rotate(-10deg);
}
#sec01 .item {
  width: 113%;
}
#sec01 .item_2 {
  width: 38%;
  margin: -35% auto 0 4%;
}
#sec01 p {
  margin: -35% auto 9% 66%;
}

#sec02 .item {
  width: 104%;
}
#sec02 .heart {
  margin: 2% auto -17% 60%;
  transform: rotate(16deg);
}
#sec02 .flex {
  display: flex;
  justify-content: center;
  gap: 6%;
  margin: -7% auto 0;
}
#sec02 .flex .item_2 {
  width: 35%;
  margin-top: -10%;
}
#sec02 .flex .buy {
  margin-top: 0;
  margin-left: 7px;
}

#sec03 .item {
  width: 90%;
  margin: 6% auto 0;
}
#sec03 .heart {
  transform: rotate(-10deg);
}
#sec03 .flex {
  display: flex;
  justify-content: center;
  margin: 0 auto 0;
}
#sec03 .flex .item_2 {
  width: 25%;
  margin-top: -16%;
}
#sec03 .flex .buy {
  margin-top: 0;
  margin-left: 7px;
}
#sec03 p a {
  display: flex;
}
#sec03 p a .buy {
  height: fit-content;
}

#sec04 .item {
  width: 109%;
  margin: 6% auto 0;
}
#sec04 .heart {
  margin: 6% auto -29% 74%;
  transform: rotate(16deg);
}
#sec04 .flex {
  display: flex;
  justify-content: center;
  margin: -7% auto 0;
  align-items: end;
  gap: 4%;
}
#sec04 .flex .item_2 {
  width: 20%;
}
#sec04 .flex .buy {
  margin-top: 0;
  margin-left: 7px;
}
#sec04 p {
  margin-top: -1%;
}
#sec04 p a {
  display: flex;
}
#sec04 p a .buy {
  height: fit-content;
}

#sec05 .item {
  width: 109%;
  margin: 6% auto 0 -1%;
}
#sec05 .heart {
  margin: 11% auto -37% 11%;
  transform: rotate(-10deg);
}
#sec05 .item_2 {
  margin: -87% auto 0 3%;
  width: 35%;
}
#sec05 .buy {
  margin-top: 0;
  margin-left: 7px;
}
#sec05 p {
  margin: 14% auto 6% 62%;
}

.all {
  width: 28%;
  margin: 24% auto;
}

@media screen and (min-width: 1051px) {
  .pc_flex {
    display: flex;
  }
  .pc_flex .pc_left {
    width: 34.7395833333vw;
    position: fixed;
    top: 10vw;
    opacity: 0; /* 初期状態を非表示にする */
    visibility: hidden; /* 初期状態を非表示にする */
  }
}
@media screen and (min-width: 1051px) and (min-width: 1051px) {
  .pc_flex .pc_left img {
    width: 4.5833333333vw;
  }
}
@media screen and (min-width: 1051px) {
  .pc_flex .pc_left ul li a {
    font-size: 2.4479166667vw;
    margin: 0 auto 8% 8%;
    background-size: 17px 4px; /* ドットの間隔とサイズ */
    letter-spacing: -0.01vw;
    background-image: radial-gradient(circle, #000 2px, transparent 2px);
    width: 80%;
  }
  .pc_flex .pc_center {
    width: 31.9270833333vw;
    margin-left: 34.7395833333vw;
    opacity: 0; /* 初期状態を非表示にする */
    visibility: hidden; /* 初期状態を非表示にする */
  }
  .pc_flex .pc_right {
    opacity: 0; /* 初期状態を非表示にする */
    visibility: hidden; /* 初期状態を非表示にする */
    width: 30vw;
    position: fixed;
    right: 0;
    top: 10vw;
  }
  .pc_flex .pc_right img {
    width: 93%;
  }
}/*# sourceMappingURL=style.css.map */