@charset "UTF-8";
@forward 'sass:math' as math-*;
/**
  スクロール位置で表示アニメーション
 **/
/* bound text animation
--------------- */
@keyframes bound-text {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0); }
  40% {
    transform: translateY(-20px); }
  100% {
    transform: translateY(-10px); } }

.is-animated .bound-text {
  position: relative;
  transform-origin: center bottom;
  animation-name: bound-text;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: both; }

/* bound text animation
--------------- */
.is-animated .animation-zoom-in {
  animation-name: zoomInAnime;
  animation-duration: 0.5s; }

@keyframes zoomInAnime {
  0% {
    transform: scale(1); }
  50% {
    transform: translateY(-15%) scale(1.1); }
  100% {
    transform: translateY(0) scale(1); } }

/* zoomOut animation
--------------- */
.animation-zoom-out {
  opacity: 0; }
  .is-animated .animation-zoom-out {
    animation-name: zoomOutAnime;
    animation-duration: 0.7s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards; }

@keyframes zoomOutAnime {
  0% {
    opacity: 0; }
  50% {
    opacity: 1;
    transform: scale(1.2); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@keyframes bounce {
  0% {
    opacity: 0; }
  0%,
  20%,
  50%,
  75%,
  100% {
    transform: translateY(0); }
  20% {
    transform: scale(0.5) translate3d(0, -30px, 0);
    transition: opacity 0.5s ease, transform 1s cubic-bezier(0.16, 0.05, 0, 1); }
  40% {
    transform: translateY(-30px); }
  60% {
    transform: translateY(-10px); }
  100% {
    opacity: 1; } }

/* above fadeIn animation
--------------- */
.animation-above-fade-in {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.5, 0, 0, 1), transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  transform: translateY(-100px); }
  .animation-above-fade-in.is-animated {
    opacity: 1;
    transform: translateY(0); }

/* bottom fadeIn animation
--------------- */
.animation-bottom-fade-in {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.5, 0, 0, 1), transform 1s cubic-bezier(0.5, 0, 0, 1);
  transform: translateY(50px); }
  .is-animated .animation-bottom-fade-in {
    opacity: 1;
    transform: translateY(0); }

/* Button animation
--------------- */
@keyframes scale {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.05, 1.05); }
  100% {
    transform: scale(1); } }

.button-anim {
  display: block;
  transition: 0.5s;
  animation-name: scale;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }
  .button-anim:hover {
    animation: none; }
  @media screen and (min-width: 768px) {
    .button-anim {
      animation: none;
      transform: none;
      transition: unset; } }

.text-bounce.is-animated {
  position: relative;
  transform-origin: center bottom;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  opacity: 0; }

.button-hover {
  display: block;
  transition: 0.5s; }
  .button-hover:hover {
    transform: scale(1.05, 1.05); }

/* bound text animation
--------------- */
@keyframes movingThumb {
  0%,
  100% {
    transform: translateX(0px) rotate(0deg); }
  50% {
    transform: translateX(0px) rotate(3deg); } }

.thumb-animation.is-moving {
  transition: transform 0.3s ease-in-out;
  transform: rotate(0deg);
  transform-origin: 50% 100%;
  animation: movingThumb 0.5s linear 2;
  animation-delay: 0.5s; }

.entry-method-item.thumb-animation.is-animated::before {
  transition: transform 0.3s ease-in-out;
  transform: rotate(0deg);
  transform-origin: 50% 100%;
  animation: movingThumb 0.5s linear 2;
  animation-delay: 0s; }

@keyframes movingText {
  0%,
  100% {
    transform: translateX(0px) rotate(0deg); }
  50% {
    transform: translateX(5px) rotate(7.5deg); } }

.text-animation.is-moving {
  transition: transform 0.3s ease-in-out;
  transform: rotate(0deg);
  transform-origin: 50% 100%;
  animation: movingText 0.5s linear 1;
  animation-delay: 0.5s; }

/* slide in
--------------- */
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0; }
  100% {
    transform: translateX(0); }
  40%,
  100% {
    opacity: 1; } }

