@charset "utf-8";
/*--------------------------------------------------------------------------------

  main visual

--------------------------------------------------------------------------------*/
.mv { position: relative; }
@media not (max-width: 760px) {
  .mv {
    display: grid;
    grid-template-columns: minmax(var(--side-space), 1fr) repeat(7, minmax(0, calc((var(--base-width) / 7) * 1px))) minmax(var(--side-space), 1fr);
    background: url("../img/top/mv_bg.webp") no-repeat center center;
    background-size: cover;
  }
  .mv_catch { grid-area: 1 / 2 / 2 / 7; align-self: end; padding: var(--space-3l) 0 var(--space-s) 0; }
  .mv_txt { grid-area: 2 / 2 / 3 / 7; align-self: start; padding-bottom: var(--space-3l); }
  .mv_img { grid-area: 1 / 5 / 4 / 9; align-self: center; justify-self: end; padding: var(--space-2l) 0; }
  .mv_area-request { grid-area: 3 / 2 / 4 / 9; align-self: end; }
}
@media (max-width: 760px) {
  .mv {
    padding-top: var(--space-l);
    display: grid;
    grid-template-columns: minmax(var(--side-space), 1fr) repeat(5, minmax(0, calc((var(--base-width) / 5) * 1px))) minmax(var(--side-space), 1fr);
    background: url("../img/top/mv_bg-sp.webp") no-repeat center center;
    background-size: cover;
  }
  .mv_catch { grid-area: 2 / 2 / 4 / 6; align-self: end; }
  .mv_txt { grid-area: 4 / 2 / 5 / 6; padding-top: var(--space-s); }
  .mv_img { grid-area: 1 / 2 / 3 / 7; justify-self: end; padding-left: calc(var(--side-space) * 2); }
  .mv_area-request { grid-area: 5 / 2 / 6 / 7; align-self: end; margin-top: var(--space-l); }
}

/*--------------------------------------------------------------------------------
  .mv_catch
--------------------------------------------------------------------------------*/
@media not (max-width: 760px) { .mv_catch { --fs: min(8.8cqw, calc(2.2 * var(--fs-2l))); } }
@media (max-width: 760px) { .mv_catch { --fs: min(14cqw, calc(1.8 * var(--fs-2l))); } }
.mv_catch {
  position: relative;
  z-index: 2;
  font-family: var(--ff-go);
  font-weight: 700;
  line-height: var(--line-height-s);
  display: flex;
  flex-direction: column;
  color: #FFF;
  container-type: inline-size;
}
.mv_catch-item { font-size: var(--fs); }
@media (max-width: 760px) {
  .mv_catch { margin-top: 4rem; }
}

