@charset "utf-8";


.topimg{
 position: relative;
}

.btmimg{
 position: absolute;
 bottom:0;
}
.staff01-top{
 position: relative;
}

.btmimg2{
 z-index:999;
 position: absolute;
 bottom:0;
}
.btmimg2 img{
  width: 100%;
}
.btmimg img{
  width: 100%;
}

#g_navi ul li.pc_hide,
.pc_hide{
display: none;
}
.pc_show {
display: block;
}

* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.flexbox {
   display:flex;
}

html {
  height: 100%;
}

body {
	color: #111;
	background-color: #F2F6F7;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", "MS Gothic", sans-serif;
	word-wrap: break-word;
	height: 100%;
	line-height: 2.2;
}

.font_mincho {
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "Sawarabi Mincho", "HG明朝E",  "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

section,
article {
	display: block;
}

img {
	vertical-align: top;
}

a img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	transition: 0.2s linear;
}

a:hover img {
	filter: brightness(120%);
}

li {
	list-style-type: none;
}

a {
	color: #0099CC;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	transition: 0.2s linear;
}
a:hover {
	color: #3C5B6F;
	text-decoration: none;
}

table {
	border-collapse: collapse;
}
table td {
	border-collapse: collapse;
}

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

/*
ヘッダー
-------------------------------------------*/
header {
	width: 100%;
	position: fixed;
	z-index: 300;
	transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

header.fixed {
	background-color: #111;
	background-color: rgba(242,246,247,0.9);
}

header #top_logo a img,
header h1 a img {
	display: block;
	position: absolute;
}

#footer_logo{
  margin: 0 0 20px 0;
}

#footer_logo a img{
    width: 100%;
    height: auto;
}


#g_navi ul li a.ac_menu {
	cursor: pointer;
	overflow: hidden;
}

.pankuzu {
	background-color: #15394A;
	font-size: 14px;
	line-height: 30px;
	color: #fff;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #D6D1CB;
}

.pankuzu #breadCrumbs {
	width: 96%;
	max-width: 1100px;
	margin-right: auto;
	margin-left: auto;
}

.pankuzu li {
	display: inline-block;
}

.pankuzu li a {
	text-decoration: none;
	color: #fff;
}

.pankuzu li::after {
	content: ">";
	padding-left: 10px;
	padding-right: 10px;
}

.pankuzu li a:hover {
	color: #fff;
}

.pankuzu li i {
	padding-right: 5px;
}

.pankuzu li:last-child::after {
	display: none;
}

.content.movie_blk{
  padding: 40px 0;
}

#ulNewsTest .content{
     padding: 10px 0;
}

#consept {
  margin-bottom:40px;
}

#consept img{
  width: 100%;
}
#consept #leftArea{
    width: 45%;
    box-sizing: content-box;
    padding: 35px;
  background-color: #fff;
}

#consept #leftArea h2 {
  font-size: 195%;
  line-height: 1.5;
  font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "Sawarabi Mincho", "HG明朝E",  "ＭＳ Ｐ明朝", "MS PMincho", serif;
  margin: 0 0 20px 0;
}

#consept #rightArea{
  width: 50%;
}

#consept #rightArea figure{
 margin: 0 0 20px 0;
}
#consept #rightArea ul li:first-child{
 margin: 0 10px 0 0;
}
#consept #rightArea ul li:last-child{
 margin: 0 0 0 10px;
}

.content #consept #leftArea p{
  font-size: 100%;
  margin: 0 0 20px 0;
}

.content #consept #leftArea p.btn a{
 display: block;
 border: 1px solid #000;
 padding: 10px;
 width: 400px;
 color: #000;
 text-decoration: none;
 text-align: center;
}

.content #consept #leftArea p.btn a {
  position: relative;
  display: inline-block;
  padding-left: 20px;
}

.content #consept #leftArea p.btn a:hover {
 border: 1px solid #000;
background-color: #000;
 color: #fff;
}


.content #consept #leftArea p.btn a:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 260px;
  bottom: 0;
  margin: auto;
}

.content #consept #leftArea p.btn a:hover:before {
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
}

#newslist {
  background-color: #fff;
  padding: 20px;
  position: relative; 
  margin-bottom:40px;
}

#newslist .links{
  position: absolute;
  top:0;
  right: 10px;
}

.feed{
  display: none;
}

#newslist .tabs{
  display: none;
}


.jobArea{
  margin-bottom:40px;
}

.jobArea ul li figure{
  position: relative; 
}

.jobArea ul li a{
  color: #3C5B6F;
}

.jobArea ul li {
  margin: 0 10px 0 0;
    font-size: 140%;
}
.jobArea ul li:last-child {
  margin: 0;
}

.jobArea ul li figure img{
 width: 100%;
}

.jobArea ul li figure figcaption{
    position: absolute;
    bottom: 0;
    width: 60%;
    background-color: #fff;
   font-family: "Sawarabi Mincho", "HG明朝E",  "ＭＳ Ｐ明朝", "MS PMincho", serif;
   padding: 5px 10px 0px 10px;
}

.jobArea ul li figure figcaption .fas,
.jobArea ul li figure figcaption .far{
  font-size: 30px;
  padding: 0 10px 0 0;
}

#topvmenu li .fas,
#topvmenu li .far{
  color: #9BBEC8;
  font-size: 60px;
  line-height: 0;
}

#incontent{
    background: url(/_themes/base2/img/bg_voice.jpg) no-repeat center center;
    background-size: cover;
    margin: 0 0 40px 0;
    padding: 20px;
}

#incontent a{
   display:block;
   text-decoration: none;
   color:#000;
}
#incontent a:hover{
   color:#000;
}


#bne2Area {
    padding: 80px 0;
    background: url(/_themes/base2/img/bg_bne2Area.jpg) no-repeat bottom center;
    background-size: cover;
}


#bne2Area ul li {
    margin: 0 20px 0 0;
}
#bne2Area ul li:last-child {
    margin-right: 0;
}

#bne2Area li img{
  width: 100%;
  height: auto;
}
#incontent img{
  width: 40%;
  height: auto;
}

#bnrAera ul li img{
  width: 100%;
  height: auto;
}

#voice{
  background-color: #015FAD;
  padding:40px 0;
}

#bnrAera ul li {
margin: 0 20px 0 0; 
}
#bnrAera ul li:last-child {
margin-right: 0;
}

#saiyoArea .leftArea,
#saiyoArea .rightArea{
width:50%;
}

#saiyoArea h2{
  color: #fff;
  font-family: "Sawarabi Mincho"; 
  margin: 0 20px 0 0;
}


#saiyoArea .leftArea ul li {
  width: 280px;
  font-family: "Sawarabi Mincho"; 
  font-size: 120%;
  margin: 0 20px 0 0;
}
#saiyoArea .leftArea ul li:last-child {
  margin-right: 0;
}



#saiyoArea .leftArea ul li a{
  border: 1px solid #fff;
  display: block;
  text-align: center;
  background-color: #fff;
  color: #000;
  padding: 30px 0;
  text-decoration: none;
  position: relative;
}
#saiyoArea .leftArea ul li a:hover{
  background-color: #000;
  color: #fff;
}
#saiyoArea .leftArea ul li a:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 240px;
  bottom: 0;
  margin: auto;
}

#saiyoArea .leftArea ul li a:hover:before {
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
}


#saiyoArea .leftArea ul li:last-child a:before {
  left: 215px;
}



#saiyoArea .rightArea ul li {
  font-family: "Sawarabi Mincho"; 
  font-size: 140%;
}
#saiyoArea .rightArea ul li a{
  display: block;
  text-align: center;
  border: 1px solid #fff;
  color: #fff;
  padding: 30px 0;
  text-decoration: none;
  position: relative;
}

#saiyoArea .rightArea ul li a:hover{
  border: 1px solid #fff;
  background-color: #000;
  color: #fff;
}
#saiyoArea .rightArea ul li a:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 230px;
  bottom: 0;
  margin: auto;
}
#saiyoArea .rightArea ul li a:hover::before {
 color: #fff!important;
}


#saiyoArea {
    background: url(/_themes/base2/img/bg_saiyo.jpg) no-repeat center center;
    background-size: cover;
}

#saiyoArea #inwrap{
    background-color:rgba(1,95,173,0.9);
    padding: 80px 0;
}

#page-recruit-careerStory-index #saiyoArea #inwrap{
    background-color:rgba(61,167,158,0.9);
}

#topvmenu{
  display: flex;
}

/*-------------------------------------------
背景動画
-------------------------------------------*/
.movie_blk {
    width: 100%;
    position: relative;
}
.movie_blk video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/*--.movie_blk p {
    font-size: 20px;
    padding: 20px;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.7);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%,-50%);
}--*/


#top_visual{
  padding: 160px 0;
  background-color: #EEE;
}
#top_visual h1{
text-align: center;
font-size: 140%;
font-family: "Sawarabi Mincho"; 
}
#top_visual p.visualEn{
text-align: center;
color: #3C5B6F;
font-size: 290%;
font-family: "Sawarabi Mincho"; 
font-weight: bold;
}

/*
募集要項
*/
#shisotsuCyaria{
    background-color:rgba(255, 255, 255, 0.52);
    padding: 50px;
    margin-bottom: 40px;
}

#requirementsArea h2{
  text-align: center;
  font-family: "Sawarabi Mincho"; 
  font-size: 200%;
  margin: 0 0 60px 0;
}

#yoko li{
  width:33%;
  margin: 0 20px 0 0;
  background-color: #eee;
  padding: 10px;
}
#yoko li li{
  padding: 2px;
}
#yoko li:last-child{
  margin-right: 0;
}

#yoko h4{
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
  background-color: #9BBEC8;
  color: #fff;
  font-family: "Sawarabi Mincho"; 
}

#yoko li.tlt{
  background-color: #9BBEC8;
  color: #fff;
  text-align: center;
}

#taigu{
    background-color: rgba(255, 255, 255, 0.52);
    padding: 50px;
    margin-bottom: 40px;
}

#taigu .table table{
  width: 100%;
} 

#taigu .table th,
#taigu .table td{
  padding: 15px;
}

#taigu .table th{
  background-color:#3C5B6F;
  border: 1px solid #3C5B6F;
  border-bottom: 1px solid #fff;
  color: #fff;
}
#taigu .table td{
  border: 1px solid #3C5B6F;
  background-color:#fff;
}

#faq{
    background-color: rgba(255, 255, 255, 0.52);
    padding: 50px;
}

#faq dt{
  font-size: 120%;
  border-left: 2px solid #3C5B6F;
  line-height: 1.6;
  padding: 0 0 0 5px;
  margin: 0 0 20px 0;
  font-weight: bold;
font-family: "Sawarabi Mincho"; 
}

#faq dd{
   margin: 0 0 60px 0;
   font-family: "Sawarabi Mincho"; 
}

#welfareArea{
padding: 40px 0;
background-color: #015FAD;
}

#docsArea .docs,
#prosessArea,
#event .pieceContainer,
#QAcommentArea,
#statusArea,
#leadArea,
#voicepArea,
#jpbsArea .cont_wrap,
#allsyain{
    padding: 90px 50px;
    background-color: #fff;
    box-sizing: content-box;
}

#docsArea .docs{
 padding: 20px;
}

.text-beginning{
    padding: 90px 0;
    background-color: #fff;
    box-sizing: content-box;
}

#page-recruit-jobFair-index{
background-color: #fff;
}

#voicepArea{
padding-top: 0;
}
#QAcommentArea{
padding-top: 50px;
padding-bottom: 50px;
}

#welfareArea{
background-color: #015FAD;
}

#leadArea,
#voicepArea{
background-color: #3472a9;
}
#leadArea{padding-bottom:0;
}

#leadArea .cont_wrap{
width: 80%;
}

#leadArea figure img{
  width: 315px;
  height: auto;
}

.content #leadArea h3{
  margin: 0;
  padding:0 0 10px 0;
  color: #9BBEC8;
    font-weight: bold;
}

.content #leadArea h3:after{
  display: none;
}

#leadArea .left,
#leadArea .right {
  width: 50%;
}
#leadArea .left{
  text-align: center;
}

#leadArea p.tit {
    text-align: center;
    width: 200px;
    margin: 0 0 40px 0;
    background-color: #3C5B6F;
    color: #fff;
    border-radius: 8px;
}

#leadArea h2 {
  color: #fff;
  font-family: "Sawarabi Mincho";
  font-size: 34px; 
  line-height: 1.6;
}

#leadArea .naiyou{
  background-color: #fff;
  border-radius: 5px 5px 0px 0px;
  padding: 20px;
}

.content #leadArea .naiyou p{
 margin: 0;
}

#statusArea h2 {
    text-align: center;
    font-family: "Sawarabi Mincho";
    font-size: 250%;
    margin: 0 0 20px 0;
    color: #9BBEC8;
}
#statusArea ul{
    flex-wrap: wrap;
}

#statusArea ul li {
  width: 33%;
    font-size: 20px;
    line-height: 1;
    font-weight: bold;
    font-family: "Sawarabi Mincho";
    margin: 20px 0 20px 0;
}


