@charset "utf-8";

:root {
  --u: min(1px, 100vw / 1920);
  --q: min(1px, 100vw / 1280);
}

html {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: calc(16 * var(--u));
}

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

img {
  width: 100%;
  vertical-align: top;
}

ul,
ol {
  list-style: none;
}

.animate__animated {
  opacity: 0;
  transform: translateY(50px);
  transition: transform 1.5s ease, opacity 1.5s ease;

}

.animate__animated--notraslate {
  transform: translateY(0);
}

.animate__fadeInUp {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------
    Header
-------------------------------------------------------------- */

.header {
  padding-inline: 1em;
}

.header__inner {
  max-width: calc(1200 * var(--q));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.header__logo {
  position: absolute;
  top: 0;
  left: calc(60 * var(--q));
  width: 150px;
  height: 142px;
  background-color: #000;
  border-radius: 0 0 10px 10px;
  padding-top: 76px;
}

.header__logo-image {
  display: block;
  margin: auto auto;
  width: 113px;
}

.header__btn {
  position: fixed;
  width: 100%;
  max-width: calc(1200 * var(--q));
  line-height: 48px;
  margin: auto;
  padding-right: 2em;
  top: 40px;
}

.header__btn-link {
  width: 258px;
  height: 48px;
  background: linear-gradient(45deg, rgba(255, 130, 170, 1) 0%, rgba(117, 200, 255, 1) 100%);
  margin-left: auto;
  border-radius: 5px;
}

.header__btn-link-a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 258px;
  height: 48px;
  font-size: 17px;
  color: white;
  text-align: center;
  line-height: 1;
  background: url(../images/icon-file.webp) no-repeat top 13px left 20px / auto 22px;
  padding-left: 25px;
}

@media (max-width: 768px) {
  .header {
    padding-inline: 0;

  }

  .header__inner {
    width: calc(637vw / 7.5);
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .header__logo {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(212vw / 7.5);
    height: calc(136vw / 7.5);
    background-color: #000;
    border-radius: 0 0 calc(17vw / 7.5) calc(17vw / 7.5);
    padding-top: calc(46vw / 7.5);
  }

  .header__logo-image {
    display: block;
    margin: auto auto;
    width: calc(160vw / 7.5);
  }

  .header__btn {
    position: fixed;
    width: calc(636vw / 7.5);
    line-height: calc(70vw / 7.5);
    margin: auto;
    padding: 0;
    top: 40px;
  }

  .header__btn-link {
    display: block;
    font-size: 20px;
    color: white;
    text-align: center;
    width: calc(245vw /7.5);
    height: calc(72vw /7.5);
    background: linear-gradient(45deg, rgba(255, 130, 170, 1) 0%, rgba(117, 200, 255, 1) 100%);
    margin-left: auto;
    border-radius: 5px;
  }

  .header__btn-link-a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(244vw /7.5);
    height: calc(72vw / 7.5);
    font-size: calc(26vw / 7.5);
    color: white;
    text-align: center;
    line-height: 1;
    background: url(../images/icon-file.webp) no-repeat top calc(19vw /7.5) left calc(30vw /7.5) / auto calc(31vw /7.5);
    padding-left: calc(36vw /7.5);
  }

  .header__btn-pc {
    display: none;
  }

}

/* --------------------------------------------------------------
    Main Visual
-------------------------------------------------------------- */

.mv {
  --y: min(1px, 100vh / 900);
  --o: min(var(--y), var(--u));

  /* max-width: calc(1920 * var(--u)); */
  max-width: 1920px;
  width: 100%;
  height: 100vh;
  position: relative;
  margin-inline: auto;
  overflow-x: hidden;
}

.mv__swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.mv__swiper .swiper {
  z-index: -2;
  /* position: absolute;
  width: calc(1920 * var(--u));
  height: calc(900 * var(--o));
  left: min(0px, 50% - calc(960 * var(--u))); */
  width: 100%;
  height: 100vh;
}

.mv__swiper .swiper img {
  height: 100vh;
  width: 100%;
  object-fit: cover;
}

.mv__corner {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(1255 * var(--o));
  height: calc(526 * var(--o));
  background-color: #fff;
  clip-path: polygon(101% 0, 101% 100%, 0 100%);
}

.mv__backcolor {
  width: 100%;
  background-color: rgb(255, 255, 255, 0.3);
  margin-top: auto;
  position: absolute;
  bottom: 0;
}

.mv__inner-box {
  width: calc(1100 * var(--q));
  height: calc(305 * var(--q));
  margin: 0 auto;
  position: relative;

}

.mv__lead-img {
  display: block;
  width: calc(541 * var(--q));
}

.mv__campaign-img {
  display: block;
  width: calc(640 * var(--q));
  margin-top: calc(-30 * var(--q));
}

.mv__illust-img {
  width: calc(706 * var(--q));
  position: absolute;
  bottom: 0;
  right: calc(-180 * var(--q));
}

@media (max-width: 768px) {
  .mv {
    height: 99vh;
    height: 99dvh;
    max-width: unset;
    min-height: calc(100vw + 280vw / 7.5);
    /* max-height: calc(1180vw / 7.5); */
    position: relative;
    margin-inline: auto;
    overflow-x: visible;
  }

  .mv__swiper {
    width: 100%;
    height: 100vh;
    aspect-ratio: 5 / 6;
    min-height: 100vw;
    /* max-height: calc(942vw / 7.5); */
    position: relative;
    overflow: hidden;
  }

  .mv__swiper .swiper {
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
  }

  .mv__corner {
    position: absolute;
    bottom: calc(265vw / 7.5);
    left: unset;
    right: 0;
    width: 110%;
    background-color: rgb(255, 255, 255, 0.8);
    height: calc(352vw / 7.5);
  }

  .mv__bottom-cover {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(265vw / 7.5);
    background-color: #fff;
    z-index: -1;
  }

  .mv__backcolor {
    width: 100%;
    background-color: unset;
    margin-top: auto;
    position: absolute;
    bottom: 0;
  }

  .mv__inner-box {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;

  }

  .mv__lead-img {
    width: 100%;
    margin-bottom: calc(275vw / 7.5);
  }

  .mv__campaign-img {
    display: block;
    width: auto;
    height: calc(235vw / 7.5);
    margin-inline: auto;
  }

  .mv__illust-img {
    width: calc(534vw / 7.5);
    position: absolute;
    bottom: calc(260vw / 7.5);
    right: 0;
  }
}

/* --------------------------------------------------------------
    YouTube
-------------------------------------------------------------- */

.movie {
  display: none;
  margin-top: calc(140 * var(--u));
}

.movie__inner {
  width: calc(1100 * var(--u));
  margin: 0 auto;
}

.movie__recommend-text {
  font-size: calc(27 * var(--u));
  text-align: center;
  line-height: 1;
}

.movie__youtube {
  margin-top: calc(70 * var(--u));
  height: calc(618 * var(--u));
  background-color: gray;
}

@media (max-width: 768px) {
  .movie {
    margin-top: calc(30vw / 7.5);
    border-top: calc(2vw / 7.5) solid #d7d7d7;
  }

  .movie__inner {
    width: calc(680vw / 7.5);
  }

  .movie__recommend-text {
    margin-top: calc(60vw / 7.5);
    font-size: calc(27vw / 7.5);
  }

  .movie__youtube {
    width: calc(680vw / 7.5);
    height: calc(392vw / 7.5);
    margin-top: calc(26vw / 7.5);
  }
}

/* --------------------------------------------------------------
    Our Policy
-------------------------------------------------------------- */

.ourpolicy {
  position: relative;
  --y: min(1px, 100vh / 874);
  --o: min(var(--y), var(--q));
}

.outpolicy__item {
  position: sticky;
  top: 0;
  padding-top: calc(50 * var(--o));
  background-color: #fff;
}

.ourpolicy__item--dummy {
  height: 150vh;
}

.outpolicy__item--first {
  margin-top: calc(120 * var(--o));
}

.outpolicy__border01,
.outpolicy__border02,
.outpolicy__border03 {
  border: #b4b4c8 solid 1px;
}

.ourpolicy__title {
  display: flex;
  width: calc(1200 * var(--o));
  height: calc(87 * var(--o));
  margin: 0 auto;
  align-items: center;
}

.ourpolicy__title-img {
  width: calc(276 * var(--o));
}

.ourpolicy__title-text {
  display: block;
  font-size: calc(25 * var(--o));
  color: #5a5a5a;
  font-weight: 400;
  margin-left: calc(20 * var(--o));
}

.ourpolicy__text-thin {
  font-weight: 300;
}

.ourpolicy__content {
  height: 150vh;
  min-height: calc(670 * var(--o));
  margin-top: calc(40 * var(--o));
  background-color: #d2dcf0;
}

.ourpolicy__content--type2 {
  background-color: #ccf1fc;
}

.ourpolicy__content--type3 {
  background-color: #fadce9;
  height: calc(100vh - 160 * var(--o));
}

.ourpolicy__content-inner {
  width: calc(1200 * var(--o));
  height: 100%;
  max-height: calc(100vh - 181 * var(--o));
  margin: 0 auto;
  padding-top: 0;
  display: flex;
  flex-flow: row;
  align-items: center;
}

.ourpolicy__image {
  position: relative;
  width: calc(570 * var(--o));
  height: 100%;
}

.ourpolicy__content-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ourpolicy__text-box {
  display: flex;
  flex-direction: column;
  width: calc(630 * var(--o));
  padding: min(5vh, 105 * var(--o)) 0 calc(50 * var(--o)) calc(85 * var(--o));
}

.ourpolicy__content-title {
  width: fit-content;
  font-size: calc(42 * var(--o));
  background: linear-gradient(to right, #e85298 0%, #2ea3dc 100%);
  background-clip: text;
  color: transparent;
}

.ourpolicy__content-sub-title {
  font-size: calc(26 * var(--o));
  color: #5a5a5a;
  margin-top: calc(15 * var(--o));
}

.ourpolicy__content-text {
  font-size: calc(16 * var(--o));
  line-height: 2;
  color: #5a5a5a;
  margin-top: calc(20 * var(--o));
}

.ourpolicy__emphasis1 {
  color: #ff5a5a;
  font-weight: bold;
  text-decoration: underline;
}

.ourpolicy__emphasis2 {
  color: #ff5a5a;
  font-weight: bold;
}

.ourpolicy__content-merit {
  display: flex;
  margin-top: 0;
  padding-top: calc(30 * var(--o));
}

@media (max-width: 768px) {
  .outpolicy__item {
    position: static;
    padding-top: 0;
  }

  .ourpolicy__item--dummy {
    display: none;
  }

  .outpolicy__item--first {
    margin-top: 0;
  }

  .outpolicy__border01,
  .outpolicy__border02,
  .outpolicy__border03 {
    display: none;
  }

  .ourpolicy__title {
    display: block;
    width: 100%;
    height: auto;
    padding-top: calc(80vw / 7.5);
    text-align: center;
  }

  .ourpolicy__title-img {
    width: calc(380vw / 7.5);
  }

  .ourpolicy__title-text {
    margin-top: calc(16vw / 7.5);
    margin-left: 0;
    font-size: calc(26vw / 7.5);
  }

  .ourpolicy__content {
    height: auto;
    min-height: unset;
    margin-top: calc(18vw / 7.5);
  }

  .ourpolicy__content--type3 {
    height: unset;
  }

  .ourpolicy__content-inner {
    display: block;
    width: 100%;
    height: unset;
    max-height: unset;
    padding-top: 0;
  }

  .ourpolicy__image {
    max-width: unset;
    width: unset;
    height: unset;
  }

  .ourpolicy__content-img {
    position: static;
    width: 100%;
    height: auto;
  }

  .ourpolicy__text-box {
    width: 100%;
    height: unset;
    min-height: unset;
    padding: calc(78vw / 7.5) calc(54vw / 7.5) calc(34vw / 7.5);
    align-items: center;
  }

  .ourpolicy__content-title {
    order: 2;
    margin-top: calc(10vw / 7.5);
    font-size: calc(60vw / 7.5);
    text-align: center;
  }

  .ourpolicy__content-sub-title {
    order: 1;
    font-size: calc(30vw / 7.5);
    color: #5a5a5a;
    margin-top: 0;
    text-align: center;
  }

  .ourpolicy__content-text {
    order: 3;
    font-size: calc(26vw / 7.5);
    margin-top: calc(25vw / 7.5);
  }

  .ourpolicy__content-text--narrow {
    letter-spacing: -0.05em;
  }

  .ourpolicy__content-merit {
    order: 4;
    display: block;
    margin-top: calc(48vw / 7.5);
    padding-top: 0;
  }
}


/* OUR POLICYのmeritカード */
.merit-card {
  position: relative;
  width: calc(540 * var(--o));
  height: calc(138 * var(--o));
  padding: calc(27 * var(--o)) calc(145 * var(--o)) 0 calc(163 * var(--o));
  background-color: #fffbc7;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;
  color: #5a5a5a;
}

.merit-card--type1 {
  background-image: url(../images/policy-img01-1.webp);
}

.merit-card--type2 {
  background-image: url(../images/policy-img02-1.webp);
  background-position-x: right calc(20 * var(--o));
}

.merit-card--type3 {
  background-image: url(../images/policy-img03-1.webp);
}

.merit-card__tag {
  position: absolute;
  top: calc(23 * var(--o));
  left: calc(23 * var(--o));
  width: calc(115 * var(--o));
  height: calc(115 * var(--o));
  padding: calc(18 * var(--o));
  background-color: #5a5a5a;

  aspect-ratio: 1 / 1;
}

.merit-card__tag-img {
  width: calc(55 * var(--o));
}

.merit-card__content {
  display: flex;
  flex-direction: column;
  row-gap: calc(15 * var(--o));
}

.merit-card__title {
  margin: 0;
  font-size: calc(22 * var(--o));
  line-height: 1;
}

.merit-card__text {
  margin: 0;
  font-size: calc(12 * var(--o));
  line-height: 1.6;
}

@media (max-width: 768px) {
  .merit-card {
    width: calc(640vw / 7.5);
    height: calc(260vw / 7.5);
    padding: calc(22vw / 7.5) 0 0 0;
    background-position: right bottom calc(12vw / 7.5);
    background-size: auto calc(225vw / 7.5);
  }

  .merit-card--type1 {
    background-image: url(../images/sp/policy-img01-1.webp);
  }

  .merit-card--type2 {
    height: calc(220vw / 7.5);
    background-image: url(../images/sp/policy-img02-1.webp);
    background-position-x: right calc(20vw / 7.5);
    background-size: auto calc(190vw / 7.5);
  }

  .merit-card--type3 {
    height: calc(220vw / 7.5);
    background-image: url(../images/sp/policy-img03-1.webp);
    background-size: auto calc(210vw / 7.5);
  }

  .merit-card__tag {
    top: 0;
    left: 0;
    width: calc(132vw / 7.5);
    height: calc(64vw / 7.5);
    padding: calc(25vw / 7.5) 0 0 calc(40vw / 7.5);
  }

  .merit-card__tag-img {
    width: calc(66vw / 7.5);
  }

  .merit-card__content {
    row-gap: calc(15vw / 7.5);
  }

  .merit-card__title {
    padding-left: calc(150vw / 7.5);
    font-size: calc(30vw / 7.5);
  }

  .merit-card__text {
    padding: calc(13vw / 7.5) calc(160vw / 7.5) 0 calc(40vw / 7.5);
    font-size: calc(26vw / 7.5);
    line-height: 1.5;
  }
}

/* --------------------------------------------------------------
    Works
-------------------------------------------------------------- */

.works {
  background: url(../images/bg-works.webp) no-repeat top center/calc(1920 * var(--u)) auto;
}

.works__inner {
  --u: min(1px, 100vw / 1520);
  width: calc(1280 * var(--u));
  margin: 0 auto;
  padding: calc(100 * var(--q)) calc(40 * var(--q)) 0 calc(40 * var(--q));

}

.works__title {
  height: calc(93 * var(--q));
  display: flex;
  align-items: center;
  border-top: 2px #d7d7d7 solid;
  border-bottom: 2px #d7d7d7 solid;
  font-size: 0;
}

.works__title-img {
  width: calc(177 * var(--q));
  margin: 0 auto;
}

.works__sub-title {
  font-size: calc(23 * var(--q));
  color: #5a5a5a;
  border-bottom: 2px #d7d7d7 solid;
  text-align: center;
  line-height: 2;
}

.works__content {
  padding-top: calc(40 * var(--u));
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  row-gap: calc(90 * var(--u));
}
.works__block {
  display: none;
}

.works__block--show {
  display: block;
  padding-top: calc(80 * var(--u));
}


.works__content-box {
  width: calc(347 * var(--u));
  color: #5a5a5a;
  position: relative;
}

.works__content-img {
  width: 100%;
  transition: opacity 0.35s ease;
}

.works__content-box:hover .works__content-img {
  opacity: 0;
}

.works__content-img--hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.works__content-box:hover .works__content-img--hover {
  opacity: 1;
  transform: unset;
}

.works__content-text {
  display: flex;
  justify-content: space-between;
  padding-top: calc(28 * var(--u));
}

@media (max-width: 1280px) {
  .works__content-text {
    flex-direction: column;
    gap: 5px;
  }
}

.works__customer {
  /* font-size: calc(16 * var(--u)); */
  font-size: 16px;
  font-weight: bold;
  /* padding-right: calc(100 * var(--u)); */
}

.works__main-text {
  /* font-size: calc(15 * var(--u)); */
  font-size: 15px;
  margin-top: calc(28 * var(--u));
}

.works__type {
  /* position: absolute; */
  /* top: calc(28 * var(--u)); */
  /* right: 0; */
  /* font-size: calc(14 * var(--u)); */
  font-size: 14px;
  /* width: calc(93 * var(--u)); */
  width: 93px;
  line-height: 1.7;
  text-align: center;
  background-color: #f7f7f9;
}

.works__more-btn-area {
  margin: calc(40 * var(--u)) auto 0 auto;
  width: 245px;
}

.works__more-btn {
  position: relative;
  text-decoration: none;
  color: #878787;
  font-size: 21px;
  background: url(../images/works-btn-more.svg) center right no-repeat;
  padding-right: 35px;
}

.works__more-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -140px;
  width: 120px;
  height: 2px;
  background-color: #b4b4c8;
}

.works__more-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -140px;
  width: 120px;
  height: 2px;
  background-color: #b4b4c8;
}

