@import url('https://fonts.googleapis.com/css2?family=Kosugi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Gothic&display=swap');

@font-face {
  font-family: localArial;
  src: local('Arial');
  unicode-range: U+0030-0039;
}

html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-feature-settings: "palt";
}

body {
  margin: 0;

  color: black;
  font-family: localArial, "IBM Plex Sans", "游ゴシック体", YuGothic,
    "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",
    "Sawarabi Gothic", sans-serif;
  font-weight: 400;
  background-color: white;
  transition: 900ms;
}

@supports (-webkit-touch-callout: none) {
  /* iOS devices */

  body {
    perspective: 200px;
  }
}

h1 {
  font-size: 1.9em;
  font-weight: 300;
  letter-spacing: 0.1em;
}

h2 {
  font-size: 1.6em;
  font-weight: 400;
  letter-spacing: 0.1em;
}

h2 span {
  font-size: 0.66em;
}

h3 {
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: 0.15em;
}

h4 {
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0.15em;
}

a {
  color: #4c47b2;
  background-color: none;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  z-index: 4;
}

a:hover {
  text-decoration: underline;
}

a.btn {
  display: inline-block;
  position: relative;
  margin: 0.5rem 0.5rem 0.5rem 0;
  padding: 0.9rem 1.5rem 1.1rem 1.5rem;
  color: #fff;
  font-weight: 400;
  background-color: #4641a3;
  font-size: 1em;
  line-height: 1.5em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-style: solid;
  border-color: #4c47b2;
  border-width: 1px;
}

a.btn:hover {
  color: #4c47b2;
  background: #fff;
}

a.btn.small {
  font-size: 0.8rem;
  margin: 0 0.6rem 0.6rem 0;
  padding: 0.15rem 0.8rem 0.25rem 0.8rem;
  text-align: left;
}


main {
  position: relative;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 200px;
  perspective-origin: center bottom;
}

main::-webkit-scrollbar {
  display: none;
}

.stage {
  position: relative;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
}

.bg {
  position: absolute;
  bottom: 0;
  height: calc(100vh + ((100% - 91vh) / 11));
  height: calc(100dvh + ((100% - 91dvh) / 11));
  width: 100vw;
  transform-origin: center bottom;
  transform: translate3d(0, 0, -2000px) scale(11);
}

@supports (-webkit-touch-callout: none) {
  /* iOS devices */

  .bg {
    height: calc(100dvh + ((100% - 91dvh) / 11));
  }
}

.bg img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: -1;
}

section {
  position: relative;
  width: 75%;
  max-width: 768px;
  margin: 3em 8% 3em 17%;
  padding: 0;
  transform: rotateY(0deg) rotateX(0deg) rotateZ(1deg) translateZ(1px) scale(0.9);
  font-size: 14px;
  line-height: 1.66em;
  transform-style: preserve-3d;
  transition: 300ms;
}

section:hover {
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(6px) scale(0.9);
}

section.right {
  transform: rotateY(-1deg) rotateX(0deg) rotateZ(1deg) translateZ(11px) scale(0.925);
  margin: 4rem 10% 4rem auto;
}

section.right:hover {
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(16px) scale(0.925);
}

section.bottom {
  transform: rotateY(1deg) rotateX(-1deg) rotateZ(0deg) translate3d(-100px, -50px, 16px) scale(0.9);
  margin: 7rem auto 1rem auto;
}

section.bottom:hover {
  transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg)translate3d(-100px, -50px, 21px) scale(0.9);
}

@media screen and (max-width:767px) {
  section {
    width: 85%;
    margin: 1rem auto 1rem auto;
  }

  section.left {
    margin: 1rem auto 3rem auto;
  }

  section.right {
    margin: 1rem auto 1rem auto;
  }

  section.bottom {
    transform: rotateY(1deg) rotateX(-1deg) rotateZ(0deg) translate3d(-10px, -50px, 16px) scale(0.9);
    margin: 1rem auto 1rem auto;
  }

  section.bottom:hover {
    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg)translate3d(-10px, -50px, 21px) scale(0.9);
  }
}

