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

/*  ページ CSS    */



/* NEWSページ*/
section#news {
	position:relative;
	left:-273px;
	top:350px;
	display: flex;
	flex-direction: row;
	margin-bottom:550px;
}
#newsImg {
  width: 100%;
  height: 400px;
  position: relative;
  top: -400px;
  left: 50px;
  margin-bottom: -300px;
}
#newsImg img {
  width:100%;
  height:100%;
  object-fit: cover;
}
section#news h1 {
	font-size: 100px;
	color :var(--main-white-color);
	font-style: italic;
}
section#news h2{
	font-size:33px;
	color :var(--main-white-color);
	font-style: italic;
	text-align: right;
}
section#news span.post-title{
	font-size:33px;
	color :var(--main-white-color);
	font-style: italic;
	text-align: right;
}
#newsList div.newsPost-List {

  display:flex;
  flex-direction: row;
}
#newsList div.newsPost-List div.post-date {
  position:relative;
  left:-430px;
  width:400px;
  color:#FFF;
  font-size: 20px;
}
#newsList div.newsPost-List div.post-date .post-title {
  font-size:16px;
  color:#FFF;
}
#NewsRight {
    position: relative;
    top: 100px;
}
#newsList p.post-excerpt {
  margin-left:-300px;
  background-color: #FFF;
}
#newsList > div.postBox {
  margin-bottom:50px;
  border-bottom:solid 3px var(--main-white-color);
}
#newsList > div.postBox:hover {
  border-bottom:solid 3px var(--main-blue-color);
}
/* subsidy  */

section#subsidy {
	position:relative;
	left:-273px;
	top:-100px;
	margin-bottom:550px;
}
#subsidy h4 {
	font-size: 100px;
	color :var(--main-blue-color);
	font-style: italic;
  position: relative;
  left:200px;
}
#subsidy h5 {
	font-size:33px;
	color :var(--main-blue-color);
	font-style: italic;
	text-align: right;
  position: relative;
  left: -400px;
  top: 100px;
}
.subsidy01 {
  display: flex;
  flex-direction: row;
  position: relative;
  top:100px;
  margin:20px 0px;
}
.subsidy01Left {
  width: 270px;
  padding: 10px;
  color: #FFF;
  line-height:2em;
  font-size: 18px;
}
.subsidy01Right {
  width:calc( 100% - 200px );
  height: 500px;
  padding:20px;
  margin-left: 50px;
}
.subsidy01Left p {
  color: #FFF;
  line-height:2em;
  font-size: 18px;
}

.subsidy02 {
  display: flex;
  flex-direction: row;
  position: relative;
  top:100px;
  margin:20px 0px;
}
.subsidy02Left {
  width: 270px;
  padding: 10px;
}
.subsidy02Right {
  width:calc( 100% - 200px );
  height: 100%;
  padding:20px;
  margin-left: 50px;
}
.subsidy02Left p {
  color: #FFF;
  line-height:2px;
  font-size: 18px;
}


.pagination {
  padding: 10px;
  font-size: 20px;
  text-align: right;
}
.page-numbers {
  padding:10px;
}




/* privacy-policy  */

/* Service  */
p.tate{
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  padding: 30px;
  font-size:45px;
}
#eigyoubu, #haisoubu {
  width:calc( 100% + 280px );
  position: relative;
  left:-150px;
	color:var(--main-white-color);
  display: flex;
  flex-direction: row;
  margin-top:600px;
}
#haisoubu {
  margin-top:800px;
}
.serviceTate {
    position: relative;
    top:-500px;
    left:-50px;
}
figure.servicefig {
  display: flex;
  flex-direction: column;
  align-items: end;
  border-bottom:10px solid var(--main-blue-color);
  margin:10px;
  margin-top:-500px;

}
div.eigyouImg, div.gyoumuImg{
  width:100%;
  height:100%;
  margin-top:100px;
}
div.honsyaImg {
  margin-top:100px;
}
div.eigyouImg img,
div.honsyaImg img , div.gyoumuImg img {
  width:100%;
  height:100%;
  object-fit: cover;
}
.eigyouText {
  margin-top:0px;
  background-color: #FFF;
}


