@charset "utf-8";


/* Reset
---------------------------------------------------------- */
#header{
	position: relative;
	z-index: 2;
}
#breadcrumb{
	background: #000;
	position: relative;
	z-index: 2;
}
#breadcrumb ul {
	padding-bottom: 0;
}
#breadcrumb ul li{
	background-image: url(/english/tokyotech2030/img/ico_breadcrumb_bl.png); 
}
body{
	background: #000;
}
#contents {
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#contentsIn {
	padding: 0;
	background: none;
	margin: 0;
	width: 100%;
	overflow: hidden;
	position: relative;
}
#main {
	background: none;
}
h1,h2,h3{
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}
.int-link{
	color:#aaa;
	text-decoration: underline;
}
.int-link:hover{
	color:#fff;
	text-decoration:none;
}


/* -- Clear_fix
-------------------------------------------------------------------------------- */
.cf:after {
	content: "";
	display: block;
	clear: both;
	height: 0!important;
}


/* fade-elm
---------------------------------------------------------- */
.fade-elm{
	overflow: hidden;
	-webkit-transition: all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: all 800ms cubic-bezier(0.215, 0.61, 0.355, 1);
	opacity: 0;
}
.fade-elm.delay{
	-webkit-transition-delay: 200ms;
	transition-delay: 200ms;
}
.fade-elm.show{
	opacity: 1;
}
.fade-elm.disable{
	width: 0% !important;
}
.fade-elm.active{
	width: 100% !important;
}
.fade-wrap{
	position: relative;
}
.fade-inner{
	display: block;
}


/* fade-elmSet -------------------------------- */
.fade-up-wrap > p,
.fade-up-wrap > span,
.fade-up-wrap > h3,
.fade-up-wrap > div{
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	opacity: 0;
	-webkit-transition: all 1500ms cubic-bezier(0.215, 0.61, 0.355, 1) 1000ms;
	transition: all 1500ms cubic-bezier(0.215, 0.61, 0.355, 1) 1000ms;
}
.main-section5 .fade-up-wrap > p{
	-webkit-transition-delay: 500ms;
	transition-delay: 500ms;
}
.fade-up-wrap > p.show,
.fade-up-wrap > span.show,
.fade-up-wrap > h3.show,
.fade-up-wrap > div.show{
	transform: translateY(0px);
	opacity: 1;
}
#main .main-section h2 .inner{
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	opacity: 0;
	-webkit-transition: all 1000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 500ms;
	transition: all 1000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 500ms;
}
#main .main-section h2.active .inner{
	transform: scale(1);
	opacity: 1;
}