#welfareArea h2{
    text-align: center;
    font-family: "Sawarabi Mincho";
    font-size: 200%;
    margin: 0 0 40px 0;
}

#welfareArea #allsyain h2{
    text-align: center;
    font-family: "Sawarabi Mincho";
    font-size: 200%;
    margin: 0 0 20px 0;

}

.content #welfareArea #shikaku h2{
    text-align: left;
    border-bottom: 1px solid #000;
    font-size: 160%;
}


#welfareArea p.tit{
    text-align: center;
    width: 200px;
    margin: 0 auto 40px auto;
    background-color: #3C5B6F;
    color: #fff;
    border-radius: 8px;
}

.content #welfareArea #shikaku,
.content #welfareArea ul{
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    margin-top: 10px;
    margin-bottom: 40px;
    padding: 40px 20px 40px 20px;
    z-index: 1;
}



.content #welfareArea ul li h3{
    color: #fff;
}

.content #welfareArea ul li{
    width: 32%;
    background-color: #3C5B6F;
    color: #fff;
    margin: 0 20px 0 0;
    padding: 20px;
}
.content #welfareArea ul li:last-child{
    margin: 0 0 0 0;
}

.content #welfareArea h3 {
	font-size: 34px;
	line-height: 30px;
	margin-bottom: 30px;
	position: relative;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	font-weight: normal;
	color: #9BBEC8;
	clear: both;
	letter-spacing: 0;
	text-align: center;
    font-family: "Sawarabi Mincho";
}

.content #welfareArea h3::after {
	display: block;
	width: auto;
	height: auto;
	position: unset;
	background-color: unset;
	content:unset;
}

.content #welfareArea h4 {
    font-size: 20px;
    color: #fff;
    border-bottom: 1px solid #fff;
    letter-spacing: 0.1em;
    padding: 0 0 10px 0;
    font-weight: bold;
    clear: both;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 20px;
    margin-left: 0;
    text-align: center;
    font-family: "Sawarabi Mincho";
}

.gallery.flexbox{
  display: flex;
  flex-wrap: wrap;
}
.gallery.flexbox div{
  width: 48%;
  margin: 0 1% 20px 1%;
}
.gallery.flexbox div img{
  width: 100%;
}



/*
仕事紹介　パララクス
-------------------------------------------*/

.parara {
	background-repeat: no-repeat;
	text-align: center;
	padding-top: 8%;
	padding-right: 20px;
	padding-bottom: 8%;
	padding-left: 20px;
	background-size: cover;
	background-attachment: fixed;
	background-position: center top;
	color: #FFF;
}

#topvmenu{
  justify-content: center;
  margin: 50px 0 0 0;
}

#topvmenu li {
  text-align: center;
  width:250px;
  margin: 0 100px 0 0;
  font-family: "Sawarabi Mincho"; 
}
#topvmenu li:last-child {
  margin: 0 ;
}

#topvmenu li span{
  display: block;
}
#topvmenu li span.name{
  font-size: 20px;
  font-weight: bold;
}
#topvmenu li span.sankaku{
  font-size: 10px;
}


#topvmenu li a{
  color: #000;
  text-decoration: none;
  display: block;
}
#topvmenu li a:hover{
background-color:#e3edf0;
}

.jobs001 {
	background-image: url(/_themes/base2/img/bg_sekokanri.jpg);
}
.jobs002 {
	background-image: url(/_themes/base2/img/bg_eigyo_sekkei.jpg);
}
.jobs003 {
	background-image: url(/_themes/base2/img/bg_haikei_soumu.jpg);
}



#jpbsArea{
  background-color:#EEE;
  padding: 0 0 80px 0; 
}

.content #jpbsArea p.ttl{
  color:#015FAD;
  font-size: 32px;
  text-align: center;
  font-family: "Sawarabi Mincho";
}

#jpbsArea .cont_wrap {
    margin-top: -80px;
    margin-bottom: 80px;
}

#jpbsArea .cont_wrap #eigyo{
  border: 1px solid #3C5B6F;
  padding: 15px;
}

.content #jpbsArea .cont_wrap #eigyo h3{
  color:#3C5B6F;
  border-bottom: 1px solid #3C5B6F;
  padding: 15px 0 30px 0;
  text-align: center;
  position: unset;
  font-weight: bold;
}

.content #jpbsArea .cont_wrap #eigyo h3:after{
display: none;
}

.content #jpbsArea .cont_wrap #eigyo ul{
padding: 0 0 0 24px;
}
.content #jpbsArea .cont_wrap #eigyo ul li{
list-style-type: disc;
}
#QAcommentArea .flexbox{
 position: relative;
 min-height: 500px;
}
 
#QAcommentArea .qac{
    border: 1px solid #3472a9;
    position: absolute;
    z-index: 10000;
    width: 550px;
    padding: 30px;
    background-color: #fff;
    top: -20px;
}

.content #QAcommentArea .qac h3{
 color: #3C5B6F;
 padding: 0;
 margin-bottom: 14px;
}
.content #QAcommentArea .qac p{
 margin-bottom: 0;
}

.content #QAcommentArea .qac h3:after{
  display: none;
}
#QAcommentArea figure{
 position: absolute;
}

#QAcommentArea #clm05 .qac,
#QAcommentArea #clm03 .qac,
#QAcommentArea #clm01 .qac{
 left: 0;
}

#QAcommentArea #clm06 .qac,
#QAcommentArea #clm04 .qac,
#QAcommentArea #clm02 .qac{
 right: 0;
}


#QAcommentArea #clm05 figure,
#QAcommentArea #clm03 figure,
#QAcommentArea #clm01 figure{
 right: 0;
}

#QAcommentArea #clm06 figure,
#QAcommentArea #clm04 figure,
#QAcommentArea #clm02 figure{
 left: 0;
}


#job-fairArea{
    background-color: #EEE;
    padding: 50px 0 80px 0;
}
#prosessArea{
    background-color: #fff;
}

#event h2,
#prosessArea h2{
     background-color: #3C5B6F;
    text-align: center;
    color: #fff;
  font-family: "Sawarabi Mincho"; 
  margin: 0 0 30px 0;
}

#prosessArea ol,
#prosessArea ul{
  margin: 0 0 0 24px;
}

#prosessArea ol li,
#prosessArea ul li{
  margin: 0 0 40px 0;
  font-family: "Sawarabi Mincho"; 
}

#prosessArea ol li{
  list-style-type: decimal;
}

#prosessArea ul li{
  list-style-type: disc;
}



#prosessArea section{
  margin: 0 0 40px 0;
}
.content #prosessArea section h3 {
    font-size: 28px;
    line-height: 30px;
     padding: 0;
     margin: 0 0 20px 0;
    color: #3C5B6F;
 }
.content #prosessArea section h3:after {
    display: none;
}

.content #prosessArea ol li span {
  display: block;
  font-size: 140%;
}

.content #prosessArea ol li strong {
    font-size: 20px;
}
.content #prosessArea ul li strong {
    font-size: 20px;
}

#prosessArea ul li span{
    font-size: 24px;
}



#page-recruit-concept-index #top_visual{
  background-image:url(/_themes/base2/img/bg_concept_topv.jpg);
  padding: 100px 0;
}
#page-recruit-concept-index #top_visual h1{
text-align: left;
font-size: 140%;
font-family: "Sawarabi Mincho"; 
}

#conceptMssagesArea{
  width: 50%;
  margin: 0 0 0 50%;
}
#conceptMssagesArea h2{
  line-height:1.2;
  font-family: "Sawarabi Mincho"; 
  font-size:60px;
  color: #3C5B6F;
  margin: 0 0 10px 0;
}
#conceptArea{
  background-color: #fff;
}
#conceptMssagesArea h3{
    font-size: 35px;
  font-family: "Sawarabi Mincho"; 
}
#conceptMssagesArea p{
  margin: 0 0 10px 0;
}
#conceptArea .prewrap{
  background:url(/_themes/base2/img/img_precious.jpg) no-repeat center center;
  background-size: cover;
  padding: 60px 0
}

#conceptArea .prewrap .pre h2 {
    text-align: center;
    font-family: "Sawarabi Mincho";
    font-size: 270%;
    margin: 0 0 0 0;
    color: #fff;
    line-height: 01;
}

#conceptArea .prewrap .pre p{
    text-align: center;
    font-family: "Sawarabi Mincho";
    margin: 0 0 20px 0;
    color:#fff;
}

#conceptArea .prewrap .come{
  background-color: #fff;
  padding: 40px;
  border-radius: 5px;
}

#conceptArea #works .come h3,
#conceptArea #works .pre h3,
#conceptArea .prewrap .come h3 {
    color: #015FAD;
    font-size: 32px;
    text-align: center;
    font-family: "Sawarabi Mincho";
    line-height: 1.4;
    margin: 0 0 20px 0;
    font-weight: normal;
}




#works .prewrap .pre h2 {
    text-align: center;
    font-family: "Sawarabi Mincho";
    font-size: 270%;
    margin: 0 0 0 0;
    color: #015FAD;
    line-height: 01;
}

#conceptArea .prewrap .pre p{
    text-align: center;
    font-family: "Sawarabi Mincho";
    margin: 0 0 20px 0;
    color:#fff;
}
#conceptArea #works .come,
#conceptArea #works .pre{
    padding: 40px;
}
#conceptArea #works .pre h2 {
   text-align: center;
    font-family: "Sawarabi Mincho";
    font-size: 270%;
    margin: 0 0 0 0;
    color: #015FAD;
    line-height: 01;
}

#conceptArea #works .pre p {
   text-align: center;
   color: #3C5B6F;
    font-family: "Sawarabi Mincho";
}

#conceptArea .fuwrap{
  background:url(/_themes/base2/img/bg_onehundred.jpg) no-repeat center center;
    background-size: cover;
  padding: 140px 0
}

#conceptArea .fuwrap h2{
    text-align: center;
    font-family: "Sawarabi Mincho";
    font-size: 270%;
    margin: 0 0 60px 0;
    color: #fff;
    line-height: 1.3;
}

#futureArea .pre ul {
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;   
}

#futureArea .pre ul li{
  width: 48%;
  margin: 0 2% 2% 0;
}

#futureArea .pre ul li:last-child{
  margin-right: 0;
}

#futureArea .pre ul .btn {
  display: inline-block;
  width: 100%;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  color: #000;
  border: 1px solid #000;
  background-color: #fff;
}
#futureArea .pre ul .btn:hover {
  border: 1px solid #fff;
  background-color: #000;
  background-color: #000;
  color: #fff;
  transition: 1s;
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

#prosessArea h2 {
    background-color: #3C5B6F;
    text-align: center;
    color: #fff;
    font-family: "Sawarabi Mincho";
    margin: 0 0 30px 0;
}

#activityArea{
    padding: 40px 0;
    background-color: #015FAD;
}

#activityArea ul{
    flex-wrap: wrap;
}

#activityArea ul li{
  width: 49%;
  margin: 0 20px 20px 0;
}
#activityArea ul li:nth-child(2){
  margin: 0 0 20px 0;
}
#activityArea ul li:nth-child(4){
  margin: 0 0 20px 0;
}
#activityArea ul li:nth-child(6){
  margin: 0 0 20px 0;
}
#activityArea ul li:nth-child(8){
  margin: 0 0 20px 0;
}
#activityArea ul li img{
  width: 100%;
}



#gooddArea,
#sekkeiDSArea,
#studuArea {
  background-color: #fff;
  margin-bottom:40px;
}

.content #sekkeiDSArea p,
.content #gooddArea p{
    padding: 25px 25px 0 25px;
    margin: 0 0 0 0;
}

#activityArea .flexbox.gallaryAreal  li:nth-child(4),
#activityArea flexbox.gallaryAreal  li:nth-child(3){
  margin-bottom: 0 0 0 0;
}



#gooddArea h2,
#sekkeiDSArea h2,
#studuArea h2{
  background-color: #3C5B6F;
  color: #fff;
  font-family: "Sawarabi Mincho";
  text-align: center;
  font-weight: normal;
  padding: 10px 0;
}

#sekkeiDSArea .photo,
#gooddArea .flexbox.gallaryArea,
#gooddArea .flexbox.gallaryArea,
#studuArea .messages,
#studuArea .flexbox.gallaryArea{
 padding: 0 25px 25px 25px;
}

#sekkeiDSArea .photo li,
#gooddArea .flexbox.gallaryArea li,
#gooddArea .flexbox.gallaryArea li,
#studuArea .flexbox.gallaryArea li{
 padding:0;
}

.content #sekkeiDSArea h3,
.content #gooddArea h3{
  margin: 0;
}


#studuArea img{
  width: 100%;
}

#studuArea .flexbox.gallaryArea div {
    width: 48%;
    margin: 0 1% 20px 1%;
}

#page-recruit-activity-index #top_visual{
  background: url(/_themes/base2/img/img_ttl_kohara_katsudo.png) #EEE no-repeat center center;
  padding: 300px 0 0 0;
}

