@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Outfit:wght@100..900&family=Bebas+Neue&display=swap");

/* ----------------------------------------------------------
 root settings
---------------------------------------------------------- */
:root {

  /* color */
  --black: #000;
  --white: #fff;
  --bgnoise: #EFFBFF;
  --bgblue: #E9F3FA;
  --blue: #0073bc;
  --skyblue: #0092d3;
  --lightblue: #83b9e4;
  --darkblue: #005b97;
  --grad-bl: linear-gradient(90deg, #0073BC 0%, #0092D3 100%);
  --orange: #EC6C00;
  --grad-or: linear-gradient(90deg, #EC6C00 0%, #EC8600 100%);

  /* font */
  --ft-jp: "Noto Sans JP", sans-serif;
  --ft-en: "Outfit", sans-serif;
  --ft-s: 0.875rem;

  /* other */
  --shadow: 0px 4px 12px rgba(0, 115, 188, 0.10);
}

/* ----------------------------------------------------------
 base settings
---------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  font-size: clamp(16px, 0.347vw + 11px, 22px);
}
body {
  color: var(--black);
  background: var(--white);
  font-family: var(--ft-jp);
  font-weight: 400;
  line-height: 1.75;
  position: relative;
}
img {
  width: 100%;
  max-width: 100%;
  height: auto;
}


/* ----------------------------------------------------------
 responsive utilities
---------------------------------------------------------- */
@media print, screen and (min-width: 1061px) { /* PC */
  .sp {
    display: none;
  }
}
@media screen and (max-width: 1060px) { /* SP・Tab縦・PC狭幅 */
  .pc {
    display: none;
  }
}
@media screen and (min-width: 744px) and (max-width: 1060px) { /* Tab縦・ PC狭幅 */
  .sp {
    display: none;
  }
}


/* ----------------------------------------------------------
 common styling
---------------------------------------------------------- */

/* layout,background
-------------------------------------------- */
.wrapper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  overflow-x: clip;
}
body.page .wrapper {
  animation: pageFadeIn .6s ease both;
}
@keyframes pageFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) { /* 動きを減らす設定用 */
  body.page .wrapper {
    animation: none;
  }
}
.wrap {
  width: 85%;
  max-width: 1300px;
  margin-inline: auto;
}
@media screen and (max-width: 1060px) { /* SP・Tab縦・PC狭幅 */
  .wrap {
    width: 85%;
  }
}
.bg-blue {
  background-color: var(--bgnoise);
  background-image: url("../images/noise.svg");
  background-repeat: repeat;
  background-size: 50px 50px;
}
.bg-wave {
  --bg-section-height: min(19.0278vw, 274px);
  position: relative;
  z-index: 1;
}
.bg-wave_both {
  margin-block: var(--bg-section-height);
}
.bg-wave_top-only {
  margin-block: var(--bg-section-height) 0;
}
.bg-wave_bottom-only {
  margin-block: 0 var(--bg-section-height);
}
.bg-wave-shape {
  position: absolute;
  left: 0;
  z-index: 0;
  width: 100%;
  height: var(--bg-section-height);
  pointer-events: none;
}
.bg-wave-shape svg {
  display: block;
  width: 100%;
  height: 100%;
}
.bg-wave-shape_top {
  top: calc(var(--bg-section-height) * -1 + 1px);
}
.bg-wave-shape_bottom {
  bottom: calc(var(--bg-section-height) * -1 + 1px);
}
.bg-wave-shape_bottom svg {
  transform: scaleY(-1);
}
.bg-wave-shape_base {
  fill: var(--bgnoise);
}
.bg-wave > * {
  position: relative;
  z-index: 1;
}
.bg-wave > .bg-wave-shape {
  position: absolute;
  z-index: 0;
}
body.page .bg-wave_page-top > .bg-wave-shape_top {
  transform: none;
}
body.page .bg-wave_page-top > .bg-wave-shape_top svg {
  transform: scale(-1, 1);
}

