@charset "UTF-8";
*,
::before,
::after {
  --clamp-root-font-size: 16;
  --clamp-slope: calc(
    (var(--clamp-max) - var(--clamp-min)) /
      (var(--clamp-viewport-max) - var(--clamp-viewport-min))
  );
  --clamp-y-axis-intersection: calc(
    var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min))
  );
  --clamp-preffered-value: calc(
    var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) +
      (var(--clamp-slope) * 100vw)
  );
  --clamp: clamp(
    calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size))),
    var(--clamp-preffered-value),
    calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)))
  );
  font-size: var(--clamp);
}

:root {
  --font-regular: 400;
  --font-bold: 500;
  --inline-size: min(1200px, 100% - 4rem);
  --color-bg-green: #cbeee4;
  --color-text-gray: #666;
  --color-pink: #eb6671;
  --color-green: #77c4a5;
  --color-green-dark: #92d0b7;
  --gradation: linear-gradient(
    107deg,
    oklch(from var(--color-pink) l c h),
    oklch(from var(--color-green) l c h) 70%
  );
  --clamp-parallax: clamp(8rem, 0.17rem + 7.273vw, 9.375rem);
}

body {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  color: var(--color-text-gray);
  font-weight: var(--font-bold);
  text-autospace: nomal;
  line-break: strict;
  line-height: 1.8;
  letter-spacing: 0.08em;
  background-color: var(--color-bg-green);
  --clamp-viewport-min: 700;
  --clamp-viewport-max: 1200;
  --clamp-min: 16;
  --clamp-max: 20;
}
@media (min-width: 768px) {
  body {
    font-weight: var(--font-regular);
  }
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

a {
  transition: opacity 0.3s;
}
@media (any-hover: hover) {
  a:hover {
    opacity: 0.8;
  }
}
a:focus-visible {
  opacity: 0.8;
}

.header {
  container: header-layout/inline-size;
  display: grid;
  place-content: center;
  gap: 6rem;
  text-align: center;
  padding-top: 1rem;
  position: relative;
}
@media (min-width: 768px) {
  .header {
    padding-top: 3rem;
  }
}

.header-main {
  --clamp-min: 24;
  --clamp-max: 30;
  display: grid;
  place-content: center;
  place-items: center;
  row-gap: 3rem;
  grid-template-areas: "image01 image02" "title title" "image03 image04" "text text";
  font-weight: var(--font-bold);
}
@media (min-width: 768px) {
  .header-main {
    grid-template-areas: "image01 title image02" "image03 title image04" "image03 text image04";
    gap: 1rem;
  }
}
.header-main .main-title {
  grid-area: title;
}
.header-main .main-title img {
  width: 80%;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .header-main .main-title img {
    width: auto;
  }
}
.header-main .main-text {
  --clamp-min: 19;
  grid-area: text;
  width: min(100% - 4rem);
}
@container header-layout (min-width: 960px) {
  .header-main .main-text {
    margin-top: -4em;
    width: revert;
  }
}
.header-main .image01 {
  grid-area: image01;
  margin-left: auto;
}
@container header-layout (min-width: 1100px) {
  .header-main .image01 {
    translate: 2em 0;
  }
}
.header-main .image02 {
  grid-area: image02;
  margin-top: auto;
  margin-bottom: -1em;
  margin-left: auto;
  width: 80%;
}
@container header-layout (min-width: 768px) {
  .header-main .image02 {
    margin-top: revert;
    margin-left: revert;
  }
}
@container header-layout (min-width: 1100px) {
  .header-main .image02 {
    width: auto;
    margin-right: auto;
    translate: -1em 0;
  }
}
.header-main .image03 {
  grid-area: image03;
  margin-right: auto;
  margin-top: -1em;
  margin-bottom: auto;
  width: 80%;
}
@container header-layout (min-width: 768px) {
  .header-main .image03 {
    margin-right: revert;
    margin-bottom: revert;
  }
}
@container header-layout (min-width: 1100px) {
  .header-main .image03 {
    width: auto;
    margin-top: auto;
  }
}
.header-main .image04 {
  grid-area: image04;
}

.header-text {
  --clamp-max: 25;
  text-align: left;
  width: min(740px, 100% - 6rem);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .header-text {
    text-align: center;
  }
}

.cm-video h2 {
  --clamp-min: 28;
  --clamp-max: 48;
  --gradation: linear-gradient(
    140deg,
    oklch(from var(--color-pink) l c h) 40%,
    oklch(from var(--color-green) l c h) 60%
  );
  color: var(--color-green);
  font-weight: 500;
  letter-spacing: 0.1em;
  background: var(--gradation);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cm-video .wrap-container {
  display: grid;
  border: 2px solid transparent;
  border-radius: 10px;
  background: linear-gradient(var(--color-bg-green), var(--color-bg-green)) padding-box, var(--gradation) border-box;
  width: min(1280px, 100% - 2rem);
  margin-inline: auto;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .cm-video .wrap-container {
    grid-template-columns: 1fr 1fr;
    border: 3px solid transparent;
    border-radius: 30px;
  }
}
.cm-video .wrap-container .wrap {
  padding: 1.5rem;
}
.cm-video .wrap-container .wrap iframe {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}
.cm-video .wrap-container .wrap .openbutton,
.cm-video .wrap-container .wrap .closebutton {
  cursor: pointer;
  transition: 0.3s;
  --active-true: none;
  --active-false: initial;
}
@media (any-hover: hover) {
  .cm-video .wrap-container .wrap .openbutton:hover,
.cm-video .wrap-container .wrap .closebutton:hover {
    --active-true: initial;
    --active-false: none;
  }
}
.cm-video .wrap-container .wrap .openbutton:focus-visible,
.cm-video .wrap-container .wrap .closebutton:focus-visible {
  --active-true: initial;
  --active-false: none;
}
.cm-video .wrap-container .wrap .openbutton {
  display: grid;
  place-items: center;
  contain: strict;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 16/9;
}
.cm-video .wrap-container .wrap .openbutton .playbutton {
  z-index: 100;
  grid-area: 1/1;
  display: grid;
  place-content: center;
  width: 6em;
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
}
.cm-video .wrap-container .wrap .openbutton .playbutton::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 6em;
  background-color: var(--color-bg-green);
  -webkit-mask-image: url(../img/icon_playbutton.svg);
          mask-image: url(../img/icon_playbutton.svg);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.cm-video .wrap-container .wrap .openbutton .thumbnail {
  grid-area: 1/1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: var(--active-true, 0.8);
  transition: opacity 0.3s;
}
.cm-video .wrap-container .wrap dialog {
  inline-size: unset;
  max-inline-size: unset;
  block-size: unset;
  max-block-size: unset;
  padding: unset;
  margin: unset;
  color: unset;
  background-color: unset;
  border: unset;
  overflow: unset;
}
.cm-video .wrap-container .wrap dialog[open] {
  display: grid;
  place-content: center;
  grid-auto-columns: min(900px, 100%);
  gap: 1em;
  text-align: center;
  padding: 1rem;
  -webkit-animation: fadein 0.8s;
          animation: fadein 0.8s;
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
    translate: 0 50px;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
    translate: 0 50px;
  }
  100% {
    opacity: 1;
  }
}
.cm-video .wrap-container .wrap dialog::-webkit-backdrop {
  background-color: hsla(0deg, 0%, 14%, 0.3);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.cm-video .wrap-container .wrap dialog::backdrop {
  background-color: hsla(0deg, 0%, 14%, 0.3);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.cm-video .wrap-container .wrap .modaltitle {
  font-weight: 500;
  padding: 0.5em 1em;
  border-bottom: 2px solid transparent;
  background: linear-gradient(var(--color-bg-green), var(--color-bg-green)) padding-box, var(--gradation) border-box;
  position: relative;
}
.cm-video .wrap-container .wrap .modaltitle span {
  font-size: 0.8em;
}
.cm-video .wrap-container .wrap .modaltitle::after {
  content: "";
  inset: 0;
  background-color: var(--color-bg-green);
}
.cm-video .wrap-container .wrap .modalcontents {
  position: relative;
  z-index: -1;
}
.cm-video .wrap-container .wrap .modalcontents iframe {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 16/9;
}
.cm-video .wrap-container .wrap .closebutton {
  position: relative;
  z-index: -1;
  background-color: currentColor;
  inline-size: 3rem;
  border-radius: 50%;
  aspect-ratio: 1;
  opacity: var(--active-true, 0.8);
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.cm-video .wrap-container .wrap .closebutton span {
  display: none;
}
.cm-video .wrap-container .wrap .closebutton::before, .cm-video .wrap-container .wrap .closebutton::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  inline-size: 2rem;
  height: 2px;
  background-color: #fff;
  margin: auto;
}
.cm-video .wrap-container .wrap .closebutton::before {
  rotate: 45deg;
}
.cm-video .wrap-container .wrap .closebutton::after {
  rotate: -45deg;
}

.parallax img {
  width: var(--clamp-parallax);
  z-index: -1;
}
@media (min-width: 768px) {
  .parallax img {
    width: auto;
  }
}

.parallax01 {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-animation: var(--parallax-animation1);
          animation: var(--parallax-animation1);
}
@media (min-width: 768px) {
  .parallax01 {
    top: 2%;
    left: 40%;
  }
}

.parallax02 {
  position: absolute;
  top: 12%;
  left: 0;
  -webkit-animation: var(--parallax-animation2);
          animation: var(--parallax-animation2);
}
@media (min-width: 768px) {
  .parallax02 {
    right: 3%;
    left: revert;
  }
}

.parallax03 {
  position: absolute;
  top: 70%;
  left: 3%;
  -webkit-animation: var(--parallax-animation1);
          animation: var(--parallax-animation1);
}
@media (min-width: 768px) {
  .parallax03 {
    top: 20%;
  }
}

.parallax04 {
  position: absolute;
  top: 40%;
  left: 20%;
  -webkit-animation: var(--parallax-animation2);
          animation: var(--parallax-animation2);
}
@media (min-width: 768px) {
  .parallax04 {
    top: 50%;
  }
}

.parallax05 {
  position: absolute;
  top: 56%;
  right: 2%;
  -webkit-animation: var(--parallax-animation1);
          animation: var(--parallax-animation1);
}
@media (min-width: 768px) {
  .parallax05 {
    top: 50%;
    right: 8%;
  }
}

@media (min-width: 768px) {
  main {
    margin-top: 6rem;
  }
}

.overview {
  padding-inline: 1.5rem;
  margin-bottom: 5rem;
}
.overview .section-title {
  text-align: center;
  font-weight: 500;
  background-color: var(--color-bg-green);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 0.5rem;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .overview .section-title {
    padding-inline: 1.5rem;
  }
}
.overview .section-title p {
  --clamp-min: 11;
  --clamp-max: 16;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.overview .section-title p::before {
  content: url(../img/icon_title.svg);
}
.overview .section-title h2 {
  --clamp-min: 30;
  --clamp-max: 48;
  color: var(--color-pink);
  letter-spacing: 0.1em;
}
.overview .container {
  --border-gradation: linear-gradient(
    oklch(from var(--color-green) l c h),
    oklch(from var(--color-pink) l c h)
  );
  background-color: #fff;
  border-radius: 15px;
  padding: 2rem 1rem;
  position: relative;
  width: min(1200px, 100%);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .overview .container {
    border-radius: 40px;
    padding: 3rem 1.5rem;
  }
}
.overview .container::before, .overview .container::after {
  content: "";
  position: absolute;
  left: -15px;
  right: -15px;
  height: 25px;
  border: 2px solid transparent;
  background: var(--border-gradation) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-clip: content-box, border-box;
  -webkit-mask-composite: source-out;
  mask-composite: exclude;
}
@media (min-width: 768px) {
  .overview .container::before, .overview .container::after {
    border: 4px solid transparent;
    height: 80px;
    left: -30px;
    right: -30px;
  }
}
.overview .container::before {
  top: -30px;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom: none;
}
@media (min-width: 768px) {
  .overview .container::before {
    top: -45px;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
  }
}
.overview .container::after {
  bottom: -30px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  border-top: none;
}
@media (min-width: 768px) {
  .overview .container::after {
    bottom: -45px;
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px;
  }
}
.overview .container > * + * {
  margin-top: 3rem;
}
.overview .pattern01,
.overview .pattern02 {
  --border-gradation: linear-gradient(
    oklch(from var(--color-green) l c h),
    oklch(from var(--color-pink) l c h)
  );
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--border-gradation) border-box;
  width: min(960px, 100%);
  margin-inline: auto;
  border-radius: 10px;
  padding: 1rem;
}
@media (min-width: 768px) {
  .overview .pattern01,
.overview .pattern02 {
    border-radius: 40px;
    padding: 3rem 4rem;
  }
}
.overview .pattern01 > * + *,
.overview .pattern02 > * + * {
  margin-top: 1rem;
}
.overview .pattern02 {
  margin-top: 2rem;
}
.overview .pattern02-sample > * + * {
  margin-top: 1rem;
}
.overview .pattern02-sample h4 {
  text-align: center;
  font-weight: 500;
}
.overview h3 {
  --clamp-min: 17;
  --clamp-max: 26;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  color: var(--color-green);
  font-weight: 500;
}
.overview h3::before {
  content: url(../img/icon_title.svg);
}
.overview .pattern01 h3::before {
  content: "";
  width: 1.4em;
  aspect-ratio: 1;
  background-color: currentColor;
  -webkit-mask-image: url(../img/icon_camera.svg);
          mask-image: url(../img/icon_camera.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.overview .pattern02 h3::before {
  content: "";
  width: 1.2em;
  aspect-ratio: 1;
  background-color: currentColor;
  -webkit-mask-image: url(../img/icon_movie.svg);
          mask-image: url(../img/icon_movie.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.overview .form {
  --clamp-max: 25;
  color: #fff;
  text-align: center;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 10px;
  background-color: var(--color-pink);
  box-shadow: 0 0 3px #e5e5e5;
  padding: 1rem 1.5rem;
  width: min(500px, 100%);
  margin: 2rem auto 0;
  transition: opacity 0.3s;
  position: relative;
}
@media (min-width: 768px) {
  .overview .form {
    line-height: revert;
    border-radius: 15px;
    padding: 1.5rem 2rem;
  }
}
.overview .form::before {
  position: absolute;
  content: "";
  left: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2em;
  aspect-ratio: 1;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.overview .form::after {
  position: absolute;
  content: "";
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  aspect-ratio: 17/30;
  background-image: url(../img/icon_arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.overview .form span {
  font-size: 0.7em;
}
.overview .form-pattern01::before {
  -webkit-mask-image: url(../img/icon_camera.svg);
          mask-image: url(../img/icon_camera.svg);
}
.overview .form-pattern02::before {
  -webkit-mask-image: url(../img/icon_movie.svg);
          mask-image: url(../img/icon_movie.svg);
}
.overview .image {
  display: grid;
  gap: 0.5em;
}
@media (min-width: 768px) {
  .overview .image {
    grid-template-columns: 1fr 1fr;
  }
}
.overview .overview-list {
  --clamp-min: 15;
  --clamp-max: 18;
  list-style: square;
  margin-left: 0.8em;
}
.overview .overview-list li::marker {
  color: var(--color-green);
}

.notes {
  --clamp-min: 14;
  --clamp-max: 17;
}
.notes li {
  list-style: "※" inside;
  text-indent: 1em hanging;
}

.container > .notes {
  width: min(960px, 100%);
  margin-inline: auto;
}

.caution {
  width: var(--inline-size);
  margin-inline: auto;
  margin-top: 7rem;
}
.caution > * + * {
  margin-top: 1rem;
}
.caution h2 {
  --clamp-min: 22;
  --clamp-max: 34;
  letter-spacing: 0.1em;
  display: grid;
  align-items: center;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
}
@media (min-width: 768px) {
  .caution h2 {
    grid-template-columns: auto 1fr;
  }
}
.caution h2::after {
  content: "";
  border-bottom: dashed 1px;
}
.caution-list {
  list-style: square inside;
}
.caution h3 {
  font-weight: 500;
  display: grid;
  align-items: center;
  -moz-column-gap: 0.5em;
       column-gap: 0.5em;
}
@media (min-width: 768px) {
  .caution h3 {
    grid-template-columns: auto 1fr;
  }
}
.caution h3::after {
  content: "";
  border-bottom: dashed 1px;
}

.footer {
  display: grid;
  color: #fff;
  background-color: var(--color-green-dark);
  padding-block: 2rem;
}
.footer .container {
  display: grid;
  grid-template-areas: "list ." "wrap logo";
  grid-template-columns: auto minmax(90px, 100%);
  align-content: space-between;
  align-items: end;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  min-height: 250px;
  width: var(--inline-size);
  margin-inline: auto;
}
.footer-wrap {
  grid-area: wrap;
}
.footer-wrap .snsbtn {
  display: flex;
  gap: 0.8em;
}
.footer-wrap a {
  display: grid;
  place-items: center;
  width: 3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid transparent;
  background-image: linear-gradient(#fff, #fff), var(--gradation);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
@media (min-width: 768px) {
  .footer-wrap a {
    width: 4rem;
  }
}
.footer-wrap a img {
  width: 50%;
}
.footer .logo-rsk {
  grid-area: logo;
  margin-left: auto;
}
.footer .copyright {
  --clamp-min: 10;
  --clamp-max: 14;
  margin-top: 0.5rem;
}

#pagetop {
  display: block;
  position: -webkit-sticky;
  position: sticky;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  width: 20vw;
  margin-block: 1rem;
  margin-left: auto;
  transition: translate 0.3s;
}
@media screen and (min-width: 768px) {
  #pagetop {
    width: min(140px, 100%);
    margin-inline: auto 8vw;
  }
}
@media (any-hover: hover) {
  #pagetop:hover {
    opacity: revert;
    translate: 0 -5px;
  }
}
#pagetop:focus-visible {
  opacity: revert;
  translate: 0 -5px;
}

.back {
  display: grid;
  align-items: center;
  background-color: var(--color-green);
  color: #fff;
  text-align: center;
  font-weight: 500;
  border-radius: 10px;
  box-shadow: 0 0 3px #e5e5e5;
  padding: 1rem 1.5rem;
  width: min(500px, 100%);
  margin: 0.5rem auto;
  transition: opacity 0.3s;
}
@media (min-width: 768px) {
  .back {
    border-radius: 15px;
    padding: 1.5rem 2rem;
  }
}
/*# sourceMappingURL=style.css.map */