@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 {
	margin: 0; padding: 0; font-size:100%; line-height: inherit;
	box-sizing: border-box;
}
body { -webkit-text-size-adjust: 100%; line-height: 1; }
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;}




/* ! ---------- hiddenItem / vanishItem ---------- ---------- ---------- ---------- */

.hiddenItem { visibility: hidden; }
.vanishItem { display: none; }

@media screen and (max-width:760px) {	/* For SmartPhone */
	.hiddenItem.sp-visibleItem { background:none; color :#333; visibility: visible; }
  	.hiddenItem.sp-visibleItem:before {    content: none; }
}

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

body{
	background: #fff;
    /* font-family: Helvetica , Arial , Verdana , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "メイリオ" , Meiryo , sans-serif; */
    font-family: "Open Sans", arial, sans-serif; 
	color:#777;
	line-height: 1;
    /* 文字サイズは、block.cssで定義しています */
}
a {color:#243c6f;}
a:hover {color:#4A66A0;}



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

#HeaderArea .inner,
#GlobalNaviArea .inner,
#BredList .inner,
#BodyArea,
#FooterNaviArea .inner,
#FooterExtraArea .inner { width: 100%; }


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

/* 全体 */
#Wapper {}


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

/* ヘッダエリア全体 */
#HeaderArea {position: fixed; z-index:5;  height:76px;margin: 0; top:0px; left:0px; background: linear-gradient(to bottom,  #ffffff 97%,#f0f0f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ width:100%; }
#HeaderArea .inner { margin: 0 auto; position: relative; }
#HeaderArea a{ color:rgba(255,255,255,0.5);text-decoration: none; }
#HeaderArea .header_name{color: #333;}


#pageHeaderBlock #corp_logo_area, 
#pageHeaderBlock #corp_logo_area div,
#pageHeaderBlock #corp_logo_area div a  { min-height:76px; virtical-align:middle; }



#pageHeaderBlock { /*	margin:0 2%; width:96%;	*/ margin:0; width:100%;	}


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

/*
#VisualArea { height:698px;background:#f6f6f6;  margin:0; overflow:hidden;}
#VisualArea { background: #aaa url(../../images/visual_main.jpg) center center no-repeat;}
body#index #VisualArea { height: 300px;}
*/
#VisualArea { display:none; }


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

/* グローバルナビ全体 */
#GlobalNaviArea {float: right; font-size:12px; }
#GlobalNaviArea .inner {}
#GlobalNaviArea .inner ul { height: 76px; }
#GlobalNaviArea ._level-1 > li  { display: inline-block;position: relative;  padding: 0 0.3em; color: #333;}

/* ナビの各ボタンのデザイン */
#GlobalNaviArea li:first-child{ /*display: none;*/ }
#GlobalNaviArea ._level-1 > li > a { display: block; padding: 0 6px 0 6px; color: #666; text-decoration: none; line-height: 76px; }
#GlobalNaviArea ._level-1 > li .t1 { display: block; font-size: 14px;}
#GlobalNaviArea ._level-1 > li._hasSub .t1:after { position: absolute; bottom: 0px; right: 0; content:"\f107"; font-size: 10px; font-family: FontAwesome;}
#GlobalNaviArea ._level-1 > li .t2 { display: none;}

#GlobalNaviArea ._level-1 > li li,
#GlobalNaviArea ._level-1 > li li > a { line-height: 1.8em; }


/* 現在表示してるナビのデザイン */
#GlobalNaviArea ._level-1 > li._current > a,
#GlobalNaviArea ._level-1 > li._ownCurrent > a{ /*color:#666;*/ color:#333;font-weight:normal; /* background: #fdfdfd; */ }

/* 工事中ナビのデザイン */
#GlobalNaviArea ._level-1 > li._underconst > a{ color: rgba(255,255,255,0.8); }

/* マウスーバー時 */
#GlobalNaviArea ._level-2 {position: absolute; width: 200px; padding: 0px; background:  rgba(223,240,255, 0.8);  box-sizing: border-box; border-radius:0 0 0 0; box-shadow:0px 0px 10px rgba(0,0,0,0); z-index:1000;}
#GlobalNaviArea ._level-2 li a { display: block; padding: 10px 12px 10px 12px; margin: 1px 0; text-decoration: none; color: #666;}
#GlobalNaviArea ._level-2 li:first-child a { border-top: none;}
#GlobalNaviArea ._level-2 li a:hover { background: rgba(201,217,255, 0.9); color: #333;}
#GlobalNaviArea ._level-2 {display: none;}
#GlobalNaviArea ._level-2 > li._current > a,
#GlobalNaviArea ._level-2 > li._ownCurrent > a{ font-weight: normal;background: rgba(255,255,255, 0.1); color: #333; }
#GlobalNaviArea ._level-1 > li:hover ._level-2 { display: block;}


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

#BredList {  margin: 80px 0 0 0; height: 20px; text-align: left;}
#BredList .inner { margin: 0 auto; padding:76px 20px 0 20px; font-size: 0.7em; line-height: 2em; font-weight: 250; }
#BredList a { color: #333; font-weight: 250; }
#BredList a:hover { text-decoration:underline;}
body#index.group_ #BredList{display: none;}


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

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

/* コンテンツエリア */
#ContentsArea { padding-top:76px; }


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


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

/* 全体 */
#FooterNaviArea { background: #f7f7f7;margin: 50px 0 0 0;line-height: 1.2; }
#FooterNaviArea,
#FooterNaviArea a{color: #888;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 { line-height: 1.6; }
#FooterExtraArea,
#FooterExtraArea a{	color: #888;text-decoration: none;}
#FooterExtraArea .inner { padding: 40px 0 40px 0; margin: 0 auto; position: relative;}

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

/* コピーライト */
#Copyright { background: #f7f7f7;color: #888; text-align: center; font-weight: bold; padding: 100px 0 10px 0;}


/* ページトップボタン */
.cms-pagetop { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; padding: 12px 0 0 ; 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 .mobileBG { display: none; position: fixed; top: 0; left: 0; z-index: 4999; 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: 1px 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.show .mobileBG { display: block;}
#MobileUI.show .menuBtn { color: #aaa;}
#MobileUI.show .mobileMenu { display: block;}

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

@media screen and (min-width:761px) {
	#GlobalNaviArea li:nth-last-child(2) ul._level-2 { margin-left: -150px !important; }  
	#GlobalNaviArea li:last-child ul._level-2 { margin-left: -120px !important; }  
}

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

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

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

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

@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;  }
	#ContentsAreaWide { margin-top:0;padding: 10px; }
	#ContentsArea { float: none; width: auto;padding: 10px; }
	
	/* フッタ */
	#Copyright { border:none; padding: 40px 10px 40px 10px; }
	
}





/* ! ---------- Custome Parts : Top Page ---------- ---------- ---------- ---------- */
.top_contents_box { margin:0 auto; padding: 100px 14%; }
#top_contents01 {     background-size: cover; background-image: url(/html/themes/img/bg/7ColorsBlog-slid2-1.jpg);}
#top_contents02 {     padding-bottom:40px;}
@media screen and (max-width:960px) {	/* For Tablet */
	.top_contents_box { dispaly:block; width:100%;  margin:0 auto; padding: 0 3% 10px 3%; }
}
@media screen and (max-width:760px) {	/* For SmartPhone */
	.top_contents_box { dispaly:block; width:100%;  margin:0 auto; padding: 0 0 10px 0; }
}



/* ! ---------- Custome Parts : blog Contents Block / blog Contents Link---------- ---------- ---------- ---------- */
#ContentsArea .blogMainVisual { display:block; margin:0; padding:0 0 40px 0; max-height: 360px; overflow: hidden; }
#ContentsArea .blogMVLink { display:block; width:calc( 100% - 14% ); margin:0 auto; padding: 1em 0; text-align:right; }
#ContentsArea .blogContents { display:block; margin:0; padding:80px 0; line-height:1.8em; border:0px solid #fff;  }
#ContentsArea .blogContents+.blogContents { padding:0 0 40px 0; }
#ContentsArea .blogContents ul.blogImageList { display: flex; justify-content: space-around; flex-wrap:wrap;}
/*
#ContentsArea .blogContents ul.blogImageList li { display: block; width:calc( 25% - 1em );  margin:0 0 1.5em 0; padding: 0.5em; background: #eee; border: 1px solid #ccc; }
#ContentsArea .blogContents ul.list1 li, 
#ContentsArea .blogContents ul.list2 li { width:calc( 50% - 1em ); }
#ContentsArea .blogContents ul.list3 li { width:calc( 33.3% - 1em ); }
*/
#ContentsArea .blogContents ul.blogImageList li { display: block; width:calc( 33.3% - 1em );  margin:0 0 1.5em 0; padding: 0.5em; background: #eee; border: 1px solid #ccc; }
@media screen and (max-width:960px) {	/* For Tablet */
	#ContentsArea .blogMVLink { display:block; width:calc( 100% - 6% ); }
	#ContentsArea .blogContents  { display:block; margin:0 3%; padding:20px 0; }
	/*
		#ContentsArea .blogContents ul.blogImageList li { display: block; width:calc( 33.3% - 1em ); }
		#ContentsArea .blogContents ul.list1 li, 
		#ContentsArea .blogContents ul.list2 li,
		#ContentsArea .blogContents ul.list3 li { width:calc( 33.3% - 1em ); }
	*/
	#ContentsArea .blogContents ul.blogImageList li { display: block; width:calc( 50% - 1em ); }
}
@media screen and (max-width:760px) {	/* For SmartPhone */
	#ContentsArea .blogMVLink { display:block; width:100%; }
	#ContentsArea .blogContents  { display:block; margin:0; padding:20px 0; }
	/*
		#ContentsArea .blogContents ul.blogImageList li { display: block; width:calc( 50% - 1em ); }
		#ContentsArea .blogContents ul.list1 li, 
		#ContentsArea .blogContents ul.list2 li,
		#ContentsArea .blogContents ul.list3 li {  width:calc( 50% - 1em ); }
	*/
	#ContentsArea .blogContents ul.blogImageList li { display: block; width:calc( 100% - 1em ); }
}

#ContentsArea .inputblogContentSub.blogContents { border:1px solid #ccc; padding:0; margin-bottom:40px;  }
#ContentsArea .blogContents dl.publishDate { display:table; max-width:50%; width:12em; height:100%; float:left;     padding-top: 12px; margin-bottom: 0; }
#ContentsArea .blogContents dl.publishDate dt { display:table-cell; width:4em; height:32px; text-align:center; vertical-align:middle; }
#ContentsArea .blogContents dl.publishDate dd { display:table-cell; width:8em; height:32px; text-align:center; vertical-align:middle; }
#ContentsArea .blogContents div.productLists { display:block; min-width:50%; width:calc( 100% - 12em ); height:100%; float:right; border-left:1px solid #ccc; }
#ContentsArea .blogContents ul.productLink { display: flex;justify-content: flex-end; flex-direction: row; flex-wrap: wrap; align-content: space-around; align-items: center; }
#ContentsArea .blogContents ul.productLink li.products { display: inline-block; min-width: 192px; width:auto; margin:0; padding: 4px 0; }
#ContentsArea .blogContents ul.productLink li.products a {  display:table; width:100%; text-align:center; background: #fff; color:rgba(33,33,33,0.7); padding:8px; border-radius:8px; }
#ContentsArea .blogContents ul.productLink li.products a:hover { background: #f0f0f0; color:rgba(33,33,33,1.0);  }
#ContentsArea .blogContents ul.productLink li.products a:before { content:""; display: table-cell; width:32px; height:32px; }
#ContentsArea .blogContents ul.productLink li.e019 a:before { background-size: cover; background-color: rgba(255, 255, 255, 0); background-image: url(/images/common/icon/e019_turpolin.png); }
#ContentsArea .blogContents ul.productLink li.e01e a:before { background-size: cover; background-color: rgba(255, 255, 255, 0); background-image: url(/images/common/icon/e01e_tromat.png); }
#ContentsArea .blogContents ul.productLink li.e029 a:before { background-size: cover; background-color: rgba(255, 255, 255, 0); background-image: url(/images/common/icon/e029_nobori.png); }
#ContentsArea .blogContents ul.productLink li.e00e a:before { background-size: cover; background-color: rgba(255, 255, 255, 0); background-image: url(/images/common/icon/e00e_rollscreen.png); }
#ContentsArea .blogContents ul.productLink li.e013 a:before { background-size: cover; background-color: rgba(255, 255, 255, 0); background-image: url(/images/common/icon/e013_widesizeIJPrint.png); }
#ContentsArea .blogContents ul.productLink li.e00f a:before { background-size: cover; background-color: rgba(255, 255, 255, 0); background-image: url(/images/common/icon/e00f_sign.png); }
#ContentsArea .blogContents ul.productLink li.e036 a:before { background-size: cover; background-color: rgba(255, 255, 255, 0); background-image: url(/images/common/icon/e036_wareprint.png); }
#ContentsArea .blogContents ul.productLink li.e035 a:before { background-size: cover; background-color: rgba(255, 255, 255, 0); background-image: url(/images/common/icon/e035_sticker.png); }
#ContentsArea .blogContents ul.productLink li.e04b a:before { background-size: cover; background-color: rgba(255, 255, 255, 0); background-image: url(/images/common/icon/e04b_airsign.png); }
#ContentsArea .blogContents ul.productLink li.none a:before { background: none; }
#ContentsArea .blogContents ul.productLink li.products a span {  display: table-cell; vertical-align:middle; margin:0; padding: 0 8px; }

#ContentsArea .blogContents ul.blogLinkList { display: flex; justify-content: space-between; flex-wrap:wrap; }
#ContentsArea .blogContents ul.blogLinkList li { display: block; margin:0 0 1.5em 0; padding: 0.5em; text-align:center; }
#ContentsArea .blogContents ul.blogLinkList li a { display: inline-block; margin:0; padding: 0.5em 1em; text-align:center; border:1px solid #ccc; background: #fff; font-weight: bold; color:rgba(33,33,33,0.7); }
#ContentsArea .blogContents ul.blogLinkList li a:hover { background: #f0f0f0; color:rgba(33,33,33,1.0);  }

#ContentsArea .blogContents ul.link4 li { width:calc( 25% - 1em ); }
#ContentsArea .blogContents ul.link3 li { width:calc( 33.3% - 1em ); }
#ContentsArea .blogContents ul.link2 li { width:calc( 50% - 1em ); }
#ContentsArea .blogContents ul.link1 li { width:calc( 100% - 1em ); }

#ContentsArea .blogContents ul.blogLinkList li:first-child { text-align:left; }
#ContentsArea .blogContents ul.blogLinkList li:last-child { text-align:right; }




/* ! ---------- Custome Parts : Page footer contetnts ---------- ---------- ---------- ---------- */
#examination h2.default, 
#joining h2.default {	height:3em; overflow:hidden;	}
#examination h2.default:after, 
#joining h2.default:after {	position: relative;	content: " ";	display:inline-block;	background: #82c2ed;	opacity: 0.4;  	height: 5em;	width: 12em;	clip-path: polygon(100% 0, 25% 100%, 0 100%);	transform: rotate(22deg);	left: -10em;	top: -2em;  	z-index:0;  }
#examination h2.default span, 
#joining h2.default span {	position: relative;	z-index:1;  top: -4em; }
/* ! ---------- ---------- ---------- ---------- Custome Parts : Page footer contetnts ---------- */