/* main-img
---------------------------------------------------------- */
#main-img{
	width: 100%;
	min-width: 1000px;
	min-height: 617px;
	max-height: 907px;
	height: 1000px;
	background: #000;
	overflow: hidden;
	position: relative;
	z-index: 2;
}
#main-img .loader{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
}
#main-img .loader .loader-inner{
	width: 362px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -181px;
	overflow: hidden;
	opacity: 0;
	-webkit-transform: translateY(-20px);
	transform: translateY(-20px);
	-webkit-transition: opacity 1500ms ease-in-out;
	transition: opacity 1500ms ease-in-out;
}
#main-img .loader.active .loader-inner{
	opacity: 1;
}
#main-img .loader.disable .loader-inner{
	opacity: 0;
}
#main-img .loader .logo{
	float: left;
}
#main-img .loader .txt{
	float: right;
	margin-top: 17px;
}
#main-img .main-img-inner{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 1;
	opacity: 0;
}
#main-img.active .main-img-inner{
	opacity: 1;
}
#main-img h1{
	width: 100%;
	min-width: 980px;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
	z-index: 1;
	opacity: 0;
	-webkit-transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#main-img.active h1{
	opacity: 1;
}
#main-img h1 span{
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top:0;
	left: 0;
	text-indent: -9999px;
	overflow: hidden;
}
#main-img h1 .title1:before,
#main-img h1 .title1:after{
	content: "";
	display: block;
	width: 100%;
	height: 50%;
	position: absolute;
	top:0;
	left: 0;
	background: url(/english/tokyotech2030/img/main_title_bl1.png) no-repeat center;
	background-size: contain;
	opacity: 0.4;
	z-index: 2;
}
#main-img h1 .title1:after{
	background-image: url(/english/tokyotech2030/img/main_title1.png);
}
#main-img h1 .title2:before,
#main-img h1 .title2:after{
	content: "";
	display: block;
	width: 100%;
	height: 50%;
	position: absolute;
	bottom:0;
	left: 0;
	background: url(/english/tokyotech2030/img/main_title_bl2.png) no-repeat center;
	background-size: contain;
	opacity: 0.4;
	z-index: 2;
}
#main-img h1 .title2:after{
	background-image: url(/english/tokyotech2030/img/main_title2.png);
}
#main-img h1 .title1:after,
#main-img h1 .title2:after{
	opacity: 0.1;
	z-index: 3;
}
#main-img h1 .title3,
#main-img h1 .title4{
	display: none;
}
#main-img .main-copy{
	width: 980px;
	height: 100%;
	max-height: 740px;
	position: absolute;
	top:0;
	left: 50%;
	margin-left: -490px;
}
#main-img .main-copy p{
	background: url(/english/tokyotech2030/img/main-copy.png) no-repeat;
	background-size: 1000px 1000px;
	text-indent: -9999px;
	overflow: hidden;
	position: absolute;
	opacity: 0;
	-webkit-transition: opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1);
	transition: opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1);
}
#main-img .main-copy p.active{
	opacity: 1;
}
#main-img .main-copy .copy1{
	width: 172px;
	height: 563px;
	top:30px;
	right: 0px;
	-webkit-transition-delay: 1s;
	transition-delay: 1s;
}
#main-img .main-copy .copy2{
	width: 207px;
	height: 291px;
	top: 165px;
	right: 217px;
	-webkit-transition-delay: 3s;
	transition-delay: 3s;
}
#main-img .main-copy .copy3{
	width: 578px;
	height: 150px;
	top: 30px;
	left: 0px;
	-webkit-transition-delay: 5s;
	transition-delay: 5s;
}
#main-img .main-copy .copy4{
	width: 408px;
	height: 140px;
	top: 230px;
	left: 90px;
	-webkit-transition-delay: 7s;
	transition-delay: 7s;
}
#main-img .main-copy .copy5{
	width: 258px;
	height: 54px;
	bottom: 212px;
	left: 0px;
	-webkit-transition-delay: 9s;
	transition-delay: 9s;
}
#main-img .main-copy .copy6{
	width: 742px;
	height: 196px;
	bottom: 0px;
	left: 0px;
	-webkit-transition-delay: 11s;
	transition-delay: 11s;
}
#main-img .main-copy .copy1{
	background-position: -700px 0;
}
#main-img .main-copy .copy2{
	background-position: -450px -200px;
}
#main-img .main-copy .copy3{
	background-position: 0 0;
}
#main-img .main-copy .copy4{
	background-position: 0 -200px;
}
#main-img .main-copy .copy5{
	background-position: 0 -400px;
}
#main-img .main-copy .copy6{
	background-position: 0 -600px;
}
/* min -------------------------------- */
#main-img.min .main-copy .copy1{
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transform-origin: top right;
	transform-origin: top right;
}
#main-img.min .main-copy .copy2{
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transform-origin: top right;
	transform-origin: top right;
	top:145px;
	right: 200px;
}
#main-img.min .main-copy .copy3{
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transform-origin: top left;
	transform-origin: top left;
}
#main-img.min .main-copy .copy4{
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transform-origin: top center;
	transform-origin: top center;
	top: 204px;
	left: 110px;
}
#main-img.min .main-copy .copy5{
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-transform-origin: bottom left;
	transform-origin: bottom left;
}
#main-img.min .main-copy .copy6{
}


