@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/*!
global > font
------------------------------
*/
:root {
  --font-family-jp: 'Hiragino Kaku Gothic ProN', '游ゴシック体', 'YuGothic', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', sans-serif;
  --font-family-en: "Oswald", sans-serif;
  --font-family-copy: 'Hiragino Kaku Gothic Std', '游ゴシック体', 'YuGothic', '游ゴシック Medium', 'Yu Gothic Medium', '游ゴシック', 'Yu Gothic', sans-serif;

  font-family: var(--font-family-jp);
  font-size: 16px;
  color: var(--color-font);

  background-color: var(--color-base);
}

/*!
global > size
------------------------------
*/
/* 768pxを100vwとする */
:root {
  --space-24: clamp(16px, 3.13vw, 24px);
  --space-40: clamp(24px, 5.21vw, 40px);
  --space-64: clamp(32px, 8.33vw, 64px);
  --space-80: clamp(40px, 10.42vw, 80px);
  --space-120: clamp(80px, 15.63vw, 120px);
}

/*!
global > color
------------------------------
*/
:root {
  --color-main: #0044C8;
  --color-accent: #C9E1EF;
  --color-accent-2: #5476B9;
  --color-accent-3: #0077C7;
  --color-base: #F9F9F9;
  --color-base-2: #EBEFF2;
  --color-font: #333;
  --color-yellow: #EEE100;
  --color-yellow-2: #BBB100;
  --color-green: #07B53B;
  --color-gray-1: #BBBBBB;
  --color-gray-2: #D9D9D9;
  --color-gray-3: #DEE6F4;
  --color-white: #FFF;
  --color-sub-page-header-bg: rgb(249, 249, 249);
}

/*!
global > base
------------------------------
*/
html {
  scroll-behavior: smooth;
}
/* body * {
  outline: red 1px solid;
} */

/*!
component > heading
------------------------------
*/
/* 768pxで100vw計算とする */
.heading {
  font-weight: bold;
  font-size: clamp(2.25rem, 7.3vw, 3.5rem);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.heading._blue {
  display: inline-block;
  padding: 8px 16px;
  background-color: var(--color-base);
  color: var(--color-main);
}
.heading > span:not(.js-split-text) {
  display: block;
  font-family: var(--font-family-en);
  font-weight: normal;
  font-size: clamp(0.75rem, 1.823vw, 0.875rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sub-page-heading {
  font-weight: bold;
  font-size: clamp(2rem, 5.21vw, 2.5rem);
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.sub-page-heading > span:not(.js-split-text) {
  display: block;
  font-family: var(--font-family-en);
  font-weight: normal;
  font-size: clamp(0.75rem, 1.823vw, 0.875rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-heading {
  padding-left: clamp(24px, 4.16vw, 32px);
  border-left: 8px solid var(--color-main);
  font-weight: bold;
  font-size: clamp(2rem, 5.21vw, 2.5rem);
  letter-spacing: 0.01em;
  line-height: clamp(42px, 8.2vw, 63px);
}


/*!
component > button
------------------------------
*/
.entry-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 48px;
  border-radius: 100px;
  /* border: 1px solid var(--color-yellow-2); */
  background-color: var(--color-accent-3);
  font-family: var(--font-family-en);
  font-size: 1.25rem;
  color: var(--color-white);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  z-index: 10;
  overflow: hidden;
}
.entry-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  display: none;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  transform: skewX(-25deg);
}
.entry-button:hover::before {
  display: block;
  animation: shine 0.7s;
}
.entry-button._blue {
  border: initial;
  background-color: var(--color-main);
  color: var(--color-base);
}
.entry-button._white {
  color: var(--color-font);
  background-color: var(--color-base);
}
.section-button {
  display: flex;
  align-items: center;
  font-weight: bold;
  gap: 26px;
  transition: .3s;
}
.section-button span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--color-main);
}
.section-button:hover {
  opacity: 0.8;
  filter: saturate(200%);
}
.section-button:hover span {
  animation: pulsation .7s alternate infinite;
}
.section-button._white {
  color: var(--color-base);
}
.section-button._white span {
  background-color: var(--color-base);
}


/*!
component > card
------------------------------
*/
.interview-card {
  display: block;
  box-shadow: 0px 24px 32px 0px rgba(9, 27, 61, 0.08);
  transition: .3s;
}
.interview-card__photo {
  position: relative;
  overflow: hidden;
  
}
.interview-card__photo::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-bottom: 24px solid transparent;
  border-right: 24px solid var(--color-base);
  z-index: 100;
}
.interview-card__title {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 8px 16px;
  background-color: var(--color-base);
  font-weight: bold;
  font-size: 1.25rem;
}
.interview-card__title span:first-child {
  padding-right: 8px;
  border-right: 1px solid var(--color-font);
}

.interview-card__content {
  padding: 16px;
  background-color: var(--color-base);
}
.interview-card__sub-title {
  margin-bottom: 8px;
  font-weight: bold;
}
.interview-card__sub-text {
  height: 100%;
}
.interview-card__photo img {
  transition:1s all;
}
.interview-card:hover img {
  transform:scale(1.2,1.2);
  transition:1s all;
}

/*!
component > table
------------------------------
*/
.content-table {
  max-width: 832px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  font-size: 1.125rem;
}
.content-table__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  letter-spacing: 0.1em;
}
.content-table__title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 180px;
  padding: 32px 0;
  border-bottom: 2px solid var(--color-main);
}
.content-table__text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 24px 0;
  border-bottom: 2px solid var(--color-accent);
}
.content-table__item._border-top .content-table__title {
  border-top: 2px solid var(--color-main);
}
.content-table__item._border-top .content-table__text {
  border-top: 2px solid var(--color-accent);
}
.content-table__text._grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: repeat(4, 1fr);
}
.content-table__text._grid span {
  display: block;
  width: 180px;
}
.content-table__text._grid._grid-wide span:nth-child(even) {
  width: 100%;
  padding-top: 8px;
}

