@charset "utf-8";
/* =======================================

	IndexElements

======================================= */
/* ------------------------------------
	target
------------------------------------ */
.target {
	border-bottom: 1px solid #e0e0e0;
	background: #FFF;
}
.target ul {
	width: 980px;
	margin: 0 auto;
	overflow: hidden;
}
.target ul li {
	width: 163px;
	float: left;
	position: relative;
}
.target ul li:first-child,
.target ul li:last-child {
	width: 164px;
}
.target ul li:first-child:after {
	content: "";
	width: 1px;
	height: 41px;
	background: #e0e0e0;
	position: absolute;
	left: 0;
	top: 10px
}
.target ul li:before {
	content: "";
	width: 1px;
	height: 41px;
	background: #e0e0e0;
	position: absolute;
	right: 0;
	top: 10px
}
.target ul li a {
	padding: 20px 0;
	display: block;
}
.target ul li img {
	width: 68%;
	height: auto;
}
.ban {
	background: #f3f3f3;
}
.ban ul {
	width: 980px;
	margin: 0 auto;
	padding: 20px 0 8px;
	overflow: hidden;
}
.ban ul li {
	width: 236px;
	margin: 0 12px 12px 0;
	float: left;
}
.ban ul li.fourth {
	margin: 0 0 12px 0;
}
.ban ul li img {
	width: 100%;
}

@media only screen and (max-width: 720px) {
	.target {
		border-bottom: none;
	}
	.target ul {
		width: 100%;
	}
	.target ul li {
		width: 50%;
		border-bottom: 1px solid #e0e0e0;
	}
	.target ul li:first-child,
	.target ul li:last-child {
		width: 50%;
	}
	.target ul li:first-child:after {
		content: none;
	}
	.target ul li:before {
		height: 29px;
	}
	.target ul li.odd:before {
		content: none;
	}
	.ban ul {
		width: 90%;
		padding: 20px 0 14px;
	}
	.ban ul li,
	.ban ul li.fourth {
		width: 49%;
		margin: 0 2% 6px 0;
	}
	.ban ul li.odd {
		width: 49%;
		margin: 0 0 6px;
	}
}

/* ------------------------------------
	contentsWrap
------------------------------------ */
.contentsWrap {
	width: 980px;
	margin: 30px auto 50px;
	overflow: hidden;
}

@media only screen and (max-width: 720px) {
	.contentsWrap {
		width: 90%;
		margin: 15px auto 30px;
	}
}

