@charset "utf-8";

#container{
	margin-top: 0;
}
/*---------------
labomainVisual
----------------*/
.labomainVisual{
	background: url(../imgs/bg-main.png) no-repeat center bottom;
	background-size: cover;
	padding:90px 0 0;
}
/*labomainVisual-inner*/
.labomainVisual-inner{
	margin-bottom: 60px;
}
.labomainVisual-inner .labomainVisual-txt{
	width: 31.048387096774192%;
	text-align: center;
	position: relative;
}
.labomainVisual-inner .labomainVisual-txt .move02{
	width: 23.376623376623375%;
	position: absolute;
	right: 10px;
	top: 17px;
	animation: moveB 1.3s ease-in-out infinite alternate;
}
@keyframes moveB {
    0% { transform: rotate( 1deg) translateY( 0px); }
  100% { transform: rotate( -1deg) translateY( 5px); }
}
.labomainVisual-inner .labomainVisual-txt .move03{
	width: 275px;
	margin: 35px auto 0;
	padding-top: 25px;
	position: relative;
}
.labomainVisual-inner .labomainVisual-txt .move03 .move03-move{
	width: 40.72727272727273%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	margin:auto;
	z-index: 2;

	animation: moveC 4s ease-in-out infinite alternate;
}
@keyframes moveC {
    0% {  transform:rotateY(0deg); }
  100% {  transform:rotateY(360deg); }
}
.labomainVisual-inner .labomainVisual-img{
	width: 53.145161290322584%;
	margin-left:5.32258064516129%;
}
.labomainVisual-inner .labomainVisual-img .mvimg-move{
	width: 61.305007587253414%;
	position: absolute;
	right: 7.587253414264036%;
	top: 0;
	animation: moveD 4s ease-in-out infinite alternate;
}
@keyframes moveD {
    0% { transform: rotate( -3deg); }
  100% { transform: rotate( 10deg); }
}
/*labomainVisual-about*/
.labomainVisual-about{
	padding-bottom: 75px;
	position: relative;
	z-index: 3;
}
.labomainVisual-about .labomainVisual-about-txt{
	width: 52.41935483870967%;
	padding: 0 0 0 5.030769230769232%;
	box-sizing: border-box;
	margin: 10px 0 0 4.838709677419355%;
	position: relative;
}
.labomainVisual-about .labomainVisual-about-txt .enTtl{
	font-size: 20px;
	color: #a1cae4;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	position: absolute;
	left: 0;
	top: 10px;
}
.labomainVisual-about .labomainVisual-about-img{
	width: 30.88709677419355%;
	margin-left:5.64516129032258%;
	position: absolute;
	right: 4.838709677419355%;
	/*bottom: -20px;*/
}
.labomainVisual-about .labomainVisual-about-img-inner{
	position: relative;
}
.labomainVisual-about .labomainVisual-about-img .eyebrows-move{
	position: absolute;
	left: 0;
	top:50.338600451467265%;
	z-index: 2;

	animation: eyebrows 0.8s ease-in-out infinite alternate;
}
@keyframes eyebrows {
    0% { transform:translateY( 0px); }
  100% { transform:translateY( 2px); }
}
.labomainVisual-about .labomainVisual-about-img .mouth-move{
	position: absolute;
	left: 0;
	top:65.46275395033861%;
	z-index: 2;

	animation: mouth 0.8s ease-in-out infinite alternate;
}
@keyframes mouth {
    0% {  transform:scaleY(1); }
  100% {  transform:scaleY(0.5); }
}
.labomainVisual-about .labomainVisual-about-img .icon{
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: .4s;
}
.labomainVisual-about .labomainVisual-about-img.aos-animate .icon01{
	-webkit-animation: iconmove 1.0s ease 1.0s 1 forwards;/*表示時間+start時間*/
	animation: iconmove 1.0s ease 1.0s 1 forwards;/*表示時間+start時間*/	
}
.labomainVisual-about .labomainVisual-about-img.aos-animate .icon02{
	-webkit-animation: iconmove 1.0s ease 1.1s 1 forwards;/*表示時間+start時間*/
	animation: iconmove 1.0s ease 1.1s 1 forwards;/*表示時間+start時間*/
}
.labomainVisual-about .labomainVisual-about-img.aos-animate .icon03{
	-webkit-animation: iconmove 1.0s ease 1.2s 1 forwards;/*表示時間+start時間*/
	animation: iconmove 1.0s ease 1.2s 1 forwards;/*表示時間+start時間*/
}
.labomainVisual-about .labomainVisual-about-img.aos-animate .icon04{
	-webkit-animation: iconmove 1.0s ease 1.3s 1 forwards;/*表示時間+start時間*/
	animation: iconmove 1.0s ease 1.3s 1 forwards;/*表示時間+start時間*/
}
.labomainVisual-about .labomainVisual-about-img.aos-animate .icon05{
	-webkit-animation: iconmove 1.0s ease 1.4s 1 forwards;/*表示時間+start時間*/
	animation: iconmove 1.0s ease 1.4s 1 forwards;/*表示時間+start時間*/
}
.labomainVisual-about .labomainVisual-about-img.aos-animate .icon06{
	-webkit-animation: iconmove 1.0s ease 1.5s 1 forwards;/*表示時間+start時間*/
	animation: iconmove 1.0s ease 1.5s 1 forwards;/*表示時間+start時間*/
}
.labomainVisual-about .labomainVisual-about-img.aos-animate .icon07{
	-webkit-animation: iconmove 1.0s ease 1.6s 1 forwards;/*表示時間+start時間*/
	animation: iconmove 1.0s ease 1.6s 1 forwards;/*表示時間+start時間*/
}
@-webkit-keyframes iconmove {
	100% {
	    opacity: 1;
	}
}
@keyframes iconmove {
	100% {
	    opacity: 1;
	}
}
@media only screen and (max-width:736px) {
	.labomainVisual{
	    padding: 50px 0 0;
	}
	.labomainVisual-inner .labomainVisual-txt .move03 {
		width: 80%;
	}
	/*labomainVisual-inner*/
	.labomainVisual-inner{
		padding:0 20px;
		box-sizing: border-box;
	}
	.labomainVisual-inner .labomainVisual-txt{
		width: 100%;
	}
	.labomainVisual-inner .labomainVisual-img{
		width:100%;
		margin-left:0;
		margin-top: 30px;
	}
	/*labomainVisual-about*/
	.labomainVisual-about{
		padding-bottom: 0;
	}
	.labomainVisual-about .labomainVisual-about-txt{
		width: 100%;
		padding-left: 13%;
		margin: 10px 0 0 0;
	}
	.labomainVisual-about .labomainVisual-about-img{
		width: 100%;
		margin-left:0;
		margin-top: 30px;
		position: static;
	}	
}

