@charset "UTF-8";
/* CSS Document */


/* **************************************************************** */
/*             MAIN-IMAGE  LAYOUT
/* **************************************************************** */
.main-slider {
	z-index: 1;
	width: 100%;
	height: 700px;
	margin: 128px 0 0;
	padding: 0;
	float: left;
	top:0;
	left: 0;
}

.main-slider img { 
	max-width: 100%;
	margin: 0;
	padding: 0;
	float: right; 
}


.main-slider ul.slider {
	width:100%;
	margin: 0;
	padding: 0;
	float: right;
	box-sizing: border-box;
}


/* **************************************************************** */
/*             CONTENTS  LAYOUT
/* **************************************************************** */

.contents.frontpage {
	margin: 0;
	padding: 50px 0 0;
	z-index: 99;
}

.contents.frontpage h2 {
	font-size: 24px;
	color: #210063;
	line-height: 36px;
}

.contents.frontpage h2 span { font-size: 48px; }
.contents.frontpage h3 { font-size: 36px;line-height: 50px; }
.contents.frontpage h4 { font-size: 28px;line-height: 40px; }
.contents.frontpage h5 { font-size: 20px;line-height: 30px; }
.contents.frontpage h6 { font-size: 18px;line-height: 30px; }


.frontpage .fixed-bg {
  min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  width: 100%;
  float: left;
}

.frontpage .bg-01 { background-image: url("../images/con_1.jpg"); }

