@charset "UTF-8";
/* CSS Document */
*, *:before, *:after {
  box-sizing: border-box; 
}
.pc{display: block;}
.sp{display: none;}
html {font-size: 62.5%;}
body{font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";}
h1 {font-size: 5rem;text-align: center;font-weight: 700;padding: 0rem 0 2srem 0;}
h1 img{}
h2 {font-size: 5.0rem;font-family: "brandon-grotesque",sans-serif;font-weight: 600;text-align: center;color: #fff;letter-spacing: 2rem;}
footer{font-size: 1.4rem;font-family: "brandon-grotesque", sans-serif;font-weight: 300;text-align: center;color: #fff;padding: 20px 0;}
a{color: #fff;text-decoration: none;}

section{
  background: linear-gradient(45deg,#000000,#000000, #182f5a, #1e5199,#54c3f1,#2eb6aa,#7ebf41,#00a051,#8f82bc,#f0831e,#e84567,#e84567);
  background-size: 2000% 2000%;
  animation: AnimationName 60s ease infinite;
	font-size: 1.4rem;
	color: #fff;
	line-height: 2;
	clear: both;
}
@keyframes AnimationName { 
    0%{background-position:0% 86%}
    50%{background-position:100% 15%}
    100%{background-position:0% 86%}
}
.inner{width: 600px;margin: 0 auto;padding: 20px 0;}

	#section1 p{position: absolute;}
#section1 p {bottom: 3rem;text-align: center;width: 100%;font-family: "brandon-grotesque", sans-serif;font-size: 1.8rem; }
#section1 p a{display: block;}
#section1 p img{width: 55px;}
#section1 p img{
	-webkit-animation-name:arrow; /* fuwafuwaっていうアニメーションをしてね！ */
	-webkit-animation-duration:1.5s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:arrow;
	-moz-animation-duration:1.5s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}
@-webkit-keyframes arrow {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -15px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes arrow {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -15px);}
	100% {-moz-transform:translate(0, 0);}
}

.logo{position: absolute;top: 3rem;left: 3rem;}
.logo img{width: 150px;}
#section3 .contents{line-height: 2;margin: 0 0 30px 0;}
#section3 .contents:nth-child(even){}
#section3 .contents h3{font-weight: 600;letter-spacing: .5rem;font-size: 1.8rem;text-align: center;}

#section4 dl{width: 100%;overflow: hidden;}
#section4 dl dt{padding: 0 0 20px 0;width: 20%;;float: left;font-weight: 600;}
#section4 dl dd{padding: 0 0 20px 0;width: 80%;float: left;}

#section5 {padding-top: 12%;}
#section5 dl{width: 100%;overflow: hidden;}
#section5 dl dt{padding: 0 0 20px 0;width: 30%;;float: left;font-weight: 600;letter-spacing: .2rem;}
#section5 dl dd{padding: 0 0 20px 0;width: 70%;float: left;}
#section5 strong{color: #D60003;}
#section5 select{display: block;background: rgba(0,0,0,0.5);border-radius: .2rem;padding: 1.2rem;font-size: 1.4rem;color: #fff;}
#section5 input{}
#section5 input[type="submit"] {display: block;border: 3px solid #fff;text-align: center;margin: 0 auto;padding: 20px 0;font-size: 1.4rem;color: #fff;font-weight: 700; width: 100%;cursor: pointer;}
#section5 input[type="submit"]:hover {display: block;border: 3px solid #fff;color: #333;background: #fff;}
#section5 input[type="text"] {display: block;background: rgba(0,0,0,0.5);border-radius: .2rem;padding: 1.5rem;font-size: 1.4rem;color: #fff;width: 100%;}
#section5 input[type="email"] {display: block;background: rgba(0,0,0,0.5);border-radius: .2rem;padding: 1.5rem;font-size: 1.4rem;color: #fff;width: 100%;}
#section5 textarea{display: block;background: rgba(0,0,0,0.5);border-radius: .2rem;padding: 1.5rem;font-size: 1.4rem;color: #fff;width: 100%;height: 150px;}
.btn{padding-top: 20px;}
.btn a {display: block;border: 3px solid #fff;color: #fff;text-align: center;font-size: 1.4rem;font-weight: 700;padding: 10px 0; font-family: "brandon-grotesque",sans-serif;}
.btn a:hover {display: block;border: 3px solid #fff;color: #333;background: #fff;}

@media only screen and (max-width: 780px){
	.pc{display: none;}
	.sp{display: block;}
	h1{font-size: 3.2rem;text-align: left;width: 80%;margin: 0 auto;padding:0px 0 30px 0;line-height: 1.5;}
	h1 span{font-size: 2.4rem;}
	h1 img{width: 150px;}
	h2 {font-size: 2.4rem;margin: 0 0 0 0;letter-spacing: 1rem;}
	.inner{width: 80%;margin: 0 auto;}
	#section1 p{position: absolute;}
	#section1 p {font-size: 1.4rem; }
	#section1 p img{width: 30px;}
	#section3 .contents{float: none;}
	#section3 .contents:nth-child(even){float: none;}
	#section3 .contents h3{font-weight: 600;letter-spacing:.1rem;font-size: 1.6rem;text-align: center;}
	
	#section4 dl{width: 100%;overflow: hidden;}
	#section4 dl dt{padding: 0 0 0 0;width: 100%;;float: none;}
	#section4 dl dd{padding: 0 0 10px 0;margin: 0 0 10px 0; width: 100%;float: none;border-bottom: 1px solid #fff;line-height: 1.5;}
	
	#section5 {padding-top: 50px;}
	#section5 dl{width: 100%;overflow: hidden;}
	#section5 dl dt{float: none; width: 100%;padding: 0 0 10px 0;}
	#section5 dl dd{float: none; width: 100%;padding: 0 0 10px 0;}
#section5 textarea{height: 200px;}
}