@charset "utf-8";
#Container {}
header h1 {
  margin: 5px 0 0;
  padding: 0;
  height: 30px;
  line-height: 30px;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
}
#mobile_logo {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
  text-align: center;
}
#Container h2 {
  width: 100%;
  margin: 0 auto;
  line-height: 1.6em;
  padding: 10px 5%;
  background: #FFF9F4;
  font-size: 14px;
  font-weight: 400;
  text-align: left
}
.areaSP {
  width: 100%;
  margin: 0 auto 10px;
  padding: 0 !important;
}
.areaSP h3 {
  width: 100%;
  height: 40px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid #ff0808
}
.areaSP h3 span {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  color: #fff;
  margin-right: 15px;
  background: #ff0808;
  border-top-left-radius: 5px
}
.areaSP h3 span img {
  width: 64%;
  height: auto;
}
.prefSP {
  width: 100%;
  margin: 0 auto 10px;
  padding: 0 !important;
}
.prefSP h3 {
  width: 100%;
  height: 40px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid #0033ff
}
.prefSP h3 span {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  color: #fff;
  margin-right: 15px;
  background: #0033ff;
  border-top-left-radius: 5px
}
.prefSP h3 span img {
  width: 64%;
  height: auto;
}
#counter {
  width: 100%;
  text-align: center;
}
#counter ul li:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.7rem;
}
#counter ul li:nth-child(2) img {
  height: 8px
}
#jobLink {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  margin: 20px auto
}
#jobLink span {
  font-size: 0.9rem;
  font-weight: 700;
}
#social {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.9rem;
}
#social .social_frase {
  font-size: 0.75rem;
  color: #0000FF;
  margin-top: 5px;
}
#social .social {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  margin: 10px;
}
#exit {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 10px;
}
#exit .exit_mark {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  margin-top: -2px
}
#exit .exit_frase {
  display: flex;
  flex-direction: column;
  align-items: center;
  m
}
#exit .exit_frase a {
  font-size: 0.9rem;
  margin-left: -37px;
}
footer {
  width: 100%;
  margin: 20px 0 0;
}
footer ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 2px 0;
}
footer ul li {
  width: calc(50% - 2px);
  text-align: center;
  background: #FFFCF4;
  padding-top: 8px;
  padding-bottom: 8px;
  border: 1px solid
}
footer ul li:last-child {
  width: 60%;
  background: #D9062B;
  margin-top: 10px;
}
footer ul li:last-child a {
  display: block;
  color: #fff;
}
footer ul li:last-child:hover, footer ul li:last-child:active {
  background: #F56567;
}
footer ul li a {
  text-decoration: none;
  color: #333;
}
footer .copyright {
  margin-top: 10px;
  text-align: center;
  font-size: 0.75rem;
}
@media only screen and (min-width:481px) {
  .mapPC {
    width: 100%;
    min-width: 768px;
  }
  #mainMap {
    width: 100%;
  }
  #mainMap a:hover {
    opacity: 0.5;
  }
  #mainMap a:active {
    opacity: 0.7;
  }
  #mainMap {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: none;
    text-align: center;
  }
  #mainMap {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: none;
  }
  #mobile_logo {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: none;
  }
}
@media (min-width: 768px) {
  #Container {}
  header h1 {
    margin: 0;
    padding: 0;
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
  }
  .wrapper {
    padding: 0 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #mobile_logo {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: none;
  }
  #Container h2 {
    display: block;
    margin: 0;
    padding: 0;
    font-size: 14px;
    text-align: center;
  }
  .mapPC {
    width: 100%;
    max-width: 1280px;
  }
  #mainMap {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
  .prefSP {
    display: none;
  }
  #counter {
    width: 100%;
    text-align: center;
  }
  #counter ul li:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
  }
  #counter ul li:nth-child(2) img {
    height: 10px
  }
  #jobLink {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #social {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #exit {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  footer {
    margin: 20px 0;
    padding-bottom: 10px;
    border-top: 1px solid;
  }
  footer ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 10px;
  }
  footer ul li {
    width: auto;
    center;
    background: none;
    padding-top: 8px;
    padding-bottom: 8px;
    border: none;
  }
  footer ul li:last-child {
    width: auto;
    background: none;
    margin-top: 0;
  }
  footer ul li:last-child a {
    display: block;
    color: #333;
  }
  footer ul li:last-child:hover, footer ul li:last-child:active {
    background: none;
  }
  footer ul li a {
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
  }
  footer ul li a:hover {
    text-decoration: underline;
  }
  footer .copyright {
    margin-top: 10px;
    text-align: center;
    font-size: 0.75rem;
  }
}
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■　モバイル都道府県表示
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
.pref_sort {
  margin-bottom: 7px
}
.pref_sort {
  width: 100%
}
.pref_sort summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em;
  border-radius: 5px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer
}
.pref_sort summary::-webkit-details-marker {
  display: none
}
.pref_sort summary::before, .pref_sort summary::after {
  width: 3px;
  height: .9em;
  border-radius: 5px;
  content: '';
  background-color: #0033ff !important;
}
.pref_sort summary::before {
  position: absolute;
  right: 2em;
  rotate: 90deg
}
.pref_sort summary::after {
  transition: rotate .3s
}
.pref_sort[open] summary::after {
  rotate: 90deg
}
.pref_sort p {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin-top: 20px;
  padding: .8em 1.2em;
  border-radius: 5px;
  background-color: #fff;
  color: #333;
  transition: transform .5s, opacity .5s;
  gap: 2px
}
.pref_sort p a {
  padding: 5px 8px;
  width: calc(100% / 4 - 2px);
  text-align: center;
  color: #fff;
  background-color: #0033ff;
  text-decoration: none;
}
.pref_sort p a:hover {
  background: #af2026b3
}
.pref_sort[open] p {
  transform: none;
  opacity: 1
}
.pref_sort p::before, .pref_sort p::after {
  position: absolute;
  top: -15px;
  left: 1.2em;
  width: 30px;
  height: 15px;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  content: '';
  background-color: #0033ff;
}
.pref_sort p::after {
  top: -12px;
  background-color: #fff
}
.bd-days {
  border: 1px solid #0033ff;
}
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■　ベースカラー
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
.areaSP {
  width: 100%;
  max-width: 1280px;
}
.areaSP ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.areaSP ul li {
  flex: calc(100% / 3 - 8px);
  text-decoration: none;
  text-align: center;
  font-weight: 700;
}
.areaSP ul li a {
  display: block;
  padding-top: 20px;
  padding-bottom: 20px;
  border-radius: 8px;
  text-decoration: none;
}
.areaSP ul li a:hover {
  display: block;
  text-decoration: none;
}
.areaSP .a-hk {
  background: #D0F2D9;
  color: #24843c
}
.areaSP .a-kt {
  background: #E9CCF0;
  color: #7b2990
}
.areaSP .a-cb {
  background: #FECDCB;
  color: #fb322b
}
.areaSP .a-kk {
  background: #FCE4C6;
  color: #f7941d
}
.areaSP .a-cg {
  background: #DADAE6;
  color: #656599
}
.areaSP .a-qs {
  background: #FAC8E3;
  color: #ed2f95
}
.areaSP .a-hk:hover, .areaSP .a-hk:active {
  background: #24843c;
  color: #fff;
}
.areaSP .a-kt:hover, .areaSP .a-kt:active {
  background: #7b2990;
  color: #fff;
}
.areaSP .a-cb:hover, .areaSP .a-cb:active {
  background: #fb322b;
  color: #fff;
}
.areaSP .a-kk:hover, .areaSP .a-kk:active {
  background: #f7941d;
  color: #fff;
}
.areaSP .a-cg:hover, .areaSP .a-cg:active {
  background: #656599;
  color: #fff;
}
.areaSP .a-qs:hover, .areaSP .a-qs:active {
  background: #ed2f95;
  color: #fff;
}
@media (min-width: 768px) {
  .areaSP ul li {
    flex: calc(100% / 3 - 8px);
    color: #fff;
  }
}
@media (min-width: 1024px) {
  .areaSP ul li {
    flex: calc(100% / 6 - 8px);
    color: #fff;
  }
  .areaSP ul li a {
    color: #fff;
    text-decoration: none;
  }
  .areaSP .a-hk {
    background: #24843c;
    color: #fff;
  }
  .areaSP .a-kt {
    background: #7b2990;
    color: #fff;
  }
  .areaSP .a-cb {
    background: #fb322b;
    color: #fff;
  }
  .areaSP .a-kk {
    background: #f7941d;
    color: #fff;
  }
  .areaSP .a-cg {
    background: #656599;
    color: #fff;
  }
  .areaSP .a-qs {
    background: #ed2f95;
    color: #fff;
  }
  .areaSP .a-hk:hover {
    background: #D0F2D9;
    color: #24843c
  }
  .areaSP .a-kt:hover {
    background: #E9CCF0;
    color: #7b2990
  }
  .areaSP .a-cb:hover {
    background: #FECDCB;
    color: #fb322b
  }
  .areaSP .a-kk:hover {
    background: #FCE4C6;
    color: #f7941d
  }
  .areaSP .a-cg:hover {
    background: #DADAE6;
    color: #656599
  }
  .areaSP .a-qs:hover {
    background: #FAC8E3;
    color: #ed2f95
  }
}