:root {
  --pc_width: 1920px;
  --pc_contents_width: 1100px;
  --sp_width: 750px;
  --sp_contents_width: 690px;
}

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: hidden;
}

.mv {
  position: relative;
  z-index: 5;
}

.mv_img {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: translateY(-100px);
  transition: .6s;
  width: 100%;
}

.mv_img.is_visible {
  opacity: 1;
  transform: translateY(0);
}

.about {
  background-image: url('../img/about_bg.jpg');
  background-size: 102%;
  background-position: center top;
  background-repeat: repeat;
}

.about_inner {
  padding: calc(calc(220px / var(--pc_width)) * 100%) 0 17%;
  position: relative;
}

.about_head {
  margin: 0 auto 3%;
  width: calc(calc(405px / var(--pc_width)) * 100%);
}

.about_text {
  margin: 0 auto calc(calc(60px / var(--pc_width)) * 100%);
  width: calc(calc(516px / var(--pc_width)) * 100%);
}

.about_icon {
  position: absolute;
}

.about_icon.about_icon01 {
  inset: 4.2% auto auto 0;
  width: calc(calc(332px / var(--pc_width)) * 100%);
}

.about_icon.about_icon02 {
  inset: 22.4% auto auto 5%;
  width: calc(calc(426px / var(--pc_width)) * 100%);
  z-index: 3;
}

.about_icon02_woman {
  position: absolute;
  inset: 10% 32% auto auto;
  width: 41.9%;
}

.about_icon.about_icon02.fadeInUp .about_icon02_woman {
  animation: about_icon02_floating 3s ease-in-out infinite;
}

@keyframes about_icon02_floating {
  0% {
    opacity: 1;
    inset: -10% 13% auto auto;
  }

  70% {
    inset: 10% 32% auto auto;
    opacity: 1;
  }

  78% {
    inset: 10% 32% auto auto;
    opacity: 0;
  }

  100% {
    opacity: 0;
    inset: -10% 13% auto auto;
  }
}

.about_icon.about_icon03 {
  inset: 1.3% 7.3% auto auto;
  width: calc(calc(456px / var(--pc_width)) * 100%);
  z-index: 2;
}

.about_icon.about_icon03 picture {
  position: relative;
  z-index: 2;
}

.icon_pen03_fire {
  position: absolute;
  inset: auto auto -20% -16%;
  width: 20%;
  z-index: 1;
}

.about_icon.about_icon03.fadeInUp .icon_pen03_fire {
  animation: about_icon03_floating 2s ease-in-out infinite alternate-reverse;
}

@keyframes about_icon03_floating {
  0% {
    inset: auto auto -15% -12%;
    width: 16%;
  }

  100% {
    inset: auto auto -20% -16%;
    width: 20%;
  }
}

.about_icon.about_icon04 {
  inset: 12% 0% auto auto;
  width: calc(calc(295px / var(--pc_width)) * 100%);
}

.about_icon.about_icon05 {
  inset: 6.4% auto auto 0;
  width: calc(calc(449px / var(--pc_width)) * 100%);
}

.about_icon.about_icon05 > picture {
  position: relative;
  z-index: 3;
}

.icon_pen05_panda {
  position: absolute;
  inset: 35.4% auto auto 43%;
  width: 33.633%;
  z-index: 2;
}

.icon_pen05_line {
  position: absolute;
  inset: -80% -328% auto auto;
  width: 329.176%;
  z-index: 1;
}

.icon_pen05_neko {
  position: absolute;
  inset: 154% -210% auto auto;
  width: 26.727%;
  z-index: 2;
}

.about_icon.about_icon06 {
  inset: 24.8% 0 auto auto;
  width: calc(calc(308px / var(--pc_width)) * 100%);
  z-index: 4;
}

.about_icon.about_icon06 picture {
  position: relative;
  z-index: 2;
}

.icon_pen06_fish {
  position: absolute;
  inset: 17% 63% auto auto;
  width: 31.82%;
  z-index: 1;
}