/* scroll-down
---------------------------------------------------------- */
.scroll-down {
	display: block;
	font-family: 'Oswald', sans-serif;
	text-align: center;
	font-size: 10px;
	color: #fff;
	position: absolute;
	width: 100px;
	height: 44px;
	bottom: 80px;
	right: 50%;
	margin-right: -400px;
	z-index: 5;
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	-webkit-transition: transform 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: transform 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.scroll-down.active {
	opacity: 1;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}
.scroll-down .icon {
	width: 26px;
	height: 44px;
	display: block;
	border-radius: 13px;
	border: 2px solid #555;
	margin: 0 auto;
	box-sizing: border-box;
	text-indent: -9999px;
	overflow: hidden;
}
.scroll-down:hover .icon {
	background: #555;
}
.scroll-down .icon:before {
	width: 4px;
	height: 4px;
	-webkit-animation: scrollDown 2s ease infinite;
	animation: scrollDown 2s ease infinite;
	position: absolute;
	top: 8px;
	border-radius: 50%;
	background: #fff;
	content: '';
	left: 50%;
	margin-left: -2px
}
.scroll-down .txt {
	position: absolute;
	letter-spacing: 3px;
	bottom: 4px;
	left: 0;
	width: 100%;
}
@-webkit-keyframes scrollDown {
	0% {
		-webkit-transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(6px);
	}
	100% {
		-webkit-transform: translateY(0);
	}
}
@keyframes scrollDown {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(6px);
	}
	100% {
		transform: translateY(0);
	}
}


/* social
---------------------------------------------------------- */
.social {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 30px;
	z-index: 3;
	opacity: 0;
	-webkit-transform: translateY(40px);
	transform: translateY(40px);
	-webkit-transition: transform 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: transform 1000ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.social.active {
	opacity: 1;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
}
.social .social-inner{
	width: 980px;
	margin: 0 auto;
}
.social ul {
	float: right;
	height: 21px;
	overflow: hidden;
}
.social ul li {
	float: left;
	margin: 0;
}


/* report
---------------------------------------------------------- */
#report{
	padding: 40px 0;
	background-color: #1a1a1a;
	background: url(/english/tokyotech2030/img/bg_ptn.png);
	position: relative;
	z-index: 2;
}
#report .report-inner{
	width: 980px;
	margin: 0 auto;
	overflow: hidden;
}
#report h2{
	text-align: left;
	padding: 0;
	border:none;
	background: none;
	font-weight: normal;
	color:#fff;
}
#report h2 .en{
	float: left;
	font-family: 'Oswald', sans-serif;
	font-size: 30px;
	letter-spacing: 0.025em;
	color:#aaa;
}
#report .btn-more{
	width: 280px;
	text-align: center;
	margin: 20px auto;
}
#report .btn-more a {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-size: 18px;
	letter-spacing: 0.05em;
	font-weight: bold;
	padding: 8px 0 11px;
	padding-right: 22px;
	text-decoration: none;
	border: solid 2px #aaa;
	color:#aaa;
	position: relative;
}
#report .btn-more a:hover{
	color:#fff;
	border-color:#fff;
}
#report .btn-more a:before,
#report .btn-more a:after{
	content: "";
	display: block;
	width: 12px;
	height: 2px;
	background: #aaa;
	position: absolute;
	top:50%;
	right: 108px;
	margin-top: -3px;
	-webkit-transition: transform 200ms ease-in-out;
	transition: transform 200ms ease-in-out;
}
#report .btn-more a:before{
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
}
#report .btn-more a.active:before{
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
#report .btn-more a:hover:before,
#report .btn-more a:hover:after{
	background-color:#fff;
}
#report ul{
	margin-left: -20px;
	margin-right: -20px;
	padding: 20px 0;
}
#report li{
	float: left;
	width: 215px;
	margin: 0 20px;
	position: relative;
}
#report li .image{
	background: #fff;
}
#report li.hover .image img{
	opacity: 0.8;
}
#report dt{
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.05em;
	color:#888;
	padding: 10px 0;
	border-bottom: solid 1px rgba(255,255,255,0.2);
	margin-bottom: 10px;
}
#report li.hover dt{
	color:#fff;
}
#report dd{
	text-align: left;
	font-size: 13px;
	line-height: 1.8;
	color:#fff;
}
#report li.hover dd{
	text-decoration: underline;
}
#report .link-wrap{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	overflow: hidden;
}
#report .more{
	display: none;
}
#report .more li{
	opacity: 0;
	-webkit-transform: translateY(50px);
	transform: translateY(50px);
	-webkit-transition: all 800ms cubic-bezier(0.215, 0.61, 0.355, 1) 400ms;
	transition: all 800ms cubic-bezier(0.215, 0.61, 0.355, 1) 400ms;
}
#report .more li.active{
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}


