@charset "UTF-8";
:root{
  --bg: #ffffff;
  --text: #0a0a0e;

  --gray: #4a4b4a;

  --pink-1:#e578b9;
  --pink-2:#e678b9;
  --pink-3: #ff1f88;

  --feature-bg: #f5eff3;
  --fix-bg: #f3eaf0;
  --faq-answer-bg: #f6f6f6;

  --maxw: 750px;
}

* {
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 1rem;
  text-align: center;
  color: var(--text);
  margin: 0 auto;
  padding: 0;
  -webkit-text-size-adjust: none;
  overflow: auto;
}

@media (750px <= width) {
  body {
    /* background-image: url(/images/common/bg.jpg);
    background-repeat: repeat;
    background-position: top;
    background-attachment: fixed; */
    background-color: #efefef;
  }

  #sp_wrapper {
    max-width: var(--maxw);
    margin: 0 auto;
    background-color: var(--bg);;
  }
}

a {
  color: var(--text);
  outline: none;
  text-decoration: none;
}

a:hover img {
  text-decoration: none;
  opacity: 0.6;
  transition: all 0.5s ease;
}

img {
  width: 100%;
  height: auto;
  margin: 0;
  border: none;
  vertical-align: middle;
}

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

::-webkit-input-placeholder {
  color: #f2f2f2;
}

::-moz-placeholder {
  color: #f2f2f2;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

table {
  border-collapse: collapse;
  border: 0;
}

header, main, footer {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Header */
header .intro_movie {
  padding-top: 36px;
}
/* Header */

/* Feature */
section#feature {
  margin-top: 36px;
  padding-top: 36px;
  position: relative;
}
section#feature #featureHeader {
  position: absolute;
  top: 0;
  left: 0;
}
section#feature .featureWrapper {
  width: 90%;
  margin: 15% auto 0 auto;
  background-color: var(--feature-bg);
  border-radius: 32px;
}
section#feature .featureWrapper .featureTitle {
  width: 40%;
  margin: 0 auto;
  padding: 8% 0;
}
section#feature .featureWrapper .featureList {
  width: 90%;
}
section#feature .featureWrapper .featureList .featureItem {
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px dotted var(--pink-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
section#feature .featureWrapper .featureList .featureItem:last-child {
  border-bottom: none;
}
section#feature .featureWrapper .featureList .featureItem .featureItem__icon {
  width: 25%;
}
section#feature .featureWrapper .featureList .featureItem .featureItem__icon img {
  width: 60%;
}
section#feature .featureWrapper .featureList .featureItem .featureItem__body {
  width: 75%;
  text-align: left;
}
section#feature .featureWrapper .featureList .featureItem .featureItem__body .featureItem__title {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--pink-1);
}
section#feature .featureWrapper .featureList .featureItem .featureItem__body .featureItem__text {
  font-size: 0.75rem;
  margin-top: 4px;
}
section#feature .featureWrapper .featureList .featureItem .featureItem__body .featureItem__text span {
  color: var(--gray);
}

@media (750px <= width) {
  section#feature .featureWrapper .featureList .featureItem .featureItem__body .featureItem__title {
    font-size: 1.5625rem;
  }
  section#feature .featureWrapper .featureList .featureItem .featureItem__body .featureItem__text {
    font-size: 0.875rem;
  }
}
/* Feature */

