/*option*/
@media screen and (min-width: 946px){   
  .pc { display:block; }
  .sp { display:none; }
}
.inner { width: 1200px; margin: 0 auto;}

/* ヘッダ */
.header {padding: 10px 0 0 0; display: block; position: fixed; background-color:transparent; box-sizing: border-box; }
.header.scrolling { background-color: rgba(0,0,0,0.8); }
.header{z-index:100; width: 100%; padding: 6px 0px 0px 0px;}

#box{z-index:100; width: 100%;max-width:1336px;margin: 0 auto; position: relative;}


/* グローバルナビ */

#logo{width: 100%;}
#logo img{width: 100%; max-width: 315px;}

ul#navi{margin-left: 30px; position: absolute; right: 0; top: 0;}
ul#navi li{color: #fff;font-size: 16px; font-weight: 900;height: 46px;width:auto;padding: 0em 1.4em 0em 1.4em;}
ul#navi li span{font-size: 13px}
ul#navi li a{color: #fff;text-decoration: none;}
ul#navi li.service{ border-left: 1px solid #fff;text-align: center;float: left;}
ul#navi li.introduction{border-left: 1px solid #fff;text-align: center;float: left;}
ul#navi li.news{border-left: 1px solid #fff;text-align: center;float: left;}
ul#navi li.recruit{border-left: 1px solid #fff;text-align: center;float: left;}
ul#navi li.company{border-left: 1px solid #fff;text-align: center;float: left;}
ul#navi li.contactus{border-left: 1px solid #fff;text-align: center;float: left;}
ul#navi li.drw{border-left: 1px solid #fff;text-align: center;float: left;}

/*ドロワ*/

#navTgl {display: none;} 
label.open,
label.close {cursor: pointer;top: 0;left: 0;}
.open { z-index: 2; width: 20%; text-align: center; -webkit-transition: background-color .6s, -webkit-transform .6s; transition: background-color .6s, transform .6s; }
#navTgl:checked + .open { background-color: indianRed; -webkit-transform: translateY(100%); transform: translateY(100%); }
.close {pointer-events: none; z-index: 999999999; width: 100%; height: 100%; transition: background-color .6s;}
#navTgl:checked ~ .close { pointer-events: auto; background-color: rgba(0,0,0,.3); }
 

/* :::::: drawer menu :::::: */
 
.menus { z-index: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.6);-webkit-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: -webkit-transform .6s; transition: transform .6s;  overflow:auto;}
 
#navTgl:checked ~ .menus {-webkit-transform: translateY(0); transform: translateY(0);}
 
.menus p,.menus li a { color: white; display: block;}
.menus p {  text-align: center;}
 
.menus ul { padding: 5% 0 0 0 ; list-style-type:none;}
 
