/* ==|== primary styles =====================================================
   Author: www.prowebdesign.ro
   Write your own styles here.
   ========================================================================== */
/* structure */   
#outside, #colophon{
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#outside img.fluid {
	max-width: 100%;
	height: auto;
	line-height: 0;
}

header{ 
	margin: 0 0 10px 0;}/*0 0 20px 0>>0 0 10px 0*/
header, header nav#topnav, #main, footer{
	width:100%;}
#logo{ 
	float:left; 
	padding-right:0%/*padding-right:2%→0%*/
}
header nav#ut {
	float: right;
	text-align: right;
}
header{
	clear: both;
	padding: 0px;
	margin-top: 10px;/*40px>>10px*/
}
header h1{ 
	font-size:3.2em;}
header h2{ 
	font-size:1.8em;}
header nav#topnav{
	clear: both;
	margin-bottom: 10px;/*20px>>10px*/
}

/* =HOME
----------------------------------------------- */
#outside header .homeImgContainer {
}

#homeImg .homeImgNav a {
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}

/* hover時に画像を発光させる */
a:hover img {
  filter: alpha(opacity=75);
  opacity: .75;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; }



/* =HOME
----------------------------------------------- */

.homeImgArea .heroInner img {
	max-width: 100%;
	height: auto;
	line-height: 0;
}

.homeImgArea #heroKnow .heroColumn,
.homeImgArea #heroLearn .heroColumn {
  float: left;
}
  .homeImgArea #heroKnow .heroColumn ul li,
  .homeImgArea #heroLearn .heroColumn ul li {
    margin-bottom: 5px; }

#heroListen,
#heroKnow,
#heroLearn {
  height: 298px; }

#heroLook {
}
  #heroLook .lookImgWrap02 {
    display: none; }
  #heroLook .heroInner {
    margin: 0; }

#heroListen {
  /*overflow: auto; */}
  #heroListen .heroColumn ul {
}
    #heroListen .heroColumn ul li {
      float: left;
      margin: 10px 0 0 10px; }
      #heroListen .heroColumn ul li a {
        display: block;
        background: #FFF; }
  #heroListen section, #heroknow section {
    width: 100%;
    margin: 0 auto; }

#heroLearn .heroColumn {
  float: left;
  width: 100%;
}
#homeImg {
	margin-bottom: 0px;/*5px>>0px*/
	position: relative;
	clear: both;
	width: 100%;
	max-height: 300px;
	height: auto;
	z-index: 0;
}
  #homeImg .homeImgContainer {
	background: #fff;
	width: 100%;
	max-height: 300px;
	height: auto;
 }
  #homeImg .homeImgArea {
	width: 74.5%;
	height: auto;
	overflow: hidden;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-color: #D3D3D3;
	border-right-color: #D3D3D3;
	border-bottom-color: #D3D3D3;
}
    #homeImg .homeImgNav {
	float: left;
	width: 24.8958%;
	padding: 1px 0;
	list-style: none;
	border: 1px solid #d3d3d3;
	margin: 0;
	height: 100%;
	}
	#homeImg .homeImgNav li {
	}
    #homeImg .homeImgNav a {
      background: url(../../img/home_img_nav.png) no-repeat left top;
	/*  height: 74px;*/
	}
	  
    #homeImg .homeImgNav .homeImgNavLi01 a {
      background-position: left 0px;
		background-size: 200%;
 }
    #homeImg .homeImgNav .homeImgNavLi01.selected a, #homeImg .homeImgNav .homeImgNavLi01 a:hover {
	background-position: right 0px;
	background-size: 200%;
}
    #homeImg .homeImgNav .homeImgNavLi02 a {
      background-position: left 33.3333%;
		background-size: 200%;
}
    #homeImg .homeImgNav .homeImgNavLi02.selected a, #homeImg .homeImgNav .homeImgNavLi02 a:hover {
	background-position: right 33.3333%;
	background-size: 200%;
}
    #homeImg .homeImgNav .homeImgNavLi03 a {
      background-position: left 66.6666%;
		background-size: 200%;
}
    #homeImg .homeImgNav .homeImgNavLi03.selected a, #homeImg .homeImgNav .homeImgNavLi03 a:hover {
	background-position: right 66.6666%;
	background-size: 200%;
}
    #homeImg .homeImgNav .homeImgNavLi04 a {
      background-position: left 100%;
		background-size: 200%;
}
    #homeImg .homeImgNav .homeImgNavLi04.selected a, #homeImg .homeImgNav .homeImgNavLi04 a:hover {
	background-position: right 100%;
	background-size: 200%;
}
	  
	  
	  


#main, footer{
	font-size:.875em;
	clear: both;
}
#content {  
	float:right;
	margin:0 0 20px 0;}
#content ul, #content ol {
	margin: 1em 0;
	padding: 0 0 0 40px; }
