@charset "utf-8";
/* CSS Document */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

body{line-height:0;line-height:1.5;font-size:14px;background:#e9f6e3;color:#333;
}
body,td,th {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
a{color:#6cc;text-decoration:none;}
a:hover{color:#6cc;text-decoration:underline;}
#wrapper{width:100%;height:100%;}
#container{width:100%;max-width:2048px;margin:0 auto;padding:0;background:#e9f6e3;}
#header{width:97%;margin:0 auto;}
#header h1{width:32%;margin:0 auto;float:left;}
#header h1 img{width:100%;	max-width:668px;height:auto;margin: 0;}

ul#tab{width:62%;margin: 8% 0 0 0;zoom:1;padding:0;float:right;}
ul#tab:after{content:""; display:block; clear:both; height:0;}

#tab li {
  float: left;
  padding:0;
  list-style: none;
  cursor: pointer;
background: rgb(255,255,255);
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 85%, rgba(221,221,221,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(85%,rgba(255,255,255,1)), color-stop(100%,rgba(221,221,221,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 85%,rgba(221,221,221,1) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,1) 85%,rgba(221,221,221,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 85%,rgba(221,221,221,1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 85%,rgba(221,221,221,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );

}
/*#tab li span{display:none;}*/
#tab li img{width:100%;}
#tab li#n1{width:33%; margin: 0 0.5% 0 0;}
#tab li#n2{width:33%; margin: 0 0.5% 0 0;}
#tab li#n3{width:33%; margin: 0;}

#tab li.select{background:#fff;}
#tab li.onmause{background:#fff;}

.disnon {
  display: none;
}

#contents{width:97%;max-width:1988px;margin:0 auto;padding:0;background: url(../../../jh_web_contents/rika/img/tab_right.gif) repeat-y top right #fff;height:78%;max-height:1200px;clear:both;}


#content_wrap{width:100%;max-width:1988px;margin:0 auto;padding: 0 auto;text-align:center;background:#fff;/*min-height:1536px;*/}

h3{clear:borh;width:96%;margin: 15px 2% 0 2%;}
h3 img{width:10%;height:auto;}
h3.basic{margin-top: 20px;}
h3.h3_bar{background:url(../../../jh_web_contents/rika/img/h3_bar.png) repeat-x left bottom;clear:borh!important;}
h3.h3_bar img{width:5.32%;height:auto;}


/*1～3年共通*/
ul.index_1n,ul.index_2n,ul.index_3n{
	width:96%;
	max-width:1918px;
	margin: 1% auto 0 auto;
	clear:both;
}
ul.index_1n li,ul.index_2n li,ul.index_3n li{
	width:24.25%;
	max-width:446px;
	float:left;
	margin:0 1% 0.2% 0;
}

ul.index_1n li.btnR2,ul.index_2n li.btnR2,ul.index_3n li.btnR2{

	margin:0 50% 0.5% 0;
}
ul.index_1n li.btnR3,ul.index_1n li.btnR3,ul.index_3n li.btnR3{
	margin:0 25.25% 0.5% 0;
}

ul.index_1n li.btnR4,ul.index_2n li.btnR4,ul.index_3n li.btnR4{
	margin:0 0 1% 0;
}
ul.index_1n li img,ul.index_2n li img,ul.index_3n li img{width:100%;height:auto;opacity:0.5;}
ul.index_1n li a img,ul.index_2n li a img,ul.index_3n li a img{opacity:1;}

/*1年*/
.r1p225{width:80%;margin:20px auto;text-align:center;max-width:800px;}
.r1p225 img{width:80%;height:auto;max-width:640px;}
.r1p225 p{text-align:left;}

/*2年*/

/*3年*/

.movie{width:100%;margin: 20px auto;clear:both;text-align:center;}
.movie video{width:86%;max-width:1280px;height:auto;}
.goTop{width:86%;max-width:1280px;text-align:right;margin: 4% auto;clear:both;}
.goTop img{width:11%;max-width:148px;height:auto;}

.clearBoth{clear:both;}


@mediascreen and (min-width:2048px){
	#wrapper{background: url(../img/stage_bg.png) top center repeat-y;}
}

/* iframe */
.movie_frame{
	width: 86%;
	max-width: 1280px;
	margin: 20px auto;
}
.web_science_video {
	position: relative;
	width: 100%;
	padding: calc(450 / 800 * 100%) 0 0; /* 高さと横幅の数字には単位は入れません。 */
}
.web_science_video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* スマホ対応ここから */
/* ==================================================== */
/*					スマートフォン対応						*/
/* ==================================================== */

@media (max-width: 768px){
	h3{clear:borh;width:96%;margin: 15px 2% 0 2%;}
	h3 img{width:30%;height:auto;}
	h3.basic{margin-top: 20px;}
	h3.h3_bar{background:url(../../../jh_web_contents/rika/img/h3_bar.png) repeat-x left bottom;clear:borh!important;}
	h3.h3_bar img{width:15.32%;height:auto;}

	/*1～3年共通*/
	ul.index_1n,ul.index_2n,ul.index_3n{
		width:96%;
		max-width:768px;
		margin: 1% auto 0 auto;
		clear:both;
	}
	ul.index_1n li,ul.index_2n li,ul.index_3n li{
		width:48.5%;
		max-width:375px;
		float:left;
		margin:0 1% 0.1% 0;
	}

	ul.index_1n li.btnR2,ul.index_2n li.btnR2,ul.index_3n li.btnR2{
		margin:0 1% 0.1% 0;
	}
	ul.index_1n li.btnR3,ul.index_1n li.btnR3,ul.index_3n li.btnR3{
		margin:0 5% 0.1% 0;
	}

	ul.index_1n li.btnR4,ul.index_2n li.btnR4,ul.index_3n li.btnR4{
		margin:0 1% 0.1% 0;
	}
	ul.index_1n li img,ul.index_2n li img,ul.index_3n li img{width:100%;height:auto;opacity:0.5;}
	ul.index_1n li a img,ul.index_2n li a img,ul.index_3n li a img{opacity:1;}

	/*1年*/
	.r1p225{width:80%;margin:20px auto;text-align:center;max-width:800px;}
	.r1p225 img{width:80%;height:auto;max-width:640px;}
	.r1p225 p{text-align:left;}
}