@charset "UTF-8";
:root {
  --color-common: #666666;
  --color-text: #734E56;
  --color-button: #333333;
  --color-sub: #8FB2B8;
  --font-primary: dnp-shuei-mincho-pr6n, sans-serif;
}

html {
  font-size: 62.5%;
}

@media screen and (max-width: 767px) {
  html {
    font-size: calc(10* (100vw / 750));
  }
}

.main-container__landing-page img,
.main-container__landing-page video,
.main-container__landing-page svg {
  width: 100%;
  height: auto;
}

.main-container__landing-page * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.main-container__landing-page picture {
  display: block;
}

.main-container__landing-page a {
  display: inline-block;
}

.main-container__landing-page .swiper-pagination {
  position: relative;
  bottom: 0;
}

.main-container__landing-page .swiper-pagination-bullet {
  background: #CCCCCC;
  opacity: 1;
}

.main-container__landing-page .swiper-pagination-bullet-active {
  background: var(--color-button);
}

.main-container__landing-page .swiper-container-horizontal > .swiper-pagination-bullets, .main-container__landing-page .swiper-pagination-custom, .main-container__landing-page .swiper-pagination-fraction {
  bottom: 0;
}

/*=======================================================
  for Desktop
=======================================================*/
@media screen and (min-width: 768px) {
  .main-container__landing-page .hidden_dt {
    display: none;
  }
  .main-container__landing-page .swiper-pagination {
    -webkit-padding-before: 20px;
            padding-block-start: 20px;
  }
  .main-container__landing-page .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }
  .main-container__landing-page .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 7px;
  }
}

/*=======================================================
  for mobile
=======================================================*/
@media screen and (max-width: 767px) {
  .main-container__landing-page .hidden_mp {
    display: none;
  }
  .main-container__landing-page .swiper-pagination {
    -webkit-padding-before: 2.5rem;
            padding-block-start: 2.5rem;
  }
  .main-container__landing-page .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 1.1rem;
  }
}

/*//////////////////////////////////////////////////

Title : _content.css
For   : 秋へ切り替える時期は脳活でリフレッシュ

Created       : 2022-09-06
Last Modified : 2022-09-06

==========================================

Content

    content

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                    content
============================================================================================== */
.main-container__landing-page .howto__video {
  position: relative;
}

