@charset "utf-8";

/*****************************************
 テーマ以外のオリジナルCSS
******************************************/

@import url('../js/lightbox/css/lightbox.css'); /* lightbox */
@import url('design.css'); /* 個別デザイン */
/*@import url('../js/timeline/css/style.css');*/ /* タイムライン */

/*//////////////////////////////////////////////
  
  PC・モバイル共通CSS
  
///////////////////////////////////////////////*/


/*----------------------------------------------
  共通CSS
----------------------------------------------*/
.pc {
	display: block !important;
}
.sp {
	display: none !important;
}

div#flow01 {
	z-index: 30;
}

div#flow02 {
	z-index: 29;
}

div#flow03 {
	z-index: 28;
}

div#flow04 {
	z-index: 27;
}

div#flow05 {
	z-index: 26;
}

div#flow06 {
	z-index: 25;
}

div#flow07 {
	z-index: 24;
}

div#flow08 {
	z-index: 23;
}

div#flow09 {
	z-index: 22;
}

div#flow10 {
	z-index: 21;
}

div#flow11 {
	z-index: 20;
}

div#flow12 {
	z-index: 19;
}

div#flow13 {
	z-index: 18;
}

div#flow14 {
	z-index: 17;
}

div#flow15 {
	z-index: 16;
}

div#flow16 {
	z-index: 15;
}

div#flow17 {
	z-index: 14;
}

/*----------------------------------------------
  ヘッダー画像スライド
----------------------------------------------*/

.viewer {
	margin: 0 auto;
	width: 100%;
	position: relative;
	overflow: hidden;
}
.viewer ul {
	width: 100%;
	overflow: hidden;
	position: relative;
}
.viewer ul li {
	top: 0;
	left: 0;
	width: 100%;
	position: absolute;
}
.viewer ul li img {
	width: 100%;
	height: auto;
}

/* sideNavi
------------------------- */
.viewer .btnPrev,
.viewer .btnNext {
	margin-top: -25px;
	top: 50%;
	width: 50px;
	height: 50px;
	position: absolute;
	z-index: 101;
}
.viewer .btnPrev {
	left: 10px;
	background: #ccc url(../img/btnPrev.jpg) no-repeat center center;
}
.viewer .btnNext {
	right: 10px;
	background: #ccc url(../img/btnNext.jpg) no-repeat center center;
}


/* =======================================
	ClearFixElements
======================================= */
.viewer ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

.viewer ul {
	display: inline-block;
	overflow: hidden;
	margin: 0;
}

h1 {
	margin: 10px 5px;
	padding: 0;
}



/*--------------------------------------------------------
  float解除のCSS
--------------------------------------------------------*/
.clearfix::after {
	clear: both;
	content: "";
	display: block;
	height: 0;
}

.clearfix {
	overflow: hidden;
}


/*--------------------------------------------------------
  地図の表示
--------------------------------------------------------*/
section iframe {
	width: 100%;
}



/*--------------------------------------------------------
  お問い合わせフォームの表示
--------------------------------------------------------*/
textarea {
	width: 100%;
}

span.font-small {
	font-size: 70%;
	margin-left: 5px;
}

/*--------------------------------------------------------
  ブログカードの表示
--------------------------------------------------------*/

#container aside.blog-card {
	margin-bottom: 2em;
}

#container aside.blog-card h3 {
	background: #0852a0;
	font-size: 22.096px;
	color: #fff;
	font-weight: bold;
	padding: 14px 20px;
	margin: 0;
	border: none;
}

#container aside.blog-card ul {
	list-style-type: none;
	margin: 0 -15px 0 0;
	padding: 0;
}

#container aside.blog-card ul a {
	border-bottom: 1px solid #d9e0e2;
	display: block;
	overflow: hidden;
	padding: 0.5rem 0;
	position: relative;
	text-decoration: none;
}

#container aside.blog-card figure {
	width: 80px;
	height: 60px;
	background: none repeat scroll 0 0 #fff;
    float: left;
	margin: 5px 10px 5px 0;
	overflow: hidden;
	position: relative;
}

#container aside.blog-card figure img {
	bottom: 0;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 0;
	width: 80px;
	height: 60px;
	border: none;
}

#container aside.blog-card ul p {
	font-size: 16px;
	margin: 5px 0 0;
	overflow: hidden;
	color: #111;
}

#container aside.popular-entries ul p.popular-title {
	font-size: 120%;
	font-weight: bold;
	color: #555;
}


#container aside.blog-card ul a:hover {
	background: #f1f1f1;
}
 
#container aside.blog-card li {
	margin: 0 10px 0 0;
	display: inline-table;
	width: 48%;
}

#container aside.blog-card .view_count {
	position: absolute;
	bottom: 0px;
	right: 0;
	font-family: impact;
	color: #666;
	font-size: 14px;
	background: rgba(0,0,0,0.1);
	padding: 0 5px;
}
 
#container aside.blog-card .view_count:after {
	/*content: "view";*/
	color: #000;
	margin: 0 0 0 5px;
}



/*------------------------------------------------------------
　足場ページの画像横並び
-------------------------------------------------------------*/

ul#grid {
	width: 100%;
	display:flex;
	justify-content: center;
	padding: 0;
	list-style: none;
}

ul#grid li.box01 {
	width: calc(100% / 3);
	margin:14px;
}

ul#grid li.box01:hover, .box2:hover {
	opacity: 0.8;
}

ul#grid li.box01 img {
	width: 100%;
	height: auto;
}


/*--------------------------------------------------------
 2カラム　BOXのCSS
--------------------------------------------------------*/

.col2_box {
	width: 100%;
	padding: 0;
	list-style: none;
	display: flex;
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	-webkit-flex-flow:row wrap;
	-ms-flex-flow:row wrap;
	flex-flow:row wrap
}