@media (max-width: 768px) {
  .works {
    background: unset;
    padding-top: 0;
  }

  .works__inner {
    width: 100%;
    padding: 0;
  }

  .works__title {
    width: 100%;
    height: calc(100vw / 7.5);
    margin: calc(70vw / 7.5) auto 0 auto;
    display: flex;
    align-items: center;
    border-top: calc(2vw / 7.5) #d7d7d7 solid;
    border-bottom: calc(2vw / 7.5) #d7d7d7 solid;
  }

  .works__title-img {
    width: calc(234vw / 7.5);
    margin: 0 auto;
  }

  .works__sub-title {
    font-size: calc(23vw / 7.5);
    color: #5a5a5a;
    border-bottom: calc(2vw / 7.5) #d7d7d7 solid;
    text-align: center;
    line-height: 2.8;
  }

  .works__content {
    padding-top: calc(48vw / 7.5);
    display: flex;
    flex-flow: column nowrap;
    justify-content: unset;
    align-items: center;
    row-gap: calc(92vw / 7.5);
  }

  .works__content-box {
    width: calc(640vw / 7.5);
    color: #5a5a5a;
  }

  .works__content-box:hover .works__content-img {
    opacity: 1;
  }

  .works__content-img {
    width: calc(640vw / 7.5);
    transition: unset;
  }

  .works__content-img--hover {
    display: none;
  }

  .works__content-text {
    position: relative;
    padding-top: calc(32vw / 7.5);
  }

  .works__customer {
    font-size: calc(32vw / 7.5);
    font-weight: 500;
  }

  .works__main-text {
    font-size: calc(26vw / 7.5);
    margin-top: calc(32vw / 7.5);
  }

  .works__type {
    position: absolute;
    top: calc(28vw / 7.5);
    right: 0;
    font-size: calc(26vw / 7.5);
    width: calc(186vw / 7.5);
    line-height: 1.9;
    text-align: center;
    background-color: #f7f7f9;
  }

  .works__type--narrow {
    width: calc(150vw / 7.5);
  }

  .works__more-btn-area {
    margin: 0;
    width: 100%;
  }

  .works__more-btn {
    display: block;
    width: calc(340vw / 7.5);
    position: relative;
    text-decoration: none;
    color: #878787;
    margin: calc(55vw / 7.5) auto 0 auto;
    font-size: calc(30vw / 7.5);
    background: url(../images/works-btn-more.svg) center right no-repeat;
    background-size: calc(32vw / 7.5);
    padding-right: calc(40vw / 7.5);
  }

  .works__more-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-158vw / 7.5);
    width: calc(138vw / 7.5);
    height: calc(4vw / 7.5);
    background-color: #b4b4c8;
  }

  .works__more-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-158vw / 7.5);
    width: calc(138vw / 7.5);
    height: calc(4vw / 7.5);
    background-color: #b4b4c8;
  }
}

