@import url(./global/_variable.css);

/* top */
/* ============================================ */


.top_body {
  position: relative;
  padding-block: 0 6.25vw;
  background-color: #FFF;
}



.area__hero {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.area__hero--img {
  position: relative;
  margin-inline: clamp(-80px, calc(-192px + 10vw), 0px);
  background-color: #F0F4F9;
  @media (width <= 896px) {
    padding-block: 5vw 0;
  }
  img {
    position: relative;
    width: 100%;
    height: auto;
  }
}

.area__hero--gd {
  width: 23.8vw;
  min-width: 280px;
  margin-inline: auto;
  @media (width <= 896px) {
    margin-top: 0px;
  }
}

.area__hero--inner {
  padding-inline: 20px;
  text-align: center;
}

.area__hero--conv {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 854px;
  margin-inline: auto;
  margin-top: 48px;
  @media (width <= 896px) {
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
  }
}
.area__hero--conv-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 0 0;
  padding: 40px 32px;
  border-radius: 999px;
  > img {
    flex-shrink: 0;
  }
  > span {
    flex: 1 0 0;
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: clamp(1.125rem, 0.3683rem + 1.1261vw, 1.5rem); /* 24~18(1340~896) */
    font-weight: 700;
    line-height: 1;
    text-align: center;
    color: #fff;
  }
  @media (width <= 896px) {
    flex: none;
    width: 100%;
    padding: 20px 24px;
  }
}
.area__hero--conv-btn--download {
  background: var(--point_c);
  box-shadow: 0 0 7.379px #F15252;
  &:hover {
    background: var(--dark_c);
    opacity: 1;
    box-shadow: 0 0 7.379px var(--dark_c);
  }
}
.area__hero--note {
  max-width: 854px;
  margin-top: 8px;
  margin-left: 1em;
  text-align: left;
  display: inline-block;
  font-size: 0.75rem; /* 12*/
  line-height: 1.4;
  color: #767676;
  text-indent: -1em;
  padding-block: 0 1em;
  mar
}
.area__hero--conv-btn--contact {
  background: var(--main_c);
  box-shadow: 0 0 7.379px rgba(6, 54, 153, 0.4);
  &:hover {
    background: var(--dark_c);
    opacity: 1;
    box-shadow: 0 0 7.379px var(--dark_c);
  }
}

.area__clients {
  max-width: 1380px;
  margin-inline: auto;
  margin-top: 5.2vw;
  padding-inline: 20px;
  text-align: center;
  container-type: inline-size;
  @media (width <= 896px) {
    margin-top: 50px;
  }
}
.area__clients--ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.25rem, 1.04vw + 1.008rem, 2.25rem); /* 36~20 */
  font-weight: 500;
  line-height: 1.4;
  color: var(--font_c);
  word-break: keep-all;
}

.area__clients--ttl_inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.c_color {
  color: var(--main_c);
  font-family: "Noto Sans JP", sans-serif;
}

.c_size {
  font-size: 1.5em;
  display: inline-block;
  color: var(--main_c);
  line-height: 1em;
  padding-bottom: 0.08em;
  @media (width <= 896px) {
    padding-bottom: 0.2em;
  }
}
.c_line {
  
}

.area__clients--list {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 2.5cqw;
  margin-top: 45px;
  @media (width <= 896px) {
    margin-top: 30px;
    grid-template-columns: repeat(3,1fr);
  }
  @media (width <= 480px) {
    margin-top: 16px;
    grid-template-columns: repeat(2,1fr);
    gap: 16px;
  }
}
.area__clients--item {
  img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.15));
  }
}


