@charset "UTF-8";
/* 設定
===================================================== */
/* ベース
===================================================== */
:root {
  --base: 100vw;
}
@media screen and (min-width: 769px) {
  :root {
    --base: min(50vw, 440px);
  }
  @supports (width: round(down, 1.5px, 1px)) {
    :root {
      --base: min(round(down, 50vw, 1px), 440px);
    }
  }
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  line-height: 1.5;
  letter-spacing: 0.2px;
  font-size: 11px;
  transition: all 1.6s ease 0s;
  background-color: #faf1e1;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  color: #3a3233;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

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

/* .load（ローディング幕）
===================================================== */
.load {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  background-color: #faf1e1;
  transition: opacity 1.6s ease-in-out, visibility 1.6s ease-in-out;
}
.load.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* クレジット（Figma: credit）
===================================================== */
.item_credit {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--base) * 0.0512820513);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  font-size: calc(var(--base) * 0.0307692308);
  line-height: 1;
  color: #3a3233;
  white-space: nowrap;
}
.item_credit--light {
  color: #faf1e1;
}
.item_credit--gap10 {
  gap: calc(var(--base) * 0.0256410256);
}
.item_credit--column {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--base) * 0.0153846154);
}

.item_credit_link {
  display: block;
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-skip-ink: none;
}
.item_credit_link span + span::before {
  content: " ";
}

/* .switch（swiper：画像とクレジットをフェードで切り替え）
===================================================== */
.switch .swiper {
  width: calc(var(--base) * 1);
}
.switch .swiper-slide {
  background-color: #faf1e1;
}
.switch .switch_credit {
  margin-top: calc(var(--base) * 0.0307692308);
  padding-bottom: calc(var(--base) * 0.0153846154);
}
.switch--r {
  padding-bottom: calc(var(--base) * 0.5128205128);
  background-color: #faf1e1;
}
.switch--r .switch_chara {
  width: calc(var(--base) * 0.2102564103);
  margin: calc(var(--base) * 0.0487179487) 0 0 calc(var(--base) * 0.7358974359);
}
.switch--k {
  padding-bottom: calc(var(--base) * 0.5128205128);
}
.switch--k .swiper-slide {
  background-color: #f7e5f1;
}
.switch--k .switch_credit {
  margin-top: calc(var(--base) * 0.0512820513);
}
.switch--k .switch_chara {
  width: calc(var(--base) * 0.1974358974);
  margin: calc(var(--base) * 0.0717948718) 0 0 calc(var(--base) * 0.7307692308);
}

/* PC：左半分に固定追従する CHECK ALL ITEMS
===================================================== */
.pc_side {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50vw;
  height: 100vh;
  height: 100svh;
}
.pc_side .pc_side_btn {
  display: block;
  width: 32.109375vw;
}

/* main
===================================================== */
main {
  position: relative;
  z-index: 1;
  width: calc(var(--base) * 1);
  overflow-x: clip;
}
@media screen and (min-width: 769px) {
  main {
    margin-left: calc(50vw + (50vw - var(--base)) / 2);
  }
  @supports (width: round(down, 1.5px, 1px)) {
    main {
      margin-left: round(down, 50vw + (50vw - var(--base)) / 2, 1px);
    }
  }
}

/* PC：右カラム最上部のFV画像
===================================================== */
.pc_fv {
  margin-bottom: calc(var(--base) * 0.0227179487);
}

/* .fv
===================================================== */
.fv {
  position: sticky;
  top: 0;
  z-index: 0;
  padding: calc(var(--base) * 0.2051282051) 0 calc(var(--base) * 0.2564102564);
  background-color: #faf1e1;
}
.fv .fv_sab {
  width: calc(var(--base) * 1);
}
.fv .fv_logo {
  width: calc(var(--base) * 0.2641025641);
  margin: calc(var(--base) * 0.0264102564) auto 0;
}

