@charset "UTF-8";
* {
  line-height: 1.3;
  letter-spacing: -0.02em;
}

html,
body {
  width: 100%;
  max-width: 100%;
}

hr,
figure {
  padding: 0;
  margin: 0;
}

pre {
  white-space: pre-wrap;
}

textarea {
  resize: none;
}

hr {
  border: none;
  margin: 0;
}

.wrap {
  width: 100%;
  max-width: 100%;
  color: #111;
  font-size: 1.6rem;
  position: relative;
  overflow-x: clip;
}

.ani {
  transition: all 1s;
}
.ani.down {
  transform: translateY(-80px);
}
.ani.up {
  transform: translateY(80px);
}
.ani.left {
  transform: translateX(80px);
}
.ani.right {
  transform: translateX(-80px);
}
.ani.opacity {
  opacity: 0;
}
.ani.off {
  position: relative;
}
.ani.off::after {
  content: "";
  display: block;
  background: var(--color-white);
  position: absolute;
  top: 0;
  bottom: 0;
  transition: all 0.8s ease;
  width: 100%;
  height: 100%;
}
.ani.off.off-left::after {
  left: 0;
}
.ani.off.off-right::after {
  right: 0;
}
.ani.on.down, .ani.on.up {
  transform: translateY(0);
}
.ani.on.left, .ani.on.right {
  transform: translateX(0);
}
.ani.on.opacity {
  opacity: 1;
}
.ani.on.off::after {
  width: 0;
}

