@charset "UTF-8";

/* 
	サイトUI CSS

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

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

 */
 

/* ! ---------- アイコンフォント ---------- ---------- ---------- ---------- */

@import url('//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');


/* ! ---------- reset ---------- ---------- ---------- ---------- */

body ,h1, h2, h3, h4, h5, h6, p, ol, ul, li, blockquote, pre, a ,div,main {
	margin: 0; padding: 0; font-size:100%; line-height: inherit;
	box-sizing: border-box;
}
body { 
  -webkit-text-size-adjust: 100%; 
  line-height: 1;
  height:100%;
}
ol, ul { list-style: none;}
table { border-collapse: collapse; border-spacing: 0;}
th, td { vertical-align: top; text-align:left; font-weight: normal;}
img { border: 0; vertical-align: bottom;}


/* ! ---------- clearfix ---------- ---------- ---------- ---------- */

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}


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

body{
	/*border-top: 5px solid #433171;*/
	background: #FFFFFF;
	font-family: Helvetica , Arial , Verdana , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "メイリオ" , Meiryo , sans-serif;
	color:#000;
	line-height: 1;
    /* 文字サイズは、block.cssで定義しています */
}

a {
  color:#000;
  text-decoration:none;
  /*white-space:nowrap;  */
}


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

/*#HeaderArea .inner,
#GlobalNaviArea .inner,
#BredList .inner,
#BodyArea,
#FooterExtraArea .inner { width: 760px; }*/
#HeaderArea .inner,
/*#SideArea,*/
#BredList .inner,
#BodyArea,
#FooterNaviArea .inner,
#FooterExtraArea .inner { width: 980px; }
/*#BredList .inner,
#FooterNaviArea .inner,
#FooterExtraArea .inner { width: 960px; }
#BodyArea{ width: 830px; }
#ContentsArea{ width: 720px; }*/
/*#SideArea,
#SubNaviArea { width:190px; }*/
/*#SideArea,
#SubNaviArea { width:120px; }*/


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

/* 全体 */
#Wapper {}


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

/* ヘッダエリア全体 */

/*#HeaderArea { position: relative; margin: 20px 0 20px 0; color: #333;}*/
#HeaderArea { position: relative; margin: 0 0 20px 0;}
#HeaderArea .inner { margin: 0 auto; position: relative; }
#HeaderArea a{ color: #333;text-decoration: none; }
#HeaderArea .header_read{color: #888;}
#HeaderArea .header_name{color: #333;}
#HeaderArea .header_tel{color: #333;}
#HeaderArea .header_time{color: #888;}
#HeaderArea .header_contact{color: #333;}


#HeaderArea.inner {
  position: fixed;
  overflow: hidden;
  top: 0; left: 0;
  height: 105px;
  width: 100%;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2); 
  background: #fff;
}
#HeaderArea .inner .title{
  display: inline-block; 
  padding: 0 0 0 0; 
  font-size: 5px;
  font-weight: bold;
}
#HeaderArea .inner a{color: #000; text-decoration: none;}
#HeaderArea  .menuBtn { position:absolute; top: 0px; right: 0px; width: 50px; height: 38px; text-align: center; padding: 12px 0 0 0;}
#HeaderArea  .menuBtn.active {color: #888;}


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

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

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

#VisualArea { height: 5px; margin: 0 0 60px 0;}
#VisualArea { box-shadow:0px 1px 5px rgba(0,0,0,0.4) inset;}
#VisualArea { background:#FFFFFF;}


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

/* グローバルナビ全体 */
/*#GlobalNaviArea {float: right;}
#GlobalNaviArea .inner {}
#GlobalNaviArea ._level-1 > li { display: inline-block;}

/* ナビの各ボタンのデザイン */
/*
#GlobalNaviArea li > a { display: block; padding: 0 0 0 17px; text-decoration: none;}
#GlobalNaviArea li > a { color:#000;opacity: 0.5;}
#GlobalNaviArea li .t1 { display: block;}
#GlobalNaviArea li .t2 { display: none;}


/* 現在表示してるナビのデザイン */
/*
#GlobalNaviArea li._current > a,
#GlobalNaviArea li._ownCurrent > a{opacity: 1;font-weight: bold;}

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

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


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

#BredList { margin: 0 0 40px 0;height: 20px;}
#BredList .inner { margin: 0 auto;}
#BredList a { color: #333;}
#BredList a:hover { text-decoration:underline;}
body#index #BredList{display: none;}


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

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

/* トップページ用コンテンツエリア */
#ContentsAreaWide {  }