.menus li {display: block; border-bottom: 1px solid rgba(255,255,255,.6); font-size: 1em; line-height: 1.5em; margin: 0 auto; clear: both;}
.menus li:first-child { border-top: 1px solid rgba(255,255,255,.6);}
.menus li a { display: block; padding: 1em 2em; text-decoration: none; transition: background-color .6s;}
.menus li a:hover { background-color: #555;}
 

.button {
  flex: 1 1 auto;
  margin: 0px;
  padding: 0px;

  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: .3s;
}
.button:after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button:nth-of-type(2):after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button:nth-of-type(3):after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button:nth-of-type(4):after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button:nth-of-type(5):after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button:nth-of-type(6):after {
  position: absolute;
  transition: .3s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.button:hover {
  cursor: pointer;
}
.button:hover:after {
  width: 100%;
  left: 0;
}


/* key */

#key { position: relative; width: 100%; padding-top: 50%;}
#key .image { opacity: 0; animation: ChangeImage 15s infinite; position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; background-size: cover; }

#key .key01{ background-image: url(../images/top_1.jpg); animation-delay: 0s;} 
#key .key02{ background-image: url(../images/top_2.jpg); animation-delay: 5s;} 
#key .key03{ background-image: url(../images/top_3.jpg); animation-delay: 10s;} 


#key .catch{ text-align: right; } 
#key .catch img{ /*margin-top: 25%;*/ position: absolute; top: 50%; transform: translate(0, -50%); right: 20vw; width: 53vw; } 


@keyframes ChangeImage{
  0%{ opacity: 0;}
  33%{ opacity: 1;}
  63%{ opacity: 0;}
  100%{ opacity: 0;}
}




a.services{display: block; width: 380px; height: auto; background: rgba(0,88,188,1.00);color: #fff; text-align: center;font-size: 30px;padding: 10px 0px 10px 0px;margin: 0 auto; }


/* ポイント */
#point { padding: 230px 0 150px;}
#point ul { text-align: center;}
#point ul li { display: inline-block; width: 360px; position: relative; vertical-align: top; margin-right: 30px;}
#point ul li:last-child { margin-right: 0;}
#point ul li img {position: absolute; top: -80px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}

#point ul li dl { background: #e0f6ff; padding: 100px 20px 40px; min-height: 150px;}
#point ul li dl dt { font-family: "adobe-garamond-pro", serif; font-weight: 400; font-style: normal; color: #009fdf; font-size: 35px; margin: 0 auto 20px;}


/* 事業概要 */
#service { }

#service .set1 {background-image: url(../images/bo_img1.jpg); background-repeat: no-repeat; background-position: right; padding: 50px 0;}
#service .set1 dl { background: #fff; width: 600px; padding: 40px 20px; box-shadow: 0 0 15px #b3b3b3;}
#service .set1 dl dt { position: relative; display: inline-block; margin-bottom: 1em; font-family: "adobe-garamond-pro", serif; font-weight: 400; font-style: normal; color: #009fdf; font-size: 30px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
#service .set1 dl dt:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 30px; height: 5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #009fdf; }
#service .set1 dl dd { text-align: center;}

#service .set2 {background-image: url(../images/bo_img2.jpg); background-repeat: no-repeat; background-position: left; padding: 50px 0;}
#service .set2 dl { background: #fff; width: 600px; padding: 40px 20px; margin: 0 0 0 auto; box-shadow: 0 0 15px #b3b3b3;}
#service .set2 dl dt { position: relative; display: inline-block; margin-bottom: 1em; font-family: "adobe-garamond-pro", serif; font-weight: 400; font-style: normal; color: #009fdf; font-size: 30px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
#service .set2 dl dt:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 30px; height: 5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #009fdf; }
#service .set2 dl dd { text-align: center;}

#service .set3 {background-image: url(../images/bo_img3.jpg); background-repeat: no-repeat; background-position: right; padding: 50px 0;}
#service .set3 dl { background: #fff; width: 600px; padding: 40px 20px; box-shadow: 0 0 15px #b3b3b3;}
#service .set3 dl dt { position: relative; display: inline-block; margin-bottom: 1em; font-family: "adobe-garamond-pro", serif; font-weight: 400; font-style: normal; color: #009fdf; font-size: 30px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
#service .set3 dl dt:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 30px; height: 5px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background-color: #009fdf; }
#service .set3 dl dd { text-align: center;}


/* コンテンツ見出し */

h2.ttl { text-align: center; margin: 0 auto 50px;}
h2.ttl .en { display: block; font-size: 50px; text-align: center; font-family: "adobe-garamond-pro", serif; font-weight: 400; font-style: normal; color: #009fdf;}
h2.ttl .jp {display: flex; align-items: center; font-family: serif; font-size: 25px;}
h2.ttl .jp:before, h2.ttl .jp:after { content: ''; height: 1px; flex-grow: 1; background-color: #666;}
h2.ttl .jp:before { margin-right: 1rem; }
h2.ttl .jp:after { margin-left: 1rem;}

h2.ttl-wh { text-align: center; margin: 0 auto 50px;}
h2.ttl-wh .en { display: block; font-size: 50px; text-align: center; font-family: "adobe-garamond-pro", serif; font-weight: 400; font-style: normal; color: #fff;}
h2.ttl-wh .jp {display: flex; align-items: center; font-family: serif; font-size: 25px; color: #fff;}
h2.ttl-wh .jp:before, h2.ttl-wh .jp:after { content: ''; height: 1px; flex-grow: 1; background-color: #fff;}
h2.ttl-wh .jp:before { margin-right: 1rem; }
h2.ttl-wh .jp:after { margin-left: 1rem;}




/* コンテンツ */
.contents{width: 100%;max-width: 1336px;margin: 0 auto; }
/* コンテンツ　ワード領域 */
.word{padding: 0 0 50px;line-height: 2em;}

/* コンテンツ　背景*/
.LightBlue{background:  rgba(200,205,221,1.00);margin: 0px 0px 155px 0px;}
.LightLightBlue{background: hsla(150,8%,95%,1.00);}


.White{background:  rgba(255,255,255,1.00);margin: 0px 0px 155px 0px;}


/* 当社について*/
#introduction { background: url(../images/intro_bg.jpg); background-position: top center; background-repeat: no-repeat; padding: 150px 0; margin: 200px 0 0;}

#introduction .txt { color: #fff; text-align: center;}
#introduction .txt p { margin-bottom: 50px; line-height: 1.8; font-size: 20px;}
#introduction .txt p:last-child { margin-bottom: 0;}

/* news*/
#news { padding: 120px 0 150px;}


.Lbox{ display: block; width: 100%; color: #009fdf;}
.Rbox{float: left;}


#newsWrap{ width: 100%; background: #e0f6ff; padding: 50px; box-sizing: border-box;}

ul#newsList{
	width: 100%;
	max-width: 1336px;
	background: hsla(0,0%,100%,1.00);
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
	position: relative;

}
.bg_line{height: 1px;background: hsla(150,8%,95%,1.00); margin: 0px 0px 150px 0px}
.bg_line_sub{height: 1px;background: hsla(150,8%,95%,1.00); margin: 0px 0px 30px 0px}


ul#newsList a.list { display: block; position: absolute; left: 50%;-webkit-transform: translateX(-50%); transform: translateX(-50%);  bottom: -73px; text-align: center; color: #fff; padding: 10px 20px; background: #009fdf;}

ul#newsList li{
	color:#666;
	margin:0;
	padding:2em;
	margin-bottom:3px;
	border-bottom:1px dotted #ccc;
	line-height:120%;
	list-style-type:none;}

.catName{
	display:inline-block;
	padding:3px 8px;
	border:1px solid #ccc;
	border-radius:6px;
	line-height:100%;
	margin:0 2px;
}
.newMark{
	display:inline-block;
	border:1px solid #F00;
	padding:1px 4px;
	line-height:100%;
	background:#F00;
	color:#fff;
	box-shadow:1px 1px 1px #999;
	border-radius:8px;
	font-style:italic;
}
.comment{
	display:block;
	padding:3px 0;
	float:left;
	overflow:hidden;
	width:auto;
}
.thumbNailWrap{
	display:block;
	width:75px;
	float:left;
	overflow:hidden;
}
.linkTag,.title{ display:block; margin:3px 0; color: #009fdf; }



.thumbNailWrap{
	display:block;
	width:110px;
	float:left;
	height:80px;
	overflow:hidden;
}

/* Pager style（外部化可） */
.pager{
	text-align:right;
	padding:10px;
	clear:both;
}
/*ページャーボタン*/
.pager a{
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #333;
    font-size: 12px;
    padding: 3px 7px 2px;
    text-decoration: none;
	margin:0 1px;
}

/*現在のページのボタン*/
.pager a.current{
    background: #999;
    border: 1px solid #999;
    border-radius: 5px 5px 5px 5px;
    color: #fff;
    font-size: 12px;
    padding: 3px 7px 2px;
	margin:0 1px;
    text-decoration: none;
}

.pager a:hover{
    background:#999;
    color: #fff;
}

.overPagerPattern{
	padding:0 2px ;	
}

/* 会社概要*/

#company { background: #009fdf; padding: 150px 0;}
.company-table { background: #fff; padding: 40px;}
.company-table dl { border-bottom: 1px dashed #666; padding: 20px;}
.company-table dl:last-child { border-bottom: none;}
.company-table dl dt { display: inline-block; width: 20%; vertical-align: middle;}
.company-table dl dd { display: inline-block; width: 79%; vertical-align: middle;}




/* フッター　*/

.map { margin-bottom: 100px;}

#f_logo{text-align: center; margin: 0px 0px 20px 0px;}
#f_logo img{width: 100%;max-width: 274px}
a#copy{display: block;text-align: center;margin: 0px 0px 20px 0px;text-decoration: none; color: #1d1d1d; }





/*トップへ戻るボタン*/
.topBtn {
  position:fixed; /*固定*/
  bottom:20px; /*場所を右下に移動*/
  right:20px; /*場所を右下に移動*/
  display:block; /*aタグをblock要素に変更*/
  background-color:rgba(0,0,0,0.5); /*以下、デザインはご自由に！！*/
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  font-size:11px;
  width:60px;
  height:60px;
  text-align:center;
  line-height:22px;
  border-radius:30px;
  padding-top:30px;
  box-sizing:border-box;
}
.topBtn:before {
  content:'\25B2';
  position:absolute;
  top:10px;
  left:0;
  width:100%;
  text-align:center;
  font-size:20px;
}
.topBtn:hover {
  opacity:0.7;
}