p.eigyou-txt, p.gyoumu-txt, p.haisou-txt,.honsya-txt {
  color:#000;
  font-size:20px;
  margin-bottom:23px;
  line-height:1.5em;
  background-color: #FFF;
}
#eigyoubu h4, #haisoubu h4, #gyoumubu h4, #honsya h4 {
  font-size:35px;
  color:#000;
  margin-bottom:23px;
}

.gyoumucom,.honsyacom {
  left:100px;
}

#gyoumubu, #honsya {
  width: calc( 100% );
	color:var(--main-blue-color);
  display: flex;
  flex-direction: row;
  padding-left:50px;
  margin-top:650px;
  margin-bottom: -500px;
}
#honsya {
  margin-top:400px;
  margin-bottom: 0px;
}
#hhonsya {
  margin-top: 0px;
  top:-450px;
}


/*  message CSS    */


#message {
  width: calc( 100% - 570px );
	color:var(--main-blue-color);
  padding-top:0px;
  padding-bottom:200px;
}
#message section { 
  position: relative;
  left:-230px;
}
#message h1 {
	font-size: 100px;
	color :var(--main-blue-color);
	font-style: italic;
  margin-left:-130px;
}
#message h2 {
	font-size:33px;
	color :var(--main-white-color);
	font-style: italic;
}
#message div.messageBOX {
  position: relative;
  left:-200px;
  margin-top:150px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: calc( 100% + 500px );
}
#message p {
	color:var(--main-blue-color);
  font-size: 22px;
  line-height: 1.5em;
}
#message p.sougyou {
	color:var(--main-blue-color);
  font-size: 70px;
  position: relative;
  top:-230px;
}
.messageBOX p {
	color :var(--main-white-color);
}
#message > section > div.messageBOX > div > div.rinen {
  width:100%;
}
#message > section > div.messageBOX > div > div > img {
  object-fit: cover;
  width:100%;
}
#message figure.president {
  width:800px;
}
#message figure.president div.presidentImg {
  width:500px;
}
#message figure.president div.presidentImg figcaption {
  color:var(--main-white-color);

}
#message figure.president div.presidentImg img {
  object-fit: cover;
  width:100%;
  height:100%;
}


section#histry {
  margin-top:-300px;
}
#histry h1 {
	font-size: 100px;
	color :var(--main-blue-color);
	font-style: italic;
  margin-left:-80px;
}
#histry h2 {
	font-size:33px;
	color :var(--main-white-color);
	font-style: italic;
}
#presidentList {
  position: relative;
  top: -50px;
  left: 0px;
  margin-bottom: 50px;
}
#presidentList li {
  font-size:20px;
  line-height:1.5em;
  text-align: right;
}
.histaryList {
  margin-top:-200px;
}
.histaryList dl {
  display: flex;
  flex-direction: row;
}

.histaryList dl.hList {
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  top: 200px;
  left: -150px;
  width: calc( 100% + 300px );
}
.histaryList dl.hList dt {
  font-family: sans-serif;
  width:350px;
  border-top :solid 1px #FFF;
  padding:10px;
	color :var(--main-white-color);
  font-size:18px;
  line-height:1.5em;
}
.histaryList dl.hList dd {
  width:calc( 100% - 350px );
  border-top :solid 1px #02478f;
  padding:10px;
	color :var(--main-blue-color);
  background-color: #FFF;
  font-size:18px;
  line-height:1.5em;
  position: relative;
  top: -100px;
  left: 50px;
}
section#profile { 
  position: relative;
  left:-150px;
}
#profile div.syaoku {
  position:relative;
  top: 700px;
  left: -200px;
}
#profile > div.syaoku > figure > img {
  width:100px;
}
#profile dl {
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  top: 200px;
  left: -50px;
  width: calc( 100% );
}
#profile dl dt {
  font-family: sans-serif;
  width:150px;
  border-top :solid 1px #FFF;
  padding:10px;
	color :var(--main-white-color);
  font-size:18px;
  line-height:1.5em;
}
#profile dl dd {
  width:calc( 100% - 150px );
  border-top :solid 1px #02478f;
  padding:10px;
	color :var(--main-blue-color);
  background-color:#FFF ;
  font-size:18px;
  line-height:1.5em;
  position: relative;
  top: -70px;
  left: 80px;
}