.col2_box_contents {
	width: calc(98% / 2);
	margin: 0 2% 2em 0;
	position: relative;
}

.col2_box_contents:nth-child(2n) {
    margin-right: 0;
}

.col2_box_contents .title {
	border-top: 1px dotted #333;
	border-bottom: 1px dashed #333;
	margin-bottom: 1em;
}



.col2_box_contents p {
	line-height: 1.5;
	margin-top: 10px;
}

.col2_box_contents p span {
	background: #0056b4;
	position: absolute;
	right: 10px;
	bottom: 10px;
	font-size: 12px;
	border-radius: 3px;
}
.col2_box_contents p span a {
	color: #fff;
	display: block;
	padding: 3px 7px;
}

.col2_box_contents p span:hover {
	background: #1c1f87;
}

.col2_box_contents img.alignleft {
	clear: left;
	float: left;
	margin: 0 20px 0 0;
	padding: 15px 0 15px 15px;
}

/* 2カラムの背景 */
.lightgray {
	background: #f5f5f5;
}

.lightgreen {
	box-sizing: border-box;
	border: 1px solid #cccccc;
	border-radius: 3px;
	padding: 10px 40px;
}

/* 2カラムのタイトル */
.col2_box_contents h3.col2_title {
	font-size: 19.776px;
	margin: 15px 0 0;
}

.col2_box_contents h3.col2_title02 {
	font-size: 19.776px;
	margin: 15px 0 10px;
	color: #0852a0;
}

/* 2カラムのpタグ */
.lightgreen p {
	font-size: 16px;
	margin: 15px 0;
}

.col2_box_contents p.co2_tel {
	font-size: 41.886px;
	font-weight: bold;
	background: url("../images/common/2col_tel.png") no-repeat scroll 5px 10px;
	margin: 0 0 5px;
	padding-left: 45px;
	color: #0852a0;
}

.col2_box_contents p.col2_entrytime {
	margin: 0 0 15px;
	padding: 10px 5px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.col2_box_contents p.col2_entrytime span {
	background: #0852a0;
	border-radius: initial;
	bottom: initial;
	font-size: 12px;
	position: initial;
	right: initial;
	padding: 5px 10px;
	margin-right: 10px;
	color: #ffffff;
}

.col2_box_contents p.col2_button {
	background: #0852a0;
	text-align: center;
	border-radius: 3px;
	box-shadow: 0px 3px rgba(0, 0, 0, 0.3);
	position: relative;
	top: 0;
}

.col2_box_contents p.col2_button:hover {
	top: 1px;
	box-shadow: 0px 2px rgba(0, 0, 0, 0.3);
}

.col2_box_contents p.col2_button a {
	color: #fff;
	padding: 10px;
	display: block;
}



/*--------------------------------------------------------
 3カラム　BOXのCSS
--------------------------------------------------------*/
.col3_box {
	width: 100%;
	padding: 0;
	list-style: none;
	display: flex;
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	justify-content: center;
	-webkit-box-pack: center;/*--- Androidブラウザ用 ---*/
    -ms-flex-pack: center;/*--- IE10 ---*/
    -webkit-justify-content: center;/*--- safari（PC）用 ---*/
	
	-webkit-flex-flow:row wrap;
	-ms-flex-flow:row wrap;
	flex-flow:row wrap;

}
.col3_box li {
	width: calc(96% / 3);
	margin: 0 2% 2em 0;
	background: #f5f5f5; /*#f9f9f9*/
}


.col3_box li:nth-child(3n) {
    margin-right: 0;
}


ul.col3_box {
	width: 100%;
	padding: 0;
	list-style: none;
	display: flex;
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	justify-content: center;
	-webkit-box-pack: center;/*--- Androidブラウザ用 ---*/
    -ms-flex-pack: center;/*--- IE10 ---*/
    -webkit-justify-content: center;/*--- safari（PC）用 ---*/
	
	-webkit-flex-flow:row wrap;
	-ms-flex-flow:row wrap;
	flex-flow:row wrap;

}
ul.col3_box li {
	width: calc(96% / 3);
	margin: 0 2% 2em 0;
	background: #f5f5f5; /*#f9f9f9*/
}


ul.col3_box li:nth-child(3n) {
    margin-right: 0;
}

/*ul.col3_box li:last-child {
	margin: 0;
}*/

ul.col3_box img {
	width: 100%;
	height: auto;
}



/* 画像大・下部にテキスト表示 */

ul.col3_box .thumb {
	width: 92%;
	padding: 4%;
}

ul.col3_box .thumb img {
	width: 100%;
	height: auto;
}

ul.col3_box .text_list {
	margin: 15px;
}

ul.col3_box .text_list h3 {
	color: #333;
	font-size: 16px;
	border-bottom: 1px dotted #ccc;
	padding: 0 0 10px;
}


ul.col3_box .text_list p {
	font-size: 14px;
	padding: 0 0 10px 100px;
	line-height: initial;
	margin-bottom: 0;
	padding: 0 0 10px 100px;
	border-bottom: 1px dotted #ccc;
}

ul.col3_box .text_list p.seko_icon01 {
	background: url(../images/common/icon/seko01.png) no-repeat;
}

ul.col3_box .text_list p.seko_icon02 {
	background: url(../images/common/icon/seko02.png) no-repeat;
}


ul.col3_box .text_list p:last-child {
	border-bottom: none;
}


/* 画像小・上下部にテキスト表示 */

ul.col3_box li.number {
	background: none;
}

ul.col3_box li.number h3 {
	font-size: 19.776px;
	margin-left: 35px;
	color: #333;
	margin-bottom: 1em;
}

ul.col3_box { /* ランキング */
    counter-reset: wpp-ranking;
}
 
ul.col3_box li.number:before { /* ランキング */
    color: #FFF;
    content: counter(wpp-ranking, decimal);
    counter-increment: wpp-ranking;
    text-align: center;
    opacity: 0.999;
    float: left;
    line-height: 28px;
    width: 24px;
    height: 24px;
    background-color: #0056b4;
    border-radius: 12px;
    -moz-border-radius: 2px;
	position: absolute;
	z-index: 1;
	margin: 8px 0 0 5px;
	font-size: 16px;
	font-weight: bold;
}


/*--------------------------------------------------------
 4カラム　BOXのCSS
--------------------------------------------------------*/

.col4_box {
	width: 100%;
	padding: 0;
	list-style: none;
	margin-bottom: 2em;
	display: flex;
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	-webkit-flex-flow:row wrap;
	-ms-flex-flow:row wrap;
	flex-flow:row wrap
}

.col4_box_contents {
	width: calc(94% / 4);
	margin: 0 2% 2em 0;
	position: relative;
}

.col4_box_contents:nth-child(4n) {
    margin-right: 0;
}

.col4_box_contents a:hover {
	opacity: 0.7;
}

.col4_box_contents img {
	width: 100%;
	height: auto;
	display: block;
}


.col4_box_contents h3.col4_title {
	color: #fff;
	font-size: 13.655px;
	padding: 3.489px 10px;
	position: absolute;
	/*top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);*/
	bottom: 0;
	margin: 0;
	width: 100%;
	background: rgba(6, 112, 206, .9);
	box-sizing: border-box;
}

.col4_box_contents h3.col4_title::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -5px;
	right: 10px;
	width: 8px;
	height: 8px;
	border-top: #fff 2px solid;
	border-right: #fff 2px solid;
	transform: rotate(45deg);
}



