html, body{
  -webkit-text-size-adjust: 100%;
}

#splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #fff;
  /* opacity: 1; */
  z-index: 2003;
  /*display: none;*/
  display: flex;
}
/*
#splash.active {
  display: flex;
}
*/
#splash.end {
  animation: fadeout 0.5s forwards;
}
/*
#splash .brand {
  z-index: 9;
}
*/
#splash #splash-brand {
  position: relative;
  text-align: center;
}
#splash #splash-brand img {
  height: 6rem;
  width: auto;
}
@media screen and (min-width:992px) {
  #splash #splash-brand img {
    height: 6rem;
  }
}
/*
#splash #splash-brand #splash-mark {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
*/
#splash #splash-brand .splash-walks {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1.8rem;
}
#splash #splash-brand #splash-walk-right {
  fill:#231815;
  z-index: -1;
  transform-origin:  50% 50%;
  animation: walk-right 2s linear infinite 0s;
  
}
#splash #splash-brand #splash-walk-left {
  fill:#68B72E;
  z-index: 1;
  transform-origin:  50% 50%;
  animation: walk-left 2s linear infinite 0s;
}
/*
#splash .progress {
  display: none;
}
@media screen and (min-width:992px) {
  #splash .progress {
    display: block;
    background-color: #fff;
    margin-top: 2vh;
    text-align: center;
  }
}
*/

