@charset "UTF-8";
/* -------------------------------------
 :: Custom property
------------------------------------- */
:root {
  /* base-width */
  --vw-base: 375;
}
@media screen and (min-width: 769px) {
  :root {
    --vw-base: 1200;
  }
}
:root {
  /* color */
  --color-base: #F5F5F4;
  --color-accent: #DA4264;
  --color-black: #151515;
  /* letter-spacing */
  --letter-spacing: 0;
  /* cubic-bezier */
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22); /* easeInQuart */
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1); /* easeOutQuart */
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1); /* easeInOutQuart */
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06); /* easeInQuint */
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1); /* easeOutQuint */
  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1); /* easeInOutQuint */
}

/* -------------------------------------
 :: Reset
------------------------------------- */
body {
  margin: 0;
  padding: 0;
}

.tot-wrapper :where(*, *::before, *::after),
.tot-modal :where(*, *::before, *::after) {
  box-sizing: border-box;
  letter-spacing: var(--letter-spacing);
}

.tot-wrapper :where(body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, figure),
.tot-modal :where(body, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, figure) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tot-wrapper :where(img),
.tot-modal :where(img) {
  max-width: 100%;
  margin-inline: auto;
  height: auto;
  display: block;
}

.tot-wrapper :where(a, button),
.tot-modal :where(a, button) {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  font-size: inherit;
  font-weight: inherit;
  vertical-align: middle;
  border: 0;
  background: inherit;
}

/* -------------------------------------
 :: Common
------------------------------------- */
.tot-wrapper,
.tot-modal {
  width: 100%;
  margin: 0 auto;
  color: var(--color-black);
  background: var(--color-base);
  font-family: "Noto Sans", sans-serif;
  font-size: clamp(10px, calc(14 / var(--vw-base) * 100vw), 16px);
  font-weight: 500;
  line-height: 2;
}

@media screen and (min-width: 769px) {
  .tot-wrapper,
  .tot-modal {
    font-size: clamp(16px, calc(18 / var(--vw-base) * 100vw), 18px);
  }
}
.tot-wrapper {
  position: relative;
  min-width: 320px;
}

/* モーダル表示中のチラつき防止 */
body[style*="overflow: hidden"] .tot-wrapper {
  will-change: transform;
  transform: translateZ(0);
}

.tot-inner {
  position: relative;
  width: calc(325 / var(--vw-base) * 100%);
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .tot-inner {
    width: min(calc(1000 / var(--vw-base) * 100vw), 1000px);
  }
}

.tot-inner-s {
  display: block;
  position: relative;
  width: calc(285 / var(--vw-base) * 100%);
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .tot-inner-s {
    width: min(calc(1000 / var(--vw-base) * 100vw), 1000px);
  }
}

/* font
--------------------------  */
.tot-barlow {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.05em;
}

/* Button
--------------------------  */
.tot-btn,
.tot-btn-toggle {
  position: relative;
  display: grid;
  place-content: center;
  width: min(calc(200 / var(--vw-base) * 100vw), 300px);
  aspect-ratio: 300/90;
  margin-inline: auto;
  color: #fff;
  background: var(--color-black);
}
@media screen and (min-width: 769px) {
  .tot-btn,
  .tot-btn-toggle {
    width: min(calc(380 / var(--vw-base) * 100vw), 380px);
    aspect-ratio: 380/80;
  }
}

.tot-btn::after {
  content: "";
  display: block;
  position: absolute;
  right: max(-20 / var(--vw-base) * 100vw, -20px);
  top: 50%;
  width: min(calc(40 / var(--vw-base) * 100vw), 40px);
  height: 1px;
  background: #fff;
  mix-blend-mode: difference;
  transform: scaleX(0);
  transform-origin: left;
  animation: lineLoop 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@media screen and (min-width: 769px) {
  .tot-btn::after {
    right: max(-20 / var(--vw-base) * 100vw, -20px);
    width: min(calc(60 / var(--vw-base) * 100vw), 60px);
  }
}

@keyframes lineLoop {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  45% {
    transform: scaleX(1);
    transform-origin: left;
  }
  70% {
    transform: scaleX(1);
    transform-origin: left;
  }
  71% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}
.tot-btn img,
.tot-btn-toggle img {
  width: auto;
  height: min(calc(40 / var(--vw-base) * 100vw), 60px);
}
@media screen and (min-width: 769px) {
  .tot-btn img,
  .tot-btn-toggle img {
    height: min(calc(44 / var(--vw-base) * 100vw), 44px);
  }
}

@media (hover: hover) {
  .tot-btn,
  .tot-btn-toggle {
    transition: filter 0.5s var(--ease-out-quart);
  }
  .tot-btn img,
  .tot-btn-toggle img {
    transition: transform 0.5s var(--ease-out-quart);
  }
  .tot-btn:hover,
  .tot-btn-toggle:hover {
    filter: invert(100%);
  }
}
/* Text
--------------------------  */
.tot-em {
  color: var(--color-accent);
  font-style: normal;
  font-weight: 700;
}

/* Accordion
--------------------------  */
.tot-btn-toggle::before,
.tot-btn-toggle::after {
  content: "";
  display: block;
  position: absolute;
  right: min(calc(16 / var(--vw-base) * 100vw), 24px);
  top: 50%;
  width: min(calc(9 / var(--vw-base) * 100vw), 13.5px);
  height: 1px;
  background: #fff;
  transition: transform 0.2s ease;
}
@media screen and (min-width: 769px) {
  .tot-btn-toggle::before,
  .tot-btn-toggle::after {
    right: min(calc(20 / var(--vw-base) * 100vw), 20px);
    width: min(calc(14 / var(--vw-base) * 100vw), 14px);
  }
}

.tot-btn-toggle::after {
  transform: rotate(90deg);
}

.tot-label-open {
  display: none;
}

.tot-btn-toggle.is-open .tot-label-close {
  display: none;
}
.tot-btn-toggle.is-open .tot-label-open {
  display: block;
}
.tot-btn-toggle.is-open::after {
  transform: rotate(0deg);
}

[data-js-accordion=content] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.tot-note {
  color: #888;
  margin-top: 10px;
  font-size: 10px;
  line-height: 1.5;
}
@media screen and (min-width: 769px) {
  .tot-note {
    font-size: 12px;
  }
}

/* video
--------------------------  */
.tot-video {
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .tot-video {
    width: min(calc(850 / var(--vw-base) * 100vw), 850px);
  }
}

.tot-video > a {
  display: block;
  position: relative;
}

.tot-video > a::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 25 / var(--vw-base) * 100vw);
  left: calc(50% - 25 / var(--vw-base) * 100vw);
  width: calc(50 / var(--vw-base) * 100vw);
  aspect-ratio: 1/1;
  background: var(--color-black);
  border-radius: 50%;
}
@media screen and (min-width: 769px) {
  .tot-video > a::before {
    top: calc(50% - min(65 / var(--vw-base) * 100vw, 65px));
    left: calc(50% - min(65 / var(--vw-base) * 100vw, 65px));
    width: min(calc(130 / var(--vw-base) * 100vw), 130px);
  }
}

