@charset "UTF-8";

/* layout
----------------------------------------------------------- */
.l-wrap::before {
  background-blend-mode: lighten;
  background-color: rgba(255, 255, 255, 0.5);
}

.l-section__top {
  padding-inline: 20px;
}

.l-section.-whole {
  max-width: 3000px;
  margin-block: 160px;
  margin-inline: auto;
  padding: 0;
}

.l-section.-whole .l-section__inner {
  max-width: 100%;
}

.l-section__inner.-c-economy {
  padding: 48px;
}

.l-section__bottom {
  margin-top: 120px;
  padding-inline: 20px;
}

.l-imgclm {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  margin-inline: auto 0;
}

.l-imgclm.-reverse {
  flex-direction: row-reverse;
  justify-content: end;
}

.l-imgclm .l-imgclm_img {
  width: clamp(846px, 57vw, 1652px);
}

.l-imgclm .l-imgclm_img img {
  border-radius: 0 12px 12px 0;
}

.l-imgclm.-reverse .l-imgclm_img img {
  border-radius: 12px 0 0 12px;
}

.l-banner {
  max-width: 750px;
  margin-top: 80px;
  margin-inline: auto;
}

.l-banner-img {
  display: block;
  background-image: url(/common/img/bnr_lg-pc.png);
  background-repeat: no-repeat;
  background-size: cover;
  object-fit: cover;
  aspect-ratio: 375 / 64;
  border-radius: 12px;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2);
  transition: 0.3s all;
}

@media (max-width:767px) {
  .l-section.-whole {
    margin-block: 80px;
  }

  .l-section__top {
    padding-inline: 24px;
  }

  .l-imgclm:not(.-reverse) {
    padding-right: 36px;
    align-items: start;
  }

  .l-imgclm.-reverse {
    padding-left: 36px;
    align-items: end;
  }

  .l-imgclm,
  .l-imgclm.-reverse {
    flex-direction: column;
  }

  .l-imgclm .l-imgclm_img {
    width: 100%;
  }

  .l-imgclm .l-imgclm_img img {
    border-radius: 0 8px 8px 0;
  }

  .l-imgclm.-reverse .l-imgclm_img img {
    border-radius: 8px 0 0 8px;
  }

  .l-imgclm.-reverse .l-imgclm_txt {
    padding: 32px 36px 0 0;
  }

  .l-imgclm .l-imgclm_txt {
    padding: 32px 0 0 36px;
  }

  .l-banner {
    margin-top: 56px;
    padding-inline: 36px;
  }

  .l-banner-img {
    background-image: url(/common/img/bnr_lg-sp.png);
    aspect-ratio: 101 / 40;
    border-radius: 8px;
  }

  .l-section__inner.-c-economy {
    padding: 40px 16px;
  }

  .l-section__inner.-c-economy .l-column.-reverse {
    flex-direction: column-reverse;
  }

  .l-section__inner.-c-economy .l-column.-reverse .l-column__img {
    margin-top: 0;
  }

  .l-section__bottom {
    margin-top: 80px;
    padding-inline: 20px;
  }
}

@media (min-width:768px) {
  .l-imgclm .l-imgclm_txt {
    width: min(100%, 594px);
    padding-inline: min(64px, 4.4vw);
  }
}

@media (min-width:768px) and (max-width:1200px) {
  .l-imgclm {
    align-items: start;
  }
}

@media (hover: hover) {
  .l-banner-img:hover {
    opacity: 0.7;
  }
}

/* title
----------------------------------------------------------- */
.l-title.-focus-head {
  flex-direction: column;
  padding-block: 64px 14px;
}

.l-title.-focus-head .l-title__text {
  gap: 63px;
  flex-direction: column;
  justify-content: center;
}

.l-title.-lower .p-focus-title {
  font-size: min(5.2rem, 8.4vw);
  font-family: "Montserrat", sans-serif;
  font-style: italic;
  font-weight: 500;
  color: #0168CE;
  line-height: 1.2;
  letter-spacing: 3px;
}

.l-title.-lower .p-focus-cap {
  font-size: 5.6rem;
  font-weight: 500;
  letter-spacing: 5px;
}

