/*
Theme Name: エンジニア転職ナビ
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

.star5_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC;
    font-size: 20px;
}

.star5_rating:before, .star5_rating:after{
    content: '★★★★★';
}

.star5_rating:after{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #d66d15;
}

.star5_rating[data-rate="5.0"]:after { width: 100%; } /* 星5.0 */
.star5_rating[data-rate="4.9"]:after { width: 98%; } /* 星4.9 */
.star5_rating[data-rate="4.8"]:after { width: 96%; } /* 星4.8 */
.star5_rating[data-rate="4.7"]:after { width: 94%; } /* 星4.7 */
.star5_rating[data-rate="4.6"]:after { width: 92%; } /* 星4.6 */
.star5_rating[data-rate="4.5"]:after { width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4.4"]:after { width: 88%; } /* 星4.4 */
.star5_rating[data-rate="4.3"]:after { width: 86%; } /* 星4.3 */
.star5_rating[data-rate="4.2"]:after { width: 84%; } /* 星4.2 */
.star5_rating[data-rate="4.1"]:after { width: 82%; } /* 星4.1 */
.star5_rating[data-rate="4.0"]:after { width: 80%; } /* 星4.0 */
.star5_rating[data-rate="3.9"]:after { width: 78%; } /* 星3.9 */
.star5_rating[data-rate="3.8"]:after { width: 76%; } /* 星3.8 */
.star5_rating[data-rate="3.7"]:after { width: 74%; } /* 星3.7 */
.star5_rating[data-rate="3.6"]:after { width: 72%; } /* 星3.6 */
.star5_rating[data-rate="3.5"]:after { width: 70%; } /* 星3.5 */
.star5_rating[data-rate="3.4"]:after { width: 68%; } /* 星3.4 */
.star5_rating[data-rate="3.3"]:after { width: 66%; } /* 星3.3 */
.star5_rating[data-rate="3.2"]:after { width: 64%; } /* 星3.2 */
.star5_rating[data-rate="3.1"]:after { width: 62%; } /* 星3.1 */
.star5_rating[data-rate="3.0"]:after { width: 60%; } /* 星3.0 */
.star5_rating[data-rate="2.9"]:after { width: 58%; } /* 星2.9 */
.star5_rating[data-rate="2.8"]:after { width: 56%; } /* 星2.8 */
.star5_rating[data-rate="2.7"]:after { width: 54%; } /* 星2.7 */
.star5_rating[data-rate="2.6"]:after { width: 52%; } /* 星2.6 */
.star5_rating[data-rate="2.5"]:after { width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2.4"]:after { width: 48%; } /* 星2.4 */
.star5_rating[data-rate="2.3"]:after { width: 46%; } /* 星2.3 */
.star5_rating[data-rate="2.2"]:after { width: 44%; } /* 星2.2 */
.star5_rating[data-rate="2.1"]:after { width: 42%; } /* 星2.1 */
.star5_rating[data-rate="2.0"]:after { width: 40%; } /* 星2.0 */
.star5_rating[data-rate="1.9"]:after { width: 38%; } /* 星1.9 */
.star5_rating[data-rate="1.8"]:after { width: 36%; } /* 星1.8 */
.star5_rating[data-rate="1.7"]:after { width: 34%; } /* 星1.7 */
.star5_rating[data-rate="1.6"]:after { width: 32%; } /* 星1.6 */
.star5_rating[data-rate="1.5"]:after { width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1.4"]:after { width: 28%; } /* 星1.4 */
.star5_rating[data-rate="1.3"]:after { width: 26%; } /* 星1.3 */
.star5_rating[data-rate="1.2"]:after { width: 24%; } /* 星1.2 */
.star5_rating[data-rate="1.1"]:after { width: 22%; } /* 星1.1 */
.star5_rating[data-rate="1.0"]:after { width: 20%; } /* 星1.0 */
.star5_rating[data-rate="0.9"]:after { width: 18%; } /* 星0.9 */
.star5_rating[data-rate="0.8"]:after { width: 16%; } /* 星0.8 */
.star5_rating[data-rate="0.7"]:after { width: 14%; } /* 星0.7 */
.star5_rating[data-rate="0.6"]:after { width: 12%; } /* 星0.6 */
.star5_rating[data-rate="0.5"]:after { width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0.4"]:after { width: 8%; } /* 星0.4 */
.star5_rating[data-rate="0.3"]:after { width: 6%; } /* 星0.3 */
.star5_rating[data-rate="0.2"]:after { width: 4%; } /* 星0.2 */
.star5_rating[data-rate="0.1"]:after { width: 2%; } /* 星0.1 */
.star5_rating[data-rate="0.0"]:after { width: 0%; } /* 星0.0 */

.agent .title .review .text {
  color: #d66d15;
  padding: 0 0 0 5px;
}

span.red {
	color:#D61533;
}

.h1-title.error {
  text-align: center;
  margin: 50px auto;
}

.h1-title.error .catch {
  font-size: 40px;
  font-weight: bold;
  color: #333;
  line-height: 1;
  margin: 0 auto 25px;
}

.h1-title.error h1 {
  font-size: 20px;
}


div.popup {
	display:none;
  position: fixed;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.7);
  top: 0;
  left: 0;
  z-index: 1001;
}

div.popup .innner {
  background: #fff;
  text-align: center;
  max-width: 600px;
  width: 95%;
  padding: 50px;
  border-radius: 10px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 25%;
}

div.popup .innner img {
  max-width: 50px;
  display: block;
  margin: 0 auto 25px;
}

div.popup .innner p.title {
  font-weight: bold;
  font-size: 18px;
  margin: 0 auto 15px;
  color: #013765;
}

div.popup .innner p.text {
  font-size: 14px;
}

div.popup .innner ul {
  letter-spacing: -7px;
}

div.popup .innner ul li {
  width: 100%;
  max-width: 200px;
  letter-spacing: normal;
  display: inline-block;
}

div.popup .innner ul li a {
  display: block;
  color: #fff;
  background: #013765;
  font-size: 14px;
  width: 100%;
  cursor: pointer;
  padding: 15px 0;
  border-radius: 30px;
}

div.popup .innner ul li span {
  display: block;
  color: #fff;
  background: #aaa;
  font-size: 14px;
  width: 100%;
  margin: 0 0 0 25px;
  cursor: pointer;
  padding: 15px 0;
  border-radius: 30px;
	transition: .3s;
}

div.popup .innner ul li span:hover {
	opacity: .7;
}

div.popup .innner .close {
  position: absolute;
  width: 20px;
  cursor: pointer;
  top: 30px;
  right: 30px;
}

@media (max-width: 570px) {
	
	div.popup .innner ul li {
	  display: block;
	  max-width: 250px;
	  margin: 10px auto;
	}
	
	div.popup .innner ul li span {
	  margin: 0 auto;
	}
	
	div.popup .innner {
	  padding: 5%;
	  top: 15%;
	}
	
}

.main.main_img .inner {
  max-width: 1400px;
}

.main.main_img h1 {
	font-family: "Noto Sans JP";
	font-weight: 800;
  position: absolute;
  top: 5%;
  left: 6%;
  font-size: 80px;
  color: #ffe000;
  text-align: center;
  text-shadow: 4px 4px 0 #003867, -1px 1px 0 #003867, 1px -1px 0 #003867, -2px -1px 0 #003867;
}

.main.main_img h1 small {
  color: #fff;
  font-size: 65px;
}

.main.main_img h1 span {
  display: block;
  color: #fff;
  font-size: 40px;
  background: #003867;
  border-radius: 40px;
  max-width: 750px;
  line-height: 1.9;
  line-height: 1.9;
}

.main.main_img ul {
  position: absolute;
  top: 60%;
  left: 6%;
  width: 730px;
  letter-spacing: -7px;
}

.main.main_img ul li {
  letter-spacing: normal;
  margin: 0 0 0 15px;
  display: inline-block;
  background: #fff;
  width: calc(700px / 3);
  border: 3px solid #003867;
  border-radius: 10px;
  text-align: center;
  color: #195fcb;
  font-size: 35px;
  padding: 15px 0;
	font-family: "Noto Sans JP";
	font-weight: 800;
}

.main.main_img ul li:first-child {
  margin: 0;
}

small {
    font-size: 0.7em;
}

@media (max-width: 1420px) {
	
	.main.main_img h1 {
	  left: 0;
	}

	.main.main_img ul {
	  left: 0;
	}
	
}

@media (max-width: 1320px) {
	
	.main.main_img h1 {
	  font-size: 5vw;
	}

	.main.main_img h1 small {
	  font-size: 3.5vw;
	}

	.main.main_img h1 span {
	  font-size: 3vw;
	}

	.main.main_img ul {
	  width: 550px;
	}

	.main.main_img ul li {
	  font-size: 2vw;
	  width: calc(520px / 3);
	}
	
}

@media (max-width: 750px) {
	
	.main.main_img h1 {
	  font-size: 9vw;
	  left: 5%;
	  right: 5%;
	}

	.main.main_img h1 small {
	  font-size: 6vw;
	}

	.main.main_img h1 span {
	  font-size: 5vw;
	}

	.main.main_img ul {
	  width: 90%;
	  left: 5%;
	  top: auto;
	  bottom: 7%;
	}

	.main.main_img ul li {
	  width: 32%;
	  margin: 0 0 0 2%;
	  font-size: 4vw;
	}
	
}