.area__solution {
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: 6.25vw 0; /* 120px/1920 */
  text-align: center;
  @media (width <= 896px) {
    padding-block: 60px 0; /* 120px/1920 */
  }
}
.area__solution--ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.5rem, 1.04vw + 1.258rem, 2.5rem); /* 24-40 */
  font-weight: 500;
  line-height: 1.3;
  color: var(--font_c);
  word-break: keep-all;
}
.area__solution--list {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  container-type: inline-size;
  margin-top: 2vw;
  @media (width <= 896px) {
    grid-template-columns: repeat(2,1fr);
    row-gap: 15px;
  }
}
.area__solution--item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-inline: 30px;
  border-inline: 1px solid #fff;
  @media (width <= 480px) {
    padding-inline: 14px;
    gap: 5px;
  }
  img {
    width: 66px;
    height: 66px;
  }
}
.area__solution--item-ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.063rem, 0.45vw + 0.956rem, 1.5rem);/*17-24*/
  font-weight: 500;
  color: var(--dark_c);
  line-height: 1.2;
}
.area__solution--item-txt {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.13vw + 0.844rem, 1rem);/*14-16*/
  font-weight: 500;
  color: var(--font_c);
  line-height: 2.4;
  min-height: 76px;
  text-align: justify;
  @media (width <= 896px) {
    line-height: 1.8em;
  }
}


.area__reason {
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: 6.25vw 0; /* 120px/1920 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  @media (width <= 896px) {
    padding-block: 60px 0;
    gap: 24px;
  }
}
.area__reason--balloon {
  position: relative;
  max-width: 1120px;
  width: 100%;
  padding: 30px 60px;
  border-radius: 999px;
  background: var(--main_c);
  text-align: center;
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border-width: 14px 10px 0 10px;
    border-style: solid;
    border-color: var(--main_c) transparent transparent transparent;
  }
  @media (width <= 896px) {
    padding: 20px 24px;
  }
  > p {
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: clamp(1.375rem, 0.218rem + 2.0661vw, 2rem); /* 32-22(1380-896) */
    font-weight: 700;
    line-height: 1.6;
    color: #fff;
  }
}
.area__reason--body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  @media (width <= 896px) {
    gap: 16px;
  }
}
.area__reason--catch {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 40px;
  @media (width <= 896px) {
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
}
.area__reason--catch-item {
  display: inline-flex;
  align-items: flex-end;
  gap: 5px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.5rem, -0.351rem + 3.3058vw, 2.5rem); /* 40-24(1380-896) */
  font-weight: 700;
  line-height: 1.8;
  color: var(--dark_c);
  white-space: nowrap;
}
.area__reason--catch-mark {
  font-size: clamp(1.875rem, -0.439rem + 4.1322vw, 3.125rem); /* 50-30(1380-896) */
  line-height: 1.6;
  border-bottom: 4px solid var(--main_c);
}
.area__reason--desc {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1rem, 0.074rem + 1.6529vw, 1.5rem); /* 24-16(1380-896) */
  font-weight: 500;
  line-height: 1.8;
  color: var(--font_c);
  text-align: center;
  word-break: keep-all;
}
.area__reason--list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.area__reason--item {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 20px 40px;
  border-radius: 20px;
  background: var(--bg02_c);
  @media (width <= 896px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 20px;
  }
}
.area__reason--item-ttl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, 0.431rem + 1.2397vw, 1.5rem); /* 24-18(1380-896) */
  font-weight: 700;
  line-height: 1.6;
  color: var(--font_c);
  white-space: nowrap;
  @media (width <= 896px) {
    white-space: normal;
  }
}
.area__reason--item-mark {
  font-size: clamp(1.75rem, -0.217rem + 3.5124vw, 2.8125rem); /* 45-28(1380-896) */
  line-height: 1.5;
  color: var(--main_c);
}
.area__reason--item-txt {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.9375rem, 0.359rem + 1.0331vw, 1.25rem); /* 20-15(1380-896) */
  font-weight: 500;
  line-height: 2.3;
  color: var(--font_c);
  @media (width <= 896px) {
    line-height: 1.8em;
  }
}

#change {
  position: relative;
  &::before {
    z-index: 10;
    content: "";
    background-color: var(--bg02_c);
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom:0px;
  }
}

