html {
  max-width: 1980px;
  margin: 0 auto;
}

body {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  text-align: center;
  background: url("../images/bg02_2.jpg");
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 900;
  color: #242424;
}
p {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  color: #242424;
  font-size: 0.8em;
}

.animation {
	opacity : 0;
	visibility: hidden;
	transition: 2.5s;
	transform: translateY(30px);
}
/*アニメーション要素までスクロールした時のスタイル*/
.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

header { 
  position:relative;
  top: 0;
  background: url("../images/bg01_wide2.png") no-repeat;
  background-size: 100%;
  width: 100%;
  height: 110vh;
  /* transition:all .4s; */
}
.title-img {
  margin-top: 2%;
  width: 700px;
}

#content {
  top: 0;
  padding: 60px;
}
.s-illust1 {
  position: absolute;
  transform: rotate(-10deg);
  top: 27%;
  left: 3%;
  width: 100px;
}
.s-illust2 {
  position: absolute;
  transform: rotate(10deg);
  top: 50%;
  right: 3%;
  width: 100px;
}
.s-illust3 {
  position: absolute;
  transform: rotate(-10deg);
  top: 70%;
  left: 3%;
  width: 110px;
}

@media screen and (max-width:800px){
  header { height: 75vh;}
  .title-img { width: 90%; }
  #content {
    top: 0;
  }
  .title-img {
    margin-top: 10%;
    width: 75%;
  }
  .s-illust1 {
    position: relative;
    transform: rotate(-10deg);
    width: 60%;
    margin: 20px;
  }
  .s-illust2 {
    position: relative;
    transform: rotate(10deg);
    width: 60%;
    margin: 20px;
  }
  .s-illust3 {
    position: relative;
    transform: rotate(-10deg);
    width: 60%;
    margin: 20px;
  }
}


#content {
  top: 0;
  padding: 60px;
}


/* containers */
.container-fluid {
  padding: 5% 10%;
}

/* sections */
.colored-section {
  background-color: #C3DFEE;
  /* color: #242424; */
}

.white-section {
  background-color: #fff;
}

/* Navigation Bar */
#global-nav {
  width: 96%;
  height: 60px;
  margin: 85vh -48%;
  padding:20px;
  background: #C51E1E;
  -webkit-border-radius:30px;
  border-radius:30px;
  position: fixed;
  top: 0; 
  left: 50%;
  z-index: 10;
}


#title #global-nav { width: 990px; height: 60px; margin: 88vh 0 0 -495px; padding: 0 45px; background: #C51E1E;-webkit-border-radius:30px; border-radius:30px; position: fixed; top: 0; left: 50%; }
#title #global-nav ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content:space-between; width: 90%; margin: 0 auto;}
#title #global-nav ul li { list-style-type:none; display:flex; flex-direction:column; justify-content:center; align-items:center; height: 60px;}
#title #global-nav ul li a { color: #fff; display: block; text-indent:-9999px; font-size:1%; line-height:1%; text-decoration:none; overflow:hidden;}
#title #global-nav ul li:nth-of-type(1)  a { width: 120px; height: 100%; background: url("../images/about.png") no-repeat; background-size: contain;}
#title #global-nav ul li:nth-of-type(2)  a { width: 170px; height: 100%; background: url("../images/contents.png") no-repeat; background-size: contain;}
#title #global-nav ul li:nth-of-type(3)  a { width: 90px; height: 100%; background: url("../images/howtojoin.png") no-repeat; background-size: contain;}
#title #global-nav ul li:nth-of-type(4)  a { width: 45px; height: 100%; background: url("../images/schedule.png") no-repeat; background-size: contain;}
#title #global-nav ul li:nth-of-type(5)  a { width: 115px; height: 100%; background: url("../images/contact.png") no-repeat; background-size: contain;}
@media screen and (max-width:1980px){
	#title #global-nav { width: 96%; height: 60px; margin: 85vh 0 0 -48%; padding: 20px;}
}


