html,body{
	font-family: 'M PLUS Rounded 1c',"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  /*'Kaisei HarunoUmi'*/
	height: 100%;
  overflow: hidden;
}
html::-webkit-scrollbar {  /* Chrome, Safari 対応 */
  display:none;
}
body{
  /* background-color: #E5AF01; */
  background-color: #87cefa;
  color: #333;
}
.landscape {
}
.portrait {
}
.checkLengthWrap {
  position: relative;
  top:-100%;
  width: 1000%;
}
.animationWrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-color: #00aeef; */
  background-color: #000;
}
.animation {
  position: relative;
  height: 100%;
}
.animationLogo {
  animation-timing-function: linear;
  animation-duration: 3s;
  animation-fill-mode: forwards;
  transform: translateX(100vw); 
}
.logo {
  width: 550px;
  height: 228px;
  position: absolute;
  top: calc(50% - 114px);
  left: calc(50% - 275px);
  display: none;
}
.logoKoyama {
	position: absolute;
	left: calc(50% - 180px);
	top: calc(50% - 26.5px);
	margin-left: 40px;
	margin-top: -85px;
  animation-name: logoKoyama;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
@keyframes logoKoyama {
	0% { 
		transform: translateX(100vw); 
	}
	/* 20% { 
		transform: translateX(0px);
	}
	90% { 
    transform: translateX(0px);
	} */
	100% { 
    transform: translateX(0);
	}
}
.logoFreshears {
	position: absolute;
	left: calc(50% - 252px);
	top: calc(50% - 133px);
	margin-left: -23px;
	margin-top: 19px;
  animation-name: logoKoyama;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation-delay: 1.5s;
}
.logoFes {
	position: absolute;
	left: calc(50% - 115px);
	top: calc(50% - 83px);
	margin-left: 260px;
	margin-top: -31px;
  animation-name: logoKoyama;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation-delay: 2s;
}
.logoLine1 {
  position: absolute;
  left: calc(50% - 62px);
  top: calc(50% - 1.5px);
  margin-left: -212px;
  margin-top: 91px;
  animation-name: logoKoyama;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
	/* animation-duration: 1s; */
  animation-delay: 1s;
}
.logo2021Wrap {
	position: absolute;
	left: calc(50% - 101px);
	top: calc(50% - 23px);
	margin-top: 92px;
	margin-left: 48px;
  animation-name: logoKoyama;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* animation-delay: 5s;
  animation-duration: 2s; */
  animation-delay: 1.5s;
}
.logo2021 {
	position: relative;
  animation-name: logoKoyamaZoom;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 7s;
  animation-duration: 2s;
  transform: scale(1);
}
@keyframes logoKoyamaZoom {
	0% { 
    transform: scale(1);
	}
  90% { 
    transform: scale(100);
	}
	100% { 
    transform: scale(700);
    background-color: #87cefa;
	}
}
.logoLine2 {
	position: absolute;
	left: calc(50% - 62px);
	top: calc(50% - 1.5px);
	margin-left: 125px;
	margin-top: 91px;
  animation-name: logoKoyama;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* animation-delay: 1.5s; */
  animation-delay: 2s;
}
input {
	font-family: inherit;
	font-size: inherit;
	width: 100%;
	border: 1px solid #ddd;
	padding: 5px 10px;
	border-radius: 3px;
}
button {
	font-family: inherit;
	cursor: pointer;
	border: 0;
	font-size: inherit;
	background-color: inherit;
}
.commentBox {
  overflow: hidden;
	height: calc(100% - 50px);
	width: 100%;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
}
.commentLink{
  text-decoration: underline;
  color: inherit
}
.movetext {
  transform: translateX(100vw);
  display: inline-block;
  white-space: nowrap;
  animation-name: marquee;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-duration: 25s;
  /* animation-iteration-count: infinite; */
  position: absolute;
  margin-top: 0px;
  font-size: 25px;
  font-weight: bold;
}
@media screen and (max-width: 1000px) {
  .movetext {
    font-size: 2.5vw;
  }
}
@media screen and (min-width: 900px) {
  .movetext {
    animation-duration: 25s;
  }
}

/* .movetext:hover{
  animation-play-state: paused;
  transition: all .2s ease-out;
  transform: scale(2);
} */
.movetextPaused{
  animation-play-state: paused;
  transition: all .2s ease-out;
  transform: scale(2);
}
.inputArea {
	position: absolute;
	bottom: -100%;
	right: 5px;
  transition: all .2s ease-out;
  display: none; /*リリース時解除*/
}
.inputAreaMove {
  animation-name: inputAreaMove;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-duration: 1s;
}

@keyframes inputAreaMove {
	0% { 
    transform: translateY(0); 
	}
  20% { 
    transform: translateY(-100px); 
	}
  80% { 
    transform: translateY(-100px); 
	}
	100% { 
    transform: translateY(0); 
	}
}
.inputTitle {
	padding: 5px 10px 10px;
	border-radius: 3px 3px 0 0;
	background-color: #fff;
	text-align: center;
	width: 200px;
	margin: 0 auto;
	cursor: pointer;
	line-height: 1;
}
.inputTitleSuccess {
  background-color: #23AC0E;
  color: #fff;
  background-image: url(../img/icon_child-solid.svg);
  background-repeat: no-repeat;
  background-size: auto 65%;
  background-color: #23AC0E;
  background-position: 32% center;
  padding-left: 10%;
}
.inputBody {
	background-color: #fff;
	padding: 10px;
}
.inputWrap {
}
.inputWrap + .inputWrap {
  margin-top: 10px;
}
.inputText {
	padding: 2px 5px;
}
.error {
  color: red;
  font-size: 0.8em;
  margin-top: 2px;
}
.sendWrap {
	margin: 10px 0 0;
	text-align: center;
  position: relative;
}
.send {
	background-color: #00aeef;
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 2px 20px;
	font-size: 0.9em;
	border-bottom: 3px solid #0076a1;
  font-weight: bold;
}
.sendSuccess {
	font-size: 0.9em;
	position: absolute;
	margin-left: -60px;
	opacity: 0;
	width: 120px;
	display: block;
	left: 50%;
	top: 0;
	background-color: #fff;
	padding: 5px 10px;
	text-align: center;
	color: #333;
	border-radius: 2px;
	border: 1px solid #ddd;
	z-index: -1;
	background-color: #23AC0E;
	color: #fff;
	border: 0;
}
.sendSuccessOn {
	animation-timing-function: linear;
	animation-fill-mode: forwards;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
	animation-name: sendSuccess;
	animation-duration: 1s;
}

@keyframes sendSuccess {
	0% { 
		transform: translateY(5px); 
		opacity: 0;
		z-index: 1;
	}
	20% { 
		transform: translateY(0px); 
		opacity: 1;
	}
	90% { 
		opacity: 1;
	}
	100% { 
		opacity: 0;
		z-index: 1;
	}
}
.self::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(50% - 14.5px);
	width: 20px;
	height: 27px;
	background-image: url(../img/icon_child-solid.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 20px;
}

.self {
	padding-left: 30px;
}

.lane1{
  top: 0%;
  animation-delay: 2s;
}
.lane2{
  top: 5%;
  animation-delay: 5s;
}
.lane3{
  top: 10%;
  animation-delay: 1s;
}
.lane4{
  top: 15%;
  animation-delay: 20s;
}
.lane5{
  top: 20%;
  animation-delay: 14s;
}
.lane6{
  top: 25%;
  animation-delay: 12s;
}
.lane7{
  top: 30%;
  animation-delay: 8s;
}
.lane8{
  top: 35%;
  animation-delay: 9s;
}
.lane9{
  top: 40%;
  animation-delay: 18s;
}
.lane10{
  top: 45%;
  animation-delay: 4s;
}
.lane11{
  top: 50%;
  animation-delay: 10s;
}
.lane12{
  top: 55%;
  animation-delay: 19s;
}
.lane13{
  top: 60%;
  animation-delay: 17s;
}
.lane14{
  top: 65%;
  animation-delay: 7s;
}
.lane15{
  top: 70%;
  animation-delay: 6s;
}
.lane16{
  top: 75%;
  animation-delay: 15s;
}
.lane17{
  top: 80%;
  animation-delay: 16s;
}
.lane18{
  top: 85%;
  animation-delay: 11s;
}
.lane19{
  top: 90%;
  animation-delay: 13s;
}
.lane20{
  top: 95%;
  animation-delay: 3s;
}

@media screen and (max-width: 640px) {
  html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
    /* min-height: -webkit-fill-available; */
  }
  body{
    height: 100%;
    font-size: 2.5vw;
    overflow: hidden;
  }
  .movetext {
    animation-duration: 15s;
  }
  .movetext{
    font-size: 16px;
  }
  .commentBox{
    height: calc(100% - 23.44vw);
  }
  .inputArea {
    width: 100%;
    margin: 0 auto;
    position: absolute;
    right: 0;
  }
  
  .inputArea input {
    font-size: 16px;
    width: 100%;
  }
  .inputBody {
    padding: 3.13vw;
  }
  .inputWrap + .inputWrap {
    margin-top: 3.13vw;
  }
  .sendWrap {
    margin: 3.13vw 0 0;
    text-align: center;
    position: relative;
  }
  .send {
    font-size: 16px;
    letter-spacing: 0.78vw;
    width: 100%;
  }
  .inputTitle {
    padding: 1.56vw 1.56vw 1.56vw;
    border-radius: 0.47vw 0.47vw 0 0;
    width: 60%;
    font-size: 16px;
  }
  .inputTitleSuccess {
    background-color: #23AC0E;
    color: #fff;
    background-image: url(../img/icon_child-solid.svg);
    background-repeat: no-repeat;
    background-size: auto 65%;
    background-color: #23AC0E;
    background-position: 32% center;
    padding-left: 10%;
  }
  .logo {
    width: 60.16vw;
    height: 24.94vw;
    position: absolute;
    top: calc(50% - 12.47vw);
    left: calc(50% - 30.08vw);
  }
  .logoKoyama {
    left: calc(50% - 14.27vw);
    top: calc(50% - 2.9vw);
    margin-left: -1.25vw;
    margin-top: -9.38vw;
    width: 28.55vw;
    height: 5.8vw;
  }
  .logoFreshears {
    left: calc(50% - 9.08vw);
    top: calc(50% - 22.09vw);
    margin-left: -20.94vw;
    margin-top: 9.69vw;
    animation-delay: 1.5s;
    width: 44.19vw;
    height: 18.16vw;
  }
  .logoFes {
    left: calc(50% - 9.08vw);
    top: calc(50% - 7.16vw);
    margin-left: 24.84vw;
    margin-top: -5.31vw;
    animation-delay: 2s;
    width: 14.33vw;
    height: 18.16vw;
  }
  .logoLine1 {
    left: calc(50% - 11.48vw);
    top: calc(50% - 0.16vw);
    margin-left: -18.28vw;
    margin-top: 9.84vw;
    width: 22.97vw;
    height: auto;
  }
  .logoLine2 {
    left: calc(50% - 22.97vw);
    top: calc(50% - 0.16vw);
    margin-left: 30vw;
    margin-top: 9.84vw;
    width: 22.97vw;
    height: auto;
  }
  .logo2021Wrap {
    left: calc(50% - 5.74vw);
    top: calc(50% - 2.52vw);
    margin-top: 10vw;
    margin-left: 0vw;
  }
  .logo2021 {
    width: 11.48vw;
    height: 5.03vw;
  }
  .self {
    padding-left: 4.69vw;
  }
  .self::before {
    top: calc(50% - 2.11vw);
    width: 3.13vw;
    height: 4.22vw;
    background-size: 3.13vw;
  }
}