@charset "UTF-8";

/* ==========================================================================
    StudyJam style
============================================================================= */
:root {
  --font-1: "Zen Kaku Gothic New", sans-serif;
  --font-2: "Noto Sans JP", sans-serif;
  --color-black: #000;
  --color-kyecolor: #0B89B1;
  --color-kyecolor-light: #E2F8FF;
  --color-yellow: #FFE500;
  --color-orange: #ff9500;
  --color-accent: #dd007f;
  --color-pink: #ea51a4;
  --gradient-angle: 0;
  --gradient-start-01: #00c4e9;
  --gradient-end-01: #0b89b1;
  --gradient-start-green: #8bda1e;
  --gradient-end-green: #ebe154;
  --gradient-start-blue: #27a5ea;
  --gradient-end-blue: #5deb9f;
  --gradient-start-red: #e62e62;
  --gradient-end-red: #e89222;
  --gradient-start-pink: #ea6188;
  --gradient-end-pink: #d580b2;
  --shadow-r: 0 0 30px 0 rgba(0, 0, 0, 0.15);
}

/* -------------------------
  Common styles
------------------------- */
body:not(.loaded) {
  opacity: 0;
  pointer-events: none;
}

body.is-loaded {
  opacity: 1;
  transition: opacity 0.6s ease;
  pointer-events: inherit;
}

#document {
  overflow: hidden;
}

.l-container {
  max-width: 1096px;
  margin-inline: auto;
  padding-inline: 20px;
}

@media (min-width: 1096px) {
  .l-container {
    padding-inline: 0;
  }
}

.d-ib {
  display: inline-block !important;
}

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

@media screen and (max-width: 767.98px) and (min-width: 576px) {
  .sp-none {
    display: none !important;
  }
}

@media screen and (max-width: 575.98px) {
  .sp-sm-none {
    display: none !important;
  }
}

/* -------------------------
  Main Visual
------------------------- */
.p-mv {
  overflow: hidden;
  position: relative;
}

.c-mv__contents {
  padding-block: 80px 40px;
}

.c-mv__contents.is-active .c-mv__bg:nth-of-type(odd) {
  -webkit-animation: puff-in-center 1s 1s 1 forwards;
  animation: puff-in-center 1s 1s 1 forwards;
}

.c-mv__contents.is-active .c-mv__bg:nth-of-type(even) {
  -webkit-animation: puff-in-center 1s 1.8s 1 forwards;
  animation: puff-in-center 1s 1.8s 1 forwards;
}

.c-mv__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  font-weight: bold;
  gap: 32px;
  padding-inline: 7.1428vw;
}

.c-mv__tagline {
  font-size: clamp(2.6rem, 2.5714vw, 3.6rem);
  line-height: 1.5;
}

