@charset "utf-8";

html {
  scroll-behavior: smooth;
  scroll-padding-top: 85px;
}

body,html {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  box-sizing: border-box;
}
input,iframe,textarea {
  vertical-align: top;
  border: 0;
  max-width: 100%;
}
a {
  text-decoration: none;
  color: #000;
  word-break: break-all;
}
a, a:hover ,a img {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all  0.3s ease;
}
a:hover img, a:hover {
  opacity: 0.8;
}
a:visited {
  text-decoration: none;
}
ul {
  list-style-type: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

h1 {
  font-family: 'Noto Sans JP';
  font-weight: 700;
}
h2,
#principles h3,
#service h3,
#news .date {
  font-family: 'Noto Sans JP', sans-serif;
}
h2 {
  font-weight: bold;
}
p {
  text-align: left;
  font-size: 1.125rem;
  line-height: 180%;
}
.bg-blue {
  background-color: #EDF4F5;
}
.bg-black {
  background-color: #2A302F;
}
.border-black {
  border-color: #2A302F;
}


/* MENU
*************************************************** */
.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
}

/* side menu */
.side-menu {
  position: fixed;
  top: 0;
  right: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 90px;
  text-align: left;
  background: #636363;
  z-index: 3;
  display: none;
  opacity: .96;
}
.side-open .side-menu {
  display: block;
}
.side-menu__ul {
  width: 100%;
  height: 100%;
  display: block;
  overflow: auto;
  text-align: left;
}
.side-menu__ul > li > a {
  display: block;
  padding: 10px 0 10px 20px;
  color: #fff;
  font-size: 16px;
  margin: 0;
  letter-spacing: 0.1em;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
}
.side-menu__ul > li a:hover {
  background: #000;
  color: #fff;
}
/* ellipsis btn */
.side-menu-btn {
  position: fixed;
  top: 0px;
  right: 0;
  margin: auto;
  width: 86px;
  height: 86px;
  padding: 5px;
  cursor: pointer;
  z-index: 40;
  background: #fff;
}
.ellipsis-v {
  position: relative;
  display: block;
  cursor: pointer;
  width: 40px;
  height: 40px;
  margin: 18px auto;
}
.ellipsis-v .point {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  width: 40px;
  height: 4px;
  margin: auto;
  background: #2A302F;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.ellipsis-v .point.top {
  top: 0;
}
.ellipsis-v .point.mid {
  top: 0;
  bottom: 0;
}
.ellipsis-v .point.bot {
  bottom: 0;
}
.side-menu-btn:hover .top {
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  transform: translateY(-2px);
}
.side-menu-btn:hover .bot {
  -webkit-transform: translateY(2px);
  -ms-transform: translateY(2px);
  transform: translateY(2px);
}
.side-open .side-menu-btn:hover .top,
.side-open .top {
  width: 54px;
  height: 3px;
  background: #2A302F;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.side-open .mid {
  opacity: 0;
}
.side-open .side-menu-btn:hover .bot,
.side-open .bot {
  width: 54px;
  height: 3px;
  background: #2A302F;
  -webkit-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  transform-origin: left bottom;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.side-open .side-menu-btn:hover .bot,
.side-open .side-menu-btn:hover .top {
  background: #2A302F;
}
@media screen and (max-width: 620px) {
  .ellipsis-v {
    margin: 15px auto;
  }
  .ellipsis-v .point {
    width: 32px;
  }
  .side-open .side-menu-btn:hover .top,
  .side-open .top,
  .side-open .side-menu-btn:hover .bot,
  .side-open .bot {
    width: 40px;
  }
  .ellipsis-v .point.top {
    top: 5px;
  }
  .ellipsis-v .point.bot {
    bottom: 5px;
  }
  .side-menu-btn {
    background: transparent;
  }
  .side-menu-btn {
    width: 80px;
    height: 80px;
  }
  header {
    height: 80px;
  }
  header h1 {
    left: 3%;
  }
  header h1 {
    width: 60px;
    height: 60px;
  }
}



/* 
 * recruit page
*************************************************** */

section {
  padding: 85px 0;
}

.sec-container {
  width: 80%;
  max-width: 1040px;
  margin: 0 auto;
}

@media screen and (max-width: 727px) {
  .sec-container {
    width: 88%;
  }
}