*,
*::before,
*::after {
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

li, dd {
  list-style-type: none;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, button, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  border: 0;
  font: inherit;
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease 0s;
}

img {
  width: 100%;
  max-width: 100%;
  display: block;
  border: none;
}

input,
button,
textarea,
select {
  font: inherit;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

a,
input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

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

caption, th, td {
  text-align: left;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

html {
  font-size: 10px;
}
@media (max-width: 750px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media screen and (min-width:768px) and (max-width:1600px) {
  html {
    font-size: 0.6349206349vw;
  }
}
@media (min-width: 1575px) {
  html {
    font-size: 10px;
  }
}

body {
  color: #000;
  background: #fff;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

a:hover img {
  filter: brightness(0.85);
}

@media screen and (min-width:768px) {
  .only_sp {
    display: none;
  }
}

@media screen and (max-width:767px) {
  .only_pc {
    display: none;
  }
}

.header {
  background: #e64290;
  padding: 2.573rem 0 1.39rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}
@media screen and (min-width:768px) {
  .header {
    padding: 1.5rem 0 0.5rem;
  }
}

.header__inner {
  position: relative;
}

.header__inner::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 3.0528rem;
  background: url(../img/circle-pink.png) repeat-x center center/contain;
  bottom: -3rem;
  left: 0;
}
@media screen and (min-width:768px) {
  .header__inner::before {
    height: 2.948rem;
    bottom: -1.5rem;
  }
}

.header-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.header-nav ul li:not(:first-child) {
  position: relative;
}

@media screen and (min-width:768px) {
  .header-nav ul li:not(:first-child)::before {
    position: absolute;
    display: block;
    content: "";
    width: 0.416rem;
    height: 5.6227rem;
    top: 50%;
    transform: translateY(-50%);
    left: -0.13rem;
    border-left: 0.416rem dotted #fff;
  }
}

@media screen and (max-width:767px) {
  .header-nav ul li:nth-child(3)::before,
  .header-nav ul li:nth-child(4)::before,
  .header-nav ul li:nth-child(6)::before {
    position: absolute;
    display: block;
    content: "";
    width: 0.443rem;
    height: 9.5137rem;
    top: 50%;
    transform: translateY(-50%);
    border-left: 0.443rem dotted #fff;
    left: -0.13rem;
  }
}

.header-nav ul li {
  width: 100%;
  max-width: 18.7168rem;
  transition: opacity 0.3s ease 0s;
  position: relative;
}
@media screen and (min-width:768px) {
  .header-nav ul li {
    max-width: 20.0969rem;
  }
}

.header-nav ul li img {
  width: 100%;
  margin: 0 auto;
}

.header-nav ul li:nth-child(1) img {
  max-width: 12.5849rem;
}

.header-nav ul li:nth-child(2) img {
  max-width: 13.3017rem;
}
@media screen and (min-width:768px) {
  .header-nav ul li:nth-child(2) img {
    max-width: 15.8801rem;
  }
}

.header-nav ul li:nth-child(3) img {
  max-width: 12.5635rem;
}
@media screen and (min-width:768px) {
  .header-nav ul li:nth-child(3) img {
    max-width: 10.1073rem;
  }
}

.header-nav ul li:nth-child(4) img {
  max-width: 12.6625rem;
}
@media screen and (min-width:768px) {
  .header-nav ul li:nth-child(4) img {
    max-width: 10.1889rem;
  }
}

.header-nav ul li:nth-child(5) img {
  max-width: 12.4125rem;
}

.header-nav ul li:nth-child(6) img {
  max-width: 14.3123rem;
}
@media screen and (min-width:768px) {
  .header-nav ul li:nth-child(6) img {
    max-width: 11.5212rem;
  }
}

.header-nav ul li::after {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease 0s;
  cursor: pointer;
  pointer-events: none;
}

.header-nav ul li:nth-child(1)::after {
  width: 12.5949rem;
  height: 2.4671rem;
  background: url(../img/osukatsu-yellow.png) no-repeat center center/cover;
}

.header-nav ul li:nth-child(2)::after {
  width: 13.3017rem;
  height: 6.4011rem;
  background: url(../img/campaign-yellow-sp.png) no-repeat center center/cover;
}
@media screen and (min-width:768px) {
  .header-nav ul li:nth-child(2)::after {
    width: 15.8901rem;
    height: 2.4547rem;
    background: url(../img/campaign-yellow-pc.png) no-repeat center center/cover;
  }
}

.header-nav ul li:nth-child(3)::after {
  width: 12.5635rem;
  height: 3.1552rem;
  background: url(../img/products-yellow-sp.png) no-repeat center center/cover;
}
@media screen and (min-width:768px) {
  .header-nav ul li:nth-child(3)::after {
    width: 10.1073rem;
    height: 2.4856rem;
    background: url(../img/products-yellow-pc.png) no-repeat center center/cover;
  }
}

.header-nav ul li:nth-child(4)::after {
  width: 12.6625rem;
  height: 3.2179rem;
  background: url(../img/apply-yellow-sp.png) no-repeat center center/cover;
}
@media screen and (min-width:768px) {
  .header-nav ul li:nth-child(4)::after {
    width: 10.1989rem;
    height: 2.5451rem;
    background: url(../img/apply-yellow-pc.png) no-repeat center center/cover;
  }
}

.header-nav ul li:nth-child(5)::after {
  width: 12.4225rem;
  height: 5.4131rem;
  background: url(../img/variation-yellow.png) no-repeat center center/cover;
}

.header-nav ul li:nth-child(6)::after {
  width: 14.3123rem;
  height: 3.208rem;
  background: url(../img/top-yellow-sp.png) no-repeat center center/cover;
}
@media screen and (min-width:768px) {
  .header-nav ul li:nth-child(6)::after {
    width: 11.5212rem;
    height: 2.5272rem;
    background: url(../img/top-yellow-pc.png) no-repeat center center/cover;
  }
}

.header-nav ul li:hover::after {
  opacity: 1;
}

.mv {
  margin-top: 11rem;
  background: repeating-linear-gradient(to right, #f3c7db 0, #f3c7db 1.7rem, #f7e3ec 1.7rem, #f7e3ec 3.4rem);
  position: relative;
  overflow: hidden;
}
@media screen and (min-width:768px) {
  .mv {
    margin-top: 7.2rem;
    padding-top: 2.8rem;
  }
}

.mv::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 27rem;
  background: #bfd181;
  border-top: 0.411rem solid #000;
  left: 0;
  bottom: 6.034rem;
}
@media screen and (min-width:768px) {
  .mv::before {
    height: 24.6rem;
    border-top: 0.4rem solid #000;
    bottom: 8.65rem;
  }
}

.mv::after {
  position: absolute;
  display: block;
  content: "";
  width: 74.6624rem;
  height: 69.0428rem;
  left: calc(50% + 2.3rem);
  transform: translateX(-50%);
  top: 5.4rem;
  background: url(../img/mv-illust-sp.png) no-repeat center center/contain;
}
@media screen and (min-width:768px) {
  .mv::after {
    width: 187.914rem;
    height: 60.5693rem;
    background: url(../img/mv-illust-pc.png) no-repeat center center/contain;
    left: calc(50% + 0.8rem);
  }
}

@media screen and (max-width:767px) {
  .mv__logo {
    background: #4cabe1;
    padding: 1.6rem 0 0.6rem;
  }
}
@media screen and (min-width:768px) {
  .mv__logo {
    position: absolute;
    width: 18.9825rem;
    height: 15.8556rem;
    left: calc(50% + 48.3425rem);
    transform: translateX(-50%);
    top: -2px;
  }
}

@media screen and (max-width:767px) {
  .mv__logo img {
    width: 100%;
    max-width: 44.1281rem;
    margin: 0 auto;
  }
}

.mv__title {
  width: 100%;
  max-width: 61.1rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media screen and (max-width:767px) {
  .mv__title {
    margin-top: -0.6rem;
    transform: translateX(1.7rem);
  }
}
@media screen and (min-width:768px) {
  .mv__title {
    max-width: 69.2rem;
  }
}

.mv__kitty {
  position: absolute;
  width: 67.8967rem;
  height: 32.7451rem;
  left: calc(50% - 2.6rem);
  transform: translateX(-50%);
  bottom: 6.8rem;
}
@media screen and (min-width:768px) {
  .mv__kitty {
    width: 69.2478rem;
    height: 32.7149rem;
    left: calc(50% - 6rem);
    bottom: 9.6rem;
  }
}

.mv__period {
  background: #e64290;
  padding: 0.9689rem 0;
  margin-top: 50.9rem;
}
@media screen and (min-width:768px) {
  .mv__period {
    margin-top: 30.4rem;
    padding: 2.1054rem 0;
  }
}

.mv__period img {
  width: 100%;
  max-width: 68.9153rem;
  margin: 0 auto;
}
@media screen and (min-width:768px) {
  .mv__period img {
    max-width: 87.2817rem;
  }
}

.osukatsu {
  background: #73d2ff;
  padding: 7.3rem 0 30.8rem;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width:768px) {
  .osukatsu {
    padding: 8.5rem 0 33.5rem;
  }
}

.osukatsu::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 14.8272rem;
  background: #6dba4f;
  border-top: 0.4rem solid #000;
  border-bottom: 0.4rem solid #000;
  bottom: 0;
  left: 0;
  z-index: 1;
}
@media screen and (min-width:768px) {
  .osukatsu::before {
    height: 9.7945rem;
  }
}

.osukatsu::after {
  position: absolute;
  display: block;
  content: "";
  width: 68.8366rem;
  height: 91.9154rem;
  background: url(../img/cherry-blossoms-sp.png) no-repeat center center/contain;
  bottom: 9.3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
@media screen and (min-width:768px) {
  .osukatsu::after {
    width: 188.702rem;
    height: 77.0623rem;
    background: url(../img/cherry-blossoms-pc.png) no-repeat center center/contain;
    bottom: 5.1rem;
  }
}

.osukatsu__head {
  width: 100%;
  max-width: 47.8799rem;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width:768px) {
  .osukatsu__head {
    max-width: 77.9632rem;
  }
}

@media screen and (min-width:768px) {
  .osukatsu__head::before {
    position: absolute;
    display: block;
    content: "";
    width: 111.458rem;
    height: 13.499rem;
    background: url(../img/vinegar1.png) no-repeat center center/contain;
    left: 50%;
    transform: translateX(-50%);
    top: -4.1rem;
  }
}

.osukatsu__text {
  width: 100%;
  max-width: 55.8387rem;
  margin: 4rem auto 0;
  position: relative;
  z-index: 1;
}
@media screen and (min-width:768px) {
  .osukatsu__text {
    max-width: 91.5002rem;
    margin: 6.39rem auto 0;
  }
}

.osukatsu__text::before {
  position: absolute;
  display: block;
  content: "";
  width: 30.0601rem;
  height: 21.6391rem;
  background: url(../img/kitty1.png) no-repeat center center/contain;
  left: 50%;
  transform: translateX(-50%);
  bottom: -25.1rem;
}
@media screen and (min-width:768px) {
  .osukatsu__text::before {
    width: 36.5407rem;
    height: 26.3042rem;
    bottom: -30.4rem;
  }
}

.campaign {
  padding: 10.5rem 0 18rem;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width:767px) {
  .campaign {
    margin-top: -4rem;
  }
}
@media screen and (min-width:768px) {
  .campaign {
    padding: 9.1rem 0 18.7rem;
  }
}

.campaign::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../img/bg-dotted-green.png) no-repeat center center/cover;
}

.campaign::after {
  position: absolute;
  display: block;
  content: "";
  width: 77.5511rem;
  height: 364.378rem;
  background: url(../img/flower1-sp.png) no-repeat center center/contain;
  top: 7rem;
  left: 49%;
  transform: translateX(-50%);
}
@media screen and (min-width:768px) {
  .campaign::after {
    background: url(../img/flower1-pc.png) no-repeat center center/contain;
    top: 11rem;
    width: 186.724rem;
    height: 318.04rem;
    left: 50%;
  }
}

.campaign__head {
  width: 100%;
  max-width: 71rem;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width:768px) {
  .campaign__head {
    padding-left: 1rem;
    max-width: 111.8rem;
  }
}

.campaign__text {
  width: 100%;
  max-width: 58.9rem;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width:768px) {
  .campaign__text {
    max-width: 102.4rem;
    margin: -2.5rem auto 0;
  }
}

.campaign__probability {
  margin: -10rem auto;
  padding-top: 16rem;
  width: 100%;
  max-width: 63.5258rem;
  position: relative;
}
@media screen and (min-width:768px) {
  .campaign__probability {
    margin: -4rem auto;
    padding-top: 14.2rem;
    max-width: 118.345rem;
  }
}

.campaign__probability-inner {
  padding: 3.3rem 0;
  position: relative;
  background: #1eafff;
}
@media screen and (min-width:768px) {
  .campaign__probability-inner {
    padding: 1.1rem 0 4.1rem;
  }
}

.campaign__probability-inner a {
  position: relative;
  z-index: 1;
}

.campaign__probability-inner::before {
  position: absolute;
  display: block;
  content: "";
  width: 4.5rem;
  height: 3.1rem;
  background: url(../img/triangle.png) no-repeat center center/contain;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width:768px) {
  .campaign__probability-inner::before {
    width: 7.14rem;
    height: 4.7rem;
    top: -4.6rem;
  }
}

.campaign__probability-inner::after {
  position: absolute;
  display: block;
  content: "";
  width: 96.9648%;
  aspect-ratio: 615.977/803.434;
  border: solid 0.204rem #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (min-width:768px) {
  .campaign__probability-inner::after {
    width: 97.443%;
    aspect-ratio: 1153.19/719.146;
    border: solid 0.32rem #fff;
  }
}

.campaign__probability-head {
  width: 60.87rem;
  position: relative;
  z-index: 1;
}
@media screen and (max-width:767px) {
  .campaign__probability-head {
    margin-left: 5.9rem;
  }
}
@media screen and (min-width:768px) {
  .campaign__probability-head {
    width: 100%;
    max-width: 116.0738rem;
    margin: 0 auto;
    padding-left: 13.3788rem;
  }
}

.campaign__probability-head::before {
  position: absolute;
  display: block;
  content: "";
  width: 9.406rem;
  height: 20.468rem;
  background: url(../img/vinegar2.png) no-repeat center center/contain;
  top: -6.1rem;
  left: -5.9rem;
}
@media screen and (min-width:768px) {
  .campaign__probability-head::before {
    width: 13.5102rem;
    height: 29.399rem;
    top: -3.6rem;
    left: -1.3rem;
  }
}

.campaign__probability-content {
  background: #fff;
  width: 100%;
  max-width: 57.2063rem;
  margin: 1.6rem auto 0;
  padding: 3.4rem 0;
  border-radius: 2rem;
}
@media screen and (min-width:768px) {
  .campaign__probability-content {
    max-width: 110.856rem;
    padding: 2rem 0 1.7rem;
  }
}

.campaign__probability-example {
  width: 100%;
  max-width: 52.6132rem;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width:768px) {
  .campaign__probability-example {
    max-width: 89.08rem;
  }
}

.campaign__probability-note {
  text-align: center;
  font-size: 2.1rem;
  line-height: 1.3;
  font-weight: 700;
  color: #e72241;
  margin-top: 4.5rem;
  position: relative;
}
@media screen and (min-width:768px) {
  .campaign__probability-note {
    font-size: 2.5rem;
    line-height: 1.45;
    margin-top: 2.1rem;
  }
}

.course {
  width: 100%;
  max-width: 64.758rem;
  margin: 3rem auto 0;
  background: #fffacc;
  border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
  position: relative;
  z-index: 5;
}
@media screen and (min-width:768px) {
  .course {
    max-width: 120rem;
    margin: 3.6rem auto 0;
  }
}

.course__head {
  padding: 2.4rem 0 3.9rem;
  background: url(../img/be-red-sp.png) no-repeat bottom center/cover;
  border-radius: 2.5rem 2.5rem 0 0;
}
@media screen and (min-width:768px) {
  .course__head {
    padding: 3.3rem 0 5.4rem;
    background: url(../img/be-red-pc.png) no-repeat bottom center/cover;
  }
}

.course__head img {
  width: 100%;
  max-width: 59.8336rem;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width:768px) {
  .course__head img {
    max-width: 93.2946rem;
  }
}

.course__content {
  padding: 5.2rem 0 3.1rem;
}
@media screen and (min-width:768px) {
  .course__content {
    padding: 6rem 0 4.3rem;
  }
}

.course__items {
  width: 100%;
  max-width: 59.41rem;
  margin: 0 auto;
}
@media screen and (min-width:768px) {
  .course__items {
    max-width: 110.856rem;
  }
}

.course__item {
  background: #fff;
  border: 0.55rem solid #9ad000;
  border-radius: 2.5rem;
  position: relative;
  padding: 0 0 0 2.3rem;
}
@media screen and (max-width:767px) {
  .course__item {
    padding-top: 34.9rem;
  }
}
@media screen and (min-width:768px) {
  .course__item {
    border: 0.9rem solid #9ad000;
    padding: 0 0 0 4.3rem;
  }
}

.course__item:nth-child(1) {
  padding-bottom: 2.4rem;
}
@media screen and (min-width:768px) {
  .course__item:nth-child(1) {
    padding-top: 11.04rem;
    padding-bottom: 2.8rem;
  }
}

@media screen and (min-width:768px) {
  .course__item:nth-child(2) {
    margin-top: 8.3rem;
  }
}

@media screen and (min-width:768px) {
  .course__item:nth-child(3) {
    margin-top: 7.7rem;
  }
}

.course__item:nth-child(2),
.course__item:nth-child(3) {
  padding-bottom: 2.7rem;
}
@media screen and (max-width:767px) {
  .course__item:nth-child(2),
  .course__item:nth-child(3) {
    margin-top: 6rem;
  }
}
@media screen and (min-width:768px) {
  .course__item:nth-child(2),
  .course__item:nth-child(3) {
    padding-top: 9.9rem;
    padding-bottom: 3.5rem;
  }
}

.course__item-head {
  width: 100%;
  max-width: 33rem;
  position: absolute;
  left: -1.5rem;
  z-index: 1;
}
@media screen and (max-width:767px) {
  .course__item-head {
    top: -3rem;
  }
}
@media screen and (min-width:768px) {
  .course__item-head {
    max-width: 47.2rem;
    left: -2.5rem;
  }
}

@media screen and (min-width:768px) {
  .course__item:nth-child(1) .course__item-head {
    top: -6.9rem;
  }
}

@media screen and (min-width:768px) {
  .course__item:nth-child(2) .course__item-head,
  .course__item:nth-child(3) .course__item-head {
    top: -7.9rem;
  }
}

.course__item:nth-child(1) .course__item-content {
  width: 100%;
  max-width: 53.4412rem;
}
@media screen and (min-width:768px) {
  .course__item:nth-child(1) .course__item-content {
    max-width: 63.4714rem;
  }
}

.course__item:nth-child(2) .course__item-content {
  width: 100%;
  max-width: 53.0727rem;
}
@media screen and (min-width:768px) {
  .course__item:nth-child(2) .course__item-content {
    max-width: 61.3116rem;
  }
}

.course__item:nth-child(3) .course__item-content {
  width: 100%;
  max-width: 53.0727rem;
}
@media screen and (min-width:768px) {
  .course__item:nth-child(3) .course__item-content {
    max-width: 61.2568rem;
  }
}

.course__item:nth-child(1) .course__item-img {
  position: absolute;
  width: 100%;
  max-width: 23.5187rem;
  top: 3.5rem;
}
@media screen and (max-width:767px) {
  .course__item:nth-child(1) .course__item-img {
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width:768px) {
  .course__item:nth-child(1) .course__item-img {
    max-width: 29.9479rem;
    top: 0.9rem;
    right: 6.1rem;
  }
}

.course__item:nth-child(2) .course__item-img {
  position: absolute;
  width: 100%;
  max-width: 36.8348rem;
  top: 5.7rem;
}
@media screen and (max-width:767px) {
  .course__item:nth-child(2) .course__item-img {
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width:768px) {
  .course__item:nth-child(2) .course__item-img {
    max-width: 39.8206rem;
    top: 4.7rem;
    right: 1.3rem;
  }
}

.course__item:nth-child(3) .course__item-img {
  position: absolute;
  width: 100%;
  max-width: 57.94rem;
  top: -4.6rem;
  right: -3rem;
}
@media screen and (min-width:768px) {
  .course__item:nth-child(3) .course__item-img {
    max-width: 50.62rem;
    top: -2.8rem;
    right: -2.8rem;
  }
}

.course__item-link {
  padding-left: 0.7rem;
  margin-top: 2.5rem;
}
@media screen and (min-width:768px) {
  .course__item-link {
    width: 100rem;
    padding-left: 0.4rem;
    margin-top: 3.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.course__item-link li a {
  display: block;
  text-indent: -9999px;
}

.course__item-link li:nth-child(1) a {
  width: 39.4rem;
  height: 2.737rem;
  background: url(../img/quo-pay-detail-blue.png) no-repeat top center/100% auto;
}
@media screen and (min-width:768px) {
  .course__item-link li:nth-child(1) a {
    width: 42.52rem;
    height: 2.994rem;
  }
}
.course__item-link li:nth-child(1) a:hover {
  filter: brightness(1);
  background: url(../img/quo-pay-detail-orange.png) no-repeat top center/100% auto;
}

.course__item-link li:nth-child(2) a {
  width: 47.25rem;
  height: 2.739rem;
  background: url(../img/quo-pay-shop-blue.png) no-repeat top center/100% auto;
}
@media screen and (max-width:767px) {
  .course__item-link li:nth-child(2) a {
    margin-top: 2.5rem;
  }
}
@media screen and (min-width:768px) {
  .course__item-link li:nth-child(2) a {
    width: 50.99rem;
    height: 2.999rem;
  }
}
.course__item-link li:nth-child(2) a:hover {
  filter: brightness(1);
  background: url(../img/quo-pay-shop-orange.png) no-repeat top center/100% auto;
}

.course__item-note {
  font-size: 1.8rem;
  line-height: 1.43;
  margin-top: 2rem;
}
@media screen and (max-width:767px) {
  .course__item-note {
    text-indent: -1.8rem;
    margin-left: 1.8rem;
  }
}
@media screen and (min-width:768px) {
  .course__item-note {
    font-size: 2.5rem;
    line-height: 1.36;
    margin-top: 3.4rem;
  }
}

.course__note {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.95rem;
  line-height: 1;
  margin-top: 3.4rem;
}
@media screen and (min-width:768px) {
  .course__note {
    font-size: 2rem;
    padding-right: 4rem;
    justify-content: flex-end;
  }
}

.course__note span + span {
  margin-left: 1rem;
}
@media screen and (min-width:768px) {
  .course__note span + span {
    margin-left: 1.4rem;
  }
}

.products {
  margin-top: -0.9rem;
  padding: 11rem 0 12.3rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
@media screen and (min-width:768px) {
  .products {
    margin-top: -4.5rem;
    padding: 13.2rem 0 16.5rem;
  }
}

.products::before {
  position: absolute;
  display: block;
  content: "";
  width: 145.8266%;
  height: 100%;
  background: url(../img/bg-yellow-sp.png) no-repeat center center/100% 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width:768px) {
  .products::before {
    background: url(../img/bg-yellow-pc.png) no-repeat center center/100% 100%;
    width: 112.218%;
  }
}

.products__inner {
  width: 100%;
  max-width: 58.6514rem;
  margin: 0 auto;
  border: 0.55rem solid #6db3fc;
  border-radius: 2.5rem;
  padding: 4.8rem 0;
  background: #fff;
  position: relative;
  z-index: 1;
}
@media screen and (min-width:768px) {
  .products__inner {
    max-width: 110.856rem;
    border: 0.9rem solid #6db3fc;
    padding: 5.3rem 0;
  }
}

.products__head {
  width: 100%;
  max-width: 34.4082rem;
  margin: 0 auto;
}
@media screen and (min-width:768px) {
  .products__head {
    max-width: 49.7376rem;
  }
}

.products__items {
  width: 100%;
  max-width: 50.868rem;
  margin: 4.5rem auto 0;
}
@media screen and (min-width:768px) {
  .products__items {
    max-width: 88.5258rem;
    margin: 3.4rem auto 0;
  }
}

.products__note {
  text-align: center;
  margin-top: 4.6rem;
}
@media screen and (min-width:768px) {
  .products__note {
    margin-top: 5rem;
  }
}

.products__note p {
  font-size: 2rem;
}
@media screen and (min-width:768px) {
  .products__note p {
    font-size: 2.5rem;
  }
}

.products__note p:first-child {
  font-size: 2.3rem;
  line-height: 1.28;
  color: #e72241;
  font-weight: 700;
}
@media screen and (min-width:768px) {
  .products__note p:first-child {
    font-size: 2.8rem;
    line-height: 1.44;
  }
}

.products__note p:nth-child(2) {
  margin-top: 1.8rem;
}
@media screen and (min-width:768px) {
  .products__note p:nth-child(2) {
    margin-top: 1.5rem;
  }
}

.apply {
  background: #ffd7f0;
  padding: 21.2rem 0 10rem;
  margin-top: -9.1rem;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width:768px) {
  .apply {
    padding: 20.5rem 0 18.1rem;
    margin-top: -4.3rem;
  }
}

@media screen and (min-width:768px) {
  .apply::before,
  .apply::after {
    position: absolute;
    display: block;
    content: "";
    width: 29.4885rem;
    height: 242.535rem;
    background: url(../img/flower2.png) repeat-y top center/contain;
    top: 12.2rem;
  }
}

.apply::before {
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width:767px) {
  .apply::before {
    position: absolute;
    display: block;
    content: "";
    width: 53.6222rem;
    height: 4.49696rem;
    background: url(../img/flower3.png) no-repeat center center/contain;
    top: 14.3rem;
  }
}
@media screen and (min-width:768px) {
  .apply::before {
    left: calc(50% - 77.8rem);
    transform: translateX(-50%);
  }
}

@media screen and (min-width:768px) {
  .apply::after {
    left: calc(50% + 77.8rem);
    transform: translateX(-50%) scale(-1, 1);
  }
}

.apply__content {
  width: 100%;
  max-width: 58.6514rem;
  margin: 0 auto;
  background: #fff;
  border: 0.55rem solid #ffff41;
  border-radius: 2.5rem;
  padding: 5.9rem 2.182rem;
}
@media screen and (min-width:768px) {
  .apply__content {
    max-width: 110.856rem;
    padding: 9.3rem 6.561rem 10.1rem;
    border: 0.9rem solid #ffff41;
  }
}

.apply__head {
  padding: 2rem 0;
  border-top: 0.4929rem solid #ff9b14;
  border-bottom: 0.4929rem solid #ff9b14;
  position: relative;
}
@media screen and (min-width:768px) {
  .apply__head {
    padding: 3.7rem 0;
    border-top: 0.6352rem solid #ff9b14;
    border-bottom: 0.6352rem solid #ff9b14;
  }
}

.apply__head img {
  width: 100%;
  max-width: 19.0992rem;
  margin: 0 auto;
}
@media screen and (min-width:768px) {
  .apply__head img {
    max-width: 21.6682rem;
  }
}

.apply__head::before {
  position: absolute;
  display: block;
  content: "";
  width: 17.1756rem;
  height: 20.2659rem;
  background: url(../img/kitty2.png) no-repeat center center/contain;
  left: 50%;
  transform: translateX(-50%);
  top: -23.4rem;
  z-index: 2;
}
@media screen and (min-width:768px) {
  .apply__head::before {
    width: 19.5174rem;
    height: 23.0291rem;
    top: -29.9rem;
  }
}

.apply__items {
  margin-top: 4.5rem;
  padding-left: 3rem;
}
@media screen and (min-width:768px) {
  .apply__items {
    margin-top: 5.8rem;
    padding-left: 3.3rem;
  }
}

.apply__item {
  font-weight: 700;
  font-size: 2.35rem;
  line-height: 1.5;
  position: relative;
  text-align: justify;
}
@media screen and (min-width:768px) {
  .apply__item {
    font-size: 2.8rem;
  }
}

.apply__item + .apply__item {
  margin-top: 5.1rem;
}
@media screen and (min-width:768px) {
  .apply__item + .apply__item {
    margin-top: 2.2rem;
  }
}

.apply__item::before {
  position: absolute;
  display: block;
  content: "";
  width: 2.2319rem;
  height: 2.2319rem;
  background: #000;
  border-radius: 50%;
  top: 0.6rem;
  left: -2.8rem;
}
@media screen and (min-width:768px) {
  .apply__item::before {
    width: 2.611rem;
    height: 2.611rem;
    top: 0.6rem;
    left: -2.8rem;
  }
}

.apply__notes {
  margin-top: 4rem;
}
@media screen and (min-width:768px) {
  .apply__notes {
    margin-top: 4.3rem;
  }
}

.apply__note {
  font-size: 1.95rem;
  line-height: 1.38;
  text-align: justify;
  text-indent: -1.95rem;
  margin-left: 1.95rem;
}
@media screen and (min-width:768px) {
  .apply__note {
    font-size: 2.25rem;
    line-height: 1.6;
    text-indent: -2.25rem;
    margin-left: 2.25rem;
  }
}

.apply__note + .apply__note {
  margin-top: 0.4rem;
}
@media screen and (min-width:768px) {
  .apply__note + .apply__note {
    margin-top: 0.9rem;
  }
}

.apply__date {
  margin-top: 4.2rem;
  padding-top: 3.9rem;
  border-top: 0.5589rem solid #ff9b14;
}
@media screen and (min-width:768px) {
  .apply__date {
    margin-top: 7.4rem;
    padding-top: 6.7rem;
    border-top: 0.6352rem solid #ff9b14;
  }
}

.apply__period {
  width: 100%;
  max-width: 48.8332rem;
  margin: 0 auto;
}
@media screen and (min-width:768px) {
  .apply__period {
    max-width: 68.7335rem;
  }
}

.apply__deadline {
  width: 100%;
  max-width: 46.1247rem;
  margin: 4.5rem auto 0;
}
@media screen and (min-width:768px) {
  .apply__deadline {
    max-width: 65.1914rem;
    margin: 5rem auto 0;
  }
}

.apply__btn {
  width: 100%;
  max-width: 61.3rem;
  margin: 13.3rem auto 0;
}
@media screen and (min-width:768px) {
  .apply__btn {
    margin: 13.7rem auto 0;
    max-width: 85.8rem;
  }
}

.information {
  width: 100%;
  max-width: 60.5429rem;
  margin: 10.4rem auto 0;
  position: relative;
}
@media screen and (min-width:768px) {
  .information {
    max-width: 110.856rem;
    margin: 12.3rem auto 0;
  }
}

@media screen and (max-width:767px) {
  .information::before,
  .information::after {
    position: absolute;
    display: block;
    content: "";
    width: 53.6222rem;
    height: 4.49696rem;
    background: url(../img/flower3.png) no-repeat center center/contain;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media screen and (max-width:767px) {
  .information::before {
    top: -7.3rem;
  }
}

@media screen and (max-width:767px) {
  .information::after {
    bottom: -8.5rem;
  }
}

.information__inner {
  height: 29.8963rem;
  overflow: auto;
  background: #fff;
  font-size: 1.9rem;
  text-align: justify;
  line-height: 1.57;
  padding: 4rem 2.2rem 4rem 4rem;
  border-right: 0.5rem solid #fff;
}
@media screen and (min-width:768px) {
  .information__inner {
    font-size: 1.9684rem;
    height: 34.8006rem;
    border-right: 1.29rem solid #fff;
    padding: 3.7rem 3.5rem 3.7rem 7rem;
  }
}

.information__inner::-webkit-scrollbar {
  width: 1.1rem;
}
@media screen and (min-width:768px) {
  .information__inner::-webkit-scrollbar {
    width: 1.3rem;
  }
}

.information__inner::-webkit-scrollbar-thumb {
  background: #cacaca;
  border-radius: 5px;
}

.information__inner::-webkit-scrollbar-track {
  margin: 0.5rem auto;
}
@media screen and (min-width:768px) {
  .information__inner::-webkit-scrollbar-track {
    margin: 0.8rem auto;
  }
}

.information__requirements,
.information__terms {
  margin-top: 3.2rem;
}
@media screen and (min-width:768px) {
  .information__requirements,
  .information__terms {
    margin-top: 4rem;
  }
}

.information__requirements > ul,
.information__terms > ol {
  margin-top: 0.8rem;
}
@media screen and (min-width:768px) {
  .information__requirements > ul,
  .information__terms > ol {
    margin-top: 1rem;
  }
}

.information__requirements h4,
.information__terms h4 {
  font-size: 2.3rem;
  font-weight: 700;
}
@media screen and (min-width:768px) {
  .information__requirements h4,
  .information__terms h4 {
    font-size: 2.4rem;
  }
}

.information__requirements h5,
.information__terms h5 {
  font-size: 2.1rem;
  font-weight: 700;
}
@media screen and (min-width:768px) {
  .information__requirements h5,
  .information__terms h5 {
    font-size: 2.2rem;
  }
}

.information__requirements > ul > li + li,
.information__terms > ol > li + li {
  margin-top: 2rem;
}
@media screen and (min-width:768px) {
  .information__requirements > ul > li + li,
  .information__terms > ol > li + li {
    margin-top: 2.4rem;
  }
}

.information__requirements > ul li:nth-child(5) p {
  text-indent: -1rem;
}

.information__requirements ul li:nth-child(6) ul li,
.information__requirements ul li:nth-child(7) ul li,
.information__requirements ul li:nth-child(8) ul li,
.information__requirements ul li:nth-child(9) ul li,
.information__requirements ul li:nth-child(10) ul li,
.information__terms ul li {
  text-indent: -1.9rem;
  margin-left: 1.6rem;
}
@media screen and (min-width:768px) {
  .information__requirements ul li:nth-child(6) ul li,
  .information__requirements ul li:nth-child(7) ul li,
  .information__requirements ul li:nth-child(8) ul li,
  .information__requirements ul li:nth-child(9) ul li,
  .information__requirements ul li:nth-child(10) ul li,
  .information__terms ul li {
    text-indent: -1.9684rem;
    margin-left: 1.6684rem;
  }
}

.information__requirements ul li:nth-child(6) ul li {
  margin-left: 1.9rem;
}
@media screen and (min-width:768px) {
  .information__requirements ul li:nth-child(6) ul li {
    margin-left: 1.9684rem;
  }
}

@media screen and (max-width:767px) {
  .information__requirements ul li:nth-child(4) p {
    text-indent: -1.9rem;
    margin-left: 1.6rem;
  }
}

.information__terms ol li ol li {
  text-indent: -3rem;
  margin-left: 3rem;
}

.information__terms ol li ol li ol li {
  text-indent: -2rem;
  margin-left: 2rem;
}

.information__terms > ol > li:last-child p:nth-child(n+6) {
  margin-top: 2.4rem;
  position: relative;
}
@media screen and (min-width:768px) {
  .information__terms > ol > li:last-child p:nth-child(n+6) {
    margin-top: 3rem;
  }
}

.information__terms > ol > li:last-child p:nth-child(n+6)::before {
  position: absolute;
  display: block;
  content: "------------------";
  left: 0;
  top: -3rem;
}

.variation {
  position: relative;
  overflow: hidden;
}

.variation__inner {
  padding: 33.3rem 0 14.1rem;
  position: relative;
}
@media screen and (min-width:768px) {
  .variation__inner {
    padding: 17.2rem 0 21rem;
  }
}

.variation__bg {
  position: relative;
}

.variation__bg::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: calc(100% - 7.382rem);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(../img/pattern-blue-sp.png) repeat center center/auto auto;
}
@media screen and (min-width:768px) {
  .variation__bg::before {
    height: calc(100% - 12.544rem);
    background: url(../img/pattern-blue-pc.png) repeat center center/auto auto;
  }
}

@media screen and (min-width:768px) {
  .variation__bg::after {
    position: absolute;
    display: block;
    content: "";
    width: 180.867rem;
    height: 540.055rem;
    background: url(../img/apple2.png) no-repeat top center/contain;
    top: 18.2rem;
    left: 50%;
    transform: translateX(-50%);
  }
}

.variation::before,
.variation::after,
.variation__inner::before,
.variation__inner::after {
  position: absolute;
  display: block;
  content: "";
  width: calc(50% - 3.3rem);
  height: 0.656rem;
  background: url(../img/dot-red.png) repeat-x left center/auto 100%;
}
@media screen and (min-width:768px) {
  .variation::before,
  .variation::after,
  .variation__inner::before,
  .variation__inner::after {
    height: 1.115rem;
    width: calc(50% - 4.3rem);
  }
}

.variation::before {
  top: 1.58rem;
  left: 0.5rem;
  transform: rotate(180deg);
}
@media screen and (min-width:768px) {
  .variation::before {
    top: 2.68rem;
    left: 0;
  }
}

.variation::after {
  top: 1.58rem;
  right: 0;
}
@media screen and (min-width:768px) {
  .variation::after {
    top: 2.68rem;
  }
}

.variation__inner::before {
  bottom: 1.45rem;
  left: 0.5rem;
  transform: rotate(180deg);
}
@media screen and (min-width:768px) {
  .variation__inner::before {
    bottom: 2.46rem;
    left: 0;
  }
}

.variation__inner::after {
  bottom: 1.45rem;
  right: 0;
}
@media screen and (min-width:768px) {
  .variation__inner::after {
    bottom: 2.46rem;
  }
}

.variation__head {
  width: 100%;
  max-width: 61.5rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media screen and (min-width:768px) {
  .variation__head {
    max-width: 122.27rem;
    padding-left: 45.439rem;
  }
}

.variation__head::after {
  position: absolute;
  display: block;
  content: "";
  width: 23.8111rem;
  height: 22.4797rem;
  background: url(../img/vinegar3.png) no-repeat center center/contain;
  top: -25.7rem;
  left: 50%;
}
@media screen and (max-width:767px) {
  .variation__head::after {
    transform: translateX(-50%);
  }
}
@media screen and (min-width:768px) {
  .variation__head::after {
    width: 43.2224rem;
    height: 40.8058rem;
    left: -0.54rem;
    top: 5.1rem;
  }
}

.variation__text {
  width: 100%;
  max-width: 59.246rem;
  margin: 4rem auto 0;
  position: relative;
  z-index: 1;
}
@media screen and (min-width:768px) {
  .variation__text {
    max-width: 115.8rem;
    padding-left: 44.244rem;
    margin: 4.54rem auto 0;
  }
}

.variation__items {
  margin-top: 6rem;
}
@media screen and (min-width:768px) {
  .variation__items {
    margin-top: 9rem;
  }
}

.variation__item + .variation__item {
  margin-top: 8.3rem;
}
@media screen and (min-width:768px) {
  .variation__item + .variation__item {
    margin-top: 11.4rem;
  }
}

.variation__recipe {
  margin-top: 8.7rem;
  position: relative;
  z-index: 1;
}
@media screen and (min-width:768px) {
  .variation__recipe {
    margin-top: 12.4rem;
  }
}

.variation__recipe-other {
  width: 100%;
  max-width: 52.849rem;
  margin: 0 auto;
}
@media screen and (min-width:768px) {
  .variation__recipe-other {
    max-width: 99.3081rem;
  }
}

.variation__recipe-btn {
  width: 100%;
  max-width: 61.8rem;
  margin: 4.8rem auto 0;
  position: relative;
}
@media screen and (min-width:768px) {
  .variation__recipe-btn {
    max-width: 86.3rem;
    margin: 3.8rem auto 0;
  }
}

.variation__head::before,
.variation__recipe-btn::before {
  position: absolute;
  display: block;
  content: "";
  width: 3.4165rem;
  height: 2.2299rem;
  background: url(../img/ribbon-red.png) no-repeat center center/contain;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width:768px) {
  .variation__head::before,
  .variation__recipe-btn::before {
    width: 5.8058rem;
    height: 3.7895rem;
  }
}

.variation__head::before {
  top: -32.6rem;
}
@media screen and (min-width:768px) {
  .variation__head::before {
    top: -15.8rem;
  }
}

.variation__recipe-btn::before {
  bottom: -13.3rem;
}
@media screen and (min-width:768px) {
  .variation__recipe-btn::before {
    bottom: -19.9rem;
  }
}

.arrange {
  width: 100%;
  max-width: 58.6514rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 2.5rem;
  padding: 3.7rem 0 6rem;
  position: relative;
  background: #fff;
  z-index: 1;
}
@media screen and (min-width:768px) {
  .arrange {
    padding: 3.4rem 0 4.8rem;
    max-width: 118.758rem;
  }
}

.arrange:nth-child(1) {
  border: 0.5rem solid #fa6ea0;
}
@media screen and (min-width:768px) {
  .arrange:nth-child(1) {
    border: 0.931rem solid #fa6ea0;
  }
}

.arrange:nth-child(2) {
  border: 0.5rem solid #6db3fc;
}
@media screen and (min-width:768px) {
  .arrange:nth-child(2) {
    border: 0.931rem solid #6db3fc;
  }
}

.arrange:nth-child(3) {
  border: 0.5rem solid #9ad000;
}
@media screen and (min-width:768px) {
  .arrange:nth-child(3) {
    border: 0.931rem solid #9ad000;
  }
}

.arrange:nth-child(2)::before {
  position: absolute;
  display: block;
  content: "";
  width: 9.9499rem;
  height: 12.1506rem;
  background: url(../img/apple1.png) no-repeat center center/contain;
}
@media screen and (max-width:767px) {
  .arrange:nth-child(2)::before {
    top: -244.3rem;
    right: -5.2rem;
  }
}
@media screen and (min-width:768px) {
  .arrange:nth-child(2)::before {
    width: 15.8975rem;
    height: 19.4137rem;
    left: -12.4rem;
    bottom: -6.8rem;
  }
}

.arrange:nth-child(3)::before {
  position: absolute;
  display: block;
  content: "";
  width: 9.0665rem;
  height: 14.4307rem;
  background: url(../img/bear.png) no-repeat center center/contain;
  right: 6.3rem;
}
@media screen and (max-width:767px) {
  .arrange:nth-child(3)::before {
    top: -425.3rem;
  }
}
@media screen and (min-width:768px) {
  .arrange:nth-child(3)::before {
    width: 14.489rem;
    height: 23.0614rem;
    right: -7.2rem;
    bottom: -17.1rem;
  }
}

.arrange__head {
  width: 62.9553rem;
  margin-left: -1.1rem;
  position: relative;
}
@media screen and (min-width:768px) {
  .arrange__head {
    width: 123.887rem;
    margin-left: -1.374rem;
  }
}

.arrange__head::before,
.arrange__head::after {
  position: absolute;
  display: block;
  content: "";
}

.arrange:nth-child(1) .arrange__head::before {
  width: 9.5253rem;
  height: 20.5175rem;
  background: url(../img/vinegar2.png) no-repeat center center/contain;
  top: -5.3rem;
  left: -1.7rem;
}
@media screen and (min-width:768px) {
  .arrange:nth-child(1) .arrange__head::before {
    width: 15.0367rem;
    height: 32.389rem;
    top: -8.2rem;
    left: 2.2rem;
  }
}

.arrange:nth-child(2) .arrange__head::before {
  width: 10.7523rem;
  height: 21.1514rem;
  top: -6.2rem;
  left: 1.25rem;
  background: url(../img/vinegar4.png) no-repeat center center/contain;
}
@media screen and (min-width:768px) {
  .arrange:nth-child(2) .arrange__head::before {
    width: 16.7438rem;
    height: 32.9375rem;
    top: -9.1rem;
    left: 1.5rem;
  }
}

.arrange:nth-child(2) .arrange__head::after {
  width: 19.4787rem;
  height: 20.2188rem;
  background: url(../img/kitty3.png) no-repeat center center/contain;
  top: -255.7rem;
}
@media screen and (max-width:767px) {
  .arrange:nth-child(2) .arrange__head::after {
    left: -3.1rem;
  }
}
@media screen and (min-width:768px) {
  .arrange:nth-child(2) .arrange__head::after {
    width: 25.7082rem;
    height: 26.685rem;
    top: -20.2rem;
    right: -7.2rem;
  }
}

.arrange:nth-child(3) .arrange__head::before {
  width: 10.6571rem;
  height: 20.6531rem;
  top: -6rem;
  left: -0.68rem;
  background: url(../img/vinegar5.png) no-repeat center center/contain;
}
@media screen and (min-width:768px) {
  .arrange:nth-child(3) .arrange__head::before {
    width: 16.3979rem;
    height: 31.7785rem;
    top: -9.2rem;
    left: 3.9rem;
  }
}

.arrange:nth-child(3) .arrange__head::after {
  width: 12.5661rem;
  height: 21.9268rem;
  top: -6rem;
  right: -1.58rem;
  background: url(../img/vinegar6.png) no-repeat center center/contain;
}
@media screen and (min-width:768px) {
  .arrange:nth-child(3) .arrange__head::after {
    width: 19.3352rem;
    height: 33.7384rem;
    top: -9.1rem;
    right: 4.8rem;
  }
}

.arrange__items {
  display: flex;
  gap: 4.6rem;
  width: 100%;
  position: relative;
}
@media screen and (max-width:767px) {
  .arrange__items {
    flex-direction: column;
  }
}
@media screen and (min-width:768px) {
  .arrange__items {
    gap: 5.77rem;
    max-width: 113.328rem;
    margin: 3.8rem auto 0;
  }
}

@media screen and (max-width:767px) {
  .arrange:nth-child(1) .arrange__items {
    margin: 3.2rem auto 0;
  }
}

@media screen and (max-width:767px) {
  .arrange:nth-child(2) .arrange__items {
    margin: 3.8rem auto 0;
  }
}

@media screen and (max-width:767px) {
  .arrange:nth-child(3) .arrange__items {
    margin: 4.2rem auto 0;
  }
}

@media screen and (min-width:768px) {
  .arrange__items::before {
    position: absolute;
    display: block;
    content: "";
    width: 1.01rem;
    height: 103.184rem;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media screen and (min-width:768px) {
  .arrange:nth-child(1) .arrange__items::before {
    border-left: dotted 1.01rem #fa6ea0;
  }
}

@media screen and (min-width:768px) {
  .arrange:nth-child(2) .arrange__items::before {
    border-left: dotted 1.01rem #6db3fc;
  }
}

@media screen and (min-width:768px) {
  .arrange:nth-child(3) .arrange__items::before {
    border-left: dotted 1.01rem #9ad000;
  }
}

@media screen and (max-width:767px) {
  .arrange__item-point {
    width: 100%;
    max-width: 47.3158rem;
    margin: 0 auto;
    z-index: 1;
    position: relative;
  }
}

@media screen and (max-width:767px) {
  .arrange:nth-child(1) .arrange__items .arrange__item:nth-child(1) .arrange__item-point {
    max-width: 36.7098rem;
  }
}

.arrange__item-img {
  width: 100%;
  max-width: 47.3368rem;
  margin: 0 auto;
}
@media screen and (min-width:768px) {
  .arrange__item-img {
    max-width: 52.5544rem;
    margin: 1.8rem auto 0;
  }
}

@media screen and (max-width:767px) {
  .arrange:nth-child(1) .arrange__item:nth-child(1) .arrange__item-img {
    margin: -0.4rem auto 0;
  }
}

@media screen and (max-width:767px) {
  .arrange:nth-child(2) .arrange__item:nth-child(2) .arrange__item-img {
    margin: -0.2rem auto 0;
  }
}

@media screen and (max-width:767px) {
  .arrange:nth-child(3) .arrange__item-img {
    margin: -0.6rem auto 0;
  }
}

.arrange__item-name {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.arrange:nth-child(1) .arrange__items .arrange__item:nth-child(1) .arrange__item-name {
  max-width: 43.8188rem;
}
@media screen and (min-width:768px) {
  .arrange:nth-child(1) .arrange__items .arrange__item:nth-child(1) .arrange__item-name {
    max-width: 27.9383rem;
  }
}

.arrange:nth-child(1) .arrange__items .arrange__item:nth-child(2) .arrange__item-name {
  max-width: 34.89rem;
}
@media screen and (min-width:768px) {
  .arrange:nth-child(1) .arrange__items .arrange__item:nth-child(2) .arrange__item-name {
    max-width: 42.4475rem;
  }
}

.arrange:nth-child(2) .arrange__items .arrange__item:nth-child(1) .arrange__item-name {
  max-width: 50.8081rem;
}
@media screen and (min-width:768px) {
  .arrange:nth-child(2) .arrange__items .arrange__item:nth-child(1) .arrange__item-name {
    max-width: 47.4223rem;
  }
}

.arrange:nth-child(2) .arrange__items .arrange__item:nth-child(2) .arrange__item-name {
  max-width: 41.8549rem;
}
@media screen and (min-width:768px) {
  .arrange:nth-child(2) .arrange__items .arrange__item:nth-child(2) .arrange__item-name {
    max-width: 34.1862rem;
  }
}

.arrange:nth-child(3) .arrange__items .arrange__item:nth-child(1) .arrange__item-name {
  max-width: 47.5446rem;
}
@media screen and (min-width:768px) {
  .arrange:nth-child(3) .arrange__items .arrange__item:nth-child(1) .arrange__item-name {
    max-width: 36.0935rem;
  }
}

.arrange:nth-child(3) .arrange__items .arrange__item:nth-child(2) .arrange__item-name {
  max-width: 40.2549rem;
}
@media screen and (min-width:768px) {
  .arrange:nth-child(3) .arrange__items .arrange__item:nth-child(2) .arrange__item-name {
    max-width: 40.0711rem;
  }
}

.arrange__item-name {
  margin-top: 3.3rem;
}
@media screen and (min-width:768px) {
  .arrange__item-name {
    margin-top: 3.8rem;
  }
}

@media screen and (min-width:768px) {
  .arrange:nth-child(2) .arrange__items .arrange__item:nth-child(1) .arrange__item-name {
    margin-top: 4.6rem;
  }
}

@media screen and (max-width:767px) {
  .arrange:nth-child(1) .arrange__items .arrange__item:nth-child(1) .arrange__item-name,
  .arrange:nth-child(3) .arrange__items .arrange__item:nth-child(1) .arrange__item-name {
    margin-top: 2.7rem;
  }
}

.arrange__item-btn {
  width: 100%;
  max-width: 38.5rem;
  margin: 3.6rem auto 0;
}
@media screen and (min-width:768px) {
  .arrange__item-btn {
    max-width: 44.7rem;
    margin: 2.7rem auto 0;
  }
}

.contact {
  background-color: #fa6ea0;
  padding: 10.8rem 0 7.8rem;
  position: relative;
  overflow: hidden;
}
@media screen and (min-width:768px) {
  .contact {
    padding: 10.8rem 0 8.4rem;
  }
}

.contact::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 80.9853rem;
  background: url(../img/apple3-sp.png) repeat 17.4rem center/contain;
  left: 0;
  top: -5.5rem;
}
@media screen and (min-width:768px) {
  .contact::before {
    height: 80.1536rem;
    top: 50%;
    transform: translateY(-50%);
    background: url(../img/apple3-pc.png) repeat 7.6rem center/contain;
  }
}

.contact__head {
  width: 100%;
  max-width: 62.8265rem;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width:768px) {
  .contact__head {
    max-width: 66.7345rem;
  }
}

.contact__campaign {
  width: 100%;
  max-width: 62.3443rem;
  margin: 4.3rem auto 0;
  position: relative;
}
@media screen and (min-width:768px) {
  .contact__campaign {
    max-width: 62.3439rem;
    margin: 4.8rem auto 0;
  }
}

.contact__tel {
  width: 100%;
  max-width: 64.3255rem;
  margin: 1rem auto 0;
  position: relative;
}
@media screen and (min-width:768px) {
  .contact__tel {
    max-width: 67.4348rem;
    margin: 1.4rem auto 0;
  }
}

.contact__time {
  width: 100%;
  max-width: 50.3702rem;
  margin: 1.2rem auto 0;
  position: relative;
}
@media screen and (min-width:768px) {
  .contact__time {
    max-width: 53.5326rem;
    margin: 1.3rem auto 0;
  }
}

.contact__copy {
  position: relative;
}

.contact__copy-item:nth-child(1) {
  width: 100%;
  max-width: 47.8453rem;
  margin: 3.8rem auto 0;
}
@media screen and (min-width:768px) {
  .contact__copy-item:nth-child(1) {
    max-width: 46.7828rem;
    margin: 3.9rem auto 0;
  }
}

.contact__copy-item:nth-child(2) {
  width: 100%;
  max-width: 35.046rem;
  margin: 4.1rem auto 0;
}
@media screen and (min-width:768px) {
  .contact__copy-item:nth-child(2) {
    max-width: 34.2672rem;
    margin: 5rem auto 0;
  }
}

.contact__note {
  position: relative;
  text-align: center;
  line-height: 1;
  font-size: 2rem;
  margin-top: 2rem;
  color: #fff;
}
@media screen and (min-width:768px) {
  .contact__note {
    font-size: 1.7rem;
    margin-top: 1.4rem;
  }
}

.btn {
  position: fixed;
  width: 16.1872rem;
  aspect-ratio: 19.4069/17.9163;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease 0s;
}
@media screen and (min-width:768px) {
  .btn {
    width: 22.4069rem;
    right: 2rem;
    bottom: 2rem;
  }
}

.btn.show {
  opacity: 1;
  pointer-events: initial;
}