/*ハンバーガーメニュー*/
#navbar-toggle { display: none; }
@media screen and (max-width:800px){
  /* #global-nav { display: none; } */
	#navbar-toggle { position: fixed; top:20px; left:20px; z-index:5; font-size: 12px; display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-align-items: flex-end; align-items: flex-end; }
	#navbar-toggle div { display: inline-block;text-align: center; }
	#navbar-toggle #wrapper { position: relative; display: block; width: 48px; height: 48px; text-align: center; padding: 0; background: #5E8AA9; -webkit-border-radius:50%; border-radius:50%;}
	#navbar-toggle span { display: block; width: 24px; height: 3px; background:#D7D7D6; position: absolute; left:calc(50% - 12px); -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; }
	#navbar-toggle span:nth-child(1) { top: 18px; }
	#navbar-toggle span:nth-child(2) { top: 24px; }
	#navbar-toggle span:nth-child(3) { top: 30px; }
	.open #navbar-toggle span:nth-child(1) { top: 23px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); }
	.open #navbar-toggle span:nth-child(2) { width: 0; left: 50%; }
	.open #navbar-toggle span:nth-child(3) { top: 23px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); transform: rotate(-135deg); }
	#title.open #global-nav { margin:0; height: auto; -webkit-border-radius:0; border-radius:0; position:fixed; width:100%; z-index:2; top: 0; left: 0; right: 0; bottom: 0; overflow-y: auto; padding-top:80px; background: #C51E1E; }
  #title.open #global-nav ul { display:block; margin: 0; padding-top: 60px;}
}




/* Download Button */
.download-button {
  margin: 5% 3% 5% 0;
}

/* Title */
header .container-fluid {
  padding: 7% 15% 7%;
  text-align: center;
}

/* about */
#about {
  width: 85%;
  margin: 30px auto 50px;
  padding: 50px 20px;
  border-radius: 45px;
}

/* contents */
#contents {
  position: relative;
  width: 85%;
  margin: 100px auto;
  padding: 50px 20px;
  border-radius: 45px;
}
.container-fluid h3 {
  z-index: 10;
}
/* howtojoin */
#howtojoin {
  width: 85%;
  margin: 100px auto 50px;
  padding: 50px 20px;
  border-radius: 45px;
}

.heading {
  padding: 30px;

}

/* schedule */
#schedule {
  width: 85%;
  margin: 100px auto 50px;
  padding-top: 50px;
  border-radius: 45px;
}

#schedule h5 {
  margin: 30px 0;
}

#schedule h6{
  color:#C51E1E;
  padding: 5px;
}

.card {
  background-color: initial;
  border: initial;
  position: relative;
}
.card-body {
  flex: initial;
  padding: initial;
}
.schedule-image {
  position: relative;
  width: 100%;
  vertical-align: middle;
}
button{
  width: 100%;
}

/* contact */
#contact {
  padding: 100px;
}
#contact p {
  font-size: 1.0rem;
}

/* Features */
#features {
  position: relative;
}

.feature{
  margin: 5% 0;
}
.feature-title {
  font-size: 1.5rem;
}
.features-icon {
  color: #5E8AA9;
  /* font-size: 4rem; */
  margin-bottom: 1rem;
}
.features-icon:hover {
  color: #3ec8ff;
}

/* footer */
#footer {
  background-color: #C51E1E;
  padding-bottom: 50px;
}

#footer p {
  color: #fff;
}

.footer-icons {
  padding-bottom: 15px;
}
.icon-link {
  color: #000;
  margin: 20px 10px;
}
.kuji {
  width: 280px;
  padding-top: 50px;
  margin: 0 auto;
}
.kuji-image {
  float: left;
}
.kuji-cap {

  color: #fff;
  font-size: 12px;
}

#pagetop { display: none; width: 80px; height: 80px; background: url( "../images/top01.png") no-repeat; background-size:100% 100%; text-indent:-9999px; font-size:1%; line-height:1%; text-decoration:none; overflow:hidden; position: fixed; right:2%; bottom:10%; z-index: 10;}