/* Application Button */
section#applicationButton {
  padding-top: 36px;
  position: relative;
}
section#applicationButton {
  position: relative;
}
section#applicationButton #applicationButton__text,
section#applicationButtonFooter #applicationButton__text {
  width: 70%;
  max-width: 360px;
  margin: 36px auto 12px auto;
}
section#applicationButton .appli_button,
section#applicationButtonFooter .appli_button {
  width: 80%;
  max-width: 400px;
  font-size: 1.5625rem;
  font-weight: bold;
  line-height: 60px;
  border-radius: 60px;
  color: var(--bg);
  background-color: var(--pink-3);
  margin: 0 auto;
  display: block;
  position: relative;
}
section#applicationButton a:hover,
section#applicationButtonFooter a:hover {
  opacity: 0.6;
}
section#applicationButton a:after,
section#applicationButtonFooter a:after {
  font-family: "FontAwesome";
  content: "\f105";
  position: absolute;
  right: 20px;
  transition: all 0.2s;
}
section#applicationButton a:hover:after,
section#applicationButtonFooter a:hover:after {
  right: 15px;
}
section#applicationButton .intro_movie,
section#applicationButtonFooter .intro_movie {
  padding-top: 36px;
}
/* Application Button */

/* Advantage */
section#advantage {
  margin-top: 36px;
  padding-top: 36px;
  position: relative;
}
section#advantage #advantageHeader {
  position: absolute;
  top: 0;
  left: 0;
}
section#advantage .advantageWrapper {
  width: 90%;
  margin: 15% auto 0 auto;
  padding-bottom: 36px;
  background-color: var(--pink-2);
  border-radius: 32px;

  background-image: url('../images/advantage/timer.png');
  background-color: var(--pink-2);
  background-size: cover;
  background-repeat: no-repeat;
}
section#advantage .advantageWrapper .advantageTitle {
  width: 40%;
  margin: 0 auto;
  padding: 8% 0;
}

section#advantage .advantageCards {
  width: 80%;
  margin: 0 auto;
}
section#advantage .advantageCards .advantageCard {
  margin-top: 36px;
  padding: 32px 10%;
  background-color: var(--bg);
  border-radius: 32px;
  position: relative;
}
section#advantage .advantageCards .advantageCard:first-child {
  margin-top: 0;
}
section#advantage .advantageCards .advantageCard .advantageCards__icon {
  width: 20%;
  position: absolute;
  top: -6%;
  left: -6%;
  z-index: 20;
}
section#advantage .advantageCards .advantageCard .advantageCards__thumbnail {

}
section#advantage .advantageCards .advantageCard .advantageCards__body {
  width: 76%;
  font-size: 0.875rem;
  text-align: left;
}
section#advantage .advantageCards .advantageCard .advantageCards__body .advantageCards__title {
  font-weight: bold;
  margin-top: 16px;
  font-size: 1rem;
}
section#advantage .intro_movie {
  padding-top: 36px;
}
@media (750px <= width) {
  section#advantage .advantageCards .advantageCard .advantageCards__body {
    font-size: 0.875rem;
  }
}
/* Advantage */


/* Flow */
section#flow {
  padding-top: 60px;
  position: relative;
}
section#flow .flowTitle {
  width: 30%;
  margin: 0 auto;
}
section#flow .flowContents {
  padding-top: 36px;
  position: relative;
}
section#flow .flowContents .flowSteps {
  width: 80%;
  margin: 0 auto;
}
section#flow .flowContents .flowSteps .flowStep {
  padding-bottom: 36px;
  text-align: left;
}
section#flow .flowContents .flowSteps .flowStep .flowStep__media {
  width: 95%;
}
section#flow .flowContents .flowSteps .flowStep .flowStep__title {
  font-size: 1.25rem;
  color: var(--pink-1);
  margin-top: 12px;
}
section#flow .flowContents .flowSteps .flowStep .flowStep__text {
  font-size: 0.875rem;
  margin-top: 4px;
}
section#flow .flowContents .flowSteps .flowStep .flowStep__text img {
  width: 16px;
}
section#flow .flowContents .flowBg {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
section#flow .flowContents .flowBg img {
  width: auto;
  height: 100%;
}
section#flow .intro_movie {
  padding-top: 36px;
}

@media (750px <= width) {
  section#flow .flowContents .flowSteps .flowStep .flowStep__title {
    font-size: 1.25rem;
  }
  section#flow .flowContents .flowSteps .flowStep .flowStep__text {
    font-size: 0.875rem;
  }
  section#flow .flowContents .flowSteps .flowStep .flowStep__text img {
    width: 16px;
  }
}
/* Flow */