.scroll-animation {
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.72s cubic-bezier(0.16, 0.05, 0, 1);
  transform: scale(0.95) translate3d(0, 1em, 0); }
  .scroll-animation.is-animated {
    opacity: 1;
    transform: scale(1) translateZ(0); }

/* モグラたたき風
--------------- */
.image-slide-out {
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  transition: transform 0.3s linear;
  animation-delay: 1s; }
  @media screen and (min-width: 768px) {
    .image-slide-out {
      animation-duration: 18s; } }

.image-slide-in {
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  transition: transform 0.3s ease-in-out;
  animation-delay: 1s; }
  @media screen and (min-width: 768px) {
    .image-slide-in {
      animation-duration: 18s; } }

@media screen and (min-width: 768px) {
  @keyframes slideOut-1 {
    0% {
      transform: translateY(0); }
    10% {
      transform: translateY(300px); }
    18%,
    100% {
      transform: translateY(0px); } }
  @keyframes slideIn-1 {
    0%,
    1% {
      transform: translateY(300px); }
    8% {
      transform: translateY(0); }
    19%,
    100% {
      transform: translateY(300px); } }
  @keyframes slideOut-2 {
    0%,
    20% {
      transform: translateY(0); }
    30% {
      transform: translateY(300px); }
    38%,
    100% {
      transform: translateY(0px); } }
  @keyframes slideIn-2 {
    0%,
    21% {
      transform: translateY(300px); }
    28% {
      transform: translateY(0); }
    39%,
    100% {
      transform: translateY(300px); } }
  @keyframes slideOut-3 {
    0%,
    40% {
      transform: translateY(0); }
    50% {
      transform: translateY(300px); }
    58%,
    100% {
      transform: translateY(0px); } }
  @keyframes slideIn-3 {
    0%,
    41% {
      transform: translateY(300px); }
    48% {
      transform: translateY(0); }
    59%,
    100% {
      transform: translateY(300px); } }
  @keyframes slideOut-4 {
    0%,
    60% {
      transform: translateY(0); }
    70% {
      transform: translateY(300px); }
    78%,
    100% {
      transform: translateY(0px); } }
  @keyframes slideIn-4 {
    0%,
    61% {
      transform: translateY(300px); }
    68% {
      transform: translateY(0); }
    79%,
    100% {
      transform: translateY(300px); } }
  @keyframes slideOut-5 {
    0%,
    80% {
      transform: translateY(0); }
    90% {
      transform: translateY(300px); }
    98%,
    100% {
      transform: translateY(0px); } }
  @keyframes slideIn-5 {
    0%,
    81% {
      transform: translateY(300px); }
    88% {
      transform: translateY(0); }
    99%,
    100% {
      transform: translateY(300px); } } }

/* bound
--------------- */
@keyframes bounceAndScale {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(1.16); }
  100% {
    transform: scale(1); } }

@keyframes knock {
  0% {
    transform: translateX(0px) rotate(0deg); }
  50% {
    transform: translateX(0px) rotate(5deg); }
  100% {
    transform: translateX(0px) rotate(0deg); } }

.mv__inner.is-animated .mv__title,
.mv__inner.is-animated .mv__supplement-balloon {
  animation: fadeIn 3s linear forwards;
  visibility: visible; }

.mv__title.is-bounce {
  animation: bounceAndScale 0.23s linear forwards;
  animation-delay: 0.5s; }

.mv__supplement-balloon {
  transform-origin: 50% 100%; }

.thumb-animation.is-rotate {
  opacity: 1;
  animation: knock 0.3s linear 2;
  animation-timing-function: steps(1, end);
  animation-delay: 0.25s; }