/*--------------------------------------------------------------------------------
  .mv_txt
--------------------------------------------------------------------------------*/
.mv_txt {
  position: relative;
  z-index: 2;
  font-family: var(--ff-go);
  font-weight: 500;
  font-size: var(--fs-m);
  display: flex;
  flex-direction: column;
  color: #FFF;
  opacity: 0;
}
.mv_txt.is-active {
  animation: mv-txt 1.8s var(--cubic-bezier) forwards;
}
@keyframes mv-txt {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*--------------------------------------------------------------------------------
  .mv_img
--------------------------------------------------------------------------------*/
@media not (max-width: 760px) {
  .mv_img {
    width: min(calc(540 / var(--base-width) * 100vw), 540px);
  }
} 
@media (max-width: 760px) {
  .mv_img { width: min(100%, 600px); }
}

/*--------------------------------------------------------------------------------
  .mv-slider
--------------------------------------------------------------------------------*/
.mv-slider {
  opacity: 0;
  background: url("../img/top/mv_oval.webp") no-repeat center center;
  background-size: 100%;
}
.mv-slider.is-active {
  animation: 0.8s mv-slider-active forwards;
}
.mv-slider_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv-slider_item.swiper-slide-duplicate-active .mv-slider_img {
  opacity: 1;
}
@keyframes mv-slider-active {
  from { opacity: 0; }
  to { opacity: 1; }
}

/*--------------------------------------------------------------------------------
  .mv_area-request
--------------------------------------------------------------------------------*/
:root { --mv-request-pd: var(--space-2s); }
@media (max-width: 500px) { :root { --mv-request-pd: calc(var(--space-2s) + (var(--side-space) - var(--space-2s))); } }
.mv_area-request {
  container-type: inline-size;
  position: relative;
  margin-bottom: calc(-1 * var(--mv-request-pd));
}
.mv_area-request:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #FFF;
  position: absolute;
  right: 100%;
  top: 0;
}
.mv_request {
  background-color: #FFF;
  border-radius: 0 0.4rem 0.4rem 0;
  min-width: 50%;
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--side-space);
  row-gap: 1.25rem;
  padding: var(--mv-request-pd);
  padding-left: 0;
}
.mv_request-txt {
  font-family: var(--ff-go);
  font-weight: 500;
  font-size: var(--fs-s);
  line-height: var(--line-height-s);
}
.mv_request-btn {
  --btn-fs: 1em;
  --btn-width: 100%;
  --btn-cgap: 1em;
  --btn-txt-shrink: 0;
  --btn-txt-pd-side: 0;
  flex-grow: 0.25;
  text-align: right;
}
@media (max-width: 760px) {
  .mv_request {
    width: 100%;
  }
}
@media not (max-width: 500px) {
  .mv_request-txt-inblock {
    display: block;
  }
}
@media (max-width: 500px) {
  .mv_request {
    flex-wrap: wrap;
  }
  .mv_request-btn {
    width: 100%;
  }
}
@media (max-width: 760px) and (not (max-width: 500px)) {
  .mv_request {
    font-size: min(3.25cqw, 1rem);
  }
}

/*--------------------------------------------------------------------------------

  mission

--------------------------------------------------------------------------------*/
.mission {
  background-color: var(--bg-primary);
  padding: calc(var(--space-2l) + var(--mv-request-pd)) 0 var(--space-2l) 0;
  overflow: hidden;
}
.mission_container {
  display: grid;
}
@media not (max-width: 760px) {
  .mission_container {
    grid-template-columns: auto auto 1fr;
    grid-template-areas: 
      "mission-hd mission-hd mission-img02"
      "mission-img01 mission-content mission-content"
      "mission-img01 mission-content mission-content";
    column-gap: var(--space-l);
    row-gap: var(--space-l);
  }
  .mission_hd { grid-area: mission-hd; }
  .mission_area-img.-left { grid-area: mission-img01; }
  .mission_area-img.-right { grid-area: mission-img02; }
  .mission_content { grid-area: mission-content; align-self: center; }
}
@media (max-width: 760px) {
  .mission_container {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    row-gap: var(--space-l);
  }
  .mission_hd { grid-area: 1 / 1 / 2 / 2; }
  .mission_area-img.-left,
  .mission_area-img.-right { grid-area: 2 / 1 / 3 / 2; justify-self: center; }
  .mission_content { grid-area: 3 / 1 / 4 / 2; } 
}