@media print, screen and (min-width: 1061px) { /* PC */
  body.page .bg-wave_page-top > .bg-wave-shape_top::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 2rem;
    left: 2rem;
    display: block;
    width: 10rem;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    background: linear-gradient(225deg, #B5D8E7 0%, rgba(255, 255, 255, 0) 100%);
  }
}


/* link,button
-------------------------------------------- */
a {
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease;
}
.bt {
  margin-top: 32px;
}
.bt a {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  min-width: 12rem;
  padding: 1.25rem 1.5em;
  overflow: hidden;
  border-radius: 999px;
  color: var(--white);
  background: var(--grad-bl);
  font-family: var(--ft-en);
  font-size: 1.05rem;
  line-height: 1.2;
  isolation: isolate;
  transition: .2s;
}
.bt:not(.form) a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  display: block;
  width: 1rem;
  height: 1rem;
  background: url(../images/arrow.svg) no-repeat center center / contain;
  transform: translate(-.5rem, -50%);
}

@media print, screen and (min-width: 1061px) { /* PC */
  .bt:not(.form) a::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-color: var(--blue);
    content: "";
    opacity: 0;
    transition: opacity .3s;
  }
  .bt:not(.form) a:hover::before {
    opacity: 1;
  }
  .bt a:hover {
    transform: translate(2px,2px);
    transition: .2s;
  }
}
@media screen and (max-width: 1060px) { /* SP・Tab縦・PC狭幅 */
  .bt a + a {
    margin-top: 1rem;
  }
}


/* text
-------------------------------------------- */
.ja { font-family: var(--ft-jp); }
.en {
  font-weight: 500;
  font-family: var(--ft-en);
}
.tx-blue {
  color: var(--blue);
  font-weight: 600;
}
.copy {
  color: var(--black);
}
.copy + .copy {
  margin-top: 1em;
}

/* title
-------------------------------------------- */
.title-main {
  display: flex;
  flex-direction: column;
  transform: translateX(-0.125rem);
}
.title-main .en {
  background: linear-gradient(90deg, #0073BC 0%, #0092D3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 3.125rem;
  line-height: 1.25;
}
body.page .title-main .en {
  font-size: 3.5rem;
}
@media screen and (max-width: 1060px) { /* SP・Tab縦・PC狭幅 */
  body.page .title-main .en {
    font-size: 3rem;
  }
}
.title-main .ja {
  padding-left: 0.25em;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25;
}
.title-sub {
  display: flex;
  flex-direction: column;
  transform: translateX(-0.125rem);
}
.title-sub .en {
  background: linear-gradient(90deg, #0073BC 0%, #0092D3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 3.125rem;
  line-height: 1.25;
}
.title-sub .ja {
  margin-top: 0.25em;
  padding-left: 0.25em;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.25;
}

/* List
-------------------------------------------- */
.ul-normal li {
  position: relative;
  margin-bottom: 0.25rem;
  padding-left: 1rem;
  text-align: left;
}
.ul-normal li::before {
  content: "";
  position: absolute;
  top: calc(1lh / 2);
  left: 0;
  width: 0.5em;
  height: 0.5em;
  background-color: #D9D9D9;
  border-radius: 100%;
  transform: translateY(-50%);
}
.ul-check li {
  position: relative;
  margin-bottom: 0.25rem;
  padding-left: 1.25rem;
  text-align: left;
}
.ul-check li:before {
  content: "";
  position: absolute;
  top: 0.25em;
  left: 0;
  display: block;
  width: 1.25em;
  height: 1.25em;
  background: url("../images/icon-check.svg") no-repeat center center / contain;
}
.ul-caution li {
  padding-left: 1em;
  text-indent: -1em;
}
.ul-caution li:before {
  content: "※";
}

/* glass image
-------------------------------------------- */
.glass-image {
  position: relative;
}
.glass-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 6px;
  background: rgba(255, 255, 255, .32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
}
.glass-image > img,
.glass-image > picture,
.glass-image > .swiper {
  position: relative;
  z-index: 2;
}
.glass-image > img {
  display: block;
  width: 100%;
}

/* top shape
-------------------------------------------- */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 459px;
  height: 196px;
  background: url("../images/shape/bg-logo.svg") no-repeat left top;
  background-size: contain;
  z-index: 0;
  pointer-events: none;
}
body::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 459px;
  height: 196px;
  background-image: url("../images/noise.svg");
  background-repeat: repeat;
  background-size: 50px 50px;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
  -webkit-mask: url("../images/shape/bg-logo.svg") no-repeat left top / contain;
  mask: url("../images/shape/bg-logo.svg") no-repeat left top / contain;
}
@media screen and (max-width: 767px) { /* SP */
  body::before,
  body::after {
    width: 80%;
    height: auto;
    aspect-ratio: 459 / 196;
  }
}