.tot-video > a::after {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 12 / var(--vw-base) * 100vw);
  left: calc(51% - 12 / var(--vw-base) * 100vw);
  width: calc(23 / var(--vw-base) * 100vw);
  aspect-ratio: 1/1;
  background: url("../images/icn_triangle.svg") no-repeat center/contain;
}
@media screen and (min-width: 769px) {
  .tot-video > a::after {
    top: calc(50% - min(33 / var(--vw-base) * 100vw, 33px));
    left: calc(51% - min(33 / var(--vw-base) * 100vw, 33px));
    width: min(calc(66 / var(--vw-base) * 100vw), 66px);
  }
}

@media (hover: hover) {
  .tot-video > a {
    opacity: 1;
  }
  .tot-video > a::before {
    transition: filter 0.5s var(--ease-out-quart), transform 0.5s var(--ease-out-quart);
  }
  .tot-video > a::after {
    transition: filter 0.5s var(--ease-out-quart);
  }
  .tot-video > a:hover::before {
    filter: invert(100%);
    transform: scale(1.05);
  }
  .tot-video > a:hover::after {
    filter: invert(100%);
  }
}
.tot-video-caption {
  font-size: clamp(12px, calc(12 / var(--vw-base) * 100vw), 16px);
}
@media screen and (min-width: 769px) {
  .tot-video-caption {
    margin-block: 0.6em;
    font-size: 1em;
  }
}

/* -------------------------------------
 :: Animation
------------------------------------- */
.tot-anim-fade-in {
  opacity: 0;
  transition: opacity 1s var(--ease-out-quart);
}

.tot-anim-fade-in.is-animated,
.is-animated .tot-anim-fade-in {
  opacity: 1;
}

.tot-anim-fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-out-quart), transform 1s var(--ease-out-quart);
}

.tot-anim-fade-in-up.is-animated,
.is-animated .tot-anim-fade-in-up {
  opacity: 1;
  transform: translateY(0%);
}

.tot-anim-reveal-right {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
  transition: -webkit-clip-path 1s var(--ease-out-quart);
  transition: clip-path 1s var(--ease-out-quart);
  transition: clip-path 1s var(--ease-out-quart), -webkit-clip-path 1s var(--ease-out-quart);
}

.tot-anim-reveal-right.is-animated,
.is-animated .tot-anim-reveal-right {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}

@keyframes revealRight {
  0% {
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
}
/* -------------------------------------
 :: Loader
------------------------------------- */
.tot-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  transition: opacity 0.8s cubic-bezier(0.7, 0, 0.3, 1), visibility 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}

.tot-loader.is-loaded {
  opacity: 0;
  visibility: hidden;
}

/* -------------------------------------
 :: MV
------------------------------------- */
.tot-mv {
  aspect-ratio: 375/550;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .tot-mv {
    aspect-ratio: unset;
    max-height: 760px;
  }
}

.tot-mv__top {
  position: relative;
  aspect-ratio: 375/272;
  background: #F0F0EF;
}
@media screen and (min-width: 769px) {
  .tot-mv__top {
    aspect-ratio: unset;
    height: 372px;
    margin-inline: auto;
  }
}