#page-recruit-careerStory-index #top_visual h1,
#page-recruit-activity-index #top_visual h1{
    text-indent: -999999px;
}

#page-recruit-activity-index #top_visual p.visualEn {
    font-size: 24px;
    padding-bottom: 70px;
}

#page-recruit-careerStory-index #top_visual ,
#page-recruit-talk-index #top_visual {
  padding:0;
  line-height: 0;
}
#page-recruit-careerStory-index #top_visual img,
#page-recruit-talk-index #top_visual img{
  width: 100%;
}

#page-recruit-talk-index #top_visual h1{
    text-indent: -999999px;
}

#page-recruit-talk-index #talkArea{
   padding: 40px 0;
}

#page-recruit-talk-index #staff4mei {
  margin-bottom: 100px;
}

#page-recruit-talk-index #staff4mei ul li{
   background-color: #F6D13B;
   margin: 0 20px 0 0;
   padding: 1%;
  font-family: "Sawarabi Mincho";
   width: 23.2%;
}
#page-recruit-talk-index #staff4mei ul li:last-child{
   margin: 0;
}

#page-recruit-talk-index #staff4mei ul li figure{
  text-align: center;
}

#page-recruit-talk-index #staff4mei ul li figure figcaption{
  background-color :#3C5B6F;
  color :#fff;
  font-weight: bold;
}

#page-recruit-talk-index #staff4mei ul li div .name,
#page-recruit-talk-index #staff4mei ul li div .year{
justify-content: space-between;
width: 50%;
text-align: center;
  font-size: 100%;
}

#page-recruit-talk-index #staff4mei ul li div .name:first-letter{
 font-size:140%; 
}
#page-recruit-talk-index #staff4mei ul li div .year{
margin: 10px 0 0 0;
}
#page-recruit-talk-index #staff4mei ul li img{
  width: 100%;
}

#takeStaffArea #menuList{
background-color:#F6D13B;
border-radius: 50% 50% 0 0;
padding: 100px 0 50px 0;
}
 #bottomArea{
background-color:#F6D13B;
border-radius: 0 0 50% 50%;
padding: 0 0 100px 0;
margin: 0 0 100px 0;
}

#page-recruit-talk-index #maincontent #wrap{
    background-color: #F6D13B;
}
#wrap #icontalKArea .flexbox{
padding:  0;
  margin-bottom:40px;
  padding: 40px;
  border-bottom:1px solid #fff;
}

#wrap #icontalKArea .flexbox:last-child{
  margin-bottom:0;
  padding: 0;
  border:none;
}

#wrap #icontalKArea .flexbox .flexbox{
  margin-bottom:0px;
  padding: 0px;
  border:none;
}

 #menuList li{
 border: 1px solid #3C5B6F;
 padding:15px;
 border-radius: 10px;
 width: 24%;
 flex: 1;
 background-color:#fff;
text-align: center;
    margin: 0 20px 0 0;

}
 #menuList li: li:last-child{
    margin: 0;
}
.content #menuList h2{
  line-height: 1;
}

.content #menuList h2 span{
  display: block;
}

.content #menuList h2 span.no{
  font-size:30px;
  padding-bottom:10px;
  border-bottom: 1px solid #3C5B6F;
  width:1.5em;
  margin: 0 auto 10px auto;
}
.content h2 span a{
  display: block;
  color:#3C5B6F;
}

 #menuList li a{
  text-decoration: none;
 color: #3C5B6F;
}

.talkspeace{

}
.talkttl{
 text-align: center;
}



.talkttl img{
  width: 400px;
}

.flexbox.talkspeace {
justify-content: space-between;
}

.flexbox.talkspeace .stimg{
  text-align: center;
  font-family: "Sawarabi Mincho";
}

.flexbox.talkspeace .stimg span{
 display: block;
}

.flexbox.talkspeace .stimg span::first-letter{
  font-size: 20px;
 font-weight: bold;
}


.flexbox.talkspeace img{
width: 160px;
}

#bucchake {
    background: url(/_themes/base2/img/bg_img_buccyake_talk.webp) no-repeat top center;
    padding-bottom: 0;
    background-size: cover;
}
.topcon{
    background-color:#222222;
}

.content .topcon h3 {
    display:inline-block;
    font-size: 18px;
    line-height: 30px;
    margin-bottom: 5px;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0;
    font-weight: normal;
    font-family: ""Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    clear: both;
    letter-spacing: 0;
    color: #fff;
    border-top: 1px solid #0473F3;
    border-bottom: 1px solid #0473F3;
}

.content .topcon h3:after{
  display: none;
}

.content .topcon ul {
  padding: 0 0 0 24px;
}

.content .topcon ul li{
  color: #fff;
    font-size: 18px;
    list-style-type: disc;
    font-family: ""Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.content .topcon ul li::marker {
  color: #0473F3; 
}

.topcon .cont_wrap.effect.flexbox{
    padding: 40px 0 0 0;
    margin-bottom: 20px;
}

.topcon #newme02,
.topcon #newme{
    padding-bottom: 50px;
    width: 94%;
    margin: 0 auto;
}

.topcon .cont_wrap.effect.flexbox .rightArea,
.topcon .cont_wrap.effect.flexbox .leftArea{
  width: 50%;
}
.topcon .cont_wrap.effect.flexbox .leftArea figure{
margin-top: 85px;
    margin-left: -20px;
}

.content .topcon .cont_wrap.effect.flexbox .leftArea p{
  color: #fff;
  font-family: "Sawarabi Mincho";
  font-size: 140%;
}

.topcon .cont_wrap.effect.flexbox .rightArea figure img{
  width: 100%;
}

.topcon .cont_wrap.effect.flexbox .leftArea h2 span{
display: inline-block;
    color: #000;
    font-size: 140%;
    background-color: #fff;
    margin-bottom: 10px;
    padding: 0px 20px;
    line-height: 1.6;
}

.staff01{
    position: relative;
    background-repeat: no-repeat;
    padding-right: 0px;
    padding-left: 0px;
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
    color: #FFF;
    background-image:url(/_themes/base2/img/bg_career01-reverse.webp);
    background-color: rgb(0 0 0 / .7);
    background-blend-mode: overlay;
}

.staff02{
   position: relative;
    background-repeat: no-repeat;
    padding-right: 0px;
    padding-left: 0px;
    background-size: cover;
    background-attachment: fixed;
    background-position: center top;
    color: #FFF;
    background-image:url(/_themes/base2/img/bg_career02-reverse.webp);
    background-color: rgb(0 0 0 / .7);
    background-blend-mode: overlay;
}

#cstory02 .rightArea,
#cstory01 .rightArea{
position: relative;
}

#cstory02 .rightArea h3,
#cstory01 .rightArea h3{
position: absolute;
 top:20px;
 left:0;
}

.content #photo-graf02 h3,
.content #photo-graf01 h3 {
	font-size: 32px;
	line-height: 30px;
	margin-bottom: 10px;
	position: relative;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	font-weight: normal;
	color: #fff;
	font-family: "Sawarabi Mincho", "HG明朝E",  "ＭＳ Ｐ明朝", "MS PMincho", serif;
	clear: both;
	letter-spacing: 0;
	margin-left:-30px;
}

.content #photo-graf02 h3::after ,
.content #photo-graf01 h3::after {
	display: none;
}

.content #photo-graf02 h3 span,
.content #photo-graf01 h3 span{
    display: block;
    color: #3C5B6F;
    background-color: #A1F423;
    font-size: 40%;
    width: 150px;
    margin: 10px 0 0 0;
    text-align: center;
	padding: 0;
}

/*-------------------------------------------
タイムライン
-------------------------------------------*/

.timeline {
  position: relative;
  margin-left: 2rem;
  border-left: 2px solid #ccc;
  padding-left: 1rem;
}

.timeline-item {
  position: relative;
  margin-block: 2rem;
}

.timeline-date {
  font-weight: bold;
  color: #555;
}

.timeline-content {
  margin-top: 0.5rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -1.55rem;
  top: 0;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 2px solid #666;
  border-radius: 50%;
}


/*-------------------------------------------
フリップカード
-------------------------------------------*/

.list {
  /* レイアウト */
  max-width: 97.5%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10rem;
  /* グリッドスタイル */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5%;
  /* 新しいCSSカウンターを生成 */
  counter-reset: item;
}

/* カードスタイル */

.list-item {    
    counter-increment: item; /* CSSカウンター値+１ */       
}
.item-inner {
    max-width: 400px;
    width: 100%;
    position: relative;
}
.icon-q, .icon-a {    
    margin-top: 2.5rem;
}
.icon-a {
    text-indent: 0.5rem;　/* カーニングの調整 */
}
.icon-q:before,
.icon-a:before {
    display: block;
    font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
    font-size: 950%;
    font-style: normal;
    font-weight: 400;
}
.icon-q:before {
    content: "Q";
}
.icon-a:before {
    content: "A";
}


.item-front, .item-back {
    height: 325px;
    position: relative;
    display: grid;    
    padding-top: 0.5rem;
    padding-right: 1.5rem;
    padding-bottom: 2.5rem;
    padding-left: 1.5rem;
    box-shadow: 0 0 1rem 1px rgba(0, 0, 0, 0.1);
}

.item-front:before, .item-back:before {
    /* CSSカウンターを表示 */
    content: "0"counter(item); 
    font-family: 'Cormorant Garamond', 'Noto Serif JP', serif;
    font-size: 200%;
    line-height: 1;
    display: block;
    position: absolute;
    left: 1.5rem;
    top: 1rem;
    color: #fff;
}


.list-item.no01 .item-front{
    background-color: #9BBEC8; 
}
.list-item.no01 .item-back {
    background-color: #3C5B6F;
}
.list-item.no02 .item-front{
    background-color: #C87D44; 
}
.list-item.no02 .item-back {
    background-color: #C87D44;
}
.list-item.no03 .item-front{
    background-color: #3da79e; 
}
.list-item.no03 .item-back {
    background-color: #288980;
}
.item-text {
  font-family: "Sawarabi Mincho";
    letter-spacing: 0.2em;
    line-height: 1.7;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-left: 0.75rem;
    color: #fff;
}

.item-front .item-text {
  padding-top: 120px;
  font-size:  140%;
}

.content .item-back p {
 font-size: 14px;
}

.content .item-back h3 {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 10px;
    position: relative;
    padding-top: 65px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    font-weight: normal;
    color: #fff;
    font-family: "Sawarabi Mincho";
    clear: both;
    letter-spacing: 0.05em;
}

.content .item-back h3::after {
	display: none;
}

/*----
.item-text:before {
    content: "";
    display: inline-block;
    height: 10px;    
    min-width: 10px;
    background-color: black;
}----*/
.item-dots {
    align-self: flex-end; 
    text-align: right;
    margin-right: 0.33rem;
}
.item-dots:before, .item-dots:after {
    content: ".";
    font-family: 'Cormorant Garamond',
                 'Noto Serif JP', serif;
    font-size: 250%;
    line-height: 1;
}
.item-front .item-dots:after {
    opacity: 0.3;
}
.item-back .item-dots:before {
    opacity: 0.3;
}
@media screen and (max-width: 767px) { 

    .list-title {
        font-size: 200%;
        margin-left: 5%;
    }    
    .list-title:after {
        width: 40px;
    }    
    .list {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5%;
        counter-reset: item;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .icon-q:before, .icon-a:before {
        font-size: 850%;
    }
    .item-front, .item-back {
        height: 380px;
    }
.item-front .item-text {
    padding-top: 120px;
    font-size: 130%;
}
}

/* チュートリアルスタート */
.list-item {
  perspective: 1000px;
}
.item-front {
  z-index: 2;
  backface-visibility: hidden;
}
.item-back {
  position: absolute;
  z-index: 1;
  transform: rotateY(-180deg);
  backface-visibility: hidden;
  top: 0;
  left: 0;
}
.list-item:hover .item-inner,
.list-item:focus .item-inner {
  transform: rotateY(-180deg);
}
.item-inner {
  transform-style: preserve-3d;
  transition: transform 1s ease;
}
.item-back {
 /*-- transition: background-color 2s ease-out;-*/
}
.list-item:hover .item-back,
.list-item:focus .item-back {
  /*-- background-color: lightyellow;-*/
}
#cstory02,
#cstory01 {
  padding: 70px 0;
  border:none;
}

#cstory02 .leftArea,
#cstory01 .leftArea{
  width: 30%;
}

#cstory02 .rightArea,
#cstory01 .rightArea{
  width: 70%;
}

#cstory02 .leftArea img,
#cstory01 .leftArea img{
  width: 100%;
}

#cstory02 .rightArea img,
#cstory01 .rightArea img{
  width: 100%;
}

.content .ep h4 {
    position: relative;
    font-size: 20px;
    padding: 0;
    border:none;
    margin-left: 0px;
    margin-bottom: 20px;
    font-family: "Sawarabi Mincho";
    font-weight: normal;
    line-height: 1;
}


.content .ep{
  margin: 0 0 100px 0;
}