/* bg-img-wrap
---------------------------------------------------------- */
.bg-img-out-wrap {
	width: 100%;
	min-width: 980px;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}
.bg-img-wrap {
	width: 100%;
	min-width: 980px;
	height: 100%;
	box-sizing: border-box;
	position: absolute;
	top:0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}
.bg-img-inner {
	width: 100%;
	height: 100%;
	position: relative;
}
.bg-img-inner.bg-inner1 {
	height: 25%;
}
.bg-img-inner.bg-inner2 {
	height: 25%;
}
.bg-img-inner.bg-inner3 {
	height: 25%;
}
.bg-img-inner.bg-inner4 {
	height: 25%;
}
.bg-img{
	position: absolute;
	overflow: hidden;
	text-indent: -9999px;
	background-position: center;
	background-size: cover;
	box-sizing: border-box;
}
.bg-img:before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: url(/english/tokyotech2030/img/bg_ptn2.png);
	position: absolute;
	top: 0%;
	left: 0%;
	opacity: 0.65;
}
#bg-img2 .bg-img,
#bg-img3 .bg-img{
	box-shadow: 5px 15px 50px rgba(0,0,0,.4);
}
.bg-img1 {
	height: 50%;
	width: 60%;
	right: 0;
	top: 0;
	background-image: url(/english/tokyotech2030/img/bg_img01.jpg);
}
.bg-img2 {
	left: 0;
	top: 0;
	width: 40%;
	height: 40%;
	background-image: url(/english/tokyotech2030/img/bg_img02.jpg);
}
.bg-img3 {
	left: 4%;
	bottom: 38%;
	width: 20%;
	height: 22%;
	background-image: url(/english/tokyotech2030/img/bg_img03.jpg);
}
.bg-img4 {
	width: 20%;
	height: 22%;
	left: 23%;
	bottom: 48%;
	background-image: url(/english/tokyotech2030/img/bg_img04.jpg);
}
.bg-img5 {
	right: 30%;
	top: -44%;
	height: 40%;
	width: 30%;
	background-image: url(/english/tokyotech2030/img/bg_img05.jpg);
}
.bg-img6 {
	left: 0;
	top: -58%;
	width: 20%;
	height: 40%;
	background-image: url(/english/tokyotech2030/img/bg_img06.jpg);
}
.bg-img7 {
	left: 18%;
	top: -70%;
	width: 22%;
	height: 22%;
	background-image: url(/english/tokyotech2030/img/bg_img07.jpg);
}
.bg-img8 {
	left: 15%;
	bottom: 115%;
	height: 34%;
	width: 25%;
	background-image: url(/english/tokyotech2030/img/bg_img08.jpg);
}
.bg-img9 {
	right: 0;
	top: -65%;
	width: 35%;
	height: 35%;
	background-image: url(/english/tokyotech2030/img/bg_img09.jpg);
}
.bg-img10 {
	left: 0;
	top: -115%;
	width: 37%;
	height: 40%;
	background-image: url(/english/tokyotech2030/img/bg_img10.jpg);
}
.bg-img11 {
	left: 33%;
	top: -136%;
	height: 30%;
	width: 34%;
	background-image: url(/english/tokyotech2030/img/bg_img11.jpg);
}
.bg-img12 {
	height: 44%;
	width: 40%;
	right: 0;
	top: -148%;
	background-image: url(/english/tokyotech2030/img/bg_img12.jpg);
}
.bg-img13 {
	height: 37%;
	width: 45%;
	left: 0;
	bottom: 270%;
	background-image: url(/english/tokyotech2030/img/bg_img13.jpg);
}
.bg-img14 {
	left: 37%;
	top: -228%;
	width: 29%;
	height: 26%;
	background-image: url(/english/tokyotech2030/img/bg_img16.jpg);
}
.bg-img15 {
	left: 45%;
	bottom: 287%;
	height: 20%;
	width: 20%;
	background-image: url(/english/tokyotech2030/img/bg_img14.jpg);
}
.bg-img16 {
	right: 0;
	top: -185%;
	height: 37%;
	width: 35%;
	background-image: url(/english/tokyotech2030/img/bg_img15.jpg);
}


