@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text&family=EB+Garamond&family=Noto+Serif+JP:wght@400;600&family=Work+Sans&display=swap');

/* ----------- 1200px以上 ------------*/
body{
  /*background-color: #eeece7;
  font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
  letter-spacing: 0.1rem;*/
  font-family: "Times New Roman", 'Crimson Text', serif;
  letter-spacing: 0.04em;
  color: #707070;
}
.pc{
  display: block;
}
.sp{
  display: none;
}

/*========= メインビジュアルのCSS ===============*/
#slider {
    width: 100%;
    height: 100vh !important;
    position: relative;
}
div#slider p.top_intro{
  position: absolute;
  left: 10%;
  bottom: 10%;
  font-size: 2em;
  color: #fff;
  line-height: 170%;
}
div#slider p.top_intro small{
  font-size: 1.5rem;
}
div#slider p.top_intro span{
  font-size: 2.8em;
}


.wrapper{
  position: relative;
  line-height: 200%;
}

/*========= スクロール途中からヘッダーの高さが小さくなるためのCSS ===============*/
#header{
    /*はじめの高さを設定*/
  height: 120px;
  width:100%;
   /*以下はレイアウトのためのCSS*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  z-index: 1;
  position: fixed;
}

/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
#header.HeightMin{
  position: fixed;
    z-index: 999;/*最前面へ*/
  height:70px;
  animation: DownAnime 0.5s forwards;
  background:rgba(238, 236, 231, 0.9);
}


/*========= レイアウトのためのCSS ===============*/

p{
  margin-top:20px;  
}


nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
}

nav ul li a{
  display: block;
  text-decoration: none;
  color: #fff;
  padding:10px 25px;
  transition:all 0.3s;
}

header.HeightMin nav ul li a{
  color: #7c7c7c;
}


/* ------------- レイアウト・デザイン ---------------*/
div.yoyaku_btm{
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9;
}

div.head_logo a{
  display: flex;
  text-decoration: none;
  color: #fff;
}
header.HeightMin div.head_logo a{
  color: #7c7c7c;
}
div.head_logo img{
  height: 55px;
  margin: 0 20px;
}
div.head_logo img.headimg_gr{
  display: none;
}
header.HeightMin div.head_logo img.headimg_wh{
  display: none;
}
header.HeightMin div.head_logo img.headimg_gr{
  display: block;
}
div.head_logo p{
  text-align: left;
  width: 200px;
  font-size: 0.9em;
  margin: 10px 0 0 0;
}

div.head_logo p span{
  display: block;
  text-align: left;
}

footer{
  overflow: hidden;
}

nav#g-nav{
  width: 70%;
}

ul#g-navi li{
  flex: 1;
}
ul#g-navi li a span{
  display: block;
  font-size: 0.7rem;
  border-top: 1px solid #cfc4ba;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

div.contentarea{
  width: 1200px;
  margin: 120px auto;
}
div.contentarea h2{
  font-size: 2.2em;
}
div.contentarea h2 span{
  display: block;
  font-size: 0.5em;
  margin-top: 5px;
  color: #1c74b4;
}
div.messagecontent{
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
}
div.messagecontent img{
  width: 100%;
}
div.concept_b{
  position: relative;
}
div.concept_b img{
  margin: 0 calc(50% - 50vw);
  width: 80vw;
}
div.concept_b ul{
  position: absolute;
  bottom: 30px;
  bottom: -80px;
}
div.concept_b ul li{
margin-left: ;
}
div.concept_b ul{
  bottom: -40px;
    right: -70px;
    width: 500px;
    background: rgba(120, 132, 141, 0.7);
    padding: 5%;
    color: #fff;
}
div.imagescontent{
  margin-top: 60px;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  display: flex;
}
div.imagescontent img{
  width: 35%;
}
div.human_block h3{
  margin: 0 0 20px;
  font-weight: bold;
}
div.human_block ul{
  display: block;
  padding-left: 1em;
  width: 100%;
  overflow: hidden;
}
div.human_block p{
  width: 100%;
  margin-bottom: 50px;
}
div.human_block img{
  width: 40%;
  float: right;
}
div.humancontent{
  overflow: hidden;
}
div.recruitcontent table tr th,
div.recruitcontent table tr td{
  border: 1px solid #ccc;
  padding: 10px;
}
div.recruitcontent table tr th{
  width: 25%;
}

div.dent_uketuke{
  margin-top: 100px;
}
div.position_btm p{
  background-color: rgba(255, 255, 255, 0.5);
  padding: 10px;
  width: 100%;
  text-shadow: 1px 1px 1px #fff, 0 0 0.2em #fff, 0 0 0.2em #fff;
}
div.message_img img{
  width: 75%;
  margin-left: 10%;
}

/* ----------- フッターエリア --------------*/
div.footer_contents{
  max-width: 1200px;
  margin:20px auto;
  overflow: hidden;
}
div.footer_contents img{
  width: 30%;
}
div.foot_right_area{
  width: 50%;
  float: right;
}

p.footer_copy_right{
  text-align: center;
  font-size: 0.9rem;
  padding: 10px 0;
}



div.foot_right_area table tr th,
div.foot_right_area table tr td{
  border: 1px solid #707070;
  text-align: center;
}
div.spmenubtm{
  display: none;
}