@charset "utf-8";

/* -----------------------------------------------------------
	Site Name: sakushin-univ web site
	Author: Yamazen Communications co.,ltd.
	Comment: top style
	Since2014
----------------------------------------------------------- */
	
/*Index
	01.header
	03.slideshow
	03.navi
	04.top-bnr
	05.side
	06.contents
	07.sjc

----------------------------------------------------------- */


/* 01.header
----------------------------------------------------------- */
@media only print, only screen and (min-width: 641px){
#header{
	position: relative;
	height:280px;
	z-index:100;
}
#header #logo{
	position: absolute;
	width:180px;
	height:256px;
	margin-left:40px;
	padding:15px 0;
	text-align:center;
	background:url(/common/img/bk_white.png) repeat;
	z-index:120;
}
#sjc #header #logo{height:255px;}
#header #logo a#university{
	width:141px;
	height:185px;
	margin:0 auto;
	background:url(/common/img/logo_univ.png) no-repeat center top;
	background-size:100% auto;
}
#header #logo a#j_college{
	width:112px;
	height:36px;
	margin:10px auto;
	background:url(/common/img/logo_jc.png) no-repeat center top;
	background-size:100% auto;
}
#sjc #header #logo a#j_college{
	width:144px;
	height:204px;
	margin:0 auto;
	background:url(/sjc/common/img/logo_jc.png) no-repeat center top;
	background-size:100% auto;
}
#sjc #header #logo a#university{
	width:98px;
	height:17px;
	margin:10px auto;
	background:url(/sjc/common/img/logo_univ.png) no-repeat center top;
	background-size:100% auto;
}
#header #h-tools{
	float: right;
	margin:10px 40px 5px 260px;
}
}

/* sub link */
#header #h-navi li {
    display: inline-block;
    margin: 0 5px;
    color: white;
    padding-left: 10px;
    font-size: 12px;
    background: url(/common/img/arrow07.png) no-repeat left 0.5em;
    text-shadow: 0 0 5px #000, 0 0 10px #000;
}
#header #h-navi li a {
    color: white;
}



/* 02.slideshow
----------------------------------------------------------- */
.bx-wrapper{margin: 0 auto;}
#slider li{width: 100%!important;}
#slider li a,
#slider li span{
	display: block;
	width: 100%!important;
	padding: 0 0 66.666%;
	background-size: 100% auto!important;
}
.bx-wrapper .bx-viewport{
	border: none;
	box-shadow: none;
	left: 0;
	transform: none;
}
#sjc .bx-wrapper .bx-pager.bx-default-pager a{
	background: #dc82a0;
}
#sjc .bx-wrapper .bx-pager.bx-default-pager a:hover,
#sjc .bx-wrapper .bx-pager.bx-default-pager a.active{
	background: #ff6400;
}
#pickup{
	padding: 20px 0;
	color: #fff;
	background: url(/common/img/bg-black.png) repeat 0 0;
}
#sjc #pickup{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: url(/common/img_sjc/bg-gnavi.png) repeat 0 0;
}
#pickup h2{margin: 0 0 10px;}
#pickup a{color: #fff;}
#pickup .name{
	font-size: 16px;
	line-height: 1.5;
	background: url(/common/img/arrow07.png) 15px 7px no-repeat;
}
#pickup .name span{display: block;font-size: 12px;}
@media only screen and (max-width: 640px){
#pickup      {padding: 10px 0;border-bottom: 1px solid #fff;border-radius: 0px!important;}
#sjc #pickup {padding: 1px 0 10px;}
#pickup p    {padding: 0 10px;}
#pickup .name{padding: 0 10px 0 25px;}
#pickup h2   {text-align:center;}
#pagedown    {display: none;}
}
@media only print, only screen and (min-width: 641px){
#slideshow{
	position: relative;
	top: -280px;
	min-width:1024px;
	margin: 0 0 -276px;
	z-index:1;
}
#slider li a,
#slider li span{
	min-width:1200px!important;
}