section#syaokuBig { 
  margin-top:300px;
  left:50px;
}
section#syaokuBig img { 
  width:100%;
  height:100%;
  object-fit: cover;
}

/*  our_job CSS    */


/*  outlone CSS    */

/*  contact CSS    */

#contactForm {
  width:calc( 100% - 20px );
  padding:10px;
  margin-top: 100px;
}

/******************************/
/** コンタクトフォームの装飾 **/
/******************************/
/*　フォーム全体　*/
#wpcf7-f307-o1 {
width:100%;
margin: 0 auto;
font-size:20px;
font-family: 'Noto Sans JP', sans-serif;
}

.cf7-item {
display: flex;
align-items: flex-start;
justify-content: flex-start;
margin: 0 0 1.75em;
}

.cf7-q {
width: 30%;
margin: 0 0 0 10px;
}

.cf7-a {
width: 60%;
}

/*　見出し　*/
.form-heading
{
width: 100%;
color: #ffffff;
font-weight: bold;
font-size:90px;
color:var(--main-blue-color);
}

.form-heading h2 {
  font-size: 80px;
  color: var(--main-blue-color);
  font-style: italic;
  transform: skewY(-10deg);
  position: relative;
  top:-150px;
}
.form-heading h3 {
	font-size:33px;
	font-style: italic;
	color :var(--main-blue-color);
	width: 100%;
	text-align: right;
	transform: skewY(-10deg);
  position: relative;
  top:-50px;
  left:-600px;
}

#contactBody {
  padding:20px;
  padding-top:30px;
}
.form-heading p {
margin: 0;
	transform: skewY(-10deg);
  position: relative;
  top:-100px;
}

/* 各項目共通 */
#wpcf7-f307-o1 label{
font-weight:bold;
}
#wpcf7-f307-o1 input {
  width:100%;
  padding:10px;
  font-size:20px;
}
#wpcf7-f307-o1 input[type=”text”],#wpcf7-f307-o1 input[type=”email”],#wpcf7-f307-o1 input[type=”tel”],#wpcf7-f307-o1 textarea {
background: #F0F8FF;
width:100%;
margin-left:10px;
}

#wpcf7-f307-o1 input[type=”text”]:focus,#wpcf7-f307-o1 input[type=”email”]:focus,#wpcf7-f307-o1 input[type=”tel”]:focus,#wpcf7-f307-o1 textarea:focus {
background: #FFE4E1;
border: 2px solid #FF1493;
outline: 0;
}

#wpcf7-f307-o1 input[type=”checkbox”], #wpcf7-f307-o1 input[type=”radio”]{
appearance: auto;
}

#wpcf7-f307-o1 .wpcf7-list-item {
display: block;
}

#wpcf7-f307-o1 textarea{
height:200px;
padding: 0.625em 0.4375em;
}

.cf7-accept-check{
text-align: center;
margin: 50px auto;
}

.cf7-submit {
width: 40%;
margin: 0 auto;
text-align: center;
}

#wpcf7-f307-o1 input[type=”submit”]
{
width: 100%;
background-color: #191970;
color: #ffffff;
border-radius: 2px;
font-size: 1.2em;
padding: 1em 10px;
}

#wpcf7-f307-o1 input[type=”submit”]:hover
{
background-color:#ffffff;
border: 2px solid #191970;
color:#191970;
}

.cf7-btn{
width: 40%;
margin: 0 auto;
text-align: center;
}
.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #FFF;
  background-color: #191970;
  border-radius: 0.5rem;
}

.btn--orange,
a.btn--orange {
  color: #fff;
  background-color: #eb6100;
}

.btn--orange:hover,
a.btn--orange:hover {
  color: #fff;
  background: #f56500;
}

.fa-position-left {
  position: absolute;
  top: calc(50% - 0.5em);
  left: 1rem;
}

