@charset "UTF-8";
/* CSS Document */
/****************************************
POTAL
****************************************/
/* NO BACKGROUND-IMAGE */
#page.page--no-img {
  background: transparent;
}

/* JAPAN-TITLE */
.title-japan {
  /* Japan: */
  font-size: 54px;
  color: #bd2333;
  text-align: center;
  padding-top: 24px;
  line-height: .9;
}

/* PAGE-TITLE */
.title-page {
  text-align: center;
  margin: auto;
  width: 290px;
  position: relative;
  overflow: hidden;
  margin-bottom: -27px;
}

.title-page__txt:before {
  content: "";
  display: block;
  border-top: 1px solid #bd2333;
  position: absolute;
  top: 50%;
  left: -80px;
  width: 80px;
  height: 3px;
  margin-top: -2px;
  z-index: 1;
}

.title-page__txt:after {
  content: "";
  display: block;
  border-top: 1px solid #bd2333;
  position: absolute;
  top: 50%;
  right: -80px;
  width: 80px;
  height: 3px;
  margin-top: -2px;
  z-index: 1;
}

.title-page__sub-title {
  color: #bd2333;
  font-weight: bold;
}

.title-page__txt {
  display: inline-block;
  position: relative;
  font-weight: bold;
  padding: 0 12px;
  margin-top: 9px;
}

/* MAP */
.map-box {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 535px;
  border-radius: 7px;
  /*	background-image: linear-gradient(-180deg, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%);*/
}