main {
  position: relative;
}
main::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 1rem;
  left: -3rem;
  display: block;
  width: 7rem;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  background: linear-gradient(to bottom, #fff 0%, transparent 100%);
  transform: rotate(45deg);
  opacity: 0.9;
}

/* works slider
-------------------------------------------- */
.video-works {
  padding: 6rem 0;
}
.video-works .works-slider {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 0 3.75rem;
}
.video-works .works-list {
  width: 100%;
  padding: 0.75rem;
  overflow: hidden;
}
.video-works .works-list_item {
  height: auto;
  overflow: visible;
  background: transparent;
}
.video-works figure {
  height: auto;
  aspect-ratio: 2 / 1;
  border-radius: 0.5rem 0.5rem 0 0;
}
.video-works figure::before,
.video-works figure img {
  border-radius: 0.5rem 0.5rem 0 0;
}
.video-works figure img {
  height: 100%;
  object-fit: cover;
}
.video-works .works-list .detail {
  padding: 1.5rem 1.5rem 2rem 1.5rem;
  background-color: var(--white);
  box-shadow: var(--shadow);
  border-radius: 0 0 0.5rem 0.5rem;
}
.video-works .works-list h4 {
  margin-bottom: 1em;
  font-weight: 600;
  font-size: 1.25rem;
  text-align: center;
}
.video-works .works-list li {
  font-size: var(--ft-s);
}
.video-works .works-swiper-controls {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.video-works .works-swiper-button-prev,
.video-works .works-swiper-button-next {
  position: absolute;
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  border-radius: 100%;
  color: var(--white);
  background-color: var(--blue);
  transform: translateY(-50%);
  pointer-events: auto;
  transition: .3s;
}
.video-works .works-swiper-button-prev:hover,
.video-works .works-swiper-button-next:hover {
  background-color: var(--skyblue);
  transition: .3s;
}
.video-works .works-swiper-button-prev {
  left: 0;
}
.video-works .works-swiper-button-next {
  right: 0;
}
.video-works .works-swiper-button-prev::after,
.video-works .works-swiper-button-next::after {
  font-size: var(--ft-s);
  font-weight: 700;
}

@media print, screen and (min-width: 1061px) { /* PC */
  .video-works .flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rem;
  }
  .video-works .works-slider {
    width: 32.5rem;
  }
  .video-works .works-list {
    width: 25rem;
    margin-inline: auto;
  }
}

@media screen and (max-width: 1060px) { /* SP・Tab縦・PC狭幅 */
  .video-works .works-slider {
    margin: 2rem auto;
    padding: 0;
  }
  .video-works .works-list .swiper-wrapper {
    align-items: stretch;
  }
  .video-works .works-list_item {
    display: flex;
    flex-direction: column;
    height: auto;
  }
  .video-works .works-swiper-button-prev,
  .video-works .works-swiper-button-next {
    top: 50%;
  }
  .video-works .works-swiper-button-next {
    right: -0.5rem;
  }
  .video-works .works-swiper-button-prev {
    left: -0.5rem;
  }
}

@media screen and (min-width: 744px) and (max-width: 1060px) { /* Tab縦・ PC狭幅 */
  .video-works .works-slider {
    max-width: 32.5rem;
  }
}

/* ----------------------------------------------------------
 page common
---------------------------------------------------------- */
body.page .title-main,
body.page .title-sub {
  margin-bottom: 2rem;
}
section.pagetitle {
  position: relative;
}
section.pagetitle .title-main .ja {
  line-height: 1;
}