/*---------------
chiefArea
----------------*/
.chiefArea{
}
.chiefArea .wrap1240{
	position: relative;
	padding-bottom: 30px;
}
.chiefArea .chiefArea-inner{
	width: 97.58064516129032%;
	background: #004088;
	color: #fff;
	padding:30px;
	box-sizing: border-box;
}
.chiefArea .chiefArea-inner .enTtl{
	width: 29px;
	height: 100%;
	font-size: 20px;
	line-height: 29px;
	color: #ffea00;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	position: absolute;
	left: 0;
	top: 0;
}
.chiefArea .chiefArea-inner .enTtl:before{
	content: '';
	width: 1px;
	height: 100%;
	background: #5186b7;
	position: absolute;
	left: 50%;
	bottom: 0;
	-webkit-transform: translateX(-50%); /* Safari用 */
	transform: translateX(-50%);
}
.chiefArea .chiefArea-inner .enTtl:after{
	content: '';
	width: 29px;
	height: 32px;
	background: url(../imgs/img-icon.png) no-repeat;
	position: absolute;
	left: 0;
	bottom: 3px;
}
.chiefArea .chiefArea-inner .enTtl p{
	display: inline-block;
	background: #004088;
	padding-bottom: 5px;
	position: relative;
	z-index: 2;
}
.chiefArea-inner .chiefArea-greeting{
	width: 66.08695652173913%;
	padding-left: 4.6%;
	padding-top: 30px;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}
