@charset "UTF-8";

/* ************************************************ 
*	トップリードテキスト
* ************************************************ */
.topleadtext-box {
  margin: 0;
  padding: 30px 0 0 0;
}
.topleadtext-box h2{
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 33px;
  font-weight:normal;
  font-family: 'Sawarabi Mincho';
  color: #1ba135;
}
.topleadtext-box p{
  margin: 0 0 0 0;
  padding: 0;
  text-align: center;
  font-size: 18px;
  font-weight:normal;
  font-family: 'Sawarabi Mincho';
  line-height: 200%;
}

.topleadtext-box p::after{
  position:relative;
  top: 5px;
  left: -5px;
  content:"";
  display:inline-block;
  width:25px;
  height:25px;
  background:url("https://web.archive.org/web/20220221124655im_/https://www.hokushinn-tsuushou.com/wp/wp-content/themes/hokushin/images/leaf.svg") no-repeat;
  background-size:contain;
}

/* ************************************************ 
*	トップ各種サービス
* ************************************************ */
.topservice_bg {
  background-color: #fff;
  width: 100%;
  height:auto;
  padding: 70px 0px;
  margin: 0;
}
.topservice-box{
  margin: 0 0 45px 0;
  padding: 0;
  position: relative;
  z-index:0;
  overflow: hidden;
}
.topservice-box a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,0.3);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
}
.topservice-box a:hover:before {
  background-color: rgba(255,255,255,0);
}
.topservice-box a img {
	-webkit-transition:0.2s ease-in-out;
	-moz-transition:0.2s ease-in-out;
	-ms-transition:0.2s ease-in-out;
	-o-transition:0.2s ease-in-out;
	transition:0.2s ease-in-out;
}

.topservice-box a:hover img {
	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	-ms-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
}

.topservice-title {
  font-size: 24px;
  font-weight:normal;
  letter-spacing: 0.05em;
  padding: 0;
  margin: 0;
  color: #fff;
  text-align:center;
  width:100%;
  position: absolute;
  top: 30%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index:999;
}
.topservice-text {
  font-size: 18px;
  font-weight:normal;
  padding: 0;
  margin: auto;
  color: #fff;
  text-align:center;
  width:100%;
  position: absolute;
  top: 65%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index:999;
}
.topservice-arrow {
  width: 7%;
  position: absolute;
  bottom: 6%;
  right: 3%;
  z-index:999;
}
.topservice-arrow img{
  vertical-align: bottom;
}

/* ************************************************ 
*	トップfacebookなどのエリア
* ************************************************ */
.topstripe-block{
  margin: 0 0 0 0;
  padding: 100px 0 100px 0;
  width: 100%;
  height: auto;
  overflow: hidden;
  background: linear-gradient(-45deg,#ececec 25%, #fff 25%,#fff 50%, #ececec 50%,#ececec 75%, #fff 75%,#fff);
  background-size: 18px 18px;
}
.fb-page{
  width: 43%;
  float: left;
}
.recruitblog-box{
  width: 100%;
  position: relative;
  z-index:0;
  margin: 0 auto;
}
@media screen and (min-width: 920px) {
  .recruitblog-box{
    width: 53%;
    margin: 0 auto;
  }
}
.toprecruit-box {
  height: 168px;
  margin: 0 0 40px 0;
  padding: 0;
  position: relative;
  z-index:0;
}

.toprecruit-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.toprecruit-box a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,0.3);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
}
.toprecruit-box a:hover:before {
  background-color: rgba(255,255,255,0);
}
.toprecruit-title {
  font-size: 24px;
  font-weight:normal;
  letter-spacing: 0.05em;
  padding: 0;
  margin: 0;
  color: #fff;
  text-align:center;
  width:100%;
  position: absolute;
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index:999;
}
.toprecruit-text {
  font-size: 18px;
  font-weight:normal;
  padding: 0;
  margin: auto;
  color: #fff;
  text-align:center;
  width:100%;
  position: absolute;
  top: 65%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index:999;
}

.topblog-box-pcb,
.topblog-box-iron {
  margin: 0 0 30px 0;
  padding: 0;
}
.topyoutube-box {
  margin: 0;
  padding: 0;
}
.topblog-box-pcb img,
.topblog-box-iron img,
.topyoutube-box img {
  width: 75px;
  margin: 0 0 10px 0;
}
.topblog-box-pcb a,
.topblog-box-iron a,
.topyoutube-box a {
  margin: 0 auto;
  padding: 30px 0;
  text-align: center;
  font-size: 18px;
  color: #fff;
  display: block;
  border-radius: 10px; /* CSS3 */
  -webkit-border-radius: 10px; /* Firefox */
  -moz-border-radius: 10px; /* Safari,Chrome */
}
.topblog-box-pcb a:hover,
.topblog-box-iron a:hover,
.topyoutube-box a:hover {
  background-color: #ccc;
  border-radius: 10px; /* CSS3 */
  -webkit-border-radius: 10px; /* Firefox */
  -moz-border-radius: 10px; /* Safari,Chrome */
}
.topblog-box-pcb a {
  background-color: #00a0c6;
}
.topblog-box-iron a {
  background-color: #a9775d;
}
.topyoutube-box a {
  background-color: #e40012;
}

.movie {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  display: block;
}
@media screen and (min-width: 920px) {
  .movie {
    max-width: 1000px;
  }
}