.p-focus-read {
  font-size: 2rem;
  font-weight: 500;
  text-align: center;
  color: #0168CE;
  line-height: 1.6;
  letter-spacing: 2px;
}

.p-focus-read+p {
  letter-spacing: 1px;
}

.top-heading.-focus {
  font-size: min(4.8rem, 4vw);
}

.top-heading.-focus .top-heading__en {
  margin-bottom: 0;
  font-size: min(2.8rem, 2.4vw);
  font-family: "Roboto", sans-serif;
  color: rgba(1, 104, 206, 0.5);
  line-height: 1;
  font-weight: 400;
}

.top-heading.-focus .top-heading__en::before {
  display: none;
}

.top-heading.-focus .top-heading__ja {
  color: #0168CE;
}

.p-imgclm_title {
  margin-bottom: 16px;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}

@media (max-width:767px) {
  .l-title.-focus-head {
    padding-block: 48px 14px;
    padding-inline: 0;
  }

  .l-title.-lower .p-focus-title {
    font-size: min(4rem, 11.2vw);
    text-align: center;
  }

  .l-title.-lower .p-focus-cap {
    font-size: min(3rem, 7vw);
    letter-spacing: 1px;
  }

  .l-title.-focus-head .l-title__text {
    gap: 28px;
  }

  .p-focus-read {
    font-size: min(1.8rem, 4.8vw);
    letter-spacing: 1px;
    line-height: 1.7;
  }

  .top-heading.-focus {
    font-size: min(3.2rem, 10vw);
  }

  .top-heading.-focus .top-heading__en {
    font-size: 1.8rem;
  }
}

/* grid
----------------------------------------------------------- */
.c-card-list.-col4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width:767px) {
  .c-card-list.-col4 {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* card
----------------------------------------------------------- */
.p-focus-card .c-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  position: relative;
  padding: 16px;
  border-radius: 8px;
}

.p-focus-card .c-card img {
  border-radius: 6px;
}

.p-focus-card .c-card::after {
  position: absolute;
  bottom: 16px;
  left: 50%;
  translate: -50% 0;
  content: "";
  width: 14px;
  height: 14px;
  mask-image: url(/focus-area/img/icon_arrow_down.svg);
  mask-repeat: no-repeat;
  transition: .3s;
  background-color: #0168ce;
}

.p-focus-card__title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.p-focus-card__title span:nth-of-type(1) {
  font-size: min(1.6rem, 1.6vw);
  font-style: italic;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  color: rgba(1, 104, 206, 0.5);
  line-height: 1;
}

.p-focus-card__title span:nth-of-type(2) {
  font-size: min(2.6rem, 2.5vw);
  font-weight: 500;
  color: #0168CE;
}

@media (max-width:767px) {
  .p-focus-card .c-card {
    flex-direction: row;
  }

  .p-focus-card .c-card picture {
    max-width: 96px;
  }

  .p-focus-card__title {
    align-items: start;
  }

  .p-focus-card__title span:nth-of-type(1) {
    font-size: 1.3rem;
  }

  .p-focus-card__title span:nth-of-type(2) {
    font-size: 2rem;
  }

  .p-focus-card .c-card::after {
    top: 50%;
    bottom: 0;
    left: auto;
    right: 16px;
    translate: 0 -50%;
  }
}

@media (min-width:768px) {
  .p-focus-card__btm {
    margin-bottom: 30px;
  }
}

@media (hover: hover) {
  .p-focus-card .c-card:hover {
    background-color: #0168ce;
  }

  .p-focus-card .c-card:hover .p-focus-card__title span {
    color: #fff;
  }

  .p-focus-card .c-card:hover::after {
    bottom: 12px;
    background-color: #fff;
  }
}

@media (hover: none) {
  .p-focus-card .c-card:active {
    background-color: #0168ce;
  }

  .p-focus-card .c-card:active .p-focus-card__title span {
    color: #fff;
  }

  .p-focus-card .c-card:active::after {
    bottom: 12px;
    background-color: #fff;
  }
}