#content dd {
	margin: 0 0 0 40px; }

/* RESPONSIVE IMAGES IN CONTENT AREA!! IF YOU WANT IMAGES TO BE RESPONSIVE EVERYWHERE, WRITE ANOTHER CSS RULE */
#content img{ max-width:100%; height:auto;}

aside { 
	float:left;
	margin:0 0 40px 0;
	}
#secondary-navigation{margin-bottom:20px;}
#secondary-navigation ul li a{ 
	background:#E6E6E6;
	display:block;
	margin:5px 0; 
	padding:7px;}
#secondary-navigation ul li a:hover{
	background:#ccc;
	color:#fff;}

/*colors and bgs*/
body{
}

a.bluelink{ 
	background:#0099ff; 
	border-radius:7px; 
	color:#fff;
	display:block;
	float:left; 
	margin:10px 15px 10px 0; 
	padding:15px;}





/* ==|== non-semantic helper classes ========================================
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }



/* ==|== media queries ======================================================
only screen and min-device-width
   ========================================================================== */
   
/* iPads (portrait and landscape) ----------- */
@media  (min-width: 961px) {
.noslide {
	display: none;
}
}

@media screen and (min-width : 768px) and (max-width:960px) {
#outside, #colophon{width:98%;}
.flexslider {width:94%;}
.noslide {
	display: none;
}
#secondary-navigation ul li a{padding:15px;}
}
@media  (max-width: 900px) {
#sub #menubottom {
	display: none;
}
}

@media  (max-width: 768px) {
#main .banner {
	display: none;
}

.sf-menu li.eng a {
	padding-right: 15%;
	padding-left: 20%;
	width: 65%;
}
*|html[xmlns*=""] .sf-menu li.engs a {
	padding-right: 25%;
	padding-left: 35%;
	width: 40%;
}
body:first-of-type .sf-menu li.engs a {
	padding-right: 25%;
	padding-left: 35%;
	width: 40%;
}

*|html[xmlns*=""] .sf-menu li.engl a {
	letter-spacing: -1px;
	padding-right: 13%;
	padding-left: 17%;
	width: 70%;
	height: 100%;
}
body:first-of-type .sf-menu li.engl a {
	letter-spacing: -1px;
	padding-right: 13%;
	padding-left: 17%;
	width: 70%;
	height: 100%;
}
}

/* large smartphones ----------- */
@media  (max-width: 767px) {
#outside, #colophon{width:98%;}

header{padding:10px 0 1px 0;}
header h1{ font-size:2.6em;}
header h2{ font-size:1.6em;}

.flexslider {width:92%;}

.sf-menu li.sfHover ul {top:-999em;}
.sf-sub-indicator {	background:none;}
#main .banner {
	display: none;
}
#main .noslide {
	display: block;
}

#secondary-navigation ul li a{padding:15px;}

#main h1{font-size:1.6em;}
#main h2{font-size:1.4em;}
#main h3{font-size:1.3em;}
#main h4{font-size:1.2em;}
}

/* medium smartphones ----------- */
@media (max-width: 615px) {
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_26,
.grid_29/*//add*/
 {
	margin-left: 0%;
	margin-right: 0%;
	width: 100%;
}
#homeImg ul.homeImgNav { display: none; }/*>>add*/
header #homeImg .homeImgArea {/*>>add*/
	width: 100%;/*>>add*/
	border: 1px #d3d3d3 solid;/*>>add*/
}/*>>add*/
header nav#ut { margin-bottom: 10px;}
#topnav{ display:block; width:100%; text-align:center; background:#666600; padding:15px 0; border-radius:7px;}
#mobileMenu_mobileselect { display:block; width:90%; margin:auto; height:1.6em;}
#sub { display: none; }
#outside #main .grid_10 h2.deptbutton { margin-bottom:0; }
#main .f-right { float:none; }
}

/* medium smartphones ----------- */
@media (max-width: 480px) {
#outside, #colophon{width:94%;}

#logo, header hgroup{ width:100%; text-align:center;}
#logo img{max-width:100%;}

header h1{ font-size:1.8em;}
header h2{ font-size:1.2em;}

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin-left: 0;
	margin-right: 0;
	width:100%;
}
#homeImg ul.homeImgNav { display: none; }
header #homeImg .homeImgArea {
	width: 100%;
	border: 1px #d3d3d3 solid;
}
#outside #main #camera {
	float: none;
	width: auto;
	max-width: 200px;
}
footer .grid_4{ border-bottom:1px dotted #ccc; padding-bottom:10px;}
}

/* medium smartphones, portrait ----------- */
@media (max-width: 320px) {

}


/*------------------------------------------------------------------------
--------------------------------------------------------------------------
                          for IE 
--------------------------------------------------------------------------
------------------------------------------------------------------------*/

#main .noslide { /display: none; }
#main .noslide { display: none\9; }