/* --------------------------------------------------------------
    Banners
-------------------------------------------------------------- */

.banners {
  margin-top: calc(178 * var(--q));
  color: #5a5a5a;
}

.banners__inner {
  width: calc(1200 * var(--q));
  margin-inline: auto;
}

.banners__title {
  border-top: 2px solid #d7d7d7;
  border-bottom: 2px solid #d7d7d7;
  padding: calc(16 * var(--q)) 0;
  font-size: calc(23 * var(--q));
  font-weight: normal;
  text-align: center;
  line-height: 1;
}

.banners__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: calc(120 * var(--q));
  row-gap: calc(48 * var(--q));
  padding-inline: calc(50 * var(--q));
  margin-top: calc(65 * var(--q));
  margin-inline: auto;
}

.banners__item {
  width: calc(180 * var(--q));
  text-align: center;
}

.banners__image {
  display: flex;
  align-items: center;
  width: calc(180 * var(--q));
  height: auto;
  padding-bottom: calc(7 * var(--q));
}

.banners__name {
  font-size: calc(12 * var(--q));
  line-height: 1;
}

@media (max-width: 768px) {
  .banners {
    margin-top: calc(114vw / 7.5);
  }

  .banners__inner {
    width: unset;
    padding-inline: calc(54vw / 7.5);
  }

  .banners__title {
    border-top: calc(2vw / 7.5) solid #d7d7d7;
    border-bottom: calc(2vw / 7.5) solid #d7d7d7;
    padding: calc(16vw / 7.5) 0;
    font-size: calc(34vw / 7.5);
  }

  .banners__list {
    justify-content: space-around;
    column-gap: unset;
    row-gap: calc(66vw / 7.5);
    padding-inline: 0;
    margin-top: calc(44vw / 7.5);
  }

  .banners__item {
    width: calc(220vw / 7.5);
  }

  .banners__image {
    display: block;
    width: calc(220vw / 7.5);
    height: unset;
    padding-bottom: 0;
  }

  .banners__name {
    display: none;
  }
}

/* --------------------------------------------------------------
    Block Footer
-------------------------------------------------------------- */