.main-container__landing-page .howto__video .button {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  cursor: pointer;
  pointer-events: none;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for desktop
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) {
  .main-container__landing-page .howto__unit {
    width: 500px;
    margin-inline: auto;
  }
  .main-container__landing-page .howto__unit--first {
    -webkit-margin-before: 25px;
            margin-block-start: 25px;
  }
  .main-container__landing-page .howto__unit:not(.howto__unit--first) {
    -webkit-margin-before: 75px;
            margin-block-start: 75px;
  }
  .main-container__landing-page .howto__img {
    -webkit-margin-before: 20px;
            margin-block-start: 20px;
  }
  .main-container__landing-page .howto__video {
    -webkit-margin-before: 90px;
            margin-block-start: 90px;
            border: 1px solid #DBDBDB;
  }
  .main-container__landing-page .howto__video .button {
    width: 65px;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for mobile
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-container__landing-page .howto__unit--first {
    -webkit-margin-before: 5rem;
            margin-block-start: 5rem;
  }
  .main-container__landing-page .howto__unit:not(.howto__unit--first) {
    -webkit-margin-before: 8.8rem;
            margin-block-start: 8.8rem;
  }
  .main-container__landing-page .howto__img {
    -webkit-margin-before: 5rem;
            margin-block-start: 5rem;
    padding-inline: 4.5rem;
  }
  .main-container__landing-page .howto__video {
    -webkit-margin-before: 14.5rem;
            margin-block-start: 14.5rem;
    padding-inline: 4.5rem;
  }
  video {
    border: 1px solid #DBDBDB;
  }
  .main-container__landing-page .howto__video .button {
    width: 12.5rem;
  }
}

/*//////////////////////////////////////////////////

Title : _firstview.css
For   : 秋へ切り替える時期は脳活でリフレッシュ

Created       : 2022-09-06
Last Modified : 2022-09-06

==========================================

Content

    firstview

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                    firstview
============================================================================================== */
.main-container__landing-page .firstview {
  margin-inline: auto;
}

.main-container__landing-page .firstview__lead {
  letter-spacing: 0.025em;
}
#footer_emmi {
  margin-top: 0;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for desktop
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) {
  .main-container__landing-page .firstview {
    -webkit-margin-after: 115px;
            margin-block-end: 115px;
            margin-block-start: 35px;
  }
  .main-container__landing-page .firstview__img {
    max-width: 825px;
    margin-inline: auto;
  }
  .main-container__landing-page .firstview__lead {
    -webkit-margin-before: 95px;
            margin-block-start: 95px;
    font-size: 15px;
    line-height: 2;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for mobile
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-container__landing-page .firstview {
    -webkit-margin-after: 14rem;
            margin-block-end: 14rem;
  }
  .main-container__landing-page .firstview__lead {
    -webkit-margin-before: 14.5rem;
            margin-block-start: 14.5rem;
    font-size: 2.8rem;
    line-height: 1.8571428571;
  }
}

/*//////////////////////////////////////////////////

Title : _main.css
For   : 秋へ切り替える時期は脳活でリフレッシュ

Created       : 2022-09-06
Last Modified : 2022-09-06

==========================================

Content

    main

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                            main
============================================================================================== */
.main-container__landing-page {
  margin-inline: auto;
  -webkit-font-feature-settings: 'palt';
          font-feature-settings: 'palt';
  line-height: 1;
  color: var(--color-common);
  text-align: center;
}

/* ==============================================================================================
                                          for desktop
============================================================================================== */
@media screen and (min-width: 768px) {
  .main-container__landing-page {
    width: 95%;
    -webkit-margin-after: 120px;
            margin-block-end: 120px;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                          for mobile
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-container__landing-page {
    width: 100%;
    -webkit-margin-after: 15rem;
            margin-block-end: 15rem;
  }
}

/*//////////////////////////////////////////////////

Title : _text.css
For   : 秋へ切り替える時期は脳活でリフレッシュ

Created       : 2022-09-06
Last Modified : 2022-09-06

==========================================

Compornent

    text

//////////////////////////////////////////////////*/
/* ==============================================================================================
                                    text
============================================================================================== */
.main-container__landing-page .howto__ttl, .main-container__landing-page .howto__sbttl {
  letter-spacing: 0.05em;
  color: var(--color-text);
  font-weight: 600;
  font-style: normal;
  font-family: var(--font-primary);
}

.main-container__landing-page .howto__sbttl {
  color: var(--color-sub);
  font-family: var(--font-primary);
}

.main-container__landing-page .howto__desc {
  letter-spacing: 0.025em;
}

.main-container__landing-page .ending .button {
  margin-inline: auto;
  color: var(--color-button);
  font-weight: 500;
  font-style: normal;
  font-family: var(--font-primary);
}

.main-container__landing-page .ending .button a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-button);
}

.main-container__landing-page .ending .staffcredit {
  color: var(--color-text);
  font-family: var(--font-primary);
  letter-spacing: 0.025em;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for desktop
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 768px) {
  .main-container__landing-page .howto__ttl {
    font-size: 22px;
  }
  .main-container__landing-page .howto__sbttl {
    -webkit-padding-before: 30px;
            padding-block-start: 30px;
    font-size: 20px;
    font-weight: 500;
  }
  .main-container__landing-page .howto__desc {
    font-size: 15px;
    line-height: 2;
  }
  .main-container__landing-page .ending {
    -webkit-margin-before: 95px;
            margin-block-start: 95px;
  }
  .main-container__landing-page .ending .button {
    width: 220px;
    height: 35px;
    font-size: 15px;
  }
  .main-container__landing-page .ending .staffcredit {
    -webkit-margin-before: 55px;
            margin-block-start: 55px;
    font-size: 17px;
    line-height: 2;
  }
}

/* //////////////////////////////////////////////////////////////////////////////////////////////
                                    for mobile
////////////////////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 767px) {
  .main-container__landing-page .howto__ttl {
    font-size: 3.6rem;
  }
  .main-container__landing-page .howto__sbttl {
    -webkit-padding-before: 5rem;
            padding-block-start: 5rem;
    font-size: 3.2rem;
  }
  .main-container__landing-page .howto__desc {
    font-size: 2.8rem;
    line-height: 1.8571428571;
  }
  .main-container__landing-page .ending {
    -webkit-margin-before: 14.5rem;
            margin-block-start: 14.5rem;
  }
  .main-container__landing-page .ending .button {
    width: 35rem;
    height: 7rem;
    font-size: 2.8rem;
  }
  .main-container__landing-page .ending .staffcredit {
    -webkit-margin-before: 8.5rem;
            margin-block-start: 8.5rem;
    font-size: 3.2rem;
    line-height: 1.875;
  }
}