@charset "UTF-8";

/*----------------------------------------フォント----------------------------------------*/
html {
  position: relative;
  z-index: 1;
}

body {
  /******ゴシック******/
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN W3",
    "Arial", "Yu Gothic", "Meiryo", sans-serif;
  /* font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; */
  /******明朝体******/
  /* font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN W3", "Yu Mincho", "MS PMincho", serif; */
  /* font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; */
  color: var(--font-color);
  background-color: var(--bg-color);
  font-size: var(--font-size);
  position: relative;
  z-index: 1;
}

.din {
  font-family: "din-2014";
}

.din-N {
  font-family: "din-2014-narrow";
}


/*----------------------------------------共通----------------------------------------*/
.container {
  min-height: 100vh;
  position: relative;
  box-sizing: border-box;
}

.inner {
  width: 100%;
  max-width: var(--inner);
  margin: 0 auto;
}

.inner.big {
  max-width: 1920px;
}

section {
  padding: var(--section-margin) var(--side-padding);
}

/* breadcrumb */
.breadcrumb {
  margin: 2em auto;
}

#smokeVideo {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: auto;
}

#smokeVideo::-webkit-media-controls {
  display: none !important;
}

#smokeVideo::-webkit-media-controls-enclosure {
  display: none !important;
}

#smokeVideo::-webkit-media-controls-panel {
  display: none !important;
}

/* 動画の右クリックメニューを無効化 */
#smokeVideo {
  -webkit-context-menu: none;
  -moz-context-menu: none;
  -ms-context-menu: none;
  context-menu: none;
}

/* 日本語ページのみ表示 */
.jp-only {
  display: block;
}

.jp-only.absolute {
  position: absolute;
}

/* 日本語以外のページでは非表示 */
.lang-en .jp-only,
.lang-zh .jp-only {
  display: none !important;
}

/* 日本語以外のページで表示 */
.jp-except {
  display: none;
}

/* 日本語以外のページでは表示 */
.lang-en .jp-except,
.lang-zh .jp-except {
  display: block;
}

.lang-en .jp-except.absolute,
.lang-zh .jp-except.absolute {
  position: absolute;
}

.lang-en .jp-except.sp,
.lang-zh .jp-except.sp {
  display: none;
}

@media (max-width: 768px) {

  .lang-en .jp-except.pc,
  .lang-zh .jp-except.pc {
    display: none;
  }

  .lang-en .jp-except.sp,
  .lang-zh .jp-except.sp {
    display: block;
  }
}

/*----------------------------------------header----------------------------------------*/
header {
  position: fixed;
  width: 100%;
  padding: 1em 1em 0 1em;
  line-height: 1.5;
  z-index: 1000;
  mix-blend-mode: exclusion;
}

header .logo {}

header .tools {
  gap: 2em;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1001;
  isolation: isolate;
}

/* 言語ドロップダウンメニュー */
header .tools #lang-dropdown {
  position: relative;
  display: inline-block;
}

header .tools .lang-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

header .tools .lang-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

header .tools .lang-toggle .current-lang {
  width: 1.5em;
  display: flex;
  align-items: center;
}

header .tools .lang-toggle .current-lang svg {
  width: 100%;
  fill: #fff;
  mix-blend-mode: difference;
  transition: all 0.3s ease;
}

header .tools .lang-toggle .dropdown-arrow {
  color: #fff;
  font-size: 0.8em;
  transition: transform 0.3s ease;
}

header .tools #lang-dropdown.active .dropdown-arrow {
  transform: rotate(180deg);
}

header .tools .lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  padding: 0.5em 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

header .tools #lang-dropdown.active .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

header .tools .lang-option {
  display: flex;
  align-items: center;
  padding: 0.5em 1em;
  text-decoration: none;
  transition: background-color 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header .tools .lang-option:last-child {
  border-bottom: none;
}

header .tools .lang-option:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

header .tools .lang-option svg {
  width: 1.5em;
  fill: #fff;
  transition: all 0.3s ease;
}

header .tools .lang-option.active svg {
  fill: #E97C00;
}

header .tools .lang-option:hover svg {
  fill: #E97C00;
}

@media screen and (max-width: 768px) {
  header .tools #lang-dropdown {
    /* opacity: 0; */
    /* transition: all 0.3s ease; */
    /* pointer-events: none; */
  }

  header .tools #lang-dropdown.active_menu {
    opacity: 1;
    pointer-events: auto;
  }
}