ul.col4_box {
	width: 100%;
	padding: 0;
	list-style: none;
	display: flex;
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	justify-content: center;
	-webkit-box-pack: center;/*--- Androidブラウザ用 ---*/
    -ms-flex-pack: center;/*--- IE10 ---*/
    -webkit-justify-content: center;/*--- safari（PC）用 ---*/
	
	-webkit-flex-flow:row wrap;
	-ms-flex-flow:row wrap;
	flex-flow:row wrap;

}
ul.col4_box li {
	width: calc(94% / 4);
	margin: 0 2% 2em 0;
	background: #f5f5f5; /*#f9f9f9*/
}


ul.col4_box li:nth-child(4n) {
    margin-right: 0;
}

ul.col4_box img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}


/*--------------------------------------------------------
 5カラム　BOXのCSS
--------------------------------------------------------*/

.col5_box {
	width: 100%;
	padding: 0;
	list-style: none;
	margin-bottom: 2em;
	display: flex;
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	-webkit-flex-flow:row wrap;
	-ms-flex-flow:row wrap;
	flex-flow:row wrap
}

.col5_box_contents {
	width: calc(96% / 5);
	margin: 0 1% 2em 0;
	position: relative;
}

.col5_box_contents:nth-child(5n) {
    margin-right: 0;
}

.col5_box_contents a:hover {
	opacity: 0.7;
}

.col5_box_contents img {
	width: 100%;
	height: auto;
	display: block;
}


.col5_box_contents h3.col5_title {
	color: #fff;
	font-size: 13.655px;
	padding: 3.489px 10px;
	position: absolute;
	/*top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);*/
	bottom: 0;
	margin: 0;
	width: 100%;
	background: rgba(6, 112, 206, .9);
	box-sizing: border-box;
}

.col5_box_contents h3.col5_title::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -5px;
	right: 10px;
	width: 8px;
	height: 8px;
	border-top: #fff 2px solid;
	border-right: #fff 2px solid;
	transform: rotate(45deg);
}




/*--------------------------------------------------------
 1カラムステップダウンのCSS
--------------------------------------------------------*/

ul.step_down {
	margin: 0;
	padding: 0;
}
	
ul.step_down li {
	margin: 0;
	padding: 1em;
	border-bottom: 1px solid #ccc;
	position: relative;
}

ul.step_down li:first-child {
	border-top: 1px solid #ccc;
}

ul.step_down li figure {
	background: #fff none repeat scroll 0 0;
	float: left;
	height: 135px;
	margin: 0 10px 0 0;
	overflow: hidden;
	position: relative;
	width: 190px;
}

ul.step_down li figure img {
	
}


ul.step_down li:nth-child(odd) {
	background: #ffffff;
}

ul.step_down li:nth-child(even) {
	background: #f5f5f5;
}

.triangle_bg01, .triangle_bg02, .triangle_first {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 40px 50px 0 50px;
	position: absolute;
	right: 0;
	top: 0;
}

ul.step_down li h3.step_down_title01 {
	color: #0056b4;
}

ul.step_down li h3.step_down_title02 {
	color: #0056b4;
}

ul.step_down li h3.step_down_title01, ul.step_down li h3.step_down_title02 {
	font-size: 16px;
}
	
.triangle_bg01, .triangle_first {
	border-color: #c9b460 transparent transparent transparent;
}

.triangle_bg02 {
	border-color: #c9b460 transparent transparent transparent;
}

.triangle::after:first-child:after {
	content: "";
}

.triangle_first::after {
	color: #000;
	content: "STEP";
	margin: -35px -20px;
	position: absolute;
	color: #fff;
	font-weight: bold;
}

.triangle_bg01::after, .triangle_bg02::after {
	color: #000;
	content: "NEXT";
	margin: -35px -20px;
	position: absolute;
	color: #fff;
	font-weight: bold;
}