/*--------------------------------------------------------------------------------
  .mission_area-img
--------------------------------------------------------------------------------*/
@media not (max-width: 760px) { .mission_area-img { --img-break-point: 1400; --img-width: 220; } }
@media (max-width: 760px) { .mission_area-img { --img-break-point: 640; --img-width: 240; } }
.mission_area-img {
  position: relative;
}
.mission_mask-img {
  width: min(calc(var(--img-width) / var(--img-break-point) * 100vw), calc(var(--img-width) * 1px));
  aspect-ratio: 11 / 13;
  mask-image: var(--mask_oval);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: cover;
}
.mission_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mission_area-img.-right .mission_area-img_inner:before {
  content: "";
  position: absolute;
  left: min(calc(-1 * (65 / var(--img-break-point) * 100vw)), 65px);
  top: 0;
  width: min(calc(150 / var(--img-break-point) * 100vw), 150px);
  aspect-ratio: 11 / 13;
  mask-image: var(--mask_oval-line);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: cover;
  background-color: var(--color-primary-light);
}
@media not (max-width: 760px) {
  .mission_area-img.-left {
    padding-left: min(calc(60 / var(--img-break-point) * 100vw), 60px);
  }
  .mission_area-img.-right {
    justify-self: end;
    transform: translateX(min((80 / var(--img-break-point) * 100vw), 80px)) translateY(-15%);
    margin-bottom: -50%;
  }
  .mission_mask-img.-left {
    position: absolute;
    bottom: 0;
    left: min(calc(-1 * (80 / var(--img-break-point) * 100vw)), 80px);
    z-index: 2;
  }
}
@media (max-width: 760px) {
  .mission_area-img.-left,
  .mission_area-img.-right {
    width: min(130%, 800px);
    position: relative;
  }
  .mission_area-img.-left {
    padding-top: var(--space-2s);
  }
  .mission_mask-img.-left {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
  }
  .mission_area-img.-right .mission_area-img_inner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
  }
}

/*--------------------------------------------------------------------------------
  .mission_normaliz
--------------------------------------------------------------------------------*/
.mission_normaliz {
  container-type: inline-size;
  aspect-ratio: 11 / 13;
  background: url("../img/top/mission_normaliz-bg.webp") no-repeat center center;
  background-size: 100%;
  display: grid;
  place-content: center;
  place-items: center;
  color: #FFF;
  line-height: var(--line-height-2s);
}
.mission_normaliz-en {
  font-size: 9.5cqw;
  font-weight: 700;
}
.mission_normaliz-jp {
  font-size: 4.5cqw;
  font-family: var(--ff-go);
  font-weight: 500;
}
@media not (max-width: 760px) {
  .mission_normaliz {
    width: min(calc(400 / var(--img-break-point) * 100vw), 400px);
  }
}
@media (max-width: 760px) {
  .mission_normaliz {
    width: min(60%, 480px);
    margin-inline: auto;
  }
}

/*--------------------------------------------------------------------------------
  .mission_lead
--------------------------------------------------------------------------------*/
.mission_lead {
  grid-area: style-lead;
  font-family: var(--ff-go);
  font-weight: 600;
  font-size: var(--fs-l);
  line-height: var(--line-height-m);
  margin-bottom: var(--space-s);
}

/*--------------------------------------------------------------------------------
  .mission_btn
--------------------------------------------------------------------------------*/
.mission_btn {
  margin-top: var(--space-m);
  font-family: var(--ff-go);
  font-weight: 500;
  font-size: 1.05rem;
}

/*--------------------------------------------------------------------------------

  information

--------------------------------------------------------------------------------*/
.info {
  padding: var(--space-2l) 0;
}
.info:has(.info_content) {
  display: grid;
}
@media not (max-width: 1000px) {
  .info:has(.info_content) {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
      "info-hd info-content"
      "info-btn info-content";
    column-gap: var(--space-2l);
  }
  .info_hd { grid-area: info-hd; margin-bottom: var(--space-m); }
  .info_btn { grid-area: info-btn; align-self: start; }
  .info_content { grid-area: info-content; }
}
@media (max-width: 1000px) {
  .info_hd { margin-bottom: var(--space-m); }
  .info_btn { margin-top: var(--space-l); justify-self: center; }
}