.area__change {
  width: calc(100% - 5.2vw);
  margin-inline: auto;
  margin-top: 8.85vw; /* 170px/1920 */
  padding: 70px 40px 60px;
  border-radius: 40px;
  background: var(--main_c);
  text-align: center;
  position: relative;
  z-index: 20;
  @media (width <= 896px) {
    margin-top: 60px;
    padding: 40px 24px 32px;
    border-radius: 24px;
  }
}
.area__change--ttl {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.5rem, -0.351rem + 3.3058vw, 2.5rem); /* 40-24(1380-896) */
  font-weight: 500;
  line-height: 1.9;
  color: #fff;
  word-break: keep-all;
  @media (width <= 896px) {
    gap: 0px;
  }
}
.area__change--ttl-mark {
  font-size: clamp(1.75rem, -0.333rem + 3.719vw, 2.875rem); /* 46-28(1380-896) */
  line-height: 1.7;
  border-bottom: 4px solid #83DAFF;
}
.area__change--list {
  max-width: 1340px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
  margin-top: 48px;
  @media (width <= 896px) {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin-inline: auto;
    gap: 56px;
    margin-top: 32px;
    gap: 20px;
  }
}
.area__change--item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.area__change--item-img {
  position: relative;
  z-index: 1;
  margin-bottom: -30px;
  img {
    width: 100%;
    height: auto;
  }
  @media (width <= 896px) {
    margin-bottom: -24px;
    img {
      max-width: 200px;
    }
  }
}
.area__change--item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 45px 24px 28px;
  border-radius: 10px;
  background: #fff;
  @media (width <= 896px) {
    padding: 36px 20px 24px;
    gap: 18px;
  }
}
.area__change--item-ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.25rem, 0.556rem + 1.2397vw, 1.625rem); /* 26-20(1380-896) */
  font-weight: 500;
  color: var(--dark_c);
}
.area__change--item-inner {
  display: inline-block;
}
.area__change--item-compare {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
.area__change--item-row {
  display: flex;
  align-items: center;
  gap: 14px;
  @media (width <= 896px) {
    gap: 8px;
  }
  > dd {
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: clamp(0.875rem, 0.644rem + 0.4132vw, 1rem); /* 16-14(1380-896) */
    font-weight: 500;
    line-height: 1.6;
    color: var(--font_c);
    text-align: left;
  }
}
.area__change--item-tag {
  flex-shrink: 0;
  min-width: 60px;
  padding: 3px 10px;
  border-radius: 3px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.area__change--item-tag--before {
  background: var(--bg02_c);
  color: var(--main_c);
}
.area__change--item-tag--after {
  background: var(--main_c);
  color: #fff;
}



#task {
  background-color: var(--bg02_c);
}

.area__task {
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: 20px;
  padding-block: 6.25vw; /* 120px/1920 */
  text-align: center;
  @media (width <= 896px) {
    padding-block: 60px;
  }
}
.area__task--ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.5rem, -0.351rem + 3.3058vw, 2.5rem); /* 40-24(1380-896) */
  font-weight: 500;
  color: var(--font_c);
  word-break: keep-all;
  line-height: 1.6em;
}
.area__task--list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 40px;
  @media (width <= 896px) {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
    gap: 20px;
  margin-top: 20px;
  }
}
.area__task--item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.area__task--item-icon {
  position: relative;
  z-index: 1;
  width: 110px;
  height: 110px;
  margin-bottom: -44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #D9E7FB;
}
.area__task--item-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 60px 32px 32px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 7.379px rgba(94, 123, 202, 0.1);
  @media (width <= 896px) {
    gap: 20px;
  }
}
.area__task--item-ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.25rem, 0.556rem + 1.2397vw, 1.625rem); /* 26-20(1380-896) */
  font-weight: 500;
  color: var(--main_c);
}
.area__task--item-txt {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.644rem + 0.4132vw, 1rem); /* 16-14(1380-896) */
  font-weight: 500;
  line-height: 1.7;
  color: var(--font_c);
  text-align: left;
}
.area__task--item-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 32px;
  border-radius: 999px;
  background: var(--main_c);
  &:hover {
    background: var(--dark_c);
    opacity: 1;
  }
  > span {
    flex: 1 0 0;
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
  }
  > img {
    flex-shrink: 0;
    transform: scaleX(-1);
  }
}