.chiefArea-inner .chiefArea-greeting .headline{
	color: #a2cbe5;
}
.chiefArea-inner .chiefArea-greeting .chiefArea-greeting-date{
	margin-top: 40px;
	font-family: 'Dancing Script', cursive;
	color: #8097b2;
}
.chiefArea-inner .chiefArea-profile{
	width: 30%;
	margin-left: 3.3057851239669422%;
	padding-top: 30px;
	padding-left: 4.6%;
	box-sizing: border-box;
	position: relative;
}
.chiefArea-inner .chiefArea-profile ul li{
	font-size: 12px;
	text-indent: -1.2em;
	padding-left: 1.2em;
}
.chiefArea-inner .chiefArea-profile ul li:before{
	content: '◆';
	color: #a2cbe5;
	font-size: 10px;
	margin-right: 3px;
}
.chiefArea-inner .chiefArea-profile ul li:nth-child(n+2){
	margin-top: 3px;
}
/*chiefArea-bg*/
.chiefArea-bg{
	width: 97.58064516129032%;
	height: 92%;
	background: rgba(0,64,136,.2);
	position: absolute;
	/*left: 2.4193548387%;
	top: 30px;*/
}
@media only screen and (max-width:736px) {
	.chiefArea{
	}
	.chiefArea .chiefArea-inner{
		padding:30px 20px;
	}
	.chiefArea .chiefArea-inner .enTtl{
		font-size: 16px;
	}
	.chiefArea-inner .chiefArea-greeting{
		width: 100%;
		padding-left: 18%;
	}	
	.chiefArea-inner .chiefArea-greeting .chiefArea-greeting-date{
		margin-top: 20px;
	}
	.chiefArea-inner .chiefArea-profile{
		width: 100%;
		padding: 10px 0 30px 18%;
		margin: 50px 0 0;
	}
	/*chiefArea-bg*/
	.chiefArea-bg{
		width: 86%;
		height: 96%;
	}
}

/*---------------
diaryArea
----------------*/
.diaryArea{
	margin-top: 60px;
}
.diaryArea .wrap1240{
	position: relative;
}
.diaryArea .wrap1240:before{
	content: '';
	width: 100%;
	height: 100%;
    background: url(../assets/imgs/bg-dashed.png) repeat-y center top;
    position: absolute;
    left: 0;
    top: 65px;
}
.diaryArea-ttl{
	width: 15.6%;
	margin:0 auto;
	position: relative;
	z-index: 2;
}
/*diaryArea-list*/
.diaryArea-list{
}
.diaryArea-list .diaryArea-list-clm{
	width: 46%;
	margin-right: 8%;
}
.diaryArea-list .diaryArea-list-clm:nth-child(even){
	margin-right: 0;
}
.diaryArea-list .diaryArea-list-clm a{
	cursor: pointer;	
}

/*diary-ph*/
.diary-ph{
	position: relative;
}
.diary-ph .caption{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 60px;
	margin:auto;
	text-align: center;
	z-index: 3;
}
.diary-ph .diary-ph-ttl{
	color:  #fff;
	font-size: 20px;
	line-height: 1;
	font-weight: 300;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
	margin:auto;
	text-align: center;
	z-index: 5;
}
.diary-ph .diary-ph-ttl strong{
	display: block;
	font-size: 80px;
	-webkit-animation: diaryTtl-back 4.0s ease 0s 1 forwards;/*表示時間+start時間*/
	animation: diaryTtl-back 4.0s ease 0s 1 forwards;/*表示時間+start時間*/
}
@keyframes diaryTtl-back {
    0% {
	    transform: rotateY(360deg);
	}
	100% {
	    transform: rotateY(-360deg);
	}
}
.diaryArea-list .diaryArea-list-clm:hover .diary-ph .diary-ph-ttl strong{
	-webkit-animation: diaryTtl 4.0s linear infinite;
    animation: diaryTtl 4.0s linear infinite;
}
@keyframes diaryTtl {
    0% {
	    transform: rotateY(-360deg);
	}
	100% {
	    transform: rotateY(360deg);
	}
}
.diary-ph .diary-ph-frame{
	position: relative;	
	z-index: 4;
}
.diary-ph .diary-ph-msk{
	width: 82%;
	height: 82%;
	background: rgba(3,85,156,.3);
	border-radius: 50%;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
	margin:auto;
	text-align: center;
	z-index: 3;
	transition: 1s;
}
.diaryArea-list .diaryArea-list-clm:hover .diary-ph .diary-ph-msk{
	width: 72%;
	height: 72%;	
}
.diary-ph .diary-ph-img{
	width: 82%;
	height: 82%;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
	margin:auto;
	text-align: center;
}
.diary-ph .diary-ph-img span{
    display: block;
    min-width: 100%;
    min-height: 100%;
    border-radius: 50%;
    width:100%;
    height:100px;
    position: relative;
    overflow: hidden;
}
.diary-ph .diary-ph-img span img{
	width: auto;
	height: 100%;
	max-width: inherit; /* 初期状態にリセット */
	position: absolute;
	top:50%; /* または200px(heightの半分) */
	left: 50%; /* この値を変更すると左右に位置をずらせる */
	transform: translate(-50%, -50%);
}
.diary-ph .diary-ph-img.right span img{
	left: 10%;
}
.diary-ph .diary-ph-img.left span img{
	left: 90%;
}