/*--------------------------------------------------------
 画像のマウスオーバーのアニメーション
--------------------------------------------------------*/
figure {
	position: relative;
	overflow: hidden;
	margin: 0;
}
figcaption {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 0;
}
figcaption h3,
figcaption p {
	position: absolute;
	left: -100%;
	width: 260px;
	-webkit-transition: .3s;
	transition: .3s;
}
article figcaption h3 {
	top: 30px;
	color: #fff;
}
figcaption p {
	top: 75px;
	color: #fff;
}
figure:hover figcaption {
	opacity: 1;
}
figure:hover figcaption h3,
figure:hover figcaption p {
	left: 20px;
}
figure:hover figcaption h3 {
	-webkit-transition-delay: .2s;
	transition-delay: .2s;
}
figure:hover figcaption p {
	-webkit-transition-delay: .5s;
	transition-delay: .5s;
}


/*--------------------------------------------------------
 見出しのCSS
--------------------------------------------------------*/

#main-contents article h2.bg-blue, #main-contents article h2.bg-red, #main-contents article h2.bg-green, #main-contents article h2.bg-lightblue {
	display: inline-block;
	padding: 7px 16px;
	margin: 0;
}
/*
#main-contents article h2.bg-blue {
	color: #fff;
	background: #0056b4;
}

#main-contents article h2.bg-red {
	color: #fff;
	background: #FF6600;
}

#main-contents article h2.bg-green {
	color: #fff;
	background: #009944;
}

#main-contents article h2.bg-lightblue {
	color: #fff;
	background: #00a0e9;
}
*/




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

body {
	margin: 0;
	padding: 0;
	line-height: 1.4em;
	/*background-image: url(../images/common/bg_body.png);
	background-repeat: repeat;*/
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
}

a {
	text-decoration: none;
	color: #00468b;
}

a:hover {
	color: #73c4e6;
}

div#flow01, div#flow02, div#flow03, div#flow04, div#flow05, div#flow06, div#flow07, div#flow08, div#flow09, div#flow10, div#flow11, div#flow12, div#flow13, div#flow14, div#flow15, div#flow16, div#flow17 {
	display: block;
	padding-top: 150px;
	margin-top: -150px;
}


/*----------------------------------------------
  共通CSS
----------------------------------------------*/

#container, #header, #main, #main-image, footer {
	min-width: 1050px;
	width: 100%;
}

footer {
	margin-bottom: 50px;
}
	
article, .sidebar-contents {
	background-color: #fff;	
	overflow: hidden;
	margin-bottom: 30px;
}

#header-in, #global-nav-in, #main-image-in, #main-image-in-except, #main-in, div#footer_nav, #copyright-in {
	width: 1050px;
	margin: auto;
}


#global-nav, #main-in, #footer {
	clear: both;
	content: "";
	display: block;
	/*height: 0;*/
}

nav#global-nav ol, nav#global-nav li {
	list-style: none outside none;
}

img.img_full {
	width: 100%;
	height: auto;
	margin-bottom: 50px;
}

ol {
	line-height: 1.8;
}


/*----------------------------------------------
  ヘッダー
----------------------------------------------*/

#header {
	background-color: #FFF;
	background-repeat: repeat-x;
	background-image: url(../images/common/line.jpg);
	float: left;
}

header {
	padding: 20px 0 0;
}

#header-in {
	background: url("../images/common/line-gra.jpg") no-repeat;
	height: 8px;
}

#header-logo {
	width: 40%;
	float: left;
	margin: 5px;
}

#header-text {
	width: 55%;
	float: right;
	text-align: right;
	margin: 10px 5px;
	position: relative;
}

#header-text a {
	margin-left: 20px;
}

#header-text a img:hover {
	opacity: 0.5;
}

#header-text strong {
	font-size: 20px;
}

#header-text p {
	margin: 25px 10px 0;
}

#header-text .line_banner {
	position: absolute;
	margin-left: 30px;
	top: 0;
}

/*----------------------------------------------
  ヘッダー画像
----------------------------------------------*/

#main-image {
	margin-bottom: 20px;
	clear: both;
	position: relative;
}

#main-image-in-except img {
	border-radius: 0 0 5px 5px;
}

#main-image-top-sp,
#main-image-sp {
	display: none;
}

/*----------------------------------------------
　メインコンテンツ
----------------------------------------------*/

#main-contents {
	width: 100%;
}

#main {
	margin-bottom: 20px;
}

#main-contents article {
	
}
/*
article h2 {
	background: url("../images/common/title_icon01.png") no-repeat scroll 0 13px;
	font-size: 29.641px;
	padding: 25px 0 20px 75px;
	border-bottom: solid 3px #0056b4;
}
*/

article h2 {
	font-size: 22.096px;
	position: relative;
	padding: 17px 20px 17px 33px;
	background: #eeeeee;
}
article h2::after {
	position: absolute;
	top: 11px;
	left: 14px;
	content: '';
	width: 7px;
	height: -webkit-calc(100% - 1em);
	height: calc(100% - 1em);
	background-color: #0056b4;
}



/* 文字の左右に横線を引くCSS */
/*
article h2.border {
  display: table;
  text-align: center;
  white-space: nowrap;
}
article h2.border:after, article h2.border:before {
  content: '';
  display: table-cell;
  width: 50%;
  background: -webkit-linear-gradient(transparent 50%, currentColor 50%, currentColor -webkit-calc(50% + 1px), transparent -webkit-calc(50% + 1px));
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, currentColor), color-stop(currentColor calc(50% + 1px)), to(transparent calc(50% + 1px)));
  background: linear-gradient(transparent 50%, currentColor 50%, currentColor calc(50% + 1px), transparent calc(50% + 1px));
  -webkit-background-clip: padding;
  background-clip: padding;
}
article h2.border:after {
  border-left: 1em solid transparent;
}
article h2.border:before {
  border-right: 1em solid transparent;
}
*/