#pickup{
	position:absolute;
	left:40px;
	top:50%;
	width: 370px;
	margin-top: -103px;
	z-index: 100;
}
#pickup p{padding: 0 30px;}
#pickup .name{padding: 0 30px 10px;}

#pagedown{
	position:absolute;
	right:40px;
	top:50%;
	margin-top: -62px;
	z-index: 100;
}
}



/* 03.navi
----------------------------------------------------------- */
#top-navi li{float: left;}
#top-navi li a{
	display: block;
	background: url(/img/top-navi.png) no-repeat 0 0;
}
#top-navi li.nav01 a{background-position: 0 0;}
#top-navi li.nav02 a{background-position: -110px 0;}
#top-navi li.nav03 a{background-position: -220px 0;}
#top-navi li.nav04 a{background-position: -330px 0;}
#top-navi li.nav05 a{background-position: -440px 0;}
#top-navi li.nav06 a{background-position: right 0;}

#top-navi li.nav01 a:hover{background-position: 0 bottom;}
#top-navi li.nav02 a:hover{background-position: -110px bottom;}
#top-navi li.nav03 a:hover{background-position: -220px bottom;}
#top-navi li.nav04 a:hover{background-position: -330px bottom;}
#top-navi li.nav05 a:hover{background-position: -440px bottom;}
#top-navi li.nav06 a:hover{background-position: right bottom;}

@media only screen and (max-width: 640px){
#top-navi{
	top:auto!important;
	padding: 45px 0 10px;
	background: url(/img/ttl-top-navi.png) no-repeat 10px 10px,url(/common/img/bg-black.png) repeat 0 0;
	overflow:hidden;
}
#sjc #top-navi{
	background: url(/img_sjc/ttl-top-navi.png) no-repeat 10px 10px,url(/common/img_sjc/bg-gnavi.png) repeat 0 0;
}
#top-navi li{
	width: 31.333%;
	margin: 0.5% 1%;
}
#top-navi li a{
	padding: 42% 0;
	font-size: 12px;
	text-align: center;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background: #fff;
}
#top-navi li a:hover{color:#fff;background: #ff6400;}
}
@media only print, only screen and (min-width: 641px){
#top-navi{
	display: none;
	position: absolute;
	left: 50%;
	margin-left: -490px;
	padding-left: 110px;
	background: url(/img/ttl-top-navi.png) no-repeat 0 42px;
	z-index: 100;
}
#sjc #top-navi{background: url(/img_sjc/ttl-top-navi.png) no-repeat 0 center;}
#top-navi li{
	width: 110px;
	margin: 0 7px;
}
#top-navi li a{
	height: 110px;
	text-indent: -99999px;
}
}



/* 04.top-bnr
----------------------------------------------------------- */
#top-bnr{
	margin: 20px auto 0;
	text-align: center;
	letter-spacing:-0.4em;
}
#top-bnr li{
	display: inline-block;
	vertical-align:top;
	letter-spacing: normal;
}
#sjc #top-bnr li img{
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
@media only screen and (max-width: 640px){
#top-bnr li{
	width:48%;
	margin:1%;
	text-align: center;
}
}
@media only print, only screen and (min-width: 641px){
#top-bnr{min-width:1024px;}
#top-bnr li{margin:0 0 0 15px;}
#top-bnr li:first-child{margin:0;}
}