/* slideInFromRight ... title
--------------- */
@keyframes slideInFromRight {
  0% {
    opacity: 0;
    transform: translateX(100%); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

/* above fadeIn animation
--------------- */
.animation-above-fade-in {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.5, 0, 0, 1), transform 0.5s cubic-bezier(0.5, 0, 0, 1);
  transform: translateY(-100px); }
  .animation-above-fade-in.is-animated {
    opacity: 1;
    transform: translateY(0); }

/* .button-contents
--------------- */
.button-contents__heading-02.is-animated img, .notice__thumb.is-animated img {
  opacity: 1;
  animation: knock 0.3s linear 2;
  animation-timing-function: steps(1, end);
  animation-delay: 0.25s;
  animation-iteration-delay: 0.07s; }

.notice__anochan.is-animated img, .campaign__heading-text.is-animated img, .campaign__content-text-kinken.is-animated img {
  animation: bounceAndScale 0.6s linear 1; }

/* above bgFadeOut animation
--------------- */
@keyframes bgRotateLeft {
  0% {
    transform: rotate(0) translate(0, 0); }
  50% {
    transform: rotate(90deg) translate(10%, 20%); }
  100% {
    transform: rotate(0) translate(0, 0); } }

@keyframes bgRotateRight {
  0% {
    transform: rotate(0) translate(0, 0); }
  50% {
    transform: rotate(-90deg) translate(-10%, 15%); }
  100% {
    transform: rotate(0) translate(0, 0); } }

.mv.is-animated::before {
  animation: bgRotateLeft 2s linear infinite; }

.mv.is-animated::after {
  animation: bgRotateRight 2s linear infinite; }

.text-uppercase {
  text-transform: uppercase; }

@media screen and (max-width: 767px) {
  .sp-block {
    display: none !important; } }

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

#contents-wrap {
  padding: 20px 0 0px 0;
  background-image: none; }

.layout {
  padding-inline: calc(32.5 / 375 * 100%); }
  @media screen and (min-width: 768px) {
    .layout {
      padding-inline: 30px; } }

.contents-layout {
  padding-inline: calc(50 / 375 * 100%); }
  @media screen and (min-width: 768px) {
    .contents-layout {
      padding-inline: 30px; } }

.color-red {
  color: #e83829; }

.auto {
  width: 100%;
  height: auto; }

@forward 'sass:math' as math-*;
body {
  margin: 0;
  color: #172b60; }
  @media screen and (min-width: 768px) {
    body {
      min-width: 960px; } }

.main {
  font-family: "Noto Sans CJK JP", "Noto Sans", "Noto Sans JP Subset", sans-serif;
  background-color: #e73828; }

main {
  position: relative;
  overflow: hidden; }
  main img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom; }

#title-area-detailpage {
  position: absolute;
  top: -10px;
  width: 100%;
  height: 96px;
  padding-top: 15px;
  background: url("/common/images/title-area-pc-bg-01.gif") top left repeat;
  border-top: 1px solid #cfcfcf;
  border-bottom: 3px solid #171c61; }

#title-area-inner {
  position: relative;
  width: 960px;
  margin-inline: auto; }

#title-area-detailpage h1 {
  float: left;
  height: 30px;
  padding: 15px 0 0px 10px;
  margin: 15px 0 0 0;
  font-size: 32px;
  border-left: 5px solid #171c61; }

@media screen and (max-width: 568px) {
  #detail-page {
    top: 6px !important; }
  #title-area-inner,
  #title-area-detailpage {
    position: static;
    width: 100%; }
  #title-area-detailpage {
    top: auto;
    height: auto;
    padding: 16px 0 32px;
    background: url("/common/images/title-area-pc-bg-01.gif") repeat scroll left top transparent 9;
    -webkit-background-size: 3px 3px;
    background-size: 3px 3px; }
  #title-area-detailpage h1 {
    float: none;
    height: 22px;
    min-height: auto;
    padding: 4px 0 0 5px;
    margin: 0 0 0 5px;
    font-size: 16px;
    border-left: 3px solid #171c61; }
  #title-area-detailpage h1 img {
    width: auto;
    height: 16px;
    vertical-align: center; } }

#contents-wrap {
  padding-top: 0 !important;
  background: none; }

/* パンくず
---------------------------------------------------- */
#bread-clumb li {
  display: inline;
  font-size: 12px;
  color: #666; }

#bread-clumb li a {
  color: #035d8a;
  text-decoration: none; }

#bread-clumb li a:hover {
  text-decoration: underline; }