/* lg */
@media (max-width: 1279px) {}

/* md */
@media (max-width: 959px) {}

/* sm */
@media (max-width: 767px) {
  .content-table__item {
    grid-template-columns: auto;
  }
  /* .content-table__title,
  .content-table__text  {
    padding-left: 24px;
  } */

}

/* xs */
@media (max-width: 567px) {}

/* xxs */
@media (max-width: 427px) {
  .content-table__text._grid span {
    width: 160px;
  }
}


/*!
layout > header
------------------------------
*/
/* 960pxで100vw計算 */
.header {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 16px;
  background-color: var(--color-base);
  z-index: 9999;
  transition: all 0.4s;
}
.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: clamp(8px, 2.5vw, 24px);
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.header__logo {
  width: clamp(40px, 7.08vw, 68px);
  height: clamp(40px, 7.08vw, 68px);
}
.header__title {
  font-weight: bold;
  font-size: clamp(1.25rem, 3.33vw, 2rem);
}
.header__title span {
  padding-left: clamp(8px, 1.66vw, 16px);
  font-size: 0.75em;
}
.header__hamburger {
  display: none;
}
.header__hamburger svg {
  width: clamp(40px, 5.83vw, 56px);
  height: clamp(40px, 5.83vw, 56px);
}
/* lg */
@media (max-width: 1279px) {}

/* md */
@media (max-width: 959px) {
  .header__inner {
    grid-template-columns: auto 1fr auto;
  }
  .header__inner > .entry-button {
    display: none;
  }
  .header__hamburger {
    display: block;
  }
}

/* sm */
@media (max-width: 767px) {}

/* xs */
@media (max-width: 567px) {}

/* xxs */
@media (max-width: 427px) {}


/*!
layout > sub-page-header
------------------------------
*/
/* 960pxで100vw計算 */
.sub-page-header {
  position: relative;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(96px, 12.5vw, 120px) 0 clamp(96px, 12.5vw, 120px) clamp(16px, 3.33vw, 32px);
  background-image: url(../img/common/bg-sub-page-header.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
}
.sub-page-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-sub-page-header-bg);
}
.sub-page-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(30px, 10.42vw, 100px);
  height: 100%;
  background-color: var(--color-base);
  z-index: -1;
}