.content .ep h4 .no{
    font-size: 80px;
    font-weight: 600;
    letter-spacing: 10px;
    color: #56A4FD70;
}
.content .ep h4 .eps{
    position: absolute;
    left: 65px;
    top: 33px;
    color: #ffff;
}

.content #next02 h4 .eps,
.content #next01 h4 .eps{
    left: 265px;
}


.episodeArea .ep h5{
  font-size: 26px;
    font-family: "Sawarabi Mincho";
}

#episodeAera02 #no04 .flexbox,
#episodeAera01 #no01 .flexbox{
  position: relative;
}


#episodeAera01 #no01 .flexbox .img{
    position: absolute;
    right: 0;
    z-index: -9;
    width: 56%;
    top: -50px;
}

#episodeAera02 #no04 .flexbox .img{
    position: absolute;
    right: 0;
    z-index: -9;
    width: 56%;
    top: -20px;
}

#episodeAera02 #no01 .flexbox .img img,
#episodeAera01 #no01 .flexbox .img img{
    filter: brightness(61%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
}


#progress01 .inwrap{
    background: linear-gradient(to top, transparent 0%, transparent 0%, #3c5b6f 40%), url(/_themes/base2/img/img_cyareea_hisory01_image.webp) left 180px;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0;
    background-attachment: fixed;
}

#progress02 .inwrap{
    background: linear-gradient(to top, transparent 0%, transparent 0%, #3c5b6f 40%), url(/_themes/base2/img/img_reverse.webp) left 180px;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 150px 0;
    background-attachment: fixed;
    position: relative;
    background-repeat: no-repeat;
    padding-right: 0px;
    padding-left: 0px;
    background-size: cover;
    background-attachment: fixed;
}

#progress02 .inwrap img,
#progress01 .inwrap img{
    background-color: rgb(0 0 0 / .7);
    background-blend-mode: overlay;
}

.content .progressArea .leftArea{
  width: 50%;
}
.content .progressArea .rightArea{
  width: 50%;
  margin: 0 0 0 20px;
}
.content .progressArea .rightArea img{
  width: 90% !important;
  height: auto!important;
}

.content .progressArea .rightArea div{
  background-color: #fff;
  padding: 30px;
}

.content .progressArea .rightArea div h3 span {
    display: block;
    color: #fff;
    background-color: #000;
}
.content .progressArea .rightArea div h3 span{
    width: 150px;
}
.content .progressArea .rightArea div h4{
    color: #000;
    line-height: 1.5;
}

.content .progressArea .rightArea div p{
    color: #000;
}

.content .progressArea .rightArea div h3{
  color: #000;
}

.content .progressArea h3 {
	font-size: 24px;
	line-height: 30px;
	margin-bottom: 30px;
	position: relative;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	font-weight: normal;
	color: #fff;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "Sawarabi Mincho", "HG明朝E",  "ＭＳ Ｐ明朝", "MS PMincho", serif;
	clear: both;
	letter-spacing: 0.05em;
}

.content .progressArea h3::after {
  display: none;
}
.content .progressArea h3 span{
    display: block;
    color: #3C5B6F;
    background-color: #A1F423;
    font-size: 40%;
    width: 60px;
    margin: 10px 0 0 0;
    text-align: center;
    padding: 0;
}

.content .progressArea h4 {
	font-size: 20px;
	color: #fff;
	border: none;
	line-height;1.6;
	letter-spacing: 0.1em;
	padding: 0;
	font-weight: bold;
	clear: both;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 20px;
	margin-left: 0;
	font-family: "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
#btncary {
justify-content: space-around;
 padding: 20px 0;
}
#btncary li {
  width: 100%;
  font-family: "Sawarabi Mincho"; 
  font-size: 120%;
  margin: 0 20px 0 0;
}
#btncary li:last-child {
  margin-right: 0;
}

#btncary li a{
  border: 1px solid #3C5B6F;
  display: block;
  text-align: center;
  background-color: #3C5B6F;
  color: #fff;
  padding: 30px 0;
  text-decoration: none;
  position: relative;
}
#btncary li a:hover{
  background-color: #fff;
  color: #000;
  border: 1px solid #3C5B6F;
}
#btncary li a:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  margin: auto;
}



#btncary li:first-child a:before {
  top: 0;
  left: 400px;
  bottom: 0;
}


#btncary li:last-child a:before {
  top: 0;
  left: 350px;
  bottom: 0;
}
#btncary li:last-child a:hover::before,
#btncary li:first-child a:hover::before {
  border-top: solid 2px #000;
  border-right: solid 2px #000;
}



.submit input{
    width: 250px;
    margin: 0 auto 30px auto;
    background-color: #ff7f00;
    color: #fff;
    display: block;
    padding: 10px;
    border: none;
    -webkit-appearance: none;
    font-size: 18px;
}
.submit input:hover{
opacity: 0.8;
}

#errorExplanation{
    border: 1px solid #ff0000;
    margin-bottom: 20px;
    padding: 20px;
}


#errorExplanation h2 {
    color: #ff0000;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 0 10px 0!important;
}

#errorExplanation p {
    font-weight: bold;
    margin: 0 0 10px 0!important;
}


 #errorExplanation ul {
    margin: 0 0 0 30px;
}

 #errorExplanation li {
     list-style-type: disc;
    color: #ff0000;
    margin: 0 0 5px 0;
}


/* ------------
mailform
---------------------------------------------------------------------------------*/
.note {
    background-color: #DD3C3C;
}
.note {
    display: inline-block;
    float: left;
    font-weight: bold;
    color: #ffffff;
    padding: 3px 5px;
    border-radius: 3px;
}
.captchaForm .reload,
.captchaForm .talk {
  display: inline-block;
  border: 1px solid #aaa;
}

.captchaForm .image{
    margin-bottom: 20px;
}
.reload a,
.talk a{
display: block;
text-decoration: none;
  padding: 5px 10px;
}
.field {
  margin-top: 15px;
}

form {
	width : auto;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
form .question,
form .questions {
    width: 90%;
    max-width: none;
    overflow : hidden;
    padding: 0;
    margin: 0 auto;
}
form .questions  .question{
	width : auto;
	max-width: none;
	overflow : hidden;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}




.question_content {
	clear : both;
	width : 38%;
	float : left;
	border-top : 1px solid #cccccc;
	text-align : left;
	overflow : hidden;
	padding-top: 15px;
	padding-right: 2%;
	padding-bottom: 15px;
	padding-left: 0;
	line-height: 1.8;
	font-weight: bold;
}

.question_content .note{
        margin: 0 20px 0 0;
}

.answer_content{
	width : 62%;
	float : right;
	border-top : 1px solid #cccccc;
	padding-top: 20px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0;
}



.surveyForm form .questions .question .answer_content input,
.surveyForm form .questions .question .answer_content textarea {
    font-size: 18px;
    width: 80%;
    background-color: white;
    border: 1px solid #bebebe;
}


.field input,
.surveyForm form .questions .question .answer_content input {
        height: 32px;
        padding: 2px;
}
.surveyForm form .questions .question .answer_content input[type="radio"], .surveyForm form .questions .question .answer_content input[type="checkbox"] {
    width: 24px;
    height: 24px;
   vertical-align: middle;
}

.surveyForm{
padding: 80px 0;
}

#status.piece {
background-color: #3472a9;
padding-bottom: 50px;
}

/*-------------------------------------------
ZOMEKI 専用CSS　ここから
-------------------------------------------*/
/*---
top tab
----------------------------*/
#page-index .tabs {
 display :none;
}


/*---
atom rss feed 
----------------------------------------------*/
.contentGpCategoryCategoryType  ul.feed ,
.contentGpCategory  ul.feed ,
.categoryType ul.feed ,
.contentGpArticleDocs ul.feed ,
.contentGpArticleDocs ul.feed {
    margin: 0 0 30px 0;
    overflow: hidden;
    position: absolute;
    right: 332px;
    top: 510px;
}


.feedRss {
    background-image: url("/_themes/base/images/ic-rss.png");
    background-position: left top;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 20px;
    margin: 0 5px 0 0;
    text-indent: -9999px;
    width: 49px;
}
.feedAtom {
    background-image: url("/_themes/base/images/ic-atom.png");
    background-position: right top;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 20px;
    text-indent: -9999px;
    width: 49px;
}


ul.feed li{
      float: left;
    width: 49px !important;
    height: 20px;
    margin: 0 !important;
    padding:0 !important;
   border: none !important;
}

.more {
    display: block;
    margin-top: 10px;
    padding: 0px 5px 0px 0px;
    text-align: right;
}




.contentGpCategoryCategory,
.contentGpCategoryCategoryType,
.categoryType,
.contentGpArticleDocs{
position: relative;
}


.contentGpCategoryCategory li,
.contentGpCategoryCategoryType li,
.categoryType li,
.contentGpArticleDocs li{
margin: 0 0 10px 0;
padding: 0 0 10px 0;
border-bottom: 1px dotted #003399;
}

.contentGpCategoryCategory li:after,
.contentGpCategoryCategoryType li:after,
.categoryType li:after,
.contentGpArticleDocs li:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.contentGpCategoryCategory li:last-child,
.contentGpCategoryCategoryType li:last-child,
.categoryType li:last-child,
.contentGpArticleDocs li:last-child{
margin: 0 0 40px 0;
padding: 0;
border: none;
}


.contentGpCategoryCategory .image,
.contentGpCategoryCategoryType .image,
.categoryType .image,
.contentGpArticleDocs .image{
    display: block;
    float: left;
/*--    height: 180px;  --*/
    margin: 10px 20px 10px 0;
    overflow: hidden;
    width: 150px;
}

.contentGpCategoryCategory .image a,
.contentGpCategoryCategoryType .image a,
.categoryType .image a,
.contentGpArticleDocs .image a{
display: block;
}

.contentGpCategoryCategory .image img,
.contentGpCategoryCategoryType .image img,
.categoryType .image img,
.contentGpArticleDocs .image img{
width: 100%;
}

.contentGpCategoryCategory .body,
.contentGpCategoryCategoryType .body,
.categoryType .body,
.contentGpArticleDocs .body{
    font-size: 96%;
    line-height: 1.6;
    margin: 0 0 5px;
}

.contentGpCategoryCategory .docs li .title_link,
.contentGpCategoryCategoryType .docs li .title_link,
.categoryType .docs li .title_link,
.contentGpArticleDocs .docs li .title_link{
    font-size: 105%;
    display: block;
    font-weight: bold;
}
#common .contentGpCategoryCategory h2 a,
#common .contentGpCategoryCategoryType h2 a,
#common .categoryType h2 a,
#common .contentGpArticleDocs h2 a{
    color: #000;
}


.contentGpCategoryCategoryType  ul.feed ,
.contentGpCategory  ul.feed ,
.categoryType ul.feed ,
.contentGpArticleDocs ul.feed ,
.contentGpArticleDocs ul.feed {
    margin: 0 0 30px 0;
    overflow: hidden;
    /* padding: 0 0 0 1087px; */
    position: absolute;
    right: 22px;
}


.contentGpCategoryCategoryType  ul.feed ,
.contentGpCategory  ul.feed {
    top: -76px;
}

/*#submanu
----------------------------------------------------------*/
#submanu {
    max-width: 80%;
    background-color: #f0c9c9;
    margin: 100px auto 50px auto;
    padding: 10px;
 clear: both;
}
#submanu dl {
    border-top: 2px solid #ad0e15;
}
#submanu dl a {
    text-decoration: none;
}
#submanu dl dt {
    border: 1px solid #e3e3e3;
    font-size: 150%;
    line-height: 100%;
    margin: 0 0 5px;
}
#submanu dl dt a {
    background-color: #ad0e15;
    border: 1px solid #fff;
    color: #fff;
    display: block;
    padding: 20px 20px;
}
#submanu dl dd {
    background-color: #fff;
    color: #ad0e15;
    float: left;
    width: 50%;
   font-size:120%;
}
#submanu dl dd a {
    color: #ad0e15;
    display: block;
    padding: 20px 0 20px 5px;
    border: 4px solid #ad0e15;
    border-right: none;
    border-top: none;
}
#submanu dl dd a:hover {
    color: #fff;
    background-color: #ad0e15;
}
#submanu .pieceBody {
    background-color: #eeeeee;
    margin: 0 3px;
    padding: 5px 10px;
}
#submanu .pieceBody li {
    background-image: url("../base/images/ic-list03.gif");
    background-position: left center;
    background-repeat: no-repeat;
    display: inline;
    padding: 0 20px 0 15px;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/*news tab
------------------------------------------------------*/


#memberlist ul li:after{
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

#memberlist ul li{
    background: none;
    background-position: 0;
    padding-left: 0;
    padding-right: 0;
}
 span.title_link a{
    line-height: 1.4;
    text-decoration:none;
}
 span.title_link a:hover{
    text-decoration:underline;
}


#memberlist nav.tabs li a{
text-decoration:none;
color: #3C78C5;
display: block;
background-color: #ECECEC;
padding: 8px 0;
}

#memberlist nav.tabs li.current a{
background-color: #3C78C5;
font-weight: bold;
color: #fff;
}