article h3 {
	margin: 10px 0;
/*	color: #002145;*/
	font-size: 14px;
}

article p {
	margin-bottom: 18.32px;
	margin-left: 9.888px;
	margin-right: 9.888px;
	line-height: 1.7em;
}

article ul p {
	margin-left: initial;
	margin-right: initial;
}

#main-contents section {
	padding: 0;
}

#main-contents table {
	margin: 10px auto 30px;
	width: 100%;
	border-collapse: collapse;
}

#main-contents table tr {
	border: 1px solid #b2b2b2;
}

#main-contents table th {
	background: #f5f5f5;
	border-bottom: 1px solid #b2b2b2;
	border-right: 1px solid #b2b2b2;
	color: #000;
	font-weight: normal;
	padding: 10px 15px;
	text-align: left;
}

#main-contents table tr:last-child th {
	border-bottom: 1px solid #b2b2b2;
}

#main-contents table td {
	padding: 10px 15px;
	border-bottom: 1px solid #b2b2b2;
	border-right: 1px solid #b2b2b2;
}


article .alignleft {
	clear: left;
	float: left;
	margin: 0 20px 20px 0;
}

article .alignright {
	clear: right;
	float: right;
	margin: 0 0 20px 20px;
}


/* ワークフローのCSS */

ul.step_down_sp {
	display: none;
}

#main-contents article section.workflow-list {
	margin: 20px 0;
	padding: 0 15px;
}


#main-contents article section.workflow-list h3 {
	font-size: 14px;
	position: relative;
	margin: 0 0 2em;
	padding: 0.9em;
	background: #002145;
	color: #fff;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

#main-contents  article section.workflow-list h3:after{
	position: absolute;
	bottom: -15px;
	left: 10%;
	z-index: 90;
	margin-left: -15px;
	border-top: 15px solid #002145;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 0;
	content: "";
}


#main-contents section.top {
	color: #333;
	text-align: center;
}

#main-contents section.top h2 {
	background: initial;
	color: #333;
}

#main-contents section.top p {
	font-size: 16px;
	font-weight: bold;
}


/*--------------------------------------------------------
  見出しのCSS
--------------------------------------------------------*/

article h3.square-title {
	font-size: 18.32px;
	position: relative;
	margin: 22.096px 0 18.32px;
	padding: 16px 41.886px;
	background: #f9f9f9;
}

article h3.square-title::before {
	position: absolute;
	top: 18.32px;
	left: 16px;
	width: 18.32px;
	height: 18.32px;
	background-color: #0056b4;
	content: "";
}


/*----------------------------------------------
　リストCSS
----------------------------------------------*/

ol.list-design01 {
	counter-reset: list-design01; /*数字をリセット*/
	list-style-type: none;
	padding: 0;
	/*padding: 18.32px 25.888px;*/
	padding: 0 13.655px;
	margin: 0 0 25.888px;
	/*background: #f9f9f9;*/
}

ol.list-design01 li {
	position: relative;
	padding-left: 30px;
	line-height: 2;
	/*border-bottom: dashed 1px #0056b4;*/
}

ol.list-design01 li::before {
	position: absolute;
	display: inline-block;
	top: 50%;
	left: 0;
	/* カウントさせる */
	counter-increment: list-design01;
	content: counter(list-design01);
	/*装飾*/
	background: #0056b4;
	color: #fff;
	font-weight:bold;
	border-radius: 50%;
	/*border-color: #0056b4;
	border-width: 1px;
	border-style: solid;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;*/
	width: 22.096px;
	height: 22.096px;
	line-height: 25px;
	text-align:center;
	transform: translateY(-50%);
}

/*----------------------------------------------
　よくある質問のデザイン
----------------------------------------------*/

article h3.faq_q {
	background: #0852a0 url("../images/faq/faq_q.png") no-repeat scroll 10px 0;
	font-size: 18.32px;
	padding: 14.82px 50px;
	color: #fff;
}

article p.faq_a {
	background: url("../images/faq/faq_a.png") no-repeat scroll 20px 0;
	padding: 10px 10px 0 60px;
	margin-bottom: 50px;
}



/*----------------------------------------------
　お客様の声のデザイン
----------------------------------------------*/

article .voice_box01 h3,
article .voice_box02 h3,
article .voice_box03 h3 {
	color: #0852a0;
	font-size: 22.096px;
	padding-bottom: 10px;
	border-bottom: 3px solid #0852a0;
	box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.4);
}


article .voice_box01 {
	padding: 20px 0 0;
	position: relative;
	height: 270px;
	margin-bottom: 50px;
}

article .voice_box01 h3 {
	padding-left: 15px;
}

article .voice_box01 p.voice {
	width: 60%;
	padding-left: 10px;
}

article .voice_box01 p.voice_img {
	position: absolute;
	right: 20px;
	top: 0;
}


article .voice_box02 {
	padding: 20px 0 0;
	margin-bottom: 50px;
	position: relative;
	height: 270px;
}

article .voice_box02 h3 {
	padding-left: 45%;
}

article .voice_box02 p.voice {
	margin-left: 44%;
}

article .voice_box02 p.voice_img {
	position: absolute;
	left: 20px;
	top: 0;
}


article .voice_box03 {
	padding: 20px 0 0;
	position: relative;
	height: 250px;
}

article .voice_box03 h3 {
	padding-left: 15px;
}

article .voice_box03 p.voice {
	width: 45%;
	padding-left: 10px;
}

article .voice_box03 p.voice_img {
	position: absolute;
	right: 0px;
	top: 0;
}


article section.voice_box_sp {
	display: none;
}


/*----------------------------------------------
　求人ページ
----------------------------------------------*/

article h3.title3 {
	font-size: 18.32px;
	position: relative;
	padding: 15px 20px 15px 33px;
}

