/* 
	サイトUI CSS

	ヘッダやフッタ、メニューなどサイトUIを定義しています。
	CSSを変更することにより、サイトデザインをカスタマイズことができます。

	※このCSSで定義したクラスは、CMS管理画面でのページ編集においては利用できません。

 */

/* ! ---------- 全体設定 ---------- ---------- ---------- ---------- */

body{
	background: #fff;
	font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	color:#333;
	line-height: 1;
    /* 文字サイズは、cms_block.cssで定義しています */
}
a {color:#4A66A0;}

/* ! ---------- UIの寸法 ---------- ---------- ---------- ---------- */

#HeaderArea .inner,
#GlobalNaviArea .inner,
#BredList .inner,
#BodyArea,
#FooterNaviArea .inner,
#FooterExtraArea .inner { width: 940px; }
#ContentsArea { width: 720px; }
#SideArea{ width:190px; }


/* ! ---------- 全体 #Wapper ---------- ---------- ---------- ---------- */

/* 全体 */
#Wapper {}


/* ! ---------- ヘッダエリア #HeaderArea ---------- ---------- ---------- ---------- */

/* ヘッダエリア全体 */
#HeaderArea {position: relative; height: 100px;margin: 0 0 30px 0;}
#HeaderArea .inner { margin: 0 auto; position: relative; }


/* ヘッダタイトル、ロゴ */
#HeaderArea .read {position: absolute;top: 15px;left: 0px; font-size: 12px;margin: 0 0 15px 0;color: #888;}
#HeaderArea .title {position: absolute;top: 45px;left: 0px; font-size: 28px;font-weight: bold;padding: 5px 0 0 10px;display: inline-block;color: #333;text-decoration: none;}
#HeaderArea .logo {padding: 0 0 0 10px;}

/* ヘッダのリンクリスト */
#HeaderArea .links { position: absolute;top: 10px;right: 0px; margin:0 0 10px 0;}
#HeaderArea .links li { font-size: 12px;display: inline-block; margin:0 0 0 5px; padding: 1px;}
#HeaderArea .links a { color: #333; text-decoration: none; display: block;}

/* ヘッダのテキスト */
#HeaderArea .extra { position: absolute; top: 40px; right:0;}
#HeaderArea .extra .tel { float: left; font-size: 12px; line-height: 1.4; text-align: center; margin: 0 10px;}
#HeaderArea .extra .tel big { font-size: 22px; font-weight: bold;}
#HeaderArea .extra .contact { float: left; font-size: 12px; line-height: 1.4; text-align: right;}
#HeaderArea .extra .contact a { display: block; color: #333; text-decoration: none; font-weight: bold; background: #f7f7f7; font-size: 14px; border: 1px solid #ddd; width: 180px; padding: 12px; margin: 2px 0; border-radius:5px; text-align: center; box-sizing: border-box;}

#HeaderArea .icon_circle { display: inline-block; padding: 5px 2px 2px 2px;background: #333; border-radius:50%; padding: 20 0; text-align: center; box-sizing: border-box;}
#HeaderArea .icon_circle i {color: #fff;}


/* ! ---------- ヘッダビジュアル #HeaderVisual ---------- ---------- ---------- ---------- */

#VisualAreaIndex { height: 300px; margin: -30px 0 30px 0;}
#VisualAreaIndex { background: #aaa/*MainVisual*/ url(../../images/visual_main.jpg) center center no-repeat;}
#VisualAreaIndex .inner { margin: 0 auto; }

#VisualArea { height: 150px; margin: -30px 0 30px 0;}
#VisualArea { background: #aaa/*MainVisual*/ url(../../images/visual_main.jpg) center center no-repeat;}
#VisualArea .inner { margin: 0 auto;}


/* ! ---------- グローバルナビ #GlobalNaviArea ---------- ---------- ---------- ---------- */

/* グローバルナビ全体 */
#GlobalNaviArea { background:#CC0000; margin: -30px 0 30px 0;}
#GlobalNaviArea .inner { margin: 0 auto; }
#GlobalNaviArea ._level-1 > li { float:left;position: relative;}

/* ナビの各ボタンのデザイン */
#GlobalNaviArea li > a { display: block; box-sizing: border-box; border-right: 1px solid rgba(255,255,255,0.25); padding: 20px 2px 14px 2px; color: #fff; text-align: center; text-decoration: none;}
#GlobalNaviArea li .t1 { display: block; font-size: 14px;}
#GlobalNaviArea li .t2 { display: block; font-size: 9px; color: rgba(255,255,255,0.5); margin: 2px 0 0 0;}
#GlobalNaviArea li:first-child a { border-left: 1px solid rgba(255,255,255,0.25);}

/* 現在表示してるナビのデザイン */
#GlobalNaviArea li._current > a,
#GlobalNaviArea li._ownCurrent > a{ background:#AA0000; }

/* 工事中ナビのデザイン */
#GlobalNaviArea li._underconst > a{ color:#555; }


/* ! ---------- パンくず #BredList ---------- ---------- ---------- ---------- */

#BredList { margin: 0 0 20px 0;font-size: 12px;height: 20px;}
#BredList .inner { margin: 0 auto;}
#BredList a { color: #333;}
#BredList a:hover { text-decoration:underline;}


/* ! ---------- メインカラム #BodyArea,#ContentsArea,#SideArea ---------- ---------- ---------- ---------- */

/* ヘッダの下に位置するメインのエリア */
#BodyArea { margin: 0 auto;min-height: 300px; }

/* トップページ用コンテンツエリア */
#ContentsAreaIndex { margin-top:-250px; }

/* コンテンツエリア */
#ContentsArea { float: right;  }

/* サイドエリア(ローカルナビ等を配置) */
#SideArea { float: left;}


/* ! ---------- サイドローカルナビ #SubNaviArea ---------- ---------- ---------- ---------- */

/* ローカルナビ全体 */
#SubNaviArea {font-size: 12px; }

#SubNaviArea ._type-html { padding: 15px 0 5px 0; }
#SubNaviArea li > a { display: block;color:#333;text-decoration: none;}

/* ローカルナビ第1階層(タイトル) */
#SubNaviArea .title { display: block; font-size: 18px; font-weight: bold; margin: 5px 0 25px 0;}
#SubNaviArea .title .t1{display: block;font-size: 18px;margin: 0 0 5px 0;}
#SubNaviArea .title .t2{ display: block;font-size: 12px;margin: 0 0 5px 0;}

/* ローカルナビ第2階層 */
#SubNaviArea ._level-2 {margin:10px 0 2px 0;}
#SubNaviArea ._level-2 > li {border-top: 1px solid #ddd;}
#SubNaviArea ._level-2 > li > a { padding: 25px 5px 25px 15px;}
#SubNaviArea ._level-2 > li._current > a { background:#CC0000;color:#fff;font-weight: bold;}
#SubNaviArea ._level-2 > li._ownCurrent {}

/* ローカルナビ第3階層 */
#SubNaviArea ._level-3 {margin:-10px 0 20px 0;padding: 0 0 0 10px;}
#SubNaviArea ._level-3 > li > a {padding: 10px 5px 10px 10px;}
#SubNaviArea ._level-3 > li._current > a { background:#CC0000;color:#fff;font-weight: bold;}
#SubNaviArea ._level-3 > li._ownCurrent {}

/* ローカルナビ第4階層 */
#SubNaviArea ._level-4 {padding: 0 0 0 10px;}
#SubNaviArea ._level-4 > li > a {padding: 10px 5px 10px 10px;}
#SubNaviArea ._level-4 > li._current > a { background:#CC0000;color:#fff;font-weight: bold;}

/* 工事中ナビのデザイン */
#SubNaviArea li._underconst { opacity: 0.5; }

/* ナビ以外のイレギュラーな要素 */
#SubNaviArea .extra{margin: 20px 0 10px 0; line-height: 1.4;}
#SubNaviArea .extra > *{ margin: 0 0 5px 0;}

/*第1階層のトグルは非表示*/
#SubNaviArea .title ._toggle-icon{display: none;}


/* ! ---------- フッタナビエリア #FooterNaviArea ---------- ---------- ---------- ---------- */

/* 全体 */
#FooterNaviArea { background:#f7f7f7;margin: 50px 0 0 0;line-height: 1.2; }
#FooterNaviArea,
#FooterNaviArea a{color:#333;text-decoration: none;}
#FooterNaviArea .inner { padding: 40px 0 40px 0;  margin: 0 auto; position: relative; }
#FooterNaviArea li > a { display: block;}

/* 第1階層のボタンのデザイン */
#FooterNaviArea ._level-1 > li { float:left;}
#FooterNaviArea ._level-1 > li > a { padding:5px 0; font-size: 14px;}

/* 第2階層のボタンのデザイン */
#FooterNaviArea ._level-2 {margin:5px 0 2px 5px;}
#FooterNaviArea ._level-2 > li > a { padding:5px 5px 5px 2px; font-size: 12px;}
#FooterNaviArea ._level-2 > li._current > a {font-weight: bold;}
#FooterNaviArea ._underconst a{ color:#999; }


/* ! ---------- フッタ追加情報エリア #FooterExtraArea ---------- ---------- ---------- ---------- */

#FooterExtraArea { background:#FFF; line-height: 1.6; font-size: 12px;}
#FooterExtraArea,
#FooterExtraArea a{	color:#333;text-decoration: none;}
#FooterExtraArea .inner { padding: 40px 0 40px 0; margin: 0 auto; position: relative;}
#FooterExtraArea .leftArea { float: left; width: 50%; text-align: center;}
#FooterExtraArea .rightArea { float: right; width: 50%; text-align: center;}
#FooterExtraArea .rightArea li { display: inline-block; margin: 5px;}


/* ! ---------- フッタそのほかエリア #Copyright,#PageTop ---------- ---------- ---------- ---------- */

/* コピーライト */
#Copyright { background:#CC0000; font-size: 12px;color:#fff; text-align: center; font-weight: bold; padding: 40px 0 40px 0;}


/* ページトップボタン */
#PageTop { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; padding: 12px 0 0 ; background:#fff; color: #000; text-align: center; box-sizing: border-box; cursor: pointer;border-radius:50%;box-shadow:0px 0px 10px rgba(0,0,0,0.2);}


/* ! ---------- UI用汎用クラス ---------- ---------- ---------- ---------- */

/* UIのデフォルトのボタンクラス */
._btn_default{cursor: pointer;}
._btn_default:hover { opacity: 0.8; filter: alpha(opacity=80); /* IE lt 8 */ -ms-filter: "alpha(opacity=80)"; /* IE 8 */ -moz-opacity: .80; /* FF lt 1.5, Netscape */ }

/* トグルボタンのアイコン */
._toggle-icon{float:right;padding:0 10px 0 0;}

/* 工事中ボタンのクラス */
.underconst { cursor: default }

/* 平行メニューでのカラム幅　平行メニューの個数に応じて、いずれかのクラスが適応されます */

.parallel-list li{ box-sizing: border-box; }
.parallel-list ._level-1._sum-1 > li{ width: 100%;}
.parallel-list ._level-1._sum-2 > li{ width: 50%;}
.parallel-list ._level-1._sum-3 > li{ width: 33.3%;}
.parallel-list ._level-1._sum-4 > li{ width: 25%;}
.parallel-list ._level-1._sum-5 > li{ width: 20%;}
.parallel-list ._level-1._sum-6 > li{ width: 16.6%;}
.parallel-list ._level-1._sum-7 > li{ width: 14.2%;}
.parallel-list ._level-1._sum-8 > li{ width: 12.5%;}
.parallel-list ._level-1._sum-9 > li{ width: 11%;}


/* ! ---------- スマホ閲覧時のUIパーツ ---------- ---------- ---------- ---------- */

#MobileUI{ display: none;}
#MobileUI .mobileHeader {z-index: 5010;}
#MobileUI .mobileMenu {z-index: 5000;}

/* スマホ用メニュー背景 */
#MobileUI .mobileBG { display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0,0,0,0.6);}

/* スマホ用ヘッダ */
#MobileUI .mobileHeader { position: fixed; overflow: hidden; top: 0; left: 0; height: 50px; width: 100%; box-shadow: 0px 0px 5px rgba(0,0,0,0.2); background: #fff;}
#MobileUI .mobileHeader .title{display: inline-block; padding: 15px 0 0 10px; font-size: 20px; font-weight: bold;}
#MobileUI .mobileHeader a{color: #000; text-decoration: none;}
#MobileUI .menuBtn { position:absolute; top: 0px; right: 0px; width: 50px; height: 38px; text-align: center; padding: 12px 0 0 0;}
#MobileUI .menuBtn.active {color: #888;}

/* スマホ用メニュー */
#MobileUI .mobileMenu { display: none; position: fixed; top: 48px; left: 40px; right: 0%; bottom:0px; padding: 0 0 50px 0; background:#fff; overflow-y: scroll;}
#MobileUI .mobileMenu a { color: #000; text-decoration: none; display: block; }
#MobileUI .mobileMenu .main ._level-1 > li { border-top: 2px solid #ddd}
#MobileUI .mobileMenu .main ._level-1 > li > a { padding: 15px 0 15px 10px; font-size: 14px;}
#MobileUI .mobileMenu .main ._level-2 > li > a { padding: 10px 0 10px 20px; font-size: 12px;}
#MobileUI .mobileMenu .main ._level-3 > li > a { padding: 8px 0 8px 40px; font-size: 12px;}
#MobileUI .mobileMenu .main ._level-4 > li > a { padding: 8px 0 8px 55px; font-size: 12px;}
#MobileUI .mobileMenu .main ._current { font-weight: bold;background: rgba(200,200,0,0.2);}
#MobileUI .mobileMenu .main ._level-1 > li._ownCurrent { border-top: 2px solid rgba(0,0,0,1)}
#MobileUI .mobileMenu .main ._level-2{ padding: 0 0 20px 0;}
#MobileUI .mobileMenu .extra li { border-top: 2px solid #ddd; padding: 15px 0 15px 10px; font-size: 14px;}

#MobileUI.show .mobileBG { display: block;}
#MobileUI.show .menuBtn { color: #aaa;}
#MobileUI.show .mobileMenu { display: block;}


/* ! ---------- レスポンシブ タブレット ---------- ---------- ---------- ---------- */

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

	/* 
		タブレット閲覧時には、
		ヘッダ・グロナビや、フッタメニュー等の幅を狭くする
	 */
	 
	/* ヘッダ */
	#HeaderArea .inner,
	#GlobalNaviArea .inner{ width: 760px; }
	
	/* メイン */
	#BodyArea { width: 760px; }
	#BredList .inner{ width: 720px; }
	#SideArea { width: 100%;float: none;  margin: 40px auto 20px auto;padding: 0px; }
	#BredList .inner { margin: 0 auto; }
	#BodyArea {  margin: 0 auto; }
	#ContentsArea { float: none; margin: 0 auto; }
	
	/* フッタ */
	#FooterNaviArea { display: none; }
	#FooterExtraArea .inner {width: 100%;}
	#FooterExtraArea .leftArea,
	#FooterExtraArea .rightArea { float: none; width: auto; padding: 10px;}
}

/* ! ---------- レスポンシブ スマホ ---------- ---------- ---------- ---------- */

@media screen and (max-width:760px) {
	/* 
		スマホ閲覧時には、
		ヘッダ・グロナビや、フッタメニューを非表示にして、
		かわりにスマホ用UIを表示する
	 */
	
	#MobileUI { display: block; }
	#Wapper {margin: 70px 0 0 0;}
	
	/* ヘッダ */
	#HeaderArea { display: none; }
	#GlobalNaviArea { display: none; }
	#VisualAreaIndex { display: none; }

	/* メイン */
	#BredList { display: none; }
	#BodyArea { width: auto; padding:10px 5px; }
	#BodyArea > div { padding: 0 }
	#ContentsAreaIndex { margin-top:0; }
	#ContentsArea { float: none; width: auto; }
	
	/* フッタ */
	#Copyright { border:none; padding: 40px 10px 40px 10px; }
	
}