/* 05.side
----------------------------------------------------------- */
#side-exam{
	margin: 0 0 30px;
	padding:15px;
	border: 1px solid #305072;
}
#sjc #side-exam{
	position: relative;
	border: none;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #dc82a0;
}
#sjc #side-exam .icon{
	position: absolute;
	right: 0;
	top: -20px;
}
#side-exam h1{text-align: center;}
#side-exam h2{margin:20px 0 5px;padding: 0 0 5px;border-bottom: 1px solid #c8c8c8;}
#sjc #side-exam h2{border-bottom: 1px solid #ffffff;}
#side-exam ul li{
	padding: 5px 0 5px 25px;
	background: url(/common/img/arrow01.png) no-repeat 0 8px;
}
#sjc #side-exam ul li{
	background: url(/common/img_sjc/arrow02.png) no-repeat 0 8px;
}
#sjc #side-exam ul li a,
#sjc #side-exam ul li a:hover{color: #ffffff;}

@media only screen and (max-width: 640px){
#side{display: block;}
}



/* 06.contents
----------------------------------------------------------- */
/* topics */
#topics{
	margin: 0 0 15px;
	border: 1px solid #305072;
}
#sjc #topics{
	border: 3px solid #e1e1e1;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
#topics .ttl{margin:0 0 20px;}
#topics .ttl span{display: inline-block;}
#topics .ttl span,
#topics ul li{
	padding: 5px 0 5px 25px;
	background: url(/common/img/arrow01.png) no-repeat 0 8px;
}
#sjc #topics .ttl span,
#sjc #topics ul li{
	background: url(/common/img_sjc/arrow01.png) no-repeat 0 8px;
}
#sjc #topics ul li .new{color: #ff7388;background: none;}

#topics .ttl h1{display: inline-block;margin-right:20px;}

/* tab */
div#topics ul#ancher_btn{
	letter-spacing:-0.4em;
}
div#topics ul#ancher_btn li.tab{
	width:32%;
	display:inline-block;
	*display:inline;
	margin:0 1.33% 0 0;
	padding:0;
	color:#0063c6;
	text-decoration:underline;
	text-align:center;
	vertical-align:top;
	line-height:1.2;
	letter-spacing:normal;
	border-radius: 10px 10px 0 0;
    transition: all 0.3s ease-out;
	cursor:default;
	box-shadow:2px 2px 10px 0px #ababab;
	overflow:hidden;
	zoom:1;
	background-color:#f0f0f0;
	background-image:none;
}
div#topics ul#ancher_btn li.is-active{
	color:white;
	text-decoration:none;
	background-color:#556f8b;
}
div#topics ul#ancher_btn li:nth-child(2).is-active{
	background-color:#d96b7c;
}
div#topics ul#ancher_btn li:nth-child(3).is-active{
	background-color:#609696;
}
div#topics ul#ancher_btn li.tab span{
	display:block;
	padding:10px;
	border-top:5px #556f8b solid;
    transition: all 0.3s ease-out;
}
div#topics ul#ancher_btn li:nth-child(2) span{
	border-top:5px #d96b7c solid;
}
div#topics ul#ancher_btn li:nth-child(3) span{
	border-top:5px #609696 solid;
}

div#topics ul#ancher_btn li span:hover{
	color:#0063c6;
	border-top:5px #085096 solid;
	background-color:white;
}
div#topics ul#ancher_btn li:nth-child(2) span:hover{
	border-top:5px #ff213c solid;
}
div#topics ul#ancher_btn li:nth-child(3) span:hover{
	border-top:5px #009696 solid;
}

	
div.tab_contents{
    display:none;
	padding-top:10px;
}
div.tab_contents.is-show{
    display:block;
	position: relative;
	z-index: 999999999;
	background-color: white;
}


/* list */
#topics dl{
	position:relative;
	z-index:100;
	background-color:white;
}
#topics dl dt{
	float: left;
	width: 7em;
	padding: 6px 0 0;
}
#topics dl dd{
	padding: 5px 0 4px 9em;
	border-top: 1px dotted #ccc;
	background: url(/common/img/arrow01.png) no-repeat 7em 0.5em;
}
#sjc #topics dl dd{
	background: url(/common/img_sjc/arrow01.png) no-repeat 7em 0.5em;
}
#topics dl dd:nth-child(2){
	border-top: none;
}