.about_icon.about_icon06.fadeInUp .icon_pen06_fish {
  animation: about_icon06_floating 3s ease-in-out infinite alternate-reverse;
}

@keyframes about_icon06_floating {
  0% {
    transform: rotate(-10deg) translateX(1.805054vw) translateY(-0.216606vw);
  }

  100% {
    transform: rotate(26deg) translateX(-4.187726vw) translateY(1.732852vw);
  }
}

.about_icon.about_icon07 {
  inset: 45.2% 0 auto auto;
  width: calc(calc(378px / var(--pc_width)) * 100%);
  z-index: 3;
}

.about_icon.about_icon08 {
  inset: 64.2% 0 auto auto;
  width: calc(calc(270px / var(--pc_width)) * 100%);
  z-index: 1;
}

.about_icon.about_icon09 {
  inset: auto 0% 12.1% auto;
  width: calc(calc(411px / var(--pc_width)) * 100%);
  z-index: 3;
}

.about_icon.about_icon09.fadeInUp {
  animation: about_icon09_floating 2s ease-in-out infinite alternate-reverse;
}

@keyframes about_icon09_floating {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(10%);
  }
}

.icon_pen09_dog {
  position: absolute;
  inset: auto 99.4% 52.6% auto;
  width: 94.65%;
}

.about_icon.about_icon10 {
  inset: 51% auto auto 0;
  width: calc(calc(372px / var(--pc_width)) * 100%);
  z-index: 3;
}

.icon_pen10_flower {
  position: absolute;
  inset: -34% auto auto 18%;
  width: 82.53%;
}

.about_icon.about_icon11 {
  inset: auto auto 13% 8.2%;
  width: calc(calc(433px / var(--pc_width)) * 100%);
  z-index: 3;
}

.about_icon.about_icon12 {
  inset: 29.5% 22.6% auto auto;
  width: calc(calc(120px / var(--pc_width)) * 100%);
  z-index: 3;
}

.icon_pen11_line {
  position: absolute;
  inset: -32% auto auto -36%;
  width: 39.492%;
}

.about_contents {
  background-image: url('../img/about_contents_bg.png');
  background-size: 89.322917vw;
  background-position: left top;
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
}

.about_contents_inner {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 7% 2% 12% 6.438%;
  position: relative;
  width: 57.291667%;
}

.about_contents_head {
  margin: 0 auto 5%;
  width: 47.868%;
}

.about_contents_items {
  /* display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 2.504%; */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.504%;
  max-height: 61.875vw;
  overflow-y: auto;
}

.about_contents_item {
  box-sizing: border-box;
  cursor: pointer;
  opacity: 1;
  transition: 0.2s;
  padding: 0;
  /* width: 31.664%; */
  width: 100%;
}

/* .about_contents_items > li:nth-of-type(n+4) {
  padding: 2.504% 0 0;
} */

.about_contents_item:last-child {
  grid-column: 1 / -1;
}

.about_contents_item:hover {
  opacity: 0.7;
}

.about_contents_item.no_modal {
  cursor: inherit;
  width: 100%;
}

.about_contents_item.no_modal:hover {
  opacity: 1;
}

.about_contents_arrow {
  position: absolute;
  inset: 17.6% auto auto 5%;
  animation: about_contents_arrow 2s ease-in-out infinite alternate-reverse;
  width: calc(calc(48px / var(--pc_contents_width)) * 100%);
}

@keyframes about_contents_arrow {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(20%);
  }
}

.bg_graph_paper {
  background-image: url('../img/howto_bg.jpg');
  background-repeat: repeat;
  background-color: #fff;
  border-radius: 5.208333vw 5.208333vw 0 0;
  margin: -11% 0 0;
}

.howto {
  position: relative;
  z-index: 3;
}

.howto_inner {
  max-width: 57.291667vw;
  margin: 0 auto;
  padding: 6.6% 0 13.2%;
}

