@charset "utf-8";


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

	#main-container の定義 および ローカルナビゲーションエリア／タブレットメニューのCSS

	最終更新：　2015年10月14日

	common.css と同様に、コーポレートサイトのすべてのページから読むことを想定しています。
	ただし、例外で #main-container の定義や、ローカルナビゲーションを変えたいページがあるため、わけて読めるよう、common.css とは別のファイルにしています。

	備考：
		・.side-nav は、ローカルナビゲーションとタブレットメニューでコードを共有するため、#side での特定をしない。
		・もし、ヘッダ・フッタは全社共通で、#main-container 配下を丸ごと変えたいときは、このファイルを読み込まないようにする。
		　ただし #main 配下でも、コーポレートサイト全体で共通にすべきいくつかの要素は common.css で定義しているので注意すること。（例：.clearfix、#main p、a.icon-arrow-r、#main .mt05 など）

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

/* **********************************************************************************

	02. グローバルエリア定義

********************************************************************************** */

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

	コンテナ

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

#main-container { width:960px; margin:0 auto; padding:0 0 30px 0; }

#main { float:right; width:710px; }
	.top #main,
	.index #main { float:none; width:960px; }

@media
	only screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait),
	only screen and (max-device-width:959px) and (min-device-width:600px) and (min-device-height:600px) and (min-resolution: 144dpi) {

#main-container { width:710px; padding: 0 0 10px 0;  }

#main { float:none; margin: 0 auto; padding-bottom: 20px; }
	.top #main,
	.index #main { width:710px; }

}



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

	左サイド　ローカルナビゲーションエリア
	
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */

#side { float:left; width:220px; padding-bottom:40px; }
#side p.text-side-title { display: none; }


/* ナビゲーション */