@media print, screen and (min-width: 1061px) { /* PC */
  section.pagetitle {
    padding-top: 6rem;
    text-align: center;
  }
  section.pagetitle::before {
    content: "";
    position: absolute;
    display: block;
    width: 10rem;
    aspect-ratio: 44 / 63;
    right: 0;
    top: 4rem;
    border-radius: 0;
    background: url("../images/shape/side-right.svg") center / contain no-repeat;
    overflow: visible;
    opacity: .85;
  }
  section.pagetitle::after {
    content: "";
    position: absolute;
    display: block;
    width: 7.5rem;
    aspect-ratio: 1;
    right: 6rem;
    top: 3rem;
    opacity: .7;
    background: linear-gradient(225deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 100%;
  }
}
@media screen and (max-width: 1060px) { /* SP・Tab縦・PC狭幅 */
  section.pagetitle {
    padding-top: 3rem;
  }
  body.page .title-main,
  body.page .title-sub {
    text-align: center;
  }
}


/* title-section
-------------------------------------------- */
.title-section {
  position: relative;
  text-align: center;
}
.title-section::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4rem);
  left: 50%;
  display: block;
  width: 200vw;
  height: auto;
  background-image: url("../images/tx-mothers.svg");
  background-repeat: repeat-x;
  background-position: 0 center;
  background-size: 104.167vw auto;
  aspect-ratio: 1524 / 130;
  transform: translateX(-50%);
  pointer-events: none;
  animation: mothersTextMarquee 42s linear infinite;
}
@keyframes mothersTextMarquee {
  0% {
    background-position-x: 104.167vw;
  }
  100% {
    background-position-x: 0;
  }
}
@media screen and (max-width: 1060px) { /* SP・Tab縦・PC狭幅 */
  .title-section::before {
    top: -5rem;
    bottom: initial;
    background-size: 180vw auto;
    animation-name: mothersTextMarqueeSp;
  }
}
@keyframes mothersTextMarqueeSp {
  0% {
    background-position-x: 180vw;
  }
  100% {
    background-position-x: 0;
  }
}

/* ----------------------------------------------------------
header
---------------------------------------------------------- */
#header {
  position: relative;
  z-index: 50000;
  isolation: isolate;
  transition: background-color .25s ease, box-shadow .25s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
#header.is-fixed {
  position: fixed;
  z-index: 50000;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(255 255 255 / 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  transform: translateY(0);
  animation: headerDrop .45s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes headerDrop {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
#header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 2rem;
}
#header .header-logo {
  flex: 0 0 323px;
  width: 323px;
}
#header .header-logo a {
  display: block;
}
#header .header-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.header-menu {
  display: none;
}
.header-nav ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.header-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.header-nav .en {
  color: var(--blue);
  font-size: 1.125rem;
  line-height: 1.25;
}
.header-nav .ja {
  color: var(--black);
  font-weight: 500;
  font-size: 0.7rem;
  line-height: 1.5;
}
.header-nav_contact a {
  padding: 0.5rem 2.5rem 0.75rem 2.5rem;
  border-radius: 999px;
  color: var(--white);
  background: var(--grad-bl);
  text-align: center;
}
.header-nav_contact .en,
.header-nav_contact .ja {
  color: var(--white);
}
.header-nav_privacy {
  display: none;
}