section div.date {
  font-size: 0.8em;
  text-align: right;
  background-color: #fcfcfc;
  padding: 0.1em 0.5em;
  border-radius: 0.3em 0.3em 0 0;
}

section h1 {
  margin: 0;
  padding: 1.1em 0.5em 0.7em 0.5em;
  background-color: rgba(255, 255, 255, 0.66);
}

section h2 {
  margin: 0;
  padding: 1.3em 0 1em 0;
}

section h3 {
  margin: 0;
  padding: 1.4em 0 1.1em 0;
}

section h4 {
  margin: 0;
  padding: 1.5em 0 1.2em 0;
}

section article {
  background-color: rgba(255, 255, 255, 0.66);
  border-radius: 0.3em;
  margin: 0 0 1em 0;
  padding: 0;
}

section article p {
  margin: 0;
  padding: 0.66em 1em;
  line-height: 1.8em;
}

section ul {
  margin: 0;
  padding: 0 0 1.6em 1.6em;
  line-height: 1.8em;
}

section p.text {
  padding: 1.5em 0 1.5em 0;
  font-size: 1.1em;
  line-height: 1.9em;
}

section p.annotaion {
  font-size: 0.9em;
  font-weight: 900;
}

section ol {
  margin: 0;
  padding: 0 0 1.6em 0;
  line-height: 1.8em;
  padding-inline-start: 1.4em;
}

section a {
  min-width: 14em;
}

section p.signature {
  padding: 1em 0.66em 1.66em 0.5em;
  text-align: right;
  font-size: 1.2em;
}

section img {
  width: 100%;
}

section video {
  width: 100%;
}

div.app {
  display: block;
  position: static;
  margin: 0 0 2em 0;
  padding: 2em;
  min-height: 9em;
  background-color: rgba(220, 220, 220, 0.5);
}

div.app h4 {
  margin: 0;
  padding: 0 0 0.2em 0;
}

div.app span {
  font-size: 0.8em;
}

div.app img {
  width: 9em;
  height: 9em;
  margin-bottom: 0.7em;
}

div.app a {
  margin: 0.7em 0 0 0;
}

@media screen and (min-width:600px) {
  div.app img {
    float: left;
    margin-right: 1.5em;
  }
}

img.bg {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  transform: perspective(10000000px) translate3d(0px, 0px, -1000px);
  object-fit: cover;
  width: 100%;
  height: 100%;
}

footer {
  display: block;
  text-align: center;
  color: #aaa;
  font-size: 0.9em;
  padding: 2rem 0 2rem 0;
  transform: translate3d(0px, 0px, 0px);
}

footer p {
  width: 84%;
  max-width: 767px;
  margin: 1rem auto 1rem auto;
}

.tourhead p {
  width: 100%;
  max-width: 767px;
  max-height: 15vh;
  overflow: scroll;
  perspective-origin: bottom;
  transform: perspective(1000px) rotateY(30deg) rotateX(0deg) rotateZ(0deg) translate3d(-15px, 15px, 30px);
  background-color: rgba(0, 0, 0, 0.4);
  margin-left: -1em;
  padding: 1em;
  font-size: 1em;
  line-height: 1.66em;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
  pointer-events: auto;
}

.kids2021 {
  font-family: 'Kosugi Maru';
}

.kids2021 article {
  border-radius: 16px;
}

.kids2021 a.btn {
  background-color: #006fab;
  border-color: #006fab;
  border-radius: 4px;
  padding: 1rem 1.5rem 1rem 1.5rem;
}

.kids2021 a.btn:hover {
  color: #006fab;
  background: #fff;
}

.air {
  font-family: 'Kosugi', sans-serif;
}

.air h2 {
  font-family: localArial, "Noto Sans JP", sans-serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.5px;
  word-spacing: -4px;
  line-height: 28px;
  mix-blend-mode: multiply;
}

.air a.link {
  background-color: deeppink;
  border-color: deeppink;
  border-radius: 0.4em;
}

