/***** -- var -- *****/
:root {
  --color-1st: #F64774;
  --text-color: #52506F;
  --link-color: #52506F;
  --header-bg-color: #FFD2D4;
  --header-icon-color: #F64774;
}


.m-headline p {
  font-family: var(--font-family-1st);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .2em;
}
@media screen and (max-width: 980px) {
  .m-headline p {font-size: 3.91vw;}
}
@media screen and (max-width: 640px) {
  .m-headline p {
    font-size: 5.13vw;
    letter-spacing: .1em;
  }
}

#header .p-header {box-shadow: none;}
#header .p-header-link {
  right: 192px;
  padding-left: 200px;
}
#header .p-header-link > .c-flex {gap: .25em 1.5em;}
#header .p-header-link > .c-flex > a {padding: 0;}
#header .p-header-btn .c-btn.is-form > span:nth-of-type(1) {
  font-size: 14px;
  color: #fff;
}
#header .p-header-btn .c-btn.is-form:hover > span:nth-of-type(1) {color: var(--color-1st);}
#drawer .p-drawer-btn .c-btn.is-form > span:nth-of-type(1) {color: #fff;}
#drawer .p-drawer-btn .c-btn.is-form:hover > span:nth-of-type(1) {color: var(--color-1st);}
#footer.l-footer {background: #F8F6EC;}
#footer .p-footer-contents p, #footer .p-footer-contents a {color: #FF3735;}

/* ----- mv ----- */
#mv {
  background-color: #FFD2D4;
  padding-bottom: 0;
}
#mv .c-inner {max-width: 1440px;}
#mv .p-content > .c-flex > *:nth-child(1) {width: 58%;}
#mv .p-content > .c-flex > *:nth-child(2) {
  width: 42%;
  margin-top: .5em;
}
#mv .p-content h1 {
  font-family: var(--font-family-3rd);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.8;
}
#mv .p-content-image {
  position: absolute;
  left: -72px;
  bottom: 40px;
  width: 320px;
}
#mv .p-content-text {
  position: absolute;
  left: 136px;
  bottom: 112px;
  width: 320px;
}
#mv .p-content-badge {
  position: absolute;
  right: 24px;
  bottom: 184px;
  width: 120px;
}
@media screen and (max-width: 1440px) {
  #mv .p-content h1 {font-size: 3.5vw;}
  #mv .p-content-image {
    position: absolute;
    left: -5vw;
    bottom: 3vw;
    width: 22vw;
  }
  #mv .p-content-text {
    position: absolute;
    left: 9vw;
    bottom: 9vw;
    width: 22vw;
  }
  #mv .p-content-badge {
    position: absolute;
    right: 2vw;
    bottom: 12vw;
    width: 8vw;
  }
}
@media screen and (max-width: 1200px) {
  #mv .c-inner {width: 100%;}
}
@media screen and (max-width: 980px) {
  #mv {padding-top: 0;}
  #mv .p-content > .c-flex > *:nth-child(1) {width: 55%;}
  #mv .p-content > .c-flex > *:nth-child(2) {width: 45%;}
  #mv .p-content h1 {font-size: 4vw;}
  #mv .p-content-image {
    left: -7vw;
    bottom: 0;
    width: 24vw;
  }
  #mv .p-content-text {
    left: 8vw;
    bottom: 4vw;
    width: 30vw;
  }
  #mv .p-content-badge {
    right: 0.5vw;
    bottom: 12vw;
    width: 10vw;
  }
}
@media screen and (max-width: 640px) {
  #mv .p-content > .c-flex > *:nth-child(1) {width: 90%;}
  #mv .p-content > .c-flex > *:nth-child(2) {
    width: 100%;
    margin-top: 4vw;
    padding-bottom: 30vw;
  }
  #mv .p-content h1 {
    font-size: 7.5vw;
    padding-left: 5vw;
  }
  #mv .p-content-image {
    left: auto;
    right: -14vw;
    bottom: auto;
    top: -35vw;
    width: 35vw;
  }
  #mv .p-content-text {
    left: 50%;
    bottom: 0;
    width: 60vw;
    transform: translateX(-50%);
  }
  #mv .p-content-badge {width: 20vw;}
}