/* コンテンツエリア */
#ContentsArea {
  flex:1;
  margin:0 50px;
}
/*
#ContentsArea {float: right;}

#ContentsArea { 
  float: center;
  background: #fff;
  padding: 20px;
  /*box-shadow:0px 0px 2px rgba(0,0,0,0.1);0524コメントアウト(藤井)*/
}*/

/* サイドエリア(ローカルナビ等を配置) */
#SideArea {
  float: left;
  margin-top:5px;
}
/*
#SideArea { 
  display: inline-blocx;
  align-items: center;
  justify-content: center;
  position: -webkit-sticky;
  position: fixed;
  top: 10px;
  right:20px;
  width: 130px;
  height: 100%;
}
/* ! ---------- bodyエリアサイドローカルナビ #CategoryNavi ---------- ---------- ---------- ---------- */
#CategoryNavi{
  margin-top:10px;
}
#Categoryinner{
  position:sticky;
  top:20px;
  left:0;
  margin-right:5px;
}
/*#Categoryinner h2{
  margin:20px auto;
}*/

#Categoryinner._level-2 > li._current > a{
  padding-bottom: 0px;

}
#Categoryinner li > a {
  display: block;
  color:#333;
  text-decoration: none;
  position: relative;
  padding: 10px 5px 0px 5px;
  line-height: 1.2;
}

#Categoryinner li > a:hover{
	color:#34B7C5;
  	text-decoration: none;
}


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

/* ローカルナビ全体 */
#SubNaviArea {
  position:sticky;
  top:20px;
  left:0px;
  margin:10px 0 0 5px;
}

#SubNaviArea ._type-html { padding: 10px 0 5px 0;border-top:none!important;}
#SubNaviArea ._type-html b{display: block;padding: 15px 0 10px 0;margin-bottom:-5px;font-size:14px;border-bottom: 2px solid #666;}

#SubNaviArea li > a {
  display: block;
  color:#333;
  text-decoration: none;
  font-size:14px;
}
/*左側サイドバー各コンテンツhover設定*/
#SubNaviArea li > a:hover {
  	color:#34B7C5;
  	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: 10px;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: 20px 5px 20px 5px;line-height: 1.2;}*/
#SubNaviArea ._level-2 > li > a { padding: 10px 5px 10px 5px;line-height: 1.2;}
/*#SubNaviArea ._level-2 > li._current > a { background:#f7f7f7;color:#333;font-weight: bold;}*/
/*#SubNaviArea ._level-2 > li._current > a {
   padding-bottom: 5px;
  position: relative;
}
*/
#SubNaviArea ._level-2 > li._current > a {
   padding-bottom: 0px;
  position: relative;
}
#SubNaviArea ._level-2 > li._current > a :hover{
 text-decoration:underline;
}

#SubNaviArea ._level-2 > li._current > a
#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 5px;line-height: 1.2;}
#SubNaviArea ._level-3 > li._current > a { background:#f7f7f7;color:#333;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 5px;line-height: 1.2;}
#SubNaviArea ._level-4 > li._current > a { background:#f7f7f7;color:#333;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;}
/* ! ---------- サイドローカルナビ #GlobalNaviArea ---------- ---------- ---------- ---------- */

/* グローバルナビ全体 */
/*
#GlobalNaviArea {font-size: 12px;}
#GlobalNaviArea {
	height:100%;
  	/*float:right;*/
}
/*
#GlobalNaviArea ._type-html { padding: 15px 0 5px 0; }
#GlobalNaviArea li > a { display: block;color:#333;text-decoration: none;}

/* ローカルナビ第1階層(タイトル) */
/*
#GlobalNaviArea ._level-1 {}
#GlobalNaviArea ._level-1 .t1{font-size: 16px;}
#GlobalNaviArea ._level-1 .t2{display: block;color: rgba(0,0,0,0.25);margin: 5px 0 0 0;}
#GlobalNaviArea ._level-1 > li {}
#GlobalNaviArea ._level-1 > li > a { padding: 20px 0 20px 5px;}
#GlobalNaviArea ._level-1 > li._current > a,
#GlobalNaviArea ._level-1 > li._ownCurrent > a{border-top: 2px solid #333;font-weight: bold;}

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

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

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

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

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

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





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

#FooterNaviArea { background: #f7f7f7; margin: 50px 0 0 0;line-height: 1.2; }
#FooterNaviArea,
#FooterNaviArea a{
  background:#a9b8c3;
  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 {
	margin:0 auto;
	width:50%;
	text-align:center;
}
#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 { 
  	margin: 50px 0 0 0;
 	line-height: 1.6; 
}
#FooterExtraArea,
#FooterExtraArea a{	color:#333;text-decoration: none;}
#FooterExtraArea .inner { padding: 40px 0 40px 0; margin: 0 auto; position: relative;}

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

/* コピーライト */
#Copyright { color:#333; padding: 40px 0 40px 0;}


