:root {
  --viewport-base: 768;
  --viewport-mobile: 375;
  --base-font-size: 16;
  --inner-base: 580;
  --wrapper-base: 768;
  --u: calc(1rem / 16);
  --inner-padding-sp: calc(15 / 16 * 1rem);
  --inner-width: calc(var(--inner-base) * 100vw / var(--viewport-base));
  --inner-max: 580px;
  --wrapper-width: calc(var(--wrapper-base) * 100vw / var(--viewport-base));
  --wrapper-max: 768px;
  --margin-offset: min(0px, calc(-50vw + (var(--inner-width) / 2)));
  --color-base: #ffffff;
  --color-text: #111111;
  --color-text-inverse: #ffffff;
  --color-border: #e0e0e0;
  --color-primary: #e60012;
  --color-secondary: #f08300;
  --color-light-red: #fdeaea;
  --color-light-blue: #e1f5fe;
  --color-light-green: #e8f5e9;
  --color-light-yellow: #fff8e1;
  --color-light-orange: #fff0e8;
  --ease-rich: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --duration-slow: 0.5s;
  --shadow: 0 0 10px rgba(0,0,0,0.1);
}
@media screen and (min-width: 768px) {
  :root {
    --inner-width: calc(var(--inner-base) * 100vw / var(--viewport-base));
    --margin-offset: min(0px, calc(-50vw + (var(--inner-width) / 2)));
  }
}
@media screen and (max-width: 579.98px) {
  :root {
    --inner-width: calc(100vw - var(--inner-padding-sp) * 2);
    --margin-offset: calc(var(--inner-padding-sp) * -1);
  }
}
@media screen and (min-width: 768px) {
  :root {
    --inner-width: var(--inner-max);
    --margin-offset: calc((var(--inner-max) - 100vw) / 2);
  }
}

.logo {
  position: absolute;
  top: calc(30 / 16 * 1rem);
  left: calc(40 / 16 * 1rem);
  z-index: 100;
}
@media screen and (max-width: 579.98px) {
  .logo {
    top: calc(16 / 16 * 1rem);
    left: calc(16 / 16 * 1rem);
    width: calc(75 / 16 * 1rem);
  }
}

.wrapper {
  position: relative;
  z-index: 10;
  background: var(--color-base);
}

.hero {
  position: relative;
}

.hero_ttl {
  position: absolute;
  top: 11.0677083333%;
  left: 0;
  z-index: 10;
  width: 100%;
  text-align: center;
  pointer-events: none;
  animation: heroTtlBounceIn 1s 0.3s both;
}
.hero_ttl img {
  max-width: calc(var(--w) / 768 * 100%);
}
@media screen and (max-width: 579.98px) {
  .hero_ttl {
    top: calc(54 / 16 * 1rem);
  }
}

.hero_slide {
  position: relative;
  z-index: 1;
}

.hero_slide_list {
  position: relative;
  z-index: 10;
}