.tot-mv__top-txt {
  position: absolute;
  top: calc(175 / var(--vw-base) * 100vw);
  left: calc(25 / var(--vw-base) * 100vw);
  width: calc(95 / var(--vw-base) * 100vw);
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
@media screen and (min-width: 769px) {
  .tot-mv__top-txt {
    top: 212px;
    left: calc(50% - 333px);
    width: 167px;
  }
}

.tot-mv__top-img {
  width: 100%;
  opacity: 0;
  transform: translateY(20%);
  transition: transform 0.8s ease, opacity 0.3s ease-out;
}
@media screen and (min-width: 769px) {
  .tot-mv__top-img {
    width: 1140px;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.tot-mv__bottom {
  position: relative;
  margin-top: calc(-27 / var(--vw-base) * 100vw);
  padding-top: calc(46 / var(--vw-base) * 100vw);
  aspect-ratio: 375/306;
  -webkit-clip-path: polygon(50% calc(27 / var(--vw-base) * 100vw), 100% 0, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(50% calc(27 / var(--vw-base) * 100vw), 100% 0, 100% 100%, 0 100%, 0 0);
  background: url(../images/bg_mv.webp) no-repeat center/cover var(--color-base);
}
@media screen and (min-width: 769px) {
  .tot-mv__bottom {
    margin-top: calc(-105 / var(--vw-base) * 100vw);
    padding-block: calc(105 / var(--vw-base) * 100vw + 28px) 42px;
    aspect-ratio: unset;
    -webkit-clip-path: polygon(50% calc(105 / var(--vw-base) * 100vw), 100% 0, 100% 100%, 0 100%, 0 0);
            clip-path: polygon(50% calc(105 / var(--vw-base) * 100vw), 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

.tot-mv__bottom-img {
  width: calc(343 / var(--vw-base) * 100vw);
  opacity: 0;
  transform: translateY(20px);
  transition: transform 1s ease, opacity 1s ease;
}
@media screen and (min-width: 769px) {
  .tot-mv__bottom-img {
    width: min(calc(1000 / var(--vw-base) * 100vw), 1000px);
  }
}

.tot-mv.is-loaded .tot-mv__top-img {
  opacity: 1;
  transform: translateY(0px);
}
.tot-mv.is-loaded .tot-mv__top-txt {
  opacity: 1;
  animation: revealRight 1s var(--ease-out-quart) forwards;
  animation-delay: 0.2s;
}
.tot-mv.is-loaded .tot-mv__bottom-img {
  opacity: 1;
  transform: translateY(0px);
  transition-delay: 1.2s;
}

/* -------------------------------------
 :: Statement
------------------------------------- */
.tot-statement__inner {
  position: relative;
}
@media screen and (min-width: 769px) {
  .tot-statement__inner {
    padding-left: 50%;
  }
}

.tot-statement__bg {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100dvh;
}

.tot-statement__bg-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.tot-statement__content {
  display: flex;
  flex-direction: column;
  gap: calc(30 / var(--vw-base) * 100vw);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: -30%;
  margin-inline: auto;
  padding-bottom: 30dvh;
  position: relative;
}
@media screen and (min-width: 769px) {
  .tot-statement__content {
    gap: min(calc(40 / var(--vw-base) * 100vw), 40px);
    padding-bottom: 30dvh;
  }
}

.tot-statement__txt {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

.tot-statement__txt span {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-inline: calc(8 / var(--vw-base) * 100vw);
  position: relative;
}

.tot-statement__txt span::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #fff;
  width: 0;
  z-index: -1;
  transition: width 1s var(--ease-out-quint);
}

.tot-statement__txt span:nth-child(2):before {
  transition-delay: 0.1s;
}

.tot-statement__txt span:nth-child(3):before {
  transition-delay: 0.2s;
}

.tot-statement__txt span:nth-child(4):before {
  transition-delay: 0.3s;
}

.tot-statement__txt.is-animated {
  opacity: 1;
  visibility: visible;
}
.tot-statement__txt.is-animated span {
  animation: SlideUp 0.5s ease-out forwards;
}
.tot-statement__txt.is-animated span::before {
  width: 100%;
}

@keyframes SlideUp {
  0% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}
.tot-statement__txt img {
  margin: 0;
  width: auto;
  height: min(calc(36 / var(--vw-base) * 100vw), 40px);
}
@media screen and (min-width: 769px) {
  .tot-statement__txt img {
    height: min(calc(54 / var(--vw-base) * 100vw), 54px);
  }
}

.tot-statement__note {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

/* -------------------------------------
 :: Product
------------------------------------- */
.tot-product {
  padding-top: calc(74 / var(--vw-base) * 100vw);
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .tot-product {
    padding-top: min(calc(168 / var(--vw-base) * 100vw), 168px);
  }
}

.tot-product__inner {
  position: relative;
}
@media screen and (min-width: 769px) {
  .tot-product__inner {
    width: min(100%, 1000px);
    margin-inline: auto;
  }
}

.tot-product__header {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(65 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-product__header {
    height: min(calc(173 / var(--vw-base) * 100vw), 173px);
  }
}

.tot-product__header::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0.5px;
  background: var(--color-black);
  transition: width 1.5s var(--ease-out-quart);
}
@media screen and (min-width: 769px) {
  .tot-product__header::after {
    left: calc(-50vw + 50%);
    width: min(100vw, 100% + 50vw - 50% + min(50vw - 50%, 100px));
  }
}

.tot-product__copy {
  position: relative;
  place-content: center;
  width: 70.6666666667%;
  height: 100%;
}

.tot-product__copy::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 0.5px;
  height: 0;
  background: var(--color-black);
  transition: height 1s var(--ease-out-quart);
}

.tot-product__copy-img {
  width: 83.3962264151%;
}

.tot-product__logo {
  place-content: center;
  width: 29.3333333333%;
  height: 100%;
}

.tot-product__logo-img {
  width: 65.4545454545%;
}

.tot-product__body {
  display: grid;
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-columns: 26.1538461538% auto;
  gap: 7.7333333333% 2.6666666667%;
  position: relative;
  padding-inline: 6.6666666667%;
}
@media screen and (min-width: 769px) {
  .tot-product__body {
    grid-template-columns: 24.7674418605% auto;
    gap: 9.6511627907% 3.9534883721%;
    padding-inline: 7.3% 6.7%;
  }
}

.tot-product__body::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0.5px;
  background: var(--color-black);
  transition: width 1.5s var(--ease-out-quart);
}
@media screen and (min-width: 769px) {
  .tot-product__body::after {
    right: calc(-50vw + 50%);
  }
}

.tot-product__body img {
  width: 100%;
}

.tot-product__bottle {
  grid-row: 1/5;
  grid-column: 1/2;
  aspect-ratio: 85/240;
  overflow: hidden;
  margin-top: 23.5294117647%;
}

.tot-product__bottle-img {
  opacity: 0;
  transform: translateY(50%);
  transition: transform 1s var(--ease-out-quint), opacity 0.3s ease-out;
}

.tot-product__name {
  grid-row: 2/3;
  grid-column: 2/3;
}

.tot-product__btn {
  grid-row: 3/4;
  grid-column: 2/3;
}
@media screen and (min-width: 769px) {
  .tot-product__btn .tot-btn {
    aspect-ratio: 380/100;
  }
  .tot-product__btn .tot-btn img {
    height: min(54 / var(--vw-base) * 100vw, 54px);
  }
}

.tot-product__note {
  padding-inline: 6.6666666667%;
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .tot-product__note {
    margin-top: 20px;
  }
}

.tot-product.is-animated .tot-product__header::after {
  width: 100%;
}
@media screen and (min-width: 769px) {
  .tot-product.is-animated .tot-product__header::after {
    width: min(100vw, 100% + 50vw - 50% + min(50vw - 50%, 100px));
  }
}
.tot-product.is-animated .tot-product__copy::after {
  height: 100%;
}
.tot-product.is-animated .tot-product__bottle-img {
  opacity: 1;
  transform: translateY(0);
}
.tot-product.is-animated .tot-product__copy-img {
  transition-delay: 0.2s;
}
.tot-product.is-animated .tot-product__logo-img {
  transition-delay: 0.2s;
}
.tot-product.is-animated .tot-product__name-img {
  transition-delay: 0.4s;
}
.tot-product.is-animated .tot-product__body::after {
  width: 100%;
  transition-delay: 0.4s;
}
@media screen and (min-width: 769px) {
  .tot-product.is-animated .tot-product__body::after {
    width: min(100vw, 100% + 50vw - 50% + min(50vw - 50%, 100px));
  }
}

/* -------------------------------------
 :: Movie
------------------------------------- */
.tot-movie {
  position: relative;
  padding-block: calc(80 / var(--vw-base) * 100vw);
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .tot-movie {
    padding-block: min(11.1111111111vw, 160px) min(21.3888888889vw, 308px);
  }
}

.tot-movie::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/bg_mosaic_sp.webp") no-repeat center/cover;
  -webkit-clip-path: polygon(0 calc(130 / var(--vw-base) * 100vw), 100% calc(30 / var(--vw-base) * 100vw), 100% 100%, 0 calc(100% - 40 / var(--vw-base) * 100vw));
          clip-path: polygon(0 calc(130 / var(--vw-base) * 100vw), 100% calc(30 / var(--vw-base) * 100vw), 100% 100%, 0 calc(100% - 40 / var(--vw-base) * 100vw));
}
@media screen and (min-width: 769px) {
  .tot-movie::before {
    background-image: url("../images/bg_mosaic_pc.webp");
    -webkit-clip-path: polygon(0 min(26.6666666667vw, 384px), 100% 0, 100% 100%, 0 calc(100% - min(10.625vw, 153px)));
            clip-path: polygon(0 min(26.6666666667vw, 384px), 100% 0, 100% 100%, 0 calc(100% - min(10.625vw, 153px)));
  }
}

.tot-movie .tot-video-caption {
  font-size: calc(10 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-movie .tot-video-caption {
    font-size: 1em;
  }
}

/* -------------------------------------
 :: Feature
------------------------------------- */
.tot-feature {
  position: relative;
  background: #fff;
  padding-block: calc(60 / var(--vw-base) * 100vw) calc(80 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-feature {
    padding-block: min(11.1111111111vw, 160px);
  }
}

.tot-feature::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(-80 / var(--vw-base) * 100vw);
  left: 0;
  right: 0;
  bottom: calc(-80 / var(--vw-base) * 100vw);
  background: #fff;
}
@media screen and (min-width: 769px) {
  .tot-feature::before {
    top: max(-11.1111111111vw, -160px);
    bottom: max(-16.6666666667vw, -240px);
  }
}

.tot-feature__inner {
  position: relative;
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .tot-feature__inner {
    width: min(calc(1000 / var(--vw-base) * 100vw), 1000px);
  }
}

.tot-feature__ttl {
  position: relative;
  margin-bottom: calc(40 / var(--vw-base) * 100vw);
  padding-bottom: calc(32 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-feature__ttl {
    margin-bottom: min(90 / var(--vw-base) * 100vw, 90px);
    padding-bottom: min(32 / var(--vw-base) * 100vw, 32px);
    text-align: center;
  }
}

.tot-feature__ttl::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0.5px;
  background: var(--color-black);
  transition: width 1s var(--ease-out-quart);
}

.is-animated::after {
  width: calc(350 / var(--vw-base) * 100%);
}
@media screen and (min-width: 769px) {
  .is-animated::after {
    width: 100%;
  }
}

.tot-feature__ttl-img {
  width: 100%;
  transition-delay: 0.4s;
}
@media screen and (min-width: 769px) {
  .tot-feature__ttl-img {
    width: min(440 / var(--vw-base) * 100vw, 440px);
    aspect-ratio: 440/232;
  }
}

.tot-feature__chara {
  position: absolute;
  top: calc(14 / var(--vw-base) * 100vw);
  right: calc(-11 / var(--vw-base) * 100vw);
  width: calc(64 / var(--vw-base) * 100vw);
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .tot-feature__chara {
    top: min(30 / var(--vw-base) * 100vw, 30px);
    left: calc(50% + min(226 / var(--vw-base) * 100vw, 226px));
    right: unset;
    width: min(118 / var(--vw-base) * 100vw, 118px);
  }
}
.tot-feature__chara svg {
  display: block;
}
.tot-feature__chara .drink-parts {
  transform-origin: 60% 90%;
  transform-box: fill-box;
  animation: drink-action 4s ease-in-out infinite;
  animation-delay: 1s;
}
@keyframes drink-action {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(8deg);
  }
  30% {
    transform: rotate(8deg);
  }
  50% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.tot-feature__btn {
  margin-top: calc(60 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-feature__btn {
    margin-top: min(60 / var(--vw-base) * 100vw, 60px);
  }
}

.tot-feature__trig {
  position: relative;
  width: calc(285 / var(--vw-base) * 100vw);
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .tot-feature__trig {
    width: min(850 / var(--vw-base) * 100vw, 850px);
  }
}

.tot-feature__point-wrap {
  width: calc(325 / var(--vw-base) * 100vw);
  margin: calc(60 / var(--vw-base) * 100vw) auto 0;
}
@media screen and (min-width: 769px) {
  .tot-feature__point-wrap {
    width: unset;
    margin-top: min(120 / var(--vw-base) * 100vw, 120px);
  }
}

.tot-feature__point {
  position: relative;
  padding: calc(50 / var(--vw-base) * 100vw) calc(25 / var(--vw-base) * 100vw);
  background: var(--color-base);
  border: 0.5px solid var(--color-black);
}
@media screen and (min-width: 769px) {
  .tot-feature__point {
    padding: 4.8% 7.5%;
  }
}

.tot-feature__point-ttl {
  position: absolute;
  left: calc(-5 / var(--vw-base) * 100vw);
  top: calc(-15 / var(--vw-base) * 100vw);
  background: #fff;
  padding-inline: calc(15 / var(--vw-base) * 100vw);
  border: 0.5px solid var(--color-black);
  font-size: calc(30 / var(--vw-base) * 100vw);
  line-height: 1.6;
}
@media screen and (min-width: 769px) {
  .tot-feature__point-ttl {
    top: min(-30 / var(--vw-base) * 100vw, -30px);
    left: min(-10 / var(--vw-base) * 100vw, -10px);
    font-size: min(calc(60 / var(--vw-base) * 100vw), 60px);
  }
}

.tot-feature__point-main {
  line-height: 1.6;
}
@media screen and (min-width: 769px) {
  .tot-feature__point-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: inherit;
  }
  .tot-feature__point-main p {
    width: 51.7647058824%;
  }
}

.tot-feature__point-fig {
  margin-top: calc(30 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-feature__point-fig {
    width: 41.1764705882%;
  }
}

.tot-feature__point-img {
  width: 100%;
}

/* Mechanism / Energy
--------------------------  */
.tot-mechanism,
.tot-energy {
  margin: calc(60 / var(--vw-base) * 100vw) auto 0;
  width: calc(359 / var(--vw-base) * 100vw);
  background: url("../images/bg_dot.png"), var(--color-base);
  background-size: calc(64 / var(--vw-base) * 100vw);
  border-radius: 20px;
}
@media screen and (min-width: 769px) {
  .tot-mechanism,
  .tot-energy {
    width: unset;
    margin-top: min(120 / var(--vw-base) * 100vw, 120px);
    background-size: min(64 / var(--vw-base) * 100vw, 64px);
  }
}

.tot-mechanism__header,
.tot-energy__header {
  position: relative;
}

.tot-mechanism__body,
.tot-energy__body {
  padding: calc(35 / var(--vw-base) * 100vw) calc(37 / var(--vw-base) * 100vw) calc(80 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-mechanism__body,
  .tot-energy__body {
    padding: 5.8% 13.5% 14%;
  }
}

.tot-mechanism__ttl,
.tot-energy__ttl {
  position: relative;
  width: calc(285 / var(--vw-base) * 100vw);
  margin-inline: auto;
  padding-top: calc(100 / var(--vw-base) * 100vw);
  line-height: 0;
}
@media screen and (min-width: 769px) {
  .tot-mechanism__ttl,
  .tot-energy__ttl {
    width: min(850 / var(--vw-base) * 100vw, 850px);
    padding: min(calc(200 / var(--vw-base) * 100vw), 200px) 0 min(calc(42 / var(--vw-base) * 100vw), 42px);
  }
}
.tot-mechanism__ttl::before,
.tot-energy__ttl::before {
  content: "";
  display: block;
  position: absolute;
  width: 0.5px;
  top: 0;
  height: 0;
  background: var(--color-black);
  transition: height 1s var(--ease-out-quart);
}

.tot-mechanism__ttl img,
.tot-energy__ttl img {
  display: inline-block;
}

.tot-mechanism__ttl-copy,
.tot-mechanism__ttl-txt,
.tot-energy__ttl-copy,
.tot-energy__ttl-txt {
  display: block;
  position: relative;
}

.tot-mechanism__ttl-copy,
.tot-energy__ttl-copy {
  padding-bottom: calc(12 / var(--vw-base) * 100vw);
  transition-delay: 0.2s;
}
@media screen and (min-width: 769px) {
  .tot-mechanism__ttl-copy,
  .tot-energy__ttl-copy {
    padding-bottom: 2.9411764706%;
  }
}

.tot-mechanism__ttl-copy::after,
.tot-energy__ttl-copy::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0.5px;
  background: var(--color-black);
  transition: width 1s var(--ease-out-quart);
}

.is-animated .tot-mechanism__ttl::before,
.is-animated .tot-energy__ttl::before {
  height: 100%;
}
.is-animated .tot-mechanism__ttl-copy::after,
.is-animated .tot-energy__ttl-copy::after {
  width: 100%;
}

.tot-mechanism__ttl-txt,
.tot-energy__ttl-txt {
  padding-top: calc(8 / var(--vw-base) * 100vw);
  transition-delay: 0.4s;
}
@media screen and (min-width: 769px) {
  .tot-mechanism__ttl-txt,
  .tot-energy__ttl-txt {
    padding-bottom: 0.5882352941%;
  }
}

.tot-mechanism__en,
.tot-energy__en {
  position: absolute;
  top: calc(44 / var(--vw-base) * 100vw);
  font-size: calc(18 / var(--vw-base) * 100vw);
  line-height: 1;
  transform: rotate(90deg);
}
@media screen and (min-width: 769px) {
  .tot-mechanism__en,
  .tot-energy__en {
    top: min(80 / var(--vw-base) * 100vw, 80px);
    font-size: min(30 / var(--vw-base) * 100vw, 30px);
  }
}

/* Mechanism
--------------------------  */
.tot-mechanism__ttl::before {
  left: 0;
}

.tot-mechanism__ttl-copy,
.tot-mechanism__ttl-txt {
  padding-left: calc(30 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-mechanism__ttl-copy,
  .tot-mechanism__ttl-txt {
    padding-left: 7.0588235294%;
  }
}

.tot-mechanism__ttl-copy img {
  width: calc(221 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-mechanism__ttl-copy img {
    width: min(calc(434 / var(--vw-base) * 100vw), 434px);
  }
}

.tot-mechanism__ttl-txt img {
  width: calc(255 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-mechanism__ttl-txt img {
    width: 100%;
  }
}

.tot-mechanism__en {
  left: calc(10 / var(--vw-base) * 100vw);
  transform-origin: left bottom;
}
@media screen and (min-width: 769px) {
  .tot-mechanism__en {
    left: min(25 / var(--vw-base) * 100vw, 25px);
  }
}

.tot-mechanism__chara {
  position: absolute;
  top: calc(-29 / var(--vw-base) * 100vw);
  left: calc(57 / var(--vw-base) * 100vw);
  width: calc(53 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-mechanism__chara {
    top: max(-73 / var(--vw-base) * 100vw, -73px);
    left: min(121 / var(--vw-base) * 100vw, 121px);
    width: min(114 / var(--vw-base) * 100vw, 114px);
  }
}
.tot-mechanism__chara #train-chara {
  animation: gatagoto 2s cubic-bezier(0, 1, 0, 1) infinite;
}
@keyframes gatagoto {
  0% {
    transform: translateY(0);
  }
  2% {
    transform: translateY(-3px);
  }
  5% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(0);
  }
  12% {
    transform: translateY(-1.5px);
  }
  15% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

.tot-mechanism__fig {
  margin-bottom: calc(40 / var(--vw-base) * 100vw);
}

.tot-mechanism__img {
  width: 100%;
}

/* Energy
--------------------------  */
.tot-energy__ttl::before {
  right: 0;
}

.tot-energy__ttl-copy img {
  width: calc(88 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-energy__ttl-copy img {
    width: min(calc(168 / var(--vw-base) * 100vw), 168px);
  }
}

.tot-energy__ttl-txt img {
  width: calc(250 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-energy__ttl-txt img {
    width: 100%;
  }
}

.tot-energy__en {
  top: calc(128 / var(--vw-base) * 100vw);
  right: calc(10 / var(--vw-base) * 100vw);
  transform-origin: right top;
}
@media screen and (min-width: 769px) {
  .tot-energy__en {
    top: min(calc(240 / var(--vw-base) * 100vw), 240px);
    right: min(calc(20 / var(--vw-base) * 100vw), 20px);
  }
}

.tot-energy__chara {
  position: absolute;
  top: calc(-12 / var(--vw-base) * 100vw);
  left: calc(247 / var(--vw-base) * 100vw);
  width: calc(52 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-energy__chara {
    top: max(-25 / var(--vw-base) * 100vw, -25px);
    left: min(calc(766 / var(--vw-base) * 100vw), 766px);
    width: min(calc(114 / var(--vw-base) * 100vw), 114px);
  }
}
.tot-energy__chara #metabo-mark {
  transform-origin: center;
  transform-box: fill-box;
  animation: rotate 4s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.tot-energy__faq {
  background: #fff;
  margin-inline: calc(-20 / var(--vw-base) * 100vw);
  padding: calc(30 / var(--vw-base) * 100vw) calc(20 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-energy__faq {
    margin-inline: 0;
    padding: 8.3333333333% 5.5555555556%;
  }
}

.tot-energy__faq + .tot-energy__faq {
  margin-top: calc(40 / var(--vw-base) * 100vw);
}

.tot-energy__faq dt {
  position: relative;
  padding-left: min(calc(28 / var(--vw-base) * 100vw), 38px);
  font-size: min(calc(18 / var(--vw-base) * 100vw), 24px);
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .tot-energy__faq dt {
    padding-left: min(calc(40 / var(--vw-base) * 100vw), 42px);
    font-size: min(calc(28 / var(--vw-base) * 100vw), 28px);
  }
}

.tot-energy__faq dd {
  margin-top: calc(30 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-energy__faq dd {
    margin-top: min(calc(30 / var(--vw-base) * 100vw), 30px);
  }
}

.tot-energy__faq-a {
  position: relative;
  padding-left: min(calc(28 / var(--vw-base) * 100vw), 38px);
  font-size: min(calc(13 / var(--vw-base) * 100vw), 16px);
}
@media screen and (min-width: 769px) {
  .tot-energy__faq-a {
    padding-left: min(calc(40 / var(--vw-base) * 100vw), 42px);
    font-size: unset;
  }
}

.tot-energy__faq dt::before,
.tot-energy__faq-a::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: min(calc(18 / var(--vw-base) * 100vw), 24px);
}

.tot-energy__faq dt::before {
  height: min(calc(36 / var(--vw-base) * 100vw), 48px);
  background: url("../images/icn_q.svg") no-repeat center/contain;
}
@media screen and (min-width: 769px) {
  .tot-energy__faq dt::before {
    width: min(calc(22 / var(--vw-base) * 100vw), 22px);
    height: min(calc(56 / var(--vw-base) * 100vw), 56px);
  }
}

.tot-energy__faq-a::before {
  height: min(calc(28 / var(--vw-base) * 100vw), 36px);
  background: url("../images/icn_a.svg") no-repeat center/contain;
}
@media screen and (min-width: 769px) {
  .tot-energy__faq-a::before {
    width: min(calc(23 / var(--vw-base) * 100vw), 23px);
    height: min(calc(36 / var(--vw-base) * 100vw), 36px);
  }
}

.tot-energy__faq-img-01 {
  width: calc(247 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-energy__faq-img-01 {
    width: min(calc(495 / var(--vw-base) * 100vw), 495px);
  }
}

.tot-energy__faq-img-02 {
  width: calc(244 / var(--vw-base) * 100vw);
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .tot-energy__faq-img-02 {
    width: min(calc(375 / var(--vw-base) * 100vw), 375px);
  }
}

.tot-energy__faq-img-02 img {
  width: 100%;
}

.tot-energy__faq-img-02 figcaption {
  font-size: min(calc(8 / var(--vw-base) * 100vw), 10px);
  text-align: center;
  margin-top: 10px;
}
@media screen and (min-width: 769px) {
  .tot-energy__faq-img-02 figcaption {
    font-size: min(calc(12 / var(--vw-base) * 100vw), 12px);
  }
}

.tot-energy__faq-group {
  background: #fff;
}

.tot-energy__faq-group + .tot-energy__faq-group {
  margin-top: calc(50 / var(--vw-base) * 100vw);
  padding-top: calc(50 / var(--vw-base) * 100vw);
  border-top: 0.5px solid var(--color-black);
}
@media screen and (min-width: 769px) {
  .tot-energy__faq-group + .tot-energy__faq-group {
    margin-top: min(calc(70 / var(--vw-base) * 100vw), 70px);
    padding-top: min(calc(70 / var(--vw-base) * 100vw), 70px);
  }
}

/* -------------------------------------
 :: CM
------------------------------------- */
.tot-cm {
  position: relative;
  padding-block: calc(80 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-cm {
    padding-block: min(16.6666666667vw, 240px);
  }
}

.tot-cm::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/bg_mosaic_sp.webp") no-repeat center/cover;
  -webkit-clip-path: polygon(0 0, 100% calc(60 / var(--vw-base) * 100vw), 100% calc(100% - 60 / var(--vw-base) * 100vw), 0 100%);
          clip-path: polygon(0 0, 100% calc(60 / var(--vw-base) * 100vw), 100% calc(100% - 60 / var(--vw-base) * 100vw), 0 100%);
}
@media screen and (min-width: 769px) {
  .tot-cm::before {
    background-image: url("../images/bg_mosaic_pc.webp");
    -webkit-clip-path: polygon(0 0, 100% min(15.9722222222vw, 230px), 100% calc(100% - min(15.9722222222vw, 230px)), 0 100%);
            clip-path: polygon(0 0, 100% min(15.9722222222vw, 230px), 100% calc(100% - min(15.9722222222vw, 230px)), 0 100%);
  }
}

.tot-cm__ttl {
  margin: 0 auto calc(40 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-cm__ttl {
    margin-bottom: min(calc(80 / var(--vw-base) * 100vw), 80px);
  }
}

.tot-cm__ttl-img {
  width: calc(218 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-cm__ttl-img {
    width: min(calc(438 / var(--vw-base) * 100vw), 438px);
  }
}

/* -------------------------------------
 :: Faq
------------------------------------- */
.tot-faq {
  padding-block: calc(80 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-faq {
    padding-block: min(calc(160 / var(--vw-base) * 100vw), 160px) min(calc(200 / var(--vw-base) * 100vw), 200px);
  }
}

.tot-faq__ttl {
  text-align: center;
}

.tot-faq__ttl-img {
  width: calc(173 / var(--vw-base) * 100vw);
  margin-bottom: calc(30 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-faq__ttl-img {
    width: min(calc(347 / var(--vw-base) * 100vw), 347px);
    margin-bottom: min(calc(80 / var(--vw-base) * 100vw), 80px);
  }
}

.tot-faq__list {
  display: flex;
  flex-direction: column;
  gap: calc(20 / var(--vw-base) * 100vw);
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .tot-faq__list {
    gap: min(calc(40 / var(--vw-base) * 100vw), 40px);
  }
}

.tot-faq__item {
  background: #fff;
}

.tot-faq__q {
  position: relative;
  font-weight: 700;
}
@media screen and (min-width: 769px) {
  .tot-faq__q {
    font-size: clamp(16px, calc(22 / var(--vw-base) * 100vw), 22px);
  }
}

.tot-faq-trigger {
  position: relative;
  text-align: inherit;
  line-height: inherit;
  width: 100%;
  padding: 4.6153846154% 15.0769230769% 4.6153846154% 13.2307692308%;
}
@media screen and (min-width: 769px) {
  .tot-faq-trigger {
    padding: 3% 9% 3% 7.6%;
  }
}

.tot-faq-trigger::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(16 / var(--vw-base) * 100vw);
  top: min(calc(14 / var(--vw-base) * 100vw), 24px);
  width: min(calc(16 / var(--vw-base) * 100vw), 24px);
  aspect-ratio: 15/21;
  background: url("../images/icn_q.svg") no-repeat center/contain;
}
@media screen and (min-width: 769px) {
  .tot-faq-trigger::before {
    top: min(calc(30 / var(--vw-base) * 100vw), 30px);
    left: min(calc(30 / var(--vw-base) * 100vw), 30px);
    width: min(calc(28 / var(--vw-base) * 100vw), 28px);
  }
}

.tot-faq-trigger__icon {
  display: grid;
  position: absolute;
  right: calc(15 / var(--vw-base) * 100vw);
  top: calc(50% - 12 / var(--vw-base) * 100vw);
  width: min(calc(24 / var(--vw-base) * 100vw), 40px);
  aspect-ratio: 1/1;
  border-radius: 9999px;
  background: var(--color-black);
}
@media screen and (min-width: 769px) {
  .tot-faq-trigger__icon {
    right: calc(30 / var(--vw-base) * 100vw);
    top: calc(50% - 20 / var(--vw-base) * 100vw);
    width: min(calc(40 / var(--vw-base) * 100vw), 40px);
  }
}

.tot-faq-trigger__icon::before,
.tot-faq-trigger__icon::after {
  content: "";
  display: block;
  position: absolute;
  left: 31.25%;
  top: 50%;
  width: 37.5%;
  height: 1px;
  background: #fff;
  transition: transform 0.2s ease;
}
@media screen and (min-width: 769px) {
  .tot-faq-trigger__icon::before,
  .tot-faq-trigger__icon::after {
    width: min(calc(18 / var(--vw-base) * 100vw), 18px);
    left: 27.5%;
  }
}

.tot-faq-trigger__icon::after {
  transform: rotate(90deg);
}

.tot-faq-trigger.is-open .tot-faq-trigger__icon::after {
  transform: rotate(0deg);
}

@media (hover: hover) {
  .tot-faq-trigger {
    transition: filter 0.5s var(--ease-out-quart);
  }
  .tot-faq-trigger:hover {
    filter: invert(80%);
  }
}
.tot-faq__a {
  position: relative;
  display: block;
}

.tot-faq__a::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(15 / var(--vw-base) * 100vw);
  right: calc(15 / var(--vw-base) * 100vw);
  height: 0.5px;
  background: var(--color-black);
}
@media screen and (min-width: 769px) {
  .tot-faq__a::before {
    left: calc(30 / var(--vw-base) * 100vw);
    right: calc(30 / var(--vw-base) * 100vw);
  }
}

.tot-faq__a-inner {
  position: relative;
  padding: 4.6153846154% 4.6153846154% 4.6153846154% 13.2307692308%;
  font-size: 0.9285714286em;
}
@media screen and (min-width: 769px) {
  .tot-faq__a-inner {
    padding: 3% 9% 3% 7.6%;
    font-size: clamp(14px, calc(16 / var(--vw-base) * 100vw), 16px);
  }
}

.tot-faq__a-inner::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(16 / var(--vw-base) * 100vw);
  top: min(calc(14 / var(--vw-base) * 100vw), 24px);
  width: min(calc(16 / var(--vw-base) * 100vw), 24px);
  aspect-ratio: 15/21;
  background: url("../images/icn_a.svg") no-repeat center/contain;
}
@media screen and (min-width: 769px) {
  .tot-faq__a-inner::before {
    top: min(calc(30 / var(--vw-base) * 100vw), 30px);
    left: min(calc(30 / var(--vw-base) * 100vw), 30px);
    width: min(calc(28 / var(--vw-base) * 100vw), 28px);
  }
}

/* -------------------------------------
 :: Research
------------------------------------- */
.tot-research {
  padding-block: calc(83 / var(--vw-base) * 100vw) calc(80 / var(--vw-base) * 100vw);
  background: url("../images/bg_dot.png"), #EBEBEA;
  background-size: calc(64 / var(--vw-base) * 100vw);
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .tot-research {
    padding-block: min(calc(200 / var(--vw-base) * 100vw), 200px);
  }
}

.tot-research__header {
  position: relative;
  padding-top: calc(37 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-research__header {
    padding-top: min(calc(80 / var(--vw-base) * 100vw), 80px);
  }
}

.tot-research__ttl {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1;
}

.tot-research__ttl::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(-45 / var(--vw-base) * 100vw);
  top: calc(-37 / var(--vw-base) * 100vw);
  width: 0;
  height: 0.5px;
  background: var(--color-black);
  transition: width 1s var(--ease-out-quart);
  transition-delay: 0.4s;
}
@media screen and (min-width: 769px) {
  .tot-research__ttl::before {
    left: calc(-50vw + min(34.7222222222vw, 500px));
    top: max(-80 / var(--vw-base) * 100vw, -80px);
  }
}

.tot-research__ttl.is-animated::before {
  width: calc(100% + 45 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-research__ttl.is-animated::before {
    width: calc(100% + 50vw - min(34.7222222222vw, 500px));
  }
}

.tot-research__ttl-img {
  display: inline-block;
  width: calc(197 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-research__ttl-img {
    width: min(calc(622 / var(--vw-base) * 100vw), 622px);
  }
}

.tot-research__en {
  position: absolute;
  top: calc(184 / var(--vw-base) * 100vw);
  right: 0;
  transform: rotate(90deg);
  transform-origin: right top;
  color: #ccc;
  mix-blend-mode: multiply;
  font-size: calc(48 / var(--vw-base) * 100vw);
  line-height: 1;
  z-index: 1;
}
@media screen and (min-width: 769px) {
  .tot-research__en {
    top: min(calc(358 / var(--vw-base) * 100vw), 358px);
    font-size: min(calc(96 / var(--vw-base) * 100vw), 96px);
  }
}

.tot-research__slider {
  position: relative;
  margin: calc(40 / var(--vw-base) * 100vw) calc(-45 / var(--vw-base) * 100vw);
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .tot-research__slider {
    width: 100vw;
    margin: min(calc(80 / var(--vw-base) * 100vw), 80px) calc(-50vw + 50%);
  }
}

.tot-research__slider-track {
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  animation: scroll var(--duration, 90s) linear infinite;
  will-change: transform;
}

.tot-research__slide {
  flex: 0 0 auto;
  width: 76vw;
}
@media screen and (min-width: 769px) {
  .tot-research__slide {
    width: min(calc(570 / var(--vw-base) * 100vw), 570px);
  }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--loop-width)));
  }
}
.tot-research__link {
  margin-top: calc(60 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-research__link {
    margin-top: min(calc(80 / var(--vw-base) * 100vw), 80px);
  }
}

.tot-research__link-label {
  margin-bottom: calc(20 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-research__link-label {
    margin-bottom: min(calc(30 / var(--vw-base) * 100vw), 30px);
  }
}

.tot-research__link-label img {
  width: min(200 / var(--vw-base) * 100vw, 300px);
}
@media screen and (min-width: 769px) {
  .tot-research__link-label img {
    width: min(28.2vw, 282px);
  }
}

.tot-research__link-btn {
  display: flex;
  flex-direction: column;
  gap: calc(20 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-research__link-btn {
    flex-direction: row;
    justify-content: center;
    gap: min(calc(90 / var(--vw-base) * 100vw), 90px);
  }
}

@media screen and (min-width: 769px) {
  .tot-research__link-btn .tot-btn {
    margin-inline: 0;
  }
}

/* -------------------------------------
 :: Product
------------------------------------- */
.tot-product-info {
  padding-block: calc(80 / var(--vw-base) * 100vw);
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .tot-product-info {
    padding-block: min(calc(120 / var(--vw-base) * 100vw), 120px);
  }
}

.tot-product-info__header {
  display: flex;
  flex-direction: column;
  gap: calc(40 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-product-info__header {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr auto auto 1fr;
    gap: min(calc(60 / var(--vw-base) * 100vw), 60px) min(calc(120 / var(--vw-base) * 100vw), 120px);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
}

.tot-product-info__ttl {
  text-align: center;
}
@media screen and (min-width: 769px) {
  .tot-product-info__ttl {
    grid-column: 2/3;
    grid-row: 2/3;
  }
}

.tot-product-info__ttl-img {
  width: calc(153 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-product-info__ttl-img {
    width: min(calc(306 / var(--vw-base) * 100vw), 306px);
  }
}

@media screen and (min-width: 769px) {
  .tot-product-info__fig {
    grid-column: 1/2;
    grid-row: 1/5;
  }
}

.tot-product-info__img {
  width: calc(81 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-product-info__img {
    width: min(calc(126 / var(--vw-base) * 100vw), 126px);
  }
}

@media screen and (min-width: 769px) {
  .tot-product-info__btn {
    grid-column: 2/3;
    grid-row: 3/4;
  }
}

.tot-product-info__spec {
  border-collapse: collapse;
  border-top: 0.5px solid var(--color-black);
  margin-top: calc(40 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-product-info__spec {
    margin-top: min(calc(80 / var(--vw-base) * 100vw), 80px);
  }
}

.tot-product-info__spec tr {
  display: block;
  padding-block: calc(15 / var(--vw-base) * 100vw);
  border-bottom: 0.5px solid var(--color-black);
}
@media screen and (min-width: 769px) {
  .tot-product-info__spec tr {
    display: table-row;
  }
}

.tot-product-info__spec td,
.tot-product-info__spec th {
  display: block;
  line-height: 1.6;
}
@media screen and (min-width: 769px) {
  .tot-product-info__spec td,
  .tot-product-info__spec th {
    display: table-cell;
    padding-block: 1.875em;
    font-size: clamp(14px, calc(16 / var(--vw-base) * 100vw), 16px);
    vertical-align: top;
  }
}

.tot-product-info__spec th,
.tot-product-info__spec .tot-product-info__empty {
  text-align: left;
}
@media screen and (min-width: 769px) {
  .tot-product-info__spec th,
  .tot-product-info__spec .tot-product-info__empty {
    width: 31.7647058824%;
    padding-right: 3.3333333333%;
  }
}

@media screen and (min-width: 769px) {
  .tot-product-info__spec td {
    width: 68.2352941176%;
  }
}

.tot-product-info__btn-list {
  display: flex;
  flex-direction: column;
  gap: calc(20 / var(--vw-base) * 100vw);
  margin-top: calc(60 / var(--vw-base) * 100vw);
  list-style: none;
}
@media screen and (min-width: 769px) {
  .tot-product-info__btn-list {
    flex-direction: row;
    justify-content: center;
    gap: min(calc(120 / var(--vw-base) * 100vw), 120px);
    margin-top: min(calc(80 / var(--vw-base) * 100vw), 80px);
  }
}

/* -------------------------------------
 :: Banner
------------------------------------- */
.tot-banner {
  background: #fff;
  padding-block: calc(80 / var(--vw-base) * 100vw);
  text-align: center;
}
@media screen and (min-width: 769px) {
  .tot-banner {
    padding-block: min(calc(120 / var(--vw-base) * 100vw), 120px);
  }
}

.tot-banner picture {
  display: block;
}

.tot-banner__txt {
  margin-bottom: calc(20 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-banner__txt {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 769px) {
  .tot-banner__txt-img {
    width: 314px;
  }
}

.tot-banner__img {
  display: inline-block;
  width: min(100%, 400px);
}
@media screen and (min-width: 769px) {
  .tot-banner__img {
    width: 400px;
  }
}

@media (hover: hover) {
  .tot-banner__img {
    transition: opacity 0.5s var(--ease-out-quart);
  }
  .tot-banner__img:hover {
    opacity: 0.7;
  }
}
/* -------------------------------------
 :: Modal
------------------------------------- */
:root {
  --mmScrlOffset: 0px;
}

.mmWrap {
  --mmPad: calc(25 / var(--vw-base) * 100vw);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  padding: calc(32 / var(--vw-base) * 100vw) var(--mmPad);
  opacity: 0;
  transition: 0.2s opacity;
  background: rgba(0, 0, 0, 0.7);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  outline: none;
  box-sizing: border-box;
}
@media screen and (min-width: 769px) {
  .mmWrap {
    --mmPad: calc(60 / var(--vw-base) * 100vw);
  }
}

.mmWrap.-ready {
  opacity: 1;
}

.mmInner {
  position: relative;
  max-height: 100vh;
}

.mmScreen {
  position: fixed;
  left: 0;
  top: 0;
  width: calc(100% - 17px);
  height: 100%;
}

.mmCnt {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  color: #fff;
  outline: none;
}
@media screen and (min-width: 769px) {
  .mmCnt {
    max-width: 800px;
  }
}

.mmCnt > img:only-child {
  max-width: 100%;
  max-height: calc(100vh - 8vw);
}

.mmWrap[data-mm-type=iframe] iframe {
  width: 100vw;
  max-width: 100%;
  height: calc(100vh - var(--mmPad) * 2);
}

.mmWrap[data-mm-type=YouTube] .mmCnt {
  width: min(85vw, 800px);
  background: unset;
}

.mmWrap[data-mm-type=YouTube] iframe {
  width: 100%;
  aspect-ratio: 16/9;
}

.mmCaption {
  position: relative;
  color: #fff;
}

.mmCaption:not(:empty) {
  margin-top: 1rem;
  text-align: center;
}

.mmClose, .mmPrev, .mmNext {
  all: unset;
  position: fixed;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  cursor: pointer;
  transition: 0.15s;
}
@media screen and (min-width: 769px) {
  .mmClose, .mmPrev, .mmNext {
    position: absolute;
  }
}

.mmClose {
  right: calc(25 / var(--vw-base) * 100vw + var(--mmScrlOffset));
  top: calc(30 / var(--vw-base) * 100vw);
  width: calc(29 / var(--vw-base) * 100vw);
  aspect-ratio: 29/36;
  background: url("../images/icn_close.svg") no-repeat center/contain;
}
@media screen and (min-width: 769px) {
  .mmClose {
    top: unset;
    right: 0;
    bottom: calc(100% + min(calc(32 / var(--vw-base) * 100vw), 32px));
    width: min(calc(61 / var(--vw-base) * 100vw), 61px);
  }
}

@media (hover: hover) {
  .mmClose {
    opacity: 1;
    transition: opacity 0.5s var(--ease-out-quart);
  }
  .mmClose:hover {
    opacity: 0.6;
  }
}
.mmPrev, .mmNext {
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(136, 136, 136, 0.7333333333);
}

.mmPrev:before, .mmNext:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35%;
  aspect-ratio: 1/1;
  border: #fff solid;
  border-width: 3px 0 0 3px;
  translate: -50% -50%;
}

.mmPrev {
  left: 1.5vw;
}

.mmPrev:before {
  rotate: -45deg;
  margin-left: 2px;
}

.mmNext {
  right: calc(1.5vw + var(--mmScrlOffset));
}

.mmNext:before {
  rotate: 135deg;
  margin-left: -2px;
}

.tot-modal-content {
  display: none;
}

/* -------------------------------------
 Purchase link
------------------------------------- */
.tot-sticky {
  position: fixed;
  left: 0;
  bottom: 0;
  text-align: center;
  z-index: 999;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.tot-sticky.is-active {
  opacity: 1;
}

.tot-btn-sticky {
  display: grid;
  place-content: center;
  width: 100dvw;
  height: calc(60 / var(--vw-base) * 100vw);
  color: #fff;
  background: #000;
}
@media screen and (min-width: 769px) {
  .tot-btn-sticky {
    height: 80px;
  }
}

.tot-btn-sticky__label {
  display: block;
  position: relative;
}

.tot-btn-sticky__label-img {
  width: calc(102 / var(--vw-base) * 100vw);
}
@media screen and (min-width: 769px) {
  .tot-btn-sticky__label-img {
    width: 153px;
  }
}

.tot-btn-sticky__label::before {
  content: "";
  display: block;
  position: absolute;
  left: calc(-55 / var(--vw-base) * 100vw);
  top: calc(-51 / var(--vw-base) * 100vw);
  width: calc(36 / var(--vw-base) * 100vw);
  aspect-ratio: 36/115;
  background: #fff;
  background: url("../images/img_totonou.webp") no-repeat center/contain;
  transform: rotate(-10deg);
}
@media screen and (min-width: 769px) {
  .tot-btn-sticky__label::before {
    left: -80px;
    top: -71px;
    width: 50px;
  }
}

.tot-btn-sticky__label::after {
  content: "";
  display: block;
  position: absolute;
  right: calc(-55 / var(--vw-base) * 100vw);
  top: 50%;
  width: calc(40 / var(--vw-base) * 100vw);
  height: 1px;
  background: #fff;
  mix-blend-mode: difference;
  transform: scaleX(0);
  transform-origin: left;
  animation: lineLoop 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@media screen and (min-width: 769px) {
  .tot-btn-sticky__label::after {
    right: -75px;
    width: 60px;
  }
}

@media (hover: hover) {
  .tot-btn-sticky {
    transition: background 0.5s var(--ease-out-quart);
  }
  .tot-btn-sticky .tot-btn-sticky__label-img {
    transition: filter 0.5s var(--ease-out-quart);
  }
  .tot-btn-sticky:hover {
    background-color: var(--color-base);
  }
  .tot-btn-sticky:hover .tot-btn-sticky__label-img {
    filter: invert(100%);
  }
}
.tot-shop-list {
  display: flex;
  flex-direction: column;
  gap: min(calc(15 / var(--vw-base) * 100vw), 20px);
  width: min(calc(300 / var(--vw-base) * 100vw), 400px);
}
@media screen and (min-width: 769px) {
  .tot-shop-list {
    gap: 15px;
    width: 480px;
  }
}

.tot-shop-list img {
  width: 100%;
}

/* -------------------------------------
 :: Utility
------------------------------------- */
.tot-list-disc {
  list-style-type: disc;
  padding-left: 1.5em;
}
.tot-list-disc li {
  list-style-type: disc;
}

@media screen and (max-width: 768px) {
  .tot-display-pc {
    display: none;
  }
}
@media screen and (min-width: 769px) {
  .tot-display-sp {
    display: none;
  }
}