#im-enjoy,
#im-low-power {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
  background: #fff;
  display: none;
}
#im-enjoy.active,
#im-low-power.active {
  display: block;
}
#im-enjoy.closed,
#im-low-power.closed {
  animation: fadeout 0.5s forwards;
}
#im-enjoy .im-content,
#im-low-power .im-content {
  width: 100%;
  height: 100%;
}
#im-enjoy .im-content .im-header,
#im-low-power .im-content .im-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 66;
}
@media screen and (min-width: 768px) {
  #im-enjoy .im-content .im-header,
  #im-low-power .im-content .im-header {
    display: none;
  }
}
#im-enjoy .im-content .im-header .im-close,
#im-low-power .im-content .im-header .im-close {
  width: 16%;
  height: 8rem;
  margin-left: auto;
}
@media screen and (min-width: 576px) {
  #im-enjoy .im-content .im-header .im-close,
  #im-low-power .im-content .im-header .im-close {
    width: 13%;
  }
}
@media screen and (min-width: 768px) {
  #im-enjoy .im-content .im-header .im-close,
  #im-low-power .im-content .im-header .im-close {
    width: 11%;
    height: 10rem;
  }
}
#im-enjoy .im-content .im-header .im-close .im-button,
#im-low-power .im-content .im-header .im-close .im-button {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 0;
}
#im-enjoy .im-content .im-header .im-close .im-button .im-inner,
#im-low-power .im-content .im-header .im-close .im-button .im-inner {
  width: 4rem;
  height: .2rem;
  overflow: hidden;
  position: absolute;
  display: block;
}
@media screen and (min-width: 576px) {
  #im-enjoy .im-content .im-header .im-close .im-button .im-inner,
  #im-low-power .im-content .im-header .im-close .im-button .im-inner {
    width: 5rem;
  }
}
@media screen and (min-width: 768px) {
  #im-enjoy .im-content .im-header .im-close .im-button .im-inner,
  #im-low-power .im-content .im-header .im-close .im-button .im-inner {
    width: 6rem;
  }
}
#im-enjoy .im-content .im-header .im-close .im-button .im-inner:first-of-type,
#im-low-power .im-content .im-header .im-close .im-button .im-inner:first-of-type {
  transform: rotate(45deg);
}
#im-enjoy .im-content .im-header .im-close .im-button .im-inner:last-of-type,
#im-low-power .im-content .im-header .im-close .im-button .im-inner:last-of-type {
  transform: rotate(-45deg);
}
#im-enjoy .im-content .im-header .im-close .im-button .im-inner .im-line,
#im-low-power .im-content .im-header .im-close .im-button .im-inner .im-line {
  height: 100%;
  width: 100%;
  background-color: #000;
  display: block;
}
#im-enjoy .im-content .im-header .im-close .im-button:hover .im-inner .im-line
#im-low-power .im-content .im-header .im-close .im-button:hover .im-inner .im-line {
  animation-name: close;
}
#im-enjoy .im-content .im-header .im-close .im-button:hover .im-inner .im-line:first-of-type,
#im-low-power .im-content .im-header .im-close .im-button:hover .im-inner .im-line:first-of-type {
  animation-duration:.6s;
  animation-timing-function:cubic-bezier(.77,0,.175,1);
}
#im-enjoy .im-content .im-header .im-close .im-button:hover .im-inner .im-line:last-of-type,
#im-low-power .im-content .im-header .im-close .im-button:hover .im-inner .im-line:last-of-type {
  animation-duration:.7s;
  animation-timing-function:cubic-bezier(.77,0,.175,1);
}
#im-enjoy .im-content .im-body,
#im-low-power .im-content .im-body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
#im-enjoy {
  z-index: 1002;
}
@media (orientation: landscape){
  #im-enjoy .im-content .im-body img {
    width: 30%;
    height: auto;
  }
}
@media (orientation: portrait){
  #im-enjoy .im-content .im-body img {
    width: 60%;
    height: auto;
  }
}
#im-low-power {
  z-index: 1001;
}
@media (orientation: landscape){
  #im-low-power .im-content .im-body img {
    width: 40%;
    height: auto;
  }
}
@media (orientation: portrait){
  #im-low-power .im-content .im-body img {
    width: 80%;
    height: auto;
  }
}
#im-section {
	position: fixed;
  width: 100vw;
  height: 100%;
  max-height: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  transform: translate3d(0, 0, 0);
  z-index: 1000;
  display: none;
}
@media screen and (min-width: 768px){
  #im-section {
    position: relative;
    margin-top: 60px;
    height: 56.25vw;
    max-height: calc(100vh - 169px);
    /*min-height: 480px;*/
    z-index: 0;
    display: block;
  }
}
#im-section.active {
  pointer-events: auto;
  display: block;
}
#im-section.closed {
  animation: fadeout 0.5s forwards;
}
#im-section .im-content {
  position: relative;
  background: #000;
  height: 100%;
}
#im-section .im-content .im-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 66;
}
@media screen and (min-width: 768px) {
  #im-section .im-content .im-header {
    /*height: 12rem;*/
    display: none;

  }
}
#im-section .im-content header .im-close {
  width: 16%;
  height: 8rem;
  margin-left: auto;
}
@media screen and (min-width: 576px) {
  #im-section .im-content header .im-close {
    width: 13%;
  }
}
@media screen and (min-width: 768px) {
  #im-section .im-content header .im-close {
    width: 11%;
    height: 10rem;
  }
}
@media screen and (min-width: 992px) {
  #im-section .im-content header .im-close {
    height: 12rem;
  }
}
@media screen and (min-width: 1200px) {
  #im-section .im-content header .im-close {
    width: 7%;
  }
}
#im-section .im-content header .im-close .im-button {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 0;
}
#im-section .im-content header .im-close .im-button .im-inner {
  width: 4rem;
  height: .2rem;
  overflow: hidden;
  position: absolute;
  display: block;
  box-shadow: 0 0 2px black;
}
@media screen and (min-width: 576px) {
  #im-section .im-content header .im-close .im-button .im-inner {
    width: 5rem;
  }
}
@media screen and (min-width: 768px) {
  #im-section .im-content header .im-close .im-button .im-inner {
    width: 6rem;
  }
}
@media screen and (min-width: 992px) {
  #im-section .im-content header .im-close .im-button .im-inner {
    width: 7rem;
  }
}
#im-section .im-content header .im-close .im-button .im-inner:first-of-type {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#im-section .im-content header .im-close .im-button .im-inner:last-of-type {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#im-section .im-content header .im-close .im-button .im-inner .im-line {
  height: 100%;
  width: 100%;
  background-color: #fff;
  display: block;
}
#im-section .im-content header .im-close .im-button:hover .im-inner .im-line {
  animation-name: close;
}
#im-section .im-content header .im-close .im-button:hover .im-inner .im-line:first-of-type {
  animation-duration:.6s;
  animation-timing-function:cubic-bezier(.77,0,.175,1);
}
#im-section .im-content header .close .im-button:hover .im-inner .im-line:last-of-type {
  animation-duration:.7s;
  animation-timing-function:cubic-bezier(.77,0,.175,1);
}
#im-section .im-content .im-body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#im-section .im-content .im-body .im-modal-container {
  max-width: 100% !important;
}
#im-section .im-content .im-body #im-video {
  position: relative;
  width: 100%;
  height: 'auto';
  z-index: 10;
}
#im-section .im-content .im-body #im-video #im-video-player {
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#im-section .im-content .im-body #im-video #im-pointers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  overflow: hidden;
}
#im-section .im-content .im-body #im-video #im-pointers .im-catchcopies {
  position: absolute;
  opacity: 1;
  pointer-events: none;
}
#im-section .im-content .im-body #im-video #im-pointers .im-catchcopies span {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.9rem;
  text-shadow: 0px 0px 2px #000000;
  display: inline-block;
  letter-spacing: 0.3em;
  opacity: 0;
  transform: translateX(10px);
}
@media screen and (min-width: 992px) {
  #im-section .im-content .im-body #im-video #im-pointers .im-catchcopies span {
    font-size: 2.6rem;
  }
}
#im-section .im-content .im-body #im-video #im-pointers .im-catchcopies.display span {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .7s cubic-bezier(.5,1,.89,1),transform .7s cubic-bezier(.5,1,.89,1);
}
#im-section .im-content .im-body #im-video #im-pointers .im-catchcopies.hidden span {
  opacity: 0;
  transform: translateX(0);
  transition: opacity .7s;
}
#im-section .im-content .im-body #im-video #im-pointers .im-pointer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /*background-color: rgba(0, 0, 0, .5);*/
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}
#im-section .im-content .im-body #im-video #im-pointers .im-pointer.active {
  animation: fadein 0.5s forwards;
}
#im-section .im-content .im-body #im-video #im-pointers .im-pointer .im-attention {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 100%;
  transform-origin: center;
}
@media screen and (min-width: 992px) {
  #im-section .im-content .im-body #im-video #im-pointers .im-pointer .im-attention {
    width: 66px;
    height: 66px;
  }
}
#im-section .im-content .im-body #im-video #im-pointers .im-pointer .im-attention::before,
#im-section .im-content .im-body #im-video #im-pointers .im-pointer .im-attention::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(var(--pulsation-color), 1);
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
  animation: pulsate 2s linear infinite;
}
#im-section .im-content .im-body #im-video #im-pointers .im-pointer .im-attention::after {
  animation-delay: 1s;
}
#im-section .im-content .im-body #im-video #im-pointers .im-pointer .im-attention .im-pointer-brand {
  width: 36%;
}
#im-section .im-content .im-body #im-video #im-pointers .im-pointer .im-attention .im-pointer-text {
  position: absolute;
  z-index: 1;
  font-family: 'Noto Serif JP', serif;
  font-size: 9px;
  font-weight: 600;
}
@media screen and (min-width: 992px) {
  #im-section .im-content .im-body #im-video #im-pointers .im-pointer .im-attention .im-pointer-text {
    font-size: 11px;
  }
}
/*
#im-section .im-content .im-body #im-video #im-pointers .im-pointer .im-attention {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 100%;
  transform-origin: center;
  animation: pulsation 3s linear infinite;
}
@media screen and (min-width: 992px) {
  #im-section .im-content .im-body #im-video #im-pointers .im-pointer .im-attention {
    width: 66px;
    height: 66px;
    animation: pulsation-pc 3s linear infinite;
  }
}
#im-section .im-content .im-body #im-video #im-pointers .im-pointer .im-attention img {
  width: 60%;
}
#im-section .im-content .im-body #im-video #im-pointers .im-pointer .im-attention span {
  font-family: 'Noto Serif JP', serif;
  font-size: 9px;
}
@media screen and (min-width: 992px) {
  #im-section .im-content .im-body #im-video #im-pointers .im-pointer .im-attention span {
    font-size: 11px;
  }
}
*/
#im-section .im-content #im-modal {
  position: absolute;
  display: flex;
  pointer-events: none;
  overflow: hidden;
  z-index: 30003;
  background: rgba(0, 0, 0, .8);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .6s;
}
#im-section .im-content #im-modal.active {
  pointer-events: auto;
  opacity: 1;
  /*animation: fadein 0.5s forwards;*/
}
#im-section .im-content #im-modal .im-modal-content {
  position: relative;
  overflow: hidden;
}
#im-section .im-content #im-modal .im-modal-content .im-modal-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 10000;
}
#im-section .im-content #im-modal .im-modal-content .im-body {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: 100%;
  transform: none;
}
#im-section .im-content #im-modal .im-modal-content .im-body figure {
  overflow: hidden;
}
#im-section .im-content #im-modal .im-modal-content .im-body figure #im-thumbnail {
  object-fit: cover;
  width: 100%;
}
#im-section .im-content #im-modal .im-modal-content .im-body .im-description {
  position: relative;
  overflow: hidden;
  text-align: left !important;
}
#im-section .im-content #im-modal .im-modal-content .im-body .im-description h3,
#im-section .im-content #im-modal .im-modal-content .im-body .im-description #im-read {
  color: #fff;
  font-family: 'Noto Serif JP', serif;
}
#im-section .im-content #im-modal .im-modal-content .im-body .im-description h3 {
  letter-spacing: 1.6px;
  font-size: 16px;
}
#im-section .im-content #im-modal .im-modal-content .im-body .im-description #im-read {
  letter-spacing: 1.4px;
  line-height: 24px;
  font-size: 14px;
  overflow-x: hidden;
  overflow-y: auto;
}
#im-section .im-content #im-modal .im-modal-content .im-body #im-spot-more {
  padding-top: 20px;
  text-align: center;
}
@media screen and (min-width: 992px) {
  #im-section .im-content #im-modal .im-modal-content .im-body #im-spot-more {
    padding-top: 30px;
  }
}
#im-section .im-content #im-modal .im-modal-content .im-body #im-spot-more #im-spot-more-button,
#im-section .im-content #im-modal .im-modal-content .im-body #im-spot-more #im-model-course-button {
  /* background-color: #08A3DA; */
  background-color: #000;
  color: #fff;
  padding: 7px 19px;
  border-radius: 25px;
  font-size: 12px;
  font-family: 'Lato', sans-serif;
  font-style: italic;
  letter-spacing: 1.6px;
  font-weight: 600;
}
@media screen and (min-width: 992px) {
  #im-section .im-content #im-modal .im-modal-content .im-body #im-spot-more #im-spot-more-button,
  #im-section .im-content #im-modal .im-modal-content .im-body #im-spot-more #im-model-course-button {
    padding: 14px 38px;
    border-radius: 25px;
    font-size: 13px;
  }
}

