@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Noto+Serif+JP|Sawarabi+Mincho&display=swap');

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  color: #333;
  font-size: 15px;
  line-height: 1.5;
  word-break: break-all;
  width: 100%;
}

#wrapper {
  width: 100%;
  overflow: hidden;
}

a {
  color: white;
  text-decoration: none;
}


a:hover img {
  text-decoration: none;
  opacity: 0.8;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

img,
video,
object {
  max-width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom;
  display: block;
}

.sample {
  height: 200px;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
}




.block_br {
  display: block;
}

/*--------------------------------
全体
---------------------------------*/

/*最大幅を調整*/
.inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.flexbox_left {
  display: flex;
  justify-content: left;
  align-items: center;
}

.flexbox_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  color: #1E589A;
  font-family: 'Noto Serif JP', serif;
  position: relative;
  line-height: 1;
}

.text-align_center {
  text-align: center;
}

/*--------------------------------
header
---------------------------------*/

#header {
  background-color: #209AC8;
  position: fixed;
  width: 100%;
  /* 幅を指定する */
  top: 0;
  /* 基準の位置を画面の一番上に指定する */
  left: 0;
  /* 基準の位置を画面の一番左に指定する */
  z-index: 255;
}

/*ヘッダー内のコンテンツ全体*/
.header_inner {
  height: 76px;
  padding: 0 15px;
}

/*ロゴの枠内*/
.logo {
  width: 170px;
  text-align: center;
  display: flex;
  align-items: center;
}