header .tools #menu {
  --size: 0.5em;
  display: block;
  display: flex;
  flex-direction: column;
  gap: var(--size);
  width: 3em;
  z-index: 1002;
  cursor: pointer;
  position: relative;
}

header .tools #menu span {
  display: block;
  position: relative;
  width: var(--size);
  height: var(--size);
  background-color: #fff;
  border-radius: 0.1em;
  margin: 0 auto;
  transition: ease-in 0.2s;
  mix-blend-mode: difference;
}

header .tools #menu span:before,
header .tools #menu span:after {
  content: "";
  position: absolute;
  top: 50%;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: var(--size);
  height: var(--size);
  background-color: #fff;
  border-radius: 0.1em;
  transition: ease-in 0.2s;
  mix-blend-mode: difference;
}

header .tools #menu span:before {
  right: calc(var(--size) * 2);
}

header .tools #menu span:after {
  left: calc(var(--size) * 2);
}

header .tools #menu p {
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

header .tools #menu p svg {
  fill: #fff;
  width: 100%;
  mix-blend-mode: difference;
  transition: ease-in 0.2s;
}

header .tools #menu p svg.open {}

header .tools #menu p svg.close {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

header .tools #menu.active p svg.open {
  opacity: 0;
}

header .tools #menu.active p svg.close {
  opacity: 1;
}

header .tools #menu.active span:nth-child(odd) {
  background-color: transparent;
}

header .tools #menu.active span:nth-child(even):before,
header .tools #menu.active span:nth-child(even):after {
  background-color: transparent;
}

/* nav */
#menu_box.nav_box {
  --gap: 0.5em;
  position: fixed;
  top: 0;
  right: -250px;
  width: 250px;
  height: 100vh;
  padding: 6em 1em 1em;
  background: #000;
  gap: var(--gap);
  transition: ease-in 0.2s;
  z-index: 100;
}

#menu_box.nav_box.active {
  right: 0;
}

#menu_box.nav_box .box {
  width: 100%;
}

#menu_box.nav_box .box a.title {
  display: block;
  text-align: center;
}

#menu_box.nav_box .box a.title h2 {
  --space: 0.3em;
  padding: 0 0 var(--space);
  margin: 0 auto var(--space);
  border-bottom: 2px solid #81C0E9;
  transition: ease-in 0.2s;
}

#menu_box.nav_box .box a.title:hover h2 {
  border-color: #E97C00;
}

#menu_box.nav_box .box a.title h2 svg {
  fill: #fff;
  transition: ease-in 0.2s;
}

#menu_box.nav_box .box a.title:hover h2 svg {
  fill: #E97C00;
}