#memberlist nav.tabs ul{
    width: 80%;
}

#memberlist nav.tabs li {
    border-right: medium none;
    color: #333333;
    float: left;
    height: auto !important;
    text-align: center;
    text-decoration: none;
    width: 12.7%;
    margin: 0 2px 0 0 !important;
    font-size: 120%;
}


#memberlist .content ul li{
clear: both;
padding: 5px 0px;
margin: 0 0 5px 0;
border-bottom: 1px dotted #5a2f2e;
}

#memberlist .content ul li:last-child{
border-bottom: none;
}

#memberlist .content ul li .image{
    display: block;
    float: left;
    height: 200px;
    margin: 0px 20px 20px 0;
    overflow: hidden;
    width: 242px;
}

#memberlist .content ul li .category{
    display: inline-block;
    font-size: 60%;
}


ul li .category{
    font-size: 72%;
}

ul li .category span{
    margin: 0 4px;
}

ul li .category span {
    background-color: #3c5b6f;
    color: #fff;
    padding: 2px;
    text-decoration: none;
    border-radius: 16px;
    width: 200px;
    display: inline-block;
    text-align: center;
}

#memberlist .content ul li .title_link{
   margin: 0 0 5px 0;
    font-size: 110%;
    display: block;
    font-weight: bold;
}

#memberlist .content ul li .publish_date{
text-align: right;
}

#memberlist .content ul li .body{
    margin: 0 0 5px 0;
    font-size: 96%;
    line-height: 1.4;
}

#memberlist .content ul li .image img{
width: 100%;
}

#jpbsArea .cont_wrap  h2 {
    text-align: center;
    font-family: "Sawarabi Mincho";
    font-size: 250%;
    margin: 0 0 20px 0;
}

/*-------------------------------------------
ZOMEKI 専用CSS　ここまで
-------------------------------------------*/

/* contentGpArticleDoc
----------------------------------------------- */
.contentGpArticleDoc .date {
  margin-bottom: 1em;
  text-align: right;
}

.contentGpArticleDoc .date p {
  display: inline-block;
}



.contentGpArticleDoc .date p.publishedAt {
  padding-right: 10px;
}


/*
メインコンテンツ
-------------------------------------------*/
.content {
	width: 100%;
	background-color: #fff;
	color: #111;
}

#docsArea .text-beginning,
#docsArea .date,
#docsArea .docs,
#event .pieceContainer,
#event .pieceContainer,
.cont_wrap {
	max-width: 1200px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}

#sub_top {
	background-color: #555;
	background-repeat: no-repeat;
	background-position: top;
	background-attachment: fixed;
	height: 340px;
	line-height: 30px;
	padding-top: 180px;
	width: 100%;
	background-size: 100%;
	text-align: center;
	font-weight: bold;
	color: #FFF;
	font-size: 34px;
	letter-spacing: 0.1em;
	-moz-text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	-webkit-text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	-ms-text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
	text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

#index_top {
	height: 100%;
	width: 100%;
	position: relative;
	overflow: hidden;
}


#index_top #top_catch {
	position: absolute;
	top: 62%;
	left: 50%;
	z-index: 10;
	width: 560px;
	height: 500px;
	margin-top: -250px;
	margin-left: -280px;
	color: #FFF;
	font-size: 80px;
	font-weight: 400;
	text-transform: uppercase;
	font-style: italic;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
	text-align: center;
}

#index_top #top_catch h2 {
    font-size: 80px;
    letter-spacing: 1px;
    font-family: "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho;
    line-height: 1.5;
    font-weight: bold;
}
#index_top #top_catch p {
	font-size: 25px;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 2.4;
    font-family: "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho;
}

.content h1 {
	font-size: 28px;
	line-height: 2.2;
	margin-bottom: 20px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #15394A;
	font-weight: normal;
	letter-spacing: 1px;
	color: #111;
	text-align: center;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "Sawarabi Mincho", "HG明朝E",  "ＭＳ Ｐ明朝", "MS PMincho", serif;
	padding-top: 30px;
	padding-right: 10px;
	padding-bottom: 30px;
	padding-left: 10px;
	clear: both;
}

.content h2 i {
	padding: 10px;
	color: #71F0BD;
}

.content h2 span {
	font-family: "Sawarabi Mincho"; 
	font-size: 24px;
	color:#3C5B6F;
	font-weight: bold;
	letter-spacing: 0.1em;
}

.content h2 span.small {
	font-size: 18px;
	font-weight: normal;
	color: #555;
}

.content h3 {
	font-size: 24px;
	line-height: 30px;
	margin-bottom: 30px;
	position: relative;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 30px;
	font-weight: normal;
	color: #000;
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "Sawarabi Mincho", "HG明朝E",  "ＭＳ Ｐ明朝", "MS PMincho", serif;
	clear: both;
	letter-spacing: 0.05em;
}

.content h3::after {
	display: block;
	width: 3px;
	height: 20px;
	position: absolute;
	top: 20px;
	left: 20px;
	background-color: #3C5B6F;
	content: '';
}

.content h3 span {
	font-size: 15px;
	color: #555;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", "MS Gothic", sans-serif;
	padding-left: 15px;
}
.content h4 {
	font-size: 20px;
	color: #597E84;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #ADC4C7;
	letter-spacing: 0.1em;
	padding: 10px;
	font-weight: bold;
	clear: both;
	margin-top: 20px;
	margin-right: 30px;
	margin-bottom: 20px;
	margin-left: 30px;
}

.content p {
	font-size: 16px;
	margin-bottom: 10px;
}

/* ----------------------------
トップ新着一覧
-------------------------------- */
.content #ulNewsTest li {
	font-size: 16px;
}
.content #ulNewsTest li span.publish_date {
	padding-right: 20px;
	color: #888;
}

.content #ulNewsTest li span span{
	display: inline-block;
	padding-left: 5px;
	padding-right: 5px;
	color: #FFF;
	margin-right: 5px;
}
.content #ulNewsTest li span span.news-event-test{
	background-color: #36BEAD;
}
.content #ulNewsTest li span span.news-whatsnew-test{
	background-color: #F90;
}

.content #ulNewsTest li{
	line-height: 30px;
	padding: 20px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
}
.content #ulNewsTest li a {
	color: #333;
	padding: 20px;
	text-decoration: none;
}

.content #ulNewsTest li:hover {
	color: #000;
	background-color: #FFF;
}



.img_center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.img_center span {
	position: absolute;
	background-color: #333;
	background-color: rgba(0,0,0,0.8);
	color: #FFF;
	letter-spacing: 0.1em;
	padding: 10px;
	left: 0;
	top: 0;
}

.img_center div {
	position: absolute;
	background-color: #333;
	background-color: rgba(0,0,0,0.8);
	color: #FFF;
	letter-spacing: 0.1em;
	padding: 50px;
	right: 0;
	bottom: 0;
}


.img_left {
	float: left;
	padding-top: 20px;
	padding-right: 50px;
	padding-left: 30px;
	padding-bottom: 20px;
	max-width: 50%;
}
.img_right {
	float: right;
	padding-top: 20px;
	padding-right: 30px;
	padding-left: 50px;
	padding-bottom: 20px;
	max-width: 50%;
}

.img_left img,
.img_right img,
.img_center img {
	width: 100%;
}

.content .img_left p,
.content .img_right p {
	font-size: 14px;
	margin: 0px;
	text-align: center;
	letter-spacing: 0.1em;
	color: #455E65;
}

.content p.check {
	color: #FF3333;
}
.content p.p_st {
	font-size: 20px;
	color: #CA28B1;
}

.content .cont_wrap .txt_box {
	background-color: #E6EDEE;
	padding: 20px;
	margin: 20px;
}
.content .cont_wrap .txt_box h3 {
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	padding-right: 0px;
	padding-left: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #B6CACD;
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	color: #333;
}
.content .cont_wrap .txt_box h3::after {
	display: none;
}

a.ap {
	padding-top: 50px;
	margin-top: -50px;
}

/*
コンテンツ大ボタン
-------------------------------------------*/
.more a{
	font-size: 16px;
	text-decoration: none;
	display: block;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
	line-height: 22px;
	padding-top: 14px;
	clear: both;
	font-weight: bold;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	position: relative;
	display: inline-block;
 	color: #000;
 	font-family: "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}

.more a:hover {
 color: #3C5B6F;
}


.more a:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #333;
  border-right: solid 2px #333;
  transform: rotate(45deg);
  position: absolute;
    top: 12px;
    left: -14px;
    bottom: 0;
  margin: auto;
}


.btn_cnt a {
	font-size: 16px;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	display: block;
	width: 240px;
	background-color: #11BBDD;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
	line-height: 22px;
	padding-top: 10px;
	padding-bottom: 10px;
	clear: both;
	font-weight: bold;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
.btn_cnt a i {
	padding-right: 10px;
}
.btn_cnt a:hover {
	color: #11BBDD;
	background-color: #FFF;
}

.btn_cnt.rt a {
	float: right;
	max-width: 220px;
	margin-right: 10px;
}

#news li{
     font-family: "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    margin: 0 0 10px 0;
}
#news li: last-child{
    margin: 0;
}

#news li a{
 	color: #000;
}

#news li a:hover{
 	color: #666;
}

/*
トップへ戻るボタン
-------------------------------------------*/
.to_top {
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index: 800;
}
.to_top a {
	text-decoration: none;
	text-align: center;
	display: block;
	width: 60px;
	height: 60px;
	background-color: #DCE7E9;
	color: #333;
	text-align: center;
	font-size: 32px;
	line-height: 60px
}
.to_top a:hover {
	background-color: #3C5B6F;
	color: #FFF;
}

/*
フッター
-------------------------------------------*/

footer {
	background-color: #DCE7E9;
	color: #345;
	clear: both;
	width: 100%;
	display: block;
	padding-top: 20px;

}

