.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: 2.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/friends.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;
	text-align: center;
}
.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%;
}

.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;
	}
}
.main {
	/*text-align: center;*/
	position: relative;
	z-index: 1;
	width: 100%;
    background: #fff;
	padding: 50px 0px 0px 0px; 
}
footer {
	background: #fff;
	text-align: center;
}
.mori {
	text-align: center;
}
.suzuki {
	text-align: center;
}

.kohokaiHover:hover {
	font-size: 1.2em;
	font-weight: 1.5em;
}

@media (max-width: 768px){
.flex {
	display: block;
}

.founderFlex {
	display: block;
}
}