#menu_box.nav_box .box ul.arrow_ul {}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li {
  --arrow-width: 1em;
  position: relative;
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li a.arrow_a {
  position: relative;
  color: #81C0E9;
  padding: 0 0 0 calc(var(--arrow-width) + 0.5em);
  transition: ease-in 0.2s;
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:hover {
  color: #E97C00;
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:before,
#menu_box.nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:after {
  --arrow-height: 0.1em;
  content: "";
  position: absolute;
  left: calc(var(--arrow-width) - var(--arrow-height) * 2);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 6px;
  height: 1px;
  background-color: #81C0E9;
  transition: ease-in 0.2s;
  z-index: -1;
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:before {
  top: calc(50% - var(--arrow-height));
  transform: rotate(45deg);
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:after {
  top: calc(50% + var(--arrow-height));
  transform: rotate(-45deg);
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:hover:before,
#menu_box.nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:hover:after {
  left: calc(100% + var(--arrow-width) - var(--arrow-height) * 2);
  background-color: #E97C00;
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li a.arrow_a span.jp-only {
  display: inline-block;
  margin: 0 0 0 0.5em;
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li a.arrow_a span.arrow_span {
  position: absolute;
  top: 50%;
  left: 0%;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: var(--arrow-width);
  height: 1px;
  background-color: #81C0E9;
  transition: ease-in 0.2s;
  z-index: -1;
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:hover span.arrow_span {
  width: calc(100% + var(--arrow-width));
  background-color: #E97C00;
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li ul {
  padding: 0 0 0 calc(var(--arrow-width) + 0.5em);
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li ul li {
  --border: 0.5em;
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li ul li a {
  position: relative;
  color: #81C0E9;
  padding: 0 0 0 calc(var(--border) + 0.3em);
  transition: ease-in 0.2s;
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li ul li a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: var(--border);
  height: 1px;
  background-color: #81C0E9;
  transition: ease-in 0.2s;
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li ul li a:hover {
  color: #E97C00;
}

#menu_box.nav_box .box ul.arrow_ul li.arrow_li ul li a:hover:before {
  width: calc(100% + var(--border) + 0.3em);
  background-color: #E97C00;
}

@media screen and (max-width: 768px) {
  #menu_box.nav_box {
    padding: 6em 1em 1em;
  }

  #menu_box.nav_box .box ul.arrow_ul li.arrow_li {
    font-size: 0.875em;
  }
}

/*----------------------------------------breadcrumb----------------------------------------*/
#breadcrumbs {
  margin: 4em auto 0;
}

#breadcrumbs ol {}

#breadcrumbs ol li {
  display: inline-block;
}

#breadcrumbs ol li:not(:last-child) {
  &:after {
    content: ">";
    margin: 0 0.5em;
  }
}

#breadcrumbs ol li a {
  transition: ease-in 0.2s;
}

#breadcrumbs ol li a:hover {
  color: #E97C00;
}

@media screen and (max-width: 768px) {
  #breadcrumbs {
    padding: 0 0 0 var(--side-padding);
  }
}

/*----------------------------------------共通----------------------------------------*/
.h2_title {
  margin: 0 0 4em;
}

.h2_title h2 {
  height: 4em;
}

.h2_title h2 svg {
  height: 100%;
  fill: #fff;
}

.h2_title h2 svg path {}

.h2_title h2 svg path.initial {
  filter: drop-shadow(0px 0px 0px #004893);
  transition: all 0.5s ease-in 0.25s;
}

.h2_title.animated h2 svg path.initial {
  filter: drop-shadow(10px 0px 0px #004893);
}

.h2_title p {
  margin: 1em auto 0;
}

.h2_title p img {
  height: 100%;
}

.h2_title .icon {
  position: relative;
  gap: 0.5em;
  left: -3.5em;

}

.h2_title .icon svg {
  width: 3em;
}

.h2_title .icon img {
  height: 1.2em;
}

@media screen and (max-width: 1120px) {
  .h2_title .icon {
    left: -3em;
  }
}

/* split */
.split {
  --split-width: 25%;
  --split-gap: 1em;
}

.split .left_content {
  width: var(--split-width);
}

.split .right_content {
  width: calc(100% - var(--split-width) - var(--split-gap));
}

@media screen and (max-width: 768px) {
  .split .left_content {
    width: 100%;
  }

  .split .right_content {
    width: 100%;
  }
}

/* btn */
.btn {
  margin: 4em 0 0;
}

.btn.center>* {
  margin: auto;
}

.btn a,
.btn button {
  --width: 150px;
  display: block;
  position: relative;
  width: var(--width);
  aspect-ratio: 1 / 1;
  padding: 2em;
}

.btn a:before,
.btn button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 99em;
  border: 8px solid #E97C00;
}

.btn a:after,
.btn button:after {
  content: "";
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--width) / 8);
  height: calc(var(--width) / 8);
  background: url(../img/common/arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.btn a span,
.btn button span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}

.btn a span img,
.btn button span img {}

.btn a span svg,
.btn button span svg {
  fill: #E97C00;
  vertical-align: middle;
}

@media screen and (max-width: 768px) {

  .btn a,
  .btn button {
    --width: 125px;
  }

  .btn a:before,
  .btn button:before {
    border: 5px solid #E97C00;
  }
}

/* flex_arrow */
.flex_arrow {
  --arrow-width: 3em;
  position: relative;
  display: inline-block;
  line-height: 1em;
}

.flex_arrow span.arrow {
  position: absolute;
  top: 50%;
  left: 0;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 3em;
  height: 1px;
  background: #E97C00;
  transition: ease-in 0.2s;
}

.flex_arrow:hover span.arrow {
  background-color: #fff;
}

.flex_arrow span.arrow:before,
.flex_arrow span.arrow:after {
  --arrow-height: 0.1em;
  content: "";
  position: absolute;
  left: calc(var(--arrow-width) - var(--arrow-height) * 2);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 6px;
  height: 1px;
  background-color: #E97C00;
  transition: ease-in 0.2s;
  z-index: -1;
}

.flex_arrow:hover span.arrow:before,
.flex_arrow:hover span.arrow:after {
  background-color: #fff;
}

.flex_arrow span.arrow:before {
  top: calc(50% - var(--arrow-height));
  transform: rotate(45deg);
}

.flex_arrow span.arrow:after {
  top: calc(50% + var(--arrow-height));
  transform: rotate(-45deg);
}

.flex_arrow span.more {
  display: inline-block;
  padding: 0 0 0 calc(var(--arrow-width) + 0.5em);
  height: 1em;
  line-height: 1em;
  vertical-align: middle;
}

.flex_arrow span.more svg {
  height: 1em;
  width: auto;
  display: block;
  transition: ease-in 0.2s;
  fill: #E97C00;
}

.flex_arrow:hover span.more svg {
  fill: #fff;
}

/* art */
.art {
  position: relative;
  padding: calc(var(--section-margin) * 2) var(--side-padding) var(--section-margin);
  margin: var(--section-margin) 0 0;
  overflow: hidden;
}

.art:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/common/art_img.svg);
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
  z-index: -1;
}

