@charset "UTF-8";
/* ------------------------------------------
アニメーション
------------------------------------------- */
/* タイトルスライドイン
========================================= */
.slide-in {
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
}

.slide-in_inner {
  display: inline-block;
  vertical-align: top;
}

.leftAnime {
  opacity: 0;
}

.slideAnimeLeftRight {
  animation-name: slideTextX100;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX100 {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.slideAnimeRightLeft {
  animation-name: slideTextX-100;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes slideTextX-100 {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
/* svg 線を描くアニメーション */
.stroke path {
  fill: transparent;
  stroke: transparent;
}

.is-stroke path {
  animation: stroke 1.5s ease-in-out forwards;
  fill: #fff;
  stroke: #fff;
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  stroke-width: 2;
}

@keyframes stroke {
  0% {
    stroke-dashoffset: 2000;
    fill: transparent;
  }
  70% {
    stroke-dashoffset: 0;
    fill: transparent;
  }
  100% {
    fill: #fff;
  }
}
/* ぼかしフェードイン
======================================== */
.blur {
  opacity: 0;
}

.is-blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: translate(20px, -20px) scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
/* ふわふわ
======================================== */
.anime-upDown {
  animation: 3s upDown infinite;
}

@keyframes upDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
/* フェードイン（基本）
======================================== */
.fadeIn, .fadeUpDown, .fadeLeftRight, .fadeRightLeft, .fadeInOpacity, .fv_fadeRightLeft, .fv_fadeInOpacity,
.fadeInSP, .fadeUpDownSP, .fadeLeftRightSP, .fadeRightLeftSP {
  opacity: 0;
  animation-fill-mode: forwards;
  transition: opacity 1s, visibility 1s, transform 1s;
}

.fadeIn_PC_TB {
  opacity: 0;
  animation-fill-mode: forwards;
  transition: opacity 1s, visibility 1s, transform 1s;
}
@media (max-width: 768px) {
  .fadeIn_PC_TB {
    opacity: 1;
  }
}

.is-fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.is-fadeInSP {
  animation-name: fadeInAnimeSP;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnimeSP {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.is-fadeUpDown {
  animation-name: fadeUpDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpDownAnime {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.is-fadeUpDownSP {
  animation-name: fadeUpDownAnimeSP;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpDownAnimeSP {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.is-fadeLeftRight {
  animation-name: fadeLeftRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftRightAnime {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
.is-fadeLeftRightSP {
  animation-name: fadeLeftRightAnimeSP;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftRightAnimeSP {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
.is-fadeRightLeft {
  animation-name: fadeRightLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightLeftAnime {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
.is-fadeRightLeftSP {
  animation-name: fadeRightLeftAnimeSP;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightLeftAnimeSP {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}
.is-fadeInOpacity {
  animation-name: fadeInOpacityAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInOpacityAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* フェードイン（時間差）
======================================== */
.delayScroll > * {
  opacity: 0;
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeUpSP {
  animation-name: fadeUpAnimeSP;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnimeSP {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.parallax {
  overflow: hidden;
}
.parallax img {
  transform: translateZ(0) scale(1.2, 1.2);
}

/*　遅延時間
======================================== */
.delay-time_05s {
  animation-delay: 0.5s;
}

.delay-time_1s {
  animation-delay: 1s;
}

.delay-time_2s {
  animation-delay: 2s;
}

.delay-time_3s {
  animation-delay: 3s;
}

.delay-time_n1 {
  animation-delay: 2s;
}

.delay-time_n2 {
  animation-delay: 2.5s;
}

html {
  margin-top: 0 !important;
}

body {
  font-family: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 1.111vw, 16px);
  color: #222222;
  line-height: 1.5;
  width: 100%;
  overflow-x: hidden;
  background-color: #F4F4F4;
}
@media (max-width: 768px) {
  body {
    font-size: 1rem;
  }
}
body.lang-en {
  font-family: "Poppins", sans-serif;
}
body.top {
  background-color: #fff;
}

main {
  position: relative;
  margin-top: 114px;
}
@media (max-width: 768px) {
  main {
    margin-top: 70px;
  }
}

.page__inner {
  padding-bottom: 6.25em;
}
@media (max-width: 768px) {
  .page__inner {
    padding-top: 4em !important;
  }
}
.page__title {
  font-size: 3em;
  font-weight: 600;
  margin-bottom: 1em;
}
@media (max-width: 768px) {
  .page__title {
    font-size: 2em;
    margin-bottom: 0.5em;
  }
}
.page__contents {
  background-color: #fff;
  border-radius: 15px;
  padding: 3em 2.5em;
}
@media (max-width: 768px) {
  .page__contents {
    margin-bottom: 1.5em;
    padding: 2.5em 1.5em;
  }
}

.page_default__contents h2, .page_default__contents h3, .page_default__contents h4, .page_default__contents h5, .page_default__contents h6 {
  font-size: 500px;
  margin-top: 2em;
  margin-bottom: 1em;
}
.page_default__contents h2 {
  font-size: 1.5em;
}
@media (max-width: 768px) {
  .page_default__contents h2 {
    font-size: 1.25em;
  }
}
.page_default__contents h3 {
  font-size: 1.25em;
}
@media (max-width: 768px) {
  .page_default__contents h3 {
    font-size: 1.125em;
  }
}
.page_default__contents h4 {
  font-size: 1.125em;
}
@media (max-width: 768px) {
  .page_default__contents h4 {
    font-size: 1em;
  }
}
.page_default__contents h5, .page_default__contents h6 {
  font-size: 1em;
}
.page_default__contents p {
  line-height: 1.8;
  margin-top: 1em;
  margin-bottom: 1em;
}
@media (max-width: 768px) {
  .page_default__contents p {
    font-size: 0.875em;
  }
}
.page_default__contents ol li, .page_default__contents ul li {
  line-height: 1.8;
}
.page_default__contents ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
}
.page_default__contents ol li::marker {
  font-weight: bold;
}
.page_default__contents ul li {
  padding-left: 1rem;
  position: relative;
  display: flex;
  align-items: flex-start;
}
.page_default__contents ul li::before {
  content: "●";
  position: absolute;
  left: 0.7em;
  top: 1.2em;
  font-size: 0.4em;
  display: block;
}

* {
  box-sizing: border-box;
}

a {
  transition: 0.3s;
  cursor: pointer;
  text-decoration: none;
  color: #222222;
}

h2, h3, h4, h5, h6 {
  font-size: clamp(12px, 1.111vw, 16px);
}
@media (max-width: 768px) {
  h2, h3, h4, h5, h6 {
    font-size: 1rem;
  }
}

ol, ul {
  list-style-type: none;
}

img, video, iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
  user-drag: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}

/* utility 
====================================== */
@media (max-width: 1280px) {
  .xl_only {
    display: none;
  }
}

@media (max-width: 1024px) {
  .pc_only {
    display: none;
  }
}

.sp_only {
  display: none;
}
@media (max-width: 768px) {
  .sp_only {
    display: block;
  }
}

.tb_only {
  display: none;
}
@media (max-width: 1024px) {
  .tb_only {
    display: block;
  }
}
@media (max-width: 768px) {
  .tb_only {
    display: none;
  }
}

@media (max-width: 768px) {
  .pc_tb {
    display: none;
  }
}

.tb_sp {
  display: none;
}
@media (max-width: 1024px) {
  .tb_sp {
    display: block;
  }
}

.full-size {
  margin: 0 calc(50% - 50vw);
}

/* section common
====================================== */
.section__inner {
  width: 88.889%;
  padding: 5em 0;
  max-width: 960px;
  margin: auto;
  position: relative;
  z-index: 0;
}
@media (max-width: 768px) {
  .section__inner {
    width: 89.74359%;
  }
}
.section__inner.--s {
  max-width: 880px;
}
@media (max-width: 768px) {
  .section__inner.--s {
    width: 89.74359%;
  }
}
.section__inner.--l {
  width: 88.889%;
  max-width: 1280px;
}
@media (max-width: 768px) {
  .section__inner.--l {
    width: 89.74359%;
  }
}
.section__inner.--center {
  text-align: center;
}
.section__title {
  font-size: 1.5em;
  font-weight: 500;
  padding-left: 0.625rem;
  line-height: 1.333;
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 0;
}
@media (max-width: 768px) {
  .section__title {
    margin-bottom: 2rem;
  }
}
.section__title::before {
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  border-radius: 2px;
  background-color: #204DA4;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.section__title.--center {
  text-align: center;
}
.section__title.--white .section__title-en, .section__title.--white .section__title-jp {
  color: #fff;
}
.section__title.--white::before {
  background: url(../img/common/icons/icon_piece-gray.svg) no-repeat center center/contain;
}
.section__title.--blue::before {
  background: url(../img/common/icons/icon_piece-white.svg) no-repeat center center/contain;
}
.section__title-en, .section__title-jp {
  display: block;
}
.section__title-en {
  font-family: "Poppins", sans-serif;
  font-size: 3em;
  letter-spacing: 0.05em;
  line-height: 1.23;
  font-weight: 600;
  margin-bottom: 3px;
}
.section__title-jp {
  color: #3C95FA;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.section__text {
  line-height: 2.4;
  letter-spacing: 0.05em;
}
@media (max-width: 768px) {
  .section__text {
    font-size: 0.875em;
    line-height: 1.8;
  }
}

.--bg-gray {
  background-color: #F4F4F4;
}

.breadcrumbs {
  font-size: 0.75em;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
}
.breadcrumbs__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 1em 0;
}
.breadcrumbs a {
  color: #204DA4;
  transition: all 0.3s;
}
.breadcrumbs a:hover {
  opacity: 0.7;
}
.breadcrumbs span {
  display: block;
}
.breadcrumbs span[property=name] {
  padding: 0;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* e_people
======================================= */
.people__item {
  cursor: pointer;
  outline: none;
}
.people__item:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #204DA4;
  border-radius: 10px;
}
.people__item:hover .people__item-btn {
  background-color: #204DA4;
  color: #fff;
}
.people__item:hover .people__item-btn::after {
  background: url(../img/common/icon_plus-white.svg) no-repeat center center/contain;
}
.people__item-image img {
  border-radius: 10px 10px 0 0;
}
.people__item-contents {
  border-radius: 0 0 10px 10px;
  border-right: 1px solid #204DA4;
  border-bottom: 1px solid #204DA4;
  border-left: 1px solid #204DA4;
  padding: 1.25em;
}
.people__item-title {
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0.5em;
}
.people__item-cats {
  display: flex;
  gap: 0.625em;
}
.people__item-cat {
  font-size: 0.75em;
  color: #204DA4;
}
.people__item-text {
  margin-top: 1.25em;
}
.people__item-btn {
  font-size: 0.75em;
  width: 100px;
  height: 28px;
  line-height: 26px;
  text-align: center;
  color: #204DA4;
  border: 1px solid #E8E8E8;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0.8em auto 0;
  transition: all 0.3s ease;
}
.people__item-btn::after {
  content: "";
  display: block;
  width: 8.3px;
  height: 8.3px;
  background: url(../img/common/icon_plus-blue.svg) no-repeat center center/contain;
  transition: all 0.3s ease;
}

/* e_updates
======================================= */
.updates__item {
  list-style: none;
  padding: 0 0.625em 1.25em;
  border-bottom: 1px solid #fff;
}
.updates__item + .updates__item {
  margin-top: 1.875em;
}
.updates__item.--thumb a {
  display: flex;
  align-items: flex-start;
  gap: 1.875em;
}
@media (max-width: 768px) {
  .updates__item.--thumb a {
    gap: 1.25em;
  }
}
.updates__item.--thumb a:hover img {
  transform: scale(1.05);
}
.updates__item-image {
  width: 160px;
  flex-shrink: 0;
  border: 2px solid #F4F4F4;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width: 768px) {
  .updates__item-image {
    width: 100px;
  }
}
.updates__item-image img {
  aspect-ratio: 16/9;
  transition: 0.3s;
}
@media (max-width: 768px) {
  .updates__item-image img {
    aspect-ratio: 3/2;
  }
}
.updates__item-contents {
  flex: 1;
}
.updates__item a {
  transition: 0.3s;
}
.updates__item a:hover {
  color: #204DA4;
}
.updates__item a:hover .updates__item-tag {
  background-color: #204DA4;
}
.updates__item-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5em 1.25em;
  margin-bottom: 1em;
}
.updates__item-tags {
  display: flex;
  gap: 0.625em;
}
.updates__item-tag {
  font-size: 0.75em;
  min-width: 70px;
  text-align: center;
  border-radius: 4px;
  color: #fff;
  background-color: #3C3C3C;
  padding: 3px;
  transition: 0.3s;
}
.updates__item-date {
  font-size: 0.75em;
}
.updates__item-title {
  font-weight: 500;
}

.cv {
  height: min(29vw, 418px);
}
@media (max-width: 768px) {
  .cv {
    height: min(120vw, 452px);
  }
}
.cv__inner {
  display: flex;
  height: 100%;
}
@media (max-width: 768px) {
  .cv__inner {
    flex-direction: column;
  }
}
.cv__link {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media (max-width: 768px) {
  .cv__link {
    width: 100%;
  }
}
.cv__link.--contact {
  background: url(../img/common/cv_contact_bg.png) no-repeat center center/cover;
}
.cv__link.--career {
  background: url(../img/common/cv_career_bg.png) no-repeat center center/cover;
}
.cv__link.--career:hover .cv__link-btn span {
  color: #204DA4;
  background-color: #fff;
}
.cv__link.--career:hover .cv__link-btn span::after {
  background: url(../img/common/btn_arrow-navy-outer.svg) no-repeat center center/contain;
}
.cv__link a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 2.5em 3.75em;
}
.cv__link a:hover .cv__link-btn span {
  color: #204DA4;
  background-color: #fff;
}
.cv__link a:hover .cv__link-btn span::after {
  background: url(../img/common/btn_arrow-navy.svg) no-repeat center center/contain;
}
.cv__link .text {
  font-size: 2.5em;
  color: #fff;
  font-weight: 500;
}
@media (max-width: 768px) {
  .cv__link .text {
    font-size: 1.5em;
  }
}
.cv__link-btn {
  width: 100%;
  position: absolute;
  bottom: 2.5em;
  right: 3.75em;
}
@media (max-width: 768px) {
  .cv__link-btn {
    bottom: 1em;
    right: 1.5em;
  }
}

.footer__upper-inner {
  display: flex;
  justify-content: space-between;
  padding-top: 7.5em;
  border-bottom: 1px solid #C3C3C3;
}
@media (max-width: 768px) {
  .footer__upper-inner {
    padding-top: 5em;
    padding-bottom: 1.875em;
    flex-direction: column;
    gap: 5em;
  }
}
.footer__contents {
  width: 40%;
  max-width: 360px;
}
@media (max-width: 768px) {
  .footer__contents {
    width: 100%;
  }
}
.footer__logo {
  width: 275px;
  margin-bottom: 2.5em;
}
@media (max-width: 768px) {
  .footer__logo {
    width: 180px;
    margin-bottom: 1.875em;
  }
}
.footer__text {
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 2.5em;
}
@media (max-width: 768px) {
  .footer__text {
    margin-bottom: 1.875em;
  }
}
.footer__address {
  font-size: 0.875em;
  line-height: 1.5;
  margin-bottom: 0.625rem;
}
.footer__map a {
  font-size: 0.875em;
  color: #204DA4;
  text-decoration: underline;
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin-bottom: 2.5em;
}
.footer__map a::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: url(../img/common/outer-gray.svg) no-repeat center center/contain;
}
.footer__map a:hover {
  opacity: 0.7;
}
.footer__sns {
  display: flex;
  align-items: center;
  gap: 1.25em;
}
.footer__sns-item a {
  max-height: 2em;
}
.footer__nav {
  width: 50%;
}
@media (max-width: 768px) {
  .footer__nav {
    width: 100%;
  }
}
.footer__nav-links {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, auto);
  gap: 1.875em;
}
@media (max-width: 768px) {
  .footer__nav-links {
    grid-auto-flow: row;
  }
}
.footer__nav-link > a, .footer__nav-link > span {
  display: block;
  line-height: 1.5;
}
.footer__nav-link a {
  transition: 0.3s;
}
.footer__nav-link a:hover {
  color: #204DA4;
}
.footer__nav-link.--sub > a {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 5px;
}
.footer__nav-link.--sub > a::before {
  content: "-";
  display: block;
  margin-right: 3px;
}
.footer__nav-link.--outer a {
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.footer__nav-link.--outer a::after {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: url(../img/common/outer-gray.svg) no-repeat center center/contain;
}
.footer__lower-inner {
  padding-top: 2.5em;
  padding-bottom: 2.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 768px) {
  .footer__lower-inner {
    padding-top: 1.25em;
    padding-bottom: 1.875em;
    flex-direction: column-reverse;
    gap: 1.25em;
    align-items: flex-start;
  }
}
.footer__lower-link a {
  font-size: 0.875em;
  text-decoration: underline;
  transition: 0.3s;
}
.footer__lower-link a:hover {
  color: #204DA4;
}
.footer__copy {
  font-size: 0.875em;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 114px;
  background-color: #fff;
}
@media (max-width: 768px) {
  .header {
    height: 70px;
  }
}
.header__inner {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
.header__left {
  display: flex;
  align-items: center;
  gap: 5em;
}
@media (max-width: 1024px) {
  .header__left {
    gap: 2em;
  }
}
.header__logo a {
  display: block;
  width: clamp(150px, 14.86111vw, 214.5px);
  transform: translateX(-2.5em);
}
@media (max-width: 768px) {
  .header__logo a {
    transform: none;
    width: 131.5px;
  }
}
.header__logo a:hover {
  opacity: 0.7;
}
.header__right {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.header__nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.7778vw, 40px);
}
.header__nav-list {
  display: flex;
  align-items: center;
  gap: clamp(1.25em, 0.208333vw, 1.875em);
  padding-right: 1.5em;
  position: relative;
}
@media (max-width: 768px) {
  .header__nav-list {
    display: none;
  }
}
.header__nav-list::after {
  content: "";
  display: block;
  width: 1px;
  height: 1.25em;
  background-color: #A8A8A8;
  position: absolute;
  right: 0;
}
.header__nav-item {
  height: 100%;
}
.header__nav-item.--outer > a {
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.header__nav-item.--outer > a::after {
  content: "";
  display: block;
  width: 0.75em;
  height: 0.75em;
  background: url(../img/common/outer-black.svg) no-repeat center center/contain;
}
.header__nav-item.--sub {
  position: relative;
}
.header__nav-item.--sub > span {
  cursor: pointer;
  padding-right: 1.25em;
}
.header__nav-item.--sub > span::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #222222;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: 0.3s;
}
.header__nav-item.--sub:hover .header__nav-sublist {
  opacity: 1;
  pointer-events: auto;
}
.header__nav-item > span, .header__nav-item > a {
  display: block;
  font-size: 0.875em;
  transition: 0.3s;
  position: relative;
  padding: 0.5em 0;
  white-space: nowrap;
}
.header__nav-item > span:hover, .header__nav-item > a:hover {
  color: #204DA4;
}
.header__nav-item > span:hover::before, .header__nav-item > a:hover::before {
  opacity: 1;
}
.header__nav-item > span::before, .header__nav-item > a::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0.5em;
  left: 0;
  background-color: #204DA4;
  transition: 0.3s;
  opacity: 0;
}
.header__nav-sublist {
  background-color: #204DA4;
  border-radius: 5px;
  padding: 1em 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 120px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
}
.header__nav-subitem a {
  display: block;
  width: 100%;
  background-color: #204DA4;
  padding: 0.125em 1em;
  color: #fff;
  font-size: 0.875em;
  transition: 0.3s;
  white-space: nowrap;
}
.header__nav-subitem a:hover {
  text-decoration: underline;
}
.header__nav-btns {
  display: flex;
  align-items: center;
  gap: 2.5em;
}
.header__nav-languages {
  padding-right: 1em;
  position: relative;
  transition: 0.3s;
}
.header__nav-languages:hover {
  color: #204DA4;
}
.header__nav-languages:hover::after {
  border-top-color: #204DA4;
}
.header__nav-languages::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #A8A8A8;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: 0.3s;
}
.header__nav-languages select {
  color: #204DA4;
  cursor: pointer;
}
.header__nav-languages select:focus {
  outline: none;
}
.header__nav-login a {
  display: flex;
  align-items: center;
  gap: 0.55em;
  color: #204DA4;
  transition: 0.3s;
}
.header__nav-login a:hover {
  text-decoration: underline;
}
.header__nav-login a::before {
  content: "";
  display: block;
  width: 1em;
  height: 1em;
  background: url(../img/common/login.svg) no-repeat center center/contain;
}
.header__nav-contact {
  width: auto;
  height: 35px;
}
@media (max-width: 768px) {
  .header__nav-contact {
    display: none;
  }
}
.header__nav-contact a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.875em;
  background-color: #204DA4;
  border: 1px solid #204DA4;
  padding: 0.5em 1.5em;
  border-radius: 60px;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .header__nav-contact a {
    width: 3rem;
    height: 3rem;
    padding: 0.5em;
  }
}
.header__nav-contact a:hover {
  background-color: #fff;
  color: #204DA4;
}
.header__btn {
  display: none;
  cursor: pointer;
  position: relative;
  z-index: 8;
  font-size: 0.75em;
  line-height: 1;
  width: 1.6875rem;
  height: 1rem;
}
@media (max-width: 768px) {
  .header__btn {
    display: block;
  }
}
.header__btn .bar {
  background-color: #204DA4;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  transition: all 0.3s;
  transform-origin: center;
  position: absolute;
  left: 0;
}
.header__btn .bar:nth-child(1) {
  top: 0;
}
.header__btn .bar:nth-child(2) {
  opacity: 1;
  top: 50%;
  transform: translateY(-50%);
}
.header__btn .bar:nth-child(3) {
  bottom: 0;
}
.header__menu {
  display: none;
  position: fixed;
  top: 70px;
  left: 0;
  width: 100vw;
  height: calc(100vh - 70px);
  overflow: scroll;
  background-color: #fff;
}
.header__menu-inner {
  padding: 0 1.25em 4em;
  margin: 0 auto;
}
.header__menu-list {
  margin-bottom: 1.5em;
}
.header__menu-item > a, .header__menu-item > span {
  font-size: 1em;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 1.5em 0.625em;
  border-top: 1px solid #F4F4F4;
}
.header__menu-item > a:hover, .header__menu-item > span:hover {
  color: #204DA4;
}
.header__menu-item > a::before, .header__menu-item > span::before {
  content: "";
  display: block;
  width: 0.875em;
  height: 0.875em;
  background: url(../img/common/icon_arrow-blue.svg) no-repeat center center/contain;
  transform: rotate(-90deg);
}
.header__menu-item:last-child > a, .header__menu-item:last-child > span {
  border-bottom: 1px solid #F4F4F4;
}
.header__menu-item.--sub {
  position: relative;
  cursor: pointer;
}
.header__menu-item.--sub::before, .header__menu-item.--sub::after {
  content: "";
  display: block;
  width: 1em;
  height: 2px;
  border-radius: 2px;
  background-color: #204DA4;
  position: absolute;
  top: 2.2em;
  right: 0;
}
.header__menu-item.--sub::before {
  transform: translateX(-50%) rotate(-90deg);
  transition: transform 0.3s;
}
.header__menu-item.--sub::after {
  transform: translateX(-50%);
}
.header__menu-item.--sub.is-open::before {
  transform: translateX(-50%) rotate(0deg);
}
.header__menu-item.--sub.is-open > span {
  border-bottom: 1px solid #F4F4F4;
}
.header__menu-item.--outer > a::before {
  background: url(../img/common/outer-blue.svg) no-repeat center center/contain;
  transform: inherit;
}
.header__menu-sublist-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.header__menu-item.--sub.is-open .header__menu-sublist-wrap {
  grid-template-rows: 1fr;
}
.header__menu-sublist {
  margin: 0;
  list-style: none;
  min-height: 0;
  overflow: hidden;
  padding-left: 1.5em;
}
.header__menu-subitem a {
  display: block;
  padding: 0.9375em 0 0.9375em 1em;
  color: #808080;
  transition: color 0.3s;
}
.header__menu-subitem a::before {
  content: "-";
  display: inline-block;
  margin-right: 3px;
}
.header__menu-subitem a:hover {
  color: #204DA4;
}
.header__menu-lower-link {
  margin-bottom: 1.875em;
}
.header__menu-lower-link a {
  font-size: 0.875em;
  text-decoration: underline;
  transition: 0.3s;
}
.header__menu-sns {
  display: flex;
  align-items: center;
  gap: 1.25em;
}
.header__menu-sns li a {
  display: block;
}

.is-open .header__inner {
  height: 70px;
}
.is-open .header__menu {
  display: block;
}
.is-open .header__btn .bar {
  height: 3px;
}
.is-open .header__btn .bar:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.is-open .header__btn .bar:nth-child(2) {
  opacity: 0;
}
.is-open .header__btn .bar:nth-child(3) {
  bottom: inherit;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

/* btn 
========================================= */
.btn {
  position: relative;
}
.btn > a, .btn > span, .btn > input {
  cursor: pointer;
  transition: 0.3s;
}
.btn__arrow {
  max-width: 160px;
  height: 46px;
}
.btn__arrow.--right {
  margin-left: auto;
}
.btn__arrow.--l {
  max-width: 200px;
}
.btn__arrow > a, .btn__arrow > span, .btn__arrow > input {
  height: 100%;
  color: #fff;
  background-color: #204DA4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 1.125em;
  border: 3px solid #204DA4;
  overflow: hidden;
  position: relative;
  border-radius: 50px;
  transition: all 0.3s ease;
}
@media (max-width: 768px) {
  .btn__arrow > a, .btn__arrow > span, .btn__arrow > input {
    font-size: 1em;
  }
}
.btn__arrow > a::after, .btn__arrow > span::after, .btn__arrow > input::after {
  content: "";
  display: block;
  width: 2.5em;
  height: 2.5em;
  background: url(../img/common/btn_arrow-white.svg) no-repeat center center/contain;
  transition: all 0.3s ease;
}
.btn__arrow > a:hover, .btn__arrow > span:hover, .btn__arrow > input:hover {
  background-color: #fff;
  color: #204DA4;
}
.btn__arrow > a:hover::after, .btn__arrow > span:hover::after, .btn__arrow > input:hover::after {
  background: url(../img/common/btn_arrow-navy.svg) no-repeat center center/contain;
}
.btn__arrow.--outer > a::after, .btn__arrow.--outer > span::after, .btn__arrow.--outer > input::after {
  background: url(../img/common/btn_arrow-white-outer.svg) no-repeat center center/contain;
}
.btn__arrow.--outer > a:hover::after, .btn__arrow.--outer > span:hover::after, .btn__arrow.--outer > input:hover::after {
  background: url(../img/common/btn_arrow-navy-outer.svg) no-repeat center center/contain;
}
.btn__white {
  width: 100%;
  max-width: 20.625em;
  height: 5.5em;
}
@media (max-width: 768px) {
  .btn__white {
    max-width: 20em;
    height: 4em;
  }
}
.btn__white a {
  font-size: 1.25em;
  font-weight: 500;
  color: #204DA4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5em;
  background-color: #fff;
  height: 100%;
  border-radius: 44px;
  border: 1.5px solid #204DA4;
  padding: 0.625em 0;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) {
  .btn__white a {
    font-size: 1em;
    gap: 1em;
  }
}
.btn__white a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: #204DA4;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease;
  z-index: -1;
}
.btn__white a .image {
  display: inline-block;
  overflow: hidden;
  position: relative;
}
.btn__white a .image::before, .btn__white a .image::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.5s ease;
}
@media (max-width: 768px) {
  .btn__white a .image::before, .btn__white a .image::after {
    width: 1.25rem;
    height: 1.25rem;
  }
}
.btn__white a .image::before {
  position: absolute;
  transform: translate(-100%, 100%) scale(0) rotate(-45deg);
  background: url(../img/common/icons/icon_arrow-white.svg) no-repeat center center/contain;
}
.btn__white a .image::after {
  transform: rotate(-45deg);
  background: url(../img/common/icons/icon_arrow-navy.svg) no-repeat center center/contain;
}
.btn__white a:hover {
  background-color: #204DA4;
  color: #fff;
  border: 1.5px solid #fff;
}
.btn__white a:hover::before {
  width: 330px;
  height: 330px;
}
.btn__white a:hover .image::after {
  transform: translate(100%, -100%) rotate(-45deg);
}
.btn__white a:hover .image::before {
  transform: translate(0) scale(1) rotate(-45deg);
}

/* TOP Works
========================================= */
.swiper-button-next, .swiper-button-prev {
  font-family: "Poppins", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff !important;
  letter-spacing: 0.05em;
  width: 7.5em !important;
  height: 7.5em !important;
  border: 1.5px solid #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0 !important;
  top: inherit !important;
  left: inherit !important;
  right: inherit !important;
  transition: all 0.5s ease;
  position: relative !important;
}
@media (max-width: 768px) {
  .swiper-button-next, .swiper-button-prev {
    width: 5em !important;
    height: 5em !important;
  }
}
.swiper-button-next::after, .swiper-button-prev::after {
  display: none !important;
}
.swiper-button-next .image, .swiper-button-prev .image {
  overflow: hidden;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
}
@media (max-width: 768px) {
  .swiper-button-next .image, .swiper-button-prev .image {
    width: 1.25rem;
    height: 1.25rem;
  }
}
.swiper-button-next .image::before, .swiper-button-next .image::after, .swiper-button-prev .image::before, .swiper-button-prev .image::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  transition: all 0.5s ease;
}
@media (max-width: 768px) {
  .swiper-button-next .image::before, .swiper-button-next .image::after, .swiper-button-prev .image::before, .swiper-button-prev .image::after {
    width: 1.25rem;
    height: 1.25rem;
  }
}
.swiper-button-next .image::before, .swiper-button-prev .image::before {
  background: url(../img/common/icons/icon_arrow-white.svg) no-repeat center center/contain;
}
.swiper-button-next .image::after, .swiper-button-prev .image::after {
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/common/icons/icon_arrow-navy.svg) no-repeat center center/contain;
}
@media (max-width: 768px) {
  .swiper-button-next .text, .swiper-button-prev .text {
    font-size: 0.75rem;
  }
}
.swiper-button-next:hover, .swiper-button-prev:hover {
  background-color: #fff;
  border: 1.5px solid #204DA4;
  color: #204DA4 !important;
}

.swiper-button-next {
  margin-bottom: 2em;
}
@media (max-width: 768px) {
  .swiper-button-next {
    margin-bottom: 0;
  }
}
.swiper-button-next .image::after {
  transform: translateX(-100%);
}
.swiper-button-next:hover .image::after {
  transform: translateX(0);
}
.swiper-button-next:hover .image::before {
  transform: translateX(100%);
}

.swiper-button-prev .image::before {
  transform: rotate(-180deg);
}
.swiper-button-prev .image::after {
  transform: translateX(100%) rotate(-180deg);
}
.swiper-button-prev:hover .image::before {
  transform: translateX(-100%) rotate(-180deg);
}
.swiper-button-prev:hover .image::after {
  transform: translateX(0) rotate(-180deg);
}