@media print, screen and (min-width: 1061px) { /* PC */
  .header-nav {
    display: block;
  }
  .header-nav li:not(.header-nav_contact) a:hover .en {
    color: var(--skyblue);
    transition: .3s;
  }
  .header-nav li:not(.header-nav_contact) a:hover .ja {
    color: var(--skyblue);
    transition: .3s;
  }
  .header-nav li.header-nav_contact a {
    position: relative;
    overflow: hidden;
  }
  .header-nav li.header-nav_contact a span {
    position: relative;
    z-index: 1;
  }
  .header-nav li.header-nav_contact a::before {
    position: absolute;
    inset: 0;
    background-color: var(--blue);
    content: "";
    opacity: 0;
    transition: opacity .3s;
  }
  .header-nav li.header-nav_contact a:hover::before {
    opacity: 1;
  }
}
@media screen and (max-width: 1060px) { /* SP・Tab縦・PC狭幅 */
  #header {
    position: relative;
    width: 100%;
  }
  #header.is-fixed {
    position: fixed;
    width: 100%;
    animation: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    transform: none;
    background: rgba(255 255 255 / 0.96);
  }
  #header.is-menu-open {
    z-index: 20000;
  }
  .is-menu-open .header-menu {
    z-index: 20001;
  }
  .is-menu-open #header .header-logo {
    opacity: 0;
    pointer-events: none;
  }
  #header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    padding: 1rem;
  }
  #header .header-logo {
    position: relative;
    z-index: 10001;
    width: min(323px, calc(100vw - 96px));
    flex: 0 1 auto;
    flex-basis: auto;
  }
  .header-menu {
    position: relative;
    z-index: 10001;
    display: grid;
    place-items: center;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    border-radius: 999px;
    background: var(--blue);
    box-shadow: var(--shadow);
  }
  .header-menu span {
    grid-area: 1 / 1;
    display: block;
    width: 26px;
    height: 2px;
    border-radius: 999px;
    background: var(--white);
    transition: transform .25s ease, opacity .2s ease;
  }
  .header-menu span:nth-child(1) {
    transform: translateY(-5px);
  }
  .header-menu span:nth-child(2) {
    transform: translateY(5px);
  }
  .is-menu-open .header-menu span:nth-child(1) {
    transform: rotate(40deg);
  }
  .is-menu-open .header-menu span:nth-child(2) {
    transform: rotate(-40deg);
  }
  .header-nav {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    background: rgba(0 91 151 / 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .32s ease, visibility .32s ease;
  }
  .is-menu-open .header-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 20000;
  }
  .header-nav ul {
    width: min(82vw, 360px);
    min-height: 100dvh;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: rgba(255 255 255 / 0.98);
    box-shadow: -16px 0 36px rgba(0, 91, 151, .14);
    transform: translateX(100%);
    transition: transform .46s cubic-bezier(.16, 1, .3, 1);
  }
  .is-menu-open .header-nav ul {
    transform: translateX(0);
  }
  .header-nav a {
    padding: 16px 0;
    border-bottom: 1px solid rgba(0 115 188 / 0.16);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(1rem);
    transition: opacity .28s ease, transform .38s cubic-bezier(.16, 1, .3, 1), color .2s ease;
  }
  .is-menu-open .header-nav a {
    opacity: 1;
    transform: translateX(0);
  }
  .is-menu-open .header-nav li:nth-child(1) a {
    transition-delay: .08s;
  }
  .is-menu-open .header-nav li:nth-child(2) a {
    transition-delay: .12s;
  }
  .is-menu-open .header-nav li:nth-child(3) a {
    transition-delay: .16s;
  }
  .is-menu-open .header-nav li:nth-child(4) a {
    transition-delay: .2s;
  }
  .is-menu-open .header-nav li:nth-child(5) a {
    transition-delay: .24s;
  }
  .is-menu-open .header-nav li:nth-child(6) a {
    transition-delay: .28s;
  }
  .is-menu-open .header-nav li:nth-child(7) a {
    transition-delay: .32s;
  }
  .header-nav_privacy {
    display: block;
  }
  .header-nav .en {
    font-size: 1.35rem;
  }
  .header-nav .ja {
    display: block;
    font-size: 0.78rem;
  }
  .header-nav_contact a {
    margin: 2rem;
    padding: 0.85rem 1.5rem 1rem;
    border-bottom: 0;
  }
  body.is-menu-open {
    overflow: hidden;
  }
  body.is-menu-open main,
  body.is-menu-open footer {
    visibility: hidden;
  }
}