/* .r_sec（リラックマ・ブラウン）
===================================================== */
.r_sec {
  position: relative;
  z-index: 1;
  overflow-x: clip;
  background-color: #7b5544;
}
.r_sec .r_item1 {
  position: relative;
}
.r_sec .circle {
  position: absolute;
  z-index: 1;
  width: calc(var(--base) * 0.2564102564);
  pointer-events: none;
}
.r_sec .circle--r {
  right: 0;
  bottom: calc(var(--base) * -0.1820512821);
}
.r_sec .circle--l {
  top: calc(var(--base) * -0.0717948718);
  left: 0;
  width: calc(var(--base) * 0.2435897436);
  transform: scaleX(-1);
}
.r_sec .r_item1_credit {
  position: relative;
  z-index: 2;
  width: calc(var(--base) * 0.5564102564);
  height: calc(var(--base) * 0.0769230769);
  margin: calc(var(--base) * 0.0153846154) auto 0;
  background-color: #7b5544;
}
.r_sec .r_item2 {
  position: relative;
  width: calc(var(--base) * 0.9564102564);
  margin-top: calc(var(--base) * 0.1358974359);
}
.r_sec .circle_txt {
  position: absolute;
  right: calc(var(--base) * -0.2576923077);
  bottom: calc(var(--base) * -0.4320512821);
  z-index: 1;
  width: calc(var(--base) * 0.6076923077);
  pointer-events: none;
  animation: circle_rotate 20s linear infinite;
}
.r_sec .r_item2_credit {
  position: relative;
  z-index: 2;
  margin: calc(var(--base) * -0.0051282051) 0 0 calc(var(--base) * 0.0641025641);
}
.r_sec .r_item3 {
  width: calc(var(--base) * 0.5496794872);
  margin: calc(var(--base) * 0.1692307692) 0 0 calc(var(--base) * 0.0102564103);
}
.r_sec .r_item3 .r_item3_img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--base) * 0.641025641);
}
.r_sec .r_item3 .r_item3_img img {
  width: calc(var(--base) * 0.5128205128);
  transform: rotate(-3.55deg);
}
.r_sec .r_item3 .item_credit {
  margin-top: calc(var(--base) * 0.0153846154);
}
.r_sec .r_item4 {
  width: calc(var(--base) * 0.6551871795);
  margin: calc(var(--base) * 0.058974359) 0 0 calc(var(--base) * 0.3014358974);
}
.r_sec .r_item4 .r_item4_img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--base) * 0.5086153846);
}
.r_sec .r_item4 .r_item4_img img {
  width: calc(var(--base) * 0.6153846154);
  transform: rotate(5.39deg);
}
.r_sec .r_item4 .item_credit {
  justify-content: flex-end;
  margin: calc(var(--base) * -0.0512820513) calc(var(--base) * 0.0435897436) 0 0;
}
.r_sec .r_item5 {
  width: calc(var(--base) * 0.5641025641);
  margin: calc(var(--base) * 0.1051282051) 0 0 calc(var(--base) * 0.0769230769);
}
.r_sec .r_item5 .r_item5_img {
  display: block;
}
.r_sec .r_item5 .item_credit {
  margin-top: calc(var(--base) * 0.0230769231);
  padding-left: calc(var(--base) * 0.0333333333);
}