#bread-clumb #home {
  padding-left: 12px;
  background: url("/common/images/bread-clumb-home-bg-01.png") left 1px no-repeat; }

@media screen and (max-width: 568px) {
  #bread-clumb {
    margin: 0 0 4px 5px; }
  #bread-clumb li {
    padding: 4px 0 0 5px;
    font-size: 10px; }
  #bread-clumb #home {
    padding-left: 0;
    background: none; }
  #title-area-inner {
    width: 100%; } }

.section-inner {
  width: 100%;
  max-width: 640px;
  margin-inline: auto; }
  @media screen and (min-width: 768px) {
    .section-inner {
      max-width: 1224px;
      padding-inline: 0; } }

@forward 'sass:math' as math-*;
.mv {
  position: relative;
  overflow: hidden;
  background-color: #e73828; }
  .mv__kv {
    position: relative;
    width: 100%;
    line-height: 0;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .mv__kv {
        padding-top: 51px; } }
  .mv__kv-heading {
    margin: 0; }
  .mv__kv-image {
    width: 100%;
    height: auto; }
    @media screen and (min-width: 768px) {
      .mv__kv-image {
        max-width: 585px; } }
  .mv__period {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: calc(25 / 750 * 100vw) 0;
    margin-top: -1px;
    line-height: 0;
    background-color: #171c61; }
    @media screen and (min-width: 768px) {
      .mv__period {
        padding: 16px 0; } }
    .mv__period img {
      width: auto;
      max-width: 100%;
      height: calc(48 / 750 * 100vw); }
      @media screen and (min-width: 768px) {
        .mv__period img {
          height: 40px; } }

@forward 'sass:math' as math-*;
.campaign {
  position: relative;
  background-color: #e73828; }
  .campaign__inner {
    position: relative;
    width: calc(672 / 750 * 100%);
    padding-top: calc(48 / 750 * 100vw);
    margin-inline: auto;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .campaign__inner {
        max-width: 620px;
        padding-top: 47px; } }
  .campaign__off {
    width: 100%;
    margin-bottom: calc(30 / 672 * 100%); }
    @media screen and (min-width: 768px) {
      .campaign__off {
        margin-bottom: 51px; } }
  .campaign__sarani {
    position: relative;
    z-index: 1;
    width: calc(160 / 672 * 100%);
    margin: 0 auto calc(-38 / 750 * 100vw); }
    @media screen and (min-width: 768px) {
      .campaign__sarani {
        max-width: 156px;
        margin-bottom: -28px; } }
  .campaign__sticker {
    padding-top: calc(74 / 750 * 100vw);
    padding-bottom: calc(72 / 750 * 100vw);
    text-align: center;
    background-color: #171c61; }
    @media screen and (min-width: 768px) {
      .campaign__sticker {
        padding-top: 73px;
        padding-bottom: 68px; } }
  .campaign__sticker-inner {
    width: calc(672 / 750 * 100%);
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .campaign__sticker-inner {
        max-width: 620px; } }
  .campaign__sticker-visual {
    width: 100%; }
  .campaign__store-btn {
    display: block;
    width: calc(516 / 750 * 100%);
    margin: calc(60 / 750 * 100vw) auto 0;
    transition: 0.5s; }
    @media screen and (min-width: 768px) {
      .campaign__store-btn {
        max-width: 414px;
        margin-top: 40px; } }
  .campaign__online-link {
    display: block;
    width: 100%;
    padding: calc(48 / 750 * 100vw) 0 calc(50 / 750 * 100vw);
    line-height: 0;
    text-align: center;
    background-color: #e73828; }
    @media screen and (min-width: 768px) {
      .campaign__online-link {
        padding: 48px 0 48px; } }
    .campaign__online-link img {
      width: calc(620 / 750 * 100%);
      height: auto; }
      @media screen and (min-width: 768px) {
        .campaign__online-link img {
          max-width: 589px; } }

@forward 'sass:math' as math-*;
.page-link {
  padding: calc(30 / 750 * 100vw) 0;
  margin-top: 0;
  background-color: #ffe200; }
  @media screen and (min-width: 768px) {
    .page-link {
      padding: 60px 0 30px; } }
  .page-link__inner {
    display: flex;
    gap: calc(16 / 750 * 100vw);
    justify-content: center;
    width: 100%;
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .page-link__inner {
        gap: 28px;
        max-width: 720px; } }
  .page-link__item {
    display: block;
    flex: 1;
    line-height: 0;
    transition: 0.5s; }
    @media screen and (min-width: 768px) {
      .page-link__item:hover {
        transform: scale(1.05); } }
    .page-link__item img {
      width: 100%;
      height: auto; }

@forward 'sass:math' as math-*;
.howto {
  position: relative;
  padding: calc(60 / 750 * 100vw) 0 calc(80 / 750 * 100vw);
  text-align: center;
  background-color: #ffe200; }
  @media screen and (min-width: 768px) {
    .howto {
      padding: 70px 0 80px; } }
  .howto__heading {
    width: calc(450 / 750 * 100%);
    margin: 0 auto calc(23 / 750 * 100vw); }
    @media screen and (min-width: 768px) {
      .howto__heading {
        width: auto;
        max-width: 430px;
        margin: 0 auto 38px; } }
    .howto__heading img {
      width: 100%;
      height: auto; }
  .howto__label {
    position: relative;
    display: inline-block;
    padding: calc(13 / 750 * 100vw) calc(30 / 750 * 100vw);
    margin-bottom: calc(40 / 750 * 100vw);
    line-height: 0;
    background-color: #e73828;
    border-radius: 999px; }
    @media screen and (min-width: 768px) {
      .howto__label {
        padding: 14px 34px;
        margin-bottom: 36px; } }
    .howto__label img {
      display: block;
      width: auto;
      height: calc(36 / 750 * 100vw); }
      @media screen and (min-width: 768px) {
        .howto__label img {
          height: 36px; } }
    .howto__label::after {
      position: absolute;
      bottom: calc(-12 / 750 * 100vw);
      left: 50%;
      width: 0;
      height: 0;
      content: '';
      border-color: #e73828 transparent transparent;
      border-style: solid;
      border-width: calc(12 / 750 * 100vw) calc(8.5 / 750 * 100vw) 0;
      transform: translateX(-50%); }
      @media screen and (min-width: 768px) {
        .howto__label::after {
          bottom: -15px;
          border-width: 15px 8.5px 0; } }
  .howto__steps {
    display: flex;
    flex-direction: column;
    gap: calc(65 / 750 * 100vw);
    width: calc(550 / 750 * 100%);
    padding: 0;
    margin-inline: auto;
    list-style: none; }
    @media screen and (min-width: 768px) {
      .howto__steps {
        flex-direction: row;
        gap: 36px;
        max-width: 910px; } }
  .howto__step {
    position: relative;
    flex: 1;
    background-color: #fff;
    border-radius: calc(20 / 750 * 100vw); }
    @media screen and (min-width: 768px) {
      .howto__step {
        border-radius: 14px; } }
    .howto__step:not(:last-child)::after {
      position: absolute;
      bottom: calc(-49 / 750 * 100vw);
      left: 50%;
      width: 0;
      height: 0;
      content: '';
      border-color: #e73828 transparent transparent;
      border-style: solid;
      border-width: calc(33 / 750 * 100vw) calc(26 / 750 * 100vw) 0;
      transform: translateX(-50%); }
      @media screen and (min-width: 768px) {
        .howto__step:not(:last-child)::after {
          top: 50%;
          right: -28px;
          bottom: auto;
          left: auto;
          border-color: transparent transparent transparent #e73828;
          border-width: 17px 0 17px 20px;
          transform: translateY(-50%); } }
  .howto__step-num {
    padding: calc(13 / 750 * 100vw) 0;
    line-height: 0;
    text-align: center;
    background-color: #e73828;
    border-radius: calc(20 / 750 * 100vw) calc(20 / 750 * 100vw) 0 0; }
    @media screen and (min-width: 768px) {
      .howto__step-num {
        padding: 8px 0;
        border-radius: 14px 14px 0 0; } }
    .howto__step-num img {
      width: auto;
      height: calc(39 / 750 * 100vw); }
      @media screen and (min-width: 768px) {
        .howto__step-num img {
          height: 29px; } }
  .howto__step-body {
    padding: calc(23 / 750 * 100vw) calc(43 / 750 * 100vw) calc(25 / 750 * 100vw);
    text-align: center; }
    @media screen and (min-width: 768px) {
      .howto__step-body {
        padding: 21px 20px 24px; } }
  .howto__step-image {
    margin-bottom: calc(23 / 750 * 100vw);
    line-height: 0; }
    @media screen and (min-width: 768px) {
      .howto__step-image {
        margin-bottom: 23px; } }
    .howto__step-image img {
      width: auto;
      height: calc(238 / 750 * 100vw); }
      @media screen and (min-width: 768px) {
        .howto__step-image img {
          max-width: 100%;
          height: auto; } }
  .howto__step-title {
    margin-inline: auto;
    line-height: 0; }
    .howto__step-title img {
      width: 100%;
      height: auto; }
    @media screen and (min-width: 768px) {
      .howto__step-title {
        width: auto; }
        .howto__step-title img {
          width: auto;
          max-width: 100%; } }
    .howto__step-title--1 {
      width: calc(226 / 750 * 100vw); }
      @media screen and (min-width: 768px) {
        .howto__step-title--1 {
          width: auto; } }
    .howto__step-title--2 {
      width: calc(265 / 750 * 100vw); }
      @media screen and (min-width: 768px) {
        .howto__step-title--2 {
          width: auto; } }
    .howto__step-title--3 {
      width: calc(322 / 750 * 100vw); }
      @media screen and (min-width: 768px) {
        .howto__step-title--3 {
          width: auto; } }
  .howto__note {
    margin-top: calc(27 / 750 * 100vw);
    font-size: calc(16 / 750 * 100vw);
    font-weight: 700;
    line-height: 1.6;
    color: #171c61;
    text-align: left; }
    @media screen and (min-width: 768px) {
      .howto__note {
        margin-top: 16px;
        font-size: 13px; } }
  .howto__btn {
    display: block;
    width: calc(516 / 750 * 100%);
    margin: calc(50 / 750 * 100vw) auto 0;
    line-height: 0;
    transition: 0.5s; }
    @media screen and (min-width: 768px) {
      .howto__btn {
        max-width: 414px;
        margin-top: 40px; } }
    .howto__btn img {
      width: 100%;
      height: auto; }
  .howto__online {
    display: block;
    width: calc(570 / 750 * 100%);
    margin: calc(50 / 750 * 100vw) auto 0;
    line-height: 0;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .howto__online {
        max-width: 570px;
        margin-top: 30px; } }
    .howto__online img {
      width: 100%;
      height: auto; }

@forward 'sass:math' as math-*;
.sns {
  position: relative;
  padding: calc(79 / 750 * 100vw) 0 calc(100 / 750 * 100vw);
  text-align: center;
  background-color: #e73828; }
  @media screen and (min-width: 768px) {
    .sns {
      padding: 70px 0 70px; } }
  .sns__heading {
    width: calc(640 / 750 * 100%);
    margin-inline: auto;
    line-height: 0; }
    @media screen and (min-width: 768px) {
      .sns__heading {
        max-width: 530px; } }
    .sns__heading img {
      width: 100%;
      height: auto; }
  .sns__banner {
    width: calc(670 / 750 * 100%);
    margin: 0 auto calc(50 / 750 * 100vw);
    line-height: 0; }
    @media screen and (min-width: 768px) {
      .sns__banner {
        max-width: 558px;
        margin-bottom: 36px; } }
    .sns__banner img {
      width: 100%;
      height: auto; }
  .sns__x-btn {
    display: block;
    width: calc(516 / 750 * 100%);
    margin-inline: auto;
    line-height: 0;
    transition: 0.5s; }
    @media screen and (min-width: 768px) {
      .sns__x-btn {
        max-width: 414px; } }
    .sns__x-btn img {
      width: 100%;
      height: auto; }

@forward 'sass:math' as math-*;
.history {
  position: relative;
  padding: calc(80 / 750 * 100vw) 0 calc(20 / 750 * 100vw);
  background-color: #171c61; }
  @media screen and (min-width: 768px) {
    .history {
      padding: 80px 0 20px; } }
  .history__heading {
    width: calc(450 / 750 * 100%);
    margin: 0 auto calc(60 / 750 * 100vw);
    text-align: center; }
    @media screen and (min-width: 768px) {
      .history__heading {
        width: auto;
        max-width: 366px;
        margin: 0 auto 56px; } }
    .history__heading img {
      width: 100%;
      height: auto; }
  .history__list {
    width: calc(598 / 750 * 100%);
    padding: 0;
    margin-inline: auto;
    list-style: none; }
    @media screen and (min-width: 768px) {
      .history__list {
        max-width: 561px; } }
  .history__item {
    line-height: 0; }
    .history__item img {
      width: 100%;
      height: auto; }

@forward 'sass:math' as math-*;
.message {
  padding: calc(20 / 750 * 100vw) 0 calc(60 / 750 * 100vw);
  text-align: center;
  background-color: #171c61; }
  @media screen and (min-width: 768px) {
    .message {
      padding: 20px 0 80px; } }
  .message__body {
    width: calc(640 / 750 * 100%);
    margin: 0 auto calc(80 / 750 * 100vw);
    line-height: 0; }
    @media screen and (min-width: 768px) {
      .message__body {
        max-width: 560px;
        margin-bottom: 80px; } }
    .message__body img {
      width: 100%;
      height: auto; }
  .message__link {
    display: inline-block;
    width: calc(540 / 750 * 100%);
    margin-bottom: calc(50 / 750 * 100vw);
    line-height: 0;
    transition: 0.5s; }
    @media screen and (min-width: 768px) {
      .message__link {
        width: auto;
        max-width: 400px;
        margin-bottom: 50px; }
        .message__link:hover {
          opacity: 0.8; } }
    .message__link img {
      width: 100%;
      height: auto; }
  .message__banner {
    width: calc(640 / 750 * 100%);
    margin-inline: auto;
    line-height: 0; }
    @media screen and (min-width: 768px) {
      .message__banner {
        max-width: 560px; } }
    .message__banner img {
      width: 100%;
      height: auto; }

@forward 'sass:math' as math-*;
.download {
  padding: calc(50 / 750 * 100vw) 0 calc(50 / 750 * 100vw);
  text-align: center;
  background-color: #e73828; }
  @media screen and (min-width: 768px) {
    .download {
      padding: 60px 0 70px; } }
  .download__inner {
    width: calc(670 / 750 * 100%);
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .download__inner {
        max-width: 570px; } }
  .download__heading {
    width: calc(600 / 750 * 100%);
    margin: 0 auto calc(30 / 750 * 100vw);
    line-height: 0; }
    @media screen and (min-width: 768px) {
      .download__heading {
        width: auto;
        max-width: 460px;
        margin: 0 auto 24px; } }
    .download__heading img {
      width: 100%;
      height: auto; }
  .download__store {
    display: flex;
    flex-wrap: wrap;
    gap: calc(35 / 750 * 100vw);
    align-items: center;
    justify-content: center;
    margin-bottom: calc(20 / 750 * 100vw); }
    @media screen and (min-width: 768px) {
      .download__store {
        gap: 16px;
        margin-bottom: 18px; } }
    .download__store img {
      display: block;
      width: auto;
      height: calc(75 / 750 * 100vw); }
      @media screen and (min-width: 768px) {
        .download__store img {
          height: 65px; } }
  .download__store-link {
    display: inline-block;
    line-height: 0;
    transition: 0.5s; }
    @media screen and (min-width: 768px) {
      .download__store-link:hover {
        transform: scale(1.05); } }
  .download__qr {
    display: none; }
    @media screen and (min-width: 768px) {
      .download__qr {
        display: block; } }
    .download__qr img {
      width: 125px !important;
      height: 125px !important; }
  .download__note {
    display: none;
    line-height: 0; }
    @media screen and (min-width: 768px) {
      .download__note {
        display: block; } }
    .download__note img {
      width: auto;
      max-width: 100%;
      height: auto; }

@forward 'sass:math' as math-*;
.terms {
  padding: calc(88 / 750 * 100vw) 0 calc(90 / 750 * 100vw);
  background-color: #ffe200; }
  @media screen and (min-width: 768px) {
    .terms {
      padding: 70px 0 70px; } }
  .terms__inner {
    width: calc(618 / 750 * 100%);
    margin-inline: auto; }
    @media screen and (min-width: 768px) {
      .terms__inner {
        max-width: 649px; } }
  .terms__box {
    padding: calc(52 / 750 * 100vw) calc(79 / 750 * 100vw) calc(51 / 750 * 100vw);
    background-color: #fff;
    border-radius: calc(20 / 750 * 100vw); }
    @media screen and (min-width: 768px) {
      .terms__box {
        padding: 51px 72px 50px;
        border-radius: 20px; } }
  .terms__heading {
    margin: 0 0 calc(54 / 750 * 100vw);
    font-size: calc(30 / 750 * 100vw);
    font-weight: 700;
    color: #e73828;
    text-align: center; }
    @media screen and (min-width: 768px) {
      .terms__heading {
        margin-bottom: 36px;
        font-size: 35px; } }

.terms-content {
  margin: 0; }
  .terms-content__title {
    margin: 0 0 calc(6 / 750 * 100vw);
    font-size: calc(20 / 750 * 100vw);
    font-weight: 700;
    line-height: 1.5;
    color: #171c61; }
    @media screen and (min-width: 768px) {
      .terms-content__title {
        margin-bottom: 4px;
        font-size: 19px; } }
  .terms-content__data {
    margin: 0 0 calc(24 / 750 * 100vw);
    font-size: calc(18 / 750 * 100vw);
    font-weight: 700;
    line-height: 1.8;
    color: #171c61; }
    @media screen and (min-width: 768px) {
      .terms-content__data {
        margin-bottom: 18px;
        font-size: 16px; } }
    .terms-content__data:last-child {
      margin-bottom: 0; }
    .terms-content__data a {
      color: #171c61;
      text-decoration: underline; }
  .terms-content__notes {
    padding: 0;
    margin: 0;
    list-style: none; }
    .terms-content__notes--indent {
      margin-left: 0.8em; }
  .terms-content__note {
    padding-left: 1em;
    text-indent: -1em; }

@forward 'sass:math' as math-*;
.yorimichi {
  padding: calc(60 / 750 * 100vw) 0 calc(60 / 750 * 100vw);
  text-align: center;
  background-color: #171c61; }
  @media screen and (min-width: 768px) {
    .yorimichi {
      padding: 80px 0 80px; } }
  .yorimichi__heading {
    width: calc(520 / 750 * 100%);
    margin: 0 auto calc(40 / 750 * 100vw);
    line-height: 0; }
    @media screen and (min-width: 768px) {
      .yorimichi__heading {
        width: auto;
        max-width: 520px;
        margin: 0 auto 30px; } }
    .yorimichi__heading img {
      width: 100%;
      height: auto; }
  .yorimichi__btn {
    display: inline-block;
    width: calc(516 / 750 * 100%);
    line-height: 0;
    transition: 0.5s; }
    @media screen and (min-width: 768px) {
      .yorimichi__btn {
        width: 414px; } }
    .yorimichi__btn img {
      width: 100%;
      height: auto; }

@forward 'sass:math' as math-*;
.footer {
  background-color: #171c61;
  border-top: none; }

.footer-copyright {
  padding: calc(27 / 750 * 100vw) 0 calc(26 / 750 * 100vw);
  text-align: center;
  background-color: #ffe200; }
  @media screen and (min-width: 768px) {
    .footer-copyright {
      padding: 29px 0 28px; } }
  .footer-copyright__text {
    display: inline-block;
    line-height: 0; }
    .footer-copyright__text img {
      width: auto;
      height: calc(15 / 750 * 100vw); }
      @media screen and (min-width: 768px) {
        .footer-copyright__text img {
          height: 13px; } }