.area__howto {
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: 20px;
  margin-block: 6.25vw; /* 120px/1920 */
  @media (width <= 896px) {
    margin-block: 50px 60px;
  }
}
.area__howto--head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  @media (width <= 896px) {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}
.area__howto--head-ttl {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.area__howto--head-ttl-en {
  font-family: 'Oswald', var(--font_normal);
  font-size: clamp(2.25rem, -0.758rem + 5.3719vw, 3.875rem); /* 62-36(1380-896) */
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--font_c);
}
.area__howto--head-ttl-ja {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.25rem, 0.44rem + 1.4463vw, 1.6875rem); /* 27-20(1380-896) */
  font-weight: 500;
  color: var(--main_c);
}
.area__howto--head-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 356px;
  padding: 20px 32px;
  border-radius: 999px;
  background: var(--main_c);
  &:hover {
    background: var(--dark_c);
    opacity: 1;
  }
  > span {
    flex: 1 0 0;
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
  }
  > img {
    flex-shrink: 0;
    transform: scaleX(-1);
  }
}
.area__howto--list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
  margin-top: 48px;
  @media (width <= 896px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
    margin-top: 32px;
  }
}
.area__howto--item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  @media (width <= 896px) {
    gap: 16px;
  }
}
.area__howto--item-img {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  img {
    width: 100%;
    height: auto;
    display: block;
  }
}
.area__howto--item-ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1rem, 0.537rem + 0.8264vw, 1.25rem); /* 20-16(1380-896) */
  font-weight: 700;
  color: var(--font_c);
  text-align: center;
}


#plan {
  background-color: var(--bg02_c);
  padding-block: 6.25vw;
  @media (width <= 896px) {
    padding-block: 50px 60px;
  }
}

.area__plan {
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  @media (width <= 896px) {
    flex-direction: column;
  }
}
.area__plan--head {
  flex: 0 0 386px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  @media (width <= 896px) {
    flex: none;
    width: 100%;
  }
}
.area__plan--head-ttl {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.area__plan--head-ttl-en {
  font-family: 'Oswald', var(--font_normal);
  font-size: clamp(2.25rem, -0.758rem + 5.3719vw, 3.875rem); /* 62-36(1380-896) */
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--font_c);
}
.area__plan--head-ttl-ja {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.25rem, 0.44rem + 1.4463vw, 1.6875rem); /* 27-20(1380-896) */
  font-weight: 500;
  color: var(--main_c);
}
.area__plan--head-txt {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.644rem + 0.4132vw, 1rem); /* 16-14(1380-896) */
  font-weight: 400;
  line-height: 2;
  color: var(--font_c);
}
.area__plan--head-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 356px;
  padding: 20px 32px;
  border-radius: 999px;
  background: var(--main_c);
  &:hover {
    background: var(--dark_c);
    opacity: 1;
  }
  > span {
    flex: 1 0 0;
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
  }
  > img {
    flex-shrink: 0;
    transform: scaleX(-1);
  }
}
.area__plan--list {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.area__plan--item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 42px 32px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 0 7.379px rgba(94, 123, 202, 0.1);
  @media (width <= 896px) {
    padding: 32px 24px;
  }
}
.area__plan--item--recommend {
  border: 2px solid var(--main_c);
}
.area__plan--item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.area__plan--item-ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.25rem, 0.556rem + 1.2397vw, 1.625rem); /* 26-20(1380-896) */
  font-weight: 500;
  color: var(--main_c);
}
.area__plan--item-badge {
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: 30px;
  background: #FFF0BE;
  border: 1px solid #EAC030;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: 0.9375rem;
  font-weight: 700;
  color: #DA8505;
}
.area__plan--item-txt {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.644rem + 0.4132vw, 1rem); /* 16-14(1380-896) */
  font-weight: 500;
  line-height: 1.7;
  color: var(--font_c);
}


