.wrapper {
	text-align: center;
	background-color: #fff;
}
/*センターに寄せる*/
.center {
	margin-left: auto;
	margin-right: auto;
}
header {
	padding-left: 10%;
	width: 100%;
	height: 100vh;
	position: relative;
	/*display: flex;*/
	overflow: hidden;
}
/*ヘッダーのアニメーションを入れる*/
.margin-left {
	margin-left: 5%;
}
.h1 {
	font-size: 5em;
	font-weight: bolder;
}
.h1 span {
	opacity: 0;
}
.h1.random span{
	animation-name: randomText;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-delay: 1.2s;
}
@keyframes randomText {
	0% {opacity: 0;
	    filter: blur(10px);
		transform: scale(1.5);   
	}
	100% {opacity: 1;
		  filter: blur(0);
		  transform: scale(1.0);
	}
}
/*
.h1.random span:nth-child(2n) {
	animation-delay: 1.7s;
}
.h1.random span:nth-child(3n+1) {
	animation-delay: 1.4s;
}*/
.h1.random span:nth-child(1) {
	animation-delay: 1.2s;
}
.h1.random span:nth-child(2) {
	animation-delay: 1.4s;
}
.h1.random span:nth-child(3) {
	animation-delay: 1.6s;
}
.h1.random span:nth-child(4) {
	animation-delay: 1.8s;
}
.h1.random span:nth-child(5) {
	animation-delay: 2s;
}

/*副題出現*/
.text {
	font-size: 3em;
	font-weight: bolder;
	position: relative;
	top: 20%;
	left: 30%;
}
#smallText2 {
	position: relative;
	left: 10%;
}
#smallText3 {
	position: relative;
	left: 5%;
}
/*ここよくわからん*/
/*.text{
	animation-name: viceTitle;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	overflow: hidden;
	opacity: 0;
}*/

.smallText {
	animation-name: smallTextBase;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	position: relative;/*ここは絶対relative*/
	opacity: 0;
	overflow: hidden;
}
.smallText::before {
    animation-name: smallTextAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;/*ここはぜったいabsolute*/
	width: 100%;
	height: 120%;
	background-color: orange;
}
.innerSmallText {
	animation-name: innerText;
	animation-duration: 1s;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}
