@charset "utf-8";

/*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*
* Browser Style Reset
^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin: 0;	padding: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
}
table	{
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th	{
	text-align: left;
}
q:before ,q:after {
	content: '';
}
object, embed	{
	vertical-align: top;
}
hr, legend	{
	display: none;
	clear:both;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight:normal;
}
img, abbr, acronym, fieldset {
	border: 0;
	vertical-align: top;
	outline:none;
}
li {
	list-style-type: none;
}
img {
	max-width: 100%;
	height: auto;
	width: auto/9;
	-ms-interpolation-mode: bicubic;
}
* html img {
	width: 100%;
}


/*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*
* Font Style
^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*/
body {
	font-family:Verdana,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	color: #333;
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
	background: #eee;	
}
/*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*
* link Style
^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*/
a:link	{
	text-decoration: none;
	color: #555;
}

a:visited	{
	text-decoration: none;
	color: #555;

}

a:hover	{
	text-decoration: underline;
	color: #555;
}


/*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*
* new clearfix
^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*^*/
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html .clearfix             { /*zoom: 1;*/ } /* IE6 */
*:first-child+html .clearfix {  /*zoom: 1;*/ } /* IE7 */

.left {float: left;}
.right {float: right;}
.center {text-align: center;}
.impct {color: #eb3535;}
.kome {color: #888;}
.nobg {
	background-image: none!important;
	border: none!important;
}


/* ======================================================================
Image Rollover
======================================================================== */

a:hover img {
	filter: alpha(opacity=60);
	-moz-opacity:0.6;
	opacity:0.6;
}


/* ======================================================================
for PC
======================================================================== */

#header {
	height: 106px;
	font-size: 11px;
	background: #fff;
	margin: 0 -10px;
}
#header .inner {
	position: relative;
	max-width: 1240px;
	min-width: 960px;
	margin: 0 auto;
}
* html #header .inner {width: 960px;}

#header #search {
	position: absolute;
	width: 230px;
	top: 30px;
	right: 20px;
	text-align: right;
}
#header #search li {
	display: inline-block;
	margin-left: 10px;
}
* html #header #search li {display: inline;}
*:first-child+html #header #search li {display: inline;}

#search #search_box {
	display: block;
	float: right;
	padding-top: 10px;
}

#cse-search-box #q {
	background: none repeat scroll 0 0 #fff;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-right: 1px solid #fff;
	color: #888;
	display: block;
	float: left;
	font-size: 12px;
	height: 12px;
	line-height: 1;
	margin: 0;
	padding: 4px 2px;
	width: 160px;
}
#searchBtn {
	display: block;
	float: left;
	height: 22px;
	width: 35px;
}
#header h1 {padding: 20px 0 0 20px;}
#header h1 img {width: 185px;}
#header li a {
	display: block;
	background: url(../img/arrow.gif) no-repeat left center;
	color: #666;
	padding-left: 10px;
}
#header #sub_nav {
	position: absolute;
	top: 58px;
	right: 260px;
	text-align: right;
}

#header #sub_nav li {
	display: inline-block;
	margin-left: 10px;
}
* html #header #sub_nav li {display: inline;}
*:first-child+html #header #sub_nav li {display: inline;}

#wrapper {
	max-width: 1220px;
	min-width: 940px;
	margin: 0 auto;
	padding-top: 40px;
	zoom: 1;
}
* html #wrapper {width: 940px;}
#wrapper:after {
	content: "";
	display: block;
	clear: both;
}
#nav {
	float: left;
	width: 21.3114754098%;
	display: block;
	overflow: hidden;
}
* html #nav {width: 21.3%;}
*:first-child+html #nav {width: 21.3%;}

#nav .inner_link {
	background: #FFFFFF;
}
#nav .inner_link a {
	background: url(../img/arrow2.gif) no-repeat right center;
	display: block;
	padding: 10px 10px 10px 20px;
	border-bottom: 1px solid #eee;
	zoom: 1;
}
#nav dt a {
	display: block;
	border-bottom: solid 1px #fff;
	overflow: hidden;
}
#nav dt a span {
	display: block;
	border-bottom: solid 1px #ccc;
}
#nav dt a span img {
	width: 180px;
	max-width: 180px;
}
#nav dd {display: none;}
#contents {
	float: right;
	width: 78.6885245902%;
}
* html #contents {width: 78.6%;}
*:first-child+html #contents {width: 78.6%;}