/*--------------------------------------------------------------------------------

  style

--------------------------------------------------------------------------------*/
.style {
  background: var(--bg-primary);
  background: linear-gradient(180deg, rgba(var(--rgb-bg-primary) / 1) 0%, rgba(255 255 255 / 1) 100%);
  padding: var(--space-2l) 0 var(--space-l) 0;
  overflow: hidden;
}
.style_content {
  display: grid;
  margin-top: var(--space-m);
}
.style_lead { grid-area: style-lead; align-self: end; }
.style_txt { grid-area: style-txt; align-self: start; }
.style_area-img { grid-area: style-img; align-self: center; justify-self: center; }
@media not (max-width: 1000px) {
  .style_content {
    grid-template-areas: 
      "style-lead style-img"
      "style-txt style-img";
    gap: var(--space-m) var(--space-l);
  }
}
@media (max-width: 1000px) and (not (max-width: 760px)) {
  .style_content {
    grid-template-areas: 
      "style-lead style-lead"
      "style-txt style-img";
    gap: var(--space-m) var(--space-l);
  }
}
@media (max-width: 760px) {
  .style_content {
    grid-template-areas: 
      "style-lead"
      "style-img"
      "style-txt";
  }
}

/*--------------------------------------------------------------------------------
  .style_lead
--------------------------------------------------------------------------------*/
.style_lead {
  font-family: var(--ff-go);
  font-weight: 600;
  font-size: var(--fs-2m);
  line-height: var(--line-height-m);
}
.style_lead-highlight {
  display: inline-block;
  color: var(--color-primary);
  font-size: var(--fs-2m);
  font-weight: 700;
}

/*--------------------------------------------------------------------------------
  .style_area-img
--------------------------------------------------------------------------------*/
@media not (max-width: 760px) {
  .style_img {
    max-width: min(calc(640 / 1400 * 100vw), 640px);
    margin: min(calc(-1 * (60 / 1400 * 100vw)), -60px) min(calc(-1 * (30 / 1400 * 100vw)), -30px);
  }
}
@media (max-width: 760px) {
  .style_area-img {
    text-align: center;
    padding: var(--space-3s) 0;
    margin: 0 clamp(calc(-1 * (30 / 400 * 100vw)), calc(-1 * (30 / 760 * 100vw)), -30px);
  }
  .style_img {
    width: min(100%, 720px);
  }
}