/* ----- banner ----- */
#banner {
  /* padding: 0; */
  /* padding: 0 0 32px; */
  margin-top: -1px;
  background-color: #FFD2D4;
}
#banner .p-content > .c-flex > * {
  width: 640px;
  max-width: 85%;
  box-shadow: 4px 4px 8px #999;
}
@media screen and (max-width: 980px) {
  #banner {
    /* padding: 0 0 4.17vw; */
  }
}
@media screen and (max-width: 640px) {
  #banner .p-content > .c-flex > * {
    max-width: 90%;
  }
}

/* ----- intro ----- */
#intro {
  padding-bottom: 128px;
  background-color: #FFD2D4;
}
#intro .p-content {
  background-color: #F8F6EC;
  border-radius: 1.5em;
  padding: 48px 48px 96px;
  opacity: 0;
  transform: translateY(60px);
  transition-delay: 0s;
  transition-duration: 1000ms;
}
#intro .p-content.is-show {
  opacity: 1;
  transform: translateY(0);
}
#intro .p-content-text {margin-top: 2.5em;}
#intro .p-content-text p {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 3;
}
#intro .p-upperImage {
  position: absolute;
  right: 40px;
  bottom: -40px;
  width: 96px;
  z-index: 4;
}
@media screen and (max-width: 980px) {
  #intro {padding-bottom: 12.8vw;}
  #intro .p-content {padding: 6vw 6vw 12vw;}
  #intro .p-content-text p {font-size: 2.34vw;}
  #intro .p-upperImage {
    right: 4vw;
    bottom: -4vw;
    width: 10vw;
  }
}
@media screen and (max-width: 640px) {
  #intro {padding-bottom: 14.4vw;}
  #intro .p-content-text p {font-size: 3.59vw;}
  #intro .p-upperImage {
    right: 4vw;
    bottom: -8vw;
    width: 15vw;
  }
}

/* ----- point ----- */
#point {
  padding-bottom: 192px;
  background-color: #FFD2D4;
}
#point .p-card {margin-top: 3em;}
#point .p-card > .c-flex {gap: 2em;}
#point .p-card > .c-flex > * {
  width: calc((100% - (2em * 2)) / 3);
  padding: 40px;
  background-color: #F8F6EC;
  border-radius: 1.5em;
  /*
  opacity: 0;
  transform: translateY(100px);
  transition-duration: .25s;
  */
}
/*
#point .p-card > .c-flex > *:nth-child(1) {transition-delay: 0s;}
#point .p-card > .c-flex > *:nth-child(2) {transition-delay: 0.25s;}
#point .p-card > .c-flex > *:nth-child(3) {transition-delay: 0.5s;}
#point .p-card > .c-flex > *.is-show {
  opacity: 1;
  transform: translateY(0);
}
*/
#point .p-card figure {margin-bottom: 1em;}
#point .p-card figure img {
  width: 70%;
  object-fit: contain;
  aspect-ratio: 1/1;
}
#point .p-card p {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 2;
}
#point .p-lead {margin-top: 4em;}
#point .p-lead p {
  font-family: var(--font-family-1st);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-1st);
  letter-spacing: .2em;
  line-height: 2;
}
@media screen and (max-width: 980px) {
  #point {padding-bottom: 24vw;}
  #point .p-card > .c-flex > * {
    width: 50%;
    padding: 4vw 6vw 6vw;
  }
  #point .p-card p {font-size: 2.08vw;}
  #point .p-lead p {font-size: 3.13vw;}
}
@media screen and (max-width: 640px) {
  #point .p-card > .c-flex > * {width: 70%;}
  #point .p-card p {font-size: 3.59vw;}
  #point .p-lead p {
    font-size: 4.62vw;
    letter-spacing: .1em;
  }
}

