@charset "UTF-8";
/*
Theme Name: philosophy
*/
/*===================================
　SPここから
===================================*/
@media (max-width: 798px ){

/*  movieBlock philosophyMovie
===================================*/
.movieBlock.philosophyMovie{
	position: relative;
	color: #fff;
	overflow: hidden;
	width: 100%;
	height: 80vh;
	min-height: 520px;
	box-sizing: border-box;
}
.movieBlock.philosophyMovie>video{
/*	height: 80vh;
	margin: auto;
	width: auto;*/
	min-height: 520px;
	height: 200%;
	margin: auto;
	width: auto;
}
.movieBlock.philosophyMovie .catchBlock .leftPlev,
.movieBlock.philosophyMovie .catchBlock .rightNext{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 20px;
	width: 20px;
	border-bottom: solid 2px #fff;
	border-right: solid 2px #fff;
	z-index: 10;
}
.movieBlock.philosophyMovie .catchBlock .leftPlev{
	left: -20px;
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}
.movieBlock.philosophyMovie .catchBlock .rightNext{
	right: -20px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.movieBlock.philosophyMovie .catchBlock{
	top: 0;bottom: 0;
	left: 0;right: 0;
	margin: auto;
	display: inline-block;
	height: 100%;
	width: 80%;
	position: absolute;
}
.movieBlock.philosophyMovie .catchTit{
	margin-bottom: 25px;
	font-size: 13px;
	border-bottom: solid 1px #fff;
	display: inline-block;
	padding-bottom: 3px;
}
.movieBlock.philosophyMovie .catchJa{
	margin: 15px auto 0;
	line-height: 1.6;
	font-size: 13px;
	letter-spacing: 0px;
}
.movieBlock.philosophyMovie .aboutCred{
	margin: 15px auto 0;
    line-height: 1.3;
    font-size: 12px;
    text-align: left;
    letter-spacing: 0px;
}
.movieBlock.philosophyMovie .enname{
	font-size: 15px;
	margin-top: 10px;
}

.cred_button {
	width: 91px;
	margin-top: 15px;
}

/*  hiatoryTitBlock
===================================*/
.hiatoryTitBlock{
	text-align: center;;
	margin: 50px auto 60px;
	width: 90%;
    max-width: 400px;
}
.hiatoryTitBlock>.hiatoryTit{
	font-size: 20px;;
	line-height: 1.5;
}
.hiatoryTitBlock>.txt{
	margin-top: 27px;
	font-size: 14px;
	line-height: 2;;;;
	text-align: justify;
}
/*  historyEventBlock
===================================*/
#second .historyEventBlock{
	background: url("../img/sp_philosophy01.jpg") right bottom no-repeat;
	background-size: cover;
}
.historyEventBlock{
	height: 720px;
	width: 100%;
	position: relative;
}
#third .historyEventBlock{
	background: url("../img/sp_philosophy02.jpg") center center no-repeat;
	background-size: cover;
}
#forth .historyEventBlock{
	background: url("../img/sp_philosophy03.jpg") center center no-repeat;
	background-size: cover;
}
#fifth .historyEventBlock{
	background: url("../img/sp_philosophy04.jpg") center center no-repeat;
	background-size: cover;
}
#sixth .historyEventBlock{
	background: url("../img/sp_philosophy05.jpg") center center no-repeat;
	background-size: cover;
}
#sixth{
	margin-bottom: 60px;
}
.historyEventBlock>.historyTxt{
	width: 85%;
	position: absolute;
	top: 30px;
	left: 10%;
	color: #fff;
}
/*.historyEventBlock:nth-child(2n)>.historyTxt{
	right: 100px;
	left: auto;
	width: 482px;
}*/
.historyEventBlock>.historyTxt .year{
	font-size: 16px;
}
.historyEventBlock>.historyTxt .tit{
	font-size: 28px;
	display: inline-block;
	position: relative;
	margin-top: 5px;
}
.historyEventBlock>.historyTxt .subTitJa{
	margin-top: 7px;
	line-height: 1.2;
	font-size: 14px;
	width: 90%;
}
.historyEventBlock>.historyTxt .txt{
	margin-top: 8px;
	line-height: 1.6;
	font-size: 13px;
	width: 95%;
	text-align: justify;
}
/*  テキスト切り替わり
===================================*/
.spfadeText{
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	visibility: hidden;
	opacity: 0;
	-webkit-transition: 200ms ease-out;
	transition: 200ms ease-out;
}
.spfadeText.visible{
	visibility: visible;
	opacity: 1;
}
.spfadeText.spfadeout{
	visibility: hidden;
	opacity: 0;
	-webkit-transition: 200ms ease-out;
	transition: 200ms ease-out;
}
.spfadeText.spfadein{
	visibility: visible;
	opacity: 1;
	-webkit-transition: 200ms ease-out;
	transition: 200ms ease-out;
}


}