article h3.title3::after {
	position: absolute;
	top: 9px;
	left: 14px;
	content: '';
	width: 7px;
	height: -webkit-calc(100% - 1em);
	height: calc(100% - 1em);
	background-color: #0056b4;
}
	
span.tag-label1 {
	display: inline-block;
	padding: 4px 12px 3px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1;
	color: #666;
	border-radius: 20px;
	border: 1px solid #666;
	-webkit-transition: color .25s ease,background .25s ease;
	transition: color .25s ease,background .25s ease;
	overflow: hidden;	
}



	
/*----------------------------------------------
　サイドバー
----------------------------------------------*/

#sidebar {
	width: 300px;
	float: right;
}

.sidebar-contents {
	margin-bottom: 20px;
}


#sidebar h3 {
	background: url("../images/common/sidebar.png") no-repeat;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    padding: 12px 0 14px;
    text-align: center;
}

#sidebar section {
	border-bottom: 1px solid #d6d6d6;
    border-left: 1px solid #d6d6d6;
    border-radius: 0 0 5px 5px;
    border-right: 1px solid #d6d6d6;
    box-shadow: 0 2px 5px #d6d6d6;
    line-height: 1.4;
    padding: 13px 19px 9px;
}


#sidebar p {
	line-height: 1.8em;
	margin: 5px 0;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	line-height: 40px;
}

#sidebar li {
	border-bottom: 1px dashed #dbdbdb;
	list-style: none;
	padding: 5px 0;
}

#sidebar section {
	line-height: 1.4;
	padding: 13px 19px 9px;
}

#sidebar ul.nav-side {
	margin: 0;
	padding: 0;
	line-height: 40px;
}

#sidebar li:first-child {
    border-top: 0 none;
}

#sidebar li:last-child {
    border-bottom: 0 none;
}

#sidebar ul.nav-side li {
	background: url("../images/common/side-icon.png") no-repeat scroll 0 10px rgba(0, 0, 0, 0);
	border-bottom: 1px dashed #dbdbdb;
	list-style: none;
	padding: 10px 65px 5px;
}

#sidebar ul.nav-side li:first-child {
    border-top: 0 none;
}

#sidebar ul.nav-side li:last-child {
    border-bottom: 0 none;
}

#sidebar ul.side-companyname li {
	padding: 10px 0 5px 40px;
}

#sidebar ul.side-companyname li.sideicon-tel {
	background: url("../images/common/side-tel.png") no-repeat scroll 0 10px rgba(0, 0, 0, 0);
}

#sidebar ul.side-companyname li.sideicon-company {
	background: url("../images/common/side-company.png") no-repeat scroll 0 10px rgba(0, 0, 0, 0);
}

/*----------------------------------------------
  ボトム画像
----------------------------------------------*/

#bottom-image {
	margin-bottom: 20px;
}

figure.grid {
	/*display: -ms-flexbox;
	display: -webkit-box;*/ /* Safari,Google Chrome用 */  
    /*display: -moz-box;*/ /* Firefox用 */
	display: inline-table;
	margin: 10px 7px 10px 6px;
}


/*--------------------------------------------------------
 フッターの設定
--------------------------------------------------------*/

footer {
	
}

div#footer_nav_wrap {
	/*background: #333333;*/
	background: #0056b4;
	border-top: 2px solid #dbac5d;
}

div#footer_nav {
	padding-bottom: 30px;
	padding-top: 40px;
}

div#footer_nav .adress {
	/*background-color: ;*/
	float: left;
	height: 180px;
	margin-right: 80px;
	padding: 20px 0 20px 20px;
	width: 340px;
}


div#footer_nav .adress .f_logo {
	margin-bottom: 20px;
	float: left;
	margin-right: 15px;
}

div#footer_nav .adress .f_logo img {
	width: 100px;
	height: auto;
}

div#footer_nav .adress .name {
	color: #ffffff;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}

div#footer_nav .adress .name span {
	color: #999;
	font-size: 11px;
	font-weight: normal;
	line-height: 24px;
}



div#footer_nav .adress p {
	color: #ffffff;
	font-size: 12px;
	line-height: 1.5;
}





div#footer_nav ul.border {
	width: 180px;
}

div#footer_nav ul {
	border-left: 1px solid #ddd;
	float: left;
	min-height: 160px;
	padding-left: 0;
	padding-right: 20px;
	margin-bottom: 3em;
	width: 208px;
	list-style: none;
}


div#footer_nav ul li {
	color: #333;
	font-weight: bold;
	line-height: 20px;
	margin-bottom: 5px;
	padding-left: 30px;
}


div#footer_nav ul li a {
	color: #fff;
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
}

div#footer_nav ul li a:hover {
	color: #666;
}




div#footer_copy_wrap {
	background: #1f1f1f;
	padding: 15px;
}



#footer_copy_wrap {
	clear: both;
}

#footer_copy {
	
}


/* コピーライトのCSS */
.copy {
	text-align: center;
	margin: 0;
}

p.copy, .copy a {
	color: #fff;
	text-decoration: none;
}

.copy a:hover {
	font-weight: bold;
}



/*--------------------------------------------------------
 お問い合わせのボックス
--------------------------------------------------------*/
/*article section.contact_mobile {
	display: none;
}*/

article section.contact_fixed {
	display: inherit;
	position: fixed;
	bottom: 0;
	z-index: 999;
	width: 100%;
	left: 0;
	right: 0;
}
article section.contact_fixed .col3_box {
	background: rgba(30,30,30,0.85);
	margin: 0;
	box-sizing: border-box;
}
article section.contact_fixed .col3_box_contents {
	width: calc(96% / 3);
}
article section.contact_fixed .icon_line,
article section.contact_fixed .icon_tel,
article section.contact_fixed .icon_email  {
	box-sizing: border-box;
}
article section.contact_fixed .icon_line {
	padding: 0;
	margin: 0;
}
article section.contact_fixed .icon_email {
	padding: 0;
	margin: 0;
	border-left: 1px dashed #ffffff;
	border-right: 1px dashed #ffffff;
}
article section.contact_fixed .icon_tel {
	padding: 0;
	margin: 0;
}