.block-footer {
  position: relative;
  margin-top: calc(178 * var(--u));
  height: calc(345 * var(--u));
}

.block-footer__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0);
}

.block-footer__inner::before {
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  position: fixed;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;  
}

.block-footer--type1 .block-footer__inner::before {
  background-image: url(../images/sub-title-img01.webp);
}

.block-footer--type2 .block-footer__inner::before {
  background-image: url(../images/sub-title-img02.webp);
}

.block-footer--type3 .block-footer__inner::before {
  background-image: url(../images/sub-title-img03.webp);
}

@media (max-width: 768px) {
  .block-footer {
    margin-top: calc(114vw / 7.5);
    padding-bottom: calc(280vw / 7.5);
  }

  .block-footer--type1 .block-footer__inner::before {
    background-image: url(../images/sp/sub-title-img01.webp);
  }

  .block-footer--type2 .block-footer__inner::before {
    background-image: url(../images/sp/sub-title-img02.webp);
  }

  .block-footer--type3 .block-footer__inner::before {
    background-image: url(../images/sp/sub-title-img03.webp);
  }
}

/* --------------------------------------------------------------
    Design Fee
-------------------------------------------------------------- */

.fee {
  background: url(../images/bg-design.webp) no-repeat center top/calc(1920 * var(--u)) auto;
  font-family: Jost, "Noto Sans JP", sans-serif;
  padding-top: calc(100 * var(--u));
  color: #5a5a5a;
}

.fee__inner {
  --u: min(1px, 100vw / 1520);

  width: calc(1200 * var(--u));
  margin-inline: auto;
}

.fee__title {
  border-top: 2px solid #d7d7d7;
  border-bottom: 2px solid #d7d7d7;
  padding: calc(28 * var(--q)) 0;
  text-align: center;
  font-size: 0;
}

.fee__subtitle {
  padding: calc(10 * var(--q)) 0;
  font-size: calc(23 * var(--q));
  text-align: center;
  border-bottom: 2px solid #d7d7d7;
}

.fee__img {
  width: calc(267 * var(--q));
}

.fee__categories {
  position: relative;
}

.fee__categories--option {
  margin-top: calc(80 * var(--u));
}

.fee__category {
  height: 52px;
  padding: 5px;
  margin-top: calc(28 * var(--u));
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

.fee__category-text {
  display: block;
  padding-block: 10px;
  line-height: 1;
  text-align: center;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  background: linear-gradient(to right, #dc82aa 0%, #7dc8f5 100%);
}

.fee__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(50 * var(--u)) calc(96 * var(--u));
  margin-top: calc(70 * var(--u));
  padding-inline: calc(50 * var(--u));
}

.fee__kind,
.fee__price,
.fee__note {
  text-align: center;
  color: lch(0% 0 0 / 0.3);
}

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

.fee__item-img {
  width: calc(203 * var(--u));
}

.fee__kind {
  font-size: 16px;
}

.fee__kind--narrow {
  letter-spacing: -0.05em;
}


.fee__price {
  position: relative;
  font-size: 23px;
}

.fee__price::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #d5809f;
}

.fee__note {
  font-size: 16px;
}

.fee__campaign {
  position: absolute;
  top: 288px;
  left: 0;
  right: 0;
  text-align: center;
}

.fee__campaign-img {
  width: 607px;
}

.fee__category-note {
  font-size: 20px;
  text-align: center;
  padding: 1.5em;
}

.fee__option-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(80 * var(--u));
  padding-inline: calc(50 * var(--u));
}

.fee__option-item {
  width: calc(510 * var(--u));
}

.fee__option-title {
  font-size: 18px;
  line-height: 1;
  padding: 8px;
  background-color: #e1e1e9;
  color: #000;
  text-align: center;
}

.fee__option-detail {
  margin-top: 17px;
  display: flex;
  column-gap: calc(47 * var(--u));
  padding: 0 15px 0 10px;
}

.fee__option-image {
  flex-shrink: 0;
  margin-top: 8px;
  width: calc(190 * var(--u));
}

.fee__option-img {
  width: 100%;
}

.fee__option-explain {
  font-size: 16px;
}

.fee__option-text {
  display: flex;
  flex-direction: column;
  color: #7a7175;
}

.fee__option-price {
  margin-top: auto;
  font-size: 25px;
  text-align: right;
}

@media (max-width: 1280px) {
  .fee__option-price {
    text-align: left;
  }
}


.fee__option-price--small {
  font-size: 22px;
}

.fee__option-note {
  font-size: 16px;
  margin-top: 90px;
  text-align: center;
  font-weight: 300;
}

@media (max-width: 768px) {
  .fee {
    padding-top: calc(90vw / 7.5);
    background: unset;
  }

  .fee__inner {
    width: unset;
    padding-inline: unset;
  }

  .fee__title {
    border-top: calc(2vw / 7.5) solid #d7d7d7;
    border-bottom: calc(2vw / 7.5) solid #d7d7d7;
    padding: calc(24vw / 7.5) 0;
    text-align: center;
  }

  .fee__subtitle {
    padding: calc(20vw / 7.5) 0;
    font-size: calc(26vw / 7.5);
    border-bottom: calc(2vw / 7.5) solid #d7d7d7;
  }

  .fee__img {
    width: calc(352vw / 7.5);
  }

  .fee__categories {
    padding-inline: calc(54vw / 7.5);
  }

  .fee__categories--option {
    margin-top: calc(110vw / 7.5);
  }

  .fee__category {
    height: unset;
    padding: calc(6vw / 7.5);
    margin-top: calc(48vw / 7.5);
    box-shadow: calc(6vw / 7.5) calc(6vw / 7.5) calc(10vw / 7.5) rgba(0, 0, 0, 0.3);
  }

  .fee__category-text {
    display: block;
    padding-block: calc(19vw / 7.5);
    font-size: calc(34vw / 7.5);
  }

  .fee__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(50vw / 7.5) 0;
    margin-top: calc(100vw / 7.5);
    padding: 0;
  }

  .fee__kind,
  .fee__price,
  .fee__note {
    text-align: center;
    color: rgb(0, 0, 0, 0.3);
  }

  .fee__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
  }

  .fee__item-img {
    width: calc(220vw / 7.5);
  }

  .fee__kind {
    font-size: calc(26vw / 7.5);
  }

  .fee__kind--narrow {
    letter-spacing: -0.05em;
  }


  .fee__price {
    position: relative;
    font-size: calc(40vw / 7.5);
    line-height: 1;
  }

  .fee__price::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: calc(3vw / 7.5);
    background-color: #d5809f;
  }

  .fee__note {
    font-size: calc(26vw / 7.5);
  }

  .fee__campaign {
    position: absolute;
    top: calc(620vw / 7.5);
    left: calc(54vw / 7.5);
    right: calc(54vw / 7.5);
    text-align: center;
  }

  .fee__campaign-img {
    width: 100%;
  }

  .fee__category-note {
    font-size: calc(26vw / 7.5);
    text-align: center;
    padding: 1.5em;
  }

  .fee__option-list {
    gap: calc(100vw / 7.5);
    padding-inline: 0;
  }

  .fee__option-item {
    width: 100%
  }

  .fee__option-title {
    font-size: calc(24vw / 7.5);
    line-height: 1;
    padding: calc(16vw / 7.5);
    background-color: #e1e1e9;
    color: #000;
    text-align: center;
  }

  .fee__option-detail {
    margin-top: calc(42vw / 7.5);
    column-gap: calc(40vw / 7.5);
    padding: 0;
  }

  .fee__option-image {
    margin-top: calc(8vw / 7.5);
    width: calc(236vw / 7.5);
  }

  .fee__option-explain {
    font-size: calc(26vw / 7.5);
  }

  .fee__option-price {
    text-align: right;
    font-size: calc(40vw / 7.5);
  }

  .fee__option-price--small {
    font-size: calc(26vw / 7.5);
  }

  .fee__option-note {
    margin-top: calc(50vw / 7.5);
    font-size: calc(24vw / 7.5);
  }
}