/* art_bar */
.art_bar {
  position: relative;
}

.art_bar:before {
  content: "";
  position: absolute;
  top: -0.4em;
  left: 0;
  width: 100%;
  height: 30em;
  background-size: cover;
  background-position: top right;
  background-repeat: no-repeat;
  z-index: -1;
}

.art_bar1:before {
  background-image: url(../img/common/art_bar1.svg);
}

.art_bar2:before {
  background-image: url(../img/common/art_bar2.svg);
}

.art_bar.reverse:before {
  background-position: top right;
  transform: scale(-1, 1);
}

/* art_line */
.art_line {
  position: relative;
}

.art_line:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1em;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: calc(100% + 1em);
  border-bottom: 1.8em solid #004892;
  border-right: 0.5em solid transparent;
  z-index: -2;
}

.art_line:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -1em;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 100%;
  height: 2em;
  background: linear-gradient(to right, var(--bg-color), transparent);
  z-index: -1;
}

/* circle */
.circle {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.circle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #014893;
  box-shadow: 0px 0px 25px 10px var(--bg-color) inset;
  border-radius: 50%;
  filter: blur(2px);
  z-index: -1;
}

.circle img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  margin: 0 auto;
}

/* table_box */
.table_box {
  margin: 4em auto 0;
}

.table_box h3 {
  padding: 0 0 0.5em;
  border-bottom: 2px solid #81C0E9;
}

.table_box table {
  width: 100%;
}

.table_box tr {
  display: flex;
  justify-content: space-around;
  -webkit-box-align: center;
  align-items: center;
  padding: 1em;
  border-bottom: 1px solid #81C0E9;
}

.table_box th {
  width: 10em;
}

.table_box td {
  width: 10em;
}

.table_box .note {
  margin: 1em auto 0;
  text-align: right;
}

@media screen and (max-width: 768px) {
  .table_box tr {
    padding: 1em 0;
  }

  .table_box th {
    width: 6em;
  }

  .table_box td {}
}

@media screen and (max-width: 480px) {
  .table_box tr {}

  .table_box th {
    width: 4em;
  }

  .table_box td {
    width: 13em;
  }
}


/* contact */
.contact {}

.box .contact {
  margin: 1em auto 0;
}

.contact a {
  /* margin: 0 auto 0.5em; */
}