.cf7-privacy p {
  margin:20px;
  font-size:14px;
  text-align: center;
  font-weight: 400;
}

/*　必須ラベル　*/
.cf7-req{
font-size:.8em;
padding: 4px 6px;
background: #eb2a2a;
color: #ffffff;
margin-left: 10px;
display:inline-block;
}

@media screen and (max-width:768px){
.cf7-item {
display: block;
}

#wpcf7-f307-o1 label{
display: block;
margin-bottom: 10px;
}

.cf7-q {
width: 100%;
margin: 0;
}

.cf7-a {
width: 100%;
}

#wpcf7-f307-o1 input[type=”text”], #wpcf7-f307-o1 input[type=”email”], #wpcf7-f307-o1 input[type=”tel”], #wpcf7-f307-o1 textarea{
margin-left: 0;
}

.cf7-submit{
width: 50%;
height:150px;
}
}


/*  privacyPolicy CSS    */
#privacy {
  width: calc( 100% - 280px );
	color:var(--main-blue-color);
  display: flex;
  flex-direction: row;
  padding-left:50px;
  padding-top:0px;
  padding-bottom:200px;
}
#privacy section { 
  position: relative;
  left:-130px;
}
#privacy h1 {
	font-size: 100px;
	color :var(--main-blue-color);
	font-style: italic;
}
#privacy h2 {
	font-size:33px;
	color :var(--main-white-color);
	font-style: italic;
	text-align: right;
}
#privacy .messageBOX {
  position: relative;
  left:150px;
  top:100px;
  color:#000;
  background-color: #FFF;
  font-size:18px;
  margin-bottom:23px;
  line-height:1.5em;
  margin-left:50px;
}

#privacy .messageBOX p {
  color:#000;
}
#privacy p.privacyTitle {
  margin:20px 0px;
}
#privacy p.privacyText {
  margin:20px 0px;
}
#privacy ul {

}
#privacy ul li {
  line-height:1.5em;
  margin:10px 0px;
}


/*  interVew  */


#interview h1 {
	font-size: 100px;
	color :var(--main-blue-color);
	font-style: italic;
  margin-left:-70px;
}
#interview h2 {
	font-size:33px;
	color :var(--main-blue-color);
	font-style: italic;
  margin:10px;
}
#interview div.staffBOX figure {
  display:flex;
  flex-direction: row;
  margin-left:20px;
}
#interview div.staffBOX {
  width:calc( 100% + 120px );
  position:relative;
  left:-80px;
  top:200px;
  display: flex;
  flex-direction: row;
  margin-bottom:100px;
}
#interview div.staffBOX p.tate {
  font-size:24px;
  padding:10px;
}
#interview div.staffBOX figure.staff img {
  position: relative;
  width:400px;
  top:-100px;
}
#interview div.staffBOX figure.staff h2 {
  background-color:#000;
	color :#FFF;
  padding:10px;
  font-size:24px;
}
#interview div.staffBOX figure.staff p {
  font-size:20px;
  padding:5px;
  padding-right:50px;
  margin-bottom: 20px;
  background-color: #FFF;
}
#interview div.staffBOX p.kuro {
  background-color: #000;
  color:#FFF;
  padding:5px;
}

#interview div.staffBOX figure.staff div p.kuro {
  background-color: #000;
  color:#FFF;
  padding:5px;
}
#interview div.staffBOX p.blue {
	color:var(--main-blue-color);
  padding:5px;
  font-size:30px;
  background-color: #fff;
}
#interview div.staffBOX p.shiro {
	color:#FFF;
  padding:5px;
  font-size:30px;
}
.slideCell {
  width:350px;
}
.slideCell img {
  width:100%;
  height:100%;
  object-fit: cover;

}
#slider-0.slideFrame .slideCell {
  padding:0px;
}
/* slider (base)
--------------------------------------------------------- */
.slideFrame {
  overflow: hidden;
}

.slideCell {
  display: block;
}

