@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Protest+Riot&display=swap");
@import url('https://fonts.cdnfonts.com/css/roboto');

@font-face {
  font-family: "Roboto";
  src: url(/assets/fonts/Roboto-Regular.ttf) format('truetype');
}


/* Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

:where([hidden]:not([hidden='until-found'])) {
  display: none !important
}

:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: dark light
}

@media (prefers-reduced-motion:no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth
  }
}

:where(body) {
  line-height: 1.5;
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased
}

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit
}

:where(textarea) {
  resize: vertical;
  resize: block
}

:where(button, label, select, summary, [role='button'], [role='option']) {
  cursor: pointer
}

:where(:disabled) {
  cursor: not-allowed
}

:where(label:has(>input:disabled), label:has(+input:disabled)) {
  cursor: not-allowed
}

:where(button) {
  border-style: solid
}

:where(a) {
  color: inherit;
  text-underline-offset: .2ex
}

:where(ul, ol) {
  list-style: none
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block
}

:where(img, picture, svg) {
  max-inline-size: 100%;
  block-size: auto;
  object-fit: cover;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem)
}

:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible
}

:where(:focus-visible) {
  outline: 3px solid Highlight;
  outline-offset: 2px;
  scroll-margin-block: 10vh
}

:where(.visually-hidden:not(:focus-within, :active)) {
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important
}


html {
  font-size: 10px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}

body {
  letter-spacing: 0.02em;
  font-weight: 300;
  /* font-family: "Roboto", "Roboto Slab", sans-serif; */
  font-family: "Noto Sans JP";
  /* , Roboto, "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */
  font-size: 1.6rem;
  line-height: 1.78;
  color: #000;
  background-color: #fff
}

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh
}

div.container-inner {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  padding-left: 20px;
  padding-right: 20px;
}

.flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.no-scroll {
  overflow-y: hidden;
}

.nowrap {
  white-space: nowrap;
}

@media screen and (min-width: 601px) {
  .sp_only {
    display: none;
  }
}

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

@media screen and (max-width:768px) {
  /* .flex-container {
    display: block;
  } */
}

p {
  margin: 0 0 2rem
}

* + p {
  margin-top: 1rem
}

a {
  color: #82c434;
  text-decoration: none
}

a:hover {
  color: #3c763d
}

.text-center {
  text-align: center
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
  font-family: "Roboto Slab", serif;
  margin-top: 0;
  margin-bottom: 0;
  letter-spacing: 0.12em
}


hr {
  width: 100px;
  display: block;
  border-bottom: 3px solid #b7b7b7;
  border-top: none;
  margin-left: auto;
  margin-right: auto;
}

ul.listed {
  list-style-type: initial;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* .fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.icon-lg {
  width: 120px;
  height: 120px;
  font-size: 60px;
  line-height: 120px
} */

/* .icon-success {
  color: #82c434
} */

.icon {
  display: inline-block;
  position: relative;
  text-align: center
}

.icon:before {
  position: relative;
  display: inline-block;
  font-weight: 400;
  font-style: normal;
  speak: none;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

[class*='fa-']:before {
  font-weight: 400;
  font-family: 'FontAwesome'
}

/* .fa-desktop:before {
  content: "\e163"
}
.fa-cogs:before {
  content: "\f108"
}
.fa-desktop:before {
  content: "\f108"
}
.fa-desktop:before {
  content: "\f108"
}

.fa-lg {
  font-size: 1rem;
  line-height: 0.75em;
  vertical-align: -15%
}

.fa-2x {
  font-size: 2em
}

.fa-3x {
  font-size: 3em
}

.fa-4x {
  font-size: 4em
}

.fa-5x {
  font-size: 5em
}

.fa-fw {
  width: 1.2rem;
  text-align: center
}

.fa-ul {
  padding-left: 0;
  margin-left: 2rem;
  list-style-type: none
}

.fa-ul>li {
  position: relative
}

.fa-li {
  position: absolute;
  left: -2rem;
  width: 2rem;
  top: 0.14rem;
  text-align: center
}

.fa-li.fa-lg {
  left: -1.8rem
}

.fa-border {
  padding: .2em .25em .15em;
  border: solid 0.08em #eeeeee;
  border-radius: .1em
}

.fa-pull-left {
  float: left
}

.fa-pull-right {
  float: right
}

.fa.fa-pull-left {
  margin-right: .3em
}

.fa.fa-pull-right {
  margin-left: .3em
} */

/* DarkMode */
@media (prefers-color-scheme: dark) {

  input,
  select,
  textarea {
    background-color: #fff;
  }
}

.btn {
  /* text-transform: uppercase; */
  /* font-family: "Roboto Slab", serif; */
  letter-spacing: 0.1rem;
  transition: .4s;
  display: inline-block;
  margin-bottom: 10rem;
  /* font-weight: bold; */
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 2px solid;
  border-radius: 0px;
  white-space: nowrap;
  padding: 15px 30px;
  font-size: 1.2rem;
  line-height: 2.5rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.btn.btn-green {
  color: #82c434;
  background-color: transparent;
  border-color: #82c434
}

.btn.btn-white {
  background-color: transparent;
  color: #fff;
  border-color: #fff
}

.btn.btn-green:hover,
.btn.btn-white:hover {
  color: #fff;
  background-color: #82c434;
  border-color: #82c434
}

.btn.btn-sm {
  font-size: 1.5rem;
  border-radius: 6px
}

.btn.btn-min-width {
  min-width: 240px
}

* + .btn {
  margin-top: 60px
}

/* Navigation */
nav#gnav {
  width: 100%;
  background: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  z-index: 100;
}

nav#gnav .container {
  padding: 20px 0;
}

.nav-menu-container ul li {
  margin-left: 30px;
}

#nav-hm {
  margin: 0;
  display: inline-block;
  width: 25px;
  height: 18px;
  vertical-align: middle;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: calc((100% - 20px) / 2);
  z-index: 101;
}

