/* =================================================================
   # CSS Variables
   # ================================================================= */

:root {
  --color-00_black: #3f3f3f;
  --color-00_white: #ffffff;
  --color-01-navy: #003b7d;
  --color-01-black: #464646;
  --color-01-gray: #69798a;
  --color-01-blue: #658fbb;
  --color-02-black: #515151;
  --color-02-gray: #a2a2a2;
  --color-03-black: #585858;
  --color-03-gray: #e6e5e5;
  --color-04-black: #000;
  --color-04-gray: #cccccc;
  --color-background1: #ebf0f5;
  --color-background2: #f5f3f0;
}

/* =================================================================
   # Base
   # ================================================================= */

html {
  font-size: 62.5%;
}

body {
  font-family: a-otf-ryumin-pr6n, serif;
  font-size: 1.6rem;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 170%;
  color: var(--color-00_black);
  background-color: var(--color-00_white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

ul,
ol {
  list-style: none;
}

/* =================================================================
   # Root
   # ================================================================= */

.Root {
  overflow: hidden;
}

/* =================================================================
   # Utility
   # ================================================================= */

@media print, screen and (max-width: 767px) {
  .pc { display: none !important; }
}

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

/* =================================================================
   # Header
   # ================================================================= */

.Header {
  background-color: var(--color-00_white);
  font-family: fot-udkakugo-large-pr6n, sans-serif;
  font-style: normal;
  height: 21.3333333333vw;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.Header .Header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 4.6666666667vw 5.3333333333vw 4.6666666667vw 0;
  position: relative;
}

.Header .Header__inner::before {
  background-color: var(--color-background1);
  content: "";
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 66.6666666667vw;
  z-index: 0;
}

.Header .Header__logo {
  position: relative;
  width: 33.3333333333vw;
  z-index: 1;
}

.Header .Header__logoLink {
  display: block;
  margin: 0 auto;
  width: 27.8666666667vw;
}

.Header .Header__logoLink img {
  width: 100%;
  height: auto;
}

.Header .Header__burgerBtn {
  gap: 1.3333333333vw 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--color-01-gray);
  border: 1px solid var(--color-01-gray);
  border-radius: 1.3333333333vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 12vw;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  width: 12vw;
  z-index: 201;
  cursor: pointer;
}

.Header .Header__burgerBtn.-open {
  border-color: var(--color-00_white);
}

.Header .Header__burgerBtn.-open .Header__burgerLine:first-child {
  left: 3.1333333333vw;
  position: absolute;
  top: 5.6vw;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.Header .Header__burgerBtn.-open .Header__burgerLine:nth-child(2) {
  opacity: 0;
}

.Header .Header__burgerBtn.-open .Header__burgerLine:last-child {
  position: absolute;
  right: 3.1333333333vw;
  top: 5.6vw;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.Header .Header__burgerLine {
  background-color: var(--color-00_white);
  height: 2px;
  -webkit-transition: top 300ms, left 300ms, right 300ms, -webkit-transform 300ms;
  transition: top 300ms, left 300ms, right 300ms, -webkit-transform 300ms;
  transition: transform 300ms, top 300ms, left 300ms, right 300ms;
  transition: transform 300ms, top 300ms, left 300ms, right 300ms, -webkit-transform 300ms;
  width: 5.3333333333vw;
}

@media print, screen and (min-width: 768px) {
  .Header {
    height: clamp(67.4594594595px, 8.7837837838vw, 140.5405405405px);
    overflow: visible;
  }

  .Header .Header__inner {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100%;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1600px;
    padding: 0 clamp(51.8918918919px, 6.7567567568vw, 108.1081081081px);
  }

  .Header .Header__inner::before {
    height: 100%;
    left: clamp(255.827027027px, 33.3108108108vw, 532.972972973px);
    top: 0;
    width: 100vw;
  }

  .Header .Header__logo {
    width: auto;
  }

  .Header .Header__logoLink {
    margin: 0;
    width: clamp(69.0162162162px, 8.9864864865vw, 143.7837837838px);
  }

  .Header .Header__nav {
    position: relative;
    z-index: 1;
  }

  .Header .Header__navList {
    gap: clamp(10.3783783784px, 1.3513513514vw, 21.6216216216px);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }

  .Header .Header__navItem {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .Header .Header__navItem::after {
    border-right: 1px solid var(--color-02-black);
    content: "";
    height: clamp(14.5297297297px, 1.8918918919vw, 30.2702702703px);
    margin-left: clamp(10.3783783784px, 1.3513513514vw, 21.6216216216px);
    width: 1px;
  }

  .Header .Header__navItem:last-child::after {
    content: none;
  }

  .Header .Header__navLink {
    display: block;
    font-size: clamp(6.227027027px, 0.8108108108vw, 12.972972973px);
    font-weight: 600;
    letter-spacing: 0.3em;
    line-height: 1;
    padding: clamp(5.1891891892px, 0.6756756757vw, 10.8108108108px) 0;
    text-decoration: underline;
    -webkit-transition: opacity 300ms;
    transition: opacity 300ms;
    color: var(--color-00_black);
  }

  .Header .Header__navLink:hover {
    opacity: 0.7;
  }
}

/* =================================================================
   # Burger (SP drawer menu)
   # ================================================================= */

.Burger {
  background: rgba(105, 120, 140, 0.9);
  height: 100vh;
  opacity: 0;
  overflow: scroll;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-transition: opacity 200ms ease, -webkit-transform 200ms ease-out;
  transition: opacity 200ms ease, -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out, opacity 200ms ease;
  transition: transform 200ms ease-out, opacity 200ms ease, -webkit-transform 200ms ease-out;
  width: 100%;
  z-index: 200;
}

.Burger.-open {
  opacity: 1;
  pointer-events: auto;
}

.Burger .Burger__inner {
  padding-bottom: 20vw;
  padding-top: 25.3333333333vw;
}

.Burger .Burger__content {
  height: 100%;
  overflow: scroll;
  padding: 0 5.3333333333vw;
}

.Burger .Burger__navItem {
  margin-bottom: 4vw;
}

.Burger .Burger__navLink {
  color: var(--color-00_white);
  display: block;
  font-size: 3.7333333333vw;
  font-weight: 500;
  letter-spacing: 0.15em;
  line-height: 1.5;
}

@media print, screen and (min-width: 768px) {
  .Burger {
    display: none;
  }
}

/* =================================================================
   # Main
   # ================================================================= */

@media print, screen and (max-width: 767px) {
  .Main {
    padding-top: 21.3333333333vw;
  }
}

@media print, screen and (min-width: 768px) {
  .Main {
    padding-top: clamp(67.4594594595px, 8.7837837838vw, 140.5405405405px);
  }
}

/* =================================================================
   # Footer
   # ================================================================= */

.Footer {
  background-color: var(--color-03-gray);
  color: var(--color-00_black);
  font-family: fot-udkakugo-large-pr6n, sans-serif;
  font-style: normal;
  position: relative;
  z-index: 1;
}

.Footer a {
  color: var(--color-00_black);
}

.Footer .Footer__inner {
  padding: 10.6666666667vw 5.3333333333vw;
}

.Footer .Footer__column:nth-child(1) {
  border-top: 1px solid var(--color-02-gray);
}

.Footer .Footer__column.-logo {
  padding: 6.6666666667vw 0;
}

.Footer .Footer__list1 > li {
  border-bottom: 1px solid var(--color-02-gray);
  font-size: 3.7333333333vw;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
}

.Footer .Footer__list1 > li a {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 14.6666666667vw;
}

.Footer .Footer__list2 > li {
  font-size: 3.7333333333vw;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
}

.Footer .Footer__logo {
  margin-bottom: 4vw;
  width: 32vw;
}

.Footer .Footer__logo a {
  display: block;
}

.Footer .Footer__logo img {
  width: 100%;
  height: auto;
}

.Footer .Footer__text1 {
  font-size: 3.7333333333vw;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.8;
  margin-bottom: 2vw;
}

.Footer .Footer__text2 {
  font-size: 3.2vw;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.8;
}

.Footer .Footer__copyright {
  font-size: 2.6666666667vw;
  font-weight: 500;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .Footer {
    background-color: var(--color-02-gray);
    color: var(--color-00_white);
  }

  .Footer a {
    text-underline-offset: 2px;
    color: var(--color-00_white);
    text-decoration: underline;
    -webkit-text-decoration-color: rgba(255, 255, 255, 0);
    text-decoration-color: rgba(255, 255, 255, 0);
    -webkit-transition: -webkit-text-decoration-color 100ms;
    transition: -webkit-text-decoration-color 100ms;
    transition: text-decoration-color 100ms;
    transition: text-decoration-color 100ms, -webkit-text-decoration-color 100ms;
  }

  .Footer a:hover {
    -webkit-text-decoration-color: white;
    text-decoration-color: white;
  }

  .Footer .Footer__inner {
    margin: 0 auto;
    max-width: 1600px;
    padding: clamp(20.7567567568px, 2.7027027027vw, 43.2432432432px) clamp(51.8918918919px, 6.7567567568vw, 108.1081081081px) clamp(7.7837837838px, 1.0135135135vw, 16.2162162162px);
  }

  .Footer .Footer__layout {
    display: grid;
    grid-template-columns: auto auto auto auto;
  }

  .Footer .Footer__column:nth-child(1) {
    border: none;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }

  .Footer .Footer__column:nth-child(2) {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }

  .Footer .Footer__column:nth-child(3) {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }

  .Footer .Footer__column.-logo {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    padding: 0;
  }

  .Footer .Footer__list1 > li {
    border: none;
    font-size: clamp(7.2648648649px, 0.9459459459vw, 15.1351351351px);
    margin-bottom: clamp(10.3783783784px, 1.3513513514vw, 21.6216216216px);
  }

  .Footer .Footer__list1 > li a {
    height: auto;
  }

  .Footer .Footer__list1 > li.lineHeight {
    line-height: 1.6;
  }

  .Footer .Footer__list2 {
    margin-left: clamp(15.5675675676px, 2.027027027vw, 32.4324324324px);
    margin-top: clamp(10.3783783784px, 1.3513513514vw, 21.6216216216px);
  }

  .Footer .Footer__list2 > li {
    font-size: clamp(7.2648648649px, 0.9459459459vw, 15.1351351351px);
    margin-bottom: clamp(10.3783783784px, 1.3513513514vw, 21.6216216216px);
  }

  .Footer .Footer__logo {
    margin-bottom: clamp(15.5675675676px, 2.027027027vw, 32.4324324324px);
    width: clamp(54.4864864865px, 7.0945945946vw, 113.5135135135px);
  }

  .Footer .Footer__text1 {
    font-size: clamp(9.3405405405px, 1.2162162162vw, 19.4594594595px);
    font-weight: 600;
    margin-bottom: clamp(7.7837837838px, 1.0135135135vw, 16.2162162162px);
  }

  .Footer .Footer__text2 {
    font-size: clamp(7.2648648649px, 0.9459459459vw, 15.1351351351px);
    font-weight: 500;
    line-height: 1.8;
  }

  .Footer .Footer__copyright {
    font-size: clamp(7.2648648649px, 0.9459459459vw, 15.1351351351px);
    font-weight: 300;
    text-align: right;
  }
}

/* =================================================================
   # FixedCta
   # ================================================================= */

.FixedCta {
  gap: 1.3333333333vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: fixed;
  right: 0;
  top: calc(50svh - 32.6666666667vw);
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: -webkit-transform 200ms ease-out;
  transition: -webkit-transform 200ms ease-out;
  transition: transform 200ms ease-out;
  transition: transform 200ms ease-out, -webkit-transform 200ms ease-out;
  z-index: 50;
}

.FixedCta.-show {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.FixedCta .FixedCta__button {
  height: 32vw;
  width: 9.3333333333vw;
}

.FixedCta .FixedCta__link {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: var(--color-01-gray);
  border-radius: 1.3333333333vw 0 0 1.3333333333vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  width: 100%;
}

.FixedCta .FixedCta__link.-blue {
  background-color: var(--color-01-blue);
}

.FixedCta .FixedCta__text {
  color: var(--color-00_white);
  display: block;
  font-family: fot-udkakugo-large-pr6n, sans-serif;
  font-size: 3.2vw;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1;
  margin-left: 0.6666666667vw;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

@media print, screen and (min-width: 768px) {
  .FixedCta {
    gap: clamp(5.1891891892px, 0.6756756757vw, 10.8108108108px);
    right: 0;
    top: calc(50% - clamp(101.1891891892px, 13.1756756757vw, 210.8108108108px));
  }

  .FixedCta .FixedCta__button {
    height: clamp(98.5945945946px, 12.8378378378vw, 205.4054054054px);
    width: clamp(31.1351351351px, 4.0540540541vw, 64.8648648649px);
  }

  .FixedCta .FixedCta__link {
    border-radius: clamp(2.5945945946px, 0.3378378378vw, 5.4054054054px) 0 0 clamp(2.5945945946px, 0.3378378378vw, 5.4054054054px);
    -webkit-transition: background-color 300ms ease;
    transition: background-color 300ms ease;
  }

  .FixedCta .FixedCta__link:hover {
    background-color: #8493a2;
  }

  .FixedCta .FixedCta__link.-blue:hover {
    background-color: #88a9cb;
  }

  .FixedCta .FixedCta__text {
    font-size: clamp(8.3027027027px, 1.0810810811vw, 17.2972972973px);
    margin-left: clamp(1.0378378378px, 0.1351351351vw, 2.1621621622px);
  }
}

/* =================================================================
   # PageTitle
   # ================================================================= */

.PageTitle {
  position: relative;
  overflow: hidden;
  background-color: var(--color-background1);
}

@media print, screen and (max-width: 767px) {
  .PageTitle {
    padding: 12vw 6.4vw 10vw;
  }
}

@media print, screen and (min-width: 768px) {
  .PageTitle {
    padding: clamp(60px, 6.25vw, 96px) clamp(20px, 2.6vw, 40px);
  }
}

.PageTitle__en {
  display: block;
  font-family: futura-pt, sans-serif;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-01-blue);
  text-transform: uppercase;
}

@media print, screen and (max-width: 767px) {
  .PageTitle__en {
    font-size: 3.2vw;
    margin-bottom: 1.6vw;
  }
}

@media print, screen and (min-width: 768px) {
  .PageTitle__en {
    font-size: clamp(12px, 1vw, 16px);
    margin-bottom: 0.8rem;
  }
}

.PageTitle__ja {
  display: block;
  font-weight: 600;
  color: var(--color-01-navy);
  line-height: 1.4;
}

@media print, screen and (max-width: 767px) {
  .PageTitle__ja {
    font-size: 6.4vw;
  }
}

@media print, screen and (min-width: 768px) {
  .PageTitle__ja {
    font-size: clamp(28px, 2.6vw, 40px);
  }
}

.PageTitle__image {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
}

@media print, screen and (max-width: 767px) {
  .PageTitle__image {
    display: none;
  }
}

/* =================================================================
   # Title1
   # ================================================================= */

.Title1 {
  font-weight: 600;
  color: var(--color-01-navy);
  line-height: 1.5;
}

@media print, screen and (max-width: 767px) {
  .Title1 {
    font-size: 5.6vw;
    margin-bottom: 6.4vw;
  }
}

@media print, screen and (min-width: 768px) {
  .Title1 {
    font-size: clamp(24px, 2.1vw, 32px);
    margin-bottom: clamp(24px, 2.1vw, 32px);
  }
}

/* =================================================================
   # Title2
   # ================================================================= */

.Title2 {
  font-weight: 600;
  color: var(--color-01-navy);
  line-height: 1.5;
}

@media print, screen and (max-width: 767px) {
  .Title2 {
    font-size: 4.8vw;
    margin-bottom: 4.8vw;
  }
}

@media print, screen and (min-width: 768px) {
  .Title2 {
    font-size: clamp(20px, 1.77vw, 27px);
    margin-bottom: clamp(20px, 1.77vw, 27px);
  }
}

/* =================================================================
   # Title3
   # ================================================================= */

.Title3 {
  font-weight: 600;
  color: var(--color-01-black);
  line-height: 1.5;
}

@media print, screen and (max-width: 767px) {
  .Title3 {
    font-size: 4.3vw;
    margin-bottom: 3.2vw;
  }
}

@media print, screen and (min-width: 768px) {
  .Title3 {
    font-size: clamp(16px, 1.35vw, 21px);
    margin-bottom: clamp(16px, 1.35vw, 21px);
  }
}

/* =================================================================
   # Typography
   # ================================================================= */

.Typography {
  line-height: 200%;
}

@media print, screen and (max-width: 767px) {
  .Typography {
    font-size: 3.7vw;
  }
}

@media print, screen and (min-width: 768px) {
  .Typography {
    font-size: clamp(14px, 1.04vw, 16px);
  }
}

/* =================================================================
   # Button1
   # ================================================================= */

.Button1 {
  display: inline-block;
  background-color: var(--color-01-navy);
  color: var(--color-00_white);
  font-family: fot-udkakugo-large-pr6n, sans-serif;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.08em;
  border-radius: 2px;
  transition: opacity 0.3s ease;
}

.Button1:hover {
  opacity: 0.8;
}

@media print, screen and (max-width: 767px) {
  .Button1 {
    padding: 4.3vw 6.4vw;
    font-size: 3.7vw;
  }
}

@media print, screen and (min-width: 768px) {
  .Button1 {
    padding: clamp(14px, 1.14vw, 17.5px) clamp(24px, 2.1vw, 32px);
    font-size: clamp(14px, 1.04vw, 16px);
  }
}

/* =================================================================
   # Background
   # ================================================================= */

.Background.-bg1 {
  background-color: var(--color-background1);
}

.Background.-bg2 {
  background-color: var(--color-background2);
}

/* =================================================================
   # Inview animation
   # ================================================================= */

.js-inview {
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s ease;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-inview.-show {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}