.howto_head {
  margin: 0 auto 6%;
  width: calc(calc(545px / var(--pc_contents_width)) * 100%);
}

.howto_step {
  width: 100%;
}

.howto_step_inner {
  display: flex;
  justify-content: flex-start;
  gap: 2.06%;
  width: 100%;
}

.howto_step_item {
  width: 23.455%;
}

.swiper-navigation-icon {
  display: none;
}

.post {
  background-image: url('../img/post_bg.jpg');
  background-repeat: repeat;
  border-radius: 5.208333vw 5.208333vw 0 0;
  margin: -6.6% 0 0;
  position: relative;
  z-index: 4;
}

.post_inner {
  max-width: 57.291667vw;
  margin: 0 auto;
  padding: 6.6% 0 13.2%;
}

.post_head {
  margin: 0 auto 6%;
  width: calc(calc(327px / var(--pc_contents_width)) * 100%);
}

.post_items {
  background-image: url("../img/post_items_bg.png");
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  /* background-color: #fff; */
  /* border-radius: 2.604167vw; */
  padding: 3%;
  margin: 0 auto 5%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.504%;
  height: 39.0625vw;
  overflow-y: auto;
  width: calc(calc(608px / var(--pc_contents_width)) * 100%);
}

.post_items.length1:not(:has(.coming_soon)) {
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  max-height: 39.0625vw;
  height: 39.0625vw;
  margin: 0 auto 5%;
  width: calc(calc(608px / var(--pc_contents_width)) * 100%);
}

.post_items.length2:not(:has(.coming_soon)) {
  background-size: 75.81047381546135%;
  align-items: center;
  justify-content: flex-start;
  padding: 0 14%;
  position: relative;
  max-height: 39.0625vw;
  height: 39.0625vw;
  margin: 0 auto 5%;
  width: 72.90909090909091%;
}

.post_items.length0,
.post_items.length1 {
  height: 39.0625vw;
}

.post_items.length0 .post_items_slider_inner,
.post_items.length1 .post_items_slider_inner {
  justify-content: center;
}

.post_items.length2 .post_items_slider {
  position: unset;
}

.post_items.length2 .swiper-button-prev,
.post_items.length2 .swiper-button-next {
  height: 4.427083vw;
  width: 3.020833vw;
}

.post_items.length2 .swiper-button-prev {
  transform: rotate(-180deg);
}

.post_items.length2 .swiper-button-prev::after,
.post_items.length2 .swiper-button-next::after {
  background-image: url("../img/post_items_arrow.png");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  margin: auto;
  height: 100%;
  width: 100%;
}

.post_item {
  display: block;
  width: 100%;
}

.post_items.length0 .post_item {
  width: 100%;
}

.post_items.length1 .post_item {
  width: 80%;
}

.post_items:not(:has(.coming_soon)) > button:nth-of-type(n+4) {
  margin: 2.504% 0 0;
}

.post_item.coming_soon {
  width: 48.831%;
}

.post_items:not(:has(.coming_soon)) .post_items_slider_inner .post_item img {
  border-radius: 1.5625vw;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.post_text {
  margin: 0 auto 4%;
  width: 43.27272727272727%;
}

.post_button {
  display: block;
  margin: 0 auto;
  transition: 0.2s;
  opacity: 1;
  width: 65.365%;
}

.post_button:hover {
  opacity: 0.7;
}

.feature {
  margin: -4.4% 0 0;
  position: relative;
  z-index: 4;
}

.feature_inner {
  max-width: 57.291667vw;
  margin: 0 auto;
  padding: 6.6% 0;
}

.feature_title {
  margin: 0 auto 5%;
  width: calc(calc(234px / var(--pc_contents_width)) * 100%);
}

.feature_head {
  margin: 0 auto 6%;
  width: calc(calc(481px / var(--pc_contents_width)) * 100%);
}

.feature_list {
  margin: 0 auto 6%;
  width: calc(calc(591px / var(--pc_contents_width)) * 100%);
}

.feature_text {
  margin: 0 auto 6%;
  width: calc(calc(588px / var(--pc_contents_width)) * 100%);
}

.feature_img {
  margin: 0 auto 6%;
  width: calc(calc(796px / var(--pc_contents_width)) * 100%);
}

.feature_btn {
  display: block;
  margin: 0 auto 4.2%;
  width: calc(calc(494px / var(--pc_contents_width)) * 100%);
  transition: 0.2s;
  opacity: 1;
}

.feature_btn02 {
  display: block;
  margin: 0 auto;
  width: calc(calc(718px / var(--pc_contents_width)) * 100%);
  transition: 0.2s;
  opacity: 1;
}

.feature_btn:hover {
  opacity: 0.7;
}

.footer {
  background-color: #e50416;
}

.footer_links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* margin: 0 auto; */
  margin: 0 auto 0 38vw;
  /* max-width: 538px; */
  /* padding: 28px 0; */
  padding: 1.4% 0;
  width: 28.02083333%;
}