.slideGuide .slideCell {
  float: left;
  margin-right: 5px;
}
.slideGuide.up .slideCell, .slideGuide.down .slideCell {
  float: none;
  margin-right: 0;
  margin-bottom: 10px;
}

/* controller */
.slideCtrl {
  position: absolute;
  background-color: #333;
  background-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
.slideCtrl.left, .slideCtrl.right {
  top: 0;
  width: 90px;
  height: 100%;
}
.slideCtrl.up, .slideCtrl.down {
  left: 0;
  width: 100%;
  height: 60px;
  font-size: 14px;
  line-height: 60px;
}

.slideCtrl.left {
  left: 0;
}

.slideCtrl.right {
  right: 0;
}

.slideCtrl.up {
  top: 0;
}

.slideCtrl.down {
  bottom: 0;
}

/* slider-0
--------------------------------------------------------- */
#slider-0.slideFrame .slideCell {
  width: 320px;
  height: 420px;
  padding: 0px;
}

/*  お問い合わせ CSS    */

/*  リクルート CSS    */

#recruit {
  width: calc( 100% - 570px );
	color:var(--main-blue-color);
  display: flex;
  flex-direction: row;
  padding-top:400px;
  padding-bottom:200px;
}
#recruit section { 
  position: relative;
  left:-230px;
  margin-top:-300px;
}
#recruit h1 {
	font-size: 100px;
	color :var(--main-blue-color);
	font-style: italic;
  margin-left:160px;
}
#recruit h2 {
	font-size:33px;
	color :var(--main-blue-color);
	font-style: italic;
	text-align: right;
}
#recruit h3 {
	font-size:50px;
	color :var(--main-blue-color);
	font-style: italic;
  margin-left:20px;
}
#recruit > section > div.messageBOX {
    position: relative;
    left: -100px;
    top: 100px;
}
#recruit > section > div.messageBOX > figure {
  display: flex;
}
#recruit > section > div.messageBOX > figure > div > figcaption {
	color :var(--main-white-color);
}
#recruit > section > div.messageBOX > figure > div > p {
  color:#000;
  font-size:20px;
  margin-bottom:23px;
  line-height:1.5em;
  margin-left:50px;
}
#Occupation {
  position: absolute;
  left: -150px;
  top: 800px;
	color :var(--main-white-color);

}
dl.require {
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap;
  position: relative;
  top: 200px;
  left: 35px;
}
dl.require dt {
  width:200px;
  border-top :solid 1px #FFF;
  padding:10px;
	color :var(--main-white-color);
  font-size:22px;
  line-height:1.5em;
}
dl.require dd {
  width:calc( 100% - 200px );
  border-top :solid 1px #02478f;
  padding:10px;
	color :var(--main-blue-color);
  background-color: #FFF;
  font-size:22px;
  line-height:1.5em;
}
#mapBoxOver {
  width: calc(100% + 300px);
  position: relative;
  top:200px;
  left:-100px;
  margin-bottom: 50px;
}
#mapBoxOver h2 {
	font-size:94px;
	color :var(--main-blue-color);
	font-style: italic;
	text-align: left;
  position: relative;
  top: -50px;
  left: 110px;
}
#mapBoxOver h3 {
	font-size:33px;
	color :var(--main-blue-color);
	font-style: italic;
	text-align: left;
  position: relative;
  top: -80px;
  left: 400px;
}
#mapBox {
  display: flex;
  margin-bottom: 200px;
}
#mapBox p {
	color :var(--main-white-color);
  width:400px;
  margin:20px 0px;
  font-size:20px;
  line-height: 1.5em;
}
#map {
    display: block;
    width: 100%;
    height: 400px;
    padding-bottom:10px;
    background: #02478f;

    border-bottom:150px;
}
#syaokuBigImg { 
  width:100%;
  margin-top:300px;
  margin-left:300px;
}
#syaokuBigImg img { 
  width:100%;
  object-fit: cover;
}

.f20 {
  font-size:20px;
}
.f24 {
  font-size:24px;
}


/* レスポンシブデザインのためのメディアクエリ */
@media (max-width: 800px) {


/* NEWSページ*/
section#news {
	position:static;
	left:0px;
	top:0px;
	display: flex;
	flex-direction: column;
	margin-bottom:150px;
}