/* ----------------------------------------------------------
 footer
---------------------------------------------------------- */
footer {
  --bg-section-height: min(19.0278vw, 274px);
  position: relative;
  z-index: 0;
  background-color: var(--bgnoise);
  background-image: url("../images/noise.svg");
  background-repeat: repeat;
  background-size: 50px 50px;
}
body.home footer .bg-wave-shape_top,
body.contact footer .bg-wave-shape_top {
  display: none;
}
body.page:not(.contact) footer {
  margin-top: 12rem;
}
body.careers footer .footer-info {
  display: none;
}
footer .wrap {
  position: relative;
  z-index: 1;
  text-align: center;
}
footer .title {
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.5;
  font-feature-settings: "halt";
}
footer .copy {
  margin-top: 20px;
  font-feature-settings: "halt";
}
.contact-box {
  margin-top: 40px;
  gap: 24px;
  text-align: center;
}
.contact-box .phone {
  display: grid;
  gap: 4px;
}
.contact-box .number {
  font-family: var(--ft-en);
  font-size: 2.625rem;
  font-weight: 600;
  line-height: 1;
}
.contact-box .number a {
  display: inline-flex;
  align-items: center;
  color: var(--blue);
  transform: translateX(-0.375em);
}
.contact-box .number a:before {
  content: "";
  display: block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.25rem;
  background: url("../images/icon-phone.svg") no-repeat center center / contain;
}
.contact-box .form a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14rem;
}
.contact-box .form a:before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  margin-right: 0.25rem;
  background: url("../images/icon-mail.svg") no-repeat center center / contain;
}
.footer-bottom {
  position: relative;
  width: 100%;
  padding: 2rem 2rem 4rem 2rem;
  border-top: 1px solid var(--white);
}
body.careers .footer-bottom {
  border-top: 0;
}
footer small {
  font-family: var(--ft-en);
  font-size: 0.75rem;
}
.footer-pagetop {
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--blue);
  box-shadow: var(--shadow);
}
.footer-pagetop::before {
  content: "";
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid var(--white);
  border-left: 2px solid var(--white);
  transform: translateY(0.15rem) rotate(45deg);
}
@media print, screen and (min-width: 1061px) { /* PC */
  footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
  }
  footer .wrap {
    width: 100%;
    margin-bottom: 4rem;
  }
  .contact-box .number a {
    cursor: default;
  }
  .contact-box .form a::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--blue);
    content: "";
    opacity: 0;
    transition: opacity .3s;
  }
  .contact-box .form a:hover::after {
    opacity: 1;
  }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .footer-bottom nav {
    display: flex;
    gap: 4rem;
  }
  .footer-bottom nav ul li {
    margin-bottom: 0.25rem;
    font-size: var(--ft-s);
  }
  .footer-bottom nav ul li a {
    font-weight: 500;
  }
  .footer-bottom nav ul li a:hover {
    color: var(--blue);
  }
  .footer-bottom .footer-nav_more {
    padding-left: 1em;
  }
  .footer-bottom .footer-nav_more:nth-of-type(1) {
    margin-top: 0.25rem;
  }
  .footer-bottom .footer-nav_more > a {
    display: flex;
    align-items: center;
  }
  .footer-bottom .footer-nav_more > a::before {
    content: "";
    display: block;
    width: 0.75em;
    height: 1px;
    margin-right: 0.25em;
    background-color: var(--blue);
  }
  .footer-bottom .footer-nav_more ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
    padding-left: 2em;
    font-feature-settings: "halt";
  }
  .footer-pagetop {
    position: absolute;
    right: 2rem;
    top: 2rem;
  }
  .footer-pagetop:hover {
    background-color: var(--skyblue);
  }
}
@media screen and (max-width: 1060px) { /* SP・Tab縦・PC狭幅 */
  footer .wrap {
    width: 100%;
    margin-bottom: 2rem;
  }
  footer .title {
    font-size: 1.5rem;
  }
  footer nav {
    display: none;
  }
  .contact-box .number {
    font-size: 2rem;
  }
  .footer-bottom {
    margin-top: 4rem;
  }
  .footer-pagetop {
    width: 2.75rem;
    height: 2.75rem;
    margin-left: auto;
  }
  footer small {
    display: block;
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: center;
  }
  body.page.careers .footer-bottom {
    margin-top: 0;
  }
}
@media screen and (max-width: 767px) { /* SP */
  body.page:not(.contact) footer {
    margin-top: 4rem;
    padding-top: 2rem;
  }

}