.contact a img,
.contact a svg {
  height: 1.2em;
  fill: #fff;
}

.contact a svg {
  padding: 0 0.5em 0 0;
}

.box .contact a img,
.box .contact a svg {
  height: 0.875em;
}

.contact a .arrow {
  padding: 0 0.5em 0 0;
}

.contact a.art_line:before {
  border-bottom: 2em solid #E97C00;
  width: calc(100% + 1em * 3);
}

.box .contact a.art_line:before {
  width: calc(100% + 1em * 1);
}

.contact a.art_line:hover:before {
  border-bottom: 2em solid #81C0E9;
}

.contact a.art_line:after {
  height: 2.1em;
}

@media screen and (max-width: 768px) {
  .art:before {
    width: 160%;
  }

  .contact {
    margin: auto;
  }
}


/* pagination */
.pagination {
  margin: 4em auto 0;
  gap: 1em;
}

.pagination .arrow-link {
  position: relative;
  width: 1.2em;
  aspect-ratio: 1 / 1;
  line-height: 1em;
}

.pagination .arrow-link.disabled {
  opacity: 0.2;
}

.pagination .arrow-link .pagination-arrow {
  --arrow-width: 1em;
  --arrow-height: 1px;
  --arrow-weight: 6px;
  --arrow-deg: 45deg;
  position: relative;
  display: inline-block;
  width: var(--arrow-width);
  height: var(--arrow-height);
  background-color: #E97C00;
}

.pagination .arrow-link .pagination-arrow:before,
.pagination .arrow-link .pagination-arrow:after {
  content: "";
  position: absolute;
  left: calc(var(--arrow-width) - var(--arrow-height) * 4);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: var(--arrow-weight);
  height: var(--arrow-height);
  background-color: #E97C00;
  transition: ease-in 0.2s;
  z-index: -1;
}

.pagination .arrow-link .pagination-arrow:before {
  top: calc(50% - var(--arrow-height) * 2.4);
  transform: rotate(var(--arrow-deg));
}

.pagination .arrow-link .pagination-arrow:after {
  top: calc(50% + var(--arrow-height) * 1.4);
  transform: rotate(calc(-1 *var(--arrow-deg)));
}

.pagination .arrow-link.prev .pagination-arrow {
  transform: rotate(180deg);
}

.pagination .pagination-numbers {
  /* font-size: 1.4rem; */
  line-height: 1em;
  gap: 0.5em;
}

.pagination .pagination-numbers>* {
  width: 2em;
  aspect-ratio: 1 / 1;
  border: 1px solid #E97C00;
  border-radius: 9em;
  transition: ease-in 0.2s;
}

.pagination .pagination-numbers>*.current {
  background: #E97C00;
}

.pagination .pagination-numbers>*.page-number:hover {
  background: #E97C0088;
}

.pagination .pagination-numbers * span {
  width: auto;
}

@media screen and (max-width: 768px) {
  .pagination.end {
    -webkit-box-pack: center;
    justify-content: center;
  }
}

/*----------------------------------------thanks----------------------------------------*/
#thanks {}

#thanks .btn {}

#thanks .btn a {
  margin: 0 auto;
}

/*----------------------------------------footer----------------------------------------*/
footer {
  line-height: 1.5;
  margin: 8em auto 0;
}

footer .logo {
  margin: 0 auto 4em;
}

footer .logo h1 {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

footer .logo h1 img {
  margin: 0 auto;
}

footer .nav_box {
  --num: 3;
  --gap: 4em;
  gap: var(--gap);
}

footer .nav_box .box {
  width: calc(100% / var(--num) - var(--gap) * (var(--num) - 1) / var(--num));
}

footer .nav_box .box a.title {
  display: block;
  text-align: center;
  margin: 0 auto 1em;
  text-align: center;
}

footer .nav_box .box a.title h2 {
  --space: 0.3em;
  position: relative;
  padding: 0 0 var(--space);
  margin: 0 auto var(--space);
  transition: ease-in 0.2s;
}

footer .nav_box .box a.title h2:before,
footer .nav_box .box a.title h2:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  transition: ease-in 0.2s;
}

