@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Questrial&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Tangerine&display=swap");

@import url("keyframes.css");


body {
  margin: 0px;
  padding: 0px;
  color: #333; 
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; 
  font-size: 16px; 
  line-height: 2; 
  background: #fafafa; 
  -webkit-text-size-adjust: none;
}
h1,
h2,
h3,
p,
ul,
li,
dl,
dt,
dd {
  margin: 0px;
  padding: 0px;
  font-size: 100%;
  font-weight: normal;
}
ul {
  list-style-type: none;
}
img {
  border: none;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
table {
  border-collapse: collapse;
  font-size: 100%;
  border-spacing: 0;
}

a {
  color: #333; 
  transition: 0.2s; 
}
a:hover {
  color: #d07d7a; 
  text-decoration: none; 
}

.inner {
  max-width: 1400px; 
  margin: 0 auto;
  padding-left: 2%;
  padding-right: 2%;
}

header {
  position: relative;
  padding: 20px; 
}

.home header {
  padding: 0px; 
}

header #logo {
  width: 200px; 
  margin: 0 auto; 
}

.home header #logo {
  display: none; 
}

#menubar {
  position: relative;
  z-index: 10;
  text-align: center; 
  background: #fff; 
  border-top: 1px solid #ccc; 
  border-bottom: 1px solid #ccc; 
  font-family: "Questrial", sans-serif; 
  height: 105px; 
}

#menubar ul li {
  float: left; 
  width: 25%; 
  font-size: 20px; 
}
#menubar ul li a {
  text-decoration: none;
  display: block;
  height: 85px; 
  padding-top: 20px; 
}

#menubar ul li span {
  display: block;
  font-size: 10px; 
  color: #999; 
  letter-spacing: 0.2em; 
}

#menubar-s {
  display: none;
}


#menubar_hdr {
  display: none;
}

#contents {
  padding: 100px 0 50px; 
  position: relative;
  animation-name: opa2; 
  animation-duration: 0.5s; 
  animation-delay: 0.5s; 
  animation-fill-mode: both;
}

#contents h2 {
  clear: both;
  padding-top: 50px;
  margin-bottom: 50px;
  font-size: 300%; 
  text-align: center; 
  letter-spacing: 0.2em; 
}

#contents h2 span {
  display: block;
  font-size: 30%; 
  color: #999; 
}

#contents h3 {
  clear: both;
  margin-bottom: 30px;
  font-size: 150%; 
  border-bottom: 1px solid #ccc; 
  padding-left: 3%; 
  letter-spacing: 0.1em; 
}

#contents p {
  padding: 0 3% 30px; 
}
#contents h3 + p {
  margin-top: -5px;
}
#contents section + section {
  margin-top: 100px;
}

.career-wrap{
  width: 94%;
  margin: 0 auto;
}

footer {
  clear: both;
  position: relative;
  z-index: 1;
  font-size: 80%; 
  background: #222; 
  color: #ccc; 
  text-align: center;
}

#copyright {
  clear: both;
  text-align: center;
  background: #000; 
  padding: 20px 0; 
}

.ta1 caption {
  border: 1px solid #ccc; 
  border-bottom: none; 
  text-align: left; 
  background: #e6e6e6; 
  font-weight: bold; 
  padding: 10px; 
}

.ta1 {
  width: 94%;
  table-layout: fixed;
  margin: 0 3% 30px;
  background: #fff; 
}
.ta1,
.ta1 td,
.ta1 th {
  border: 1px solid #ccc; 
  padding: 10px; 
  word-break: break-all;
}

.ta1 th {
  width: 150px; 
  text-align: center; 
  font-weight: normal;
}

body .nav-fix-pos-pagetop a {
  display: none;
}

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

  body {
    font-size: 2vw; 
  }
  
  header {
    border-bottom: 1px solid #ccc;
  }
  
  .home header {
    border: none;
  }

  #menubar-s {
    overflow: auto;
    height: 100%;
    position: fixed;
    z-index: 100;
    top: 0px;
    width: 100%;
    background: rgba(0, 0, 0, 0.8); 
    border-top: 1px solid #fff; 
    animation-name: frame1; 
    animation-duration: 0.5s; 
    animation-fill-mode: both; 
    font-size: 16px; 
  }
  #menubar-s li span {
    margin-left: 20px;
    font-size: 80%;
  }
  
  #menubar-s ul li a {
    display: block;
    text-decoration: none;
    padding: 30px 20px 30px 60px;
    border-bottom: 1px solid #fff; 
    color: #fff; 
  }
  
  #menubar {
    display: none;
  }

  #menubar_hdr {
    display: block;
    position: fixed;
    z-index: 100;
    top: 20px; 
    right: 2%; 
  }
  
  #menubar_hdr.close {
    width: 50px; 
    height: 50px; 
    border: 1px solid #fff;
  }
  
  #menubar_hdr.close {
    background: #d07d7a url(../images/icon_menu.png) no-repeat center top/50px; 
  }
  
  #contents {
    padding: 50px 0; 
  }
  
  #contents h2 {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 3vw;
  }

  #contents h2 {
    margin-bottom: 30px;
  }
  
  #contents h3 {
    margin-bottom: 20px;
  }
  #contents section + section {
    margin-top: 30px;
  }

  .ta1,
  .ta1 td,
  .ta1 th {
    padding: 5px; 
  }
  
  .ta1 th {
    width: 100px;
  }
}

#menubar-s {
  display: block; 
}
.hidden {
  display: none; 
}
.service-wrap {
  text-align: center;
  margin: 0 auto;
}
.service-wrap a:hover {
  opacity: 0.8;
}
.service-wrap img {
  width: 90%;
}
.career-img{
	width: 20%;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 10px;
}