/* ----- feature ----- */
#feature {background-color: #F8F6EC;}
#feature::before {
  position: absolute;
  left: 0;
  top: -79px;
  width: 100%;
  height: 80px;
  background-color: inherit;
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
  content: '';
}
#feature .p-feature {
  margin-top: 5em;
  opacity: 0;
  transform: translateY(-60px);
  transition-delay: 0s;
  transition-duration: 1000ms;
}
#feature .p-feature.is-show {
  opacity: 1;
  transform: translateY(0);
}
#feature .p-feature > .c-flex {gap: 1em;}
#feature .p-feature > .c-flex > * {
  width: calc((100% - (1em * 2)) / 3);
  background-color: #FFD2D4;
  border-radius: 50%;
}
#feature .p-feature > .c-flex > *::before {
  display: block;
  padding-top: 100%;
  content: '';
}
#feature .p-feature-headline {
  position: absolute;
  left: 0;
  top: 40px;
  width: 100%;
  text-align: center;
}
#feature .p-feature-headline img {width: 60%;}
#feature .p-feature-text {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
}
#feature .p-feature-text p {
  font-family: var(--font-family-3rd);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 2;
}
#feature .p-feature-icon {
  position: absolute;
  left: 0;
  bottom: 24px;
  width: 100%;
  text-align: center;
}
#feature .p-feature-icon img {
  width: auto;
  height: 80px;
}
#feature .p-sample {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5em;
}
#feature .p-sample > .c-flex {gap: 1em;}
#feature .p-sample > .c-flex > *:nth-child(1) {width: 72%;}
#feature .p-sample > .c-flex > *:nth-child(2) {flex: 1;}
#feature .p-sample p {
  position: absolute;
  width: 100%;
  color: #EC7D7E;
  font-family: var(--font-family-1st);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .15em;
  text-align: center;
}
#feature .p-point {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5em;
}
#feature .p-point > .c-flex {gap: 2em;}
#feature .p-point > .c-flex > *:nth-child(1) {width: 144px;}
#feature .p-point > .c-flex > *:nth-child(2) {
  flex: 1;
  background-color: #fff;
  border-radius: 1.5em;
}
#feature .p-point p {
  position: absolute;
  top: 50%;
  color: #EC7D7E;
  font-family: var(--font-family-3rd);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 2;
  padding: 0 40px;
  transform: translateY(-50%);
}
@media screen and (max-width: 1200px) {
  #feature .p-feature-headline {top: 3.5vw;}
  #feature .p-feature-text p {font-size: 1.67vw;}
  #feature .p-feature-icon {bottom: 2vw;}
  #feature .p-feature-icon img {height: 6.5vw;}
  #feature .p-sample {width: 85%;}
  #feature .p-sample p {font-size: 1.33vw;}
  #feature .p-point {width: 85%;}
  #feature .p-point > .c-flex > *:nth-child(1) {width: 15vw;}
  #feature .p-point p {
    font-size: 1.67vw;
    padding: 0 4vw;
  }
}
@media screen and (max-width: 980px) {
  #feature::before {
    top: -7vw;
    height: 8vw;
  }
  #feature .p-feature > .c-flex > * {width: 50%;}
  #feature .p-feature-text p {font-size: 2.6vw;}
  #feature .p-feature-icon img {height: 9vw;}
  #feature .p-sample {width: 90%;}
  #feature .p-sample p {font-size: 2.08vw;}
  #feature .p-point {width: 100%;}
  #feature .p-point > .c-flex {gap: 1em;}
  #feature .p-point > .c-flex > *:nth-child(1) {width: 15vw;}
  #feature .p-point p {font-size: 2.34vw;}
}
@media screen and (max-width: 640px) {
  #feature .p-feature {margin-top: 3em;}
  #feature .p-feature > .c-flex > * {width: 70%;}
  #feature .p-feature-headline {top: 5.5vw;}
  #feature .p-feature-text p {font-size: 4.1vw;}
  #feature .p-feature-icon {bottom: 4vw;}
  #feature .p-feature-icon img {height: 12vw;}
  #feature .p-sample {
    width: 100%;
    margin-top: 2em;
  }
  #feature .p-sample > .c-flex {gap: 2em;}
  #feature .p-sample > .c-flex > *:nth-child(1) {width: 100%;}
  #feature .p-sample > .c-flex > *:nth-child(2) {
    width: 75%;
    flex: none;
  }
  #feature .p-sample p {font-size: 4.1vw;}
  #feature .p-point {margin-top: 2em;}
  #feature .p-point > .c-flex {flex-direction: column-reverse;}
  #feature .p-point > .c-flex > *:nth-child(1) {
    width: 100%;
    text-align: center;
  }
  #feature .p-point > .c-flex > *:nth-child(1) img {width: 35vw!important;}
  #feature .p-point p {
    position: relative;
    font-size: 3.59vw;
    padding: 6vw;
    transform: translateY(0);
  }
}