footer .nav_box .box a.title h2:before {
  width: 100%;
  z-index: 0;
  background-color: #81C0E9;
}

footer .nav_box .box a.title h2:after {
  width: 0;
  background-color: #E97C00;
  z-index: 1;
}

footer .nav_box .box a.title:hover h2:after {
  width: 100%;
}

footer .nav_box .box a.title:hover h2 {
  border-color: #E97C00;
}

footer .nav_box .box a.title h2 svg {
  fill: #fff;
  transition: ease-in 0.2s;
}

footer .nav_box .box a.title:hover h2 svg {
  fill: #E97C00;
}

footer .nav_box .box a.title span {
  color: #fff;
  transition: ease-in 0.2s;
}

footer .nav_box .box a.title:hover span {
  color: #E97C00;
}

footer .nav_box .box ul.arrow_ul {}

footer .nav_box .box ul.arrow_ul li.arrow_li {
  --arrow-width: 1em;
  position: relative;
}

footer .nav_box .box ul.arrow_ul li.arrow_li a.arrow_a {
  position: relative;
  color: #81C0E9;
  padding: 0 0 0 calc(var(--arrow-width) + 0.5em);
  transition: ease-in 0.2s;
}

footer .nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:hover {
  color: #E97C00;
}

footer .nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:before,
footer .nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:after {
  --arrow-height: 0.1em;
  content: "";
  position: absolute;
  left: calc(var(--arrow-width) - var(--arrow-height) * 2);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 6px;
  height: 1px;
  background-color: #81C0E9;
  transition: ease-in 0.2s;
  z-index: -1;
}

footer .nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:before {
  top: calc(50% - var(--arrow-height));
  transform: rotate(45deg);
}

footer .nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:after {
  top: calc(50% + var(--arrow-height));
  transform: rotate(-45deg);
}

footer .nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:hover:before,
footer .nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:hover:after {
  left: calc(100% + var(--arrow-width) - var(--arrow-height) * 2);
  background-color: #E97C00;
}

footer .nav_box .box ul.arrow_ul li.arrow_li a.arrow_a span.jp-only {
  display: inline-block;
  margin: 0 0 0 0.5em;
}

footer .nav_box .box ul.arrow_ul li.arrow_li a.arrow_a span.arrow_span {
  position: absolute;
  top: 50%;
  left: 0%;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: var(--arrow-width);
  height: 1px;
  background-color: #81C0E9;
  transition: ease-in 0.2s;
  z-index: -1;
}

footer .nav_box .box ul.arrow_ul li.arrow_li a.arrow_a:hover span.arrow_span {
  width: calc(100% + var(--arrow-width));
  background-color: #E97C00;
}

footer .nav_box .box ul.arrow_ul li.arrow_li ul {
  padding: 0 0 0 calc(var(--arrow-width) + 0.5em);
}

footer .nav_box .box ul.arrow_ul li.arrow_li ul li {
  --border: 0.5em;
}

footer .nav_box .box ul.arrow_ul li.arrow_li ul li a {
  position: relative;
  color: #81C0E9;
  padding: 0 0 0 calc(var(--border) + 0.3em);
  transition: ease-in 0.2s;
}

footer .nav_box .box ul.arrow_ul li.arrow_li ul li a:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0%;
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: var(--border);
  height: 1px;
  background-color: #81C0E9;
  transition: ease-in 0.2s;
}

footer .nav_box .box ul.arrow_ul li.arrow_li ul li a:hover {
  color: #E97C00;
}

footer .nav_box .box ul.arrow_ul li.arrow_li ul li a:hover:before {
  width: calc(100% + var(--border) + 0.3em);
  background-color: #E97C00;
}

footer .info {
  padding: 4em 0;
}

footer .info .copy {}

footer .info .copy p {}

@media (max-width: 768px) {
  footer .inner {
    padding: 0 var(--side-padding);
  }

  footer .logo h1 img {
    width: 220px;
  }

  footer .nav_box {
    --num: 1;
  }

  footer .nav_box .box {
    width: 80%;
    max-width: 320px;
    margin: 0 auto;
  }

  footer .info .copy {
    width: 100%;
    text-align: center;
    margin: 4em auto 0;
  }
}