/* --------------------------------------------------------------
    Work Flow
-------------------------------------------------------------- */

.flow {
  color: #5a5a5a;
  padding-top: calc(100 * var(--u));
  background: url(../images/bg-workflow.webp) no-repeat center top/calc(1920 * var(--u)) auto;
}

.flow__inner {
  --u: min(1px, 100vw / 1520);
  --m: min(1px, 100vw / 1100);
  width: calc(1200 * var(--u));
  margin: 0 auto;
}

.flow__title {
  display: flex;
  align-items: center;
  padding: calc(27 * var(--q)) 0;
  border-top: 2px #d7d7d7 solid;
  border-bottom: 2px #d7d7d7 solid;
}

.flow__title-img {
  width: calc(300 * var(--q));
  margin: 0 auto;
}

.flow__sub-title {
  font-size: calc(23 * var(--q));
  border-bottom: 2px #d7d7d7 solid;
  text-align: center;
  line-height: 2;
}

.flow__list {
  --top: 100;
  position: relative;
  max-width: calc(1100 * var(--u));
  margin: calc(90 * var(--m)) auto 0 auto;
  border-top: 2px solid #d7d7d7;
}

.flow__list::before {
  content: "";
  position: absolute;
  top: calc(var(--top) * var(--m));
  left: calc(33 * var(--m));
  width: calc(16 * var(--m));
  height: calc(100% - calc((var(--top) + 100) * var(--m)));
  background: linear-gradient(to bottom, #2ea3dc, #e85298);
  opacity: 0.5;
}

.flow__item {
  display: grid;
  grid-template-columns: calc(15 * var(--m)) calc(216 * var(--m)) 1fr;
  align-items: center;
  padding: calc(39 * var(--m)) calc(50 * var(--m)) calc(39 * var(--m)) 0;
  margin-left: calc(110 * var(--m));
  border-bottom: 2px solid #d7d7d7;
  background-position: right calc(20 * var(--m)) center;
}

.flow__item--step1 {
  background-image: url(../images/workflow-img01.webp);
  background-size: calc(103 * var(--m)) auto;
}

.flow__item--step2 {
  background-image: url(../images/workflow-img02.webp);
  background-size: calc(117 * var(--m)) auto;
}

.flow__item--step3 {
  background-image: url(../images/workflow-img03.webp);
  background-size: calc(116 * var(--m)) auto;
}

.flow__item--step4 {
  background-image: url(../images/workflow-img04.webp);
  background-size: calc(114 * var(--m)) auto;
}

.flow__item--step5 {
  background-image: url(../images/workflow-img05.webp);
  background-size: calc(112 * var(--m)) auto;
}

.flow__item--step6 {
  background-image: url(../images/workflow-img06.webp);
  background-size: calc(119 * var(--m)) auto;
}

.flow__item--step7 {
  background-image: url(../images/workflow-img07.webp);
  background-size: calc(114 * var(--m)) auto;
}

.flow__number-img {
  position: relative;
  top: calc(10 * var(--m));
  left: calc(-120 * var(--m));
  width: calc(110 * var(--m));
}

.flow__iten-name {
  height: 70%;
  display: flex;
  align-items: center;
  font-size: 23px;
  border-right: calc(1 * var(--m)) solid #d7d7d7;
}

.flow__description {
  padding-inline: calc(55 * var(--m)) calc(120 * var(--m));
  font-size: 17px;
  font-weight: 300;
}

@media (max-width: 768px) {
  .flow {
    padding-top: calc(90vw / 7.5);
    background: unset;
  }

  .flow__inner {
    width: unset;
    padding-inline: 0;
  }

  .flow__title {
    border-top: calc(2vw / 7.5) solid #d7d7d7;
    border-bottom: calc(2vw / 7.5) solid #d7d7d7;
    padding: calc(24vw / 7.5) 0;
    text-align: center;
    font-size: 0;
  }

  .flow__title-img {
    width: calc(390vw / 7.5);
  }

  .flow__sub-title {
    padding: calc(20vw / 7.5) 0;
    font-size: calc(26vw / 7.5);
    border-bottom: calc(2vw / 7.5) solid #d7d7d7;
  }

  .flow__img {
    width: calc(392vw / 7.5);
  }

  .flow__list {
    position: relative;
    max-width: unset;
    margin: calc(39vw / 7.5) calc(54vw / 7.5) 0;
    border-top: unset;
    border-bottom: calc(2vw / 7.5) solid #d7d7d7;
  }

  .flow__list::before {
    content: "";
    position: absolute;
    top: calc(100vw / 7.5);
    left: calc(73vw / 7.5);
    width: calc(32vw / 7.5);
    height: calc(100% - calc(300vw / 7.5));
  }

  .flow__item {
    position: relative;
    display: block;
    padding: calc(40vw / 7.5) 0 0 calc(222vw / 7.5);
    margin-left: 0;
    border-bottom: unset;
    background-position: right top calc(30vw / 7.5);
  }

  .flow__item--step1 {
    background-size: calc(103vw / 7.5) auto;
  }

  .flow__item--step2 {
    background-size: calc(117vw / 7.5) auto;
    background-position-y: top calc(40vw / 7.5);
  }

  .flow__item--step3 {
    background-size: calc(116vw / 7.5) auto;
  }

  .flow__item--step4 {
    background-size: calc(114vw / 7.5) auto;
    background-position-y: top calc(30vw / 7.5);
  }

  .flow__item--step5 {
    background-size: calc(112vw / 7.5) auto;
  }

  .flow__item--step6 {
    background-size: calc(119vw / 7.5) auto;
  }

  .flow__item--step7 {
    background-size: calc(114vw / 7.5) auto;
    background-position-y: top calc(50vw / 7.5);
  }

  .flow__number-img {
    position: absolute;
    top: calc(10vw / 7.5);
    left: 0;
    width: calc(192vw / 7.5);
  }

  .flow__iten-name {
    height: unset;
    display: block;
    height: calc(140vw / 7.5);
    font-size: calc(36vw / 7.5);
    border-right: unset;
  }

  .flow__description {
    height: calc(235vw / 7.5);
    /* margin-top: calc(32vw / 7.5); */
    margin-top: 0;
    padding-inline: unset;
    font-size: calc(26vw / 7.5);
    border-bottom: calc(2vw / 7.5) solid #d7d7d7;
  }

  .flow__description--last {
    border-bottom: unset;
    height: calc(170vw / 7.5);
  }
}

/* --------------------------------------------------------------
    Page Bottom背景用
-------------------------------------------------------------- */

.page-bottom {
  background: url(../images/bg-overview.webp) no-repeat center top/calc(1920 * var(--u)) auto;
}

@media (max-width: 768px) {
  .page-bottom {
    background: unset;
  }
}

/* --------------------------------------------------------------
    Company Overview
-------------------------------------------------------------- */

.company {
  --u: min(1px, 100vw / 1520);
  padding-top: calc(100 * var(--u));
  color: #5a5a5a;
}

.company__inner {
  width: calc(1200 * var(--u));
  margin: 0 auto;
}

.company__title {
  height: calc(93 * var(--q));
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 2px #d7d7d7 solid;
  border-bottom: 2px #d7d7d7 solid;
}

.company__title-img {
  width: calc(516 * var(--q));
  height: calc(53 * var(--q));
  margin: 0 auto;
}

.company__sub-title {
  padding: calc(20 * var(--q)) 0;
  font-size: calc(23 * var(--q));
  text-align: center;
  border-bottom: 2px solid #d7d7d7;
}

.company__content {
  display: flex;
  margin-top: calc(105 * var(--u));
}

.company__logo {
  padding-top: calc(120 * var(--u));
  flex-shrink: 0;
  text-align: center;
}

.company__logotext {
  font-size: calc(15 * var(--u));
}

.company__logo-img {
  width: calc(298 * var(--u));
  margin: calc(15 * var(--u)) calc(99 * var(--u)) 0;
}

.company__overview {
  font-size: 16px;
  line-height: 2;
}

.company__item {
  display: flex;
}

.company__item-title {
  width: 140px;
  flex-shrink: 0;
  margin-right: calc(10 * var(--u));
}

.company__item-title-text {
  display: inline-block;
  width: 6em;
  text-align: center;
  padding-inline: 0.1em;
  text-align-last: justify;

}

.company__item-title-text--2c {
  padding-inline: 1em;
}

.company__item-title-text--3c {
  padding-inline: 0.5em;
}

.company__item-title-text--4c {
  padding-inline: 0.25em;
}

.company__text {
  padding-right: calc(74 * var(--u));
  flex-grow: 1;
}

.company__spbr {
  display: inline;
}

@media(max-width: 768px) {
  .company {
    padding-top: calc(90vw / 7.5);
  }

  .company__inner {
    width: unset;
    margin: 0 auto;

  }

  .company__title {
    width: 100%;
    height: calc(170vw / 7.5);
    margin: calc(70vw / 7.5) auto 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: calc(2vw / 7.5) #d7d7d7 solid;
    border-top: calc(2vw / 7.5) #d7d7d7 solid;
  }

  .company__title-img {
    width: calc(326vw / 7.5);
    height: calc(140vw / 7.5);
    margin: 0 auto;
  }

  .company__sub-title {
    font-size: calc(23vw / 7.5);
    color: #5a5a5a;
    border-bottom: calc(2vw / 7.5) #d7d7d7 solid;

    text-align: center;
    line-height: 2.8;
  }

  .company__content {
    color: #5a5a5a;
    display: flex;
    flex-flow: row wrap;
    margin-top: calc(85vw / 7.5);
  }

  .company__logo {
    width: 100%;
    padding-top: 0;
    flex-shrink: 0;
    text-align: center;
  }

  .company__logotext {
    font-size: calc(14vw / 7.5);
  }

  .company__logo-img {
    width: calc(300vw / 7.5);
    margin: calc(15vw / 7.5) 0 0;
  }

  .company__overview {
    margin-top: calc(84vw / 7.5);
    font-size: calc(23vw / 7.5);
    color: #5a5a5a;
    margin: calc(60vw / 7.5) auto 0 auto;
    width: calc(675vw / 7.5);
    line-height: 2;
  }

  .company__item-title {
    width: calc(190vw / 7.5);
    margin-right: calc(10vw / 7.5);
  }

  .company__text {
    width: calc(475vw / 7.5);
    padding-right: 0;
  }

  .company__spbr {
    display: block;
    font-size: 0;
  }
}

/* --------------------------------------------------------------
    Contact Form
-------------------------------------------------------------- */

.contact {
  --u: min(1px, 100vw / 1520);

  margin-top: calc(178 * var(--u));
  color: #5a5a5a;
}

.contact__inner {
  max-width: calc(1200 * var(--u));
  margin-inline: auto;
  padding-bottom: calc(73 * var(--u));
  border-bottom: 2px solid #d7d7d7;
}

.contact__title {
  border-top: 2px solid #d7d7d7;
  border-bottom: 2px solid #d7d7d7;
  padding: calc(28 * var(--q)) 0;
  text-align: center;
  font-size: 0;
}

.contact__subtitle {
  padding: calc(20 * var(--q)) 0;
  font-size: calc(23 * var(--q));
  text-align: center;
  border-bottom: 2px solid #d7d7d7;
}

.contact__img {
  width: calc(380 * var(--q));
}

.contact__form-area {
  width: calc(885 * var(--u));
  min-width: 600px;
  margin: calc(75 * var(--u)) auto 0;
  color: #000;
}

.contact__item {
  display: flex;
  align-items: flex-start;
  padding-block: 27px;
  border-bottom: 1px dotted #c3c3c3;
}

.contact__item--last {
  border-bottom: unset;
}

.contact__form-title {
  display: flex;
  align-items: center;
  line-height: 1;
  width: 230px;
}

.contact__form-title-text {
  font-size: 16px;
  padding-left: 1em;
}

.contact__tag-optional,
.contact__tag-required {
  width: fit-content;
  line-height: 1;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #878787;
  letter-spacing: 0.1em;
}

.contact__tag-required {
  background-color: #878787;
  color: #fff;
}

.contact__input-area {
  flex-grow: 1;
}

.contact__form-input,
.contact__form-textarea {
  font-size: 16px;
  padding: 3px;
  border: 1px solid #878787;
  width: 100%;
}

.contact__button-area {
  position: relative;
  margin-top: calc(46 * var(--u));
  text-align: center;
}

.contact__submit {
  --u: min(1px, 100vw / 1000);
  width: calc(297 * var(--u));
  height: calc(63 * var(--u));
  background: linear-gradient(to right, rgb(226, 22, 115, 0.7), rgb(46, 163, 220, 0.7));
  border-radius: 5px;
  font-size: calc(22 * var(--u));
  font-weight: 600;
  color: #fff;
}

.contact__privacy {
  --u: min(1px, 100vw / 1000);
  position: absolute;
  bottom: 0;
  left: calc(50% + calc(170 * var(--u)));
  font-size: 12px;
  white-space: nowrap;
  color: #000;
}

@media (max-width: 768px) {
  .contact {
    margin-top: calc(50vw / 7.5);
  }

  .contact__inner {
    width: unset;
    max-width: unset;
    margin-inline: auto;
    padding-bottom: unset;
    border-bottom: unset;
  }

  .contact__title {
    border-top: calc(2vw / 7.5) solid #d7d7d7;
    border-bottom: calc(2vw / 7.5) solid #d7d7d7;
    padding: calc(28vw / 7.5) 0;
    text-align: center;
  }

  .contact__subtitle {
    padding: calc(15vw / 7.5) 0;
    font-size: calc(26vw / 7.5);
    text-align: center;
    border-bottom: calc(2vw / 7.5) solid #d7d7d7;
  }

  .contact__img {
    width: calc(500vw / 7.5);
  }

  .contact__form-area {
    width: unset;
    min-width: unset;
    margin: calc(100vw / 7.5) calc(54vw / 7.5) 0;
  }

  .contact__item {
    display: block;
    padding-block: 0 calc(60vw / 7.5);
    border-bottom: unset;
  }

  .contact__item--last {
    border-bottom: unset;
  }

  .contact__form-title {
    display: flex;
    align-items: center;
    line-height: 1;
    width: auto;
    margin-bottom: calc(30vw / 7.5);
  }

  .contact__form-title-text {
    font-size: calc(30vw / 7.5);
    padding-left: 1em;
  }

  .contact__tag-optional,
  .contact__tag-required {
    width: fit-content;
    font-size: calc(20vw / 7.5);
    padding: calc(6vw / 7.5) calc(12vw / 7.5);
  }

  .contact__form-input,
  .contact__form-textarea {
    padding: calc(6vw / 7.5);
    font-size: calc(28vw / 7.5);
  }

  .contact__button-area {
    position: static;
    margin-top: calc(5vw / 7.5);
    text-align: center;
  }

  .contact__submit {
    width: calc(348vw / 7.5);
    height: calc(74vw / 7.5);
    border-radius: calc(6vw / 7.5);
    font-size: calc(25vw / 7.5);
  }

  .contact__privacy {
    display: block;
    position: static;
    margin-top: calc(40vw / 7.5);
    font-size: calc(24vw / 7.5);
  }
}


/* --------------------------------------------------------------
    Q and A
-------------------------------------------------------------- */

.qa {
  --u: min(1px, 100vw / 1520);

  padding-top: calc(100 * var(--u));
  color: #5a5a5a;
}

.qa__inner {
  width: calc(1200 * var(--u));
  margin-inline: auto;
}

.qa__title {
  border-top: 2px solid #d7d7d7;
  border-bottom: 2px solid #d7d7d7;
  padding: calc(28 * var(--q)) 0;
  text-align: center;
  font-size: 0;
}

.qa__subtitle {
  padding: calc(20 * var(--q)) 0;
  font-size: calc(23 * var(--q));
  text-align: center;
  border-bottom: 2px solid #d7d7d7;
}

.qa__img {
  width: calc(134 * var(--q));
}

.qa__list {
  display: flex;
  flex-wrap: wrap;
}

.qa__item {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: calc(50 * var(--u)) calc(50 * var(--u)) 0 calc(50 * var(--u));
}

.qa__item:nth-child(2n) {
  padding-left: calc(40 * var(--u));
}

.qa__item:nth-child(2n+1) {
  padding-right: calc(40 * var(--u));
}

.qa__question {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding-left: 68px;
  font-size: 20px;
  line-height: 1.25;
  background: url(../images/qanda_q.webp) no-repeat left center / auto 42px;
}

.qa__answer {
  flex-grow: 1;
  margin-top: calc(20 * var(--u));
  padding: 0 0 calc(48 * var(--u)) 89px;
  font-size: 16px;
  line-height: 1.75;
  border-bottom: 2px solid #d7d7d7;
}

.qa__answer::first-letter {
  margin-left: calc(-17 * var(--u));
}

@media (max-width: 768px) {
  .qa {
    padding-top: calc(180vw / 7.5);
  }

  .qa__inner {
    width: unset;
  }

  .qa__title {
    border-top: calc(2vw / 7.5) solid #d7d7d7;
    border-bottom: calc(2vw / 7.5) solid #d7d7d7;
    padding: calc(28vw / 7.5) 0 calc(22vw / 7.5);
  }

  .qa__subtitle {
    padding: calc(24vw / 7.5) 0;
    font-size: calc(26vw / 7.5);
    border-bottom: calc(2vw / 7.5) solid #d7d7d7;
  }

  .qa__img {
    width: calc(176vw / 7.5);
  }

  .qa__list {
    display: block;
  }

  .qa__item {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: calc(56vw / 7.5) calc(54vw / 7.5) 0;
  }

  .qa__item:nth-child(2n),
  .qa__item:nth-child(2n+1) {
    padding-inline: calc(54vw / 7.5);
  }

  .qa__question {
    display: flex;
    align-items: center;
    min-height: calc(60vw / 7.5);
    padding-left: calc(94vw / 7.5);
    font-size: calc(28vw / 7.5);
    line-height: 1.25;
    background: url(../images/qanda_q.webp) no-repeat left center / auto calc(60vw / 7.5);
  }

  .qa__answer {
    flex-grow: 1;
    margin-top: 20px;
    padding: 0 0 calc(36vw / 7.5) calc(126vw / 7.5);
    font-size: calc(26vw / 7.5);
    line-height: 1.75;
    border-bottom: calc(2vw / 7.5) solid #d7d7d7;
  }

  .qa__answer::first-letter {
    margin-left: calc(-29vw / 7.5);
  }
}

/* --------------------------------------------------------------
    PRIVACY POLICY
-------------------------------------------------------------- */

.privacy {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  padding: 1em;
  background-color: #0008;

  --y: min(1px, 100vh / 800);
  --o: min(var(--y), var(--q));
}

.privacy__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.privacy__box {
  position: relative;
  width: calc(1100 * var(--o));
  height: calc(700 * var(--o));
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 7px 7px 7px rgb(0, 0, 0, 0.3);
}

.privacy__btn {
  width: calc(52 * var(--o));
  position: absolute;
  top: calc(20 * var(--o));
  right: calc(20 * var(--o));
}

.privacy__close-btn {
  width: calc(52 * var(--o));
}

.privacy__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 auto;
  padding: calc(70 * var(--o)) calc(140 * var(--o));
  line-height: 2;
}