.map-box__map {
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.map-box__map--base {
  background: url(../img/potal/bg_gray_repeat.png) left bottom repeat-x;
  /* CSS3 LOSSLESS GRADIENT */
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
  background-image: linear-gradient(rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%);
}

.area {
  position: absolute;
}

.area__small {
  font-size: .85em;
}

.area--1 {
  left: 590px;
  top: 250px;
}

/* kyoto */
.area--2 {
  left: 460px;
  top: 342px;
}

/* osaka */
.area--3 {
  left: 388px;
  top: 392px;
}

/* fukuoka */
.area--4 {
  left: 105px;
  top: 300px;
}

/* saga */
.area--5 {
  left: 105px;
  top: 350px;
}

/* hiroshima */
.area--6 {
  left: 179px;
  top: 180px;
}

/* Toyama */
.area--7 {
  left: 410px;
  top: 126px;
}

.area--8 {
  left: 408px;
  top: 132px;
}

.area--9 {
  left: 411px;
  top: 362px;
}

.area--10 {
  left: 730px;
  top: 79px;
}

.area--11 {
  left: 650px;
  top: 170px;
}

/* ehime */
.area--16 {
  left: 315px;
  top: 410px;
}

/* Kumamoto */
.area--17 {
  top: 390px;
  left: 105px;
}

/* Oita */
.area--18 {
  top: 440px;
  left: 105px;
}

/* Wakayama */
.area--27 {
  left: 280px;
  top: 442px;
}

/* Tottori */
.area--19 {
  left: 272px;
  top: 170px;
}

/* Aichi */
.area--20 {
  left: 525px;
  top: 377px;
}

/* Gifu */
.area--21 {
  left: 545px;
  top: 327px;
}

/*  Mie */
.area--22 {
  left: 505px;
  top: 427px;
}

/*  Nagasaki */
.area--23 {
  left: 105px;
  top: 340px;
}

/*  Niigata */
.area--24 {
  left: 439px;
  top: 142px;
}

/*  Okayama */
.area--25 {
  left: 225px;
  top: 236px;
}

/*  fukui */
.area--26 {
  left: 305px;
  top: 181px;
}

@media only screen and (min-width: 951px) {
  .area:before {
    content: "";
    display: block;
    height: 1px;
    background: #818181;
    position: absolute;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    z-index: -1;
  }
  /*Tokyo */
  .area.area--1:before {
    width: 60px;
    -webkit-transform: rotate(-206deg);
    transform: rotate(-206deg);
    left: 0;
    top: 19px;
  }
  /* Kyoto */
  .area.area--2:before {
    width: 103px;
    -webkit-transform: rotate(-152deg);
    transform: rotate(-152deg);
    left: 50%;
    top: 0;
  }
  /* Osaka */
  .area.area--3:before {
    width: 91px;
    -webkit-transform: rotate(-108deg);
    transform: rotate(-108deg);
    left: 50%;
    top: 0;
  }
  /* Fukuoka */
  .area.area--4:before {
    width: 64px;
    -webkit-transform: rotate(-6deg);
    transform: rotate(-6deg);
    left: 150px;
    top: 50%;
  }
  /* Saga */
  .area.area--5:before {
    width: 77px;
    -webkit-transform: rotate(-43deg);
    transform: rotate(-43deg);
    left: 146px;
    top: 50%;
  }
  /* Hiroshima */
  .area.area--6:before {
    width: 138px;
    -webkit-transform: rotate(36deg);
    transform: rotate(36deg);
    left: 57px;
    bottom: 0;
  }
  /* Toyama */
  .area.area--7:before {
    width: 103px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    left: 50%;
    bottom: 0;
  }
  /* Kanazawa */
  .area.area--8:before {
    width: 85px;
    -webkit-transform: rotate(85deg);
    transform: rotate(85deg);
    left: 50%;
    bottom: 0;
  }
  /* Hyogo */
  .area.area--9:before {
    width: 72px;
    -webkit-transform: rotate(-126deg);
    transform: rotate(-126deg);
    left: 50%;
    top: 0;
  }
  /* Hokkaido */
  .area.area--10:before {
    content: none;
    width: 60px;
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg);
    left: 0px;
    top: 50%;
  }
  /* Miyagi */
  .area.area--11:before {
    width: 88px;
    -webkit-transform: rotate(-209deg);
    transform: rotate(-209deg);
    left: 0px;
    top: 50%;
  }
  /* Ehime */
  .area.area--16:before {
    width: 93px;
    -webkit-transform: rotate(-93deg);
    transform: rotate(-93deg);
    left: 56px;
    top: 0;
  }
  /* Kumamoto */
  .area.area--17:before {
    width: 90px;
    -webkit-transform: rot7e(-50deg);
    -ms-transfo7: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);
    left: 150px;
    top: 50%;
  }
  /* Oita */
  .area.area--18:before {
    width: 160px;
    -webkit-transform: rotate(-62deg);
    transform: rotate(-62deg);
    left: 146px;
    top: 70%;
  }
  /* Wakayama */
  .area.area--27:before {
    width: 135px;
    -webkit-transform: rotate(-57deg);
    transform: rotate(-57deg);
    left: 50%;
    top: 0;
  }
  /* Tottori */
  .area.area--19:before {
    width: 96px;
    -webkit-transform: rotate(51deg);
    transform: rotate(51deg);
    left: 50%;
    bottom: 0;
  }
  /* Aichi */
  .area.area--20:before {
    width: 150px;
    -webkit-transform: rotate(29deg);
    transform: rotate(29deg);
    left: -35%;
    bottom: 274%;
  }
  /* Gifu */
  .area.area--21:before {
    width: 169px;
    -webkit-transform: rotate(11deg);
    transform: rotate(11deg);
    left: -53%;
    bottom: 173%;
  }
  /* Mie */
  .area.area--22:before {
    width: 166px;
    -webkit-transform: rotate(42deg);
    transform: rotate(42deg);
    left: -34%;
    bottom: 146px;
  }
  /* Nagasaki */
  .area.area--23:before {
    width: 57px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 151px;
    top: 50%;
  }
  /* Niigata */
  .area.area--24:before {
    width: 66px;
    -webkit-transform: rotate(76deg);
    transform: rotate(76deg);
    left: 50%;
    bottom: 0;
  }
  /* Okayama */
  .area.area--25:before {
    width: 119px;
    -webkit-transform: rotate(11deg);
    transform: rotate(11deg);
    left: 50%;
    bottom: 0;
  }
  /* Fukui */
  .area.area--26:before {
    width: 104px;
    -webkit-transform: rotate(37deg);
    transform: rotate(37deg);
    left: 50%;
    bottom: 0;
  }
}

.map-box__location {
  overflow: hidden;
}

.map-box__location > li > a {
  font-size: 1em;
  color: #FFF;
  display: block;
  font-weight: bold;
  width: 10em;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #bd2333;
  border-radius: 4px;
  text-decoration: none;
}