/* ------------------------------------
	news
------------------------------------ */
.ttlArea {
	position: relative;
	overflow: hidden;
}
h2 {
	padding: 0 0 3px;
	text-align: left;
	color: #7b2482;
	font-size: 170%;
	font-weight: bold;
	border-bottom: 1px solid #000;
}
h2 span {
	margin: 0 0 0 10px;
	display: inline-block;
	color: #000;
	font-size: 50%;
	font-weight: normal;
	letter-spacing: 2px;
}
.ttlArea .rss {
	padding: 0 0 0 15px;
	color: #8d8d8d;
	text-decoration: none;
	position: absolute;
	top: 10px;
	right: 10px;
	background: url(../files/icon_rss.png) no-repeat left center;
}
.newsTab {
	height: 45px;
	position: relative;
}
.newsTab li {
	width: 49%;
	position: absolute;
	top: 0;
}
.newsTab li:first-child {left: 0;}
.newsTab li:last-child {right: 0;}
.news {
	width: 400px;
	float: left;
	text-align: left;
}
.news article {
	display: block;
	color: #000;
}
.news article a {
	width: 100%;
	padding: 10px 20px 10px 0;
	display: table;
	color: #000;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	background: url(../files/border-x.png) repeat-x bottom left;
}
.news article.last a {
	background: none;
}
.news article a:before {
	font-family: 'azabu';
	content: "\e901";
	position: absolute;
	top: 43%;
	right: 0;
}
.news article.lab a:before {
	font-family: 'azabu';
	content: "\e902";
	position: absolute;
	top: 43%;
	right: 0;
}
.news article img {
	width: 80px;
	height: 80px;
	margin: 0 30px 0 0;
	display: table-cell;
	vertical-align: middle;
	border: 1px solid #e0e0e0;
}
.news article .newsCont {
	width: 100%;
	display: table-cell;
	vertical-align: middle;
}
.news article .newsCont .date {
	margin: 0 8px 0 0;
	color: #8d8d8d;
	vertical-align: middle;
}
.news article .newsCont .new,
.news article .newsCont .tag {
	margin: 0 8px 0 0;
	padding: 0 7px;
	color: #FFF;
	font-size: 58%;
	display: inline-block;
	vertical-align: middle;
	background: #db3d39;
}
.news article .newsCont .tag {background: #494949;}
.news article.lab .newsCont .tag {background: #E2A719;}
.news article .newsCont .tag.vv {background: #f86ea4;}
.news article .newsCont .tag.va {background: #74b10a;}
.news article .newsCont .tag.gr {background: #1ab4e0;}
.news article .newsCont h3 {
	font-size: 100%;
}
.btnArea a {
	padding: 8px 0;
	display: block;
	text-align: center;
	color: #494949;
	font-size: 86%;
	text-decoration: none;
	background: #f3f3f3;
	border: 1px solid #e0e0e0;
	transition: all 0.3s ease-out;
}
.btnArea a span {
	padding: 0 0 0 25px;
	display: inline-block;
	position: relative;
}
.btnArea span:before {
	content: "\226b";
	position: absolute;
	left: 13px;
}
.newsTab .btnArea a {
	border-top: none;
}

/*PC HOVER*/
@media only screen and (min-width: 720px) {
	body:not(.setTb) .btnArea a:hover {
		color: #7b2482;
		background: #f4eaf7;
		border: 1px solid #f4eaf7;
		opacity: 1 !important;
	}
	body:not(.setTb) .newsTab .btnArea a {
		border-top: none;
	}
}

@media only screen and (max-width: 720px) {
	h2 span {
		font-size: 40%;
		letter-spacing: 0;
	}
	.ttlArea .rss {
		display: none;
	}
	.newsTab li {
		margin: 0;
	}
	.news {
		width: 100%;
		float: none;
	}
	.spDisnon {
		display: none !important;
	}
	.news article img {
		margin: 0 10px 0 0;
	}
	.news article.last a {
		background: url(../files/border-x.png) repeat-x bottom left;
	}
	.btnArea {
		margin: 10px 0 30px;
	}
}

/* ------------------------------------
	instagram
------------------------------------ */
.wrap {
	width: 541px;
	float: right;
	overflow: hidden;
}
#instagramFeed a {
    height: 100%;
    display: block;
    position: relative;
    padding-top: 100%;
    overflow: hidden;
}
.insta {
	min-height: 351px;
	position: relative;
}
.ttlArea .iconInsta {
	padding: 0 38px 0 0;
	color: #8d8d8d;
	font-size: 90%;
	line-height: 2.9;
	text-decoration: none;
	position: absolute;
	top: 5px;
	right: 10px;
	background: url(../files/icon_insta.png) no-repeat right top;
}
.insta ul {
	margin: 20px 0 30px;
	overflow: hidden;
}
.insta ul li {
	width: 110px;
	margin: 0 0 16px 16px;
	padding: 4px;
	float: left;
	border: 1px solid #e0e0e0;
}
.insta ul li:first-child {
	width: 289px;
	margin: 0;
}
.insta .btnArea {
	width: 235px;
	padding: 0;
	border: none;
	position: absolute;
	right: 0;
	bottom: 0
}
.insta li img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.insta li.typeH img {
    width: 100%;
    height: auto;
}
.insta li.typeW img {
    width: auto;
    height: 100%;
}

@media only screen and (max-width: 720px) {
	.wrap {
		width: 100%;
		float: none;
	}
	.ttlArea .iconInsta {
		width: 17px;
		padding: 0;
		text-indent: -9999px;
		position: absolute;
		top: 13px;
		right: 0;
		background: url(../files/icon_insta_sp.png) no-repeat right top;
		background-size: 100% auto;
	}
	.insta ul {
		margin: 20px 0 0;
	}
	.insta ul li,
	.insta ul li:first-child {
		width: 49%;
		margin: 0 2% 5px 0;
	}
	.insta ul li.odd {
		margin: 0 0 5px;
	}
	.insta ul li.disnon {
		display: none;
	}
	.insta .btnArea {
		width: 100%;
		position: static;
	}
}

/* ------------------------------------
	photo movie
------------------------------------ */
.photo,
.movie {
	width: 250px;
	float: left;
	text-align: left;
}
.movie {
	float: right;
}
.photo a,
.movie a {
	display: block;
	overflow: hidden;
	text-decoration: none;
	color: #000;
}
.photo figure {
	width: 100%;
	height: 142px;
	margin: 20px 0 15px 0;
	overflow: hidden;
	border: 1px solid #e0e0e0;
}
.movie .youtube {
	width: 100%;
	height: 142px;
	margin: 20px 0 15px 0;
	overflow: hidden;
	border: 1px solid #e0e0e0;
}
.photo figure img {
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.photo a span.date,
.movie a span.date {
	color: #8d8d8d;
}
.photo h3,
.movie h3 {
	margin: 0 0 7px;
	font-size: 100%;
}

@media only screen and (max-width: 720px) {
	.photo,
	.movie {
		width: 100%;
		float: none;
	}
	.photo figure {
		height: auto;
	}
	.photo figure img {
		position: static;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}
	.movie .youtube {
		width: 100%;
		height: 0;
		margin: 20px 0 15px;
		padding: 30px 0 56.25%;
		position: relative;
		overflow: hidden;

	}
	.movie .youtube iframe {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}

/* ------------------------------------
	pickup
------------------------------------ */
.pickup {
	width: 980px;
	margin: 0 auto;
}
.puWrap {
	padding: 20px 0 0 0;
}
.pickup .large {
	width: 400px;
	margin: 0 0 38px;
	float: left;
	position: relative;
	background: #FFF;
}
.pickup .large figure {
	width: 100%;
	height: 250px;
	overflow: hidden;
}
.pickup .large figure img {
	width: 100%;
	height: auto;
	background: #f1f1ed;
	position: relative;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.pickup .large a,
.pickup .medium a{
	color: #000;
	text-decoration: none;
	display: block;
}
.pickup .large img {
	width: 100%;
	border: 1px solid #e0e0e0;
}
.pickup .large dl {
	margin: -1px 0 0 0;
	padding: 25px;
	text-align: left;
	border: 1px solid #e0e0e0;
}
.pickup .large dt {
	padding: 0 0 11px 20px;
	font-size: 116%;
	position: relative;
}
.pickup .large dt:before {
	font-family: 'azabu';
	content: "\e900";
	color: #7b2482;
	position: absolute;
	top: 0;
	left: 0;
}
.pickup .large dd {
	font-size: 93%;
}
.pickup .medium {
	width: 540px;
	float: right;
}
.pickup .medium li {
	width: 250px;
	margin: 0 40px 38px 0;
	float: left;
	text-align: left;
	background: #FFF;
	position: relative;
}
.pickup .medium li.odd {
	margin: 0 0 38px 0;
}
.pickup .medium li a {
	position: relative;
	border: 1px solid #e0e0e0;
}
.pickup .medium li img {
	width: 100%;
	border-bottom: 1px solid #e0e0e0;
}
.pickup .medium li span {
	width: 250px;
	padding: 10px 20px 10px 40px;
	display: table-cell;
	vertical-align: middle;
	position: relative;
	background: #FFF;
}
.pickup .medium li span:before {
	font-family: 'azabu';
	content: "\e900";
	color: #7b2482;
	position: absolute;
	left: 20px;
}
.pickup .medium li .youtube {
	width: 100%;
	height: 137px;
	border-top: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
}
.pickup .medium li .youtube iframe{
	width: 100%;
	height: 137px;
	vertical-align: text-bottom;
}
.pickup .small {
	clear: both;
}
.pickup .small li {
	width: 230px;
	margin: 0 20px 10px 0;
	float: left;
	text-align: left;
	background: #FFF;
	position: relative;
}
.pickup .small li.fourth {
	margin: 0 0 10px;
}
.pickup .small a{
	width: 100%;
	color: #000;
	text-decoration: none;
	display: table;
	border: 1px solid #e0e0e0;
}
.pickup .small li span {
	padding: 8px 15px 8px 30px;
	display: table-cell;
	vertical-align: middle;
	position: relative;
	background: #FFF;
}
.pickup .small li span:before {
	font-family: 'azabu';
	content: "\e900";
	color: #7b2482;
	position: absolute;
	left: 12px;
}
.shadow a dl,
.shadow > li > a {
	position: relative;
}
.shadow a dl:after,
.shadow > li > a:after {
	content: "";
	width: 100%;
	height: 20px;
	position: absolute;
	left: 0;
	bottom: -20px;
	background: url(../files/shadow.png) no-repeat;
	background-size: 100% auto;
}

@media only screen and (max-width: 720px) {
	.pickup {
		width: 100%;
	}
	.pickup .large {
		width: 100%;
		margin: 0 0 15px;
		float: none;
	}
	.pickup .large:after {
		width: 100%;
	}
	.pickup .large dl {
		padding: 5%;
	}
	.pickup .large dt {
		padding: 0 0 7px 18px;
		font-size: 93%;
	}
	.pickup .large figure {
		height: auto;
	}
	.pickup .large figure img {
		position: static;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
	}
	.pickup .medium {
		width: 100%;
		float: none;
	}
	.pickup .medium li {
		width: 49%;
		margin: 0 2% 10px 0;
	}
	.pickup .medium li.odd {
		margin: 0 0 10px 0;
	}
	.pickup .medium li span {
		padding: 10px 10px 10px 25px;
		font-size: 77%;
	}
	.pickup .medium li span:before {
		font-family: 'azabu';
		content: "\e900";
		color: #7b2482;
		position: absolute;
		left: 10px;
	}
	.pickup .medium li:after {
		width: 100%;
	}
	.pickup .small li,
	.pickup .small li.fourth {
		width: 49%;
		margin: 0 2% 10px 0;
	}
	.pickup .small li.odd {
		margin: 0 0 10px 0;
	}
	.pickup .small li span {
		padding: 8px 5px 8px 20px;
		font-size: 72%;
	}
	.pickup .small li span:before {
		left: 7px;
	}
}

/* ------------------------------------
	WORK OF GRADUATES
------------------------------------ */
.wog {
	margin: 0 0 50px;
	padding: 50px 0 60px;
	background: url(../files/graduate_bg.png);
}
.wog .wogInner {
	width: 980px;
	margin: 0 auto;
}
.wog h2 {
	color: #7b2482;
	font-size: 170%;
	text-align: center;
	border-bottom: none;
}
.wog h2 span {
	margin: 0 0 0 10px;
	display: block;
	color: #000;
	font-size: 50%;
	letter-spacing: 2px;
}
.wog ul li {
	margin: 0 10px;
	background: #FFF;
}
.wog ul li a {
	text-decoration: none;
	display: block;
	color: #FFF;
	font-size: 86%;
}
.wog ul li img {
	width: 100%;
}
.wog ul li span {
	padding: 10px 30px 10px 15px;
	display: block;
	font-weight: bold;
	text-align: left;
	position: relative;
}
.wog ul li span:before {
	font-family: 'azabu';
	content: "\e900";
	color: #FFF;
	position: absolute;
	top: 11px;
	right: 10px;
}
.wog ul li.vm span {background: #e7336e;}
.wog ul li.asb span {background: #b84c97;}
.wog ul li.mt span {background: #00a9ba;}
.wog ul li.fls span {background: #00a560;}
.wog ul li.es span {background: #6fba2c;}

@media only screen and (max-width: 720px) {
	.wog .wogInner {
		width: 100%;
	}
	.wog ul {
		width: 90%;
		margin: 0 auto;
	}
	.wog ul li span {
		padding: 10px 25px 10px 10px;
		font-size: 86%;
	}
}

/* ------------------------------------
	PICKUP LINKS
------------------------------------ */
.puLinks {
	width: 980px;
	margin: 0 auto;
}
.puLinks ul {
	padding: 20px 0;
}
.puLinks ul li {
	width: 314px;
	margin: 0 19px 20px 0;
	float: left;
	text-align: left;
	position: relative;
	background: #FFF;
	border: 1px solid #e0e0e0;
}
.puLinks ul li.third {
	margin: 0 0 20px 0;
}
.puLinks ul li a {
	display: table;
	text-decoration: none;
	color: #000;
	position: relative;
}
.puLinks ul li a:before {
	margin: -10px 0 0;
	font-family: 'azabu';
	content: "\e901";
	color: #7b2482;
	position: absolute;
	top: 50%;
	right: 10px;
	z-index: 10;
}
.puLinks ul li img {
	width: 80px;
	height: 80px;
	display: table-cell;
	vertical-align: middle;
}
.puLinks ul li span {
	width: 100%;
	padding: 15px 45px 15px 15px;
	display: table-cell;
	vertical-align: middle;
	background: #FFF;
	border-left: 1px solid #e0e0e0;
}

@media only screen and (max-width: 720px) {
	.puLinks {
		width: 100%;
	}
	.puLinks ul {
		padding: 20px 0 0;
	}
	.puLinks ul li,
	.puLinks ul li.third {
		width: 100%;
		margin: 0 0 10px 0;
		float: none;
	}
	.puLinks ul li span {
		padding: 15px 30px 15px 15px;
	}
}

/* ------------------------------------
	Opacity Hover
------------------------------------ */
.wideslider a,
.target ul li a,
.ban ul li img,
.news .ttlArea .rss,
.news article a,
.iconInsta,
.insta ul li a,
.photo a,
.movie a,
.pickup .large a,
.pickup .medium li a,
.pickup .small li a,
.wog ul li a,
.wog ul li a span,
.puLinks ul li a {
	transition: all 0.3s ease-out;
}

@media only screen and (min-width: 720px) {
	body:not(.setTb) .wideslider a:hover {
		opacity: 0.7;
	}
	body:not(.setTb) .target ul li a:hover,
	body:not(.setTb) .ban ul li img:hover,
	body:not(.setTb) .news .ttlArea .rss:hover,
	body:not(.setTb) .news article a:hover,
	body:not(.setTb) .iconInsta:hover,
	body:not(.setTb) .insta ul li a:hover,
	body:not(.setTb) .photo a:hover,
	body:not(.setTb) .movie a:hover,
	body:not(.setTb) .pickup .large a:hover,
	body:not(.setTb) .pickup .medium li a:hover,
	body:not(.setTb) .pickup .small li a:hover,
	body:not(.setTb) .wog ul li a:hover,
	body:not(.setTb) .wog ul li a:hover span,
	body:not(.setTb) .puLinks ul li a:hover {
		opacity: 0.6;
	}
}

/* =====================================
	ClearFixElements
===================================== */
.cf:before,
#wrapper:before,
.puWrap:before,
.pickup .medium:before,
.cf:after,
#wrapper:after,
.puWrap:after,
.pickup .medium:after {
	content: " ";
	display: table;
}
.cf:after,
#wrapper:after,
.puWrap:after,
.pickup .medium:after {
	clear: both;
}
.cf,
#wrapper,
.puWrap,
.pickup .medium {
	*zoom: 1;
}