.privacy__title {
  flex-shrink: 0;
  font-size: calc(26 * var(--o));
  border-bottom: 2px #000 solid;
}

.privacy__content {
  flex-grow: 1;
  height: 100%;
  overflow-y: scroll;
}

.privacy__text {
  margin-top: calc(10 * var(--o));
  font-size: calc(13 * var(--y));
}

.privacy__text--nomargin {
  margin-top: 0;
}

.privacy__subtitle {
  margin-top: calc(17 * var(--o));
  font-size: calc(18 * var(--y));
  border-left: calc(10 * var(--o)) #969696 solid;
  padding-left: calc(18 * var(--o));
  font-weight: 500;
}

.privacy__subtitle--noborder {
  border-left: 0;
  padding-left: 0;
}

.privacy__company-name {
  font-size: calc(16 * var(--y));
  margin-top: 1em;
}


@media(max-width:750px) {
  .privacy__box {
    width: unset;
    max-height: unset;
    height: calc(100vh - 2em);
  }

  .privacy__btn {
    width: calc(88vw / 7.5);
    position: absolute;
    top: calc(-5vw / 7.5);
    right: calc(-40vw / 7.5);
  }

  .privacy__close-btn {
    width: calc(95vw / 7.5);
  }

  .privacy__inner {
    width: calc(650vw / 7.5);
    padding: calc(70vw / 7.5) calc(50vw / 7.5);
  }

  .privacy__title {
    font-size: calc(32vw / 7.5);
    border-bottom: calc(4vw / 7.5) #000 solid;
  }

  .privacy__text {
    margin-top: calc(20vw / 7.5);
    font-size: calc(24vw / 7.5);
  }

  .privacy__text--nomargin {
    margin-top: 0;
  }

  .privacy__subtitle {
    margin-top: calc(30vw / 7.5);
    font-size: calc(28vw / 7.5);
    border-left: calc(18vw / 7.5) #969696 solid;
    padding-left: calc(16vw / 7.5);
    font-weight: 500;
    line-height: 1.8;
  }

  .privacy__subtitle--noborder {
    border-left: 0;
    padding-left: 0;
  }

  .privacy__company-name {
    font-size: calc(28vw / 7.5);
    margin-top: 1em;
  }
}

