@charset "UTF-8";

.footer_links_01_links,
.footer_links_02_links {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =========================
   Responsive Utility
========================= */
@media only screen and (max-width: 640px) {
  .sp {
    display: unset;
  }

  :root {
    --content-width: 250;
    --em: 15;
  }

  .pc {
    display: none !important;
  }

  .reel-sp {
    overflow-x: scroll;
  }
}

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

  .pc {
    display: unset;
  }

  :root {
    --content-width: 1170;
    --em: 16;
  }
}


/* =========================
   Layout Grid
========================= */
.grid-outline,
.container {
  --full: minmax(5vw, 1fr);
  --content: min(92vw, 1170px);
  display: grid;
  overflow: hidden;
  grid-template-columns:
    [full-start] var(--full)
    [content-start] var(--content)
    [content-end] var(--full)
    [full-end];
}

.grid-outline > *,
.container > * {
  grid-column: content;
}

.grid-outline > .content-full,
.container > .content-full {
  grid-column-start: full-start;
  grid-column-end: full-end;
}

.grid-outline > .content-left,
.container > .content-left {
  grid-column-start: full-start;
  grid-column-end: content-end;
}

.grid-outline > .content-right,
.container > .content-right {
  grid-column-start: content-start;
  grid-column-end: full-end;
}

.grid-outline > .aside-left,
.container > .aside-left {
  grid-column-start: full-start;
  grid-column-end: content-start;
}

.grid-outline > .aside-right,
.container > .aside-right {
  grid-column-start: content-end;
  grid-column-end: full-end;
}

/* =========================
   Footer
========================= */
.footer_cv.cv-area {
  background-color: #eff6ff;
}

.footer_notice {
  background-color: #fff;
}

.footer_notice_list {
  padding-block: 20px;
}

.footer_notice_item {
  display: inline;
  word-break: break-all;
  margin-right: 1em;
  font-size: calc((13 / var(--em)) * 1rem);
}

.footer_logo {
  background-color: #f5f6fa;
  text-align: center;
}

@media only screen and (max-width: 640px) {
  .footer_logo {
    padding-block: min((50 / var(--content-width)) * 40vw, 50 * 1px);
  }
}

@media only screen and (min-width: 641px) {
  .footer_logo {
    padding-block: 40px;
  }
}

@media only screen and (max-width: 640px) {
  .footer_logo_img {
    width: min((220 / var(--content-width)) * 100vw, 220 * 1px);
  }
}

@media only screen and (min-width: 641px) {
  .footer_logo_img {
    width: 268px;
  }
}
.footer_links_01 {
  background-color: #071933;
}

@media only screen and (max-width: 640px) {
  .footer_links_01_links {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding-block: min((40 / var(--content-width)) * 100vw, 40 * 1px);
    font-size: calc((14 / var(--em)) * 1rem);
  }
}

@media only screen and (min-width: 641px) {
  .footer_links_01_links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    padding-block: min((40 / var(--content-width)) * 100vw, 40 * 1px);
    font-size: calc((14 / var(--em)) * 1rem);
  }
}

@media only screen and (min-width: 1026px) {
  .footer_links_01_links {
    font-size: calc((16 / var(--em)) * 1rem);
  }
}

.footer_links_01_links_item {
  gap: 1em;
}

@media only screen and (max-width: 640px) {
  .footer_links_01_links_item {
    text-align: center;
  }
}

.footer_links_01_links_item a {
  display: block;
  color: #fff;
  transition: opacity 0.3s ease-out;
}

.footer_links_01_links_item a:hover {
  opacity: 0.7;
}

.footer_links_02 {
  border-top: 1px solid #000;
  background-color: #071933;
}

.footer_links_02.container {
  --content: min(96vw, 1170px);
  --full: minmax(2vw, 1fr);
}

.footer_links_02_links {
  display: flex;
  gap: 1.2em;
}

@media only screen and (max-width: 640px) {
  .footer_links_02_links {
    flex-direction: column;
    padding-block: min((20 / var(--content-width)) * 100vw, 20 * 1px);
    font-size: calc((13 / var(--em)) * 1rem);
  }
}

@media only screen and (min-width: 641px) {
  .footer_links_02_links {
    padding-block: min((20 / var(--content-width)) * 100vw, 20 * 1px);
    font-size: calc((13 / var(--em)) * 1rem);
  }
}

@media only screen and (min-width: 1026px) {
  .footer_links_02_links {
    padding-block: 21px;
    font-size: calc((14 / var(--em)) * 1rem);
  }
}

@media only screen and (max-width: 640px) {
  .footer_links_02_links_item {
    text-align: center;
  }
}

.footer_links_02_links_item a {
  display: block;
  color: #fff;
  transition: opacity 0.3s ease-out;
}

.footer_links_02_links_item a:hover {
  opacity: 0.7;
}

.footer_cr {
  background-color: #040c18;
  color: #fff;
  text-align: center;
}

@media only screen and (max-width: 640px) {
  .footer_cr {
    padding-block: 1.5em;
    font-size: calc((12 / var(--em)) * 1rem);
  }
}

@media only screen and (min-width: 641px) {
  .footer_cr {
    padding-block: 22px 20px;
    font-size: calc((12 / var(--em)) * 1rem);
  }
}