.air a.link:hover {
  color: deeppink;
  background-color: white;
  border-color: deeppink;
  border-radius: 0.4em;
}

.air article img {
  border-radius: 0.4em 0.4em 0 0;
}

.os2021 {
  font-family: localArial, 'IBM Plex Sans', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sawarabi Gothic", sans-serif;
  font-weight: 400;
}

.os2021 h2 {
  font-family: localArial, "Noto Sans JP", sans-serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.5px;
  word-spacing: -4px;
  line-height: 28px;
  mix-blend-mode: multiply;
}

.os2021 article {
  border-radius: 4px;
}

.os2021 article img {
  border-radius: 4px 4px 0 0;
}

.os2021 .btn {
  font-family: localArial, 'Noto Sans JP', sans-serif;
  padding: 1rem 1.5rem 1rem 1.5rem;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.5em;
  cursor: pointer;
  color: white;
  background-color: #6F8B8B;
  border-color: #6F8B8B;
  border-radius: 2px;
}

.os2021 a.btn:hover {
  font-weight: 600;
  color: #6F8B8B;
  background-color: white;
}

.random-walk {
  font-family: localArial, 'IBM Plex Sans', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sawarabi Gothic", sans-serif;
  font-weight: 400;
}

.random-walk h2 {
  font-family: localArial, "Noto Sans JP", sans-serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.5px;
  word-spacing: -4px;
  line-height: 28px;
  mix-blend-mode: multiply;
}

.random-walk article {
  border-radius: 4px;
}

.random-walk article img {
  border-radius: 4px 4px 0 0;
}

.random-walk .btn {
  font-family: localArial, 'Noto Sans JP', sans-serif;
  padding: 1rem 1.5rem 1rem 1.5rem;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.5em;
  cursor: pointer;
  color: white;
  background-color: #0092c5;
  border-color: #0092c5;
  border-radius: 2px;
}

.random-walk a.btn:hover {
  font-weight: 600;
  color: #0092c5;
  background-color: white;
}

.emergencies {
  font-family: localArial, 'IBM Plex Sans', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sawarabi Gothic", sans-serif;
  font-weight: 400;
}

.emergencies .btn {
  color: white;
  background-color: black;
  border-color: black;
  border-radius: 2rem;
}

.emergencies .btn:hover {
  color: black;
  background-color: white;

}

.error {
  min-height: 80vh;
  margin-top: 20vh;
}

.life-likeness {
  font-family: localArial, 'IBM Plex Sans', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sawarabi Gothic", sans-serif;
  font-weight: 400;
}

.life-likeness h2 {
  font-family: localArial, "Noto Sans JP", sans-serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.5px;
  word-spacing: -4px;
  line-height: 28px;
  mix-blend-mode: multiply;
}

.life-likeness article {
  border-radius: 4px;
}

.life-likeness article img {
  border-radius: 4px 4px 0 0;
}

.life-likeness .btn {
  font-family: localArial, 'Noto Sans JP', sans-serif;
  padding: 1rem 1.5rem 1rem 1.5rem;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.5em;
  cursor: pointer;
  color: white;
  background-color: #e5005a;
  border-color: #e5005a;
  border-radius: 2px;
}

.life-likeness a.btn:hover {
  font-weight: 600;
  color: #e5005a;
  background-color: white;
}

.kids2022 {
  font-family: localArial, 'IBM Plex Sans', "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Sawarabi Gothic", sans-serif;
  font-weight: 400;
}

.kids2022 h2 {
  font-family: localArial, "Noto Sans JP", sans-serif;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.5px;
  word-spacing: -4px;
  line-height: 28px;
  mix-blend-mode: multiply;
}

.kids2022 .btn {
  font-family: localArial, 'Noto Sans JP', sans-serif;
  padding: 1rem 1.5rem 1rem 1.5rem;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.5em;
  cursor: pointer;
  color: white;
  background-color: #00AAB7;
  border-color: #00AAB7;
  border-radius: 2px;
}

.kids2022 a.btn:hover {
  font-weight: 600;
  color: #00AAB7;
  background-color: white;
}