/*@keyframes viceTitle {
	0%{
		opacity: 0;	
	}
	100%{
		opacity: 1;
	}
}*/
@keyframes smallTextBase {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes innerText {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes smallTextAnime{
	0% {
		transform-origin: right;
		transform: scaleX(0);
	}
	50% {
		transform-origin: right;
		transform: scaleX(1);
	}
	50.001% {
		transform-origin: left;
	}
	100% {
		transform-origin: left;
		transform: scaleX(0);
	}
}

/*まとめてアンカーとリストを加工*/
li {
	text-decoration: none;
	list-style: none;
}
a {
	text-decoration: none;
	color: black;
}
/*公法会で一緒に楽しく熱く学びませんか？*/
.title {
	font-size: 2em;
	font-weight: bolder;
}

/*.text {
	position: relative;
	top: 30%;
	left: 30%;
	width: 70%;
	height: 50%;
	border: solid black 2px;
}*/
/*
.smallText1 {
	margin-left: 5%;
	font-size: 2em;
}
.smallText2 {
	margin-left: 30%;
	font-size: 2em;
}
.smallText3 {
	margin-left: 20%;
	font-size: 2em;
}*/
/*ヘッダーの擬似要素*/
header::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 80%;
	height: 70vh;
	background: url("../img/discussion1.jpg") no-repeat center;
	background-size: cover;
	margin: 10% 5% 5% 5%;
}
/*メニューを加工する*/
.link {
	display: flex;
}
.link li {
	flex: 1 1 auto;
	font-size: 1.2em;
	font-weight: bolder;
	
}
.link li a:hover {
    color: 	red;
}
.menu {
	width: 10%;
	height: 10vh;
}
.fadeUpMenu {
	animation-name: fadeUp;
	animation-duration: 1.0s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes fadeUp{
	from {
		opacity: 0;
		transform: translateY(300px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.h1 {
	flex: 0 0 auto;
}
.menu {
	/*background-color: #00AECB;
	border: solid 2px #03658E;*/
	width: 100px;
	height: 100px;
	flex: 1 1 auto;
}

/*公法会って何？*/
.ThemeMiddleClass{
	font-size: 2em;
	margin-bottom: 15%;
}

/*概要説明*/
.googleForm {
	margin-left: 10%;
	font-weight: bold;
}
.googleForm:hover {
	color: red;
	font-size: 1.2em;
	font-weight: bolder;
}
.twitter-follow-button {
	margin-right: 10%;
}
.twitter-follow-button:hover {
	transform: scale(1.2);
}
.flex {
	display: flex;
}
.discussion2 {
	flex: 1 1 auto;
	margin-left: 5%;
}
.outline {
	flex: 1 1 auto;
	margin: 0 5%;
	vertical-align: middle;
}

.discussion2Anime {
	animation-name: discussion2Base;
	animation-duration: 1.5s;
	position: relative;
	animation-fill-mode: forwards;
	overflow: hidden;
	opacity: 0;
}

.discussion2Anime::before {
	animation-name: discussion2Anime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: orange;
}
.discussion2ContentAnime {
	animation-name: discussion2Content;
	animation-delay: 0.5s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
	
}

.outlineAnime {
	animation-name: outlineBase;
	animation-duration: 1.5s;
	position: relative;
	animation-fill-mode: forwards;
	overflow: hidden;
	opacity: 0;
}
.outlineAnime::before {
    animation-name: outlineAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: orange;
}

.outlineContent{
	vertical-align: middle;
}

.historyContent{
	vertical-align: middle;
}

.outlineContentAnime {
	animation-name: outlineContentAnime;
	animation-delay: 0.5s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes discussion2Base {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes discussion2Anime {
	0% {
		transform-origin: left;
		transform: scaleX(0);
	}
	50% {
		transform-origin: left;
		transform: scaleX(1);
	}
	50.001% {
		transform-origin: right;
	}
	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}
@keyframes discussion2Content {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes outlineBase {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes outlineAnime {
	0% {
		transform-origin: right;
		transform: scaleX(0);
	}
	50% {
		transform-origin: right;
		transform: scaleX(1);
	}
	50.001% {
		transform-origin: left;
	}
	100% {
		transform-origin: left;
		transform: scaleX(0);
	}
}
@keyframes outlineContentAnime{
    from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*創設者*/
.founderFlex {
	display: flex;

}

.history {
	flex: 1 1 auto;
	margin: 0 5%;
	vertical-align: middle;
}

.okuma {
	flex: 1 1 auto;
	margin-right: 5%;
}
.arikura {
	font-weight: bolder;
}
.arikura:hover {
	color: red;
}
.nagai {
	font-weight: bolder;
}
.nagai:hover {
	color: red;
}
.arai {
	font-weight: bolder;
}
.arai:hover {
	color: red;
}
.urata {
	font-weight: bolder;
}
.asaho {
	font-weight: bolder;
}
.urata:hover {
	color: red;
}
.asaho:hover {
	color: red;
}

/*創設者アニメ*/
.historyAnime {
	animation-name: historyBase;
	animation-duration: 1.5s;
	position: relative;
	animation-fill-mode: forwards;
	overflow: hidden;
	opacity: 0;
}

.historyAnime::before {
	animation-name: historyAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: green;
}
.historyContentAnime {
	animation-name: historyContent;
	animation-delay: 0.5s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
	
}

.okumaAnime {
	animation-name: okumaBase;
	animation-duration: 1.5s;
	position: relative;
	animation-fill-mode: forwards;
	overflow: hidden;
	opacity: 0;
}
.okumaAnime::before {
    animation-name: okumaAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: green;
}

.okumaContentAnime {
	animation-name: okumaContentAnime;
	animation-delay: 0.5s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}
@keyframes historyBase {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes historyAnime {
	0% {
		transform-origin: left;
		transform: scaleX(0);
	}
	50% {
		transform-origin: left;
		transform: scaleX(1);
	}
	50.001% {
		transform-origin: right;
	}
	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}
@keyframes historyContent {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes okumaBase {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes okumaAnime {
	0% {
		transform-origin: right;
		transform: scaleX(0);
	}
	50% {
		transform-origin: right;
		transform: scaleX(1);
	}
	50.001% {
		transform-origin: left;
	}
	100% {
		transform-origin: left;
		transform: scaleX(0);
	}
}
@keyframes okumaContentAnime{
    from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*最近の活動*/

.mainPicture img{
	width: 70%;
}

.activityList {
	padding: 0;
	display: grid;
	grid-template-columns: 30% 5% 30% 5% 30%;
	grid-template-rows: 100%;
	grid-area: 
		"recentBox1 blank recentBox2 blank recentBox3";
}

.blank {
	grid-area: 
		'blank';
}

.recentBox1 {
	grid-area: 
		'recentBox1';
}

.recentBox2 {
	grid-area: 
		'recentBox2';
}

.recentBox3 {
	grid-area: 
		'recentBox3';
}

.rececntActivity {
	width: 100%;
}

/*最新の活動アニメ*/
 
.mainPictureAnime {
	animation-name: mainPictureAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes mainPictureAnime{
	0% {
		transform-origin: right top;
		transform: rotate(-30deg);
		opacity: 0;
	}
	100% {
		transform-origin: right top;
		transform: rotate(0deg);
		opacity: 1;
	}
}

.recentBox1Anime {
	animation-name: recentBox1Anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 0.2s;
	opacity: 0;
}

@keyframes recentBox1Anime{
	0% {
		transform-origin: right top;
		transform: rotate(-30deg);
		opacity: 0;
	}
	100% {
		transform-origin: right top;
		transform: rotate(0deg);
		opacity: 1;
	}
}

.recentBox2Anime {
	animation-name: recentBox2Anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 0.3s;
	opacity: 0;
}

@keyframes recentBox2Anime{
	0% {
		transform-origin: right top;
		transform: rotate(-30deg);
		opacity: 0;
	}
	100% {
		transform-origin: right top;
		transform: rotate(0deg);
		opacity: 1;
	}
}

.recentBox3Anime {
	animation-name: recentBox3Anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 0.4s;
	opacity: 0;
}

@keyframes recentBox3Anime{
	0% {
		transform-origin: right top;
		transform: rotate(-30deg);
		opacity: 0;
	}
	/*n%２セットで１durationだからこれだとカクカクになる*/
	/*50% {
		transform-origin: right top;
		transform: rotate(-15deg);
		opacity: 0.5;
	}*/
	100% {
		transform-origin: right top;
		transform: rotate(0deg);
		opacity: 1;
	}
}

/*例年の活動*/

.plan1Anime {
	animation-name: plan1Anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity: 0;
}
.plan2Anime {
	animation-name: plan2Anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 0.1s;
	opacity: 0;
}
.plan3Anime {
	animation-name: plan3Anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 0.2s;
	opacity: 0;
}
.plan4Anime {
	animation-name: plan4Anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 0.3s;
	opacity: 0;
}
.plan5Anime {
	animation-name: plan5Anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 0.4s;
	opacity: 0;
}
.plan6Anime {
	animation-name: plan6Anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 0.5s;
	opacity: 0;
}
.plan7Anime {
	animation-name: plan7Anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 0.6s;
	opacity: 0;
}
.plan8Anime {
	animation-name: plan8Anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 0.7s;
	opacity: 0;
}
.plan9Anime {
	animation-name: plan9Anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 0.8s;
	opacity: 0;
}
.plan10Anime {
	animation-name: plan10Anime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 0.9s;
	opacity: 0;
}
.beCarefulAnime {
	animation-name: beCarefulAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-delay: 1s;
	opacity: 0;
}

@keyframes plan1Anime {
	0%{
		transform: translateY(100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes plan2Anime {
	0%{
		transform: translateY(100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes plan3Anime {
	0%{
		transform: translateY(100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes plan4Anime {
	0%{
		transform: translateY(100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes plan5Anime {
	0%{
		transform: translateY(100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes plan6Anime {
	0%{
		transform: translateY(100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes plan7Anime {
	0%{
		transform: translateY(100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes plan8Anime {
	0%{
		transform: translateY(100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes plan9Anime {
	0%{
		transform: translateY(100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes plan10Anime {
	0%{
		transform: translateY(100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes beCarefulAnime {
	0%{
		transform: translateY(100px);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}



.main {
	text-align: center;
	position: relative;
	z-index: 1;
	width: 100%;
    background: #fff;
	padding: 50px 0px 0px 0px; 
}
footer {
	background: #fff;
	text-align: center;
}

@media (max-width: 768px){
.mainPicture img{
	height: auto;
	width: 90%;
}

.flex {
	display: block;
}

.founderFlex {
	display: block;
}

}