.inner1840,
.inner1760,
.inner1680,
.inner1520 {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.inner1840 {
  max-width: 1840px;
}

.inner1760 {
  max-width: 1760px;
}

.inner1680 {
  max-width: 1680px;
}

.inner1520 {
  max-width: 1520px;
}

.box {
  display: flex;
  flex-direction: column;
  row-gap: var(--gap120);
}

.title {
  display: flex;
  flex-direction: column;
}
.title.t-center {
  align-items: center;
  text-align: center;
}

.icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.icon img {
  max-height: 100%;
}

.color-primary {
  color: var(--color-primary) !important;
}

.color-secondary {
  color: var(--color-secondary) !important;
}

sup {
  display: inline-block;
  font-size: 1.2rem !important;
}

.blur-box {
  width: 100vw;
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
}
.blur-box .blur {
  display: inline-block;
}

.dimmed {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 3;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.item.up:nth-child(1).on {
  transition-delay: 0.1s;
}
.item.up:nth-child(2).on {
  transition-delay: 0.2s;
}
.item.up:nth-child(3).on {
  transition-delay: 0.3s;
}
.item.up:nth-child(4).on {
  transition-delay: 0.4s;
}
.item.up:nth-child(5).on {
  transition-delay: 0.5s;
}
.item.up:nth-child(6).on {
  transition-delay: 0.6s;
}
.item.up:nth-child(7).on {
  transition-delay: 0.7s;
}
.item.up:nth-child(8).on {
  transition-delay: 0.8s;
}
.item.up:nth-child(9).on {
  transition-delay: 0.9s;
}
.item.up:nth-child(10).on {
  transition-delay: 1s;
}

:root {
  --header-height: 90px;
  --form-height: 60px;
}

header {
  width: 100%;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(25px);
  z-index: 2;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
header .flex {
  display: flex;
  align-items: center;
  column-gap: 20px;
  position: relative;
  width: 100%;
  height: 100%;
}
header nav,
header .depth1,
header .depth1 > li {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
header nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
header nav a {
  transition: all 0.3s ease-out;
}
header .depth1 {
  column-gap: 84px;
}
header .depth1 > li {
  position: relative;
}
header .depth1 > li::after {
  content: "";
  width: 4px;
  height: 4px;
  background: #DBDBDB;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: calc(100% + 40px);
  transform: translateY(-50%);
}
header .depth1 > li:last-child::after {
  display: none;
}
header .depth1 > li > a {
  height: 100%;
  display: flex;
  align-items: center;
  color: #111;
  font-size: 2rem;
  font-weight: 500;
}
header .depth1 > li:hover > a {
  color: var(--color-secondary);
}
header .depth2 {
  width: 176px;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 12px;
  background: #003061;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 48, 97, 0.25);
  text-align: center;
  padding: 40px;
  position: absolute;
  top: 100%;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: all 0.4s ease-out;
}
header .depth2 > li > a {
  color: rgba(255, 255, 255, 0.66);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.4;
}
header .depth2 > li:hover > a {
  color: var(--color-white);
}
header .depth2.on {
  top: calc(100% - 12px);
  opacity: 1;
  pointer-events: inherit;
}
header .contact {
  display: inline-flex;
  height: 46px;
  column-gap: 2px;
  align-items: center;
  border-radius: 46px;
  padding: 0 24px;
  margin-left: auto;
  position: relative;
}
header .contact::before, header .contact::after {
  content: "";
  display: block;
  border-radius: 46px;
  transition: all 0.4s ease-out;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
header .contact::before {
  background-image: linear-gradient(to right, #00478F, #47A3FF);
}
header .contact::after {
  background-image: linear-gradient(to bottom, #D4161D, #EE595E);
  opacity: 0;
}
header .contact span,
header .contact img {
  position: relative;
  z-index: 1;
}
header .contact span {
  color: var(--color-white);
  font-size: 1.8rem;
  font-weight: 700;
}
header .contact:hover::before {
  opacity: 0;
}
header .contact:hover::after {
  opacity: 1;
}
header .menu-button {
  width: 32px;
  height: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 4px;
  column-gap: 4px;
  position: relative;
}
header .menu-button::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  background: url(/img/svg/icon-close.svg) no-repeat center/100%;
  opacity: 0;
  transition: all 0.2s ease;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
header .menu-button span {
  display: block;
  background: #C0D2E3;
  border-radius: 50%;
  position: relative;
  width: 100%;
  height: 100%;
}
header .menu-button span::after {
  content: "";
  display: block;
  background-image: linear-gradient(to right, #00478F, #47A3FF);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.2s ease;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
header .menu-button span:nth-child(1)::after {
  opacity: 1;
}
header .menu-button:hover span::after {
  opacity: 1;
}
header .menu-button:hover span:nth-child(2)::after, header .menu-button:hover span:nth-child(4)::after {
  transition-delay: 0.1s;
}
header .menu-button:hover span:nth-child(3)::after, header .menu-button:hover span:nth-child(5)::after, header .menu-button:hover span:nth-child(7)::after {
  transition-delay: 0.2s;
}
header .menu-button:hover span:nth-child(6)::after, header .menu-button:hover span:nth-child(8)::after {
  transition-delay: 0.3s;
}
header .menu-button:hover span:nth-child(9)::after {
  transition-delay: 0.4s;
}
header.menu-on {
  background: transparent;
  backdrop-filter: inherit;
  z-index: 4;
}
header.menu-on .logo img {
  filter: brightness(0) invert(1);
}
header.menu-on nav,
header.menu-on .contact {
  display: none;
}
header.menu-on .menu-button {
  row-gap: 0;
  column-gap: 0;
  margin-left: auto;
}
header.menu-on .menu-button::before {
  opacity: 1;
  transition-delay: 0.2s;
  width: 100%;
  height: 100%;
}
header.menu-on .menu-button span {
  opacity: 0;
}

.site-map {
  width: 100%;
  height: 100vh;
  background: #001326;
  z-index: 3;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.site-map .inner,
.site-map .snb-box {
  width: 100%;
  height: 100%;
}
.site-map .inner {
  display: flex;
  padding-top: calc(var(--header-height) + 70px);
}
.site-map .snb-box {
  width: 1400px;
  padding-top: calc(var(--header-height) + 70px);
  margin-left: auto;
}
.site-map .depth1,
.site-map .depth1 > li,
.site-map .depth2 {
  display: flex;
}
.site-map .depth1,
.site-map .depth1 > li {
  width: 100%;
}
.site-map .depth1 > li,
.site-map .depth2 {
  align-items: center;
}
.site-map .depth1 > li:hover > a,
.site-map .depth2 > li:hover > a {
  color: var(--color-white);
}
.site-map a {
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.3;
  transition: all 0.4s ease;
}
.site-map .depth1 {
  display: flex;
  flex-direction: column;
}
.site-map .depth1 > li {
  column-gap: 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  padding: 28px 0;
  position: relative;
}
.site-map .depth1 > li::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  background: var(--color-white);
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all 0.4s ease-out;
}
.site-map .depth1 > li > a {
  display: flex;
  column-gap: 20px;
  font-size: 6rem;
  font-weight: 700;
}
.site-map .depth1 > li > a::after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-image: linear-gradient(to left, #D4161D, #EE595E);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(1em);
  transition: all 0.4s ease;
}
.site-map .depth2 {
  column-gap: 60px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease-out;
}
.site-map .depth2 > li > a {
  font-size: 3.2rem;
  font-weight: 500;
}
.site-map .depth1 > li:hover::after, .site-map .depth1 > li.on::after {
  width: 100%;
}
.site-map .depth1 > li:hover > a::after, .site-map .depth1 > li.on > a::after {
  opacity: 1;
  transform: translateY(0);
}
.site-map .depth1 > li:hover .depth2, .site-map .depth1 > li.on .depth2 {
  opacity: 1;
  pointer-events: inherit;
}
.site-map.on::before {
  height: 100%;
}
.site-map.on .depth1 > li:nth-child(1) > a {
  transition: all 0.5s 0.65s, color 0.4s 0s;
}
.site-map.on .depth1 > li:nth-child(1) .depth2 > li {
  transition: all 0.5s 0.65s;
}
.site-map.on .depth1 > li:nth-child(2) > a {
  transition: all 0.5s 0.8s, color 0.4s 0s;
}
.site-map.on .depth1 > li:nth-child(2) .depth2 > li {
  transition: all 0.5s 0.8s;
}
.site-map.on .depth1 > li:nth-child(3) > a {
  transition: all 0.5s 0.95s, color 0.4s 0s;
}
.site-map.on .depth1 > li:nth-child(3) .depth2 > li {
  transition: all 0.5s 0.95s;
}
.site-map.on .depth1 > li:nth-child(4) > a {
  transition: all 0.5s 1.1s, color 0.4s 0s;
}
.site-map.on .depth1 > li:nth-child(4) .depth2 > li {
  transition: all 0.5s 1.1s;
}
.site-map.on .depth1 > li:nth-child(5) > a {
  transition: all 0.5s 1.25s, color 0.4s 0s;
}
.site-map.on .depth1 > li:nth-child(5) .depth2 > li {
  transition: all 0.5s 1.25s;
}
.site-map.on .depth1 > li:nth-child(6) > a {
  transition: all 0.5s 1.4s, color 0.4s 0s;
}
.site-map.on .depth1 > li:nth-child(6) .depth2 > li {
  transition: all 0.5s 1.4s;
}
.site-map.on .depth1 > li:nth-child(7) > a {
  transition: all 0.5s 1.55s, color 0.4s 0s;
}
.site-map.on .depth1 > li:nth-child(7) .depth2 > li {
  transition: all 0.5s 1.55s;
}
.site-map.on .depth1 > li > a {
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}
.site-map.on .depth2 > li {
  opacity: 1;
  transform: translateX(0);
}

footer {
  background: #001326;
  padding: var(--gap80) 0;
}
footer * {
  color: var(--color-white);
}
footer .flex {
  display: flex;
  justify-content: space-between;
}
footer .left-box {
  max-width: 645px;
}
footer .top a:not(.logo),
footer .family button {
  border: 2px solid rgba(255, 255, 255, 0.25);
}
footer .top {
  column-gap: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
}
footer .top .logo img {
  filter: brightness(0) invert(1);
}
footer .top a:not(.logo) {
  height: 32px;
  background: rgba(0, 0, 0, 0);
  border-radius: 16px;
  font-size: 1.4rem;
  font-weight: 500;
  padding: 0 16px;
  transition: all 0.4s ease-out;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
footer .top a:not(.logo):hover {
  background: rgba(0, 0, 0, 0.25);
}
footer .info {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 25px;
  margin: 40px 0 32px;
}
footer .info dl {
  column-gap: 4px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
footer .info dl::after {
  content: "";
  display: block;
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, 0.4);
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%);
}
footer .info dl:nth-child(2)::after, footer .info dl:nth-child(5)::after {
  display: none;
}
footer .info dl dt {
  font-weight: 500;
}
footer .info dl dd {
  font-weight: 300;
  opacity: 0.8;
}
footer .copy {
  font-weight: 300;
  opacity: 0.6;
}
footer .right-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
footer .top-button {
  width: 80px;
  height: 80px;
  background: var(--color-white);
  border-radius: 20px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
footer .top-button span, footer .top-button::before {
  transition: all 0.4s ease-out;
}
footer .top-button::before {
  content: "";
  display: block;
  background-image: linear-gradient(to bottom, #D4161D, #EE595E);
  border-radius: 20px;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
footer .top-button span {
  color: #111;
  font-size: 1.6rem;
  font-weight: 700;
  position: relative;
}
footer .top-button:hover {
  background: transparent;
}
footer .top-button:hover::before {
  opacity: 1;
}
footer .top-button:hover span {
  color: var(--color-white);
}
footer .family {
  width: 280px;
  height: var(--form-height);
  margin-top: auto;
  position: relative;
}
footer .family button,
footer .family ul {
  border-radius: 20px;
}
footer .family button,
footer .family ul li {
  padding: 0 24px;
}
footer .family button {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
footer .family button span {
  font-size: 1.6rem;
  font-weight: 500;
}
footer .family ul {
  width: 100%;
  background: var(--color-white);
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  overflow: hidden;
  display: none;
}
footer .family ul li {
  width: 100%;
  height: var(--form-height);
  border-bottom: 1px solid #DBDBDB;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
footer .family ul li a {
  color: #333;
  font-size: 1.4rem;
  font-weight: 300;
}
footer .family ul li:last-child {
  border-bottom: none;
}

.privacy-text * {
  color: #555;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.6;
}
.privacy-text h3 {
  color: #111;
  font-size: calc(var(--font36) - 0.4rem);
  font-weight: 700;
  margin-bottom: 60px;
}
.privacy-text .text-box,
.privacy-text .text,
.privacy-text .sub-text {
  display: flex;
  flex-direction: column;
}
.privacy-text .text-box {
  row-gap: 40px;
}
.privacy-text .text {
  row-gap: 30px;
}
.privacy-text .sub-text {
  row-gap: 16px;
}
.privacy-text h5 {
  color: var(--color-secondary);
  font-size: 2rem;
  font-weight: 500;
}
.privacy-text dl {
  row-gap: 16px;
}
.privacy-text dl dt {
  color: #111;
  font-weight: 500;
}
.privacy-text dl dd b {
  display: block;
  color: #555;
  font-weight: 500;
  margin-bottom: 10px;
}
.privacy-text ul li,
.privacy-text ol li {
  display: flex;
}
.privacy-text ul li::before,
.privacy-text ol li::before {
  flex-shrink: 0;
}
.privacy-text ul li::before {
  content: "·";
  font-weight: 500;
  margin: 0 8px;
}
.privacy-text ol {
  counter-reset: li;
}
.privacy-text ol li {
  counter-increment: li;
}
.privacy-text ol li::before {
  content: counter(li) ".";
  display: block;
  width: 18px;
  padding-left: 2px;
}