/*****************************************************************************
CSS only for top page
*****************************************************************************/

/* Hometown
-----------------------------------------*/

.Hometown {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {
  .Hometown {
    margin-top: 55px;
  }
}

/* Area
-----------------------------------------*/

.Area {
  margin: 0 auto;
  max-width: 976px;
}

@media screen and (max-width: 976px) {
  .Area {
    margin: 100px 20px 0;
  }
}

@media screen and (max-width: 767px) {
  .Area {
    margin-top: 55px;
  }
}
.Area[id^="A_"]::before {
  content: "";
  display: block;
  height: 95px;
  margin-top: -95px;
  visibility: hidden;
}
@media screen and (max-width: 767px) {
  .Area[id^="A_"]::before {
    content: "";
    display: block;
    height: 30px;
    margin-top: -30px;
    visibility: hidden;
  }
}

.Area__head {
  position: relative;
  min-height: 500px;
  z-index: 0;
  margin-top: 100px;
}
@media screen and (max-width: 976px) {
  .Area__head {
    min-height: initial;
    margin-top: 55px;
  }
}
/* .Area__head .Page__lineTitle {
padding-top: 25px;
} */
@media screen and (max-width: 767px) {
  .Area__head .Page__lineTitle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
}

.Area__headInner {
  position: absolute;
  top:26%;
  left:27.3%;
}

@media screen and (max-width: 767px) {
  .Area__headInner {
    margin-top: 40px;
    position: relative;
    top: 0;
    left: 0;
  }
}

.Area--okinawa .Area__headInner {
  top: 28%;
  left: 27%;
}

@media screen and (max-width: 767px) {
  .Area--okinawa .Area__headInner {
    top: 0;
    left: 0;
  }
}

.Area--fukui .Area__headInner {
  top: 28%;
  left: 27%;
}

@media screen and (max-width: 767px) {
  .Area--fukui .Area__headInner {
    top: 0;
    left: 0;
  }
}

@media screen and (max-width: 767px) {
  .Area__headInner .NextPage {
    margin-top: 30px;
  }
}

.Area__headInner .NextPage p {
  text-align: left;
}

@media screen and (max-width: 767px) {
  .Area__headInner .NextPage p {
    text-align: center;
  }
}

.Area__headInner .NextPage.NextPage--auto p a span {
  width: 285px;
}

@media screen and (max-width: 767px) {
  .Area__headInner .NextPage.NextPage--auto p a span {
    width: auto;
  }
}

.Area__title {
  margin-bottom: 35px;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .Area__title.Area__title--pc {
    display: none;
  }
}

.Area__title.Area__title--sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .Area__title.Area__title--sp {
    position: absolute;
    display: block;
    bottom: 0;
  }
}

.Area__title span {
  display: block;
  color: #0666ff;
  text-transform: uppercase;
  font-family:'Antonio';
  font-weight: 700;
  font-size: 24px;
  font-size: 2.4rem;
}

@media screen and (max-width: 767px) {
  .Area__title span {
    font-size: 4.5vw;
  }
}

@media screen and (max-width: 320px) {
  .Area__title span {
    font-size: 19px;
    font-size: 1.9rem;
  }
}

.Area__title strong {
  display: block;
  color: #0666ff;
  text-transform: uppercase;
  font-family:'Antonio';
  font-weight: 700;
  font-size: 44px;
  font-size: 5rem;
}

@media screen and (max-width: 767px) {
  .Area__title strong {
    font-size: 8vw;
  }
}

@media screen and (max-width: 320px) {
  .Area__title strong {
    font-size: 32px;
    font-size: 3.2rem;
  }
}

.Area__title small {
  margin-top: 15px;
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .Area__title small {
    margin-top: 15px;
    font-size: 3.5vw;
  }
}

@media screen and (max-width: 320px) {
  .Area__title small {
    font-size: 13px;
    font-size: 1.3rem;
  }
}

.Area__lead {
  line-height: 1.7;
  font-size: 14px;
  font-size: 1.4rem;
}

.Area__map {
  position: absolute;
  top: 2px;
  right: 8px;
  z-index: -1;
}

