html{
	/*font-size: 16px;*/
}
body{
	margin:0;
}
#top{
	/*background-image: url(./Untitled40.jpg);*/
	/*display: flex;
	justify-content: center;
	align-items: center;*/
	color: #fff;
	max-width: 1000px;
	margin: auto;

	width:100vw;
	height:56.25vw;
	max-height: 562.5px;
	 position   : relative;
  overflow   : hidden;
}

.bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 12s infinite;   /* 4画像 × 各5s = 20s */
  background-size:cover;
}

.src1 {
  background-image : url(./IMG20220423170819.jpg);   /* 背景の画像を指定 */
}
.src2 {
  background-image : url(./PSX_20220131_124049.jpg);   /* 背景の画像を指定 */
  animation-delay  : 2s;
}
.src3 {
  background-image : url(./20220313_183738.jpg);   /* 背景の画像を指定 */
  animation-delay  : 4s;
}
.src4 {
  background-image : url(./Untitled11.jpg);   /* 背景の画像を指定 */
  animation-delay  : 6s;
}

.src5 {
  background-image : url(./noname.jpg);   /* 背景の画像を指定 */
  animation-delay  : 8s;
}

.src6 {
  background-image : url(./PSX_20220131_123956.jpg);   /* 背景の画像を指定 */
  animation-delay  : 10s;
}

@keyframes bgAnime {
   0% { opacity: 0; }
   6% { opacity: 1; }
  18% { opacity: 1; }
  22% { opacity: 0; }
 100% { opacity: 0; }
}


@media screen and (min-width: 1001px) {
	/*#top{
	width:calc(100vw - calc(100vw - 100%));	
	}*/
	#top_inner{
		position   : absolute;
  display    : inline-block;
  padding    : 20px;
  color      : #fff;
  top        : 50%;                               /* 中央寄せ */
  left       : 50%;
  transform  : translate(-50%,-50%);
	}
}

@media screen and (max-width: 1000px) {
	#top_inner{
	width: 100vw;
	top        : 50%;                               /* 中央寄せ */
  left       : 50%;
  transform  : translate(-50%,-50%);
	position   : absolute;
  z-index    : 11;
	}
}
#top h2{
	display: flex;
	flex-direction: column;
}
#top h3{
	text-align: center;
	font-size: 150%;
	text-shadow: 2px  2px 5px black,
            -2px  2px 5px black,
             2px -2px 5px black,
            -2px -2px 5px black;
            margin-top:5px;
            margin-bottom: 5px;
}
#top h1{
	text-align: center;
	font-size: 400%;
	text-shadow: 2px  2px 5px black,
            -2px  2px 5px black,
             2px -2px 5px black,
            -2px -2px 5px black;
}

#top span.blue_shadow{
	text-shadow: 2px  2px 5px blue,
            -2px  2px 5px blue,
             2px -2px 5px blue,
            -2px -2px 5px blue;
}
#top span.red_shadow{
	text-shadow: 2px  2px 5px red,
            -2px  2px 5px red,
             2px -2px 5px red,
            -2px -2px 5px red;
}

#top span.green_shadow{
	text-shadow: 2px  2px 5px green,
            -2px  2px 5px green,
             2px -2px 5px green,
            -2px -2px 5px green;
}
#top span.pink_shadow{
	text-shadow: 2px  2px 5px deeppink,
            -2px  2px 5px deeppink,
             2px -2px 5px deeppink,
            -2px -2px 5px deeppink;
}

#slogan{
	font-size:230%;
	font-weight: bold;
	color: white;

	text-shadow: 2px  2px 5px blue,
            -2px  2px 5px blue,
             2px -2px 5px blue,
            -2px -2px 5px blue;

}

#introduce{
	max-width: 1000px;
	margin:auto;
}
#introduce ul{
	border: 3px double #6699ff;
	padding: 10px;
}
#introduce li{
	color:#000;
	margin-bottom: 0.4em;
	/*list-style: none;*/
}
#introduce_content{
	text-align: center;
	font-size:150%;
	font-style: italic;
	font-weight: bold;;
	color: rgb(86, 207, 209);
	margin:50px auto;
}

#InfoContainer{
	background-image: url(./1/P1090465.jpg);
}
#ActiveContainer{
	background-image: url(./1/P1090455.jpg);
	margin-top: 15px;
}
#JoinContainer{
	background-image: url(./1/P1090449.jpg);
	margin-top: 15px;
}
/*
#AboutContainer{
	background-image: url(./1/P1090455.jpg);
	margin-top: 15px;
}
*/

div#intro div.intro_slogan{
	font-size:150%;
	font-weight: bold;
	color: white;

	text-shadow: 2px  2px 5px hotpink,
            -2px  2px 5px hotpink,
             2px -2px 5px hotpink,
            -2px -2px 5px hotpink;

}

div.recruit ul {
  color: green; 
  /*font-weight: bold;*/
  border: double 5px #668ad8;/*二重線 太さ 色*/
  background:rgba(241,248,255,0.6);
  margin-top: 1em;
  padding: 0.5em 0.5em 0.5em 2em;
}

div.recruit ul li {
  line-height: 1.5;
  padding: 0.5em 0;
}

div.recruit ul li b{
  color:blue;
}


div.memberinfo ul {
  color: rgb(52,78,196); 
  border: double 5px #429959;/*二重線 太さ 色*/
  background:rgba(196, 255, 212,0.6);
  margin-top: 2em;
  padding: 0.5em 0.5em 0.5em 2em;
}

div.memberinfo ul li {
  line-height: 1.5;
  padding: 0.5em 0;
}

div.memberinfo ul li b{
  color:red;
}

div#join ul {
  color: rgb(82,108,206); 
  border: double 5px #668ad8;/*二重線 太さ 色*/
  background:rgba(241,248,255,0.6);
  padding: 0.5em 0.5em 0.5em 2em;
}
div#join ul li {
  line-height: 1.5;
  padding: 0.5em 0;
}

div#join ul li b{
  color:red;
}


div#container{
		padding-top:30px;
		max-width: 1000px;
		margin:auto;
}
div#container h2{
		border-color: #d2691e;
		border-width: 0 0 1px 1px;
		border-style: solid;
		padding-left: 1em;
		color: #d2691e;
	}


	div.text{
		margin-left:30px;
		margin-bottom: 2em;
	}

	div.note{
		font-size: 85%;
		margin-left: 1em;
	}

		div.content{
			padding:20px;
		}

	h4:before{
		content: "◆";
	}
	h4{
		margin-top: 0;
		width:50%;
		padding-left: 10px;
		display: inline-block;
		color: green;
		border-bottom: 1px solid green;
		border-left: 3px solid green;
	}
	h4:after {
    content: "\000A";
    white-space: wrap;
    }

div.movie-container{
	margin:auto;
	max-width: 85%;
	margin-bottom: 2em;
}
p.movie-comment{
	margin-top:10px !important;
	background:rgba(0,255,255,0.1);
	padding:15px;
	font-size: 85%;
	border: 3px double rgb(0,200,200);
}

@media screen and (max-width: 600px) {
#top{
	/*background-image: url(./1/P1090430.jpg);*/
	max-height:40vh; 
}
#top h3{
	font-size: 4vw;
	}
#top h1{
	font-size: 7.5vw;
	}

	div.content{
		padding:0;
	}
	div#container h2{
		padding-left: 0.3em;
		margin-top: 10px;
	}
div.text{
		margin-left:5px;
		margin-right: 5px;
		font-size:12px;
	}
	h4{
		width:90%;
	}
}