@charset "UTF-8";
/*================================================================
Chrome/Firefox/Edgeなど、各ブラウザはそれぞれデフォルトで効くCSSを持っています。
何もしないと見え方が微妙に変わるので、デフォルトのCSSをリセットして
ブラウザごとの表示の差異をなくすために書くのが「リセットCSS」です。
================================================================*/
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
}

header, footer, nav, section, article, aside, figure, figcaption {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
  list-style-type: none;
} 
body {
  background: #fff;
  font-family: "Noto Serif JP", serif;
}

a, span {
  display: inline-block;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: inline-block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (min-width: 767px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
.inner {
  width: 1180px;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 40px;
}
@media screen and (max-width: 767px) {
  .inner {
    padding-inline: min(4.1025641026vw, 16px);
  }
}

.inner.--narrow {
  width: 1080px;
}

.heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.heading__en {
  display: inline-block;
  background: linear-gradient(90deg, #97A1F0 0%, #703676 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Cormorant Garamond", serif;
  font-size: 70px;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .heading__en {
    font-size: min(12.8205128205vw, 50px);
  }
}
.--type2 .heading__en {
  color: #8FE5E6;
}
@media screen and (max-width: 767px) {
  .--type2 .heading__en {
    font-size: 54px;
  }
}

.heading__ja {
  display: inline-block;
  color: #420848;
  font-size: 24px;
  letter-spacing: 0.08em;
  margin-top: min(1.1111111111vw, 16px);
}
@media screen and (max-width: 767px) {
  .heading__ja {
    font-size: 20px;
    margin-top: 10px;
  }
}
.--type2 .heading__ja {
  color: #fff;
  font-size: 44px;
}
@media screen and (max-width: 767px) {
  .--type2 .heading__ja {
    font-size: 32px;
  }
}

.cta {
  text-align: center;
}

.cta__link img {
  width: 38.2638888889vw;
  aspect-ratio: 4.8333333333;
}
@media screen and (max-width: 767px) {
  .cta__link img {
    width: 91.7948717949vw;
    aspect-ratio: 4.8378378378;
  }
}

.bg-diagonal-line {
  background: url("./img/bg_diagonal-line-pc.webp") no-repeat center center/cover;
  padding-bottom: 13.8888888889vw;
}
@media screen and (max-width: 767px) {
  .bg-diagonal-line {
    background: url("./img/bg_diagonal-line-sp.webp") no-repeat center center/cover;
    padding-bottom: 17.9487179487vw;
  }
}

.common-sec {
  padding-top: min(9.5138888889vw, 137px);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .common-sec {
    padding-top: 17.9487179487vw;
  }
}
.common-sec img {
  width: 69.4444444444vw;
}
@media screen and (max-width: 767px) {
  .common-sec img {
    width: 92.3076923077vw;
  }
}

.header {
  margin-top: -10.5555555556vw;
  margin-left: -1.0416666667vw;
  overflow: hidden;
  position: relative;
  z-index: 3;
}
@media screen and (max-width: 767px) {
  .header {
    margin-top: -11.7948717949vw;
    margin-left: -3.8461538462vw;
  }
}
.header img {
  width: 81.5277777778vw;
}
@media screen and (max-width: 767px) {
  .header img {
    width: 116.1538461538vw;
  }
}

.fv {
  margin-top: -6.9444444444vw;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .fv {
    margin-top: -18.9743589744vw;
  }
}

.fv__img {
  position: relative;
}

.fv__title {
  position: absolute;
  top: 40.4861111111vw;
  left: 50%;
  translate: -50%;
}
@media screen and (max-width: 767px) {
  .fv__title {
    top: 105.1282051282vw;
  }
}
.fv__title img {
  width: 74.0972222222vw;
}
@media screen and (max-width: 767px) {
  .fv__title img {
    width: 100.2564102564vw;
  }
}

.fv__circles {
  position: absolute;
  top: 52.0833333333vw;
  left: 50%;
  translate: -50%;
}
@media screen and (max-width: 767px) {
  .fv__circles {
    top: 123.0769230769vw;
  }
}
.fv__circles img {
  width: 50.9722222222vw;
}
@media screen and (max-width: 767px) {
  .fv__circles img {
    width: 91.7948717949vw;
  }
}

.fv__cta {
  position: absolute;
  top: 65.9722222222vw;
  left: 50%;
  translate: -50%;
}
@media screen and (max-width: 767px) {
  .fv__cta {
    top: 150vw;
  }
}

.tokyo-online-work {
  margin-top: -11.8055555556vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  .tokyo-online-work {
    margin-top: -10.5128205128vw;
  }
}

.tokyo-online {
  width: 81.3888888889vw;
  height: auto;
  position: absolute;
  top: 15.8333333333vw;
  left: 50%;
  translate: -50%;
}
@media screen and (max-width: 767px) {
  .tokyo-online {
    width: 96.9230769231vw;
    aspect-ratio: 0.8852459016;
    top: 24.358974359vw;
  }
}

.tokyo-online__title {
  text-align: center;
}
.tokyo-online__title img {
  width: 38.8888888889vw;
}
@media screen and (max-width: 767px) {
  .tokyo-online__title img {
    width: 86.1538461538vw;
  }
}

.tokyo-online__img {
  margin-top: 1.1111111111vw;
  text-align: center;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .tokyo-online__img {
    margin-top: 4.6153846154vw;
  }
}
@media screen and (max-width: 767px) {
  .tokyo-online__img img {
    width: 102.8205128205vw;
    margin-left: -2.8205128205vw;
  }
}

.work {
  width: 96.7361111111vw;
  height: auto;
  aspect-ratio: 2.2359550562;
  position: absolute;
  top: 69.2361111111vw;
  left: 50%;
  translate: -50%;
}
@media screen and (max-width: 767px) {
  .work {
    width: 91.7948717949vw;
    aspect-ratio: 0.301600674;
    top: 152.3076923077vw;
  }
}

.work__title {
  text-align: center;
}
.work__title img {
  width: 26.3194444444vw;
}
@media screen and (max-width: 767px) {
  .work__title img {
    width: 66.6666666667vw;
  }
}

.work__img {
  margin-top: 3.5416666667vw;
}
@media screen and (max-width: 767px) {
  .work__img {
    margin-top: 10.2564102564vw;
  }
}

.members {
  margin-top: -9.3055555556vw;
}
@media screen and (max-width: 767px) {
  .members {
    margin-top: -8.9743589744vw;
  }
}

.about {
  width: 100%;
  aspect-ratio: 1.6326530612;
  margin-top: -15.4861111111vw;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .about {
    aspect-ratio: 0.5652173913;
    margin-top: -11.0256410256vw;
  }
}
.about img {
  width: 112.8472222222vw;
  aspect-ratio: 1.8403171008;
  position: absolute;
  top: 0;
  left: 49.4%;
  translate: -50%;
}
@media screen and (max-width: 767px) {
  .about img {
    width: 126.4102564103vw;
    aspect-ratio: 0.7144927536;
    left: 50%;
  }
}

.rewards {
  aspect-ratio: 0.8780487805;
  margin-top: -7.5vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  .rewards {
    margin-top: -23.8461538462vw;
    aspect-ratio: 0.3519855596;
  }
}

.rewards__cta {
  position: absolute;
  top: 77.5694444444vw;
  left: 50%;
  translate: -50%;
}
@media screen and (max-width: 767px) {
  .rewards__cta {
    top: 199.2307692308vw;
  }
}

.produce {
  width: 100%;
  aspect-ratio: 1.630804077;
  margin-top: -20.4861111111vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  .produce {
    margin-top: -46.6666666667vw;
    aspect-ratio: 0.5145118734;
  }
}

.produce__title {
  width: 7.2916666667vw;
  position: absolute;
  top: 2.5694444444vw;
  left: -0.4861111111vw;
}
@media screen and (max-width: 767px) {
  .produce__title {
    width: 43.0769230769vw;
    top: 22.5641025641vw;
    left: unset;
    right: 4.6153846154vw;
    z-index: 2;
  }
}

.produce__img {
  width: 34.8611111111vw;
  position: absolute;
  top: 11.1111111111vw;
  left: 11.8055555556vw;
}
@media screen and (max-width: 767px) {
  .produce__img {
    width: 91.7948717949vw;
    top: 14.358974359vw;
    left: 50%;
    translate: -50%;
  }
}

.produce__desc {
  width: 37.9861111111vw;
  position: absolute;
  top: 12.3611111111vw;
  right: 9.5833333333vw;
}
@media screen and (max-width: 767px) {
  .produce__desc {
    width: 91.7948717949vw;
    top: 76.9230769231vw;
    left: 50%;
    translate: -50%;
  }
}

.agency {
  margin-top: -11.8055555556vw;
}
@media screen and (max-width: 767px) {
  .agency {
    margin-top: -11.2820512821vw;
  }
}

.conditions {
  padding-top: 11.6666666667vw;
}
@media screen and (max-width: 767px) {
  .conditions {
    padding-top: 18.2051282051vw;
  }
}

.footer {
  margin-top: -6.9444444444vw;
  position: relative;
}
.footer.--privacy-policy {
  margin-top: 63px;
}
@media screen and (max-width: 767px) {
  .footer {
    margin-top: -2.5641025641vw;
  }
}
.footer.--privacy-policy {
  margin-top: 63px;
}
@media screen and (max-width: 767px) {
  .footer.--privacy-policy {
    margin-top: 52px;
  }
}

.footer__cta {
  position: absolute;
  top: 34.5833333333vw;
  left: 50%;
  translate: -50%;
}
@media screen and (max-width: 767px) {
  .footer__cta {
    top: 58.7179487179vw;
  }
}

.footer__txt {
  color: #8FE5E6;
  font-size: max(0.9722222222vw, 14px);
  letter-spacing: 0.08em;
  line-height: 1.4285714286;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 2.3611111111vw;
  left: 48.2%;
  translate: -50%;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .footer__txt {
    font-size: min(1.5625vw, 14px);
  }
}
@media screen and (max-width: 767px) {
  .footer__txt {
    font-size: min(3.0769230769vw, 16px);
    flex-direction: column;
    row-gap: min(3.3333333333vw, 13px);
    white-space: nowrap;
    left: 50.4%;
    bottom: 7.4358974359vw;
    text-align: center;
  }
}
.--privacy-policy .footer__txt {
  left: 48%;
  bottom: 4.375vw;
}
@media screen and (max-width: 767px) {
  .--privacy-policy .footer__txt {
    left: 50.8%;
    bottom: 8.9743589744vw;
  }
}

.footer__company {
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  .footer__name {
    margin-left: -4.7222222222vw;
  }
}

.footer__contact {
  margin-left: 5.6944444444vw;
  margin-right: 18.75vw;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .footer__contact {
    margin-inline: max(3.2552083333vw, 25px);
  }
}
@media screen and (max-width: 767px) {
  .footer__contact {
    margin-inline: auto;
  }
}

.footer__copyright {
  flex-shrink: 0;
}
.footer__copyright a {
  text-decoration: underline;
}
@media screen and (max-width: 767px) {
  .footer__copyright a {
    letter-spacing: 0.3em;
  }
}
@media screen and (max-width: 767px) {
  .footer__copyright p {
    margin-top: 4.1025641026vw;
  }
}

.privacy-policy {
  font-size: 14px;
  font-family: "Noto Sans JP", sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.6;
  margin-top: 63px;
}
@media screen and (max-width: 767px) {
  .privacy-policy {
    margin-top: 33px;
  }
}

.privacy-policy__inner {
  width: 880px;
}
@media screen and (max-width: 767px) {
  .privacy-policy__inner {
    padding-inline: min(7.0512820513vw, 27.5px);
  }
}

.privacy-policy__heading {
  font-size: clamp(24px, 2.0833333333vw, 30px);
  font-weight: 900;
  text-align: center;
}

.privacy-policy__desc {
  line-height: 1.8;
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .privacy-policy__desc {
    margin-top: 23px;
  }
}

.privacy-policy__boxes {
  margin-top: 24px;
  padding-bottom: 45px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .privacy-policy__boxes {
    padding-bottom: 43px;
  }
}
.privacy-policy__boxes::before {
  content: "";
  background: rgba(34, 34, 34, 0.3);
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
}

.privacy-policy__box:nth-of-type(n + 2) {
  margin-top: 22px;
}
@media screen and (max-width: 767px) {
  .privacy-policy__box:nth-of-type(n + 2) {
    margin-top: 21px;
  }
}

.privacy-policy__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  position: relative;
}
.privacy-policy__title::before {
  content: "";
  background: #222;
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: -7px;
}

.privacy-policy__txt {
  padding-top: 22px;
}

.privacy-policy__txt-item {
  padding-left: 20px;
  position: relative;
}
.privacy-policy__txt-item::before {
  content: "・";
  position: absolute;
  left: 4px;
}

.privacy-policy__contact {
  letter-spacing: 0.03em;
  margin-top: 41px;
}/*# sourceMappingURL=style.css.map */