@media screen and (max-width: 976px) {
  .Area__map {
    position: relative;
  }
}

@media screen and (max-width: 767px) {
  .Area__map {
    margin-top: 20px;
  }
}

.Area--fukui .Area__map {
  right: -17px;
}

@media screen and (max-width: 976px) {
  .Area__pcMap {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  .Area__pcMap {
    display: none;
  }
}

.Area__spMap {
  display: none;
}

@media screen and (max-width: 767px) {
  .Area__spMap {
    width: 100%;
    height: auto;
    display: block;
  }
}

.Area__mascot {
  position: absolute;
  top: 122px;
  left: 54.3%;
  display: flex;
  align-items: flex-end;
}

@media screen and (max-width: 976px) {
  .Area__mascot {
    top: 40px;
    left: 55%;
  }
}

@media screen and (max-width: 767px) {
  .Area__mascot {
    bottom: 10px;
    right: 0;
    top: auto;
    left: auto;
  }
}

.Area--neyagawa .Area__mascot {
  top:108px;
  left:55.2%;
}
@media screen and (max-width: 976px) {
  .Area--neyagawa .Area__mascot {
    top:10px;
    left:55.2%;
  }
}
@media screen and (max-width: 767px) {
  .Area--neyagawa .Area__mascot {
    top:10px;
    left:35%;
  }
}
.Area--kadoma .Area__mascot {
  top:114px;
  left:51.6%;
}
@media screen and (max-width: 976px) {
  .Area--kadoma .Area__mascot {
    top:10px;
    left:55.2%;
  }
}
@media screen and (max-width: 767px) {
  .Area--kadoma .Area__mascot {
    top: auto;
    left: auto;
  }
}
.Area--moriguchi .Area__mascot {
  top:107px;
  left:56.7%;
}
@media screen and (max-width: 976px) {
  .Area--moriguchi .Area__mascot {
    top:10px;
    left:55.2%;
  }
}
@media screen and (max-width: 767px) {
  .Area--moriguchi .Area__mascot {
    left:35%;
  }
}
.Area--katano .Area__mascot {
  top:98px;
  left:49.8%;
}
@media screen and (max-width: 976px) {
  .Area--katano .Area__mascot {
    top:10px;
    left:52%;
  }
}
@media screen and (max-width: 767px) {
  .Area--katano .Area__mascot {
    top:0;
    left:30%;
  }
}

.Area__mascot figcaption {
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 18px;
  margin-left: 7px;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .Area__mascot figcaption {
    font-size: 12px;
    font-size: 1.2rem;
    margin-bottom: 0;
  }
}
.Area__mascotImg {
  padding-right: 10px;
}
.Area--hirakata .Area__mascotImg {
  width: 80px;
}
@media screen and (max-width: 767px) {
  .Area--hirakata .Area__mascotImg {
    width: 70px;
  }
}
@media screen and (max-width: 767px) {
  .Area--neyagawa .Area__mascotImg {
    width: 120px;
    padding-right: 0;
  }
}

.Area__Link {
  margin-top: 25px;
}
@media screen and (max-width: 767px) {
  .Area__Link {
    text-align: center;
  }
}

/* Topics
-----------------------------------------*/

.Topics {
  margin-top: 82px;
}
.Topics + .Topics {
  margin-top: 58px;
}

@media screen and (max-width: 767px) {
  .Topics {
    margin-top: 50px;
  }
}

.Topics p {
  line-height: 1.7;
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 44px;
}

@media screen and (max-width: 767px) {
  .Topics p {
    font-size: 13px;
    font-size: 1.3rem;
  }
}

.Topics__title {
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
}

@media screen and (max-width: 767px) {
  .Topics__title {
    margin-bottom: 13px;
  }
}

.Topics__title strong {
  display: inline-block;
  margin-right: 17px;
}

@media screen and (max-width: 767px) {
  .Topics__title strong {
    margin-right: 8px;
  }
}

.Topics__title small {
  font-size: 12px;
  font-size: 1.2rem;
}

.Topics__img {
  overflow: hidden;
  margin-top: 5px;
}

.Topics__img ul {
  display: flex;
  flex-wrap: wrap;
  margin-right: -3%;
}

@media screen and (max-width: 767px) {
  .Topics__img ul {
    margin-top: 33px;
    display: block;
    margin-right: 0;
  }
}

.Topics__img ul li {
  margin-top: 20px;
  width: 31%;
  margin-right: 2%;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .Topics__img ul li {
    margin-top: 20px;
    width: auto;
    margin-right: 0;
  }
}

.Topics__img ul li img {
  width: 100%;
  height: auto;
}

.Topics__img figcaption {
  margin-top: 5px;
  text-align: left;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.6;
}

@media screen and (max-width: 767px) {
  .Topics__img figcaption {
    margin-top: 10px;
  }
}

/* Topics__Relationlink
-----------------------------------------*/

.Topics__Relationlink {
  font-size: 14px;
  font-size: 1.4rem;
  position: relative;
  display: inline-block;
  padding-left: 20px;
}

.Relationlink a:link {
  color: #0666ff;
  text-decoration: none;
}

.Relationlink a:visited {
  color: #0666ff;
  text-decoration: none;
}

.Relationlink a:hover {
  color: #0666ff;
  text-decoration: none;
}

.Relationlink a:focus {
  color: #0666ff;
  text-decoration: none;
}

.Relationlink a:active {
  color: #0666ff;
  text-decoration: none;
}

.Topics__Relationlink::after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 10px;
  width: 7px;
  height: 7px;
  margin: -4px 0 0 0;
  border-top: solid 2px #0666ff;
  border-right: solid 2px #0666ff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* From
-----------------------------------------*/

.From {
  margin-top: 74px;
}

@media screen and (max-width: 767px) {
  .From {
    margin-top: 40px;
  }
}

.From--related {
  margin-top: 30px;
}

.From__title {
  font-weight: bold;
  font-size: 16px;
  font-size: 1.6rem;
}

.From__subtitle {
  font-weight: bold;
  font-size: 14px;
  font-size: 1.4rem;
}

.From__list {
  overflow: hidden;
}

.From__list ul {
  display: flex;
  flex-wrap: wrap;
  margin-right: -3%;
}

@media screen and (max-width: 767px) {
  .From__list ul {
    margin-right: 0;
    justify-content: space-between;
  }
}

.From__list ul li {
  margin-top: 23px;
  width: 22%;
  padding: 0 10px;
  margin-right: 3%;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .From__list ul li {
    margin-top: 23px;
    width: 45%;
    margin-right: 0;
  }
}

.From__list ul li:hover{
  opacity: .8;
}

.From__img {
  padding: 0 0 0 15px;
}

.From__img img {
  max-width: 100%;
  height: auto;
}

dl.From__detail {
  position: relative;
  padding-left: 30px;
  color: #FFF;
  display: flex;
  height: 61px;
  align-items: center;
  background-color: #0853a6;
  transform: skewX(-15deg);
  z-index: 0;
}

@media screen and (max-width: 976px) {
  dl.From__detail {
    padding-left: 10px;
  }
}

dl.From__detail::after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  content: "";
  width: 50%;
  background-color: #0853a6;
  z-index: -1;
}

.From__detail dt {
  transform: skewX(15deg);
}

.From__num {
  font-family: 'Roboto', sans-serif;
  font-size: 19px;
  font-size: 1.9rem;
  font-weight: 700;
  font-style: italic;
}

@media screen and (max-width: 976px) {
  .From__num {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

.From__num span {
  margin-right: 2px;
  font-weight: 400;
  font-size: 12px;
  font-size: 1.2rem;
}

@media screen and (max-width: 976px) {
  .From__num span {
    font-size: 10px;
    font-size: 1rem;
  }
}

.From__detail dd {
  text-align: left;
  line-height: 1;
  padding-left: 15px;
  transform: skewX(15deg);
}

@media screen and (max-width: 976px) {
  .From__detail dd {
    padding-left: 8px;
  }
}

.From__name {
  font-size: 19px;
  font-size: 1.9rem;
  font-weight: bold;
}

@media screen and (max-width: 976px) {
  .From__name {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

.From__kana {
  font-size: 9px;
  font-size: 0.9rem;
  font-weight: bold;
}