.c-mv__ttl {
  font-size: clamp(1.8rem, 2vw, 2.8rem);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c-mv__ttl b {
  display: block;
  -webkit-margin-after: 16px;
  margin-block-end: 16px;
  text-align: justify;
}

.c-mv__ttl.is-active {
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}

.c-mv__credit {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 24px;
}

.c-mv__cta {
  aspect-ratio: 1;
  background-color: var(--color-black);
  border-radius: 50%;
  color: #fff;
  display: -ms-grid;
  display: grid;
  gap: 6px;
  max-width: 200px;
  min-width: 120px;
  place-content: center;
  position: fixed;
  top: 32px;
  right: 2.6428vw;
  text-align: center;
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
  width: 14.2857vw;
  z-index: 100;
}

.c-mv__cta.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.c-mv__cta h2 {
  background: -webkit-linear-gradient(235deg, var(--gradient-start-green) 0%, var(--gradient-end-green) 100%);
  background: linear-gradient(-145deg, var(--gradient-start-green) 0%, var(--gradient-end-green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
  font-size: clamp(1.6rem, 1.8571vw, 2.6rem);
  line-height: 1.25;
  -webkit-text-fill-color: transparent;
}

.c-mv__cta b {
  display: block;
  font-size: clamp(1.3rem, 1.5714vw, 2.2rem);
  line-height: 1.2;
}

.c-mv__cta b span {
  display: block;
}

.c-mv__bg {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.c-mv__bg img {
  width: 100%;
}

.c-mv__bg.item01 {
  top: max(2vw, 28px);
  left: max(-17vw, -238px);
  max-width: 458px;
  width: 32.7142vw;
}

.c-mv__bg.item02 {
  top: max(-24.2857vw, -336px);
  left: -15px;
  max-width: 594px;
  width: 42.42857vw;
}

.c-mv__bg.item03 {
  top: max(27.857vw, 390px);
  left: -37px;
  max-width: 270px;
  width: 19.2857vw;
}

.c-mv__bg.item04 {
  top: max(-15vw, -210px);
  right: -78px;
  max-width: 408px;
  width: 29.142857vw;
}

.c-mv__bg.item05 {
  top: 18px;
  right: min(-6.7142vw, -97px);
  max-width: 652px;
  width: 46.5714vw;
}

.c-mv__bg.item06 {
  top: 165px;
  right: max(-24.2857vw, -340px);
  max-width: 598px;
  width: 42.71428vw;
}

@media screen and (min-width: 768px) {
  .c-mv__cta:hover {
    -webkit-animation: cta-btn-hover 4s ease 0.1s infinite;
    animation: cta-btn-hover 4s ease 0.1s infinite;
    -webkit-box-shadow: 0 0 0 16px #000;
    box-shadow: 0 0 0 16px #000;
  }
}

@media screen and (max-width: 767.98px) {
  .c-mv__contents {
    -webkit-padding-before: 140px;
    padding-block-start: 140px;
  }

  .c-mv__cta {
    top: 10px;
    right: 10px;
  }
}

@media (max-width: 575.98px) {
  .c-mv__bg.item01 {
    width: 42.7142vw;
  }

  .c-mv__bg.item02 {
    width: 62.42857vw;
  }

  .c-mv__bg.item03 {
    width: 39.2857vw;
  }

  .c-mv__bg.item04 {
    width: 49.142857vw;
  }

  .c-mv__bg.item05 {
    top: 120px;
    width: 66.5714vw;
  }

  .c-mv__bg.item06 {
    top: max(61.714vw, 210px);
    width: 62.71428vw;
  }
}


/* -------------------------
  こんなお悩みありませんか？
  すべてスタジャムで解決できます！
------------------------- */
.c-issue__list,
.c-solution__list {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.c-issue__list[data-theme="blue"],
.c-solution__list[data-theme="blue"] {
  color: var(--color-kyecolor);
}

.c-issue__list[data-theme="orange"],
.c-solution__list[data-theme="orange"] {
  color: var(--color-orange);
}

.c-issue__img,
.c-solution__img {
  margin-inline: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c-issue__text,
.c-solution__text {
  font-size: clamp(1.4rem, 1.45833vw, 2.1rem);
  font-weight: bold;
  margin: 8px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .c-issue__list>li:nth-child(1),
  .c-solution__list>li:nth-child(1) {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }

  .c-issue__list>li:nth-child(2),
  .c-solution__list>li:nth-child(2) {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
  }

  .c-issue__list>li:nth-child(3),
  .c-solution__list>li:nth-child(3) {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
  }

  .c-issue__list>li:nth-child(4),
  .c-solution__list>li:nth-child(4) {
    -webkit-animation-delay: 1.6s;
    animation-delay: 1.6s;
  }
}

@media screen and (max-width: 767.98px) {
  .c-issue__list,
  .c-solution__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

.c-arrow {
  margin-inline: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c-arrow img {
  opacity: 0;
}

.c-arrow img:nth-child(2),
.c-arrow img:nth-child(3) {
  -webkit-margin-before: -30px;
  margin-block-start: -30px;
}

.c-arrow.is-active img {
  -webkit-animation-name: fade-in;
  animation-name: fade-in;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.c-arrow.is-active img:nth-child(2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.c-arrow.is-active img:nth-child(3) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

@media screen and (max-width: 767.98px) {
  .c-arrow {
    max-width: 210px;
  }
}


/* -------------------------
  こんなお悩みありませんか？
------------------------- */
.p-issue {
  padding-block: 32px;
}

.c-issue__heading {
  -webkit-margin-after: 32px;
  margin-block-end: 32px;
}

.c-issue__heading img {
  margin-inline: auto;
}


/* -------------------------
  すべてスタジャムで解決できます！
------------------------- */
.p-solution {
  padding-block: 16px 80px;
}

.c-solution__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 32px;
}

.c-solution__heading {
  margin-inline: auto;
  -webkit-padding-before: 40px;
  padding-block-start: 40px;
  -webkit-padding-start: 32px;
  padding-inline-start: 32px;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c-solution__heading::before {
  content: "";
  background: url("../images/solution_heading_deco.svg") no-repeat center/contain;
  position: absolute;
  left: 0;
  top: 0;
  height: 58px;
  width: 72px;
}

.c-solution__heading.is-active {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.c-solution__heading.is-active::before {
  -webkit-animation: flash 0.6s 2.4s ease both;
  animation: flash 0.6s 2.4s ease both;
}

.c-solution__lead {
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}

.c-solution__bottomcopy {
  text-align: center;
}

.c-solution__bottomcopy--heading {
  color: var(--color-accent);
  font-size: clamp(3.4rem, 3.1428vw, 4.4rem);
  margin-inline: auto;
  padding: 18px min(3.5714vw, 50px);
  position: relative;
  width: fit-content;
}

.c-solution__bottomcopy--heading::before,
.c-solution__bottomcopy--heading::after {
  content: "";
  position: absolute;
  max-height: 55px;
  max-width: 136px;
  height: 3.9285vw;
  width: 9.7142vw;
}

.c-solution__bottomcopy--heading::before {
  background: url("../images/solution_bottomcopy_heading.svg") no-repeat 0 0/100% auto;
  left: 0;
  top: 0;
}

.c-solution__bottomcopy--heading::after {
  background: url("../images/solution_bottomcopy_heading.svg") no-repeat 0 0/100% auto;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  bottom: 0;
  right: 0;
}

.c-solution__bottomcopy--heading.is-active {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.c-solution__bottomcopy--text {
  font-size: clamp(3rem, 2.8571vw, 4rem);
  font-weight: bold;
  -webkit-margin-before: 10px;
  margin-block-start: 10px;
}

.c-solution__bottomcopy--text.is-active {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

.c-solution__andmore {
  display: inline-block;
}

@media screen and (max-width: 767.98px) {
  .c-solution__heading::before {
    width: 42px;
  }
}


/* -------------------------
  動画
------------------------- */
.p-movie {
  background-color: var(--color-kyecolor-light);
  padding-block: 80px;
}

.p-movie iframe {
  aspect-ratio: 1.809/1;
  width: 100%;
}


/* -------------------------
  御社のご負担は最小限
------------------------- */
.c-lowBurden {
  padding-block: 80px;
}

.c-lowBurden__heading {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 1.7142vw;
  margin: 0 auto 80px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c-lowBurden__heading picture {
  display: block;
  width: calc(100% - (78px * 2) - 48px);
}

.c-lowBurden__heading::before,
.c-lowBurden__heading::after {
  content: "";
  background: url("../images/low_burden_heading_deco.svg") no-repeat center bottom/contain;
  display: block;
  height: 124px;
  width: 5.57142vw;
}

.c-lowBurden__heading::after {
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.c-lowBurden__heading.is-active::before,
.c-lowBurden__heading.is-active::after {
  -webkit-animation: flash 0.6s 1s ease both;
  animation: flash 0.6s 1s ease both;
}

.c-lowBurden__contents {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.c-lowBurden__description {
  font-weight: bold;
  line-height: 2.2;
}

.c-lowBurden__description .heading {
  color: var(--color-pink);
  font-size: clamp(3.4rem, 3.1428vw, 4.4rem);
  line-height: 1.5;
}

.c-lowBurden__description .text {
  font-size: clamp(1.8rem, 2.3vw, 2.8rem);
}

@media screen and (max-width: 767.98px) {
  .c-lowBurden__contents {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .c-lowBurden__heading {
    gap: 8px;
    -webkit-margin-after: 40px;
    margin-block-end: 40px;
  }

  .c-lowBurden__heading picture {
    width: calc(100% - (40px * 2) - 16px);
  }

  .c-lowBurden__heading::before,
  .c-lowBurden__heading::after {
    width: 40px;
  }

  .c-lowBurden__description {
    text-align: center;
  }

  .c-lowBurden__description .heading {
    line-height: 1.5;
  }
}


/* -------------------------
  ご利用の流れ
------------------------- */
.c-flow {
  background-color: var(--color-kyecolor-light);
  padding-block: 105px 80px;
  position: relative;
}

.c-flow::before {
  background-color: #fff;
  content: "";
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  height: 4.0714vw;
  left: 50%;
  max-height: 57px;
  max-width: 178px;
  position: absolute;
  top: -2px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 12.7142vw;
}

.c-flow__heading {
  color: var(--color-kyecolor);
  font-size: clamp(4rem, 3.4285vw, 4.8rem);
  -webkit-margin-after: 48px;
  margin-block-end: 48px;
  text-align: center;
}

.c-flow__list {
  position: relative;
  z-index: 2;
}

@media screen and (min-width: 768px) {
  .c-flow .l-container {
    max-width: 1440px;;
  }

  .c-flow__list img {
    margin-inline: auto;
  }
}

@media screen and (max-width: 767.98px) {
  .c-flow .l-container {
    padding-inline: 16px 14px;
  }
}

@media (max-width: 575.98px) {
  .c-flow .l-container {
    padding-inline: 16px;
  }
}


/* -------------------------
  StudyJamなら“高校生年代からの”ブランド想起を実現
------------------------- */
.p-benefit {
  padding-block: max(10.8571vw, 152px);
  position: relative;
  overflow: hidden;
}

.p-benefit .l-container {
  position: relative;
  z-index: 10;
}

.c-benefit__heading {
  font-size: clamp(3.4rem, 4vw, 5.6rem);
  -webkit-margin-after: 10px;
  margin-block-end: 10px;
  text-align: center;
}

.c-benefit__heading img {
  display: inline-block;
  -webkit-margin-end: 8px;
  margin-inline-end: 8px;
}

.c-benefit__heading b {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--gradient-start-01)), to(var(--gradient-end-01)));
  background: -webkit-linear-gradient(top, var(--gradient-start-01) 0%, var(--gradient-end-01) 100%);
  background: linear-gradient(180deg, var(--gradient-start-01) 0%, var(--gradient-end-01) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  display: block;
  -webkit-text-fill-color: transparent;
}

.c-benefit__lead {
  font-size: clamp(2.4rem, 2.1428vw, 3rem);
  font-weight: bold;
  -webkit-margin-after: 64px;
  margin-block-end: 64px;
  text-align: center;
}

.c-benefit__clist {
  display: -ms-grid;
  display: grid;
  gap: 40px 7.2992%;
  -webkit-margin-after: 32px;
  margin-block-end: 32px;
}

.c-benefit__item {
  aspect-ratio: 1;
  background: -webkit-linear-gradient(36deg, var(--gradient-start-red) 0%, var(--gradient-end-red) 100%);
  background: linear-gradient(54deg, var(--gradient-start-red) 0%, var(--gradient-end-red) 100%);
  border-radius: 50%;
  -webkit-box-shadow: var(--shadow-r);
  box-shadow: var(--shadow-r);
  color: #fff;
  display: -ms-grid;
  display: grid;
  max-width: 380px;
  place-content: center;
}

.c-benefit__item:nth-child(1) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.c-benefit__item:nth-child(2) {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.c-benefit__item:nth-child(3) {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.c-benefit__item:nth-child(4) {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.c-benefit__text {
  font-family: var(--font-2);
  font-weight: 500;
  text-align: center;
}

.c-benefit__text .emphasis {
  font-style: normal;
  line-height: 1;
  vertical-align: bottom;
}

.c-benefit__text .sub {
  display: block;
  font-size: clamp(2rem, 1.9285vw, 2.7rem);
  -webkit-margin-before: 8px;
  margin-block-start: 8px;
}

.c-benefit__text[data-item="01"] {
  font-size: clamp(3.2rem, 2.5714vw, 4.1rem);
}

.c-benefit__text[data-item="01"] .emphasis {
  font-size: 7rem;
}

.c-benefit__text[data-item="02"] {
  font-size: clamp(3rem, 2.8571vw, 3.6rem);
  line-height: 1.2;
}

.c-benefit__text[data-item="02"] .val {
  font-size: clamp(2.8rem, 2.5vw, 3.5rem);
}

.c-benefit__text[data-item="02"] .emphasis {
  font-size: 8.3rem;
}

.c-benefit__bottomcopy {
  margin-inline: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.c-benefit__bottomcopy.is-active {
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}

.c-benefit__bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.c-benefit__bg img {
  opacity: 0;
  position: absolute;
  z-index: -1;
}

.c-benefit__bg.is-active img {
  animation-name: fade-in;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.c-benefit__bg.is-active img:nth-of-type(odd) {
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}

.c-benefit__bg.is-active img:nth-of-type(even) {
  -webkit-animation-delay: 1.25s;
  animation-delay: 1.25s;
}

.c-benefit__bg .item01, .c-benefit__bg .item05, .c-benefit__bg .item09 {
  left: 0;
}

.c-benefit__bg .item04, .c-benefit__bg .item07, .c-benefit__bg .item10 {
  right: 0;
}

.c-benefit__bg .item01 {
  top: 13px;
  min-width: 100px;
  width: 14.5vw;
}

.c-benefit__bg .item02 {
  top: 3.6428vw;
  left: 18.1428vw;
  min-width: 80px;
  width: 11.0714vw;
}

.c-benefit__bg .item03 {
  top: 5.5vw;
  right: 20.9285vw;;
  min-width: 80px;
  width: 9.2142vw;
}

.c-benefit__bg .item04 {
  top: 0;
  min-width: 140px;
  width: 15.5vw;
}

.c-benefit__bg .item05 {
  top: max(27vw, 378px);
  min-width: 120px;
  width: 14.5714vw;
}

.c-benefit__bg .item06 {
  top: calc(50% - 10.4285%);
  transform: translateY(-50%);
  right: min(10.5vw, 147px);
  min-width: 100px;
  width: 11.07142vw;
}

.c-benefit__bg .item07 {
  bottom: max(20.2857vw, 410px);
  min-width: 100px;
  width: 8.7142vw;
}

.c-benefit__bg .item08 {
  bottom: min(calc(50% - 15.1428%), 510px);
  transform: translateY(-50%);
  left: 8.0714vw;
  min-width: 100px;
  width: 8.7857vw;
}

.c-benefit__bg .item09 {
  bottom: min(8.2857vw, 120px);
  min-width: 120px;
  width: 14.5vw;
}

.c-benefit__bg .item10 {
  bottom: 0;
  min-width: 160px;
  width: 22.1428vw;
}

@media screen and (min-width: 1200px) {
  .p-benefit {
    min-height: 1182px;
  }
}

@media screen and (min-width: 768px) {
  .c-benefit__clist {
    grid-template-columns: repeat(2, 1fr);
  }

  .c-benefit__item:first-child {
    -webkit-margin-start: auto;
    margin-inline-start: auto;
  }
}

@media screen and (max-width: 767.98px) {
  .c-benefit__heading {
    -webkit-margin-after: 24px;
    margin-block-end: 24px;
  }

  .c-benefit__heading img {
    width: 70%;
  }

  .c-benefit__item {
    margin-inline: auto;
    width: 100%;
  }

  .c-benefit__bg .item03 {
    top: 180px;
    right: -20px;
  }

  .c-benefit__bg .item05 {
    top: calc(50% - 15.1428%);
    left: -30px;
  }

  .c-benefit__bg .item06 {
    right: -20px;
  }

  .c-benefit__bg .item08 {
    left: -10px;
  }

  .c-benefit__bg .item09 {
    bottom: 120px;
  }
}


/* -------------------------
  取組事例
------------------------- */
.p-cases {
  background-color: var(--color-kyecolor);
  padding-block: 80px;
}

.c-cases__heading {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 8px;
  -webkit-margin-after: 40px;
  margin-block-end: 40px;
}

.c-cases__heading .text {
  font-size: 2.4rem;
  line-height: 1;
  -webkit-margin-start: 8px;
  margin-inline-start: 8px;
}

.c-cases__list {
  display: -ms-grid;
  display: grid;
  gap: 32px;
}

.c-cases__list>li {
  background-color: #fff;
  border-radius: 20px;
  padding: 16px;
}

.c-cases__top {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px;
  -webkit-margin-after: 8px;
  margin-block-end: 8px;
}

.c-cases__img {
  aspect-ratio: 1;
  border: solid 1px #ccc;
  display: -ms-grid;
  display: grid;
  padding: 12px;
  place-content: center;
  width: 90px;
}

.c-cases__title {
  -ms-flex-preferred-size: calc(100% - 90px - 16px);
  flex-basis: calc(100% - 90px - 16px);
}

.c-cases__title .name {
  font-size: clamp(1.8rem, 1.5714vw, 2.2rem);
  -webkit-margin-after: 8px;
  margin-block-end: 8px;
}

.c-cases__title .text {
  color: var(--color-kyecolor);
  font-family: var(--font-2);
  font-size: clamp(1.6rem, 1.4287vw, 2rem);
  font-weight: 900;
  line-height: 1.5;
}

.c-cases__bottom {
  font-size: 1.8rem;
  letter-spacing: -.075rem;
}

@media screen and (min-width: 768px) {
  .c-cases__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 767.98px) {
  .c-cases__heading .heading {
    margin-inline: auto;
    -webkit-margin-after: 24px;
    margin-block-end: 24px;
  }

  .c-cases__heading .text {
    margin-inline-start: 0;
    line-height: 1.5;
    text-align: center;
  }
}


/* -------------------------
  お気軽にご相談ください
------------------------- */
.p-cta {
  padding-block: 112px;
  position: relative;
  overflow: hidden;
}

.p-cta .c-mv__bg {
  opacity: 0;
}

.p-cta.is-active .c-mv__bg {
  -webkit-animation: fade-in 1s 1s 1 forwards;
  animation: fade-in 1s 1s 1 forwards;
}

.c-cta__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 16px;
  position: relative;
  z-index: 10;
  align-items: center;
  justify-content: space-around;
}

.c-cta__text {
  font-size: clamp(2.5rem, 3vw, 3.8rem);
  font-weight: bold;
}

.c-cta__button {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--color-black);
  border-radius: 20px;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: clamp(2.6rem, 2.2857vw, 3.2rem);
  font-weight: bold;
  padding: 32px;
  position: relative;
  overflow: hidden;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.c-cta__button .text {
  position: relative;
  z-index: 2;
}

.c-cta__button::after {
  content: "";
  background: url("../images/cta_ico.svg") no-repeat center/contain;
  height: 72px;
  -webkit-margin-start: auto;
  margin-inline-start: auto;
  max-width: 52px;
  position: relative;
  width: 8.04%;
  z-index: 2;
}

.c-cta__button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100px;
  background: -webkit-linear-gradient(225deg, var(--gradient-start-red) 0%, var(--gradient-end-red) 100%);
  background: linear-gradient(-135deg, var(--gradient-start-red) 0%, var(--gradient-end-red) 100%);
  border-radius: 50%;
  -webkit-transform: scale(0) translate(-50%, -50%);
  transform: scale(0) translate(-50%, -50%);
  -webkit-transform-origin: left top;
  transform-origin: left top;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}

.c-cta__button:hover {
  background: inherit;
  color: #fff;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
}

.c-cta__button:hover::before {
  -webkit-transition: 1s;
  transition: 1s;
  -webkit-transform: scale(10) translate(-50%, -50%);
  transform: scale(10) translate(-50%, -50%);
}

@media screen and (min-width: 768px) {
  .p-cta .c-mv__bg.item01 {
    top: max(5.1428vw, 72px);
  }

  .p-cta .c-mv__bg.item02 {
    top: max(-16.6428vw, -233px);
    z-index: 1;
  }

  .p-cta .c-mv__bg.item03 {
    top: max(11.2142vw, 157px);
    left: max(5.4285vw, 76px);
  }

  .p-cta .c-mv__bg.item04 {
    top: max(-14.8571vw, -208px);
    right: max(-5.5vw, -77px);
  }

  .p-cta .c-mv__bg.item05 {
    top: max(-1.3571vw, -20px);
    right: max(-13.4285vw, -188px);
  }

  .c-cta__button {
    -ms-flex-preferred-size: 36.3138%;
    flex-basis: 36.3138%;
  }
}


@media screen and (max-width: 767.98px) {
  .p-cta .c-mv__bg.item05 {
    top: 90px;
    right: -30%;
  }

  .p-cta .c-mv__bg.item06 {
    bottom: 0;
    top: inherit;
    right: -30%;
    width: 235px;
  }

  .c-cta__contents {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .c-cta__text {
    font-size: clamp(1.6rem, 4.5vw, 3.8rem);
    text-align: center;
  }

  .c-cta__button {
    width: 100%;
  }
}


/* -------------------------
  フッター
------------------------- */
.l-footer {
  background: -webkit-radial-gradient(circle, #fff 0%, #dde8f2 100%);
  background: radial-gradient(circle, #fff 0%, #dde8f2 100%);
  padding-block: 56px;
}

.l-footer .l-container {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 24px;
}

.l-footer .credit {
  font-family: var(--font-2);
  font-size: 1.4rem;
  -webkit-margin-start: auto;
  margin-inline-start: auto;
}

.p-footer__container {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 24px 56px;
}

.p-footer__container h2 {
  font-size: 1.8rem;
}

.p-footer__logo {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.p-footer__logo .item {
  -ms-flex-preferred-size: calc(50% - 16px);
  flex-basis: calc(50% - 16px);
}

.p-footer__logo .item:hover {
  opacity: 0.8;
}

.p-footer__logo .item img {
  height: auto;
}

.p-footer__logo .item img.logo_aequol {
  max-width: 150px;
}


/* -------------------------
  JavaScript Triggered Animations
------------------------- */
/* .js-trigger.in {
  opacity: 0;
}

.js-trigger.in.is-active {
  -webkit-animation-name: fade-in;
  animation-name: fade-in;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.js-trigger.up {
  opacity: 0;
}

.js-trigger.up.is-active {
  -webkit-animation-name: slide-in-bottom;
  animation-name: slide-in-bottom;
  -webkit-animation-duration: 0.4s;
  animation-duration: 0.4s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.js-trigger.bounce-up {
  opacity: 0;
}

.js-trigger.bounce-up.is-active {
  -webkit-animation-name: bound-in-up;
  animation-name: bound-in-up;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.js-trigger.img-in {
  opacity: 0;
}

.js-trigger.img-in.is-active {
  -webkit-animation-name: puff-in-center;
  animation-name: puff-in-center;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
} */

.js-trigger {
  will-change: transform, opacity;
}

/* fixed要素を内包 （will-change不要） */
.c-mv__contents.js-trigger {
  will-change: auto;
}

/* 「視差効果を減らす」に対応 */
@media (prefers-reduced-motion: reduce) {
  .js-trigger {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}

/* -------------------------
  Animations
------------------------- */
@-webkit-keyframes cta-btn-hover {
  0% {
    border-radius: 61% 35% 52% 44%/53% 46% 50% 43%;
  }

  15% {
    border-radius: 38% 58% 52% 44%/47% 58% 38% 49%;
  }

  30% {
    border-radius: 52% 44% 36% 60%/47% 68% 28% 49%;
  }

  45% {
    border-radius: 59% 37% 53% 43%/59% 36% 60% 37%;
  }

  60% {
    border-radius: 59% 37% 65% 31%/68% 48% 48% 28%;
  }

  75% {
    border-radius: 48% 48% 32% 64%/54% 66% 30% 42%;
  }

  90% {
    border-radius: 44% 52% 48% 48%/33% 59% 37% 63%;
  }

  100% {
    border-radius: 61% 35% 52% 44%/53% 46% 50% 43%;
  }
}

@keyframes cta-btn-hover {
  0% {
    border-radius: 61% 35% 52% 44%/53% 46% 50% 43%;
  }

  15% {
    border-radius: 38% 58% 52% 44%/47% 58% 38% 49%;
  }

  30% {
    border-radius: 52% 44% 36% 60%/47% 68% 28% 49%;
  }

  45% {
    border-radius: 59% 37% 53% 43%/59% 36% 60% 37%;
  }

  60% {
    border-radius: 59% 37% 65% 31%/68% 48% 48% 28%;
  }

  75% {
    border-radius: 48% 48% 32% 64%/54% 66% 30% 42%;
  }

  90% {
    border-radius: 44% 52% 48% 48%/33% 59% 37% 63%;
  }

  100% {
    border-radius: 61% 35% 52% 44%/53% 46% 50% 43%;
  }
}

@-webkit-keyframes puff-in-center {
  0% {
    opacity: 0;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    -webkit-filter: blur(0px);
    filter: blur(0px);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes puff-in-center {
  0% {
    opacity: 0;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    opacity: 1;
    -webkit-filter: blur(0px);
    filter: blur(0px);
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes bound-in-up {
  0% {
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  55% {
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
}

@keyframes bound-in-up {
  0% {
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  38% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  55% {
    -webkit-transform: translateY(60px);
    transform: translateY(60px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, to {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}