#footer {
	background: #fff;
	height: 90px;
	margin: 20px -10px 0;
	clear: both;
}
#footer p {
	padding: 40px 20px 0;
	text-align: right;
	max-width: 1200px;
	min-width: 920px;
	margin-right: auto;
	margin-left: auto;
	font: 10px Verdana;
	color: #999;
}
* html #footer p {width: 920px;}
#contents .inner_link a {
	background: url(../img/arrow2.gif) no-repeat right center #fff;
	display: block;
	padding: 4.9%;
	border-bottom: 1px solid #eee;
	zoom: 1;
}
.inner_link  .ca_icon  {
float:right;


}
.box {
	margin-bottom:20px;
	position: relative;
	width: 33.3333333333%;
}
* html .box {width: 33.3%;}
*:first-child+html .box {width: 33.3%;}

.box1 {
	width: 66.6666666666%;
	float: left;
}
* html .box1 {width: 66.6%;}
*:first-child+html .box1 {width: 66.6%;}
.box3,
.box4,
.box6,
.box7,
.box9,
.box10 {float: left;}
.box2,
.box5,
.box8,
.box11 {float: right;}

.box5,
.box4,
.box9 {clear: both;}

.box a:hover {text-decoration: none;}
.box3 a:hover {color: #7C368B;}
.box4 a:hover {color: #5FBAB3;}
.box5 a:hover {color: #F36B2F;}
.box6 a:hover {color: #9CB138;}
.box7 a:hover {color: #c891b1;}
.box8 a:hover {color: #034B9F;}
.box9 a:hover {color: #f2bf49;}
.box10 a:hover {color: #E5437E;}
.box11 a:hover {color: #D92F4C;}


.list_03 a:hover {
	text-decoration: none;
	color: #7C368B;
}

.list_04 a:hover {
	text-decoration: none;
	color: #5FBAB3;
}

.list_05 a:hover  {
	text-decoration: none;
	color: #F36B2F;
}

.list_06 a:hover  {
	text-decoration: none;
	color: #9CB138;
}


.list_07 a:hover  {
	text-decoration: none;
	color: #c891b1;
}


.list_08 a:hover  {
	text-decoration: none;
	color: #034B9F;
}

.list_09 a:hover  {
	text-decoration: none;
	color: #E5437E;
}

.list_10 a:hover  {
	text-decoration: none;
	color: #f2bf49;
}

.list_11 a:hover  {
	text-decoration: none;
	color: #D92F4C;
}

#nav dt a span {
    border-bottom: 1px solid #CCCCCC;
    display: block;
}

.box .photo {
	position: relative;
	overflow: hidden;
}
.text {
	width: 100%;
	height: 300px;
	position: absolute;
	left: 0px;
	top: 0px;
	display: none;
}
.text p {
	position: relative;
	z-index: 2;
	color: #fff;
	padding: 15px;
	top: 0;
}
.box .bg {
	position: absolute;
	z-index: 1;
	width: 100%;
	top: 0;
	left: 0;
}
.menu_btn,
#m_logo{display:none;}
.pc_img{display:block!important;}
.m_img{display:none!important;}

body,
#nav h2,
#nav dt,
#nav dd,
.box .inner,
.box ul {margin: 0 10px;}

#mobile {display: none;}



/* ======================================================================
fot Tablet
======================================================================== */

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

	#header .inner {
		position: relative;
		min-width: 0;
	}
	#header #sub_nav {
		top: 15px;
	}
	#header #sub_nav li {
		display: block;
		margin-bottom: 5px;
		text-align: left;
	}
	#wrapper {
		min-width: 0;
		padding-top: 20px;
	}
	#contents #m_logo {
		display:block;
		position: absolute;
		width: 100%;
		height: 40px;
		top: 106px;
		left: 0;
		padding: 10px 0 0;
		text-align: center;
		background-color: #3a048e;
	}
	#contents #m_logo img{	width: 360px;}
	#contents {
		float: none;
		width: auto;
		margin-top: 60px;
	}
	#nav {display: none;}
	#footer p {
		min-width: 0;
		text-align: center;
	}
#contents .inner_link a {
	background: url(../img/arrow2.gif) no-repeat right center #fff;
	display: block;
	padding: 4.9%;
	border-bottom: 1px solid #eee;
	zoom: 1;
}
}