.r_back {
  margin-top: calc(var(--base) * 0.2358974359);
  padding: calc(var(--base) * 0.1666666667) 0 calc(var(--base) * 0.0846153846);
  background-color: #faf1e1;
  background-image: url(../images/r_back.webp);
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.r_back .r_item6 {
  width: calc(var(--base) * 0.8179487179);
  margin-left: calc(var(--base) * 0.0666666667);
}
.r_back .item_credit {
  margin-top: calc(var(--base) * 0.041025641);
}

/* .k_sec（コリラックマ・ピンク・上部楕円）
===================================================== */
.k_sec {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background-color: #e6c0c0;
  border-radius: calc(var(--base) * 0.5) calc(var(--base) * 0.5) 0 0/calc(var(--base) * 0.1538461538) calc(var(--base) * 0.1538461538) 0 0;
}
.k_sec .k_top {
  position: relative;
  padding: calc(var(--base) * 0.3358974359) 0 calc(var(--base) * 0.1538461538);
}
.k_sec .k_txt {
  position: absolute;
  top: calc(var(--base) * 0.0307692308);
  bottom: 0;
  width: calc(var(--base) * 0.0461538462);
  overflow: hidden;
  pointer-events: none;
}
.k_sec .k_txt--l {
  left: calc(var(--base) * 0.0320512821);
}
.k_sec .k_txt--r {
  right: calc(var(--base) * 0.0320512821);
}
.k_sec .k_txt_track {
  display: flex;
  flex-direction: column;
  animation: k_txt_flow 40s linear infinite;
}
.k_sec .k_item1 {
  width: calc(var(--base) * 1.0846153846);
}
.k_sec .k_item1_credit {
  margin-top: calc(var(--base) * 0.0282051282);
}
.k_sec .k_item2_credit {
  margin-top: calc(var(--base) * 0.0512820513);
}
.k_sec .k_goods {
  position: relative;
  height: calc(var(--base) * 1.3846153846);
  margin-top: calc(var(--base) * 0.2051282051);
}
.k_sec .k_good {
  position: absolute;
  transition: top 1s ease, left 1s ease;
}
.k_sec .k_good[data-item=k_item3] {
  --pb: 0.0892;
}
.k_sec .k_good[data-item=k_item4] {
  --pb: 0.0908;
}
.k_sec .k_good[data-item=k_item5] {
  --pb: 0.0892;
}
.k_sec .k_good .k_good_img {
  display: block;
  width: var(--size);
  transition: width 1s ease;
}
.k_sec .k_good .item_credit {
  margin-top: calc(var(--gap) - var(--size) * 1.2 * var(--pb));
  transition: margin-top 1s ease;
}
.k_sec .k_good.is-top {
  --size: calc(var(--base) * 0.7820512821);
  --gap: calc(var(--base) * 0.0256410256);
  top: calc(var(--base) * -0.0692307692);
  left: calc(var(--base) * 0.1102564103);
}
.k_sec .k_good.is-right {
  --size: calc(var(--base) * 0.4666666667);
  --gap: calc(var(--base) * 0.0307692308);
  top: calc(var(--base) * 0.8102564103);
  left: calc(var(--base) * 0.5128205128);
}
.k_sec .k_good.is-left {
  --size: calc(var(--base) * 0.4666666667);
  --gap: calc(var(--base) * 0.0307692308);
  top: calc(var(--base) * 0.8102564103);
  left: calc(var(--base) * 0.0205128205);
}
.k_sec .k_copy {
  margin: calc(var(--base) * 0.158974359) 0 0 calc(var(--base) * 0.058974359);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  font-size: calc(var(--base) * 0.0307692308);
  line-height: 1;
  line-height: 1.5;
  color: rgba(250, 241, 225, 0.8);
}

.k_wrap {
  margin-top: calc(var(--base) * 0.3435897436);
  background-color: #f7e5f1;
}

.k_back {
  padding: calc(var(--base) * 0.3076923077) 0 calc(var(--base) * 0.1435897436);
  background-color: #f7e5f1;
  background-image: url(../images/k_back.webp);
  background-blend-mode: multiply;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.k_back .k_item6 {
  width: calc(var(--base) * 0.8692307692);
  margin-left: calc(var(--base) * 0.0076923077);
}
.k_back .item_credit {
  margin-top: calc(var(--base) * 0.0512820513);
}

/* .btm（フッター）
===================================================== */
.btm {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: -1px;
  padding: calc(calc(var(--base) * 0.2487179487) + 1px) 0 calc(var(--base) * 0.0461538462);
}
@media screen and (min-width: 769px) {
  .btm {
    justify-content: center;
    padding-top: calc(calc(var(--base) * 0.0461538462) + 1px);
  }
}
.btm {
  background-color: #faf1e1;
  text-align: center;
}
.btm .all_btn {
  display: block;
  width: calc(var(--base) * 0.9346153846);
  margin-left: calc(var(--base) * 0.0408461538);
}
.btm .btm_nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--base) * 0.0512820513);
  margin-top: calc(var(--base) * 0.0051282051);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  font-size: calc(var(--base) * 0.0461538462);
  line-height: 1;
  color: #3a3233;
}
.btm .btm_logo {
  width: calc(var(--base) * 0.3512820513);
  margin: calc(var(--base) * 0.1282051282) auto 0;
}
.btm .btm_company {
  margin-top: calc(var(--base) * 0.0358974359);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  font-size: calc(var(--base) * 0.0461538462);
  line-height: 1;
  color: #3a3233;
}
.btm .btm_sanx {
  width: calc(var(--base) * 0.6849487179);
  margin: calc(var(--base) * 0.0794871795) auto 0;
}
.btm .btm_copy {
  margin-top: calc(var(--base) * 0.0256410256);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  font-size: calc(var(--base) * 0.0307692308);
  line-height: 1;
  color: #3a3233;
}

/* keyframes
===================================================== */
@keyframes circle_rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes k_txt_flow {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}/*# sourceMappingURL=style.css.map */