/* lg */
@media (max-width: 1279px) {}

/* md */
@media (max-width: 959px) {}

/* sm */
@media (max-width: 767px) {}

/* xs */
@media (max-width: 567px) {}

/* xxs */
@media (max-width: 427px) {}


/*!
layout > main
------------------------------
*/
/* lg */
@media (max-width: 1279px) {}

/* md */
@media (max-width: 959px) {}

/* sm */
@media (max-width: 767px) {}

/* xs */
@media (max-width: 567px) {}

/* xxs */
@media (max-width: 427px) {}


/*!
layout > entry
------------------------------
*/
.entry {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 64px 0;
  background-color: var(--color-accent-3);
}
.entry__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 40px;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px;
  background-color: var(--color-base);
}
.entry__text {
  line-height: 1.8;
}
.entry__text p + p {
  margin-top: 24px;
}
.entry__title {
  font-family: var(--font-family-en);
  font-size: 3.5rem;
  letter-spacing: 0.02em;
}
.entry__inner a {
  margin-right: 24px;
}

/* lg */
@media (max-width: 1279px) {}

/* md */
@media (max-width: 959px) {
  .entry {
    padding: 32px;
  }
  .entry__inner {
    grid-template-columns: auto;
    justify-items: center;
    gap: 8px;
  }
  .entry__text {
    text-align: center;
  }
  .entry__text p + p {
    margin-top: 0;
  }
  .entry__inner a {
    margin-right: 0;
  }
}

/* sm */
@media (max-width: 767px) {}

/* xs */
@media (max-width: 567px) {}

/* xxs */
@media (max-width: 427px) {
  .entry__title {
    font-size: 3rem;
  }
}


/*!
layout > footer
------------------------------
*/
.footer {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  border-bottom: 8px solid var(--color-main);
}
.footer__inner {
  display: flex;
  align-items: start;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 72px 0;
}
.footer__info {
  flex-shrink: 0;
  padding-right: 40px;
}
.footer__name {
  margin-bottom: 40px;
}
.footer__info p + p {
  margin-top: 16px;
}
.footer__menu {
  flex-grow: 1;
  padding-left: 54px;
  border-left: 1px solid var(--color-gray-1);
}
.footer__list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 80px;
  column-gap: 80px;
  row-gap: 48px;
}
.footer__list li a {
  position: relative;
  padding-bottom: 6px;
}
.footer__list a:hover {
  color: var(--color-main);
}
.footer__list a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  margin: auto;
  background-color: var(--color-main);
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.footer__list a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}
.footer__list span {
  display: block;
  font-family: var(--font-family-en);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer__copy {
  font-size: 0.75rem;
  text-align: right;
}
.pagetop a {
  position: fixed;
  bottom: -44px;
  right: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-main);
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s;
}
.pagetop a::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border: 0;
  border-top: solid 2px var(--color-base);
  border-right: solid 2px var(--color-base);
  transform: rotate(-45deg);
}
.pagetop a:hover {
  opacity: 0.8;
  filter: saturate(200%);
  animation: pulsation .7s alternate infinite;
}

/* lg */
@media (max-width: 1279px) {}

/* md */
@media (max-width: 959px) {
  .footer__inner {
    flex-direction: column;
    align-items: center;
    padding: 40px 0;
  }
  .footer__info {
    position: relative;
    padding-right: 0;
    text-align: center;
  }
  .footer__info::after {
    content: "";
    display: block;
    width: 128px;
    height: 1px;
    margin: 40px auto;
    background-color: var(--color-gray-1);
  }
  .footer__info p + p {
    margin-top: 8px;
  }
  .footer__menu {
    padding-left: 0;
    border-left: none;
  }
  .footer__list {
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 40px;
    row-gap: 24px;
    margin-bottom: 64px;
  }
  .footer__copy {
    text-align: center;
  }
}

