@charset "utf-8";
/* CSS Document */

body{
	font-family: 'Noto Serif JP', serif;
	margin: 0;
	background-color: #05274d;
	background-image: url("../images/bg.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-attachment: fixed;
	background-position: top center;
	overflow-x: hidden;
}

.page{
	background-image: url("../images/bg_pattern.png");
}

section {
	margin: 3em auto 5em;
	text-align: center;
}

h3{
	font-size: 30px;
	color: #fff;
	font-weight: 500;
	letter-spacing: 5px;
}

p{
	font-size: 22px;
	color: #fff;
	font-weight: 400;
	letter-spacing: 3px;
	line-height: 1.7em;
}


.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}

.spnone{display: block;}
.pcnone{display: none;}

@media screen and (max-width: 900px) {
		section{width: 95%;margin: 2em auto;}
		
		.fadein {
				  opacity : 0;
				  transform: translateY(1em);
				  transition: all 0.5s;
				}
		
		.spnone{display: none;}
		.pcnone{display: block;}

	}

@media screen and (max-width: 600px) {
		body{
			background-size: 200%;
			}

		h3{
			font-size: 6vw;
			}

		p{
			font-size: 4vw;
			line-height: 1.7em;
			}
	
		.page{background-size: 30%;}
}

/* MAIN
--------------------------------------------*/

#main .mv {
	position: relative;
	margin: 3em auto;
}

#main .mv .mv_circle{
	margin: 0 auto;
	animation: rotate-anime 30s linear infinite;
}
@keyframes rotate-anime {
  0%  {transform: rotate(0);}
  100%  {transform: rotate(360deg);}
}

#main .mv .mv_circle img{
	width: 1000px;}

#main h2{
	position: absolute;
	top:14em;
	right:2em;
	bottom:0;	
	left:0;
	margin:auto;
}
.main_txt{
	text-shadow:
	   2px  2px 2px #05274d,
      -2px  2px 2px #05274d,
       2px -2px 2px #05274d,
      -2px -2px 2px #05274d,
       2px  0px 2px #05274d,
       0px  2px 2px #05274d,
      -2px  0px 2px #05274d,
       0px -2px 2px #05274d;
}
.main_txt p{
	margin-bottom: 3em;
}

.main_txt a {
	text-decoration:none;
	color: cyan;
}
.main_txt a::after {
  	content: '↓';
	font-size: 0.5em;
}

@media screen and (max-width: 900px) {
	
	#main .mv .mv_circle{
	animation:none;
	}
	#main .mv .mv_circle img{
		width: 95%;
	}

	#main h2{
		width: 100%;
		position: absolute;
		top:25vw;
		right:0;
		bottom:0;	
		left:0;
		margin:auto;
	}
	
	#main h2 img{
		width:90%;
	}
	
	.main_txt p{
		margin-bottom: 3em;
		text-align: left;
	}
    p.members{
        text-align: center;
    }
	
}

/* CONT
--------------------------------------------*/

/*-- 共通 --*/
.cont_tit p{
	text-align: center;
}

/*--left--*/

.cont_left{padding: 3em 0;}

.cont_left .cont_main{
	text-align: right;
	display: inline-block;
	vertical-align: middle;
}
.cont_left .cont_tit{
	text-align: left;
	display: inline-block;
	margin-top:10em;
	vertical-align: middle;
}

.cont_01{
	background-image: url("../images/pic01_bg.png");
	background-size: 1000px;
	background-repeat: no-repeat;
	background-position: bottom 70px left;
    padding-bottom: 7em;
}
.cont_03{
	background-image: url("../images/pic03_bg.png");
	background-size: 1000px;
	background-repeat: no-repeat;
	background-position: bottom 70px left 150px;
}
.cont_03 .cont_main{
    margin-right: -100px;
}

.cont_05{
	background-image: url("../images/pic05_bg.png");
	background-size: 1000px;
	background-repeat: no-repeat;
	background-position: bottom 70px left 30px;
}
.cont_05 .cont_main{
    margin-right: -150px;
}

/*--right--*/

.cont_right{padding: 3em 0;}

.cont_right .cont_main{
	text-align: left;
	display: inline-block;
	vertical-align: middle;
}
.cont_right .cont_tit{
	text-align: right;
	display: inline-block;
	margin-top:10em;
	vertical-align: middle;
}

.cont_02{
	background-image: url("../images/pic02_bg.png");
	background-size: 1000px;
	background-repeat: no-repeat;
	background-position: bottom 70px right;
}
.cont_02 .cont_main{
    margin-left: -250px;
}

.cont_04{
	background-image: url("../images/pic04_bg.png");
	background-size: 1000px;
	background-repeat: no-repeat;
	background-position: bottom 70px right 150px;
}
.cont_04 .cont_main{
    margin-left: -250px;
}

.cont_06{
	background-image: url("../images/pic06_bg.png");
	background-size: 1000px;
	background-repeat: no-repeat;
	background-position: bottom 20px right 20px;
}

@media screen and (max-width: 900px) {
	
	.cont_main img{
		width: 95%;
		margin: 0 auto;
		text-align: center;}
	
	.cont_01,.cont_02,.cont_03,.cont_04,.cont_05,.cont_06{
		background:none;
	}
	
	/*--left--*/
	.cont_left{padding: 3em 0;}

	.cont_left .cont_main{
		text-align: center;
		display: block;
        padding-top: 2em;
	}
	.cont_left .cont_tit{
		text-align: center;
		display: block;
		margin-top:0;
	}
	.cont_left .cont_tit img{
		width: 60%;
        max-width: 399px;
	}
	.cont_06{padding: 3em 0 2em!important;}

    .cont_02 .cont_main{margin: 0;}
    .cont_03 .cont_main{margin: 0;}
    .cont_04 .cont_main{margin: 0;}
    .cont_05 .cont_main{margin: 0;}
    
    .cont_01 .cont_main img{max-width: 558px;}
    .cont_02 .cont_main img{max-width: 751px;}
    .cont_03 .cont_main img{max-width: 577px;}
    .cont_04 .cont_main img{max-width: 635px;}
    .cont_05 .cont_main img{max-width: 581px;}
    .cont_06 .cont_main img{max-width: 529px;}
}



/* LINK
--------------------------------------------*/
#link{
	margin-top: 6em;
}

.link_btn{
	margin:2em auto;
}
.link_btn a{
	transition: 0.5s;
}
.link_btn a:hover{
	opacity: 0.7;
}

@media screen and (max-width: 900px) {
	#link{
		margin-top:0;
		margin-bottom: 4em;
	}

	.link_btn{
		margin:1em auto;
	}
	
	.link_btn a img{
		width: 95%;
	}
}


/* Back to top
--------------------------------------------*/
#page_top{
  width: 100px;
  height: 80px;
  position: fixed;
  right: 2em;
  bottom: 0;
  background: #008b8b;
  opacity: 0.7;
  border-radius: 15px 15px 0 0;
}
#page_top a{
  position: relative;
  display: block;
  width: 100px;
  height: 80px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -25px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 40px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

@media screen and (max-width: 600px) {
	#page_top{
	  right: 1em;
	}
}


/* Footer
--------------------------------------------*/
footer {width:1000px;margin:0 auto 4em;}
footer p{
	font-size: 14px;
	font-weight: 300;
	color:#658dba;
}

@media screen and (max-width: 900px) {
	footer {width:90%;margin:0 auto 20vw;}
	footer p{
		font-size: 2vw;
	}
}