footer .cont_wrap {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

footer .cont_wrap .f_box {
	width: 35%;
	padding: 10px;
}

footer .cont_wrap .f_box.lg {
	width: 30%;
}

footer .cont_wrap p {
	font-size: 13px;
}

footer .cont_wrap ul {
	padding: 20px;
}

footer .cont_wrap ul li a {
	display: block;
	text-decoration: none;
	font-size: 90%;
	color: #555;
  font-family: "Sawarabi Mincho"; 
}

footer .cont_wrap ul li.contact a {
	text-align: center;
	color: #FFF;
	background-color: #3C5B6F;
	font-size: 14px;
	padding: 2px;
	margin-top: 5px;
}

footer .cont_wrap ul li.contact a:hover {
	color: #3C5B6F;
}
footer .cont_wrap ul li.contact a::before {
	display: none;
}

footer .cont_wrap ul li a::before {
	content: "・ ";
	color: #999;
}

footer .cont_wrap ul li a:hover {
	color: #111;
	background-color: #FFF;
}

address {
	clear: both;
	font-size: 12px;
	font-style: normal;
	padding: 20px;
	text-align: center;
	letter-spacing: 1px;
}

footer .box_pr {
	clear: both;
	width: 100%;
	display: block;
	text-align: center;
	font-size: 10px;
	color: #55838A;
	letter-spacing: 1px;
	background-color: #D2E1E3;
	padding-top: 18px;
	line-height: 22px;
}

.box_pr ul li {
	display: inline;
	padding: 5px;
}

.box_pr ul li a {
	color: #55838A;
}


/*
各種テーブル
-------------------------------------------*/
.content table.table_01 {
	width: 96%;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
}
.content table.table_01 th,
.content table.table_01 td {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #888;
	padding: 20px;
}
.content table.table_01 th {
	font-size: 16px;
	white-space: nowrap;
	font-weight: normal;
	letter-spacing: 1px;
	width: 33%;
}
.content table.table_01 td {
	font-size: 14px;
	line-height: 30px;
	background-color: #FFF;
}

.small {
	font-size: smaller;
	color: #666;
}
.chui {
	color: #F03600;
}

.table_01 caption {
	font-size: 14px;
	line-height: 30px;
	background-color: #E5E5E5;
	color: #111;
	letter-spacing: 1px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: 1px solid #FFF;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px 0px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px 0px;
}
.table_01 th span {
	font-size: 12px;
	color: #CCC;
}


/*
トップ下部ピックアップ
-------------------------------------------*/
.pick_up {
	width: 100%;
}


.pick_up ul {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 1400px;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.pick_up ul li {
	width: 32%;
	position: relative;
}
.pick_up ul li a {
	display: block;
	overflow: hidden;
	position: relative;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	transition: 0.2s linear;
}
.pick_up ul li a img {
	width: auto;
	max-width: 100%;
	z-index: 0;
}
.pick_up ul li a:hover img {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
}

.pick_up ul li a::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(92,189,202,0.2);
	z-index: 5;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	transition: 0.2s linear;
}

.pick_up ul li a:hover::before {
	background-color: rgba(54,190,173,0.9);
}


.pick_up ul li a div {
	color: #FFF;
	font-size: 32px;
	line-height: 1;
	text-decoration: none;
	text-align: center;
	display: block;
	width: 80%;
	margin-top: -20px;
	margin-left: -40%;
	position: absolute;
	left: 50%;
	top: 47%;
	font-weight: bold;
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	transition: 0.2s linear;
	z-index: 10;
}
.pick_up ul li a div span {
	font-size: 16px;
	letter-spacing: 2px;
}


/*
コンテンツボックス
-------------------------------------------*/
.box_cont .pieceContainer,
.box_cont .docs,
.box_cont .date,
.box_cont .contentGpCategory,
.box_cont .categoryType,
.box_cont .body{
	width: 100%;
	max-width: 1200px;
	margin: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	padding-top: 20px;
	padding-right: 20px;
	padding-left: 20px;
}

.box_cont .body .box_c_in {
	width: 48%;
	min-height: 200px;
	padding: 10px;
	border: 1px solid #CFDEE0;
	margin-bottom: 30px;
}

.box_cont .body .box_c_in:hover {
	background-color: #FFF;
	border-top-color: ##3C5B6F;
	border-right-color: #3C5B6F;
	border-bottom-color: #3C5B6F;
	border-left-color: #3C5B6F;
}

.box_cont .body .box_c_in img {
	max-width: 100%;
	padding: 20px;
}

.content .box_cont .body .box_c_in h2 {
	padding-bottom: 10px;
	font-size: 24px;
	border-bottom-width: 1px;
	border-bottom-color: #CCC;
	padding-top: 10px;
}

/*
背景入り帯
-------------------------------------------*/

.obi_001 {
	background-image: url(../img/obi_001.jpg);
	background-repeat: no-repeat;
	text-align: center;
	padding-top: 15%;
	padding-right: 20px;
	padding-bottom: 15%;
	padding-left: 20px;
	background-size: cover;
	background-attachment: fixed;
	background-position: center bottom;
	color: #FFF;
	margin-top: 50px;
	margin-bottom: 50px;
}

.content .obi_001 h2 {
	color: #FFF;
	border-bottom: none;
	padding-bottom: 0px;
}
.obi_001 p {
	line-height: 2.4;
}


.obi_002 {
	width: 100%;
	height: auto;
	background-image: url(../img/obi_002.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding: 0 0 50%;
	position: relative;
}

.obi_002 .box_in {
	width: 100%;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-flex-flow: column;
	flex-flow: column;
	position: absolute;
	color: #FFF;
	background-color: rgba(54,190,173,0.8);
}

.obi_002 h2 {
	font-size: 36px;
}
.obi_002 p {
	line-height: 2;
	font-weight: bold;
}




@media screen and (min-width:960px){
body {
	font-size: 16px;
}

/*
ヘッダー
-------------------------------------------*/
header {
	height: 90px;
}

header #top_logo a img,
header h1 a img {
        top: 8px;
        left: 10px;
        height: 70px;
}

.menu_btn,
.btn_close {
	display: none;
}

/*
PCグローバルナビ
-------------------------------------------*/
#g_navi {
	position: absolute;
	right: 10px;
	top: 20px;
	width: auto;
	margin-left: 200px;
	display: block !important;
	z-index: 1000;
}

#g_navi ul li{
	display: inline;
}

#g_navi li a {
	width: auto;
	padding: 10px;
	line-height: 30px;
	display: block;
	color: #111;
	text-decoration: none;
	text-align: center;
	position: relative;
	float: left;
	letter-spacing: 1px;
	font-size: 14px;
	font-weight: bold;
}

#g_navi li a::before {
	display: block;
	height: 2px;
	position: absolute;
	top: 2px;
	width: 70%;
	left: 15%;
	background-color: rgba(17,187,221,0);
	content: '';
	-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;
	transition: 0.2s linear;
}

#g_navi li a:hover::before {
	background-color: rgba(17,187,221, 1);
	top:0px;
	width: 80%;
	left: 10%;
}

#g_navi li a:hover {
	color: #3C5B6F !important;
}

#g_navi.txt_w li a {
	color: #FFF;
}

header.fixed #g_navi.txt_w li a {
	color: #111;
}

#g_navi li.contact a {
	background-color: #3C5B6F;
	color: #FFF !important;
	padding-left: 20px;
	padding-right: 20px;
	margin-left: 10px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}
#g_navi li.contact a:hover {
	background-color: #FFF;
	color: #3C5B6F !important;
}
#g_navi li.contact a::before {
	display: none;
}


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

#index_top {
	min-height: 850px;
}

#sub_top.sample {
	background-image: url(../img/sub_top_sample.jpg);
}
#sub_top.faq {
	background-image: url(../img/sub_top_faq.jpg);
}
#sub_top.contact {
	background-image: url(../img/sub_top_contact.jpg);
}
#sub_top.news {
	background-image: url(../img/sub_top_news.jpg);
}
#sub_top.concept {
	background-image: url(../img/sub_top_concept.jpg);
}
#sub_top.works {
	background-image: url(../img/sub_top_works.jpg);
}
#sub_top.about {
	background-image: url(../img/sub_top_about.jpg);
}

.no_pc {
	display: none !important;
}

}
/*-- /960px～ --*/

@media screen and (min-width:1200px){
header #top_logo a img,
header h1 a img {
	left: 50%;
	margin-left: -590px;
}

header #g_navi {
	right: 50%;
	margin-right: -590px;
}

}

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

body {
	font-size: 16px;
}

body.fixed {
	overflow: hidden;
}

img {
	max-width: 100% !important;
	height: auto;
	width /***/:auto;
	margin-left:auto;
	margin-right:auto;
}

.content h4 {
	margin-right: 10px;
	margin-left: 10px;
}


/*
メニューボタン
-------------------------------------------*/

.menu_btn {
	display: block;
	height: 40px;
	width: 40px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	position: fixed;
	z-index: 5000;
	top: 5px;
	right: 5px;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	cursor: pointer;
}
.menu_btn:hover {
	cursor: pointer;
}

.menu_btn span {
	width: 28px;
	height: 2px;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -14px;
	background-color: #3C5B6F;
}
.menu_btn span {
    transition: all 0.3s;
    transform: rotate(0deg);
	-webkit-transform: rotate(0deg);  
    -moz-transform: rotate(0deg);    
  }
.menu_btn span.top {
    transform: translateY(-8px);
	-webkit-transform: translateY(-8px);  
    -moz-transform: translateY(-8px);    
  }
.menu_btn span.bottom {
    transform: translateY(8px);
	-webkit-transform: translateY(8px);  
    -moz-transform: translateY(8px);    
}


.menu_btn:hover span.top {
    transform: translateY(-10px);
	-webkit-transform: translateY(-10px);  
    -moz-transform: translateY(-10px);    
}
.menu_btn:hover span.bottom {
    transform: translateY(10px);
	-webkit-transform: translateY(10px);  
    -moz-transform: translateY(10px);    
}

.menu_btn.opened span {
	background-color: #7BC;
}

.menu_btn.opened span.middle {
    background: rgba(255, 255, 255, 0);
	 transform: translateX(30px);
	 -webkit-transform: translateX(30px);  
    -moz-transform: translateX(30px);    
}
.menu_btn.opened span.top {
    transform: rotate(-45deg) translateY(0px);
	-webkit-transform: rotate(-45deg) translateY(0px);  
    -moz-transform: rotate(-45deg) translateY(0px);    
}
.menu_btn.opened span.bottom {
    transform: rotate(45deg) translateY(0px);
	-webkit-transform: rotate(45deg) translateY(0px);  
    -moz-transform: rotate(45deg) translateY(0px);    
}

/*
グローバルナビ
-------------------------------------------*/
#g_navi {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	overflow: auto;
	z-index: 3000;
	background-color: #F2F6F7;
	background-color: rgba(242,246,247,0.85);
	display: none;
	padding-left: 10%;
}
#g_navi ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: column;
    flex-flow: column;
    -webkit-justify-content: center;
    justify-content: center;
    min-height: 100%;
}


#g_navi ul li a {
	color: #111;
	text-decoration: none;
	display: block;
	padding: 10px;
	line-height: 22px;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
}
#g_navi ul li a:hover {
	color: #3C5B6F;
}

#g_navi ul li.contact a {
	text-align: center;
	background-color: #3C5B6F;
	color: #FFF;
	width: 90%;
}

#g_navi ul li.contact a:hover {
	background-color: #FFF;
	color: #3C5B6F;
}


/*
メニューシャドウ
-------------------------------------------*/
.bg_bl {
	background-color: #FFF;
	height: 100%;
	width: 100%;
	opacity: 0.80;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
	display: block;
	position: fixed;
	z-index: 2000;
}


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

header {
	height: 52px;
}
header #top_logo a img,
header h1 a img {
	top: 10px;
	left: 10px;
	height: 36px;
}

header .h_menu {
	display: none;
}

header #info {
	display: none;
}


#sub_top.sample {
	background-image: url(../img/sub_top_sample_sp.jpg);
}
#sub_top.faq {
	background-image: url(../img/sub_top_faq_sp.jpg);
}
#sub_top.contact {
	background-image: url(../img/sub_top_contact_sp.jpg);
}
#sub_top.news {
	background-image: url(../img/sub_top_news_sp.jpg);
}
#sub_top.concept {
	background-image: url(../img/sub_top_concept_sp.jpg);
}
#sub_top.works {
	background-image: url(../img/sub_top_works_sp.jpg);
}
#sub_top.about {
	background-image: url(../img/sub_top_about_sp.jpg);
}


/*
フッター
-------------------------------------------*/
footer {
	border-bottom-width: 60px;
}

footer .cont_wrap .f_box {
	width: 50%;
	text-align: center;
}
footer .cont_wrap .f_box.lg {
	width: 100%;
}

.no_sp {
	display: none;
}

}
/*-- /～960px --*/



/*
無限ループ
-------------------------------------------*/
.loop_wrap_base {
	width: 100%;
	height: auto;
	overflow: hidden;
	background-color: #F2F6F7;
	padding-top: 30px;
	padding-bottom: 30px;
}


.loop_wrap_base h2 {
	font-weight: normal;
	color: #111;
	text-align: center;
	line-height: 1.2;
	padding: 10px;
	font-size: 24px;
}
.loop_wrap_base h2 span {
	letter-spacing: 0.2em;
	font-size: 14px;
	color: #555;
}

.loop_wrap {
  display: flex;
  width: 220%;
  height: auto;
}

.loop_wrap ul {
  width: 100%;
  height: auto;
  display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.loop_wrap ul li {
	width: 20%;
}

.loop_wrap ul li a {
	display: block;
	text-decoration: none;
	color: #555;
	text-align: center;
	line-height: 1.6;
	font-size: 14px;
	position: relative;
}
.loop_wrap ul li a img {
	width: 100%;
	display: block;
	margin-bottom: 5px;
}

.loop_wrap ul li a span {
	display: inline-block;
	background-color: #36BEAD;
	color: #FFF;
	font-size: 12px;
	position: absolute;
	top: 0;
	left: 0;
	padding: 5px;
	letter-spacing: 1px;
	z-index: 10;
}

.loop_wrap ul li a span.cl_2 {
	background-color: #333;
}

.loop_wrap ul li a span.cl_3 {
	background-color: #FF9900;
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}

.loop_wrap ul:first-child {
  animation: loop 50s -25s linear infinite;
}

.loop_wrap ul:last-child {
  animation: loop2 50s linear infinite;
}

.loop_wrap:hover ul {
  animation-play-state: paused;
}



/*
SNSボタン
-------------------------------------------*/

.h_sns {
	padding: 5px;
	position: fixed;
	top: 130px;
	right: 0px;
	background-color: rgba(17,187,221,0.8);
	border-radius: 8px 0px 0px 8px;
	-webkit-border-radius: 8px 0px 0px 8px;
	-moz-border-radius: 8px 0px 0px 8px;
	display: none;
}
.h_sns li a {
	display: block;
	padding: 10px;
	color: #FFF;
	line-height: 30px;
	width: 50px;
	text-align: center;
	text-decoration: none;
	font-size: 18px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.h_sns li a:hover {
	background-color: #FFF;
	color: #3C5B6F;
}


@media screen and (max-width:640px){
#top_visual {
    padding: 100px 0;
}

#index_top {
    height: 50%;
}

.content.movie_blk video{
    display: none;
}

.flexbox {
    display: block;
}

#consept #leftArea{
    width: 90%;
    box-sizing: border-box;
    margin: -100px auto 0 auto;
    padding: 35px 28px;
}

#consept #leftArea h2 {
    font-size: 115%;
    font-weight: bold;
}
#consept #rightArea {
    width: 90%;
    background-color: #fff;
    margin: 0 auto;
}

.content #consept #leftArea p.btn a {
    width: 100%;
}

#consept #rightArea ul {
  width:80%;
  margin: 0 auto;
}

#consept #rightArea ul li:first-child{
 margin: 0;
}
#consept #rightArea ul li:last-child{
 margin: 0 0 0 0;
}

.content h2 span{
  margin: 0 20px 0 0;
}

#joblist {
  padding: 20px;
}