/* --------------------------------------------------------------
    FOOTER
-------------------------------------------------------------- */

.footer {
  --q: min(1px, 100vw / 1180);
  position: relative;
  margin-top: calc(225 * var(--q));
  padding: calc(65 * var(--q)) 0 calc(52 * var(--q)) 0;
  background-color: #000;
  color: #fff;
  line-height: 1;
  opacity: 0;
  transition: opacity 1.5s;
}

.footer--show {
  opacity: 1;
}

.footer__inner {
  position: relative;
  max-width: calc(1130 * var(--q));
  margin-inline: auto;
  /* padding-right: calc(50 * var(--q)); */
  display: flex;
  justify-content: space-between;
}

.footer__left-wing {
  margin-right: calc(-200 * var(--q));
}

.footer__right-wing {
  display: flex;
  flex-direction: column;
}

.footer__logo {
  margin-top: calc(14 * var(--q));
}

.footer__logo-catch {
  font-size: calc(12 * var(--q));
}

.footer__logo-img {
  width: calc(242 * var(--q));
}

.footer__contact-area {
  display: flex;
  column-gap: calc(33 * var(--q));
  margin-top: calc(26 * var(--q));
  font-size: calc(19 * var(--q));
  line-height: 1.53;
}

.footer__contact-form,
.footer__contact-tel {
  display: flex;
  align-items: center;
  column-gap: calc(8 * var(--q));
}

.footer__contact-tel {
  letter-spacing: 0.04em;
}

.footer__contact-form::before {
  content: url(../images/icon-form.svg);
  display: inline-block;
  width: calc(29 * var(--q));
  height: calc(29 * var(--q));
}

.footer__contact-tel:before {
  content: url(../images/icon-tel.svg);
  display: inline-block;
  width: calc(29 * var(--q));
  height: calc(29 * var(--q));
}

.footer__link-area {
  display: flex;
  list-style: none;
}