.frontpage h2 {
	width: 100%;
	margin: 50px 0;
	float: left;
	line-height: 40px;
	text-align: center;
	font-size: 24px
}
.frontpage h2 span { font-size: 48px;font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif" }


.contents.frontpage .topics,
.contents.frontpage .company,
.contents.frontpage .iso,
.contents.frontpage .service,
.contents.frontpage .recruit,
.contents.frontpage .soft,
.contents.frontpage .design,
.contents.frontpage .kikai,
.contents.frontpage .haken,
.contents.frontpage .contact {
	width: 100%;
	margin: 0;
	padding: 50px 0;
	float: left;
}

/* **************************************************************** */
/*             Slider Bordered letters
/* **************************************************************** */
.outline1 {
  display        : inline-block;
  color          : #ffffff;            /* 文字の色 */
  font-size      : 18pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #210063,
      -2px  2px 1px #210063,
       2px -2px 1px #210063,
      -2px -2px 1px #210063,
       2px  0px 1px #210063,
       0px  2px 1px #210063,
      -2px  0px 1px #210063,
       0px -2px 1px #210063;        /* 文字の影 */
}
.outline1 span {font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", sans-serif; }

.outline2 {
  display        : inline-block;
  color          : #ffffff;            /* 文字の色 */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #210063,
      -2px  2px 1px #210063,
       2px -2px 1px #210063,
      -2px -2px 1px #210063,
       2px  0px 1px #210063,
       0px  2px 1px #210063,
      -2px  0px 1px #210063,
       0px -2px 1px #210063;        /* 文字の影 */
}
.outline2 span {font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", sans-serif; }

.outline3 {
  display        : inline-block;
  color          : #ffffff;            /* 文字の色 */
  font-size      : 32pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #6a6da9,
      -2px  2px 1px #6a6da9,
       2px -2px 1px #6a6da9,
      -2px -2px 1px #6a6da9,
       2px  0px 1px #6a6da9,
       0px  2px 1px #6a6da9,
      -2px  0px 1px #6a6da9,
       0px -2px 1px #6a6da9;        /* 文字の影 */
}

.outline4 {
  display        : inline-block;
  color          : #ffffff;            /* 文字の色 */
  font-size      : 32pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #005e92,
      -2px  2px 1px #005e92,
       2px -2px 1px #005e92,
      -2px -2px 1px #005e92,
       2px  0px 1px #005e92,
       0px  2px 1px #005e92,
      -2px  0px 1px #005e92,
       0px -2px 1px #005e92;        /* 文字の影 */
}

.outline5 {
  display        : inline-block;
  color          : #210063;            /* 文字の色 */
  font-size      : 32pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.outline6 {
  display        : inline-block;
  color          : #210063;            /* 文字の色 */
  font-size      : 21pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.outline7 {
  display        : inline-block;
  color          : #6a6da9;            /* 文字の色 */
  font-size      : 21pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.outline8 {
  display        : inline-block;
  color          : #6a6da9;            /* 文字の色 */
  font-size      : 32pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.outline9 {
  display        : inline-block;
  color          : #6a6da9;            /* 文字の色 */
  font-size      : 8pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.outline10 {
  display        : inline-block;
  color          : #005e92;            /* 文字の色 */
  font-size      : 32pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.outline11 {
  display        : inline-block;
  color          : #005e92;            /* 文字の色 */
  font-size      : 21pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.outline12 {
  display        : inline-block;
  color          : #210063;            /* 文字の色 */
  font-size      : 14pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.outline13 {
  display        : inline-block;
  color          : #ffffff;            /* 文字の色 */
  font-size      : 18pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #210063,
      -2px  2px 1px #210063,
       2px -2px 1px #210063,
      -2px -2px 1px #210063,
       2px  0px 1px #210063,
       0px  2px 1px #210063,
      -2px  0px 1px #210063,
       0px -2px 1px #210063;        /* 文字の影 */
}

.outline14 {
  display        : inline-block;
  color          : #210063;            /* 文字の色 */
  font-size      : 14pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.outline15 {
  display        : inline-block;
  color          : #ffffff;            /* 文字の色 */
  font-size      : 24pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #6a6da9,
      -2px  2px 1px #6a6da9,
       2px -2px 1px #6a6da9,
      -2px -2px 1px #6a6da9,
       2px  0px 1px #6a6da9,
       0px  2px 1px #6a6da9,
      -2px  0px 1px #6a6da9,
       0px -2px 1px #6a6da9;        /* 文字の影 */
}

.outline16 {
  display        : inline-block;
  color          : #ffffff;            /* 文字の色 */
  font-size      : 24pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #005e92,
      -2px  2px 1px #005e92,
       2px -2px 1px #005e92,
      -2px -2px 1px #005e92,
       2px  0px 1px #005e92,
       0px  2px 1px #005e92,
      -2px  0px 1px #005e92,
       0px -2px 1px #005e92;        /* 文字の影 */
}

.outline17 {
  display        : inline-block;
  color          : #ffffff;            /* 文字の色 */
  font-size      : 32pt;               /* 文字のサイズ */
  font-family    : "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";  /* 使用フォント */
  letter-spacing : 4px;                /* 文字間 */
  text-shadow    : 
       2px  2px 1px #210063,
      -2px  2px 1px #210063,
       2px -2px 1px #210063,
      -2px -2px 1px #210063,
       2px  0px 1px #210063,
       0px  2px 1px #210063,
      -2px  0px 1px #210063,
       0px -2px 1px #210063;        /* 文字の影 */
}
/* **************************************************************** */
/*             TOPICS  LAYOUT
/* **************************************************************** */

.contents.frontpage .topics h2 {
	width: 90%;
	margin: 0 5% 50px;
	font-size: 24px;
	color: #210063;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}
.contents.frontpage .topics ul {
	width: 100%;
	margin: 0;
	padding: 30px 0;
	float: left;
	background-color: rgba(255,255,255,0.90);
	border: #989898 1px solid;
	box-sizing: border-box;
}

.contents.frontpage .topics li {
	width: 90%;
	margin: 0 5%;
	padding: 0;
	float: left;
	border-bottom: #989898 dashed 1px;
	transition:all .5s ease;
	background-color: rgba(0,96,175,0.0);
}

.contents.frontpage .topics li:hover { 
	background-color: rgba(0,96,175,0.30);
}

.contents.frontpage .topics li a {
	width: 100%;
	height: 100%;
	padding: 5px 0;
	display: block;
	color: #000;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
}


.contents.frontpage .topics li .point {
	width: 15%;
	text-align: right;
	float: left;
	color: #210063;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
}

.contents.frontpage .topics li .date {
	width: 15%;
	text-align: center;
	float: left;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
}

.contents.frontpage .topics li .title {
	width: 70%;
	float: left;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
}

.contents.frontpage .topics li .point span.new-txt {
	color: #ff0000;
	font-weight: bold;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
}

.contents.frontpage .topics li .point span.important {
	color: navy;
	font-weight: bold;
	background-color: #210063;
	color: #FFF;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	padding: 2px 5px;
	border-radius: 5px;
	margin: 0 10px;
}

/* **************************************************************** */
/*             COMPANY  LAYOUT
/* **************************************************************** */

.contents.frontpage .company,
.contents.frontpage #company { scroll-margin-top:130px; }

.contents.frontpage .company .glid-left { width: 45%;text-align: center;  }
.contents.frontpage .company .glid-left img {
	width: 80%;
	margin: 50px 10% 0;
	text-align: center;
}

.contents.frontpage .company .glid-right { width: 55%; }

.contents.frontpage .company .glid-right .box {
	width: 90%;
	margin: 0 5%;
	padding: 30px 0;
	float: left;
	background-color: rgba(255,255,255,0.8);
}

.contents.frontpage .company h3 {
	width: 90%;
	margin: 0 5% 50px;
	font-size: 24px;
	color: #210063;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.contents.frontpage .company h2 {
	width: 90%;
	margin: 0 5% 50px;
	font-size: 24px;
	color: #210063;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.contents.frontpage .company .glid-right .message {
	width: 90%;
	margin: 0 5%;
	color: #210063;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
	float: left;
}

.contents.frontpage .company .menu-company-navigation-container {
	width: 100%;
	margin: 0;
	padding: 0;
	float: left;
}

.contents.frontpage .company ul.menu {
	width: 90%;
	margin: 50px 5%;
	padding: 0;
	float: left;
}

.contents.frontpage .company ul li {
	width: 18%;
	margin: 0 1% 30px;
	padding: 0;
	float: left;
	text-align: center;
}

.contents.frontpage .company ul li a {
	background-color: #210063;
	box-sizing: border-box;
	color: #FFF;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	font-weight: bold;
	display: block;
	padding: 20px 0;
	line-height: 20px;
	background-image: url("../images/arr-w.png");
	background-position: center right 10px;
	background-repeat: no-repeat;
	transition:all .5s ease;
}

.contents.frontpage .company ul li a:hover {
	background-color: #FFF;
	color: #210063;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	background-image: url("../images/arr.png");
	box-shadow: 0 0 3px 0px #999;
}

/* **************************************************************** */
/*             ISO  LAYOUT
/* **************************************************************** */

.contents.frontpage .iso {
	height: 550px;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	scroll-margin-top:100px;
}

.contents.frontpage .iso h2 {
	color: #210063;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.contents.frontpage .iso .message {
	width: 80%;
	margin: 50px 10%;
	color: #210063;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

/* **************************************************************** */
/*             SERVICE  LAYOUT
/* **************************************************************** */

.contents.frontpage .service {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.contents.frontpage .service h2 {
	color: #210063;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.contents.frontpage .service .message {
	width: 70%;
	margin: 0 15% 50px;
	float: left;
	color: #210063;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.contents.frontpage .service a:hover { opacity: 0.7; }

.contents.frontpage .service dl {
	width: 40%;
	height: 140px;
	margin: 0 5% 30px;
	padding: 0;
	float: left;
	background-color: #210063;
}

.contents.frontpage .service dt {
	width: 36%;
	margin: 0;
	padding: 10px 2%;
	float: left;
	text-align: center;
}

.contents.frontpage .service dt img {
	width: auto;
	max-width: 100%;
	height: 120px;
}

.contents.frontpage .service a dd {
	width: 56%;
	height: 120px;
	margin: 0;
	padding: 10px 2%;
	float: left;
	overflow:hidden;
	color: #;
}


/* **************************************************************** */
/*             RECRUIT  LAYOUT
/* **************************************************************** */

.contents.frontpage .recruit {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.contents.frontpage .recruit h2 {
	color: #210063;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	margin-top: 150px;
	text-shadow: 1px 1px 5px #FFF;
}

.contents.frontpage .recruit dl {
	width: 40%;
	height: 330px;
	margin: 50px 7% 0 3%;
	background-color: rgba(50,50,255,0.80);
	color: #FFF;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	border-radius: 10px;
	float: left;
	box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.6);
}

.contents.frontpage .recruit dl.career {
	background-color: rgba(255,118,40,0.80);
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
}


.contents.frontpage .recruit dt {
	width: 90%;
	margin: 20px 4%;
	padding: 0 1% 5px;
	float: left;
	border-bottom: #FFF 1px solid;
	font-size: 24px;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
}

.contents.frontpage .recruit dd {
	height: 110px;
	width: 90%;
	margin: 0 5%;
	padding: 0;
	float: left;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
}

.contents.frontpage .recruit .button { margin: 0 20px 0 0;float: right; }

/* **************************************************************** */
/*             SOFT  LAYOUT
/* **************************************************************** */

.contents.frontpage .soft {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.contents.frontpage .soft h2 {
	width: 50%;
	float: left;
	margin: 50px 10%;
	color          : #210063;            /* 文字の色 */
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.contents.frontpage .soft .message {
	width: 80%;
	float: right;
	margin: 50px 10%;
	display        : inline-block;
	color          : #210063;            /* 文字の色 */
	font-size      : 11pt;               /* 文字のサイズ */
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	letter-spacing : 4px;                /* 文字間 */
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

/* **************************************************************** */
/*             DESIGN  LAYOUT
/* **************************************************************** */

.contents.frontpage .design {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.contents.frontpage .design h2 {
	width: 50%;
	float: right;
	color          : #210063;            /* 文字の色 */
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.contents.frontpage .design .message {
	width: 80%;
	margin: 50px 10%;
	float: left;
	color          : #210063;            /* 文字の色 */
	font-size      : 11pt;               /* 文字のサイズ */
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	letter-spacing : 4px;                /* 文字間 */
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

/* **************************************************************** */
/*             KIKAI  LAYOUT
/* **************************************************************** */

.contents.frontpage .kikai {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.contents.frontpage .kikai h2 {
	width: 50%;
	float: left;
	color          : #210063;            /* 文字の色 */
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.contents.frontpage .kikai .message {
	width: 80%;
	float: right;
	margin: 50px 10%;
	color          : #210063;            /* 文字の色 */
	font-size      : 11pt;               /* 文字のサイズ */
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	letter-spacing : 4px;                /* 文字間 */
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

/* **************************************************************** */
/*             HAKEN  LAYOUT
/* **************************************************************** */

.contents.frontpage .haken {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.contents.frontpage .haken h2 {
	width: 50%;
	float: right;
	color          : #210063;            /* 文字の色 */
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

.contents.frontpage .haken .message {
	width: 80%;
	float: left;
	margin: 50px 10%;
	color          : #210063;            /* 文字の色 */
	font-size      : 11pt;               /* 文字のサイズ */
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
	letter-spacing : 4px;                /* 文字間 */
	text-shadow    : 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}

/* **************************************************************** */
/*             CONTACT  LAYOUT
/* **************************************************************** */

.contents.frontpage .contact {
	background-position: bottom 5%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}

.contents.frontpage .contact h2 {
	color: #210063;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
}

.contents.frontpage .contact .message {
	width: 80%;
	margin: 50px 10%;
	color: #210063;
	font-family: "Arial Black", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Gadget", "sans-serif";
}

/* *********************************************************************** */
/*        RESPONSIVE  LAYOUT WIDTH:1100px          */
/* *********************************************************************** */

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

.main-slider { margin: 82px 0 0; }

.contents.frontpage .company ul.menu { width: 100%;margin: 50px 0%; }

.contents.frontpage .iso dd h3 { font-size: 16px; }

.contents.frontpage .service dl { width: 46%;margin: 0 2% 30px; }

.contents.frontpage .topics li .point { width: auto;text-align: left; }
.contents.frontpage .topics li .date { width: auto;text-align: left; }
.contents.frontpage .topics li .title { width: 100%; }

.contents.frontpage .contact { background-size: cover;background-position: right; }
.contents.frontpage .contact h2 { text-shadow: 2px 3px 1px #FFF; }

}

/* *********************************************************************** */
/*        RESPONSIVE  LAYOUT WIDTH:980px          */
/* *********************************************************************** */

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

.contents.frontpage .company ul.menu { width: 90%;margin: 50px 5%; }
.contents.frontpage .company ul li { width: 46%;margin: 0 2% 30px; }

.contents.frontpage .iso h2 { margin-top: 150px; }
.contents.frontpage .iso dl { width: 46%; margin: 10px 2% 0; }

.contents.frontpage .iso h2 { width: 100%;margin: 50px 0 0; }
.contents.frontpage .iso .glid-left,
.contents.frontpage .iso .glid-right { width: 100%;margin: 0; }
.contents.frontpage .iso .message {	width: 80%;margin: 30px 10% 0; }

.contents.frontpage .recruit h2 { margin-top: 150px; }
.contents.frontpage .recruit dl { width: 46%; margin: 10px 2% 0; }

.contents.frontpage .recruit h2 { width: 100%;margin: 50px 0 0; }
.contents.frontpage .recruit .glid-left,
.contents.frontpage .recruit .glid-right { width: 100%;margin: 0; }
.contents.frontpage .recruit .message {	width: 80%;margin: 30px 10% 0; }

}

/* *********************************************************************** */
/*        RESPONSIVE  LAYOUT WIDTH:880px          */
/* *********************************************************************** */

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

.contents.frontpage .company .glid-left { width: 90%;margin: 0 5% ; }
.contents.frontpage .company .glid-right { width: 90%;margin: 50px 5% 0; }

.contents.frontpage .service dl { width: 90%;margin: 0 5% 30px; }

}

/* *********************************************************************** */
/*        RESPONSIVE  LAYOUT WIDTH:780px          */
/* *********************************************************************** */

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

.contents.frontpage .iso { height: auto; }
.contents.frontpage .iso dl { width: 80%; margin: 10px 10% 20px; }

.contents.frontpage .recruit { height: auto; }
.contents.frontpage .recruit dl { width: 80%; margin: 10px 10% 20px; }

}

/* *********************************************************************** */
/*        RESPONSIVE  LAYOUT WIDTH:680px          */
/* *********************************************************************** */

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

.contents.frontpage h2 { font-size: 18px;line-height: 24px; }
.contents.frontpage h2 span { font-size: 32px; }
.contents.frontpage h3 { font-size: 24px;line-height: 30px; }
.contents.frontpage h4 { font-size: 20px;line-height: 40px; }
.contents.frontpage h5 { font-size: 18px;line-height: 30px; }
.contents.frontpage h6 { font-size: 16px;line-height: 30px; }

.main-slider { height: 500px; }

.contents.frontpage { margin: 0; }
.contents.frontpage .topics { padding: 0 0 50px; }

}

/* *********************************************************************** */
/*        RESPONSIVE  LAYOUT WIDTH:580px          */
/* *********************************************************************** */

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

.main-slider { margin: 60px 0 0; }

.contents.frontpage .service dl { height: auto; }
.contents.frontpage .service dt { width: 90%;padding: 10px 5%; }
.contents.frontpage .service dt img { max-width: 100%;height: auto; }
.contents.frontpage .service a dd { width: 96%;height: auto;padding: 10px 2%; }

.contents.frontpage .iso dt { font-size: 20px; }

.contents.frontpage .iso { height: auto;padding: 0 0 50px;background-position: bottom left 30%; }
.contents.frontpage .iso h2 { margin-top: 50px; }
.contents.frontpage .iso dl { width: 100%; margin: 10px 0 20px; }

.contents.frontpage .recruit dt { font-size: 20px; }

.contents.frontpage .recruit { height: auto;padding: 0 0 50px;background-position: bottom left 30%; }
.contents.frontpage .recruit h2 { margin-top: 50px; }
.contents.frontpage .recruit dl { width: 100%; margin: 10px 0 20px; }

}

/* *********************************************************************** */
/*        RESPONSIVE  LAYOUT WIDTH:480px          */
/* *********************************************************************** */

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

.contents.frontpage .company h3 { font-size: 18px; }
.contents.frontpage .company ul li { width: 100%;margin: 0 0 30px; }

}