article section.contact_fixed .col3_box_contents p {
	font-size: 100%;
	text-align: center;
	padding: 0;
	margin: 0;
}
article section.contact_fixed .col3_box_contents p a {
	color: #ffffff;
	display: block;
	padding: 10px 2%;
	border-radius: 3px;
}
article section.contact_fixed .col3_box_contents p a::before {
	content: '';
	display: inline-block;
	width: 30px; /*アイコン画像横サイズ*/
	height: 30px; /*アイコン画像縦サイズ*/
}
article section.contact_fixed .col3_box_contents p.col3_line a {
	
}
article section.contact_fixed .col3_box_contents p.col3_line a::before {
	background: url("../images/common/icon/icon-line.png") no-repeat top center;
}
article section.contact_fixed .col3_box_contents p.col3_tel a {
	
}
article section.contact_fixed .col3_box_contents p.col3_tel a::before {
	background: url("../images/common/icon/icon-tel.png") no-repeat top center;
}
article section.contact_fixed .col3_box_contents p.col3_email a {
	
}
article section.contact_fixed .col3_box_contents p.col3_email a::before {
	background: url("../images/common/icon/icon-email.png") no-repeat top center;
}

article section.contact_fixed .contact_info {
	color: #ef4123;
}
article section.contact_fixed .contact_info,
article section.contact_fixed .contact_entrytime {
	/*width: 100%;
	text-align: center;
	font-size: 11.321px;
	margin: 5px 0;*/
	display: none;
}

article section.contact_fixed .col3_box_contents p.col3_line a::before, 
article section.contact_fixed .col3_box_contents p.col3_tel a::before,
article section.contact_fixed .col3_box_contents p.col3_email a::before {
	background-size: 30px;
	/*display:inline-block;*/
	vertical-align: middle;
	margin-right: 10px;
}

.visible-mobile {
	display: none;
}

/*------------------------------------------------------------
　テーブル・セルの横幅
-------------------------------------------------------------*/

#main table .w05{ width: 5%; }
#main table .w10{ width: 10%; }
#main table .w15{ width: 15%; }
#main table .w20{ width: 20%; }
#main table .w25{ width: 25%; }
#main table .w30{ width: 30%; }
#main table .w35{ width: 35%; }
#main table .w40{ width: 40%; }
#main table .w45{ width: 45%; }
#main table .w50{ width: 50%; }
#main table .w55{ width: 55%; }
#main table .w60{ width: 60%; }
#main table .w65{ width: 65%; }
#main table .w70{ width: 70%; }
#main table .w75{ width: 75%; }
#main table .w80{ width: 80%; }
#main table .w85{ width: 85%; }
#main table .w90{ width: 90%; }
#main table .w95{ width: 95%; }


/*------------------------------------------------------------
　画像の配置
-------------------------------------------------------------*/

.img-left {
	margin: 0 0 15px 15px;
	float: right;
}



/*------------------------------------------------------------
　フロートの解除
-------------------------------------------------------------*/

#main-contents article section:after,
ul.step_down li:after {
	content: "";
	clear: both;
	height: 0;
	display: block;
	visibility: hidden;
}


/*------------------------------------------------------------
　ボックスの配置　トップページのボックス　不必要
-------------------------------------------------------------*/

article div[itemprop="articleBody"] {
	/*display: -ms-flexbox;
	display: -webkit-box; /* Safari,Google Chrome用 */  
    /*display: -moz-box; /* Firefox用 */ 
}


article section.box-2 {
	/*width: 325px;*/
	margin: 0 30px 30px 0;
	box-sizing: border-box;
	position: relative;
	clear: both;
}

article section.box-2 img {
	float: left;
	margin-right: 10px;
}

article section.box-2 span {
	background: #002145;
	position: absolute;
	padding: 3px 7px;
	right: 0;
	bottom: 0;
}

article section.box-2 span a {
	color: #FFF;
}

article section.box-2 span a:hover {
	color: #ccc;
}

.topbox-line {
	
}


#main-contents article .toplist ul {
	margin: 0;
	padding: 0;
}

.topbox-imgleft {
	float: left;
}

.topbox-contentright {
	float: right;
	width: 70%;
}

.topbox-imgright {
	float: right;
}

.topbox-contentleft {
	float: left;
	width: 70%;
}

.clearfix:before, .clearfix:after {
    content: "";
    display: block;
}

.clearfix:after {
    clear: both;
}

.toplist li {
	border-bottom: 1px dashed #cccccc;
	padding: 20px 10px;
	position: relative;
}

.toplist li:first-child {
	border-top: 1px dashed #cccccc;
}

.toplist li:last-child {
	border: none;
}


#main-contents article .toplist ul li h3 {
	font-size: 16px;
	margin: 0 0 5px;
}


#main-contents article .toplist ul li p {
	margin: 0;
}

#main-contents article .toplist ul li .topbox-contentright span {
	background: #007130;
	position: absolute;
	padding: 3px 7px;
	right: 10px;
	bottom: 20px;
	font-size: 12px;
}

#main-contents article .toplist ul li .topbox-contentleft span {
	background: #007130;
	position: absolute;
	padding: 3px 7px;
	left: 10px;
	bottom: 20px;
	font-size: 12px;
}

#main-contents article .toplist ul li .topbox-contentleft span:hover, #main-contents article .toplist ul li .topbox-contentright span:hover {
	background: #FFF100;
}