/* ----- price ----- */
#price {
  background-color: #F8F6EC;
  padding-bottom: 192px;
}
#price .p-content {
  background-color: #FFD2D4;
  border-radius: 1.5em;
  padding: 48px 96px 96px;
  opacity: 0;
  transform: translateY(60px);
  transition-delay: 0s;
  transition-duration: 1000ms;
}
#price .p-content.is-show {
  opacity: 1;
  transform: translateY(0);
}
#price .p-content-imagetext {margin-top: 3em;}
#price .p-content-imagetext > .c-flex {gap: 2em;}
#price .p-content-imagetext > .c-flex > *:nth-child(1) {width: 160px;}
#price .p-content-imagetext > .c-flex > *:nth-child(2) {flex: 1;}
#price .p-content-table > .c-flex > *:nth-child(1) {
  width: 300px;
  margin: 1px;
  padding: 16px;
  background-color: #EC7D7E;
} 
#price .p-content-table > .c-flex > *:nth-child(2) {
  flex: 1;
  margin: 1px;
  padding: 16px 24px;
  background-color: #F8F6EC;
}
#price .p-content-table p {
  font-family: var(--font-family-1st);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .15em;
}
#price .p-content-table > .c-flex > *:nth-child(1) p {
  color: #fff;
  text-align: center;
}
#price .p-content-table2 > .c-table > *:nth-child(1) {
  width: 300px;
  background-color: #EC7D7E;
}
#price .p-content-table2 > .c-table > *:nth-child(1) > * {padding: 16px;}
#price .p-content-table2 > .c-table > *:nth-child(1) > *:not(:last-child) {border-bottom: 1px solid #F8F6EC;}
#price .p-content-table2 > .c-table > *:nth-child(2) {
  padding: 16px 16px;
  background-color: #F8F6EC;
}
#price .p-content-table2 p {
  font-family: var(--font-family-1st);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .15em;
}
#price .p-content-table2 > .c-table > *:nth-child(1) p {
  color: #fff;
}
#price .p-content-remark {margin-top: 1em;}
#price .p-content-remark p {
  font-family: var(--font-family-3rd);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
}
#price .p-btn {margin-top: 3em;}
#price .p-btn .c-btn {
  font-size: 20px;
  padding: 1em 2em;
}
@media screen and (max-width: 1200px) {
  #price .p-content {padding: 48px 64px 96px;}
  #price .p-content-imagetext > .c-flex > *:nth-child(1) {width: 144px;}
}
@media screen and (max-width: 980px) {
  #price {padding-bottom: 12.8vw;}
  #price .p-content {padding: 6vw 6vw 12vw;}
  #price .p-content-imagetext > .c-flex > *:nth-child(1) {width: 23vw;}
  #price .p-content-table > .c-flex > *:nth-child(1) {
    width: 100%;
    padding: 2vw 4vw;
  }
  #price .p-content-table > .c-flex > *:nth-child(2) {
    width: 100%;
    padding: 2vw 4vw;
  }
  #price .p-content-table p {font-size: 2.34vw;}
  #price .p-content-table2 > .c-table > * {display: block;}
  #price .p-content-table2 > .c-table > *:nth-child(1) {width: 100%;}
  #price .p-content-table2 > .c-table > *:nth-child(1) > * {padding: 2vw 2vw;}
  #price .p-content-table2 > .c-table > *:nth-child(1) > *:not(:last-child) {border-bottom: none;}
  #price .p-content-table2 > .c-table > *:nth-child(2) {
    width: 100%;
    padding: 4vw 2vw;
  }
  #price .p-content-table2 p {font-size: 2.34vw;}
  #price .p-content-remark p {font-size: 1.82vw;}
  #price .p-btn .c-btn {font-size: 2.6vw;}
}
@media screen and (max-width: 640px) {
  #price {padding-bottom: 14.4vw;}
  #price .p-content-imagetext {margin-top: 2em;}
  #price .p-content-imagetext > .c-flex {gap: 1em;}
  #price .p-content-table p {font-size: 3.08vw;}
  #price .p-content-table2 p {font-size: 3.08vw;}
  #price .p-content-remark {margin-top: .5em;}
  #price .p-content-remark p {font-size: 2.25vw;}
  #price .p-btn .c-btn {font-size: 4.1vw;}
}