.footer__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(170 * var(--q));
}

.footer__link::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: calc(2 * var(--q));
  height: calc(44 * var(--q));
  background-color: #fff;
}

.footer__link-img {
  height: calc(24 * var(--q));
}

.footer__link-desc {
  margin-top: calc(9 * var(--q));
  font-size: calc(12 * var(--q));
}

.footer__link-desc::before,
.footer__link-desc::after {
  content: "ー";
  font-weight: 100;
}

.footer__copyright {
  margin-top: auto;
  font-size: calc(10 * var(--q));
  font-family: "Noto Serif JP", serif;
  font-weight: 200;
  text-align: right;
}

.footer__back-to-top {
  position: absolute;
  top: calc(-165 * var(--q));
  right: calc(50 * var(--q));
}

.footer__back-to-top-link {
  display: block;
}

.footer__back-to-top-img {
  width: calc(70 * var(--q));
}

@media (max-width: 768px) {
  .footer {
    margin-top: calc(230vw / 7.5);
    padding: calc(60vw / 7.5) 0 calc(50vw / 7.5) 0;
  }

  .footer__inner {
    max-width: unset;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
  }

  .footer__left-wing {
    margin: 0;
  }

  .footer__logo-catch {
    font-size: calc(16vw / 7.5);
  }

  .footer__logo {
    margin-top: calc(30vw / 7.5);
  }

  .footer__logo-img {
    width: calc(382vw / 7.5);
  }

  .footer__contact-area {
    display: flex;
    column-gap: calc(44vw / 7.5);
    margin-top: calc(24vw / 7.5);
    font-size: calc(26vw / 7.5);
    line-height: 1.53;
  }

  .footer__contact-form,
  .footer__contact-tel {
    display: flex;
    align-items: center;
    column-gap: calc(12vw / 7.5);
  }

  .footer__contact-form::before {
    width: calc(38vw / 7.5);
    height: calc(38vw / 7.5);
  }

  .footer__contact-tel:before {
    width: calc(38vw / 7.5);
    height: calc(38vw / 7.5);
  }

  .footer__link-area {
    margin-top: calc(28vw / 7.5);
    flex-wrap: wrap;
    justify-content: center;
    row-gap: calc(38vw / 7.5);
  }

  .footer__link {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(210vw / 7.5);
    height: calc(52vw / 7.5);
  }

  .footer__link::after {
    width: calc(2vw / 7.5);
    height: calc(52vw / 7.5);
    background-color: #fff;
  }

  .footer__link-item:nth-child(1) .footer__link::before,
  .footer__link-item:nth-child(4) .footer__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(2vw / 7.5);
    height: calc(52vw / 7.5);
    background-color: #fff;
  }


  .footer__link-img {
    height: calc(30vw / 7.5);
  }

  .footer__link-desc {
    margin-top: calc(6vw / 7.5);
    font-size: calc(15vw / 7.5);
  }

  .footer__link-desc::before,
  .footer__link-desc::after {
    content: "ー";
    font-weight: 100;
  }

  .footer__copyright {
    margin-top: calc(62vw / 7.5);
    font-size: calc(16vw / 7.5);
    text-align: center;
  }

  .footer__back-to-top {
    position: absolute;
    top: calc(-165vw / 7.5);
    right: calc(54vw / 7.5);
  }

  .footer__back-to-top-img {
    width: calc(94vw / 7.5);
  }

}

/* --------------------------------------------------------------
    Popup
-------------------------------------------------------------- */
.popup {
  --h: 1;
}

.popup__stage {
  --y: min(1px, 100vh / 800);
  --o: min(var(--y), var(--q));

  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: none;
  width: 100%;
  height: 100vh;
  height: 100dvh;

  background-color: #0008;
}

.popup__swiper {
  display: flex;
  align-items: center;
  height: 100%;
}

.popup__base {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: calc(1100 * var(--o));
  margin-inline: auto;
}

.popup__inner-box {
  position: relative;
  display: flex;
  width: calc(1100 * var(--o));
  height: calc(600 * var(--o));
  column-gap: calc(50 * var(--o));
  padding: calc(50 * var(--o));
  background-color: white;
  box-shadow: 7px 7px 7px rgb(0, 0, 0, 0.3);
}

.popup__btn-close {
  position: absolute;
  top: calc(25 * var(--o));
  right: calc(25 * var(--o));
  width: calc(52 * var(--o));
  cursor: pointer;
}

.popup__btn-prev,
.popup__btn-next {
  position: absolute;
  top: 50%;
  z-index: 100;
  width: calc(44 * var(--o));
  cursor: pointer;
}

.popup__btn-prev {
  left: 0;
  transform: translate(-50%, -50%);
}

.popup__btn-next {
  right: 0;
  transform: translate(50%, -50%);
}

.popup__description {
  position: relative;
  margin-top: auto;
  width: calc(300 * var(--o));
  flex-shrink: 0;
}

.popup__genre {
  position: absolute;
  top: calc(4 * var(--y));
  right: 0;
  width: calc(70 * var(--y));
  padding-inline: 0.75em;
  font-size: calc(9 * var(--y));
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: center;
  color: white;
  background-color: #000;
}

.popup__image-box {
  flex-shrink: 1;
}

.popup__image {
  width: calc(650 * var(--o));
  height: calc(600 * var(--o));
}

.popup__title {
  font-size: calc(12 * var(--y));
  line-height: 1.66;
}

.popup__text {
  margin-top: 1em;
  font-size: calc(13 * var(--y));
  line-height: 2.25;
  line-break: strict;
}



@media (max-height: calc(1300vw / 7.5)) {
  .popup {
    --h: 0.75;
  }
}

@media (max-width: 768px) {
  .popup__base {
    display: flex;
    align-items: center;
    justify-content: center;
    width: unset;
    margin-inline: auto;
    padding-inline: 0;
    overflow: hidden;
  }

  .popup__inner-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: calc(640vw / 7.5 * var(--h));
    height: calc(1040vw / 7.5 * var(--h));
    max-height: 100%;
    padding: calc(30vw / 7.5 * var(--h));
    background-color: white;
  }

  .popup__btn-close {
    position: absolute;
    top: calc(-100vw / 7.5 * var(--h));
    right: calc(0vw / 7.5 * var(--h));
    width: calc(86vw / 7.5 * var(--h));
  }

  .popup__btn-close img {
    width: 100%;
    height: auto;
  }

  .popup__btn-prev,
  .popup__btn-next {
    position: absolute;
    top: 50%;
    width: calc(66vw / 7.5 * var(--h))
  }

  .popup__btn-prev img,
  .popup__btn-next img {
    width: auto;
    height: auto;
  }

  .popup__btn-prev {
    left: calc(-20vw / 7.5 * var(--h));
    transform: translate(0, -50%);
  }

  .popup__btn-next {
    right: calc(-20vw / 7.5 * var(--h));
    transform: translate(0, -50%);
  }

  .popup__description {
    width: 100%;
    height: calc(476vw / 7.5 * var(--h));
    flex-shrink: 0;
  }

  .popup__genre {
    position: absolute;
    top: calc(28vw / 7.5 * var(--h));
    width: fit-content;
    font-size: calc(16vw / 7.5 * var(--h));
    letter-spacing: 0.02em;
  }

  .popup__image-box {
    flex-shrink: 1;
    text-align: center;
  }

  .popup__image {
    width: auto;
    height: 100%;
    max-height: calc(500vw / 7.5 * var(--h));
    min-height: unset;
    object-fit: contain;
    aspect-ratio: 29 / 25;
  }

  .popup__title {
    font-size: calc(24vw / 7.5 * var(--h));
    line-height: 1.5;
    margin-top: 1em;
  }

  .popup__text {
    height: calc(320vw / 7.5 * var(--h));
    margin-top: 1em;
    font-size: calc(24vw / 7.5 * var(--h));
    line-height: 1.83;
  }
}