@charset "UTF-8";

/* ==========================================================
	PC閲覧用 481px以上
========================================================== */

@media print, screen and (min-width: 481px) {

/*----------------------------------------
box1
-----------------------------------------*/
#box1 {
		width: 694px;
		margin-top: 30px;
		padding: 3px;
		background:url(../../img/cmn_main_color02.gif);
	}
	#box1 div {
		background-color: #FFFFFF;
		position: relative;
	}
	#box1 p {
		width: 195px;
		position: absolute;
		bottom: 0;
		left: 25px;
	}
	#box1 dl {
		width: 434px;
		float: right;
		margin-right: 30px;
		padding: 30px 0;
	}
	#box1 dt {
		font-size: 18px;
		font-size: 1.8rem;	
		font-weight: bold;
		color: #3eb2d4;
	}
	#box1 dd {
		width: 434px;
		background: url(../../img/cmn_main_dotline.gif) repeat;
		margin-top: 5px;
		line-height: 31px;
	}
/*----------------------------------------
box2
-----------------------------------------*/
	#box2 {
		margin-top: 50px;
	}
	.inner {
		margin-top: 30px;
	}
	.inner li h4 {
		padding: 5px 0;
		text-align: center;
	}
	.inner li p.read {
		padding: 12px 15px;
		background-color: #f4f4f4;
	}
	.inner li p.pic {
		position: relative;
		margin: 20px 0 25px 0;
		text-align: center;
	}
	.inner li p.pic img.pic_ex {
		position: absolute;
		z-index: 50;
		top: 75px;
		left: -60px;
	}
	.inner li p.pic br {
		display: none;
	}
	.inner li p.txt {
		padding: 0 15px;
	}
	.inner li p.ex {
		padding: 6px 15px 13px 15px;
		font-size: 10px;
		font-size: 1.0rem;
	}
	/* sp1 */
	.inner li.sp1 {
		float: left;
		width: 324px;
		background: #bbbbbb url(../img/cur_02_a_kage01.gif) repeat-y;
	}
	.inner li.sp1 div {
		padding-bottom: 4px;
		background: #ffffff url(../img/cur_02_a_kage03.gif) repeat-y;
		border-right: solid 1px #d4d4d4;
		border-bottom: solid 1px #d4d4d4;
	}
	.inner li.sp1 p.read {
		background: #f4f4f4 url(../img/cur_02_a_kage02.gif) repeat-y;
	}
	.inner h3 + p {
		margin-bottom: 20px;
	}
	/* sp2 */
	.inner li.sp2 {
		position: relative;
		z-index: 50;
		float: left;
		width: 376px;
		background: url(../../img/cmn_main_color01.gif);
	}
	.inner li.sp2 div {
		margin: 0 5px 5px 5px;
		background-color: #ffffff;
	}
	.inner li.sp2 p.read {
		font-weight: bold;
	}
	/* only for IE8 */
	html.ie8 h2 + p + .inner {
		height: 600px;
		padding-bottom: 30px;
	}
	html.ie8 .inner li div {
		position: static;
		padding-bottom: 100px;
	}
	html.ie8 .inner .pic,
	html.ie8 .inner .txt {
		position: relative;
	}
	html.ie8 .inner .ex {
		position: relative;
		top: 100px;
	}
/*----------------------------------------
box3
-----------------------------------------*/
	#box3 {
		margin-top: 50px;
	}
	#box3 p {
		margin-bottom: 20px;
	}
/*----------------------------------------
box4
-----------------------------------------*/
	#box4 {
		margin-top: 50px;
	}
	#box4 p {
		width: 338px;
		float: left;
		padding-right: 20px;
	}
	#box4 img {
		width: 342px;
	}
/*----------------------------------------
box5
-----------------------------------------*/
	#box5 {
		margin-top: 50px;
	}
	#box5 h2 {
		width: 682px;
		margin-bottom: 20px;
		padding: 5px 0 4px 14px;
		border-left: solid 4px #3eb2d4;
		background-color: #000066;
		color: #ffffff;
		font-weight: bold;
		font-size: 18px;
		font-size: 1.8rem;
	}
	#box5 h3 {
		margin-bottom: 10px;
	}
	#box5 li {
		float: left;
		width: 153px;
		padding-left: 29px;
		background: url(../img/cur_04_line.gif) no-repeat 10px center;
	}
	#box5 li.first {
		width: 154px;
		padding-left: 0;
		background: none;
	}
	#box5 li img {
		width: 154px;
		height: 50px;
	}

}

/* ==========================================================
	スマホ閲覧用 480px以下
========================================================== */

@media screen and (max-width: 480px) {

/*----------------------------------------
box1
-----------------------------------------*/
	#box1 p {
		display: none;
	}
	#box1 dt {
		font-size: 18px;
		font-size: 1.8rem;	
		font-weight: bold;
		color: #3eb2d4;
	}
	#box1 dd {
		background: url(../../img/cmn_main_dotline.gif) repeat;
		margin-top: 5px;
		line-height: 31px;
	}
/*----------------------------------------
box2
-----------------------------------------*/
	.inner {
		margin-top: 20px;
	}
	.inner li h4 {
		padding: 5px 0;
		text-align: center;
	}
	.inner li p.read {
		padding: 12px 15px;
		background-color: #f4f4f4;
	}
	.inner li p.pic {
		position: relative;
		margin: 20px 0 25px 0;
		text-align: center;
	}
	.inner li p.pic img.pic_ex {
		position: relative;
		z-index: 50;
		top: 10px;
	}
	.inner li p.txt {
		padding: 0 15px;
	}
	.inner li p.ex {
		padding: 10px 15px 13px 15px;
		font-size: 10px;
		font-size: 1.0rem;
	}
	/* sp1 */
	.inner li.sp1 {
		border-top: 1px solid #bbbbbb;
		border-left: 1px solid #bbbbbb;
		border-right: 1px solid #bbbbbb;
	}
	.inner li.sp1 h4{
		background: #bbbbbb;
	}
	.inner li.sp1 div {
		padding-bottom: 4px;
	}
	.inner h3 + p {
		padding-bottom: 15px;
	}
	.inner img.curricurum {
		width: 100%;
	}
	/* sp2 */
	.inner li.sp2 {
		width: 100%;
		z-index: 50;
		background: url(../../img/cmn_main_color01.gif);
		padding-bottom: 5px;
	}
	.inner li.sp2 div {
		margin: 0 5px;
		background-color: #ffffff;
	}
	.inner li.sp2 p.read {
		font-weight: bold;
	}
/*----------------------------------------
box3
-----------------------------------------*/
	#box3 img {
		width: 100%;
	}
	#box3 p {
		padding-bottom: 15px;
	}
/*----------------------------------------
box4
-----------------------------------------*/
	#box4 img {
		width: 100%;
	}
	#box4 p {
		padding-bottom: 15px;
	}
/*----------------------------------------
box5
-----------------------------------------*/
	#box5 ol {
		margin-top: 10px;
	}
	#box5 h2 {
		margin: 0 0 15px 0;
		padding: 5px 10px 4px 12px;
		border-left: solid 4px #3eb2d4;
		background-color: #000066;
		color: #ffffff;
		font-weight: bold;
		font-size: 17px;
		font-size: 1.7rem;
		line-height: 1.3;
	}
	#box5 h3 {
		margin-bottom: 10px;
	}
	#box5 li {
		width: 49%;
		min-height: 160px;
	}
	#box5 li:nth-child(odd) {
		float: left;
	}
	#box5 li:nth-child(even) {
		float: right;
	}
	#box5 li img {
		width: 100%;
	}

}