/*--------------------------------------------------------------------------------

  loop

--------------------------------------------------------------------------------*/
@media not (max-width: 760px) { .loop { --fs: min(8.8cqw, calc(2 * var(--fs-6l))); --speed: 50s; } }
@media (max-width: 760px) { .loop { --fs: min(14cqw, calc(2 * var(--fs-6l))); --speed: 40s; } }
@media (max-width: 640px) { .loop { --speed: 35s; } }
.loop {
  line-height: 1;
  overflow: hidden;
  display: flex;
  white-space: nowrap;
  container-type: inline-size;
}
.loop-list {
  padding: min(4cqi, var(--space-l)) 0 min(12cqi, var(--space-2l)) 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  animation: request-loop var(--speed) linear infinite;
  will-change: transform;
}
.loop-list_item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-size: var(--fs);
}
.loop-list_txt {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--bg-primary2);
}
.loop-list_area-img {
  flex-shrink: 0;
}
.loop-list_img {
  width: inherit;
  max-width: inherit;
  height: 1.75em;
  margin: 0 var(--space-2s);
}
@keyframes request-loop {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/*--------------------------------------------------------------------------------

  request

--------------------------------------------------------------------------------*/
@media not (max-width: 760px) { .request { --fs: min(1.8cqw, 1rem); --border-width: min(1cqw, 12px); } }
@media (max-width: 760px) { .request { --fs: 1rem; --border-width: min(2cqw, 12px); } }
.request {
  container-type: inline-size;
  background-color: var(--bg-primary2);
  padding: var(--border-width);
  border-radius: 0.6rem;
}
.request_link {
  --link-color: #FFF;
  --link-color-hover: #FFF;
  --link-deco: none;
  --link-deco-hover: none;
  font-size: var(--fs);
  display: grid;
  color: #FFF;
  border-radius: 0.3rem;
  background: var(--color-primary-light);
  background: linear-gradient(145deg,rgba(var(--rgb-color-primary-light) / 1) 50%, rgba(var(--rgb-color-secondary-lighter) / 1) 90%);
}
@media not (max-width: 760px) {
  .request_link {
    grid-template-columns: auto 1fr;
    grid-template-areas: 
      "request-img request-ttl request-btn"
      "request-img request-txt request-btn";
    column-gap: var(--inner-space-l);
    row-gap: min(1.5cqw, 1.5rem);
    padding: var(--space-2s) var(--inner-space-m);
  }
  .request_mask-img { grid-area: request-img; }
  .request_ttl { grid-area: request-ttl; align-self: end; }
  .request_txt { grid-area: request-txt; align-self: start; }
  .request_btn { grid-area: request-btn; align-self: center; }
}
@media (max-width: 760px) {
  .request_link { padding: var(--inner-space-l); }
  .request_mask-img { margin: var(--space-s) 0; }
  .request_btn { margin-top: var(--space-s); justify-self: end; }
}

/*--------------------------------------------------------------------------------
  .request_ttl
--------------------------------------------------------------------------------*/
.request_ttl {
  font-family: var(--ff-go);
  font-weight: 700;
  font-size: min(7.5cqw, var(--fs-3l));
  line-height: var(--line-height-2s);
}
.request_ttl-sub {
  font-weight: 500;
  font-size: 60%;
}

/*--------------------------------------------------------------------------------
  .request_mask-img
--------------------------------------------------------------------------------*/
.request_mask-img {
  width: min(calc(var(--img-width) / var(--img-break-point) * 100vw), calc(var(--img-width) * 1px));
  aspect-ratio: 11 / 13;
  mask-image: var(--mask_oval);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: cover;
  margin-inline: auto;
}
.request_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media not (max-width: 760px) {
  .request_mask-img {
    width: min(calc(240 / var(--base-width) * 100vw), 240px);
    margin-top: calc(-1 * (var(--space-2s) + var(--inner-space-l)));
  }
}
@media (max-width: 760px) {
  .request_mask-img {
    width: min(70%, 360px);
  }
}

/*--------------------------------------------------------------------------------
  .request_btn
--------------------------------------------------------------------------------*/
.request_btn { line-height: 1; }
@media (max-width: 760px) {
  .request_btn {
    margin-right: calc(-1 * (var(--inner-space-l) - var(--inner-space-m)));
    margin-bottom: calc(-1 * (var(--inner-space-l) - var(--inner-space-m)));
  }
}

/*--------------------------------------------------------------------------------

  links

--------------------------------------------------------------------------------*/
.links {
  --link-color: #FFF;
  --link-color-hover: #FFF;
  --link-deco: none;
  --link-deco-hover: none;
  padding: clamp(var(--space-l), 10cqi, var(--space-2l)) 0;
  display: grid;
  column-gap: var(--space-2s);
}
.links_item {
  border-radius: 0.6rem;
  position: relative;
  overflow: hidden;
  container-type: inline-size;
}
@media not (max-width: 760px) {
  .links { grid-template-columns: repeat(3, 1fr); }
  .links_item {
    aspect-ratio: 5 / 4;
    font-size: min(1.7cqw, 1rem);
  }
}
@media (max-width: 760px) {
  .links { row-gap: var(--space-s); }
  .links_item { aspect-ratio: 2 / 1; }
}
.links_link {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  padding: var(--inner-space-m);
}
.links_link * {
  position: relative;
  z-index: 5;
}
.links_area-img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.links_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.links_area-img:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background: rgb(var(--rgb-bg-black) / 0.6);
  background: linear-gradient(180deg,rgba(var(--rgb-black) / 0.5) 20%, rgba(var(--rgb-black) / 0) 80%);
}
.links_ttl {
  font-family: var(--ff-go);
  font-weight: 600;
  font-size: var(--fs-2l);
}
.links_btn {
  align-self: end;
  justify-self: end;
}