/* sm */
@media (max-width: 767px) {}

/* xs */
@media (max-width: 567px) {}

/* xxs */
@media (max-width: 427px) {
}


/*!
layout > nav
------------------------------
*/
.nav {
  position: fixed;
  top: -100%;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 100%;
  width: 440px;
  max-height: 700px;
  min-height: 600px;
  height: 100svh;
  padding: 48px 32px 24px;
  background-color: var(--color-main);
  color: var(--color-base);
  z-index: 9999;
}
.js-menu-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-family-en);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav__list li a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-gray-1);
}
.nav__list li a span {
  font-family: var(--font-family-en);
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-2);
}
.nav__list li a::after {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url(../img/common/icon-menu-arrow.svg);
  background-size: cover;
  background-repeat: no-repeat;
}
.nav__name {
  margin-bottom: 16px;
}
.nav__info p + p {
  margin-top: 8px;
}
.nav__copy {
  font-size: 0.75rem;
}

/* lg */
@media (max-width: 1279px) {}

/* md */
@media (max-width: 959px) {}

/* sm */
@media (max-width: 767px) {}

/* xs */
@media (max-width: 567px) {}

/* xxs */
@media (max-width: 427px) {}




/*!
utility > visible - hidden
------------------------------
*/
.visible-md {
  display: none !important;
}
.visible-sm {
  display: none !important;
}
.visible-xs {
  display: none !important;
}
.visible-xxs {
  display: none !important;
}

.hidden-md {
  display: block !important;
}
.hidden-sm {
  display: block !important;
}
.hidden-xs {
  display: block !important;
}
.hidden-xxs {
  display: block !important;
}


/* lg */
@media (max-width: 1279px) {
  
}

/* md */
@media (max-width: 959px) {
  .visible-md {
    display: block !important;
  }
  .hidden-md {
    display: none !important;
  }
}

/* sm */
@media (max-width: 767px) {
  .visible-sm {
    display: block !important;
  }
  .hidden-sm {
    display: none !important;
  }
}

/* xs */
@media (max-width: 567px) {
  .visible-xs {
    display: block !important;
  }
  .hidden-xs {
    display: none !important;
  }
}

/* xxs */
@media (max-width: 427px) {
  .visible-xxs {
    display: block !important;
  }
  .hidden-xxs {
    display: none !important;
  }
}


/*!
utility > margin
------------------------------
*/
/* lg */
@media (max-width: 1279px) {}

/* md */
@media (max-width: 959px) {}

/* sm */
@media (max-width: 767px) {}

/* xs */
@media (max-width: 567px) {}

/* xxs */
@media (max-width: 427px) {}


/*!
utility > other
------------------------------
*/
.imgBlur {
  opacity: 0;
  transition: transform 0.5s linear;
  animation-duration: 1.5s;
  animation-fill-mode: both;
}
.blur{
	animation-name: imageBlur;
	opacity: 1;
	transition: .8s;
}
@keyframes imageBlur {
  from {
    opacity: 0;
    filter: blur(15px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}
.fadeIn {
  opacity: 0;
}
.fadeInUp {
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-name: fadeInInUp;
}

/*!
animation > keyframes
------------------------------
*/
@keyframes shine {
  100% {
    left: 125%;
  }
}

@keyframes pulsation {
  0% { transform: scale(1); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1.1); }
}

@keyframes pathmove {
  0% {
    height: 0;
    opacity: 1;
  }
  80% {
    height: 160px;
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes katakata {
  0% {
      transform: translate(0px, 0px);
  }
  21% {
      transform: translate(0px, 0px);
  }
  22% {
      transform: translate(0px, 2px);
  }
  23% {
      transform: translate(0px, -2px);
  }
  24% {
      transform: translate(0px, 2px);
  }
  25% {
      transform: translate(0px, -2px);
  }
  100% {
      transform: translate(0px, 0px);
  }
}

@keyframes fadeInInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  30% {
    opacity: 0;
    animation-timing-function: ease-out;
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-timing-function: ease-out;
  }
}