#newsImg {
  display: none;
}
section#news h1 {
	font-size: 100px;
	color :var(--main-blue-color);
	font-style: italic;
}
section#news h2{
	font-size:33px;
	color :var(--main-blue-color);
	font-style: italic;
	text-align: right;
}
section#news span.post-title{
	font-size:33px;
	color :var(--main-blue-color);
	font-style: italic;
	text-align: right;
}
#NewsRight {
    position: static;
    top: 10px;
}

#newsList div.newsPost-List {
  display:flex;
  flex-direction: column;
}
#newsList div.newsPost-List div.post-date {
  position:static;
  left:0px;
  width:100%;
  color: var(--main-blue-color);
  font-size: 20px;
  background-color: #FFF;
}
#newsList div.newsPost-List div.post-date .post-title {
  font-size:20px;
  color: var(--main-blue-color);
  background-color: #FFF;
}
#NewsRight {
    position: static;
    top: 100px;
}
#newsList p.post-excerpt {
  margin-left:0px;
  font-size:16px;
  margin-top:10px;
}

/* subsidy  */

section#subsidy {
	position:static;
	margin-bottom:0px;
  width: 100%;
}
#subsidy h4 {
	font-size: 80px;
	color :var(--main-blue-color);
	font-style: italic;
  position: static;
}
#subsidy h5 {
	font-size:25px;
	color :var(--main-blue-color);
	font-style: italic;
	text-align: right;
  position: static;
}
.subsidy01 {
  display: flex;
  flex-direction: column;
  position: static;
}
.subsidy01Left {
  width: 100%;
  padding: 10px;
  color: #FFF;
  line-height:2em;
  font-size: 18px;
}
.subsidy01Right {
  width:100%;
  height: 500px;
  padding:20px;
  margin:auto;
}
.subsidy01Left p {
  color: #000;
  line-height:2em;
  font-size: 18px;
}

.subsidy02 {
  display: flex;
  flex-direction: column;
  position: static;
}
.subsidy02Left {
  width: 100%;
  padding: 10px;
}
.subsidy02Right {
  width:100%;
  height: 100%;
  padding:0;
  margin:auto;
}
.subsidy02Right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.subsidy02Left p {
  color: #000;
  line-height:2px;
  font-size: 18px;
}

/*message*/

#message {
  width: calc( 100% - 10px );
	color:var(--main-blue-color);
  padding-top:0px;
  padding-bottom:0px;
}
#message section {
  position: static;
}
#message h2 {
	font-size:33px;
	color :var(--main-blue-color);
	font-style: italic;
}
#message figure.president {
  width:100%;
}
#message figure.president div.presidentImg {
  width:100%;
}
#message figure.president div.presidentImg figcaption {
  color:var(--main-blue-color);
  margin-bottom: 50px;
}
#message div.messageBOX {
  position: static;
  left:0px;
  margin-top:50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