.map-box__location > li > a:hover {
  background: #9F041B;
}

/* Updates */
#homeInformation.homeInformation--potal .infoWrap, #homeInformation.homeInformation--potal .infoContents {
  background: transparent;
}

#homeInformation.homeInformation--potal {
  background: #FFF;
  background: rgba(255, 255, 255, 0.75);
  margin: -40px auto 30px;
  width: auto;
  max-width: 630px;
}

/*@media only screen and (max-device-width: 480px) and (min-device-width: 320px), only screen and (max-width: 480px), only screen and (max-width: 640px) and (orientation: landscape) */
@media only screen and (min-width: 951px) {
  .map-box {
    overflow: hidden;
  }
  .map-box__location > li > a {
    border-radius: 50px;
  }
}

@media only screen and (max-width: 950px) {
  #page.page--potal {
    width: auto;
  }
  #potal {
    position: relative;
  }
  /* BG-GRAY */
  /*
    .page--potal:before {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        bottom: 50px;
        left: 0;
        right: 0;
        height: 270px;
        z-index: -1;
        background: #FFFFFF;
        background-image: -webkit-linear-gradient(rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 40%);
        background-image: -o-linear-gradient(rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 40%);
        background-image: linear-gradient(rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 40%);
        background-image: -webkit-linear-gradient(rgba(255,255,255,1) 0%, #d9d9d9 40%);
        background-image: -o-linear-gradient(rgba(255,255,255,1) 0%, #d9d9d9 40%);
        background-image: linear-gradient(rgba(255,255,255,1) 0%, #d9d9d9 40%);
    }
*/
  /* PAGE TITLE */
  .title-japan {
    /*        color:#333;*/
    font-size: 40px;
  }
  .title-page {
    width: 240px;
    margin: auto;
  }
  .title-page__txt {
    color: #333;
    font-size: 110%;
  }
  /* MAP */
  .map-box {
    padding: 15px;
    width: auto;
    min-height: inherit;
    margin-top: 150px;
    border-radius: 0;
    background-image: -webkit-linear-gradient(white 0%, #d9d9d9 100%);
    background-image: linear-gradient(white 0%, #d9d9d9 100%);
  }
  .map-box__map {
    display: none;
  }
  .map-box__location {
    max-width: 480px;
    margin: auto;
    background: #eee;
    overflow: hidden;
    padding: 15px;
    border-radius: 7px;
    background: #FFF;
    background: rgba(255, 255, 255, 0.75);
    /* Rectangle 4: */
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.22);
  }
  /* BG-CHARA */
  .map-box__location:after {
    content: "";
    display: block;
    position: absolute;
    top: -138px;
    left: 0;
    right: 0;
    height: 152px;
    border-radius: 7px;
    z-index: 1;
    /* 要相対パス */
    background: url(../img/potal/chara_sp.png) center bottom no-repeat;
    background-size: 260px auto;
  }
  .area {
    position: inherit;
    left: inherit !important;
    top: inherit !important;
    width: 24%;
    float: left;
  }
  .map-box__location > li {
    margin-right: 1.3%;
  }
  .area:nth-child(4n) {
    margin-right: 0;
  }
  .area:nth-child(n + 5) {
    margin-top: 2%;
  }
  .map-box__location > li > a {
    font-size: 0.8em;
    width: auto;
    height: 42px;
    line-height: 42px;
    padding: 0;
  }
  /* UPDATES */
  #homeInformation.homeInformation--potal {
    margin: 15px auto;
  }
}

@media only screen and (max-width: 650px) {
  /* UPDATES WIDTH */
  #homeInformation.homeInformation--potal {
    margin: 15px;
  }
}

@media only screen and (max-width: 480px) {
  .map-box__location {
    max-width: 290px;
  }
  .area {
    width: 47%;
  }
  .area:nth-child(2n) {
    margin-right: 0;
  }
  .area:nth-child(n + 3) {
    margin-top: 12px;
  }
  .area:nth-child(2n+1) {
    margin-right: 6%;
  }
}

.page--potal .pcimg {
  background: #bd2333;
}

.page--potal .doNotLink {
  width: inherit;
}

/*# sourceMappingURL=maps/potal.css.map */