#topics #topics_bnr{
	float:right;
	width:220px;
	margin: 0 0 10px 25px;
	padding:0;
	text-align:center;
	background:none;
}
#topics #topics_bnr a{
	display:block;
	margin: 0 0 10px 0;
}

@media only screen and (max-width: 510px){
	#topics dl dt,
	#topics dl dd{
		width:100%;
		float:none;
		padding:0;
	}
	
	#topics dl dt{
		border-top: 1px dotted #ccc;
	}
	#topics dl dd{
		padding:0 0 0 25px;
		border-top:none;
		background-position:left 0.2em!important;
	}
}





/*center-bnr*/
ul#center-bnr{
	width:100%;
	margin: 0 0 30px;
	letter-spacing: -.40em;
}
ul#center-bnr li{
	display:inline-block;
	*display:inline;
	width:33.33%;
	margin:15px auto;
	text-aling:center;
	text-align:center;
	vertical-align:top;
	letter-spacing: normal;
	zoom:1;
}


#college h1{margin:0 0 20px;}
#college h2{margin:0 0 5px;line-height: 1;}
#college #univ h2,
#college #postgraduate h2{padding-left: 8px;border-left: 5px solid #305072;}
#college #junior h2{padding-left: 8px;border-left: 5px solid #d0517d;}
#college ul li img{display: block;margin: 0 auto;}
#college ul li span{
	display: inline-block;
	margin: 5px 0;
	padding: 5px 0 5px 25px;
	background: url(/common/img/arrow01.png) no-repeat 0 6px;
}
#college ul li a{
	display: inline-block;
}
#college ul li a span:hover{
    opacity:0.50;
    filter: alpha(opacity=50);
}
#college ul li a span.pic{
	display: block;
	width:220px;
	height:150px;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:100% auto;
}
	

@media only screen and (max-width: 640px){
#topics{padding:10px;}
#topics .ttl{margin:5px 0 10px 5px;}
#topics .icon{display: none;}
#college ul li{margin:0 0 40px;text-align: center;}
#college ul li span{
	display:block;
	width:195px;
	padding-left:25px;
	text-align:left;
}
}

@media only print, only screen and (min-width: 641px){
#topics{padding:20px;}
#topics ul{overflow: hidden;}
#college #univ,
#college #postgraduate{
	float: left;
	width: 460px;
}
#college #junior{
	float: right;
	width: 220px;
}
#college #postgraduate{clear: both;}
#college ul li{
	float:left;
	width: 220px;
	margin: 0 0 40px 20px;
}
#college ul li:first-child{margin: 0;}
}



/* 06.contents
----------------------------------------------------------- */
#college-sjc .copy{
	margin: 20px 0;
}
#college-sjc ul{
	letter-spacing: -0.4em;
}
#college-sjc ul li{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
}
#college-sjc ul li{
	padding: 20px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: url(/common/img_sjc/side/bg-request.gif) repeat 0 0;
}
#college-sjc ul .image{text-align: center;}
#college-sjc ul li span{
	display: block;
	padding: 5px 0 5px 25px;
	background: url(/common/img_sjc/arrow02.png) no-repeat 0 8px;
}
#college-sjc ul li a,
#college-sjc ul li a:hover{color: #ffffff;}

@media only screen and (max-width: 640px){
#college-sjc .sjc-img{display: none;}
#college-sjc ul li{
	width: 48%;
	margin: 0 0 4% 4%;
	padding: 10px;
}
#college-sjc ul li:nth-child(odd){margin-left: 0;}
}

@media only print, only screen and (min-width: 641px){
#college-sjc .sjc-img{
	float: right;
	margin-left: 30px;
}
#college-sjc ul{
	width: 720px;
	margin: 0 -20px 0 0;
	overflow: hidden;
}
#college-sjc ul li{
	width: 220px;
	margin: 0 20px 20px 0;
}
}