/*diary-txt*/
.diary-txt{}
.diary-txt .diary-txt-date{
	display: inline-block;
	font-size: 16px;
	line-height: 1;
	margin:8px 0;
}
.diary-txt .diary-txt-date .Roboto {
	font-weight: bold;
}
.diary-txt .diary-txt-date.diary .Roboto:before{
	content: '研究日誌';
	font-size: 12px;
	padding:6px 0.9em 4px 1.2em;
	margin-right: 10px;
	background: #ffeb00;
	border-radius: 3px;
	letter-spacing: 0.1em;
}
.diary-txt .diary-txt-text{
	line-height: 2.8;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 3.5em;
}
.diary-txt .diary-txt-btn{
	font-size: 12px;
	font-weight: 500;
	color: #004088;
	text-align: right;
	position: relative;
}
.diary-txt .diary-txt-btn i{
	font-size: 14px;
	margin-left:5px;
	vertical-align: text-bottom;
}
.diaryArea-list .diaryArea-list-clm:hover .diary-txt-btn .spinner-big {
	opacity: 1;
}
@media only screen and (max-width:736px) {	
	.diaryArea .wrap1240:before{
	    background: url(../assets/imgs/bg-dashed_sp.png) repeat-y center top;
	    top: 75px;
	}
	.diaryArea-ttl{
		width: 50%;
	}
	/*diaryArea-list*/
	.diaryArea-list{
		margin-top: 30px;
	}
	.diaryArea-list .diaryArea-list-clm{
		width: 100%;
		margin-right: 0;
		margin-bottom: 4em;
	}
	.diaryArea-list .diaryArea-list-clm:last-child{
		margin-bottom: 0;
	}
	/*diary-ph*/
	.diary-ph{
		margin-bottom: 20px;
	}
	.diary-ph .caption{
		bottom: 45px;
	}
	.diary-txt .diary-txt-date{
		font-size: 14px;
		margin:5px 0 5px;
	}
	.diary-txt .diary-txt-text{
		font-size: 12px;
		margin-bottom: 2em;
	}
		
}

/*---------------
newsArea
----------------*/
.newsArea{
	margin-top: 90px;
	padding: 100px 0 0;
	background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,0.9),rgba(255,255,255,1));
}
/*surfing*/
.surfing{
	display: inline-block;
	margin-left: 80%;
	animation: moveD 2.5s ease-in-out infinite alternate;
}
@keyframes moveD {
    0% { transform: rotate( -10deg); }
  100% { transform: rotate( 5deg); }
}