#message p.sougyou {
  position: static;
}
section#histry {
  margin-top:0px;
}
#histry h1 {
  margin-left:0px;
}
#presidentList {
  position: static;
  margin-bottom: 50px;
}
.histaryList {
  margin-top:0px;
}
.histaryList dl.hList {
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap;
  position: static;
  width: 100%;
}
.histaryList dl.hList dt {
  font-family: sans-serif;
  width:50%;
  border-top :solid 1px #FFF;
  padding:10px;
	color :var(--main-blue-color);
  font-size:18px;
  line-height:1.5em;
}
.histaryList dl.hList dd {
  width:50%;
  border-top :solid 1px #02478f;
  padding:10px;
	color :var(--main-blue-color);
  font-size:18px;
  line-height:1.5em;
  position: static;
}
#profile div.syaoku {
  position:static;
}
#message h1 {
	font-size: 70px;
	color :var(--main-blue-color);
	font-style: italic;
  margin-left:0px;
}
#message h2 {
	font-size:33px;
	color :var(--main-blue-color);
	font-style: italic;
}
#profile dl {
  display: flex; 
  flex-direction: row;
  flex-wrap: wrap;
  position: static;
  width: 100%;
}
#profile dl dt {
  font-family: sans-serif;
  width:50%;
  border-top :solid 1px #FFF;
  padding:10px;
	color :var(--main-blue-color);
  font-size:18px;
  line-height:1.5em;
}
#profile dl dd {
  width:50%;
  border-top :solid 1px #02478f;
  padding:10px;
	color :var(--main-blue-color);
  font-size:18px;
  line-height:1.5em;
  position: static;
}
#mapBoxOver {
  width: 100%;
  position: static;
  margin-bottom: 50px;
  margin-top: 5px;
}
#mapBoxOver h2 {
	font-size:94px;
	color :var(--main-blue-color);
	font-style: italic;
	text-align: left;
  position: static;
}
#mapBoxOver h3 {
	font-size:33px;
	color :var(--main-blue-color);
	font-style: italic;
	text-align: left;
  position: static;
}
#mapBox {
  display:flex;
  flex-direction: column;
  margin-bottom: 200px;
}
#mapBox p {
	color :var(--main-blue-color);
  width:100%;
  margin:20px 0px;
}
#map {
    display: block;
    width: 100%;
    height: 400px;
    padding-bottom:10px;
    background: #02478f;

    transform:
      skew(
        calc((90deg - 90deg) / 2),
        calc((90deg - 97deg) / 2)
      ); /* calc((90deg - 欲しい角度) / 2) */
    border-bottom:150px;
}

section#syaokuBig {
    margin-top: -100px;
    margin-bottom:200px;
    left:20px;
}





/*  privacyPolicy CSS    */
#privacy {
  width: 100%;
	color:var(--main-blue-color);
  display: flex;
  flex-direction: column;
  padding-left:0px;
  padding-top:0px;
  padding-bottom:200px;
}
#privacy section { 
  position: static;
}
#privacy h1 {
	font-size: 50px;
	color :var(--main-blue-color);
	font-style: italic;
}
#privacy h2 {
	font-size:33px;
	color :var(--main-blue-color);
	font-style: italic;
	text-align: right;
}
#privacy .messageBOX {
  position: static;
  color:#000;
  font-size:14px;
  margin-top:100px;
  line-height:1.5em;
  margin-left:50px;
}

#privacy .messageBOX p {
  color:#000;
}
#privacy p.privacyTitle {
  margin:20px 0px;
}
#privacy p.privacyText {
  margin:20px 0px;
}
#privacy ul {

}
#privacy ul li {
  line-height:1.5em;
  margin:10px 0px;
}

/* service */

#eigyoubu, #haisoubu {
  width:100%;
  position: static;
  left:0px;
	color:var(--main-blue-color);
  display: flex;
  flex-direction: column;
  margin-top:150px;
}
#haisoubu {
  margin-top:300px;
}

#eigyoubu > div:nth-child(1) > p {
    font-size:25px;
    position: relative;
    z-index: 10;
    background-color: #fff;
    padding: 5px;
    top:0px;
    left:20px;
}
figure.servicefig {
  flex-direction: column;
  align-items: end;
  border-bottom:10px solid var(--main-blue-color);
  margin:10px;

}
div.eigyouImg {
  width:100%;
  height:400px;
  margin-bottom: 100px;
  margin-top: -400px;
}
div.eigyouImg img {
  width:100%;
}
#gyoumubu, #honsya {
  width: 100%;
	color:var(--main-blue-color);
  display: flex;
  flex-direction: column;
  padding-left:0px;
  margin-top:50px;
}
#gyoumubu > div > p.gyoumucom {
  font-size:20px;
  position: relative;
  top:-300px;
  left:300px;
  padding: 5px;
  background-color: #fff;
}
#haisoubu > div:nth-child(1) > p {
  font-size:25px;
  position: relative;
  z-index: 10;
  left:300px;
  top:-100px;
  padding: 5px;
  background-color: #FFF;

}
#haisoubu > div > figure.haisouimg > div > img {
  width:100%;
  top: -400px;
  position: relative;
  transform: scale(-1, 1);
}
#haisoubu > div:nth-child(2) > figure > div:nth-child(2) {
  margin-top:-300px;
}
#honsya > div > p.honsyacom {
  font-size:25px;
  position: relative;
  z-index: 10;
  padding: 5px;
  top:-300px;
  left:300px;
  background-color: #FFF;

}
.staffWorkBOX {
  margin-top:-300px;
}