/* ページトップボタン */
.cms-pagetop { 
  position: fixed; 
  bottom: 20px; 
  right: 20px; 
  width: 40px; 
  height: 40px; 
  padding: 4px 0 0 ; 
  font-size:30px;
  background:#fff; 
  color: #000; 
  text-align: center; 
  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; }


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

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

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

.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 .mobileHeader img{height: 100px;}/*0525追加*/
/* スマホ用メニュー背景 */
#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: 105px;
  width: 100%;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.2); 
  background: #fff;
}
#MobileUI .mobileHeader .title{
  display: inline-block; 
  padding: 0 0 0 0; 
  font-size: 5px;
  font-weight: bold;
}

#MobileUI .mobileHeader a{color: #000; text-decoration: none;}
#MobileUI .menuBtn { 
  position:absolute;
  top: 15px;
  right: 10px;
  width: 50px;
  height: auto;
  text-align:center;
  font-size:20px;
}
#MobileUI .menuBtn.active {color: #888;}

/* スマホ用メニュー */
#MobileUI .mobileMenu { display: none; position: fixed; top: 105px; left: 33px; right: 0%; bottom:0px; padding: 0 0 0 0; background:#fff; overflow-y: scroll;}
#MobileUI .mobileMenu a { color: #000; text-decoration: none; display: block; }
/*#MobileUI .mobileMenu .main ._level-1 > li { border-top: 1px solid #ddd}*/
#MobileUI .mobileMenu .main ._level-1 > li > a { padding: 20px 0 20px 40px; 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(52,183,197,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.show .mobileBG { display: block;}
#MobileUI.show .menuBtn { color: #aaa;}
#MobileUI.show .mobileMenu { display: block;}


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

/*@media screen and (max-width:1200px) {*/
@media screen and (max-width:980px) {
	/* 
		タブレット閲覧時には、
		ヘッダ・グロナビや、フッタメニュー等の幅を狭くする
	 */	 
  
	/* ヘッダ */
	#HeaderArea .inner,
	#GlobalNaviArea .inner{ width: 760px; }
  	/*サイドバー*/
  	#SubNaviArea{
	 /* top:0;*/
	  left:0;
	  /*margin-left:10px;/*/
  }

	/* メイン */
	#BodyArea { width: 760px; }
  	/*#BodyArea { width: 610px; }*/
	#BodyArea {  margin: 0 auto; }
 	#marginArea{ margin:50px;}
  	/*#SideArea{width: 760px;}
  	/*#SideArea { width: 100%;float: none;  margin: 40px auto 20px auto;padding: 0px; }*/
  	/*#SideArea { 
	  width: 130px;
	  width:760px;
	  margin: 40px auto 20px auto;
	  padding: 0px; }
  */
  	/*#ContentsArea { float: none; margin: 0 auto; }*/
  	/*#ContentsArea { margin: 0 auto; }*/
 	/*#ContentsArea { margin: 0 20px; }*/
  	#ContentsArea {
	  width: 610px;
	  margin:0 20px;
  }
	/* フッタ */
  	/*#FooterExtraArea,
	#FooterNaviArea,
 	#FooterNaviArea .inner  {
	  width:960px;}
	/*#FooterExtraArea .inner {
	  width: 100%;
	  margin: 0 auto;
  }*/

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

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

	/* メイン */
	#BodyArea {
	  width: auto;
	  padding:50px 5px 10px 5px; }
    /*#Bodyimg{display: none; }*/
	/*#BodyArea > div { padding: 0 }*/
  	/*#SideArea{display:none;}*/
  	#ContentsAreaWide { margin-top:0;padding: 10px; }
	/*#ContentsArea { float: none; width: auto;padding: 10px; }*/
  	#ContentsArea { 
	  float: none;
	  width: auto;
	  padding: 30px; 
	  margin:auto;
  }
	#CategoryNavi,
 	 #Categoryinner{display: none;}
	/* フッタ */
	#FooterNaviArea,
  	#FooterNaviArea .inner{
	margin-top:0;
	padding: 10px;
	width:auto;
  }
  /*FooterNaviArea,
  	#FooterNaviArea .inner{
	widrh:100%;
	 margin-top:0;padding: 10px;
  }*/
  #Copyright{
	padding: 40px 10px 40px 10px;
	border:none;
  }
  /*.text-center{
	float:left;
  }
  */
	/* #Copyright { 
	border:none;
	padding: 40px 10px 40px 10px;
 	width:auto;
  }*/
	
}