.footer_link {
  display: block;
}

.icon_instagram {
  margin: 3% 0 0;
  width: 37.176%;
}

.icon_x {
  width: 6.88%;
}

.icon_youtube {
  width: 27.883%;
}

.modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}

.modal.is_active {
  background-color: rgb(0 0 0 / .3);
  opacity: 1;
  visibility: visible;
}

.modal_inner {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 90%;
  margin: 0 auto;
  /* width: 46%; */
  width: 57.29166666666667%;
}

.modal_contents {
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.modal_close_wrap {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 10;
}

.modal_close {
  position: absolute;
  inset: 0 0 auto auto;
  width: 7.311%;
}

.modal_item {
  padding: 2%;
  width: 100%;
}

.modal_item_inner {
  width: 100%;
}

.modal_item_card {
  display: none;
  position: relative;
}

.modal_item_card.is_active {
  display: block;
}

.modal_item_btn {
  display: block;
  position: absolute;
  inset: auto 0 3vw 0;
  margin: 0 auto;
  width: 45%;
}

.snsModal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}

.snsModal.is_active {
  opacity: 1;
  visibility: visible;
}

.snsModal_inner {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 90%;
  margin: 0 auto;
  width: 46%;
}

.snsModal_contents {
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.snsModal_close_wrap {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 10;
}

.snsModal_close {
  position: absolute;
  inset: 0 0 auto auto;
  width: 7.311%;
  z-index: 10;
}

.snsModal_item {
  padding: 2%;
  width: 100%;
}

.snsModal_item_inner {
  width: 100%;
}

.snsModal_target {
  display: none;
  position: relative;
  width: 100%;
}

.snsModal_target.is_active {
  display: block;
}

/* .snsModal_target:before {
  content: '';
  display: block;
  padding-top: 177.7777777777778%;
} */

.snsModal_target iframe {
  margin: 0 auto 20px !important;
  /* position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  max-width: 100% !important;
  width: 100% !important; */
}

.scrollIn {
  opacity: 0;
  visibility: hidden;
  transition: 1s;
}

.scrollInUp {
  transform: translateY(50px);
}

.scrollInUp.fadeInUp {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.scrollInRight {
  transform: translateX(50px);
}

.scrollInRight.fadeInUp {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

.scrollInLeft {
  transform: translateX(-50px);
}

.scrollInLeft.fadeInUp {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

.scrollInScale {
  transform: scale(0);
}

.scrollInScale.zoomUp {
  opacity: 1;
  transform: scale(1);
  visibility: visible;
}

.menu_btn {
  position: fixed;
  inset: 3.333333vw 1.770833vw auto auto;
  width: 5.7292%;
  z-index: 9999;
}

.menu_btn.is_active {
  inset: 2.239583vw 2.760417vw auto auto;
  width: 3.8023%;
}

.menu_btn_img {
  display: none;
}

.menu_btn_img.is_active {
  display: block;
}

.menu {
  background-color: #fff;
  position: fixed;
  inset: 0 0 auto 0;
  margin: 0 auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-110%);
  transition: .2s;
  width: 100%;
  z-index: 999;
}

.menu.is_active {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.menu_inner {
  margin: 0 auto;
  padding: 3.6% 0 1.8%;
  width: 60%;
}

.menu_lists {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu_lists > li:nth-of-type(1) {
  width: 20.943%;
}

.menu_lists > li:nth-of-type(2) {
  width: 20.411%;
}

.menu_lists > li:nth-of-type(3) {
  width: 11.112%;
}

.menu_lists > li:nth-of-type(4) {
  width: 13.976%;
}

.menu_lists > li:nth-of-type(5) {
  width: 15.973%;
}

.footer_copy {
  background-color: #fff;
  font-size: 16px;
  font-weight: 400;
  padding: 12px 0 14px;
  text-align: center;
}

@media screen and (min-width: 769px) {
  .snsModal_inner {
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .snsModal_inner::-webkit-scrollbar {
    width: 6px;
  }

  .snsModal_inner::-webkit-scrollbar-track {
    background: transparent;
  }

  .snsModal_inner::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 999px;
  }
}

@media screen and (max-width: 768px) {
  .about {
    background-size: 100%;
    background-image: url('../img/about_bg_sp.jpg');
  }

  .about_inner {
    padding: calc(calc(250px / var(--sp_width)) * 100%) 0 calc(calc(210px / var(--sp_width)) * 100%);
  }

  .about_head {
    margin: 0 auto calc(calc(67px / var(--sp_width)) * 100%);
    width: calc(calc(415px / var(--sp_width)) * 100%);
  }

  .about_text {
    margin: 0 auto calc(calc(130px / var(--sp_width)) * 100%);
    width: calc(calc(626px / var(--sp_width)) * 100%);
  }

  .about_contents {
    background-image: url('../img/about_contents_bg_sp.png');
    background-size: 100%;
  }

  .about_contents_inner {
    max-width: 80%;
    padding: 16% 0% 23.2% 6%;
    width: 100%;
  }

  .about_contents_head {
    margin: 0 auto 7.2%;
    width: 71.534%;
  }

  .about_contents_items {
    /* display: flex;
    justify-content: space-between; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4%;
    row-gap: 2%;
    max-height: 132vw;
  }

  .about_contents_item {
    padding: 0;
    /* width: 48%; */
    width: 100%;
  }

  .about_contents_item:last-child {
    grid-column: span 2;
  }

  /* .about_contents_items > li:nth-of-type(n+4) {
    padding: 4% 0 0;
  } */

  .about_contents_item.no_modal {
    padding: 4% 0;
  }

  .about_icon.about_icon01 {
    inset: 2.4% auto auto 0;
    width: calc(calc(127px / var(--sp_width)) * 100%);
  }

  .about_icon.about_icon02 {
    inset: 33.8% auto auto 0%;
    width: calc(calc(168px / var(--sp_width)) * 100%);
  }

  .about_icon02_woman {
    position: absolute;
    inset: -39% -1% auto auto;
    width: 89%;
  }

  @keyframes about_icon02_floating {
    0% {
      opacity: 1;
      inset: -39% -1% auto auto;
    }

    70% {
      inset: 11% 54% auto auto;
      opacity: 1;
    }

    78% {
      inset: 11% 54% auto auto;
      opacity: 0;
    }

    100% {
      opacity: 0;
      inset: -39% -1% auto auto;
    }
  }

  .about_icon.about_icon03 {
    inset: 0 0 auto auto;
    width: calc(calc(184px / var(--sp_width)) * 100%);
  }

  .icon_pen03_fire {
    inset: auto auto -36% -32%;
    width: 37.5%;
  }

  @keyframes about_icon03_floating {
    0% {
      inset: auto auto -13% -12%;
      width: 16%;
    }

    100% {
      inset: auto auto -17% -16%;
      width: 20%;
    }
  }

  .about_icon.about_icon04 {
    inset: 17.4% 0% auto auto;
    width: calc(calc(140px / var(--sp_width)) * 100%);
  }

  .about_icon.about_icon05 {
    inset: 3.8% auto auto 0;
    width: calc(calc(172px / var(--sp_width)) * 100%);
  }

  .icon_pen05_panda {
    inset: 53.4% auto auto 12%;
    width: 64.54%;
  }
  
  .icon_pen05_neko {
    inset: 106% -319% auto auto;
    width: 56.98%;
  }

  .icon_pen05_line {
    inset: -151% -336% auto auto;
    width: 340.176%;
  }

  .about_icon.about_icon06 {
    inset: 30% 0 auto auto;
    width: calc(calc(166px / var(--sp_width)) * 100%);
  }

  .icon_pen06_fish {
    inset: 20% 55% auto auto;
    width: 38.56%;
  }

  @keyframes about_icon06_floating {
    0% {
      transform: rotate(-10deg) translateX(2.805054vw) translateY(-0.216606vw);
    }

    100% {
      transform: rotate(26deg) translateX(-6.187726vw) translateY(1.732852vw);
    }
  }

  .about_icon.about_icon07 {
    display: none;
  }

  .about_icon.about_icon08 {
    inset: 44.8% -2% auto auto;
    width: calc(calc(140px / var(--sp_width)) * 100%);
    z-index: 3;
  }

  .about_icon.about_icon09 {
    inset: auto 0% 11.5% auto;
    width: calc(calc(138px / var(--sp_width)) * 100%);
  }
  
  .icon_pen09_dog {
    inset: auto 95.4% 7.6% auto;
    width: 183.65%;
  }

  @keyframes about_icon09_floating {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(30%);
    }
  }

  .about_icon.about_icon10 {
    display: none;
  }

  .about_icon.about_icon11 {
    inset: auto auto 7% 5.2%;
    width: calc(calc(209px / var(--sp_width)) * 100%);
  }

  .about_icon.about_icon12 {
    inset: 39.02% 17.6% auto auto;
    width: calc(calc(130px / var(--sp_width)) * 100%);
  }
  
  .icon_pen11_line {
    inset: -21% auto auto -19%;
    width: 26.492%;
  }

  .about_contents_arrow {
    inset: 18.4% auto 0 -3%;
    width: calc(calc(50px / var(--sp_contents_width)) * 100%);
  }

  @keyframes about_contents_arrow {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(4%);
    }
  }

  .modal {
    max-height: 100%;
  }

  .modal_inner {
    overflow-x: auto;
    max-height: 90%;
    height: 100%;
    width: 90%;
  }

  .modal_contents {
    padding: 5% 0 0;
  }

  .modal_item {
    padding: 0;
  }

  .modal_close {
    inset: 1.2% .8% auto auto;
    width: 13.926%;
  }

  .modal_item_btn {
    inset: auto 0 13vw 0;
    width: 77.038%;
  }

  .snsModal {
    max-height: 100%;
  }

  .snsModal_inner {
    overflow-x: auto;
    max-height: 90%;
    height: 100%;
    width: 90%;
  }

  .snsModal_contents {
    padding: 10% 0 0;
  }

  .snsModal_item {
    padding: 0;
  }

  .snsModal_close {
    inset: 0 .8% auto auto;
    width: 13.926%;
  }
  
  .bg_graph_paper {
    background-image: url('../img/howto_bg.jpg');
    background-size: 60px;
    border-radius: 13.333333vw 13.333333vw 0 0;
  }

  .howto_inner {
    max-width: 100%;
    padding: 0 0 calc(calc(180px / var(--sp_width)) * 100%);
    width: 100%;
  }

  .howto_head {
    margin: 0 auto calc(calc(66px / var(--sp_width)) * 100%);
    width: calc(calc(625px / var(--sp_width)) * 100%);
  }

  .howto_step_inner {
    justify-content: unset;
    gap: 0;
  }

  .howto {
    scroll-margin-top: 21.333333vw;
  }

  .howto .swiper-button-prev {
    left: 4%;
    height: 10.133333vw;
    width: 6.8vw;
  }

  .howto .swiper-button-prev::after {
    background-image: url("../img/howto_step_arrow_sp.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    margin: auto;
    height: 100%;
    width: 100%;
  }

  .howto .swiper-button-next {
    right: 4%;
    height: 10.133333vw;
    width: 6.8vw;
  }

  .howto .swiper-button-next::after {
    background-image: url("../img/howto_step_arrow_sp.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    margin: auto;
    transform: rotate(180deg);
    height: 100%;
    width: 100%;
  }

  .post {
    background-size: 60px;
    border-radius: 13.333333vw 13.333333vw 0 0;
  }

  .post_inner {
    max-width: 100%;
    padding: calc(calc(127px / var(--sp_width)) * 100%) 0 calc(calc(180px / var(--sp_width)) * 100%);
    width: 92%;
  }

  .post_head {
    margin: 0 auto 8%;
    width: calc(calc(327px / var(--sp_contents_width)) * 100%);
  }

  .post_items {
    background-image: url("../img/post_items_bg_sp.png");
    justify-content: center;
    /* border: 0.533333vw solid #e50315; */
    /* border-radius: 6.666667vw; */
    padding: 4%;
    margin: 0 auto 10%;
    height: 99.2vw;
    width: calc(calc(572px / var(--sp_contents_width)) * 100%);
  }

  .post_items:not(:has(.coming_soon)) {
    align-items: center;
    justify-content: space-between;
    padding: 4% 8.045%;
    margin: 0 auto 10%;
    max-height: 110vw;
    height: 100%;
    width: calc(calc(572px / var(--sp_contents_width)) * 100%);
  }

  .post_items.length1:not(:has(.coming_soon)) {
    align-items: center;
    max-height: 100%;
    margin: 0 auto 10%;
    height: 94.2vw;
    width: calc(calc(572px / var(--sp_contents_width)) * 100%);
  }

  .post_items.length2:not(:has(.coming_soon)) {
    background-size: 82.89855072463768%;
    align-items: center;
    justify-content: flex-start;
    padding: 0 18%;
    max-height: 110vw;
    height: 94vw;
    margin: 0 auto 10%;
    width: 100%;
  }

  .post_items.length2 .swiper-button-prev,
  .post_items.length2 .swiper-button-next {
    height: 9.733333vw;
    width: 6.666667vw;
  }

  .post_items.length2 .swiper-button-prev {
    left: 0%;
    right: unset;
  }

  .post_items.length2 .swiper-button-next {
    left: unset;
    right: 0%;
  }

  .post_item {
    gap: 0;
    width: 100%;
  }

  .post_items:not(:has(.coming_soon)) > button:nth-of-type(n+3),
  .post_items:not(:has(.coming_soon)) > button:nth-of-type(n+4) {
    margin: 4% 0 0;
  }

  .post_item.coming_soon {
    width: 74.3444%;
  }

  .post_items:not(:has(.coming_soon)) > .post_item img {
    border-radius: 3.733333vw;
  }

  .post_items.length0,
  .post_items.length1 {
    height: 94.266667vw;
  }

  .post_items.length0 .post_items_slider_inner,
  .post_items.length1 .post_items_slider_inner {
    justify-content: center;
  }

  .post_items.length0 .post_item {
    width: 100%;
  }

  .post_items.length1 .post_item {
    width: 80%;
  }

  .post_text {
    margin: 0 auto 8%;
    width: calc(calc(628px / var(--sp_contents_width)) * 100%);
  }

  .post_button {
    width: 100%;
  }

  .feature_inner {
    max-width: 100%;
    padding: calc(calc(218px / var(--sp_width)) * 100%) 0 calc(calc(180px / var(--sp_contents_width)) * 100%);
    width: 92%;
  }

  .feature_title {
    margin: 0 auto 8.4%;
    width: calc(calc(256px / var(--sp_contents_width)) * 100%);
  }

  .feature_head {
    margin: 0 auto 9.2%;
    width: calc(calc(585px / var(--sp_contents_width)) * 100%);
  }

  .feature_list {
    margin: 0 auto 10%;
    width: calc(calc(673px / var(--sp_contents_width)) * 100%);
  }

  .feature_text {
    margin: 0 auto 10%;
    width: calc(calc(686px / var(--sp_contents_width)) * 100%);
  }

  .feature_img {
    margin: 0 auto 10%;
    width: calc(calc(671px / var(--sp_contents_width)) * 100%);
  }

  .feature_btn {
    margin: 0 auto 6.2%;
    width: calc(calc(520px / var(--sp_contents_width)) * 100%);
  }

  .feature_btn02 {
    width: calc(calc(689px / var(--sp_contents_width)) * 100%);
  }

  .menu_btn {
    inset: 3.333333vw 3.770833vw auto auto;
    width: 10.268%;
  }

  .menu_btn.is_active {
    inset: 3.239583vw 3.760417vw auto auto;
    width: 8%;
  }

  .menu {
    inset: 0 0 0 auto;
    transform: translateY(0) translateX(110%);
    width: 75%;
  }

  .menu.is_active {
    transform: translateY(0) translateX(0);
  }

  .menu_inner {
    padding: 36.6% 0 0;
    width: 80%;
  }

  .menu_lists {
    flex-direction: column;
  }

  .menu_list {
    position: relative;
    width: 100% !important;
  }

  .menu_lists > li:not(:last-of-type) {
    margin: 0 0 7%;
    padding: 0 0 7%;
  }

  .menu_lists > li:not(:last-of-type)::after {
    background-image: url("../img/menu_lists_line_sp.png");
    background-size: 100%;
    background-position: center;
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    margin: 0 auto;
    height: 1.333333vw;
    width: 100%;
  }

  .menu_lists > li a {
    display: block;
    padding: 0 3%;
  }

  .menu_lists > li:nth-of-type(1) picture {
    display: block;
    width: 92%;
  }

  .menu_lists > li:nth-of-type(2) {
    margin: -2% 0 7% !important;
  }

  .menu_lists > li:nth-of-type(2) picture {
    display: block;
    width: 88.445%;
  }

  .menu_lists > li:nth-of-type(3) picture {
    display: block;
    width: 49.334%;
  }

  .menu_lists > li:nth-of-type(4) picture {
    display: block;
    width: 61.556%;
  }

  .menu_lists > li:nth-of-type(5) picture {
    display: block;
    width: 71.112%;
  }

  .footer_links {
    flex-direction: column;
    margin: 0 auto;
    max-width: 100%;
    padding: 6% 0;
    width: 90%;
  }

  .footer_link {
    position: relative;
  }

  .footer_links > li:not(:last-of-type) {
    padding: 0 0 4%;
    margin: 0 auto 4%;
  }

  .footer_links > li:not(:last-of-type)::after {
    border-bottom: 2px solid rgb(242 131 139 / 50);
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    margin: 0 auto;
    height: 2px;
    width: 100%;
  }

  .footer_links a {
    display: block;
    width: 100%;
  }

  .icon_instagram {
    width: 100%;
  }

  .icon_instagram picture {
    display: block;
    margin: 0 auto;
    width: 40.445%;
  }

  .icon_x {
    width: 100%;
  }

  .icon_x picture {
    display: block;
    margin: 0 auto;
    width: 7.408%;
  }

  .icon_youtube {
    width: 100%;
  }

  .icon_youtube picture {
    display: block;
    margin: 0 auto;
    width: 30.52%;
  }

  .footer_copy {
    font-size: 2.666667vw;
    padding: 3vw 0 3.2vw;
  }
}

@media screen and (max-width: 460px) {
  .bg_graph_paper {
    background-size: 11vw;
  }
  
  .post {
    background-size: 11vw;
  }
}