/* main
---------------------------------------------------------- */
#main{
	float: none;
	width: 980px;
	margin: 0 auto;
	padding: 80px 0 80px;
	position: relative;
	z-index: 1;
}
/* main-lead -------------------------------- */
#main .main-lead{
	margin-top: 0 !important;
	margin-bottom: 200px;
	width: 780px;
}
#main .main-lead .main-section-inner{
	padding-top: 35px;
}

/* main-section -------------------------------- */
#main .main-section{
	margin-top: 120px;
	position: relative;
}
#main .main-section-inner{
	background: #000;
	padding: 45px 40px 40px;
	box-sizing: border-box;
	position: relative;
}
#main .main-section h2{
	font-family: 'Oswald', sans-serif;
	font-size: 34px;
	font-weight: normal;
	letter-spacing: 0.025em;
	color:#000;
	position: absolute;
	top:-50px;
	left: -20px;
	display: inline-block;
	background: linear-gradient(-30deg, #aaa 0%, #ccc 100%);
	z-index: 2;
}
#main .main-section h2 .inner{
	display: block;
	padding: 8px 17px 10px 20px;
}
#main .main-section h3{
	font-family: 'Oswald', sans-serif;
	font-size: 28px;
	line-height: 1.6;
	font-weight: 500;
	color:#aaa;
	letter-spacing: 0.025em;
	margin-top: 5px;
	margin-bottom: 25px;
}
#main .main-section p + h3{
	margin-top: 50px;
}
#main .main-section p{
	color:#fff;
	line-height: 2.4;
	margin-top: 2.4em;
}
#main .main-section h3 + p,
#main .main-section p:first-child{
	margin-top: 0;
}
#main .main-section p.note{
	font-size: 12px;
	line-height: 1.9;
	color:#ccc;
	margin-top: 10px;
}
/* main-section1 -------------------------------- */
#main .main-section1{
	width: 790px;
	margin-right: -40px;
	margin-left: auto;
}
/* main-section2 -------------------------------- */
#main .main-section2{
	width: 385px;
}
/* main-section3 -------------------------------- */
#main .main-section3{
	width: 525px;
	margin-right: 0px;
	margin-left: auto;
	margin-top: -150px;
}
/* main-section4 -------------------------------- */
#main .main-section4{
	width: 820px;
}
#main .main-section4 .main-section-inner{
	padding-bottom: 107px;
}
#main .main-section4 .wmin{
	width: 490px;
}
#main .main-section4 .profile{
	margin-top: 0px;
	position: absolute;
	right: 40px;
	bottom: 40px;
}
#main .main-section4 .profile-inner{
	float: right;
}
#main .main-section4 .profile dl{
	float: left;
	color: #fff;
	font-size: 12px;
	line-height: 1.8;
	font-weight: bold;
	margin-right: 20px;
	padding-top: 158px;
}
#main .main-section4 .profile .image{
	float: right;
	margin: 0;
}
/* main-section5 -------------------------------- */
#main .main-section5{
	width: 180px;
	margin-left: auto;
	margin-right: 0;
}
#main .main-section5 .image{
}