@media screen and (min-width: 769px) {

  nav#gnav .container,
  nav#gnav .container a {
    color: #fff;
  }

  nav#gnav .flex-container {
    justify-content: space-between;
    align-items: center;
  }

  .nav-menu-container ul {
    list-style-type: none;
    display: flex;
  }
}

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

  #nav-hm span,
  #nav-hm span:before,
  #nav-hm span:after {
    content: '';
    height: 2px;
    width: 25px;
    border-radius: 3px;
    background: #fff;
    display: block;
    position: absolute;
    transition: all .2s;
  }

  #nav-hm span::before {
    bottom: -8px;
  }

  #nav-hm span::after {
    bottom: -16px;
  }

  header #nav-hm:not(.nav-open) + #nav-menu {
    transform: translate(100vw, 0);
    opacity: 0;
  }

  #nav-hm.nav-open span {
    color: #fff;
    bottom: calc(100% / 2);
    transform: rotate(45deg);
  }

  #nav-hm.nav-open span::before {
    background-color: #fff;
    bottom: 0px;
    transform: rotate(-90deg);
  }

  #nav-hm.nav-open span::after {
    color: #fff;
    bottom: 0px;
    transform: rotate(-90deg);
  }

  #nav-menu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #000d;
    transform: translate(0, 0);
    transition: all .3s;
    opacity: 1;
  }

  .nav-menu-container ul {
    display: block;
    text-align: left;
    margin-top: 120px;
    color: #cf0;
  }

  .nav-menu-container ul li {
    padding: .5em 0;
  }

  .nav-menu-container ul li a {
    font-weight: 700;
  }
}


/* Header */
header a.logo-link {
  z-index: 100;
}

main > article {
  padding: 0 0 75px
}

footer {
  margin-top: auto;
  background: #e6e6E6
}

footer section {
  padding: 0
}

footer .list-inline {
  list-style: none;
  justify-content: center
}

footer .list-inline li {
  margin: 10px
}

footer .copyright {
  padding: 15px 0 10px;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  display: block;
}

.container h1 {
  font-size: 4.5rem;
  line-height: 1.13043;
  text-align: center;
  color: #fff;
  letter-spacing: 1rem;
}

.container h1 span {
  font-size: 45%;
  display: block;
}

.container h2 {
  padding-top: 100px;
  padding-bottom: 20px;
  font-weight: 700;
}

.container h2 {
  position: relative;
  padding-top: .5em;
  font-weight: 700;
  font-family: 'Noto Sans JP';
  padding-bottom: .5em;
}

.container h2::before {
  content: attr(data-en);
  position: absolute;
  top: 0px;
  left: 0;
  color: rgba(5, 62, 98, 0.2);
  font-family: 'Protest Riot';
  font-weight: 500;
  text-transform: initial;
  z-index: 1;
}

.container h2 span {
  position: relative;
  z-index: 2;
}

@media screen and (min-width: 601px) {
  .container h2 {
    font-size: 3rem;
  }

  .container h2::before {
    font-size: 1.2em;
  }
}