#im-section .im-content #im-modal .im-modal-content .im-body #im-spot-more #im-model-course-button {
  margin-left: 33px;
}

/* animation */
@keyframes walk-right{
  0% {
      transform: translate(-12%, 0%) rotate(68deg);
  }
  50% {
      transform: translate(14%, 0%) rotate(-24deg);
  }
  100% {
      transform: translate(-12%, 0%) rotate(68deg);
  }
}
@keyframes walk-left{
  0% {
      transform: translate(14%, 0%) rotate(-22deg);
  }
  50% {
      transform: translate(-13%, 0%) rotate(68deg)
  }
  100% {
      transform: translate(14%, 0%) rotate(-22deg);
  }
}
@keyframes pulsate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes pulsation {
  0%{
    box-shadow: 0 0 0 0 rgba(var(--pulsation-color), .7), 0 0 0 0 rgba(var(--pulsation-color), .7)
  }
40%{
    box-shadow: 0 0 0 22px rgba(var(--pulsation-color), 0), 0 0 0 0 rgba(var(--pulsation-color), .7)
   }
80%{
    box-shadow: 0 0 0 22px rgba(var(--pulsation-color), 0), 0 0 0 11px rgba(var(--pulsation-color), 0)
   }
100%{
    box-shadow: 0 0 0 0 rgba(var(--pulsation-color), 0),0 0 0 11px rgba(var(--pulsation-color), 0)
   }
}
@keyframes pulsation-pc {
  0%{
    box-shadow: 0 0 0 0 rgba(var(--pulsation-color), .7), 0 0 0 0 rgba(var(--pulsation-color), .7)
  }
40%{
    box-shadow: 0 0 0 33px rgba(var(--pulsation-color), 0), 0 0 0 0 rgba(var(--pulsation-color), .7)
   }
80%{
    box-shadow: 0 0 0 33px rgba(var(--pulsation-color), 0), 0 0 0 16px rgba(var(--pulsation-color), 0)
   }
100%{
    box-shadow: 0 0 0 0 rgba(var(--pulsation-color), 0),0 0 0 16px rgba(var(--pulsation-color), 0)
   }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes close {
  0% {
    -webkit-transform:translateX(0);
    transform:translateX(0);
  }
  49% {
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
    opacity:1;
  }
  50% {
    opacity:0;
  }
  51% {
    -webkit-transform:translateX(-100%);
    transform:translateX(-100%);
  }
  52% {
    opacity:1;
  }
  to {
    -webkit-transform:translateX(0);
    transform:translateX(0);
  }
}