/*会社ロゴ*/
.logo_img {
  width: 120px;
  height: 35px;
  transition: 0.5s;
  margin-left: 10px;
  background-image: url("../image/logo_text.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}


/*回転させる画像の外側（下地）*/
.logo_icon {
  width: 35px;
  height: 35px;
  transition: 0.5s;
  background-image: url("../image/logo_base.png");
  background-size: contain;
  position: relative;
}

/*回転させる内側画像の設定 画像自体はhtml側のimgタグで*/
#head_logo_icon {
  width: 25px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}


.endless_rall {
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}



/*--------------------------------
globalnavi
---------------------------------*/

.gnav {
  color: white;

}

.gnav ul li {
  display: inline-block;
  margin-left: 15px;
  width: auto;
}

.gnav a:hover,
.gnav_footer a:hover {
  transition: 0.2s;
  color: #ffab00;
}


/*--------------------------------
contact_number 電話番号と受付時間
---------------------------------*/
.contact_number {
  margin: 0 0 0 auto;
  color: white;
}

/*上段------------------*/
.contact_up {
  display: flex;
  font-size: 20px;
}

/*アイコン画像*/
.tel_icon {
  width: 25px;
  height: 25px;
  margin: auto 10px auto 0;
}

/*下段------------------*/
.contact_down {
  display: flex;
  font-size: 12px;
}

.contact_down p {
  margin: 0 auto;
}


/*--------------------------------
section
---------------------------------*/
.section {
  height: auto;
}


/*--------------------------------
section01 TOPの画像と会社名のエリア
---------------------------------*/
#section01 {
  /*  background-image:url("../image/top.jpg");*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 89vh;
  padding: 10px 0;
  position: relative;
  overflow: hidden;

}

/*TOPの画像下の波線の画像*/
.section01_top_img {
  position: absolute;
  width: 105%;
  /*画像の幅*/
  height: 100%;
  background-image: url("../image/top_shape2.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  z-index: 100;
}


.top_title {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 70px;
  color: white;
  font-family: 'Noto Serif JP', serif;
  z-index: 100;
}

.top_text {
  position: absolute;
  top: 30%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  font-size: 20px;
  line-height: 1.2;
  color: white;
  z-index: 100;
}

.recruit_btn {
  position: absolute;
  bottom: 20%;
  right: -70px;
  width: 350px;
  height: 100px;
  padding-top: 10px;
  background: #f99900;
  border: 4px solid #f18200;
  border-radius: 100px;
  z-index: 101;
  transition: 0.3s;
  /*フォントの設定------------*/
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.recruit_btn:hover {
  right: 20px;
  color: black;
}

/*上部Recuritのテキスト*/
.recruit_btn:before {
  content: "Recruit";
  position: absolute;
  left: 50%;
  top: 35px;
  transform: translate(-50%, -95%);
  font-size: 16px;
}

/*--------------------------------
下層ページのトップ画像とタイトル
---------------------------------*/
#section01_subpage {
  margin-top: 76px;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  width: 100%;
  height: auto;
  padding: 36% 10px 0 10px;
  position: relative;
  overflow: hidden;
}

/*-------------------------
TOPの画像下の波線の画像
-------------------------*/
#section01_subpage:after {
  position: absolute;
  bottom: -1px;
  left: -1%;
  content: "";
  display: inline-block;
  /*忘れずに！*/
  width: 103%;
  /*画像の幅*/
  padding-top: 40%;
  height: auto;
  background-image: url("../image/top_shape5.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  z-index: 50;
}

/*下層ページのタイトルテキスト*/
.subpage_title {
  position: absolute;
  display: inline-block;
  top: 40%;
  left: 50%;
  padding: 0 5%;
  text-align: center;
  transform: translate(-50%, -50%);
  font-size: 5vw;
  color: white;
  font-family: 'Noto Serif JP', serif;
  z-index: 100;
  border-bottom: 1px solid;
  white-space: nowrap;

}

/*横線を引く------------------*/
/*
.subpage_title {
  display: flex;
  align-items: center;
}
.subpage_title:before,
.subpage_title:after {
  border-top: 2px solid rgba(255,255,255,0.8);;
  content: "";
  flex-grow: 1;
}
.subpage_title:before {
  margin-right: 1rem;
  
}
.subpage_title:after {
  margin-left: 1rem;
}
*/


/*--------------------------------
section02 TOPの画像と会社名のエリア
---------------------------------*/
/*section全体にかけているもの*/
.section_split {
  display: flex;
  flex-wrap: wrap;
  /*両端に寄せる*/
  justify-content: space-between;
  /*    後で消す 範囲確認用*/
  /*  background-color: rgba(50, 30, 40, 0.1);*/
  position: relative;
}

#section02 {
  margin: 100px auto;
  position: relative;
}

.sec02back {
  position: absolute;
  top: 50px;
  left: 0;
  background-image: url("../image/duct_big01.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 25%;
  height: 800px;
  z-index: -100;
}

.title_section02 {
  font-size: 50px;

}

/*タイトル下の英語テキスト*/
.title_section_en {
  margin: 10px auto 20px auto;
  color: #1E589A;
  font-size: 14px;
  font-family: "游ゴシック体", YuGothic;
}

/*
.title_border{
position:absolute;
border-top:solid 1px #209AC8;
width:70%;
top:-20px;
left:30%;
}
*/
.section02_text {
  width: 40%;
  height: auto;
  padding: 1% 0 0 10%;
}

.section02_img {
  padding-top: 33%;
  width: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../image/ttl_business_description.jpg");
  box-shadow: -15px 15px 0px 0px #209AC8;
  background-color: white;
  transition: 0.3s;

}

.section02_img:hover {
  box-shadow: 0 0 0 0 #209AC8;
  opacity: 0.7;


}


/*-----------------------------------------
duct
------------------------------------------*/
.ductimg {
  content: "";
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  width: 75px;
  height: 75px;
}

.duct_01 {
  background-image: url("../image/duct01.png");
  top: -50px;
  left: -36px;
  transform: rotate(90deg);
}

.air01 {
  position: absolute;
  top: -35px;
  left: -204%;
  border-top: solid 2px #209AC8;
  width: 200%;

  z-index: -10;

}

.duct_02 {
  background-image: url("../image/duct01.png");
  bottom: -100px;
  left: 10px;
  transform: rotate(-90deg);
}

/*縦の線*/
.air_V01 {
  position: absolute;
  top: 25px;
  left: 23px;
  border-left: solid 2px #209AC8;
  height: 100%;
  z-index: -10;
}

.air02 {
  position: absolute;
  bottom: -87px;
  left: 50%;
  transform: translatex(-50%);
  border-top: solid 2px #209AC8;
  width: 82%;
  margin: auto;
  z-index: -10;
}

.duct_03 {
  background-image: url("../image/duct03.png");
  bottom: -150px;
  right: 3px;
}

.duct_05 {
  background-image: url("../image/duct01.png");
  bottom: -130px;
  left: 0;
}

/*--------------------------------
section03 会社概要と設備
---------------------------------*/
#section03 {
  margin-top: 50px;
  margin-bottom: 50px;
  position: relative;
}

/*縦の線*/
.air_V02 {
  position: absolute;
  top: 40px;
  right: 25px;
  border-left: solid 2px #209AC8;
  height: 103%;
  z-index: -10;
}

.sec03back {
  position: absolute;
  top: 0;
  right: 0;
  background-image: url("../image/duct_big02.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 35%;
  height: 450px;
  z-index: -100;
}

.section03_width {
  width: 50%;
}

.section03_width_1 {
  width: 50%;
  padding-right: 5%;
  padding-bottom: 30px;
  /*  margin-right:auto;*/
}

.section03_width_2 {
  width: 50%;
  padding-right: 5%;
  margin-top: 30px;
}

.title_section03 {
  font-size: 35px;
  text-align: center
}

.section03_img {
  display: block;
  padding-top: 60%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../image/ttl_company_overview.jpg");
  box-shadow: -15px 15px 0px 0px #209AC8;
  background-color: white;
  transition: 0.3s;
}

.section03_img:hover {
  box-shadow: 0 0 0 0 #209AC8;
  opacity: 0.7;
}

.section03_img_1 {
  background-image: url("../image/ttl_company_overview.jpg");
}

.section03_img_2 {
  background-image: url("../image/ttl_facility.jpg");
}


/*--------------------------------
section04 求人情報
---------------------------------*/
#section04 {
  margin: 150px auto;
  position: relative;
}

.sec04back {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../image/duct_big04.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 35%;
  height: 450px;
  z-index: -100;
}

.section_split04 {
  display: flex;
  justify-content: space-between;
  ;
  /*    後で消す*/
  /*  background-color: rgba(50, 30, 40, 0.1);*/
  position: relative;
}

.duct_04 {
  background-image: url("../image/duct04.png");
  top: -95px;
  right: 10px;
}

.duct_05 {
  background-image: url("../image/duct01.png");
  top: -50px;
  left: 10px;
}

.duct_06 {
  background-image: url("../image/duct01.png");
  transform: rotate(-90deg);
  bottom: -100px;
  left: 10px;
}

.duct_07 {
  background-image: url("../image/duct05.png");
  bottom: -150px;
  right: 0px;
}

.air03 {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translatex(-50%);
  border-top: solid 2px #209AC8;
  width: 80%;
  z-index: -10;
}

.air04 {
  position: absolute;
  bottom: -88px;
  left: 50%;
  transform: translatex(-50%);
  border-top: solid 2px #209AC8;
  width: 80%;
  z-index: -10;
}

.air05 {
  position: absolute;
  bottom: -140px;
  left: 100%;
  border-top: solid 2px #209AC8;
  width: 86%;
  z-index: -10;
}

.air_V03 {
  position: absolute;
  top: 25px;
  left: 23px;
  border-left: solid 2px #209AC8;
  height: 100%;
  z-index: -10;
}

/*求人情報のテキストエリア*/
.section04_text {
  width: 50%;
  height: auto;
  padding: 20px 5% 0 10%;
  display: flex;
  position: relative;
}

/*求人情報タイトル*/
.title_section04 {
  font-size: 50px;
  writing-mode: vertical-rl;
  width: 50px;
  height: 300px;
  letter-spacing: 1.1rem;
  position: relative;
}

/*求人情報の英語テキスト*/
.subtitle_section04 {
  bottom: 5px;
  left: -10px;
  width: 100px;
  font-size: 14px;
  position: absolute;
  letter-spacing: 0.2rem;
  writing-mode: horizontal-tb;
  font-family: "游ゴシック体", YuGothic;
}

.intext_section04 {
  padding: 20px 0 0 15%;
  line-height: 1.8rem;
}

.section04_img {
  display: block;
  padding-top: 35%;
  width: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("../image/ttl_recruit.jpg");
  position: relative;
  box-shadow: -15px 15px 0px 0px #209AC8;
  transition: 0.3s;
  background-color: white;
}

.section04_img:hover {
  box-shadow: 0 0 0 0 #209AC8;
  opacity: 0.7;
}


/*----------------------------
contactform
------------------------------*/

.contactform {
  max-width: 800px;
  width: 80%;
  height: 200px;
  background-color: #1E589A;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 100px auto;
  font-size: 36px;
  transition: 0.3s;
}

.contactform:hover {
  background-color: #0a3769;
}

.contactout {
  position: relative;
}

.contact_back {
  z-index: -10;
  position: absolute;
  top: -50px;
  right: 0;
  background-image: url("../image/duct_big05.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 35%;
  height: 450px;
  z-index: -100;
}


.contactform_text {
  margin-left: 10px;
  position: relative;
}

.contactform_subtext {
  text-align: center;
  margin-left: 10px;
  font-size: 16px;
}




/*--------------------------------
Footer
---------------------------------*/
#footer {
  padding-top: 20px;
  background-color: #209AC8;
  color: white;
}

.footer_title {
  font-size: 30px;
  font-family: 'Noto Serif JP', serif;
  padding: 20px 0 30px 0;
  text-align: center;
}

.footer_inner {
  display: flex;

}

/*=========================
footer1 左側
==========================*/
.footer1 {
  width: 50%;
  padding: 10px 20px;
}

.footer_addres {
  padding-bottom: 10px;
  ;
}

iframe {
  height: 153px;
  width: 100%;
}


/*=========================
footer2 右側
==========================*/
.footer2 {
  width: 50%;
  padding: 10px;
}

/*-----------------
footerナビゲーション
-------------------*/
.gnav_footer ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.gnav_footer li {
  padding-bottom: 10px;
  width: 50%;
}

/*-----------------
contact_foot 電話番号
------------------*/
.contact_number_foot {
  padding: 10px;
  border: solid 1px white;
}

/*上段------------------*/
.contact_up_foot {
  padding-top: 10px;
  display: flex;
  font-size: 26px;
  justify-content: center;
}

/*アイコン画像*/
.tel_icon_foot {
  width: 65px;
  margin: auto 10px auto 0;
}



/*下段------------------*/
.contact_down_foot {
  display: flex;
  font-size: 12px;
}

.contact_down_foot p {
  margin: 0 auto;
}

.copyright {
  font-size: 12px;
  text-align: center;
  border-top: solid 1px;
  padding: 10px 0 20px 0;
  margin: 0 20px;
}

.returnbtn {
  width: 100%;
  height: 50px;
  position: relative;
  background-color: #333;
  display: block;
  transition: 0.2s;
}

.returnbtn:hover {
  background-color: #08336d;
}

.arrow {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  width: 25px;
  height: 25px;
  border-top: solid 4px #ffffff;
  border-right: solid 4px #ffffff;
  /* 角度をつける（45度） */
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin: auto;
  transition: 0.2s;
}

.bound {
  top: 35%;
  /*
  border-top-color:#1E589A;
  border-right-color:#1E589A;
*/
}

.endless_rall {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}


/*media 中間サイズ用
----------------------------------------------------*/
@media screen and (max-width: 1060px) {
  #header .logo a {
    margin-left: 5px;
  }

  /*ロゴの枠*/
  .logo {
    width: 180px;

  }

  .logo_icon {}

  /*--------------------------------
  globalnavi
  ---------------------------------*/
  .gnav ul li {
    font-size: 13px;
    margin-left: 10px;
  }

  /*--------------------------------
  contact_number
  ---------------------------------*/
  .contact_number {
    width: 250px;
  }

  .contact_up {
    font-size: 14px;
  }

  .tel_icon {
    width: 25px;
    height: 25px;
  }

  .contact_down {
    font-size: 10px;
  }

  .contact_down p {
    margin: 0;
  }

  /*--------------------------------
  section04
  ---------------------------------*/
  .title_section04 {
    font-size: 42px;
    height: 250px;
  }

}