.area_casestudy {
  max-width: 1380px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
  margin-top: 6.25vw; /* 120px/1920 */
  @media (width <= 896px) {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
.area_casestudy--head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  @media (width <= 896px) {
    /* head-btnをslider後ろに並べ替えるため、headの箱を解除して子要素を.area_casestudyの直接の子にする */
    display: contents;
  }
}
.area_casestudy--head-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
  @media (width <= 896px) {
    gap: 16px;
    order: 1;
  }
}
.area_casestudy--head-ttl {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.area_casestudy--head-ttl-en {
  font-family: 'Oswald', var(--font_normal);
  font-size: clamp(2.25rem, -0.758rem + 5.3719vw, 3.875rem); /* 62-36(1380-896) */
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--font_c);
}
.area_casestudy--head-ttl-ja {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.25rem, 0.44rem + 1.4463vw, 1.6875rem); /* 27-20(1380-896) */
  font-weight: 500;
  color: var(--main_c);
}
.area_casestudy--head-txt {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.644rem + 0.4132vw, 1rem); /* 16-14(1380-896) */
  font-weight: 400;
  line-height: 2;
  color: var(--font_c);
}
.area_casestudy--head-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 356px;
  padding: 20px 32px;
  border-radius: 999px;
  background: var(--main_c);
  &:hover {
    background: var(--dark_c);
    opacity: 1;
  }
  > span {
    flex: 1 0 0;
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
  }
  > img {
    flex-shrink: 0;
    transform: scaleX(-1);
  }
  @media (width <= 896px) {
    order: 3;
    margin-block: 32px 0;
    margin-inline: auto;
  }
}
.area_casestudy--slider {
  margin-block: 48px 0;
  max-width: 1380px;
  width: 100%;
  margin-inline: auto;
  position: relative;
  padding-block: 0 60px;
  @media (width <= 1430px) {
    width: calc(100% - 80px);
  }
  @media (width <= 896px) {
    order: 2;
    margin-block: 32px 0;
    padding-block: 0 30px;
    width: calc(100% - 48px);
  }
  .splide__list {
    align-items: stretch;
  }
  .splide__pagination {
    position: absolute;
    bottom: 0;
    width: 100%;
    gap: 8px;
  }
  .splide__pagination__page {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #CDD6E3;
    opacity: 1;
    &.is-active {
      background: var(--main_c);
      transform: scale(1);
    }
  }
}

.splide__arrow {
  position: absolute;
  top: 50%;
  z-index: 999;
  svg {
    fill: var(--main_c);
  }
}
.splide__arrow--next {
  right: -40px;
  transform: translateY(-50%);
}
.splide__arrow--prev {
  left: -40px;
  transform: rotate(180deg) translateY(45%);
}



.area_casestudy--item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.area_casestudy--item-img {
  width: 100%;
  aspect-ratio: 420 / 270;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
.area_casestudy--item-body {
  display: flex;
  flex-direction: column;
  gap: 25px;
  flex: 1 0 0;
  padding: 35px 30px;
  border-radius: 0 0 20px 20px;
  background: #fff;
  box-shadow: 0 0 7.379px rgba(94, 123, 202, 0.1);
  @media (width <= 896px) {
    padding: 24px 20px;
    gap: 18px;
  }
}
.area_casestudy--item-company {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.13vw + 0.844rem, 1rem); /* 14-16(1380-896) */
  font-weight: 500;
  color: var(--main_c);
}
.area_casestudy--item-ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.938rem, 0.19vw + 0.892rem, 1.125rem); /* 18-15(1380-896) */
  font-weight: 400;
  line-height: 1.7;
  color: var(--font_c);
}
.area_casestudy--item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  > li {
    padding: 9px 13px;
    border-radius: 30px;
    background: var(--bg02_c);
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--main_c);
  }
}