#voice{
  padding: 20px;
}

.content #voice h2 {
  line-height: 1.2;
  font-size:14px;
  margin: 0 0 20px 0;
}
.content #voice h2 span{
  display: block;
  font-size:18px;
}
#incontent img {
    width: 60%;
}
#bnrAera ul li {
margin: 0 0 20px 0; 
}
#bnrAera ul li:last-child {
margin: 0 0 0 0; 
}

#bne2Area{
padding: 20px;
}

#bne2Area ul li {
    margin: 0 0 20px 0;
}
#bne2Area ul li:last-child {
    margin: 0;
}

#saiyoArea #inwrap{
padding: 20px;
}

#saiyoArea .leftArea,
#saiyoArea .rightArea{
width:100%;
}

#saiyoArea .leftArea ul li {
    width: 100%;
    margin: 0 0 20px 0;
}
#saiyoArea .leftArea ul li a:before {
    left: 312px;
}
#saiyoArea .leftArea ul li:last-child a:before {
    left: 310px;
}
#saiyoArea .rightArea ul li a:before {
    right: 74px;
}

#topvmenu li span {
    white-space: nowrap;
}

.parara {
    padding-top: 40%;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

    #docsArea .docs, #prosessArea, #event .pieceContainer, #QAcommentArea, #statusArea, #leadArea, #voicepArea, #jpbsArea .cont_wrap, #allsyain {
        padding: 20px 0px;
    }

#topvmenu li {
  margin: 0 0 0 0;
}
#jpbsArea .cont_wrap h2 {
    font-size: 180%;
    margin: 0 0 0 0;
}
.content #jpbsArea p.ttl {
    font-size: 20px;
    margin-top: 0;
}
#jpbsArea .cont_wrap #eigyo {
    margin: 15px;
}
.content #jpbsArea .cont_wrap #eigyo h3 {
    padding: 15px 0 10px 0;
}

#jpbsArea {
    background-color: #fff;
    padding: 0 0 0 0;
}
#conceptMssagesArea {
    width: 100%;
    margin: 0;
    padding: 20px;
}

#conceptMssagesArea h2 {
    font-size: 45px;
    text-align: center;
}

#conceptMssagesArea h3 {
    font-size: 24px;
    text-align: center;
}


#page-recruit-concept-index #top_visual {
        padding: 40px 0;
        background-size: cover;
        background-blend-mode: color-burn;
        background-repeat: no-repeat;
        background-position: -230px;
    }

#conceptArea .prewrap .pre h2 {
    font-size: 170%;
}

#conceptArea .prewrap .come {
    padding: 20px;
    margin: 100px 20px 20px 20px;
}
#conceptArea #works .come h3, #conceptArea #works .pre h3, #conceptArea .prewrap .come h3 {
    font-size: 17px;
    margin: 0 0 10px 0;
}

#conceptArea #works .pre h2 {
    font-size: 200%;
}
#conceptArea #works .pre {
    padding: 40px 20px 20px 20px;
}

#conceptArea #works .come{
    padding: 0 20px 20px 20px;
}
#conceptArea .fuwrap h2 {
    font-size: 200%;
    line-height: 1.6;
}
#futureArea .pre ul li {
    width: 90%;
    margin: 0 auto 20px auto;
    padding: 0;
}
#futureArea .pre ul li:last-child {
    margin: 0 auto 20px auto;
}
#conceptArea .fuwrap {
    padding: 30px 0;
}

#conceptArea .fuwrap h2 {
    margin: 0 0 30px 0;
}

#top_visual p.visualEn {
    font-size: 180%;
}
#shisotsuCyaria {
    padding: 20px;
    margin-bottom:0;
}

#requirementsArea h2 {
    font-size: 140%;
    margin: 0 0 20px 0;
}

#yoko ul ul.flexbox {
        display: flex;
    }
#yoko li {
    width: 100%;
    margin: 0 0 20px 0;
}
#taigu {
    padding: 20px;
}
#faq {
    padding: 20px;
}

#welfareArea {
    padding: 40px 10px 10px 10px;
}
#welfareArea #allsyain h2 {
    font-size: 120%;
}
.content #welfareArea h3 {
    font-size: 24px;
}
.content #welfareArea ul li {
    width: 100%;
    margin: 0 0 20px 0;
    padding: 20px;
}

.content #welfareArea ul {
    padding: 20px;
  margin:  0 20px  20px 20px;
}

.content #welfareArea #shikaku{
  margin:  0 20px  20px 20px;
  width: 89%;
}


.content #welfareArea #shikaku h2 {
    font-size: 130%;
    text-align: center;
}

#event h2, 
#prosessArea h2 {
    margin: 0 auto 30px auto;
    width: 92%;
}
#prosessArea section {
    margin: 0 20px 40px 20px;
}
.content #prosessArea section h3 {
    font-size: 24px;
}
.content #prosessArea section h3 {
    font-size: 15px;
    margin: 0 0 20px 0;
    font-weight: bold;
}

#docsArea.content {
        padding-top: 20px;
        padding-bottom: 20px;
        padding: 20px;
    }

.content .contentGpArticleDoc .date p.publishedAt {
    padding-right: 0;
}
.content .contentGpArticleDoc .date p{
    padding: 0;
    margin: 0;
}

#page-recruit-activity-index #top_visual {
    background: url(/_themes/base2/img/img_ttl_kohara_katsudo.png) #EEE no-repeat center center;
    background-size: contain;
}
#page-recruit-activity-index #top_visual p.visualEn {
    font-size: 18px;
    padding-bottom: 130px;
}
#activityArea ul li{
  width: 100%;
}
#activityArea {
    padding: 0px;
}

#sekkeiDSArea .photo, #gooddArea .flexbox.gallaryArea, #gooddArea .flexbox.gallaryArea, #studuArea .messages, #studuArea .flexbox.gallaryArea {
    padding: 10px;
    margin: 0 0 10px 0;
}

.content #messages h3 {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 0;
    position: relative;
    padding-top: 15px;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 30px;
   font-weight: bold;
}

.content #activityArea h3{
        padding-left: 10px;
        padding-bottom: 0;
        margin: 0 0 10px 0;
        font-weight: bold;
        padding-top: 0;
        padding-right: 0;
        font-size: 22px;
}

.content #activityArea p{
    padding-top: 0;
    margin-top:0;
    margin-left:10px;
    margin-right:0px;
}

.content #activityArea h3:after {
	display: none;
}



#leadArea .left,
#leadArea .right {
  width: 100%;
}

#leadArea p.tit {
    margin: 0 0 10px 0;
}
#leadArea .cont_wrap {
    width: 96%;
}

#gooddArea,
#sekkeiDSArea,
#studuArea {
  margin-bottom:10px;
}
footer .cont_wrap ul {
    padding: 10px;
}

#talkArea #staff4mei .flexbox{
  display: flex;
  flex-wrap: wrap;
}

#page-recruit-talk-index #staff4mei ul li{
    width: 48.2%;
    margin: 0px 10px 10px 0;
}
#page-recruit-talk-index #staff4mei ul li:nth-child(even){
 margin-right:0;
}
#page-recruit-talk-index #staff4mei ul li{
    font-size: 90%;
}

#page-recruit-talk-index .content.welf{
  padding: 0 10px;
}
#page-recruit-talk-index #staff4mei ul li:last-child{
   margin-bottom: auto;
}

#page-recruit-talk-index #menuList li {
        width: 80%;
        margin: 0 auto 20px auto;
}
#page-recruit-talk-index .content h2 span {
        margin: 0 0 0 0;
    }
#takeStaffArea #menuList {
    background-color: #F6D13B;
    border-radius: 15% 15% 0 0;
    padding: 50px 0 50px 0;
}

#wrap #icontalKArea .flexbox .flexbox{
  display: flex;
}

.flexbox.talkspeace .stimg{
  width: 30%;
}

.flexbox.talkspeace .txt{
  width: 70%;
}
#bottomArea {
    padding: 0 0 50px 0;
    margin: 0 0 50px 0;
}

#btncary li {
  width: 80%;
  margin: 0 auto 20px auto;
}
#btncary li:last-child {
  margin: 0 auto 20px auto;
}

#leadArea .naiyou {
    border-radius: 5px;
}
#statusArea{
  margin: 0 10px;
}

#QAcommentArea,
#statusArea {
        margin: 0 10px 40px 10px;
        width: 95%;
}
#statusArea h2 {
    margin: 0 0 0 0;
}
#statusArea ul.flexbox {
     display: flex;
     flex-wrap: wrap;
     padding: 0 20px 0px 20px;
}
#statusArea ul.flexbox li{
        width: 48.2%;
        margin: 0px 10px 10px 0;
}
#statusArea ul.flexbox li:nth-child(even){
     margin-right:0;
}

#QAcommentArea{
  height: 3574px;
}

#QAcommentArea #clm02 .qac{
  top:338px;
}
#QAcommentArea #clm02 figure{
  top:144px;
}
#QAcommentArea #clm03 .qac{
  top:418px;
}
#QAcommentArea #clm03 figure{
  top:224px;
}
#QAcommentArea #clm04 .qac{
  top:517px;
}
#QAcommentArea #clm04 figure{
  top:333px;
}

#QAcommentArea #clm05 .qac{
  top:645px;
}
#QAcommentArea #clm05 figure{
  top:461px;
}

#QAcommentArea #clm06 .qac{
  top:714px;
}
#QAcommentArea #clm06 figure{
  top:530px;
}



#QAcommentArea .qac {
    position: absolute;
    z-index: 10000;
    width: 90%;
    padding: 15px;
    top: 200px;
}

.content #QAcommentArea .qac h3 {
        padding: 0;
        margin-bottom: 14px;
        font-size: 19px;
        font-weight: bold;
}

.content #QAcommentArea .qac p {
    line-height: 1.8;
    margin: 0;
}

#QAcommentArea #clm05 figure, #QAcommentArea #clm03 figure, #QAcommentArea #clm01 figure {
    width: 90%;
}
#QAcommentArea #clm06 figure, #QAcommentArea #clm04 figure, #QAcommentArea #clm02 figure {
    width: 90%;
}
#QAcommentArea #clm05 .qac, #QAcommentArea #clm03 .qac, #QAcommentArea #clm01 .qac {
    left: 15px;
}
#QAcommentArea #clm06 .qac, #QAcommentArea #clm04 .qac, #QAcommentArea #clm02 .qac {
    right: 15px;
}

#spimg{
  background-color: #3472a9;
  text-align: center;
}
#spimg figure img {
    width: 60%;
    height: auto;
}
.sp_hide{
  display: none;
}

#g_navi ul li.sp_show,
.sp_show{
  display: block;
}
.topcon .cont_wrap.effect.flexbox{
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.topcon .cont_wrap.effect.flexbox .rightArea, .topcon .cont_wrap.effect.flexbox .leftArea {
    width: 100%;
}
.topcon .cont_wrap.effect.flexbox .leftArea h2 span {
    font-size: 92%;
}
.topcon .cont_wrap.effect.flexbox .leftArea figure {
    margin-top: -5px;
    margin-left: 20px;
    width: 50%;
    margin-bottom: 20px;
}

.topcon .cont_wrap.effect.flexbox .rightArea figure{
        position: absolute;
        margin-top: -345px;
        margin-left: 190px;
        width: 50%;
        z-index: -500;
}

#cstory02, #cstory01 {
    width: 90%;
    margin: 0 auto;
}
#cstory02 .leftArea, #cstory01 .leftArea {
    width: 100%;
}
#cstory02 .rightArea, #cstory01 .rightArea {
  width: 90%;
  margin: 0 auto;
    width: 100%;
}

.content #photo-graf02 h3, .content #photo-graf01 h3 {
    font-size: 25px;
    margin-left: 0;
}

#episodeAera01 #no01 .flexbox .img{
    position: absolute;
    right: 20px;
    z-index: -9;
    width: 56%;
    top: -160px;
}

.episodeArea .ep h5 {
    font-size: 19px;
}

#progress02,
#progress01,
#episodeAera02,
#episodeAera01 {
  width: 90%;
  margin: 0 auto;
}



.content .progressArea .leftArea{
  width: 100%;
}
.content .progressArea .rightArea{
  width: 100%;
  margin: 0 0 20px 0;
}


#progressArea .flexbox{
        position: relative;
}
.content #progress01.progressArea .rightArea img {
position: absolute;
    top: 4358px;
    width: 210px !important;
    z-index: 0;
    right: 32px;
}

#episodeAera02 #no04 .flexbox .img{
        right: 0;
        z-index: -9;
        width: 60%;
        top: -160px;
}

#episodeAera02 #no04 .flexbox .img img{
    width: 100%!important;
    height: auto!important;
}


.content #progress02.progressArea .rightArea img {
        position: absolute;
        top: 18px;
        width: 210px !important;
        z-index: 0;
        right: 17px;
}

.content .ep h4{
    position: unset;
}

.content .ep h4 .eps{
   position: unset;
}

.content .ep h4 span{
  display: block;
  width: 100%;
}
#btncary li:first-child a:before {
    left: 270px;
}
#btncary li:last-child a:before {
    left: 270px;
}