/* FAQ */
section#faq {
  padding-top: 60px;
  position: relative;
}
section#faq .faqHead {
  width: 80%;
  margin: 0 auto;
}
section#faq .faqList {
  width: 90%;
  margin: 0 auto;
  padding: 24px 0;
  background-color: var(--pink-2);
  border-radius: 16px;
}


section#faq .faqList .faqAccordion {
  width: 90%;
  text-align: left;
  margin: 12px auto 0 auto;
  background-color: var(--bg);
  border-radius: 14px;
}
section#faq .faqList .faqAccordion .faqQ {
  padding: 24px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
section#faq .faqList .faqAccordion .faqQ .q-label {
  width: 24px;
  flex-shrink: 0;
}
section#faq .faqList .faqAccordion .faqQ .q-text {
  flex: 1;
}
section#faq .faqList .faqAccordion .faqQ .toggle-icon {
  width: 24px;
  flex-shrink: 0;
}
section#faq .faqList .faqAccordion .faqQ .toggle-icon .close {
  display: none;
}
section#faq .faqList .faqAccordion.active .faqQ .toggle-icon .open {
  display: none;
}
section#faq .faqList .faqAccordion.active .faqQ .toggle-icon .close {
  display: block;
}
section#faq .faqList .faqAccordion .faqQ img {
  width: 24px;
}
section#faq .faqList .faqAccordion .faqA {
  background-color: var(--faq-answer-bg);
  padding: 24px 12px;
  border-radius: 0 0 14px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
section#faq .faqList .faqAccordion .faqA .a-label {
  width: 24px;
  flex-shrink: 0;
}
section#faq .faqList .faqAccordion .faqA .a-text {
  flex: 1;
}
section#faq .faqList .faqAccordion .faqA-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows .4s ease,
    opacity .35s ease;
}
section#faq .faqList .faqAccordion.active .faqA-wrapper {
  grid-template-rows: 1fr;
  opacity: 1;
}
section#faq .faqList .faqAccordion .faqA-wrapper .faqA-inner {
  overflow: hidden;
}

section#faq .intro_movie {
  padding-top: 36px;
}
/* FAQ */

/* Footer */
footer {
  color: var(--bg);
  margin-top: 60px;
  padding: 60px 0;
  background-color: var(--pink-1);
}
footer .snsTitle {
  font-size: 1.125rem;
}
footer .sns {
  width: 60%;
  margin: 0 auto;
  padding-top: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer .sns .snsItem {
  width: 20%;
}
@media (750px <= width) {
  footer .sns {
    width: 30%;
  }
  footer .sns .snsItem {
    width: 30%;
  }
}
footer .siteRule {
  font-size: 0.75rem;
  padding-top: 36px;
}
footer .copyright {
  padding-top: 36px;
}
/* Footer */

/* fixApplicationButton */
#fixApplicationButton {
  transition: opacity .3s ease, transform .3s ease;
  display: block;
  position: fixed;
  right: .4rem;
  bottom: .4rem;
  z-index: 30;
}
#fixApplicationButton a {
  width: 100px;
  height: 100px;
  background-color: var(--pink-3);
  text-align: center;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#fixApplicationButton a span {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    padding-bottom: .4rem;
}
#fixApplicationButton a .bgText {
    width: 100px;
    height: 100px;
    animation: rotateText 10s linear infinite;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
}
@keyframes rotateText {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#fixApplicationButton a .bgText text {
  font-size: 0.625rem;
  letter-spacing: 3px;
  fill: var(--bg);
  text-transform: uppercase;
}
@media (750px <= width) {
  #fixApplicationButton a {
    width: 120px;
    height: 120px;
  }
  #fixApplicationButton a span {
      font-size: 1.125rem;
  }
  #fixApplicationButton a .bgText {
      width: 120px;
      height: 120px;
  }
}
/* fixApplicationButton */