.area__column {
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: 20px;
  margin-block: 6.25vw 8.33vw; /* 120px, 160px/1920 */
  @media (width <= 896px) {
    margin-block: 50px 80px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
.area__column--head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  @media (width <= 896px) {
    /* head-btnをlist後ろに並べ替えるため、headの箱を解除して子要素を.area__columnの直接の子にする */
    display: contents;
  }
}
.area__column--head-ttl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  @media (width <= 896px) {
    order: 1;
  }
}
.area__column--head-ttl-en {
  font-family: 'Oswald', var(--font_normal);
  font-size: clamp(2.25rem, -0.758rem + 5.3719vw, 3.875rem); /* 62-36(1380-896) */
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--font_c);
}
.area__column--head-ttl-ja {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.25rem, 0.44rem + 1.4463vw, 1.6875rem); /* 27-20(1380-896) */
  font-weight: 500;
  color: var(--main_c);
}
.area__column--head-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 356px;
  padding: 20px 32px;
  border-radius: 999px;
  background: var(--main_c);
  &:hover {
    background: var(--dark_c);
    opacity: 1;
  }
  > span {
    flex: 1 0 0;
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
  }
  > img {
    flex-shrink: 0;
    transform: scaleX(-1);
  }
  @media (width <= 896px) {
    order: 3;
    margin-block: 32px 0;
    margin-inline: auto;
  }
}
.area__column--list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 48px;
  @media (width <= 896px) {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 32px;
    order: 2;
  }
}
.area__column--item {
  > a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    border-radius: 10px;
    background: #fff;
    &:hover {
      opacity: 0.7;
    }
    @media (width <= 480px) {
      flex-direction: column;
      align-items: stretch;
    }
  }
}
.area__column--item-img {
  flex: none;
  width: 210px;
  height: 160px;
  border-radius: 10px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  @media (width <= 480px) {
    width: 100%;
    height: auto;
    aspect-ratio: 210 / 160;
  }
}
.area__column--item-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 0 0;
  min-width: 0;
}
.area__column--item-date {
  font-family: 'Inter', var(--font_normal);
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.5;
  color: var(--font_c);
}
.area__column--item-ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1rem, 0.767rem + 0.4132vw, 1.25rem); /* 20-16(1380-896) */
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--font_c);
  word-break: keep-all;
}



#reasons {
  background: var(--main_c);
  padding-block: 6.25vw; /* 120px/1920 */
  @media (width <= 896px) {
    padding-block: 60px;
  }
}
.area__reasons {
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 1.319rem + 3.3058vw, 4.1875rem); /* 67-40(1380-896) */
}
.area__reasons--head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}
.area__reasons--head-en {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.25rem, 0.44rem + 1.4463vw, 1.6875rem); /* 27-20(1380-896) */
  font-weight: 500;
  color: #D3F6FF;
}
.area__reasons--head-ja {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.5rem, 0.464rem + 2.314vw, 3rem); /* 48-24(1380-896) */
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #fff;
  word-break: keep-all;
}
.area__reasons--body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.25rem, 1.581rem + 1.5504vw, 3.125rem); /* 50-36(1380-896) */
  width: 100%;
}
.area__reasons--list {
  display: flex;
  gap: clamp(1.5rem, 0.657rem + 1.9008vw, 2.5rem); /* 40-24(1380-896) */
  width: 100%;
  @media (width <= 896px) {
    flex-direction: column;
  }
}
.area__reasons--item {
  flex: 1 1 0;
  background: #fff;
  border-radius: 20px;
  padding: 30px 30px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  text-align: center;
  @media (width <= 896px) {
    padding: 24px 24px 40px;
  }
}
.area__reasons--item-img {
  width: 100%;
  aspect-ratio: 860 / 488;
  border-radius: 10px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
}
.area__reasons--item-ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.125rem, 0.5vw + 1.008rem, 1.438rem); /* 23-18(1380-896) */
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3em;
  color: #2E52B5;
  word-break: keep-all;
}
.area__reasons--item-txt {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(0.875rem, 0.644rem + 0.4132vw, 1rem); /* 16-14(1380-896) */
  line-height: 1.8;
  color: var(--font_c);
  text-align: justify;
}
.area__reasons--btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 356px;
  padding: 20px 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #fff;
  &:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
  }
  > span {
    flex: 1 0 0;
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
  }
  > img {
    flex-shrink: 0;
    transform: scaleX(-1);
  }
}