@media screen and (max-width: 600px) {
  .container h2 {
    font-size: 2.4rem;
  }

  .container h2::before {
    font-size: 1em;
  }
}

.container-header {
  padding: 180px 0 90px;
}

.container-body .discription {}

.container-body .discription p {
  margin-top: 0;
  margin-bottom: 2rem;
}

.container-body .discription ul {
  margin-left: 3rem;
}

.container-body section > * {
  margin-left: auto;
  margin-right: auto;
  max-width: 840px;
}

.container-body > section:first-child,
.container-body > div:first-child,
.container-inner > section:first-child,
.container-inner > div:first-child {
  margin-top: 60px;
}

/* .container-inner>section,
.container-inner>div {
  padding-left: 20px;
  padding-right: 20px;
} */

nav#gnav .container-inner > section:first-child,
nav#gnav .container-inner > div:first-child {
  margin-top: 0px;
}

.logo {
  display: block;
  height: 60px;
  width: 115px;
  background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2065.06%2033.58%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%238aba29%3B%7D.cls-1%2C.cls-2%2C.cls-3%2C.cls-4%7Bstroke-width%3A0px%3B%7D.cls-2%7Bfill%3A%231c96d4%3B%7D.cls-3%7Bfill%3A%23d31176%3B%7D.cls-4%7Bfill%3A%23ffffff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-4%22%20d%3D%22M26.19%2C26.6c-1.45-.03-8.01-.82-9.46-.97.07-.25.14-.54.23-.81.27-1.05%2C2.13-8.82%2C2.65-11.17%2C1.13-.44%2C2.2-1.13%2C2.95-2.06%2C2.1-2.62%2C1.69-7.54-1.92-6.58-2.28.61-2.92%2C3.53-3.23%2C4.94%2C0%2C0-.23%2C1.02-.54%2C2.41-2.83-.29-5.28-.8-6.4-1.09-1.12-.29-6.06-1.04-8.46.23-2.98%2C1.58-1.75%2C5.09-1.75%2C5.09%2C1.59-2.46%2C6.91-3.17%2C10.24-2.89%2C1.57.13%2C3.16.3%2C4.43.44.41.09.85.13%2C1.32.14.06%2C0%2C.13.01.19.02-.51%2C2.21-2.35%2C9.88-2.55%2C10.59-.06.27-.13.52-.2.75-9.26.79-7.68%2C8.98-3.38%2C7.83%2C2.1-.56%2C4.06-1.78%2C5.57-5.38%2C1.61.31%2C10.58%2C1.5%2C11.91%2C1.55%2C14.29.55%2C24.46-3.8%2C25.82-4.41%2C4.1-1.82%2C4.01-6.81%2C4.01-6.81-1.34%2C1.3-19.45%2C8.41-31.41%2C8.17ZM20.59%2C9.1c.16-.75.32-1.68.91-1.84.68-.18%2C1.09%2C1.28-.02%2C3.02-.3.46-.79.92-1.43%2C1.27.21-.94.4-1.8.54-2.45ZM10.07%2C31.41c-1.63.44-1.87-3.11%2C2.73-3.44-1.05%2C2.32-1.87%2C3.21-2.73%2C3.44Z%22%2F%3E%3Cpath%20class%3D%22cls-4%22%20d%3D%22M64.63%2C4.82c-.71%2C2.2-2.14%2C4.28-2.66%2C4.72%2C0-.36%2C0-.75-.05-1.15-.08-1.21-.21-3.22-.21-3.22%2C0%2C0%2C2.17-3.15-.46-2.25-1.03.35-1.56%2C1.04-1.8%2C1.89-.02.01-.03.03-.05.07-1.83%2C4.89-4.16%2C9.33-6.79%2C10.04-1.31.35-2.06-.28-2.12-1.58.27.14.57.24.93.24%2C1.44.06%2C2.76-1.07%2C3.64-3.05%2C1.45-3.32-.49-5.06-2.7-4.47-1.34.36-3.12%2C2.11-4.1%2C5.29-.05.15-.09.3-.13.45-.71%2C1.15-1.32%2C2.13-1.49%2C2.37-.31.44-.58.88-.74.77-.15-.09.03-1.04.15-1.51.33-1.41%2C1.42-6.06%2C1.42-6.06l-2.42.67s-.2.85-.47%2C2.03c-1.39%2C2-3.74%2C5.28-4.07%2C5.76-.31.44-.58.88-.74.77-.15-.09.03-1.04.15-1.51.13-.56.59-2.52%2C1.09-4.68l1.82-.49c.13-.56.2-.89.2-.89l-1.81.5c.69-3.03%2C1.01-4.18%2C1.01-4.18l-2.43.65s-.25.95-1.01%2C4.18l-1.76.47s-.08.32-.21.87l1.77-.47c-.18.77-.37%2C1.55-.54%2C2.3-.98%2C1.59-1.97%2C2.64-2.88%2C3.38%2C0-.36%2C0-.75-.05-1.15-.08-1.21-.21-3.22-.21-3.22%2C0%2C0%2C2.17-3.15-.46-2.25-1.32.45-1.81%2C1.44-1.95%2C2.63-1.05%2C1.77-3.48%2C5.73-3.85%2C6.26-.31.44-.58.88-.74.77-.15-.09.03-1.04.15-1.51.33-1.41%2C1.42-6.06%2C1.42-6.06l-2.42.67s-.28%2C1.17-.62%2C2.69c-.49%2C1.83-2.34%2C5.25-3.2%2C5.47-.89.24-.69-.85-.57-1.32.32-1.41%2C1.42-6.06%2C1.42-6.06l-2.42.67s-1.53%2C6.57-1.85%2C7.88c-.44%2C1.84.32%2C3.39%2C1.85%2C2.98.99-.27%2C2.45-2.39%2C3.6-4.63-.14.58-.25%2C1.02-.3%2C1.26-.44%2C1.82.21%2C2.43%2C1.22%2C2.16.64-.17%2C1.37-.76%2C2.36-2.37.65-1.07%2C2.74-4.69%2C3.98-6.84.05.61.12%2C1.22.17%2C1.8.05.75.08%2C1.34.05%2C1.84-1.82%2C1.04-3.52%2C1.88-3.43%2C2.98.11%2C1.39%2C1.54%2C1.34%2C2.49%2C1.09%2C1.56-.42%2C2.98-1.34%2C3.3-4.29.74-.64%2C1.61-1.58%2C2.43-2.63-.36%2C1.55-.64%2C2.73-.72%2C3.08-.44%2C1.82.21%2C2.43%2C1.22%2C2.16.64-.17%2C1.37-.76%2C2.36-2.37.51-.83%2C2.11-3.25%2C3.48-5.33-.4%2C1.72-.79%2C3.35-.92%2C3.89-.45%2C1.82.21%2C2.43%2C1.22%2C2.16.64-.17%2C1.37-.76%2C2.36-2.37.27-.44.78-1.31%2C1.37-2.33.26%2C2.09%2C1.8%2C3.21%2C4.44%2C2.51%2C1.43-.38%2C2.7-1.45%2C3.78-2.86%2C0%2C.03%2C0%2C.06%2C0%2C.09.11%2C1.39%2C1.54%2C1.34%2C2.48%2C1.09%2C1.56-.42%2C2.98-1.34%2C3.3-4.29.68-.64%2C2.32-2.71%2C3.14-5.14.07-.23-.13-1.41-.42-1ZM32.11%2C20.87c-.24.62-.97.95-1.02.35-.02-.34.58-.76%2C1.39-1.27-.12.36-.26.63-.38.92ZM53.16%2C7.71c.78-.21.43%2C1.8-.32%2C2.89-.56.79-1.26%2C1.6-2.16%2C1.22.03-.09.06-.16.06-.25.55-1.93%2C1.63-3.64%2C2.42-3.86ZM58.92%2C13.68c-.24.62-.97.95-1.02.36-.02-.34.58-.76%2C1.39-1.27-.12.36-.26.63-.38.92ZM59.55%2C11.19c-.93.53-1.83%2C1.01-2.48%2C1.5.92-1.5%2C1.69-3.22%2C2.28-4.86.05.51.11%2C1.03.15%2C1.52.05.75.08%2C1.34.05%2C1.84Z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M47.38.03c-1.95.52-.94%2C5.3-.94%2C5.3%2C0%2C0%2C2.89-5.83.94-5.3Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M45.73%2C5.99s-.85-4.96-1.97-3.29c-1.12%2C1.67%2C1.97%2C3.29%2C1.97%2C3.29Z%22%2F%3E%3Cpath%20class%3D%22cls-3%22%20d%3D%22M50.92.73c-1.25-1.01-3.75%2C4.88-3.75%2C4.88%2C0%2C0%2C4.99-3.87%2C3.75-4.88Z%22%2F%3E%3C%2Fsvg%3E');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}