/* ----- menu ----- */
#menu {
  padding-top: 64px;
  padding-bottom: 0;
  background-color: #F8F6EC;
}
#menu .c-inner {padding-bottom: 160px;}
#menu .p-bgIllust > * {position: absolute;}
#menu .p-bgIllust > *:nth-child(1) {
  left: -32px;
  bottom: 0;
}
#menu .p-banner > .c-flex > a {
  width: calc(100% / 3);
  text-align: center;
  margin-bottom: 2%;
  padding: 0 2%;
}
#menu .p-banner > .c-flex > a:hover {transform: translateY(-16px);}
#menu .p-link {
  margin-top: 48px;
  padding-left: 96px;
}
#menu .p-link > .c-flex > * {width: 25%;}
#menu .p-link > .c-flex > * > p:not(:last-child) {margin-bottom: 48px;}
#menu .p-link a {
  font-family: var(--font-family-1st);
  font-size: 16px;
  font-weight: 700;
}
#menu .p-link a:hover {color: var(--color-1st);}
@media screen and (max-width: 980px) {
  #menu {padding-top: 8vw;}
  #menu::before {
    top: -7vw;
    height: 8vw;
  }
  #menu .c-inner {padding-bottom: 16vw;}
  #menu .p-bgIllust > *:nth-child(1) {
    left: 0;
    bottom: 0;
  }
  #menu .p-banner > .c-flex > a {width: calc(100% / 2);}
  #menu .p-link {
    margin-top: 8vw;
    padding-left: 12vw;
  }
  #menu .p-link > .c-flex > * {
    width: 50%;
    margin-bottom: 4vw;
  }
  #menu .p-link > .c-flex > * > p:not(:last-child) {margin-bottom: 4vw;}
  #menu .p-link a {font-size: 2.4vw;}
}
@media screen and (max-width: 640px) {
  #menu .p-link > .c-flex > * {margin-bottom: 8vw;}
  #menu .p-link > .c-flex > * > p:not(:last-child) {margin-bottom: 8vw;}
  #menu .p-link a {font-size: 2.8vw;}
}





/* ----- littleswitch ----- */
.d-inline-block {
  display: inline-block!important;
}
.footer-content-list-wrapper {
  padding: 2em 0;
}
.footer-content-list {
  margin: 0;
}
#footer .footer-content-list a {
  color: #FF3735;
  font-family: var(--font-family-1st);
  font-size: 14px;
  font-weight: bold;
  padding: 0 8px;
  text-decoration: underline;
}
#footer.l-footer {
  height: 220px;
}
.clearfix:after {
  clear: both;
  content: "";
  display: block;
}
@media screen and (max-width: 767px) {
  #footer.l-footer {
    height: 300px;
  }
  .footer-content-list-wrapper {
    padding: 0;
  }
  .footer-content-list {
    margin: 3em 0;
  }
  #footer li.d-inline-block {
    float: left;
    width: 50%;
  }
  #footer li.d-inline-block:nth-child(odd) {
    border-right: 1px solid rgba(255,55,53,.3);
  }
  #footer li.d-inline-block a {
    display: inline-block;
    padding: 6px;
    width: 100%;
  }
  #footer li.d-inline-block a:hover {
    background-color: rgba(255,55,53,.3);
  }
}