/* インタビュー */
#interview h1 {
	font-size: 50px;
	color :var(--main-blue-color);
	font-style: italic;
  margin-left:0px;
}

#interview div.staffBOX {
  width:100%;
  position:static;
  display: flex;
  flex-direction: column;
  margin-bottom:100px;
  margin-top: 100px;
}
#interview div.staffBOX p.shiro ,#interview div.staffBOX p.blue{
	color :var(--main-blue-color);
  writing-mode:horizontal-tb;
  font-size: 20px;
}
#interview div.staffBOX p.kuro {
  writing-mode:horizontal-tb;
  background-color: #000;
  color:#FFF;
  padding:5px;
}

#interview div.staffBOX figure.staff h2 {
  background-color:#000;
	color :#FFF;
  padding:10px;
  font-size:20px;
  writing-mode:horizontal-tb;
  transform: skewY(0deg);
}
#interview div.staffBOX figure.staff p {
  transform: skewY(0deg);

}
#interview div.staffBOX figure {
  display:flex;
  flex-direction: column;
  margin-left:20px;
  margin-top:40px;
  margin-bottom: 50px;
}
#interview div.staffBOX figure.staff img {
  position: static;
  width:100%;
}

#staff01 img, #staff02 img,#staff03 img {
  width:100%;
  object-fit: cover;
}
.staff01BOX {

}
.staff02BOX {

}
.staff03BOX {

}




/*  リクルート CSS    */

#recruit {
  width: 100%;
	color:var(--main-blue-color);
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top:400px;
  padding-bottom:200px;
}
#recruit h1 {
	font-size: 50px;
  margin-left:0px;
  text-align: right;
}
#recruit h2 {
	font-size:33px;
	color :var(--main-blue-color);
	font-style: italic;
	text-align: right;
}
#recruit h3 {
	font-size:20px;
	text-align: right;
}
#recruit section { 
  position: static;
}
#recruit > section > div.messageBOX {
    position: static;
    left: -100px;
    top: 100px;
}
#recruit > section > div.messageBOX > figure {
  display: block;
}
#recruit > section > div.messageBOX > figure > div > figcaption {
	color :var(--main-blue-color);
}
#recruit > section > div.messageBOX > figure > div > p {
  color:#000;
  margin-left:0px;
}
#Occupation {
  writing-mode:horizontal-tb;
  position: static;
	color :var(--main-blue-color);
}
#Occupation p.tate{
  writing-mode:horizontal-tb;
  font-size:22px;
}
#mapBoxOver > h2 {
  text-align: left;
}
#mapBoxOver > h3 {
  text-align: left;
  margin-bottom: 10px;
}
dl.require {
  display: flex; 
  flex-direction: column;
  flex-wrap: wrap;
  position: static;
}
dl.require dt {
  width:100%;
  border-top :solid 1px #02478f;
  padding:5px;
	color :var(--main-white-color);
  font-size:18px;
  line-height:1.5em;
  background-color: #02478f;
}
dl.require dd {
  width:100%;
  border-top :solid 1px #02478f;
  padding:5px;
	color :var(--main-blue-color);
  font-size:18px;
  line-height:1.5em;
}

.form-heading h2 {
  font-size: 80px;
  color: var(--main-blue-color);
  font-style: italic;
  transform: skewY(-10deg);
  position: static;
  top:0;
}
.form-heading h3 {
	font-size:33px;
	font-style: italic;
	color :var(--main-blue-color);
	width: 100%;
	text-align: right;
	transform: skewY(-10deg);
  position: static;
  top:0;
}

#syaokuBigImg { 
  width:100%;
  margin-top:0px;
  margin-left:0px;
}























}