.h_sns {
	width: 100%;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	top: auto;
	bottom: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
	padding-right: 60px;
}

.h_sns li {
	width: 25%;
}
.h_sns li a {
	width: 100%;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
	
#index_top #top_catch {
	top: 25%;
	left: 5%;
	width: 90%;
	height: 50%;
	margin-top: 0px;
	margin-left: 0px;
}


#index_top #top_catch h2 {
	font-size: 40px;
}

#index_top #top_catch p {
	font-size: 12px;
}

#sub_top {
	height: 180px;
	padding-top: 100px;
}

.content {
	padding-top: 0;
	padding-bottom: 20px;
}

.content p {
	margin-bottom: 20px;
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
}

.img_left,
.img_right {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	max-width: 100%;
}

.pick_up ul li {
	width: 100%;
}

.content .ul_news li span.date {
	padding-right: 0px;
	display: block;
}

.obi_001 {
	background-image: url(../img/obi_001_sp.jpg);
	padding-left: 10px;
	padding-right: 10px;
}

.obi_001 p {
	text-align: left;
	margin-left: 15px;
	margin-right: 15px;
	font-size: 14px;
}

.obi_002 {
	background-image: url(../img/obi_002_sp.jpg);
	padding: 0 0 100%;
}

.loop_wrap {
  width: 400%;
}

.box_cont .body {
	padding-right: 10px;
	padding-left: 10px;
}

.box_cont .body .box_c_in {
	width: 100%;
	padding: 5px;
}

.content .cont_wrap .txt_box {
	margin-left: 0px;
	margin-right: 0px;
}
}

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

input,
textarea {
	max-width: 300px !important;
}

.content table.table_01 th,
.content table.table_01 td {
	width: 100% !important;
	display: block;
}

.content table.table_01 th {
	background-color: #F6F6F6;
}


#index_top #top_catch h2 {
	font-size: 30px;
}

#sub_top {
	font-size: 24px;
}

.content h2 {
	font-size: 24px;
}

.content .obi_001 h2 {
	font-size: 22px;
}

}

/*
エフェクト
-------------------------------------------*/
.effect {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha( opacity=0 )";
	transform: translateY(20px);
	-webkit-transform: translateY(20px);  
    -moz-transform: translateY(20px); 
	-webkit-transition: 1.0s ease-out;
	-moz-transition: 1.0s ease-out;
	transition: 1.0s ease-out;
}
.effect.d_02 {
transition-delay:0.2s;
-webkit-transition-delay:0.2s;
}
.effect.d_04 {
transition-delay:0.4s;
-webkit-transition-delay:0.4s;
}
.effect.d_06 {
transition-delay:0.6s;
-webkit-transition-delay:0.6s;
}
.effect.d_08 {
transition-delay:0.8s;
-webkit-transition-delay:0.8s;
}
.effect.start {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
	transform: translateY(0px);
	-webkit-transform: translateY(0px);  
    -moz-transform: translateY(0px);    
}


/*------------------------------*/

 
.obi_002 .box_in p a.tel {
	font-size: 24px;
	color: #FFF;
	text-decoration: none;
	line-height: 1.2;
}
.obi_002 .box_in p a.tel strong {
	padding-left: 10px;
	font-size: 150%;
}



.content .box_att {
	margin-top: 30px;
}

.content .box_att h2 {
	font-weight: normal;
	font-size: 24px;
	color: #3EADBD;
	padding: 15px;
	border-bottom-color: #8ED1DB;
}
.content .box_att p {
	font-size: 14px;
	margin: 0px;
	color: #328B98;
}


/*
FAQ
-------------------------------------------*/
dl.faq {
	display: block;
	margin: auto;
	width: 90%;
}

dl.faq dt {
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "Sawarabi Mincho", "HG明朝E",  "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size: 20px;
	color: #FFF;
	background-color: #278498;
	display: block;
	position: relative;
	width: 80%;
	margin-left: 20%;
	margin-bottom: 20px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 50px;
}

dl.faq dt::before{
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", "MS Gothic", sans-serif;
	font-size: 24px;
	content: "Q.";
	position: absolute;
	left: 20px;
	top: 13px;
}
dl.faq dt::after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(39, 132, 152, 0);
    border-top-width:16px;
    border-bottom-width:16px;
    border-left-width:8px;
    border-right-width:8px;
    border-bottom-color:#278498;
    bottom:100%;
    right:30px;
}
dl.faq dd {
	font-size: 16px;
	background-color: #FFF;
	display: block;
	position: relative;
	width: 80%;
	padding: 20px;
	margin-bottom: 50px;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 0px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 0px;
	-moz-box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 5px 0px;
	padding-top: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	padding-left: 50px;
}
dl.faq dd::after{
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	pointer-events: none;
	position: absolute;
	border-color: rgba(255,255,255,0.0);
	border-top-width: 16px;
	border-bottom-width: 16px;
	border-left-width: 8px;
	border-right-width: 8px;
	border-bottom-color: #FFFFFF;
	bottom: 100%;
	left: 30px;
}

dl.faq dd::before{
	font-size: 24px;
	content: "A.";
	position: absolute;
	left: 20px;
	top: 13px;
}


/*
事例一覧＆ギャラリー
-------------------------------------------*/

.works_list li {
	display: block;
	float: left;
	width: 25%;
	padding: 20px;
}

.works_list li a {
	display: block;
	text-decoration: none;
	width: 100%;
	padding: 10px;
	border: 1px solid #F2F6F7;
	position: relative;
}

.works_list li a:hover {
	background-color: #FFF;
	border: 1px solid #DDE7EA;
}

.works_list li a span {
	display: block;
	color: #FFF;
	font-size: 12px;
	background-color: #36BEAD;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 10;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
}

.works_list li a span.cl_2 {
	background-color: #333333;
}

.works_list li a span.cl_3 {
	background-color: #FF9900;
}

.works_list li a img {
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.works_list li a p {
	color: #111;
	text-align: center;
	margin: 0px;
}

.g_list li {
	display: block;
	float: left;
	width: 20%;
	padding: 20px;
}

.g_list li a {
	display: block;
	width: 100%;
	height: 150px;
	overflow: hidden;
}

.g_list li a img {
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.g_list li a img:hover {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}


/*
Facebook
-------------------------------------------*/
/*---
.content .cont_wrap .box_left {
	width: 50%;
	float: left;
	padding: 10px;
}
.content .cont_wrap .box_right {
	width: 50%;
	float: right;
	text-align: center;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
}-----*/




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

.content .cont_wrap .box_left {
	width: 100%;
	float: none;
}
.content .cont_wrap .box_right {
	width: 100%;
	float: none;
	overflow: hidden;
}

.content .cont_wrap .box_right .fb-page {
	width: 100% !important;
}

.works_list li {
	width: 33.33%;
}

.g_list li {
	width: 33.33%;
}

}

/*
ページャー
-------------------------------------------*/

.pager {
	padding-top: 50px;
	padding-bottom: 50px;
	clear: both;
}

.pager .pagination {
  text-align: center;
}

.pager .pagination li {
	display: inline;
	margin: 0 2px;
	padding: 0;
	display: inline-block;
	width: 36px;
	height: 36px;
	text-align: center;
	position: relative;
}


.pager .pagination li a{
	vertical-align: middle;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	display: table;
	color: #FFF;
	text-decoration: none;
	background-color: #333333;
}

.pager .pagination li a span{
  display:table-cell;
  vertical-align:middle;
}

.pager .pagination li a:hover,
.pager .pagination li a.active{
	color: #000;
	background-color: #F9F9F9;
}

@media only screen and (max-width: 767px){
.pager {
	padding-top: 20px;
	padding-bottom: 20px;
}
  .pager .pagination li{
    display: none;
  }

  .pager .pagination li.pre,
  .pager .pagination li.next{
    display: inline-block;
    width: 40%;
    height: 40px;
    text-align: center;
  }

  .pager .pagination li.pre a,
  .pager .pagination li.next a{
    width: 100%;
    text-align: center;
  }

  .pager .pagination li.pre span::after{
    content: "　前の10件へ";
  }

  .pager .pagination li.next span::before{
    content: "次の10件へ　";
  }
  
  .works_list li {
	width: 50%;
	padding: 10px;
}

.g_list li {
	width: 50%;
}

.img_center span {
	font-size: 14px;
	padding: 5px;
}

.img_center div {
	font-size: 12px;
	padding: 20px;
}

dl.faq {
	width: 96%;
}

dl.faq dt {
	font-size: 18px;
	width: 90%;
	margin-left: 10%;
}

dl.faq dd {
	width: 90%;
}

}


/*---------768-1024--------*/
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  #conseptArea .flexbox {
 display: block;
}
#conseptArea #rightArea ul.flexbox {
 display: flex;
  justify-content: center;
  align-items: center;
}

#consept #leftArea{
        width: 96%;
        margin: -150px auto 0 auto;
        box-sizing: border-box;
}
#consept #rightArea{
    width: 100%;
}
.content #consept #leftArea p.btn a {
    width: 100%;
} 

#joblist ,
#newslist{
        width: 96%;
        margin: 0 auto;
        box-sizing: border-box;
}
#newslist{
        margin-bottom: 20px;
}
#voice {
    padding: 40px;
}
#bne2Area {
    padding: 80px 40px;
}
#saiyoArea .flexbox{
  display: block;
}
#saiyoArea #inwrap {
    padding: 80px 40px;
}
#saiyoArea .leftArea,
#saiyoArea .rightArea{
width:100%;
}
#saiyoArea .leftArea ul li {
    width: 100%;
    margin: 0 0 20px 0;
}
#saiyoArea .leftArea ul li a:before {
    left: 472px;
}
#saiyoArea .leftArea ul li:last-child a:before {
    left: 472px;
}
#saiyoArea .rightArea ul li a:before {
    right: 200px;
}

footer .cont_wrap .f_box.lg {
        width: 35% !important;
        margin: 0 0 0 30px;
}
footer .cont_wrap .f_box {
    width: 26%!important;
    text-align: left!important;
}
#docsArea .docs, #prosessArea, #event .pieceContainer, #leadArea, #voicepArea, #jpbsArea .cont_wrap, #allsyain {
    width: 96%;
    padding: 40px 20px;
box-sizing: border-box;
}
#statusArea{
   width: 95%;
        padding: 20px 20px;
        box-sizing: border-box;
}
#QAcommentArea {
    width: 100%;
    padding: 40px 20px;
    box-sizing: border-box;
}

#conceptMssagesArea {
    width: 65%;
    margin: 0 0 0 30%;
}
#page-recruit-concept-index #top_visual {
    background-position: bottom;
}
#conceptArea .prewrap .come {
    width: 96%;
    margin: 0 auto;
}
#leadArea{
    padding: 30px 0 0 0;
    box-sizing: content-box;
    width: 100%;
}
#voicepArea{
    box-sizing: content-box;
    width: auto;
}

#leadArea .cont_wrap {
    width: 95%;
}
#QAcommentArea .flexbox{
        display: flex;
}

#QAcommentArea .qac {
    z-index: 10000;
    width: 50%;
    padding: 30px;
    top: -20px;
}
#QAcommentArea .flexbox figure{
    width: 60%;
    height: auto;
}
#leadArea figure img {
    margin: 105px 0 0 0;
}
#QAcommentArea #clm01.flexbox{
   margin-bottom: 150px;
}

#futureArea .pre ul li:nth-child(2) {
    margin-right: 0;
}

#futureArea .pre ul{
justify-content: center;
}

.content .surveyForm .body p{
    width: 90%;
    margin: 0 auto;
}
#activityArea ul li {
    margin: 0 14px 20px 0;
}
#page-recruit-activity-index #top_visual {
    background-size: contain;
}
.item-front, .item-back {
    height: 500px;
}
#page-recruit-talk-index #staff4mei {
    width: 96%;
}

#icontalKArea,
#takeStaffArea ul{
    width: 96%;
    margin: 0 auto;
}
#menuList li:last-child{
   margin:0;
}

#icontalKArea .talkttl{
  width: 25%;
  margin: 0 20px 0 0;
}
#icontalKArea .box{
  width: 70%;
}
.talkttl h2 img{
  width: 100%;
}
.flexbox.talkspeace img {
    width: 100%;
}
.content .topcon .cont_wrap.effect.flexbox .leftArea p {
    text-align: center;
}
.topcon .cont_wrap.effect.flexbox .leftArea h2 span {
    font-size: 110%;
}
#cstory02, #cstory01 {
    width: 96%;
    margin: 0 auto;
}

#page-recruit-careerStory-index .cont_wrap {
    width: 96%;
}

#btncary li:first-child a:before,
#btncary li:last-child a:before {
    left: 300px;
}

#g_navi ul li.sp_show,
.sp_show{
  display: block;
}
}


@media screen and (min-width: 1024px) {
#g_navi ul li.sp_show,
.sp_show{
  display: none;
}
    #g_navi li a {
        padding: 8px;
        font-size: 13px;
    }

}