#main-contents article .toplist ul li span a {
	color: #FFF;
}

/*#main-contents article .toplist ul li a:hover {
	color: #ccc;
}*/


/*------------------------------------------------------------
　スマホのみ表示　PC消去
-------------------------------------------------------------*/
article.link_sp,
.link_button_sp {
	display: none;
}


/*--------------------------------------------------------
 見出しのCSS
--------------------------------------------------------*/
	
#main-contents article ol.vertical-text {
	display: flex;
	padding-left: 0;
}
#main-contents article ol.vertical-text li {
	background: #00a0e9;
	color: #ffffff;
	padding: 10px;
	margin: 5px 30px 5px 0;
	display: inline-block;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	vertical-align: top;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	position: relative;
}

#main-contents article ol.vertical-text li:first-child {
	
}

#main-contents article ol.vertical-text li::after {
	content: "";
	position: absolute;
	top: 40%;
	right: -20px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #00a0e9;
}

#main-contents article ol.vertical-text li:last-child::after {
	content: none;
	position: unset;
	top: unset;
	right: unset;
	display: unset;
	width: unset;
	height: unset;
	border-style: none;
	border-width: none;
	border-color: none;
}




/*--------------------------------------------------------
 仕事の流れのCSS
--------------------------------------------------------*/

#main-contents article .diamond {
	display: table;
	width: 160px;
	height: 160px;
	float: left;
	text-align: center;
	margin-right: 20px;
}
#main-contents article .diamond h3 {
	color: #ffffff;
	font-weight: normal;
	font-size: 17px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

#main-contents article .circle {
	display: table;
	width: 160px;
	height: 160px;
	float: left;
	text-align: center;
	margin-right: 20px;
}
#main-contents article .circle h3 {
	color: #ffffff;
	font-weight: normal;
	font-size: 18px;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
}

#main-contents article .circle-lightblue h3 {
	font-size: 35px;
}

#main-contents article .diamond-blue {
	background: url(../images/workflow/diamond-bl.png) no-repeat center;
}

#main-contents article .diamond-orange {
	background: url(../images/workflow/diamond-or.png) no-repeat center;
}

#main-contents article .diamond-lightblue {
	background: url(../images/workflow/diamond-lb.png) no-repeat center;
}

#main-contents article .circle-blue {
	background: url(../images/workflow/circle-bl.png) no-repeat center;
}

#main-contents article .circle-orange {
	background: url(../images/workflow/circle-or.png) no-repeat center;
}

#main-contents article .circle-green {
	background: url(../images/workflow/circle-gr.png) no-repeat center;
}

#main-contents article .circle-lightblue {
	background: url(../images/workflow/circle-lb.png) no-repeat center;
}

.btn-right {
	font-size: 14px;
	text-align: right;
}

.btn-subtle {
	border: 1px solid #ccc;
	border-radius: 0.25em;
	line-height: 1;
	padding: 5px 15px;
}

article section p.col2_flow-tel, article section p.col2_flow-email {
	font-size: 22px;
	font-weight: bold;
	padding: 0;
	margin: 0;
}


article section p.col2_flow-tel a {
	background: #ffffff;
	color: #13334b;
	display: inline-block;
	padding: 10px 2%;
	border-radius: 3px;
	width: 80%;
	border: 1px solid #333333;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

article section p.col2_flow-email a {
	background: #ffffff;
	color: #13334b;
	display: inline-block;
	padding: 10px 2%;
	border-radius: 3px;
	width: 80%;
	border: 1px solid #333333;
	box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
}

/*
article section p.col2_tel a::before {
	background: url("../images/mobile/tel.png") no-repeat 0 50%;
}

article section p.col2_email a::before {
	background: url("../images/mobile/email.png") no-repeat 0 50%;
}

article section p.col2_tel a::before, article section p.col2_email a::before {
	content: '';
	display: inline-block;
	width: 15px;
	height: 12px;
}
*/


.col2_telbox {
	/*width: 100%;*/
	padding: 0;
	list-style: none;
	display: flex;
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	-webkit-flex-flow:row wrap;
	-ms-flex-flow:row wrap;
	flex-flow:row wrap
}

.col2_telbox_contents {
	width: calc(90% / 2);
	margin: 0 2% 0 0;
	position: relative;
	text-align: center;
}


p.blue-button {
	background: #0852a0;
	text-align: center;
	border-radius: 3px;
	box-shadow: 0px 3px rgba(0, 0, 0, 0.3);
	position: relative;
}
	
p.blue-button:hover {
	top: 1px;
	box-shadow: 0px 2px rgba(0, 0, 0, 0.3);
}

p.blue-button a {
	color: #fff;
	padding: 10px;
	display: block;
}

/*--------------------------------------------------------
 4to2カラム　BOXのCSS
--------------------------------------------------------*/
	
ul.col4to2_box {
	width: 100%;
	padding: 0;
	list-style: none;
	display: flex;
	display: -webkit-box;/*--- Androidブラウザ用 ---*/
	display: -ms-flexbox;/*--- IE10 ---*/
	display: -webkit-flex;/*--- safari（PC）用 ---*/
	justify-content: center;
	-webkit-box-pack: center;/*--- Androidブラウザ用 ---*/
    -ms-flex-pack: center;/*--- IE10 ---*/
    -webkit-justify-content: center;/*--- safari（PC）用 ---*/
	
	-webkit-flex-flow:row wrap;
	-ms-flex-flow:row wrap;
	flex-flow:row wrap;

}
ul.col4to2_box li {
	width: calc(94% / 4);
	margin: 0 2% 2em 0;
	background: #f5f5f5; /*#f9f9f9*/
}


ul.col4to2_box li:nth-child(4n) {
    margin-right: 0;
}

ul.col4to2_box img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
	


}