/*========== Common ==========*/
.pc-on {
  display: block;
}
.tb-on {
  display: none;
}
.sp-on {
  display: none;
}
/*========== header ==========*/
.header {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 0 0;
}
.top-logo {
  float: left;
  width: 300px;
}
/*========== gloval_navi ==========*/
.top-navi {
  float: right;
  margin-top: 30px;
}
.top-navi li {
  display: inline-block;
  padding: 0 10px;
}
.top-navi li a:hover {
  color: #133eaf;
}
/*========== slider ==========*/
.wrap-top {
  background-image: url("../images/top-header.jpg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  height: auto;
  width: 100%;
  margin-bottom: 20px;
}
.animation {
  display: flex;
  justify-content: center;
  margin-top: 0px;
  width: 100%;
}
.animation .anm_mod {
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  transition: all 1s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 0px;
  width: 100%;
}
.animation .anm_mod.left {
  transform: translate3d(-100%, 0, 0);
}
.animation .anm_mod.right {
  transform: translate3d(100%, 0, 0);
  margin-top: 30px;
}
.animation .anm_mod.delay {
  transition: all 1s ease;
}
.animation .anm_mod.fast {
  transition: all 1s ease;
}
.animation .anm_mod.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.animation img {
  width: 100%;
}
/*========== Container ==========*/
.container {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.container-inner {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 0;
}
.main-tittle {
  background-color: #133eaf;
  padding: 10px;
  text-align: center;
  color: #fff;
  font-size: 22px;
}
/*========== FADE-IN ==========*/
.fadein {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}
.fadein.move {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: 1s;
}
/*========== top-info ==========*/
.top-info-box {
  width: 100%;
  max-width: 810px;
  margin: 0 auto;
}
.top-info-01 {
  font-size: 18px;
  line-height: 1.7;
  padding-bottom: 10px;
}
/*----- Notice -----*/
.notice-01 {
  padding-left: 10px;
  font-size: 20px;
  font-family: Georgia, "Times New Roman", Times, "serif";
}
.notice-area {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.notice-box {
  width: 100%;
  max-width: 658px;
  height: 160px;
  overflow: auto;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px 20px;
}
.notice-03 {
  margin-bottom: 5px;
}
.notice-04 {
  padding-left: 10px;
}
.notice-04 a:hover {
  color: #133eaf;
  font-weight: 600;
}
.notice-05 {
  text-align: right;
  margin: 10px 10px 0 0;
}
.notice-05 a:hover {
  color: #133eaf;
}
/*========== top-excellent ==========*/
.top-excellent-box {
  width: 100%;
  max-width: 830px;
  margin: 0 auto 0;
}
.top-excellent-01 {
  width: 400px;
  float: left;
  margin: 0 30px 0 0;
}
.top-excellent-02 {
  width: 400px;
  float: left;
  margin: 0 0 20px;
}
.top-excellent-03 {
  text-align: right;
}
.top-excellent-03 a:hover {
  color: #133eaf;
  font-weight: 600;
}
/*========== category-box ==========*/
.category-box {
  width: 100%;
  max-width: 931px;
  margin: 0 auto;
}
.icon {
  background-color: #ddebfb;
  margin: 0 20px 20px;
  width: 268px;
  float: left;
  padding: 20px 0;
  text-align: center;
  border: 1px solid #2989F7;
  border-radius: 20px;
}
.icon img {
  width: 100px;
  text-align: center;
  margin-bottom: 10px;
}
.icon a:hover {
  display: block;
  transform: scale(1.1); /*画像の拡大率*/
  transition-duration: 0.3s; /*変化に掛かる時間*/
}
/*========== foot-bana ==========*/
.footer-bana {
  width: 100%;
  max-width: 952px;
  margin: 0 auto 30px;
}
.keibi-bana {
  width: 218px;
  line-height: 50px;
  float: left;
  text-align: center;
  margin: 0 10px;
}
.keibi-bana a {
  display: block;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 18px;
}
.keibi-bana a:hover {
  color: #4b4b4b;
  background-color: #ddebfb;
}
/*========== hrsm-bana ==========*/
.hrsm-bana {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}
.hrsm {
  width: 220px;
  float: left;
  margin: 0 10px;
}
/*========== footer ==========*/
footer {
  width: 94%;
  max-width: 1000px;
  margin: 0 auto 30px;
}
.foot-navi {
  text-align: center;
}
.foot-navi li {
  display: inline;
  margin: 0 10px;
  line-height: 2;
}
.foot-navi li a:hover {
  color: #133eaf;
}
.copyright {
  font-size: 14px;
  text-align: center;
  padding: 50px 0 20px 0;
}
.foot-logo {
  text-align: center;
  margin-bottom: 50px;
}
/*========== page-top ==========*/
#page-top {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: -50px;
  background: #fff;
  opacity: 0.6;
  border: 1px solid #133eaf;
  border-radius: 50%;
  margin-right: 20px;
  z-index: 20;
}
#page-top a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page-top a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #133eaf;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -15px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}