@keyframes heroFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes heroDropIn {
  from {
    opacity: 0;
    transform: translateY(calc(-32 / 16 * 1rem));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes heroTtlBounceIn {
  0%, 60%, 75%, 90%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translateY(calc(-1000 / 16 * 1rem)) scaleY(3);
  }
  60% {
    opacity: 1;
    transform: translateY(calc(25 / 16 * 1rem)) scaleY(0.9);
  }
  75% {
    transform: translateY(calc(-10 / 16 * 1rem)) scaleY(0.95);
  }
  90% {
    transform: translateY(calc(5 / 16 * 1rem)) scaleY(0.985);
  }
  100% {
    transform: translateY(0) scaleY(1);
  }
}
@keyframes kuromameSway1 {
  0%, 40%, 100% {
    transform: translate(0, 0);
    rotate: -25deg;
  }
  20% {
    transform: translate(30px, 30px);
    rotate: -20deg;
  }
}
@keyframes mameyanRun1 {
  0%, 100% {
    left: 26.0416666667%;
    transform: scaleX(1);
  }
  25%, 54% {
    left: 13.0208333333%;
    transform: scaleX(1);
  }
  55% {
    left: 13.0208333333%;
    transform: scaleX(-1);
  }
  80%, 99% {
    left: 26.0416666667%;
    transform: scaleX(-1);
  }
}
@keyframes okobuBob1 {
  0%, 70%, 100% {
    top: 64.9739583333%;
    left: 53.7760416667%;
    rotate: 0deg;
  }
  10%, 60% {
    top: 62.5%;
    left: 52.0833333333%;
    rotate: -10deg;
  }
  20%, 50% {
    top: 64.9739583333%;
    left: 50.78125%;
    rotate: -20deg;
  }
}
@keyframes mameyanBob2 {
  0%, 30%, 50%, 100% {
    top: 54.296875%;
  }
  20%, 40% {
    top: 53.3854166667%;
  }
}
@keyframes omameBob2 {
  0%, 100% {
    top: 59.6354166667%;
    left: 73.9583333333%;
    rotate: -5deg;
  }
  25%, 75% {
    top: 59.6354166667%;
    left: 75.2604166667%;
    rotate: 0deg;
  }
  50% {
    top: 59.6354166667%;
    left: 76.5625%;
    rotate: 5deg;
  }
}
@keyframes kuromameBob3 {
  0%, 10%, 30%, 50%, 70%, 100% {
    top: 49.21875%;
    left: 4.6875%;
    rotate: 0deg;
  }
  20%, 60% {
    top: 47.9166666667%;
    left: 3.90625%;
    rotate: -5deg;
  }
}
@keyframes okobuBob3 {
  0%, 40%, 80%, 100% {
    top: 62.7604166667%;
    left: 62.5%;
    rotate: 0deg;
  }
  60% {
    top: 62.7604166667%;
    left: 62.5%;
    rotate: 5deg;
  }
}
@keyframes kuromameBob4 {
  0%, 70%, 100% {
    top: 66.40625%;
    left: 23.4375%;
    rotate: 0deg;
  }
  10%, 60% {
    top: 65.1041666667%;
    left: 24.0885416667%;
    rotate: 10deg;
  }
  20%, 50% {
    top: 66.40625%;
    left: 24.7395833333%;
    rotate: 5deg;
  }
}
@keyframes omameBob4 {
  0%, 30%, 50%, 100% {
    top: 62.5%;
  }
  20%, 40% {
    top: 61.1979166667%;
  }
}
.hero_slide_item {
  position: relative;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-rich);
}
.hero_slide_item:not(:first-child) {
  position: absolute;
  width: 100%;
  height: 100%;
}
.hero_slide_item.-current {
  z-index: 10;
  pointer-events: auto;
  opacity: 1;
  transition: none;
}
.hero_slide_item.-current > .-bg {
  animation: heroFade var(--duration-slow) var(--ease-rich) both;
}
.hero_slide_item.-current > .-dish,
.hero_slide_item.-current > .-cup,
.hero_slide_item.-current > [class*=shadow] {
  animation: heroDropIn var(--duration-slow) var(--ease-rich) both;
}
.hero_slide_item.-current > [class*=food] {
  animation: heroDropIn var(--duration-slow) var(--ease-rich) 0.15s both;
}
.hero_slide_item.-current > .-food2 {
  animation-delay: 0.22s;
}
.hero_slide_item.-current > .-food3 {
  animation-delay: 0.29s;
}
.hero_slide_item.-current > [class*=char] {
  animation: heroDropIn var(--duration-slow) var(--ease-rich) both;
}
.hero_slide_item.-current > .-char1 {
  animation-delay: 0.3s;
}
.hero_slide_item.-current > .-char2 {
  animation-delay: 0.4s;
}
.hero_slide_item.-current > .-char3 {
  animation-delay: 0.5s;
}
.hero_slide_item.-current > .-char4 {
  animation-delay: 0.6s;
}
.hero_slide_item:nth-child(1).-current > [data-char=kuromame] {
  animation: heroDropIn var(--duration-slow) var(--ease-rich) both, kuromameSway1 4s ease-in-out infinite;
  animation-delay: 0.3s, 0s;
}
.hero_slide_item:nth-child(1).-current > [data-char=mameyan] {
  animation: heroDropIn var(--duration-slow) var(--ease-rich) both, mameyanRun1 8s ease-in-out infinite;
  animation-delay: 0.6s, 0s;
}
.hero_slide_item:nth-child(1).-current > [data-char=okobu] {
  animation: heroDropIn var(--duration-slow) var(--ease-rich) both, okobuBob1 2s ease-in-out infinite;
  animation-delay: 0.6s, 0s;
}
.hero_slide_item:nth-child(2).-current > [data-char=mameyan] {
  animation: heroDropIn var(--duration-slow) var(--ease-rich) both, mameyanBob2 2s ease-in-out infinite;
  animation-delay: 0.6s, 0s;
}
.hero_slide_item:nth-child(2).-current > [data-char=omame] {
  animation: heroDropIn var(--duration-slow) var(--ease-rich) both, omameBob2 4s ease-in-out infinite;
  animation-delay: 0.6s, 0s;
}
.hero_slide_item:nth-child(3).-current > [data-char=kuromame] {
  animation: heroDropIn var(--duration-slow) var(--ease-rich) both, kuromameBob3 4s ease-in-out infinite;
  animation-delay: 0.6s, 0s;
}
.hero_slide_item:nth-child(3).-current > [data-char=okobu] {
  animation: heroDropIn var(--duration-slow) var(--ease-rich) both, okobuBob3 3s ease-in-out infinite;
  animation-delay: 0.6s, 0s;
}
.hero_slide_item:nth-child(4).-current > [data-char=kuromame] {
  animation: heroDropIn var(--duration-slow) var(--ease-rich) both, kuromameBob4 3s ease-in-out infinite;
  animation-delay: 0.6s, 0s;
}
.hero_slide_item:nth-child(4).-current > [data-char=omame] {
  animation: heroDropIn var(--duration-slow) var(--ease-rich) both, omameBob4 2s ease-in-out infinite;
  animation-delay: 0.6s, 0s;
}
.hero_slide_item > img {
  max-width: calc(var(--w) / 768 * 100%);
}
.hero_slide_item > img:not(.-bg) {
  position: absolute;
}
.hero_slide_item > img[data-char] {
  cursor: pointer;
}
.hero_slide_item > img[class*=shadow] {
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.hero_slide_item > img[class*=food], .hero_slide_item > img[class*=dish], .hero_slide_item > img[class*=cup] {
  pointer-events: none;
}
.hero_slide_item.-slide1 > .-shadow1 {
  top: 57.1614583333%;
  left: 12.109375%;
}
.hero_slide_item.-slide1 > .-shadow2 {
  top: 63.5416666667%;
  left: 28.90625%;
}
.hero_slide_item.-slide1 > .-shadow3 {
  top: 69.6614583333%;
  left: 47.65625%;
}
.hero_slide_item.-slide1 > .-dish {
  top: 48.828125%;
  left: 0;
  z-index: 1;
}
.hero_slide_item.-slide1 > .-food1 {
  top: 32.421875%;
  left: 12.7604166667%;
  z-index: 10;
}
.hero_slide_item.-slide1 > .-food2 {
  top: 38.28125%;
  left: 29.6875%;
  z-index: 11;
}
.hero_slide_item.-slide1 > .-food3 {
  top: 45.0520833333%;
  left: 47.265625%;
  z-index: 13;
}
.hero_slide_item.-slide1 > .-char1 {
  top: 36.4583333333%;
  left: 9.1145833333%;
  z-index: 5;
}
.hero_slide_item.-slide1 > .-char2 {
  top: 62.5%;
  left: 26.0416666667%;
  z-index: 12;
}
.hero_slide_item.-slide1 > .-char3 {
  top: 64.9739583333%;
  left: 53.7760416667%;
  z-index: 20;
}
.hero_slide_item.-slide1 > .-char4 {
  top: 58.59375%;
  left: 73.3072916667%;
  z-index: 20;
}
.hero_slide_item.-slide2 > .-shadow {
  top: 62.2395833333%;
  left: 12.5%;
  z-index: 1;
}
.hero_slide_item.-slide2 > .-food1 {
  top: 28.7760416667%;
  left: 9.765625%;
  z-index: 10;
}
.hero_slide_item.-slide2 > .-char1 {
  top: 26.0416666667%;
  left: 3.90625%;
  z-index: 1;
  rotate: -24deg;
}
.hero_slide_item.-slide2 > .-char2 {
  top: 65.1041666667%;
  left: 15.8854166667%;
  z-index: 20;
}
.hero_slide_item.-slide2 > .-char3 {
  top: 54.296875%;
  left: 41.1458333333%;
  z-index: 20;
}
.hero_slide_item.-slide2 > .-char4 {
  top: 59.6354166667%;
  left: 75.2604166667%;
  z-index: 20;
}
.hero_slide_item.-slide3 > .-shadow1 {
  top: 63.8020833333%;
  left: 34.1145833333%;
  z-index: 5;
}
.hero_slide_item.-slide3 > .-shadow2 {
  top: 52.2135416667%;
  left: 5.7291666667%;
  z-index: 1;
}
.hero_slide_item.-slide3 > .-shadow3 {
  top: 60.0260416667%;
  left: 15.4947916667%;
  z-index: 1;
}
.hero_slide_item.-slide3 > .-cup {
  top: 24.0885416667%;
  left: -1.3020833333%;
  z-index: 1;
}
.hero_slide_item.-slide3 > .-dish {
  top: 53.6458333333%;
  left: 0;
  z-index: 2;
}
.hero_slide_item.-slide3 > .-food1 {
  top: 31.25%;
  left: 34.1145833333%;
  z-index: 10;
}
.hero_slide_item.-slide3 > .-char1 {
  top: 49.21875%;
  left: 4.6875%;
  z-index: 20;
}
.hero_slide_item.-slide3 > .-char2 {
  top: 70.0520833333%;
  left: 25.78125%;
  z-index: 20;
}
.hero_slide_item.-slide3 > .-char3 {
  top: 62.7604166667%;
  left: 62.5%;
  z-index: 20;
}
.hero_slide_item.-slide3 > .-char4 {
  top: 48.1770833333%;
  left: 78.125%;
  z-index: 20;
}
.hero_slide_item.-slide4 > .-shadow1 {
  top: 59.765625%;
  left: 13.4114583333%;
  z-index: 1;
}
.hero_slide_item.-slide4 > .-dish {
  top: 38.28125%;
  left: 0;
  z-index: 1;
}
.hero_slide_item.-slide4 > .-food1 {
  top: 34.1145833333%;
  left: 1.5625%;
  z-index: 10;
}
.hero_slide_item.-slide4 > .-char1 {
  top: 59.8958333333%;
  left: 3.90625%;
  z-index: 20;
}
.hero_slide_item.-slide4 > .-char2 {
  top: 66.40625%;
  left: 23.4375%;
  z-index: 20;
}
.hero_slide_item.-slide4 > .-char3 {
  top: 62.5%;
  left: 67.7083333333%;
  z-index: 20;
}
.hero_slide_item.-slide4 > .-char4 {
  top: 23.4375%;
  left: 79.4270833333%;
  z-index: 5;
  rotate: 20deg;
}

.hero_slide_btn {
  position: absolute;
  top: 50%;
  z-index: 20;
  margin-top: calc(-25 / 16 * 1rem);
  cursor: pointer;
  transition: transform var(--duration-base) var(--ease-rich);
}
@media screen and (max-width: 579.98px) {
  .hero_slide_btn {
    width: calc(36 / 16 * 1rem);
    padding: calc(8 / 16 * 1rem);
  }
}
.hero_slide_btn:hover {
  transform: scale(1.12);
}
.hero_slide_btn.-prev {
  left: calc(-36 / 16 * 1rem);
}
@media (width <= 870px) {
  .hero_slide_btn.-prev {
    left: calc(15 / 16 * 1rem);
  }
}
@media screen and (width <= 870px) and (max-width: 579.98px) {
  .hero_slide_btn.-prev {
    left: 0;
  }
}
.hero_slide_btn.-next {
  right: calc(-36 / 16 * 1rem);
}
@media (width <= 870px) {
  .hero_slide_btn.-next {
    right: calc(15 / 16 * 1rem);
  }
}
@media screen and (width <= 870px) and (max-width: 579.98px) {
  .hero_slide_btn.-next {
    right: 0;
  }
}

.profile {
  position: relative;
  margin-top: calc(-84 / 16 * 1rem);
}
@media screen and (max-width: 579.98px) {
  .profile {
    margin-top: calc(-30 / 16 * 1rem);
  }
}
.profile::before {
  position: absolute;
  bottom: calc(100% - 84 / 16 * 1rem);
  left: 0;
  z-index: 10;
  display: block;
  width: 100%;
  height: calc(55 / 16 * 1rem);
  content: "";
  background-image: url("data:image/svg+xml,%3csvg%20width='768'%20height='55'%20viewBox='0%200%20768%2055'%20preserveAspectRatio='none'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_8218_663)'%3e%3cpath%20d='M384%200C538.304%200%20676.282%2020.9691%20768%2053.9268V55H0V53.9268C91.7181%2020.9691%20229.696%200%20384%200Z'%20fill='%23fff8e1'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_8218_663'%3e%3crect%20width='768'%20height='55'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: auto 100%;
}
@media screen and (max-width: 579.98px) {
  .profile::before {
    top: calc(20 / 16 * 1rem);
    bottom: auto;
    height: calc(56 / 16 * 1rem);
  }
}
.profile::after {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: calc(100% - 84 / 16 * 1rem);
  content: "";
  background: var(--color-light-yellow);
}
@media screen and (max-width: 579.98px) {
  .profile::after {
    height: calc(100% - 56 / 16 * 1rem);
  }
}

.profile_slide {
  position: relative;
  z-index: 10;
  min-height: calc(200 / 16 * 1rem);
  transition: height var(--duration-slow) var(--ease-rich);
}

.profile_slide_item {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(200 / 16 * 1rem);
  padding: calc(30 / 16 * 1rem) calc(40 / 16 * 1rem);
  line-height: 1.5;
  pointer-events: none;
  background-color: var(--color-base);
  border-radius: calc(20 / 16 * 1rem);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(calc(16 / 16 * 1rem));
  transition: opacity var(--duration-slow) var(--ease-rich), transform var(--duration-slow) var(--ease-rich);
}
.profile_slide_item::before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: 10;
  display: block;
  width: calc(30 / 16 * 1rem);
  height: calc(20 / 16 * 1rem);
  margin-left: calc(-15 / 16 * 1rem);
  content: "";
  background-color: var(--color-base);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.profile_slide_item.-current {
  z-index: 2;
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 579.98px) {
  .profile_slide_item {
    padding: calc(30 / 16 * 1rem);
  }
}

.profile_slide_start {
  display: grid;
  gap: calc(16 / 16 * 1rem);
  justify-content: center;
  line-height: 1;
  text-align: center;
}

.profile_slide_start_ttl {
  font-size: calc(40 / 16 * 1rem);
  color: var(--color-primary);
  font-style: normal;
  font-weight: 400;
  font-family: "Darumadrop One", sans-serif;
}
@media screen and (max-width: 579.98px) {
  .profile_slide_start_ttl {
    font-size: calc(36 / 16 * 1rem);
  }
}
.profile_slide_start_ttl > .-orange {
  color: var(--color-secondary);
}

.profile_slide_start_text {
  font-style: normal;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}

.profile_slide_char {
  display: flex;
  gap: calc(20 / 16 * 1rem);
  align-items: center;
}
@media screen and (max-width: 579.98px) {
  .profile_slide_char {
    flex-direction: column;
    gap: calc(16 / 16 * 1rem);
  }
}

.profile_slide_char_name {
  flex-shrink: 0;
}

.profile_slide_char_list {
  display: grid;
  gap: calc(6 / 16 * 1rem);
}
.profile_slide_char_list > li {
  display: flex;
  gap: calc(3 / 16 * 1rem);
}
.profile_slide_char_list > li::before {
  display: block;
  flex-shrink: 0;
  width: calc(20 / 16 * 1rem);
  height: calc(20 / 16 * 1rem);
  margin-top: calc(3 / 16 * 1rem);
  content: "";
  background-image: url("data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M8.00292%206.55466C9.64251%205.21815%2010.2984%202.56268%2013.9055%203.54751C16.8567%204.54989%2018.2511%2010.6976%2013.9055%2014.2396C10.626%2016.9126%203.93186%2016.2092%203.41178%2012.2348C2.75594%207.22291%206.36333%207.89117%208.00292%206.55466Z'%20fill='%23E4B061'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.recipe {
  padding: calc(42 / 16 * 1rem) 0 calc(84 / 16 * 1rem);
  background: var(--color-light-yellow);
}

.recipe_hd {
  display: grid;
  gap: calc(12 / 16 * 1rem);
  line-height: 1;
  text-align: center;
}

.recipe_hd_en {
  font-size: calc(30 / 16 * 1rem);
  color: var(--color-primary);
  font-style: normal;
  font-weight: 400;
  font-family: "Darumadrop One", sans-serif;
}

.recipe_hd_ttl {
  color: var(--color-secondary);
  letter-spacing: 0.02em;
  font-style: normal;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}

.recipe_wrap {
  margin-top: calc(30 / 16 * 1rem);
  overflow-y: visible;
}
.recipe_list {
  display: grid;
  grid-auto-columns: minmax(0, calc(180 / 16 * 1rem));
  grid-auto-flow: column;
  gap: calc(20 / 16 * 1rem);
  justify-content: center;
}
@media screen and (max-width: 579.98px) {
  .recipe_list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(16 / 16 * 1rem);
  }
}

@keyframes recipeFadeUp {
  from {
    opacity: 0;
    transform: translateY(calc(16 / 16 * 1rem));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.recipe_item {
  display: none;
  flex-direction: column;
  gap: calc(16 / 16 * 1rem);
  align-items: center;
  padding: calc(16 / 16 * 1rem);
  font-size: calc(14 / 16 * 1rem);
  text-align: center;
  background: var(--color-base);
  border-radius: calc(10 / 16 * 1rem);
  box-shadow: var(--shadow);
  transition: transform var(--duration-base) var(--ease-rich);
}
.recipe_item:hover {
  transform: translateY(calc(3 / 16 * 1rem));
}
.recipe_item.-current {
  display: inline-flex;
  animation: recipeFadeUp var(--duration-slow) var(--ease-rich) 0.3s backwards;
}
@media screen and (max-width: 579.98px) {
  .recipe_item {
    width: calc(50% - 8 / 16 * 1rem);
  }
}

.story {
  position: relative;
  padding-top: calc(20 / 16 * 1rem);
  overflow-x: clip;
}
.story::before, .story::after {
  position: absolute;
  top: 0;
  left: -10%;
  display: block;
  width: 120%;
  height: 100%;
  content: "";
  box-shadow: var(--shadow);
}
@media screen and (max-width: 579.98px) {
  .story::before, .story::after {
    left: -20%;
    width: 140%;
  }
}
.story::before {
  z-index: 2;
  background: #fbf7ed;
  transform: rotate(-5.29deg);
}
.story::after {
  z-index: 1;
  background-color: #f3f2ec;
  background-image: linear-gradient(to right, #e7e2d1 calc(1 / 16 * 1rem), transparent calc(1 / 16 * 1rem)), linear-gradient(to bottom, #e7e2d1 calc(1 / 16 * 1rem), transparent calc(1 / 16 * 1rem));
  background-size: calc(14 / 16 * 1rem) calc(14 / 16 * 1rem);
  transform: rotate(3.96deg);
}
@media screen and (max-width: 579.98px) {
  .story {
    padding-bottom: calc(40 / 16 * 1rem);
  }
}

.story_cnt {
  position: relative;
  z-index: 10;
  max-width: calc(660 / 16 * 1rem);
  padding-top: calc(50 / 16 * 1rem);
  padding-bottom: calc(80 / 16 * 1rem);
  margin-inline: auto;
  text-align: center;
}
.story_cnt::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #fff;
  background-image: linear-gradient(to right, #f3f3f3 calc(1 / 16 * 1rem), transparent calc(1 / 16 * 1rem)), linear-gradient(to bottom, #f3f3f3 calc(1 / 16 * 1rem), transparent calc(1 / 16 * 1rem));
  background-size: calc(10 / 16 * 1rem) calc(10 / 16 * 1rem);
  box-shadow: var(--shadow);
  transform: rotate(2.6deg);
}
@media screen and (max-width: 579.98px) {
  .story_cnt::after {
    left: -20%;
    width: 140%;
  }
}
@media screen and (max-width: 579.98px) {
  .story_cnt {
    padding-inline: calc(15 / 16 * 1rem);
  }
}

.story_hd {
  position: relative;
  z-index: 2;
  line-height: 1;
}

.story_hd_en {
  font-size: calc(80 / 16 * 1rem);
  color: var(--color-primary);
  font-style: normal;
  font-weight: 400;
  font-family: "Darumadrop One", sans-serif;
}
@media screen and (max-width: 579.98px) {
  .story_hd_en {
    font-size: calc(50 / 16 * 1rem);
  }
}

.story_hd_ttl {
  margin-top: calc(10 / 16 * 1rem);
  font-size: calc(24 / 16 * 1rem);
  color: var(--color-secondary);
  font-style: normal;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}
@media screen and (max-width: 579.98px) {
  .story_hd_ttl {
    font-size: calc(18 / 16 * 1rem);
  }
}

.story_body {
  display: grid;
  gap: calc(30 / 16 * 1rem);
  margin-top: calc(30 / 16 * 1rem);
}

.story_text {
  display: grid;
  gap: calc(30 / 16 * 1rem);
}

.story_text.-intro {
  position: relative;
}
.story_text.-intro::before {
  position: absolute;
  bottom: -40%;
  left: 50%;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1720/932;
  content: "";
  background-image: url("../../img/story-reizouko@2x.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateX(-50%);
}
@media screen and (max-width: 579.98px) {
  .story_text.-intro::before {
    bottom: 0%;
    width: 100vw;
  }
}
.story_text.-intro > p {
  position: relative;
  z-index: 2;
}
.story_text.-intro > p.-reizouko {
  padding: 20px 0;
}
@media screen and (max-width: 579.98px) {
  .story_text.-intro > p.-reizouko {
    padding: 10px 0;
  }
}

.story_prof {
  position: relative;
  display: grid;
  gap: calc(10 / 16 * 1rem);
  max-width: calc(420 / 16 * 1rem);
  margin-inline: auto;
}

.story_prof_item {
  display: flex;
  gap: calc(10 / 16 * 1rem);
  align-items: center;
}
.story_prof_item:nth-child(2n+1) {
  flex-direction: row-reverse;
}

.story_prof_item_img {
  flex-shrink: 0;
}
@media screen and (max-width: 579.98px) {
  .story_prof_item_img {
    max-width: calc(90 / 16 * 1rem);
  }
}

.story_prof_item_name {
  padding: calc(12 / 16 * 1rem) calc(20 / 16 * 1rem);
  background: var(--color-light-yellow);
  border-radius: calc(20 / 16 * 1rem);
}
.story_prof_item_name.-green {
  background: var(--color-light-green);
}
.story_prof_item_name.-blue {
  background: var(--color-light-blue);
}
.story_prof_item_name.-orange {
  background: var(--color-light-orange);
}
.story_prof_item_name > strong {
  font-size: calc(20 / 16 * 1rem);
  font-style: normal;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}
@media screen and (max-width: 579.98px) {
  .story_prof_item_name > strong {
    font-size: calc(16 / 16 * 1rem);
  }
}
@media screen and (max-width: 579.98px) {
  .story_prof_item_name {
    flex: 1;
  }
}

.story_important_list {
  display: flex;
  gap: calc(10 / 16 * 1rem);
  justify-content: center;
  margin-top: calc(12 / 16 * 1rem);
}
.story_important_list > li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(80 / 16 * 1rem);
  height: calc(80 / 16 * 1rem);
  text-align: center;
  background: var(--color-light-yellow);
  border-radius: 50%;
}
.story_important_list > li.-green {
  background: var(--color-light-green);
}
.story_important_list > li.-blue {
  background: var(--color-light-blue);
}
.story_important_list > li.-orange {
  background: var(--color-light-orange);
}

.quiz {
  padding-bottom: calc(60 / 16 * 1rem);
  margin-top: calc(80 / 16 * 1rem);
  overflow-x: hidden;
}

.quiz ruby {
  ruby-align: center;
}

.quiz rt {
  font-size: 0.6em;
  font-weight: 400;
}

.quiz_hd {
  display: flex;
  gap: calc(10 / 16 * 1rem);
  align-items: flex-end;
  justify-content: center;
  line-height: 1;
  text-align: center;
}
@media screen and (max-width: 579.98px) {
  .quiz_hd {
    gap: calc(0 / 16 * 1rem);
  }
}

.quiz_hd_cnt {
  display: grid;
  gap: calc(16 / 16 * 1rem);
}

.quiz_hd_en {
  font-size: calc(80 / 16 * 1rem);
  color: var(--color-primary);
  font-style: normal;
  font-weight: 400;
  font-family: "Darumadrop One", sans-serif;
}
@media screen and (max-width: 579.98px) {
  .quiz_hd_en {
    font-size: calc(50 / 16 * 1rem);
  }
}

.quiz_hd_ttl {
  font-size: calc(26 / 16 * 1rem);
  color: var(--color-secondary);
  font-style: normal;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}
@media screen and (max-width: 579.98px) {
  .quiz_hd_ttl {
    font-size: calc(18 / 16 * 1rem);
  }
}

.quiz_hd_text {
  padding: 5px;
  color: #fff;
  background-color: var(--color-primary);
  border-radius: 50px;
}

[v-cloak] {
  display: none;
}

.quiz_wrap {
  position: relative;
  margin-top: calc(32 / 16 * 1rem);
  background: #f9efce;
  border-radius: calc(20 / 16 * 1rem);
}
@media screen and (max-width: 579.98px) {
  .quiz_wrap {
    margin-top: calc(40 / 16 * 1rem);
  }
}

.quiz_list {
  display: grid;
}

.quiz_item {
  position: relative;
  visibility: hidden;
  grid-area: 1/1;
  padding: calc(40 / 16 * 1rem);
}
.quiz_item.-current {
  visibility: visible;
}
.quiz_item.-answered .quiz_item_q {
  display: none;
}
.quiz_item.-answered .quiz_item_a {
  display: block;
}
@media screen and (max-width: 579.98px) {
  .quiz_item {
    padding-inline: calc(16 / 16 * 1rem);
    padding-bottom: 50px;
  }
}

.quiz_item_num {
  position: absolute;
  top: calc(-22 / 16 * 1rem);
  left: calc(22 / 16 * 1rem);
  font-size: calc(40 / 16 * 1rem);
  line-height: 1;
  color: var(--color-primary);
  font-style: normal;
  font-weight: 400;
  font-family: "Darumadrop One", sans-serif;
}
.quiz_item_num::before {
  position: absolute;
  top: calc(-14 / 16 * 1rem);
  left: calc(-19 / 16 * 1rem);
  display: block;
  width: calc(39 / 16 * 1rem);
  height: calc(27 / 16 * 1rem);
  content: "";
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4AAAA2CAMAAABeBV+DAAAADnRFWHRTb2Z0d2FyZQBGaWdtYZ6xlmMAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAABc1JHQgCuzhzpAAAABGdBTUEAALGPC/xhBQAAAHJQTFRFR3BM8IQA8IMAOrYA74MA74MAQK8A74UAPLcAO7YAOrYA74IA74AA74cA8IMA8IQAPbYAOrUAOrYA8oQAQLcAObYAO7YAO7cAOLcAO7gAOrUA74MA8IUA8YQA8IMA74IA8YIA74QAOrcAOrUA8IMAOrYAZisr3gAAACR0Uk5TAN/v71CQEDBAv99gICC/v1CAr18gcHBfII+QoK+fr3CPcGBg57Sf/AAAATBJREFUWMPll1kSgyAQREWUKGTV7PsC979iBk1+gaG68hMO8Ept5vVYFLDTl6LH0QphbYmjTSwUVxFugcPVhKtxuDnhKhyuJNzkl0nspN4Bk9DOSYVLQjrnOlwSW8K5BpdESzitYDPR+Mdb4WbiSDi5hs2E8mm0uJlY+tdd4mbCpxG/fMl22vvXPeDstEq5fOl2UjohDYadhsu3wdmpi6bB6gkVVQGvJ6IqYPZETAXMnoipgNsTYRWwGzusAn5jB1WQ0dghFWQ0dkgFOY0dUAHhBLfmAyowojTstSFFBZwzqACH85dPA7ffp5av+L59w+7bVhgYzl9BAqLWUCMGnr3OMLxpPfLsBQU8fYB3FPA88mAhV59PCAv5mwks5Mf/htxjQ8b96g4hC6BnHjn2p/MG1i0uClzkbp4AAAAASUVORK5CYII=");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.quiz_item_select {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  padding: 10px 5px;
  margin-bottom: 15px;
  background-color: rgba(255, 255, 255, 0.6549019608);
  border-radius: 10px;
}
@media screen and (max-width: 579.98px) {
  .quiz_item_select {
    flex-direction: column;
  }
}

.quiz_item_select_hd {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
}

.quiz_item_select_ttl {
  font-size: calc(14 / 16 * 1rem);
}

.quiz_item_select_result {
  font-size: calc(20 / 16 * 1rem);
  color: var(--color-primary);
}

.quiz_item_select_answer {
  font-size: calc(14 / 16 * 1rem);
}

.quiz_item_text {
  font-size: calc(20 / 16 * 1rem);
  line-height: 2;
  font-style: normal;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}
@media screen and (max-width: 579.98px) {
  .quiz_item_text {
    font-size: calc(18 / 16 * 1rem);
  }
}

.quiz_item_list {
  display: grid;
  gap: calc(8 / 16 * 1rem);
  margin-top: calc(28 / 16 * 1rem);
}
.quiz_item_list.-answer {
  margin-top: calc(5 / 16 * 1rem);
}

.quiz_item_btn {
  display: flex;
  gap: calc(10 / 16 * 1rem);
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(60 / 16 * 1rem);
  padding: calc(10 / 16 * 1rem) calc(20 / 16 * 1rem);
  font-size: calc(20 / 16 * 1rem);
  text-align: center;
  cursor: pointer;
  background: var(--color-base);
  border-radius: calc(10 / 16 * 1rem);
  font-style: normal;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}
@media screen and (max-width: 579.98px) {
  .quiz_item_btn {
    font-size: calc(18 / 16 * 1rem);
  }
}
.quiz_item_a .quiz_item_btn {
  cursor: default;
}
.quiz_item_q .quiz_item_btn {
  transition: transform var(--duration-base) var(--ease-rich), box-shadow var(--duration-base) var(--ease-rich);
}
.quiz_item_q .quiz_item_btn:hover {
  box-shadow: var(--shadow);
  transform: translateY(calc(-3 / 16 * 1rem));
}
.quiz_item_q .quiz_item_btn:active {
  box-shadow: none;
  transform: translateY(0);
}
.quiz_item_btn::before {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: calc(30 / 16 * 1rem);
  height: calc(30 / 16 * 1rem);
  padding-bottom: calc(5 / 16 * 1rem);
  font-size: calc(20 / 16 * 1rem);
  color: var(--color-base);
  content: attr(data-num);
  background: var(--badge, var(--color-secondary));
  border-radius: 50%;
  font-style: normal;
  font-weight: 400;
  font-family: "Darumadrop One", sans-serif;
}
.quiz_item_btn[data-num="1"] {
  --badge: var(--color-secondary);
}
.quiz_item_btn[data-num="2"] {
  --badge: #5fb236;
}
.quiz_item_btn[data-num="3"] {
  --badge: var(--color-primary);
}
.quiz_item_btn > span {
  display: block;
  flex: 1;
  text-align: center;
}

.quiz_item_a {
  display: none;
  text-align: center;
}

.quiz_item_note {
  margin-top: calc(16 / 16 * 1rem);
  font-size: calc(14 / 16 * 1rem);
  line-height: 2;
}

.quiz_item_next {
  margin-top: calc(24 / 16 * 1rem);
}
.quiz_item_next > button {
  display: inline-flex;
  gap: calc(10 / 16 * 1rem);
  align-items: center;
  padding: calc(12 / 16 * 1rem) calc(40 / 16 * 1rem);
  font-size: calc(16 / 16 * 1rem);
  color: var(--color-base);
  cursor: pointer;
  background: var(--color-primary);
  border-radius: calc(8 / 16 * 1rem);
  transition: transform var(--duration-base) var(--ease-rich), box-shadow var(--duration-base) var(--ease-rich);
  font-style: normal;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}
.quiz_item_next > button:hover {
  box-shadow: var(--shadow);
  transform: translateY(calc(-3 / 16 * 1rem));
}
.quiz_item_next > button:active {
  box-shadow: none;
  transform: translateY(0);
}
.quiz_item_next > button::after {
  display: inline-block;
  width: calc(14 / 16 * 1rem);
  height: calc(14 / 16 * 1rem);
  content: "";
  background-image: url("data:image/svg+xml,%3csvg%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='7'%20cy='7'%20r='7'%20transform='matrix(-1%200%200%201%2014%200)'%20fill='%23FECB01'/%3e%3cg%20clip-path='url(%23clip0_0_59)'%3e%3cpath%20d='M6.24851%204.00379C6.09738%204.00379%205.94625%204.06433%205.8329%204.18542C5.61754%204.41247%205.63266%204.77197%205.85935%204.98766L8.23209%207.20517L5.83668%209.76326C5.62132%209.99409%205.63266%2010.3536%205.85935%2010.5655C6.08605%2010.7812%206.44498%2010.7698%206.66034%2010.539L9.44491%207.56467C9.54692%207.45493%209.60359%207.30735%209.59981%207.15598C9.59604%207.00461%209.53181%206.8646%209.42224%206.75864L6.63767%204.15137C6.5281%204.04919%206.38831%204%206.25229%204L6.24851%204.00379Z'%20fill='%23E60012'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_0_59'%3e%3crect%20width='6.72'%20height='6.72'%20fill='white'%20transform='matrix(-1%200%200%201%2011%204)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
}

.quiz_item_retry {
  margin-top: calc(28 / 16 * 1rem);
  text-align: center;
}
.quiz_item_retry > button {
  display: inline-flex;
  gap: calc(10 / 16 * 1rem);
  align-items: center;
  padding: calc(12 / 16 * 1rem) calc(40 / 16 * 1rem);
  font-size: calc(16 / 16 * 1rem);
  color: var(--color-base);
  cursor: pointer;
  background: var(--color-primary);
  border-radius: calc(8 / 16 * 1rem);
  transition: transform var(--duration-base) var(--ease-rich), box-shadow var(--duration-base) var(--ease-rich);
  font-style: normal;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}
.quiz_item_retry > button:hover {
  box-shadow: var(--shadow);
  transform: translateY(calc(-3 / 16 * 1rem));
}
.quiz_item_retry > button:active {
  box-shadow: none;
  transform: translateY(0);
}
.quiz_item_retry > button::after {
  display: inline-block;
  width: calc(14 / 16 * 1rem);
  height: calc(14 / 16 * 1rem);
  content: "";
  background-image: url("data:image/svg+xml,%3csvg%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='7'%20cy='7'%20r='7'%20transform='matrix(-1%200%200%201%2014%200)'%20fill='%23FECB01'/%3e%3cg%20clip-path='url(%23clip0_0_59)'%3e%3cpath%20d='M6.24851%204.00379C6.09738%204.00379%205.94625%204.06433%205.8329%204.18542C5.61754%204.41247%205.63266%204.77197%205.85935%204.98766L8.23209%207.20517L5.83668%209.76326C5.62132%209.99409%205.63266%2010.3536%205.85935%2010.5655C6.08605%2010.7812%206.44498%2010.7698%206.66034%2010.539L9.44491%207.56467C9.54692%207.45493%209.60359%207.30735%209.59981%207.15598C9.59604%207.00461%209.53181%206.8646%209.42224%206.75864L6.63767%204.15137C6.5281%204.04919%206.38831%204%206.25229%204L6.24851%204.00379Z'%20fill='%23E60012'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_0_59'%3e%3crect%20width='6.72'%20height='6.72'%20fill='white'%20transform='matrix(-1%200%200%201%2011%204)'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: contain;
}

.quiz_item_result {
  text-align: center;
}

.quiz_item_result_all_hd {
  display: flex;
  gap: calc(10 / 16 * 1rem);
  align-items: flex-end;
  justify-content: center;
  font-size: calc(60 / 16 * 1rem);
  color: var(--color-primary);
  font-style: normal;
  font-weight: 400;
  font-family: "Darumadrop One", sans-serif;
}

.quiz_item_result_all_label {
  margin-top: calc(10 / 16 * 1rem);
  text-align: center;
}
.quiz_item_result_all_label > span {
  display: inline-flex;
  align-items: center;
  padding: calc(6 / 16 * 1rem) calc(40 / 16 * 1rem);
  font-size: calc(20 / 16 * 1rem);
  color: var(--color-base);
  background: var(--color-secondary);
  border-radius: calc(999 / 16 * 1rem);
  font-style: normal;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}

.quiz_item_result_text {
  margin-top: calc(16 / 16 * 1rem);
  font-style: normal;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}

.quiz_item_result_part {
  display: flex;
  gap: calc(12 / 16 * 1rem);
  align-items: flex-end;
  justify-content: center;
  font-size: calc(20 / 16 * 1rem);
  line-height: 1;
  font-style: normal;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}

.quiz_item_result_part_total {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  padding: calc(1 / 16 * 1rem) calc(20 / 16 * 1rem) calc(8 / 16 * 1rem);
  line-height: 1;
  color: var(--color-secondary);
  border: calc(2 / 16 * 1rem) solid;
  border-radius: calc(10 / 16 * 1rem);
}
.quiz_item_result_part_total span {
  font-size: calc(30 / 16 * 1rem);
  font-style: normal;
  font-weight: 400;
  font-family: "Darumadrop One", sans-serif;
}

.quiz_item_result_part_seikai {
  align-items: baseline;
  color: var(--color-primary);
}
.quiz_item_result_part_seikai span {
  font-size: calc(60 / 16 * 1rem);
  font-style: normal;
  font-weight: 400;
  font-family: "Darumadrop One", sans-serif;
}
.quiz_item_result_part_seikai em {
  margin-left: calc(3 / 16 * 1rem);
  font-size: calc(28 / 16 * 1rem);
}

@keyframes quizCharHop {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(calc(-14 / 16 * 1rem));
    animation-timing-function: ease-in;
  }
}
@keyframes quizCharSway {
  0%, 100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
.quiz_char {
  position: absolute;
  z-index: 5;
}
.quiz_char.-mames {
  right: calc(20 / 16 * 1rem);
  bottom: calc(-30 / 16 * 1rem);
}
.quiz_char.-omame {
  right: calc(-25 / 16 * 1rem);
  bottom: calc(-17 / 16 * 1rem);
}
.quiz_char.-all {
  animation: quizCharHop 0.6s infinite;
}
.quiz_char.-mames.-all {
  animation-delay: 0.2s;
}
.quiz_char.-mames.-normal {
  transform-origin: bottom center;
  animation: quizCharSway 4s ease-in-out infinite;
}

.quiz_bnr {
  margin-top: calc(50 / 16 * 1rem);
  text-align: center;
}
.quiz_bnr > p {
  position: relative;
  display: flex;
  gap: 0 10px;
  align-items: center;
  justify-content: center;
}
.quiz_bnr > p::before, .quiz_bnr > p::after {
  width: 2px;
  height: 20px;
  content: "";
  background-color: #5fb236;
  border-radius: 1px;
  transform: rotate(-20deg);
}
.quiz_bnr > p::after {
  transform: rotate(20deg);
}
.quiz_bnr > a {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-rich);
}
.quiz_bnr > a:hover {
  transform: translateY(calc(3 / 16 * 1rem));
}
@media screen and (max-width: 579.98px) {
  .quiz_bnr {
    margin-top: calc(60 / 16 * 1rem);
  }
  .quiz_bnr > p {
    font-size: 14px;
  }
}

.footer {
  display: grid;
  gap: calc(13 / 16 * 1rem);
  padding: calc(30 / 16 * 1rem) 0;
  color: var(--color-base);
  text-align: center;
  background: var(--color-primary);
}

.footer_link > a {
  display: inline-flex;
  gap: calc(6 / 16 * 1rem);
  font-size: calc(16 / 16 * 1rem);
  font-style: normal;
  font-weight: 700;
  font-family: "Zen Maru Gothic", sans-serif;
}
.footer_link > a::after {
  display: block;
  width: calc(24 / 16 * 1rem);
  height: calc(24 / 16 * 1rem);
  content: "";
  background-image: url("data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3.99756%2020.9992C3.44833%2020.9992%203.00195%2020.5523%203.00195%2020.0036V5.66061C3.00195%205.1114%203.44833%204.66504%203.99756%204.66504H10.7177V6.65618H4.99317V19.008H17.3455V13.2838H19.3367V20.0031C19.3367%2020.2692%2019.2333%2020.5189%2019.0451%2020.7071C18.8569%2020.8952%2018.6072%2020.9986%2018.3411%2020.9986H3.99756V20.9992Z'%20fill='%23E0E0E0'/%3e%3cpath%20d='M10.4951%2014.4008C10.2544%2014.4008%2010.0291%2014.308%209.86103%2014.14C9.50742%2013.7864%209.51484%2013.2038%209.87746%2012.8412L18.0692%204.65027L13.7947%204.61422C13.3738%204.61051%2013.0302%204.29138%2012.9968%203.87152C12.9788%203.6441%2013.0535%203.42675%2013.2083%203.25923C13.3621%203.09224%2013.5726%203%2013.8005%203L20.5455%203.05831C20.7629%203.06043%2020.941%203.23855%2020.9426%203.45537L21.0015%2010.1932C21.0036%2010.41%2020.9203%2010.6147%2020.7677%2010.7684C20.615%2010.9227%2020.4119%2011.0075%2020.1956%2011.0075C20.1734%2011.0075%2020.1511%2011.0064%2020.1288%2011.0048C19.709%2010.9709%2019.3898%2010.6279%2019.3866%2010.207L19.3501%205.93263L11.1593%2014.123C10.9807%2014.3017%2010.7448%2014.4003%2010.4945%2014.4003L10.4951%2014.4008Z'%20fill='%23E0E0E0'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.footer_member {
  padding: 0 20px;
}
.footer_member > a {
  display: block;
  max-width: 330px;
  margin: 10px auto;
  overflow: hidden;
  border-radius: 5px;
  transition: opacity 0.3s;
}
.footer_member > a:hover {
  opacity: 0.6;
}

.footer_sns {
  display: flex;
  gap: 20px;
  justify-content: center;
}
.footer_sns > a {
  display: block;
  width: 40px;
  aspect-ratio: 1/1;
  transition: opacity 0.3s;
}
.footer_sns > a:hover {
  opacity: 0.6;
}

.footer_copy {
  font-size: calc(14 / 16 * 1rem);
}

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.bg_slide {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-rich) 0.2s;
}
.bg_slide.-current {
  opacity: 1;
}
/*# sourceMappingURL=home.css.map */