/* ======================================================================
fot Smart Phone (Landscape)
======================================================================== */

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

	#header {height: 60px;}
	#header .inner {
		width: 100%;
		min-width: 0;
		position: relative;
	}
	#header .inner .menu_btn {
		display:block;
		position: absolute;
		width: 60px;
		height: 60px;
		top: 0px;
		right: 0;
	}
	#header h1 {
		height: 55px;
		text-align: center;
		float: none;
		padding: 5px 0 0;
		overflow: hidden;
	}
	#header h1 img {width: 140px;}
	#header .m_layout {
		left: 0px;
		top: 60px;
		width: 100%;
		background: #fff;
		height: 153px;
		font-size: 14px;
		position: absolute;
		z-index: 999;
		display: none;
		text-align: left;
	}
	#header .m_layout #search {
		position: static;
		margin-right: auto;
		margin-left: auto;
		padding-top: 10px;
		width: 100%;
		border-top: 1px solid #eee;
		overflow: hidden;
		text-align: left;
	}
	#header .m_layout #search #search_box {
		float: none;
		width: auto;
		padding: 5px 20px 0;
		text-align: center;
	}
	#search #search_box #cse-search-box #q {
		width: 235px;
	}
	#header .m_layout #sub_nav {
		position: static;
		width: auto;
		margin: 0;
		padding: 0 20px 10px;
		text-align: left;
		overflow: hidden;
	}
	#header .m_layout #sub_nav li {
		float: left;
		display: block;
		width: 50%;
		margin: 5px 0;
	}
	#header .m_layout #search_nav {
		padding: 0 20px;
		overflow: hidden;
	}
	#header .m_layout #search_nav li {
		float: left;
		display: block;
		width: 50%;
		margin: 5px 0;
		padding: 0px;
	}
	#footer {height: 60px;}
	#footer p {padding-top: 20px;}
	#contents #m_logo {top: 60px;}
	#contents {margin-top: 50px;}
	.box {
		width: 50%;
		float: left;
	}
	.box1 {
		width: 100%;
		float: none;
	}
	.box1 img {
		width: 100%;
	}
	.box1,
	.box2,
	.box3,
	.box4,
	.box6,
	.box10{float: left;}
		.box5,

	.box7,
	.box8,
	.box9{float: right;}
	.box {clear: none;}
	.box3,
.box4,
	.box8 ,
	.box10{clear: both;}
	.pc_img {display:none!important;}
	.m_img {display:block!important;}


}



/* ======================================================================
for Smart Phone (Portrait)
======================================================================== */

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

	#wrapper {padding-top: 10px;}
	#contents #m_logo {
		height: 35px;
		padding: 10px 0 0;
	}
	#contents #m_logo img {
		display: block;
		width: 280px;
		margin: 0 auto;
	}
	.box {
		float: none;
		width: 100%;
		margin: 0 0 15px 0 !important;
	}
	.text p {
		padding: 25px;
		font-size: 14px;
	}
	#contents .inner_link {display: none;}
	#mobile {display: block;}

}



/* ======================================================================
Minor Break Point
======================================================================== */

@media screen and (min-width: 768px) {

	#header .m_layout {display: block !important;}

}

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

	#contents .inner_link {display: block !important;}

}

@media screen and (max-width: 567px) and (min-width: 481px) {

	.box1,
	.box2,
	.box5 {width: 100%;}

}

@media screen and (max-width: 540px) and (min-width: 481px) {

	.text p {font-size: 11px;}

}