#news {
  background: #fff;
  padding-block: 6.25vw; /* 120px/1920 */
  @media (width <= 896px) {
    padding-block: q60px;
  }
}
.area__news {
  max-width: 1380px;
  margin-inline: auto;
  padding-inline: 20px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
  @media (width <= 896px) {
    flex-direction: column;
    gap: 32px;
  }
}
.area__news--head {
  flex: 0 0 356px;
  display: flex;
  flex-direction: column;
  gap: 44px;
  @media (width <= 896px) {
    /* head-btnをlist後ろに並べ替えるため、headの箱を解除して子要素を.area__newsの直接の子にする */
    display: contents;
  }
}
.area__news--head-ttl {
  display: flex;
  flex-direction: column;
  gap: 5px;
  @media (width <= 896px) {
    order: 1;
  }
}
.area__news--head-ttl-en {
  font-family: 'Oswald', var(--font_normal);
  font-size: clamp(2.25rem, -0.758rem + 5.3719vw, 3.875rem); /* 62-36(1380-896) */
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--font_c);
}
.area__news--head-ttl-ja {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1.25rem, 0.44rem + 1.4463vw, 1.6875rem); /* 27-20(1380-896) */
  font-weight: 500;
  color: var(--main_c);
}
.area__news--cat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  @media (width <= 896px) {
    order: 2;
    flex-wrap: wrap;
    flex-direction: row;
  }
}
.area__news--cat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.02em;
  color: rgba(22, 42, 71, 0.5);
  margin-right: 24px;
  &::before {
    content: '';
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(22, 42, 71, 0.3);
  }
  &.is-active {
    color: var(--font_c);
    &::before {
      background: var(--main_c);
      border-color: var(--main_c);
    }
  }
}
.area__news--head-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 32px;
  border-radius: 999px;
  background: var(--main_c);
  &:hover {
    background: var(--dark_c);
    opacity: 1;
  }
  > span {
    flex: 1 0 0;
    font-family: 'Zen Kaku Gothic New', var(--font_normal);
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
  }
  > img {
    flex-shrink: 0;
    transform: scaleX(-1);
  }
  @media (width <= 896px) {
    order: 4;
    max-width: 356px;
    margin-inline: auto;
  }
}
.area__news--list {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  @media (width <= 896px) {
    order: 3;
  }
}
.area__news--item {
  border-bottom: 1px solid #CCD5E3;
  > a {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 25px;
    &:hover {
      opacity: 0.7;
    }
    @media (width <= 896px) {
      padding: 20px 4px;
    }
  }
}
.area__news--item-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.area__news--item-date {
  font-family: 'Inter', var(--font_normal);
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.5;
  color: var(--font_c);
}
.area__news--item-tag {
  padding: 9px 13px;
  border-radius: 30px;
  background: var(--bg02_c);
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--main_c);
}
.area__news--item-ttl {
  font-family: 'Zen Kaku Gothic New', var(--font_normal);
  font-size: clamp(1rem, 0.892rem + 0.1653vw, 1.125rem); /* 18-16(1380-896) */
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--font_c);
  word-break: keep-all;
}


#cvarea {
  margin-block: 0 6.25vw; /* 120px/1920 */
  @media (width <= 896px) {
    margin-block: 0 60px;
  }
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 50%;
    background-color: var(--main_c);
    position: absolute;
    top: 0px;
    left: 0px;
  }
}