.newsArea .newsArea-ttl{
	width: 10.483870967741936%;
	margin:100px auto 40px;

	animation: newsTtl 4s ease-in-out infinite alternate;
}
@keyframes newsTtl {
    0% {  transform:rotateY(360deg); }
  100% {  transform:rotateY(0deg); }
}
/*newsArea-inner*/
.newsArea-inner{
	width: 88.70967741935483%;
	padding:50px 4.545454545454546%;
	box-sizing: border-box;
	margin:70px auto;
	color: #fff;
	background-size: 190% auto;
	filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2));
	position: relative;
}
.newsArea-inner:before {
	content: 'DJ:GEORGE COCKLE & 渡辺麻耶';
	background: #fff;
	color: #004088;
	font-weight: bold;
	padding: 10px 20px;
	border-radius: 6px 6px 0 0;
	position: absolute;
	left: 0;
	top: -41px;
}
/*newsArea-box01*/
.newsArea-img{
	width: 40%;
	margin-left:4%;
}
.newsArea-txt{
	width: 56%;
}
.newsArea-txt .headline{
	color: #a2cbe5;
	margin-bottom: 30px;
}
/*newsArea-box02*/
.newsArea-box02{
	margin-top: 30px;
	padding-top: 30px;
	border-top: solid 1px #2d5f97;
	position: relative;
	overflow: hidden;
}
.newsArea-date{
	float: left;
	font-size: 16px;
	font-style: italic;
}
.newsArea-date span{
	color: #a2cbe5;
}
.newsArea-btn{
	float: right;
	font-size: 18px;
	font-weight: 400;
	position: relative;
}
.newsArea-btn small{
	font-size: 14px;
}
.newsArea-btn a{
	color: #fdf621;	
}
.newsArea-btn i{
	margin-left:5px;
	vertical-align: text-bottom;
}
.newsArea-btn:hover .spinner-big{
	opacity: 1;
}

@media only screen and (max-width:736px) {
	.newsArea{
		margin-top: 50px;
		padding: 60px 0 0;
	}
	/*surfing*/
	.surfing {
		margin-left: 70%;
	}
	.newsArea .newsArea-ttl{
		width: 40%;
		margin:50px auto 40px;
	}
	/*newsArea-inner*/
	.newsArea-inner{		
		padding:30px 20px;
		background-size: cover;
	}
	.newsArea-inner:before {
		width: 100%;
		text-align: center;
		font-size: 13px;
		padding: 12px 10px 10px;
		box-sizing: border-box;
	}
	/*newsArea-box01*/
	.newsArea-img{
		width: 100%;
		margin-left:0;
		margin-bottom: 20px;
	}
	.newsArea-txt{
		width: 100%;
	}
	.newsArea-txt .headline{
		margin-bottom: 20px;
	}
	/*newsArea-box02*/
	.newsArea-date{
		font-size: 14px;
	}
	.newsArea-date span{
		display: block;
		margin-bottom: 5px;
	}
	.newsArea-btn{
		font-size: 14px;
		margin-top: 30px;
	}
	.newsArea-btn small{
		font-size: 12px;
	}
}



/*---------------
aos
----------------*/

/*about-slideUp*/
[data-aos="about-slideUp"]{
    opacity: 0;
    bottom: -50px;
}
[data-aos="about-slideUp"].aos-animate{

	-webkit-animation: about-slideUp 1s ease 0.7s 1 forwards;/*表示時間+start時間*/
	animation: about-slideUp 1s ease 0.7s 1 forwards;/*表示時間+start時間*/
}
@-webkit-keyframes about-slideUp {
	100% {
	    opacity: 1;
	    bottom: -20px;
	}
}
@keyframes about-slideUp {
	100% {
	    opacity: 1;
	    bottom: -20px;
	}
}

/*slideBg*/
[data-aos="slideBg"]{
	left: 0;
	top: 0;
}
[data-aos="slideBg"].aos-animate{
	-webkit-animation: slideBg 0.8s ease 1s 1 forwards;/*表示時間+start時間*/
	animation: slideBg 0.8s ease 1s 1 forwards;/*表示時間+start時間*/
}
@-webkit-keyframes slideBg {
	100% {
	    left: 2.4193548387%;
		top: 30px;
	}
}
@keyframes slideBg {
	100% {
	    left: 2.4193548387%;
		top: 30px;
	}
}
@media only screen and (max-width:736px) {
	[data-aos="slideBg"]{
		left: 20px;
	}
	@-webkit-keyframes slideBg {
		100% {
		    left: 10%;
			top: 30px;
		}
	}
	@keyframes slideBg {
		100% {
		    left: 10%;
			top: 30px;
		}
	}
}