.side-nav { border:1px solid #ccc; border-radius:5px; overflow:hidden; }
.side-nav-next { border-bottom:none; border-radius:5px 5px 0 0; }

/* 第一階層 */
.side-nav p {
	display:block;
	border-bottom:3px solid #efefef;
	background:#FBF8F5;
	font-weight:bold; font-size:16px; font-size:1.6rem; line-height:1.5; }
	.side-nav p a {
		display:block;
		border-bottom:3px solid #767676;
		padding:15px 10px 13px;
		text-decoration:none; color:#333; }	
	.side-nav p a.icon-arrow-r{ background:none;}
	.side-nav p a:hover{ text-decoration:underline; color:#a60000;}

	/* 第二階層 */
	.side-nav ul li {
		display:block; list-style:none;
		border-top:1px solid #ccc; border-bottom:1px solid #FFF;
		font-size:12px; font-size:1.2rem; line-height:1.3; }
		.side-nav ul li a,
		.side-nav ul li span{
			display:block;
			padding:10px 17px 10px 10px;
			background: #fff;
			text-decoration:none; color:#333; }
		.side-nav ul li span{ font-weight:bold; }
		.side-nav ul li a.icon-blank{
			padding:10px 10px 10px 25px;
			background-image:url(/common-o/img/icon-blank.png);
			background-position:10px 1em;
			background-repeat:no-repeat; }
		.side-nav ul li a:hover { text-decoration:underline; color:#a60000;}
		* html .side-nav ul li a { height:1%; }
		.side-nav ul li:first-child { border-top:none; }

		/* カレント（第二階層） */
		.side-nav ul li.current{
			background-color:#A60000;
			border-bottom:none;}
		.side-nav ul li.current a,
		.side-nav ul li.current span{
			background:url(/common-o/img/icon-side-nav-current.png) no-repeat 98.5% 1.1em #A60000;
			color:#fff; font-weight:bold;}
			.side-nav ul li.current ul{ margin:0 0 0 4px; background-color:#fff; }
				.side-nav ul li.current ul li {
					border:1px solid #ccc; border-bottom:none; border-right:none; }
					.side-nav ul li.current ul li a {
						background:#fff;
						box-shadow:1px 0 0 #999 inset;
						color:#333; font-weight:normal; }
					.side-nav ul li.current ul li a.icon-blank {
						padding:10px 10px 10px 25px;
						background-image:url(/common-o/img/icon-blank.png);
						background-position:10px 1em;
						background-repeat:no-repeat;}
					.side-nav ul li.current ul li:first-child a {
						box-shadow:1px 1px 0 #999 inset; }
					.side-nav ul li.current ul li a:hover { text-decoration:underline; color:#a60000; }

	/* 第三階層 */
	.side-nav ul li.parent-current{ background-color:#F3EAE0; border-bottom:none;}
		.side-nav ul li.parent-current a,
		.side-nav ul li.parent-current span{ background:#F3EAE0; font-weight:bold;}
			.side-nav ul li.parent-current ul{ margin:0 0 0 3px; }
				.side-nav ul li.parent-current ul li {
					border:1px solid #ccc; border-bottom:none; border-right:none; }
					.side-nav ul li.parent-current ul li a {
						background:#fff;
						box-shadow:1px 0 0 #999 inset;
						color:#333; font-weight:normal; }
					.side-nav ul li.parent-current ul li a.icon-blank {
						padding:10px 10px 10px 25px;
						background-image:url(/common-o/img/icon-blank.png);
						background-position:10px 1em;
						background-repeat:no-repeat;}
					.side-nav ul li.parent-current ul li:first-child a {
						box-shadow:1px 1px 0 #999 inset; }
					.side-nav ul li.parent-current ul li a:hover { text-decoration:underline; color:#a60000; }

		/* カレント（第三階層） */
		.side-nav ul li.parent-current ul li.current { box-shadow:1px 0 0 #999 inset; }
		.side-nav ul li.parent-current ul li.current a {
			background:url(/common-o/img/icon-side-nav-current.png) no-repeat 98.5% 1.1em #A60000;
			color:#fff; font-weight:bold; }
			.side-nav ul li.parent-current ul li.current ul { margin:0 0 0 4px; }
				.side-nav ul li.parent-current ul li.current ul li { border:none; }
				.side-nav ul li.parent-current ul li.current ul li a { border-top:1px solid #ccc; box-shadow:1px 0 0 #999 inset; padding:5px 17px 5px 10px; background:#fff; color:#333; font-weight:normal; }
				.side-nav ul li.parent-current ul li.current ul li a:hover { text-decoration:underline; color:#a60000; }
				.side-nav ul li.parent-current ul li.current ul li:first-child a { border-top:none; box-shadow:1px 1px 0 #999 inset; }

	/* 第四階層 */
	.side-nav ul li.parent-current ul li.parent-current { background-color:#FBF8F5; border-bottom:none; box-shadow:1px 0 0 #999 inset; }
		.side-nav ul li.parent-current ul li.parent-current a,
		.side-nav ul li.parent-current ul li.parent-current span{ background:#FBF8F5; font-weight:bold; }
		.side-nav ul li.parent-current ul li.parent-current ul { margin:0 0 0 4px; }
			.side-nav ul li.parent-current ul li.parent-current ul li a {
				border-top:none;
				padding:5px 17px 5px 10px;
				background:#fff; box-shadow:1px 0 0 #999 inset; font-weight:normal; }
			.side-nav ul li.parent-current ul li.parent-current ul li:first-child a { box-shadow:1px 1px 0 #999 inset; }

		/* カレント（第四階層） */
		.side-nav ul li.parent-current ul li.parent-current ul li.current a {
			background:url(/common-o/img/icon-side-nav-current.png) no-repeat 98.5% 0.6em #A60000;
			color:#fff; font-weight:bold; }
			.side-nav ul li.parent-current ul li.parent-current ul li.current ul { margin:0; }
			.side-nav ul li.parent-current ul li.parent-current ul li.current ul li a {
				padding:5px 17px 5px 20px;
				background:url(/common-o/img/icon-side-nav-tree.png) no-repeat 10px 0.5em #fff;
				box-shadow:1px 0 0 #999 inset;
				color:#333; font-weight:normal; }
			.side-nav ul li.parent-current ul li.parent-current ul li.current ul li a:hover { text-decoration:underline; color:#a60000; }

	/* 第五階層 */
	.side-nav ul li.parent-current ul li.parent-current ul li.parent-current ul { margin:0; }
		.side-nav ul li.parent-current ul li.parent-current ul li.parent-current ul li {
			border:none; }
			.side-nav ul li.parent-current ul li.parent-current ul li.parent-current ul li a {
				padding:5px 17px 5px 20px;
				background:url(/common-o/img/icon-side-nav-tree.png) no-repeat 10px 0.5em #fff;
				box-shadow:1px 0 0 #999 inset;
				color:#333; font-weight:normal; }
			.side-nav ul li.parent-current ul li.parent-current ul li.parent-current ul li:first-child { border-top:1px solid #ccc; }
			.side-nav ul li.parent-current ul li.parent-current ul li.parent-current ul li a:hover { text-decoration:underline; color:#a60000; }

			/* カレント（第五階層） */
			.side-nav ul li.parent-current ul li.parent-current ul li.parent-current ul li.current a {
				background-color:#A60000;
				box-shadow:1px 0 0 #999 inset;
				color:#fff; font-weight:bold; }
			html:not(:target) .side-nav ul li.parent-current ul li.parent-current ul li.parent-current ul li.current a {
				background-image:url(/common-o/img/icon-side-nav-tree.png),url(/common-o/img/icon-side-nav-current.png);
				background-position:10px 0.5em,98.5% 0.6em;
				background-repeat:no-repeat,no-repeat;
				background-color:#A60000; }

	/* リンクエリア */
	#side .side-priority-link {
		border:1px solid #ccc; border-radius:0 0 5px 5px;
		background:#FFF;
		box-shadow:0 3px 0 #efefef inset; }
		#side .side-priority-link ul { list-style:none; }
			#side .side-priority-link ul li {
				border-top:1px solid #ccc;
				font-size:12px; font-size:1.2rem; line-height:1.3; }
				#side .side-priority-link ul li a {
					display:block; padding:15px 5px 15px 25px;
					background:url(/common-o/img/icon-arrow-r-gray.png) no-repeat 15px 1.5em;
					text-decoration:none; color:#333; }
				#side .side-priority-link ul li.current a {
					background:#fceedc url(/common-o/img/icon-arrow-r-gray.png) no-repeat 15px 1.5em;
					color:#a60000;}

				#side .side-priority-link ul li a:hover { text-decoration:underline; color:#a60000; }

				#side .side-priority-link ul li a.icon-blank{
					padding:15px 5px 15px 30px;
					background:url(/common-o/img/icon-blank.png) no-repeat 15px 1.4em;}
				#side .side-priority-link ul li a.icon-external{
					padding:15px 5px 15px 30px;
					background:url(/common-o/img/icon-external.png) no-repeat 15px 1.5em;}

				* html #side .side-priority-link ul li a { height:1%; }


	/* バナーエリア */
	#side .side-relation-link { margin-top:2em; }
		#side .side-relation-link ul { list-style:none; }
		#side .side-relation-link ul li { margin-top:1em; }
			#side .side-relation-link ul li a {
				display:block;
				padding:1px; border:1px solid #B6B6B6; border-radius:3px;
				background:#FFF; }
			* html #side .side-relation-link ul li a { height:1%; }
				#side .side-relation-link ul li a img { vertical-align:bottom; border-radius:3px; }




#side .text-break-navigation { display:block; }



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

	ソリューション・製品領域
	
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */

	/* ITお役立ちエリア */
	.solution .basic #side .side-itutility-link{ margin-top:2em; border:1px solid #B6B6B6; border-radius:3px; }
		.solution .basic #side .side-itutility-link p{
			padding:15px 50px 15px 13px;
			border-bottom:2px solid #B6B6B6; border-radius:5px 5px 0 0;
			background:#fffae2 url(/common-o/img/solution/pic-itutility.gif) no-repeat 170px center;
			font-size:1.4rem; font-size:14px; line-height:1.3em; font-weight:bold; }
		.solution .basic #side .side-itutility-link ul { list-style:none; padding:10px 0; }
			.solution .basic #side .side-itutility-link ul li {
				font-size:12px; font-size:1.2rem; line-height:1.3em; }
			.solution .basic #side .side-itutility-link ul li a {
				display:block; padding:7px 5px 7px 25px;
				background:url(/common-o/img/icon-arrow-right.png) no-repeat 12px 0.85em; }
			.solution .basic #side .side-itutility-link ul li span { display:block;	padding:0 12px 0 25px; text-align:right;}



/* **********************************************************************************

	09. タブレット対応

********************************************************************************** */

@media
	only screen and (max-device-width:959px) and (min-device-width:600px) and (orientation:portrait),
	only screen and (max-device-width:959px) and (min-device-width:600px) and (min-device-height:600px) and (min-resolution: 144dpi) {

/* -------------------------------------------------------------------
	コンチネンタルエリアサイド
------------------------------------------------------------------- */
#side { float:none; width:auto; padding:10px; box-shadow:inset 0 10px 10px #767676; background:#949494;}
	#side .side-nav p { width:auto; }


/* -------------------------------------------------------------------
	サイドエリア
------------------------------------------------------------------- */
#side aside {width:690px; margin:0 auto;}

.side-nav {width:686px; margin:0 auto;}
.side-nav p {font-size: 16px; font-size: 1.6rem; line-height: 1.3;}
.side-nav p a:hover { text-decoration:none; color:#333; }
.side-nav ul li {font-size: 12px; font-size:1.2rem; line-height:1.3;}
.side-nav ul li.parent-current .parent-current ul li a {padding: 5px 10px;}
.side-nav ul li.parent-current .parent-current ul li.parent-current li a {
	padding: 5px 10px 5px 20px;
	background: url(/common-o/img/icon-side-nav-tree.png) no-repeat 10px 0.9em;}

/* ナビゲーション */
.side-nav ul li a,
.side-nav ul li.current,
.side-nav ul li.current ul li a,
.side-nav ul li.parent-current a,
.side-nav ul li.parent-current ul li.current,
.side-nav ul li.parent-current ul li.current ul li a,
.side-nav ul li.parent-current ul li a,
.side-nav ul li.parent-current ul li.parent-current a,
.side-nav ul li.parent-current ul li.parent-current ul li a,
.side-nav ul li.parent-current ul li.parent-current ul li.parent-current ul li a {
	background-image:url(/common-o/img/icon-arrow-right-large-gray.png);
	background-repeat:no-repeat;
	background-position:98.5% center; }
.side-nav ul li.parent-current ul li.parent-current ul li.current ul li a,
.side-nav ul li.parent-current ul li.parent-current ul li.parent-current ul li a,
.side-nav ul li.parent-current ul li.parent-current ul li.parent-current ul li.current a {
	background-image:url(/common-o/img/icon-arrow-right-large-gray.png),url(/common-o/img/icon-side-nav-tree.png);
	background-repeat:no-repeat,no-repeat;
	background-position:98.5% center,10px 0.5em; }
.side-nav ul li a.icon-blank {
	padding-left:10px;
	background-image:url(/common-o/img/icon-blank.png);
	background-repeat:no-repeat;
	background-position:98.5% center; }

.side-nav p a:hover,
.side-nav ul li a:hover,
.side-nav ul li.current ul li a:hover,
.side-nav ul li.parent-current ul li a:hover,
.side-nav ul li.parent-current ul li.current ul li a:hover,
.side-nav ul li.parent-current ul li.parent-current a:hover,
.side-nav ul li.parent-current ul li.parent-current ul li a:hover,
.side-nav ul li.parent-current ul li.parent-current ul li.current ul li a:hover,
.side-nav ul li.parent-current ul li.parent-current ul li.parent-current a:hover,
.side-nav ul li.parent-current ul li.parent-current ul li.parent-current ul li a:hover { text-decoration:none; color:#333; }
.side-nav ul li.current a:hover,
.side-nav ul li.parent-current ul li.current a:hover,
.side-nav ul li.parent-current ul li.parent-current ul li.current a:hover,
.side-nav ul li.parent-current ul li.parent-current ul li.parent-current ul li.current a:hover { text-decoration:none; color:#fff; }

.side-priority-link ul li { font-size: 12px; font-size: 1.2rem; line-height: 1.3;}
.side-priority-link ul li a {padding: 10px 30px 10px 10px; background:url(/common-o/img/icon-arrow-right-large-gray.png) no-repeat 98.5% center;}
.side-priority-link ul li a.icon-external{padding: 10px 30px 10px 10px; background:url(/common-o/img/icon-external.png) no-repeat 98.5% center;}
.side-priority-link ul li.current a {background:#fceedc url(/common-o/img/icon-arrow-right-large-gray.png) no-repeat 98.5% center; color:#a60000; font-weight:bold;}

/* バナーエリア */
#side .side-relation-link { margin-top:10px; padding:10px 0 10px 10px; background:#f6f3f2;}
	#side .side-relation-link ul li { margin:0 6px 0 0; float:left; }
	#side .side-relation-link ul li a img{ display:block; }
	#side .side-priority-link ul li a:hover { text-decoration:none; color:#333; }
	#side .side-priority-link ul li.current a { background: #fff; }

#side .text-break-navigation { display:inline-block; margin-left:0; }



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

	ソリューション・製品領域
	
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */


/* バナーエリア */
.solution .basic #side .side-relation-link { display:none; }


/* ITお役立ち情報 */
.solution .basic #side .side-itutility-link { display:none; }



}




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

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

	タブレットメニュー
	
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* */


/* *******************************************************************
	タブレットメニュー
******************************************************************* */
/* メニューボタン */
#tablet-menu-button { 
	display:none; padding:0; width:710px; height:27px; margin:-33px auto 0 auto; text-align:right;}
#tablet-menu-button a { cursor:pointer; width:100%; }

/* メニュー */
#tablet-menu-container-outer { 
	display:block; width:710px; margin:0 auto 5px; padding:0; font-size:14px; font-size:1.4rem; line-height:1.5em; overflow:hidden;
	-webkit-transition:max-height 0.4s linear; -moz-transition:max-height 0.4s linear; transition:max-height 0.4s linear; max-height:0; }
#tablet-menu-container-outer.on { max-height:10000px; }
	#tablet-menu-container-outer #tablet-menu-container {
		margin:9px 0 0 0; padding:10px 10px 10px; position:relative;
		z-index:2; background:#4d3838; border-radius:5px;}
	#tablet-menu-container-outer #tablet-menu-container:after{
		position:absolute; top: -18px; right:35px;
		width: 0; height: 0;
		border: 10px solid transparent; border-bottom-color: #4d3838;
		content: " "; }

	#tablet-menu-container-outer #tablet-menu-close { float:right;}
		#tablet-menu-container-outer #tablet-menu-close a{
			display:block; cursor:pointer;
			padding:3px 10px; border-radius:5px; border:1px solid #FFF;
			background:#f8f8f8 ;
			background:-moz-linear-gradient(top, #878787, #4c4c4c);
			background:-ms-linear-gradient(top, #878787, #4c4c4c);
			background:-o-linear-gradient(top, #878787, #4c4c4c);
			background:-webkit-gradient(linear, center top, center bottom, from(#878787), to(#4c4c4c));
			background:-webkit-linear-gradient(top, #878787, #4c4c4c);
			background:linear-gradient(to bottom, #878787, #4c4c4c);
			color:#FFF;}
			
			
#tablet-menu-container-outer #tablet-menu-navi { 
	border:2px solid #b6b6b6; border-width:2px; border-radius:5px; overflow:hidden;
	margin:10px 0 0;}