/*------------------------------------------------
media Queries スマホ用
----------------------------------------------------*/
@media screen and (max-width: 768px) {
  .desc_text {
    font-size: 16px;
    text-align: left;
  }

  .block_br {
    display: inline;
    
  }


  #section01 {
    height: 66vh;
  }

  .gnav {
    display: none;
  }

  .contact_number {
    display: none;
  }

  .top_title {
    font-size: 40px;
    margin-top: 40px;
    width: 100%;
    text-align: center;
  }

  .top_text {
    top: 40%;
    width: 100%;
    font-size: 14px;
    line-height: 1.2;
  }

  .subpage_title {
    font-size: 7vw;
  }

  .recruit_btn {
    right: -50px;
    width: 230px;
    height: 70px;
    font-size: 22px;
  }

  .recruit_btn:hover {
    right: 20px;
  }

  /*上部Recuritのテキスト*/
  .recruit_btn:before {
    font-size: 12px;
    top: 25px;
  }

  /*-------------------------------------------*/
  #section01:after {
    height: 200px;
  }

  .section_split {
    flex-direction: column;
  }

  /*-------------------------------------------*/
  .title_section02 {
    font-size: 30px;
  }

  #section02 {
    margin: 60px auto;
  }

  .section02_text {
    width: 100%;
    padding: 0% 8% 5% 15%;
    font-size: 14px;
    line-height: 1.1rem;
  }

  .duct_01 {
    top: -15px;
  }

  .air_V01 {
    position: absolute;
    top: 60px;
    left: 23px;
    border-left: solid 2px #209AC8;
    height: 92%;
  }

  .air02 {
    left: 50%;
    transform: translatex(-50%);
    border-top: solid 2px #209AC8;
    width: 70%;
    margin: auto;
    z-index: -10;
  }

  .section02_img {
    display: block;
    width: 85%;
    padding-top: 60%;
    margin-left: auto;
  }

  /*--------------------------------
  section03 会社概要
  ---------------------------------*/
  #section03 {
    margin-top: 150px;
  }

  .air_V02 {
    top: -5px;
    height: 107%;

  }

  .title_section03 {
    font-size: 30px;
  }

  .section03_width_1 {
    width: 100%;
    padding-right: 20%;
    padding-bottom: 30px;
  }

  .section03_width_2 {
    width: 100%;
    padding-right: 10%;
    margin-top: 30px;
  }

  .section03_img {
    height: 200px;

  }

  /*-------------------------------------------*/
  /*--------------------------------
  section04 求人情報
  ---------------------------------*/
  #section04 {
    margin-bottom: 180px;
  }

  .section_split04 {
    flex-direction: column;
  }

  .air03 {
    width: 70%;
  }

  .air04 {
    width: 70%;
  }

  .air05 {
    width: 70%;
  }

  /*求人情報のテキストエリア*/
  .section04_text {
    width: 100%;
    padding: 0% 8% 2% 15%;
    flex-direction: column;
  }

  /*求人情報タイトル*/
  .title_section04 {
    font-size: 30px;
    writing-mode: horizontal-tb;
    width: 100%;
    height: auto;
    letter-spacing: 0.5rem;
    margin-bottom: 25px;
  }

  /*求人情報の英語テキスト*/
  .subtitle_section04 {
    bottom: -25px;
    left: 0;
    width: 100px;
  }

  .intext_section04 {
    padding: 10px 0 10px 0;
    font-size: 14px;
    line-height: 1.1rem;
  }

  .section04_img {
    width: 85%;
    padding-top: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../image/ttl_recruit.jpg");
    position: relative;
    box-shadow: -15px 15px 0px 0px #209AC8;
    margin-left: auto;
  }

  .contactform {
    height: 100px;
    font-size: 20px;
    max-width: 400px;
    margin: 50px auto
  }

  .contact_icon {
    width: 45px;
  }

  .contactform_subtext {
    font-size: 11px;
  }

  /*-----------------
  footer
  ------------------*/
  .footer_inner {
    flex-direction: column;
  }

  .footer_title {
    padding: 5px;
  }

  .footer_addres {
    text-align: center;
  }

  .footer1 {
    width: 100%;
  }

  .footer2 {
    width: 100%;
    padding: 0 20px 20px 20px;
  }

  /*-----------------
  footerナビゲーション
  -------------------*/
  .gnav_footer ul {
    text-align: center
  }
  
  .tel_icon_foot {
    width: 50px;
  }
  .contact_up_foot {
    font-size: 24px;
  }

  
  
}

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

  .air02,
  .air03,
  .air04 {
    width: 55%;
  }

}