@charset "UTF-8";
/* ----------------------------------------
   ■ station.css
---------------------------------------- */
body {
  background: url("../img/station/bg_page_01.jpg") repeat center top;
}

body.subCtg #mainContents {
  padding-top: 10vw;
}

#pageTitle h1 br {
  display: none;
}

footer::before {
  display: none;
}

footer::after {
  content: '';
  position: absolute;
  left: calc(50% - 55px + 40vw);
  top: -87px;
  width: 82px;
  height: 82px;
  background-image: url("../img/img_deco_04.png");
}

/* トップページ
---------------------------------------- */
#station #hero {
  position: relative;
  max-width: 1010px;
  margin: 0 auto;
}
#station #hero::before {
  content: "";
  position: absolute;
  left: 0%;
  top: 10%;
  width: 10.89109%;
  height: 40%;
  background: url("../img/station/index/img_hero_deco_01.png") no-repeat center top/contain;
}
#station #hero::after {
  content: "";
  position: absolute;
  right: 0%;
  bottom: 10%;
  width: 12.57426%;
  height: 43%;
  background: url("../img/station/index/img_hero_deco_02.png") no-repeat center top/contain;
}
#station #slider1 {
  width: 73.26733%;
  margin: 0 auto;
}
#station #slider1 .slick-list {
  overflow: visible;
}
#station #slider1 img {
  opacity: 0;
  transform: rotate(5deg) translateX(40px) translateY(-20px);
}
#station #slider1 .slick-current img {
  animation: slideAnim 6s linear forwards;
}
#station #slider1 *:focus {
  outline: none;
}
#station #map > div {
  position: relative;
  max-width: 840px;
  margin: 0 auto;
}
#station #map > div::after {
  content: "";
  position: absolute;
  left: -50px;
  bottom: -45px;
  width: 154px;
  height: 154px;
  background: url("../img/station/index/img_panda_01.png") no-repeat center center/contain;
}
#station #map .map {
  position: relative;
}
#station #map .point {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 3.09524%;
  height: 8.33333%;
}
#station #map .point img {
  position: relative;
  top: 0px;
  opacity: 0.0;
}
#station #map .cov {
  position: absolute;
  left: 0;
  top: 0;
}
#station #map.pointActive .point img {
  animation: point1 0.1s 0s ease forwards;
}

@keyframes slideAnim {
  0% {
    opacity: 0;
    transform: rotate(2deg) translateX(20px) translateY(-20px);
  }
  8% {
    opacity: 1;
    transform: rotate(0deg) translateX(0px) translateY(0px);
  }
  90% {
    opacity: 1;
    transform: rotate(0deg) translateX(0px) translateY(0px);
  }
  98% {
    opacity: 0;
    transform: rotate(-2deg) translateX(-20px) translateY(20px);
  }
  100% {
    opacity: 0;
    transform: rotate(-2deg) translateX(-20px) translateY(20px);
  }
}
@keyframes point1 {
  0% {
    top: 0px;
    opacity: 0.0;
  }
  100% {
    top: 0px;
    opacity: 1.0;
  }
}
#station #map.higashinarita .point {
  left: 91.4%;
  top: 49%;
}
#station #map.keiseinarita .point {
  left: 87.7%;
  top: 47%;
}
#station #map.sougosando .point {
  left: 82.7%;
  top: 51%;
}
#station #map.keiseishisui .point {
  left: 80.2%;
  top: 53%;
}
#station #map.osakura .point {
  left: 77.7%;
  top: 55.2%;
}
#station #map.keiseisakura .point {
  left: 75.3%;
  top: 56.8%;
}
#station #map.keiseiusui .point {
  left: 72.8%;
  top: 58.5%;
}
#station #map.shizu .point {
  left: 67.8%;
  top: 62.2%;
}
#station #map.katsutadai .point {
  left: 65.4%;
  top: 63.8%;
}
#station #map.keiseiyamatoda .point {
  left: 62.9%;
  top: 65.6%;
}
#station #map.yachiyodai .point {
  left: 60.4%;
  top: 67.3%;
}
#station #map.mimomi .point {
  left: 58%;
  top: 68.9%;
}
#station #map.keiseiokubo .point {
  left: 55.5%;
  top: 71%;
}
#station #map.keiseitsudanuma .point {
  left: 53%;
  top: 72.7%;
}
#station #map.yatsu .point {
  left: 49.5%;
  top: 72.7%;
}
#station #map.funabashikeibajo .point {
  left: 47.1%;
  top: 72.7%;
}
#station #map.daijingushita .point {
  left: 44.6%;
  top: 70.7%;
}
#station #map.keiseifunabashi .point {
  left: 42.1%;
  top: 69.3%;
}
#station #map.kaijin .point {
  left: 39.7%;
  top: 67.5%;
}
#station #map.keiseinishifuna .point {
  left: 37.2%;
  top: 65.5%;
}
#station #map.higashinakayama .point {
  left: 34.7%;
  top: 63.7%;
}
#station #map.keiseinakayama .point {
  left: 32.2%;
  top: 62.2%;
}
#station #map.onigoe .point {
  left: 29.8%;
  top: 60%;
}
#station #map.keiseiyawata .point {
  left: 27.3%;
  top: 58.5%;
}
#station #map.sugano .point {
  left: 24.8%;
  top: 56.7%;
}
#station #map.ichikawamama .point {
  left: 22.4%;
  top: 55.2%;
}
#station #map.kounodai .point {
  left: 19.9%;
  top: 53.3%;
}
#station #map.edogawa .point {
  left: 17.5%;
  top: 51.4%;
}
#station #map.keiseikoiwa .point {
  left: 15%;
  top: 51.4%;
}
#station #map.keiseitakasago .point {
  left: 12.4%;
  top: 51.4%;
}
#station #map.aoto .point {
  left: 9.8%;
  top: 51.5%;
}
#station #map.ohanajaya .point {
  left: 7.2%;
  top: 51.5%;
}
#station #map.horikirishobuen .point {
  left: 4.67%;
  top: 51.5%;
}
#station #map.keiseisekiya .point {
  left: 2.1%;
  top: 51.5%;
}
#station #map.senjuohashi .point {
  left: -0.55%;
  top: 51.5%;
}
#station #map.machiya .point {
  left: -0.55%;
  top: 56.5%;
}
#station #map.shinmikawajima .point {
  left: -0.55%;
  top: 60.5%;
}
#station #map.nippori .point {
  left: -0.55%;
  top: 64.5%;
}
#station #map.keiseiueno .point {
  left: -0.55%;
  top: 68%;
}
#station #map.shibamata .point {
  left: 12.4%;
  top: 43.5%;
}
#station #map.kanamachi .point {
  left: 12.4%;
  top: 38.3%;
}
#station #map.keiseitateishi .point {
  left: 9.8%;
  top: 64.8%;
}
#station #map.yotsugi .point {
  left: 12.4%;
  top: 66.3%;
}
#station #map.yahiro .point {
  left: 15%;
  top: 67.9%;
}
#station #map.keiseihikifune .point {
  left: 17.5%;
  top: 69.9%;
}
#station #map.oshiage .point {
  left: 20%;
  top: 71.5%;
}
#station #map.keiseimakuhari .point {
  left: 58%;
  top: 75%;
}
#station #map.kemigawa .point {
  left: 60.5%;
  top: 75%;
}
#station #map.keiseiinage .point {
  left: 62.9%;
  top: 75%;
}
#station #map.midoridai .point {
  left: 65.4%;
  top: 75%;
}
#station #map.nishinobuto .point {
  left: 67.9%;
  top: 75%;
}
#station #map.shinchiba .point {
  left: 70.35%;
  top: 75%;
}
#station #map.chibachuuou .point {
  left: 75.3%;
  top: 75%;
}
#station #map.shirahige .point {
  left: 36.3%;
  top: 87.3%;
}
#station #map.hakubutsukandoubutsuen .point {
  left: 36.3%;
  top: 90.7%;
}
#station #map.shintsudanuma .point {
  left: 51.23%;
  top: 50.7%;
}
#station #map.maebara .point {
  left: 51.23%;
  top: 47.4%;
}
#station #map.yakendai .point {
  left: 51.23%;
  top: 44%;
}
#station #map.narashino .point {
  left: 51.23%;
  top: 40.7%;
}
#station #map.kitanarashino .point {
  left: 51.23%;
  top: 37.4%;
}
#station #map.takane-kido .point {
  left: 51.23%;
  top: 34%;
}
#station #map.takane-kodan .point {
  left: 51.23%;
  top: 30.6%;
}
#station #map.takifudo .point {
  left: 51.23%;
  top: 27.4%;
}
#station #map.misaki .point {
  left: 51.23%;
  top: 23.9%;
}
#station #map.futawamukodai .point {
  left: 51.23%;
  top: 20.6%;
}
#station #map.kamagaya-daibutsu .point {
  left: 51.23%;
  top: 17.1%;
}
#station #map.hatsutomi .point {
  left: 51.23%;
  top: 13.8%;
}
#station #map.shinkamagaya .point {
  left: 51.23%;
  top: 10.5%;
}
#station #map.kitahatsutomi .point {
  left: 49.33%;
  top: 7.5%;
}
#station #map.kunugiyama .point {
  left: 46.9%;
  top: 7.5%;
}
#station #map.motoyama .point {
  left: 44.4%;
  top: 7.5%;
}
#station #map.goko .point {
  left: 41.9%;
  top: 7.5%;
}
#station #map.tokiwadaira .point {
  left: 39.5%;
  top: 7.5%;
}
#station #map.yabashira .point {
  left: 37%;
  top: 7.5%;
}
#station #map.minoridai .point {
  left: 34.6%;
  top: 7.5%;
}
#station #map.matsudoshinden .point {
  left: 32.12%;
  top: 7.5%;
}
#station #map.kamihongo .point {
  left: 29.64%;
  top: 7.5%;
}
#station #map.matsudo .point {
  left: 27.2%;
  top: 7.5%;
}

#station #photos {
  margin-top: 60px;
}
#station #photos > div {
  max-width: 900px;
  margin: 0 auto;
}
#station #photos > div > ul {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-top: -30px;
}
#station #photos > div > ul li {
  width: 32.22222%;
  margin-top: 30px;
}
#station #photos > div > ul li a {
  display: block;
  position: relative;
  top: 0;
  padding: 15px;
  background: #fff;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  transition: all 300ms ease;
}
#station #photos > div > ul li a:hover {
  top: -3px;
  box-shadow: 1px 3px 9px rgba(0, 0, 0, 0.4);
  transform: scale(1.04);
}
#station #photos > div > ul li a:hover img {
  opacity: 1.0;
}
#station #photos > div > ul li a .doc {
  padding-top: 1em;
  line-height: 1.1;
  font-weight: bold;
}

/* 各駅ページ
---------------------------------------- */
body.photoPage #singlePhoto,
body.photoPage #diff {
  position: relative;
  max-width: 660px;
  margin: 0 auto;
  padding: 8px;
  background: #fff;
  box-shadow: 3px 3px 9px 0 rgba(0, 0, 0, 0.3);
}
body.photoPage #singlePhoto .panda,
body.photoPage #diff .panda {
  position: absolute;
  left: -28%;
  bottom: -15%;
  width: 25.75758%;
}
body.photoPage .year {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 670px;
  margin: 25px auto;
}
body.photoPage .year h2 {
  position: relative;
  width: calc(100% - 300px);
  margin: 0 20px;
  padding-top: 4px;
  background: #dbe1e7;
  letter-spacing: 0.4em;
  line-height: 1.1;
  font-size: 2.8rem;
  font-weight: bold;
}
body.photoPage .year h2.tsume {
  letter-spacing: 0.1em;
  font-feature-settings: 'palt';
}
body.photoPage .year h2::before {
  content: "";
  position: absolute;
  left: -10px;
  bottom: 0;
  width: 50%;
  height: 100%;
  background: #dbe1e7;
  transform: skewX(-25deg);
}
body.photoPage .year h2::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: 0;
  width: 50%;
  height: 100%;
  background: #dbe1e7;
  transform: skewX(25deg);
}
body.photoPage .year h2 span {
  position: relative;
  z-index: 5;
}
body.photoPage .year .box {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: center;
  -ms-justify-content: center;
  -webkit-justify-content: center;
  width: 120px;
  height: 37px;
  padding-top: 4px;
  border: 3px solid #262626;
  border-radius: 3px;
  line-height: 1.1;
  font-weight: bold;
}
body.photoPage .year .box.y1 {
  background: #faee00;
}
body.photoPage .year .box.y2 {
  background: #004ea2;
  color: #fff;
}
body.photoPage .year.single {
  display: block;
}
body.photoPage .year.single h2 {
  width: calc(100% - 40px);
}
body.photoPage .name,
body.photoPage .episode {
  max-width: 660px;
  margin: 0 auto;
  text-align: left;
}
body.photoPage .name h3,
body.photoPage .episode h3 {
  margin-bottom: 5px;
  line-height: 1.1;
  font-weight: bold;
}
body.photoPage .name .box,
body.photoPage .episode .box {
  padding: 15px;
  background: #fff;
  border: 1px solid #262626;
  border-radius: 5px;
  font-feature-settings: 'palt';
}
body.photoPage .name .box p {
  letter-spacing: -0.38em;
}
body.photoPage .name .box p span {
  display: inline-block;
  padding-right: 1em;
  letter-spacing: normal;
}
body.photoPage .name .box p span::after {
  content: "→";
  margin-left: 1em;
}
body.photoPage .name .box p span:last-child {
  padding-right: 0;
}
body.photoPage .name .box p span:last-child::after {
  display: none;
}
body.photoPage .name .box p.note {
  margin-top: 5px;
  letter-spacing: normal;
}
body.photoPage .episode ul li {
  display: block;
  margin-top: 5px;
  padding-left: 0.75em;
  letter-spacing: normal;
  text-indent: -0.75em;
  font-feature-settings: 'palt';
}
body.photoPage .episode ul li::before {
  content: "・";
  margin-right: 0.25em;
}
body.photoPage .name + .episode {
  margin-top: 20px;
}
body.photoPage .paging {
  display: flex;
  display: -ms-flex;
  display: -webkit-flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 660px;
  margin: 20px auto 0;
}
body.photoPage .paging p {
  width: 50%;
}
body.photoPage .paging p a {
  display: inline-block;
  position: relative;
  line-height: 25px;
  text-decoration: none;
  color: #004ea2;
}
body.photoPage .paging p a::before {
  content: "";
  position: absolute;
  top: 0;
  width: 25px;
  height: 25px;
  background: #5a82b9;
  border-radius: 50%;
  text-align: center;
  color: #fff;
  font-weight: bold;
}
body.photoPage .paging p a::after {
  position: absolute;
  top: 0;
  line-height: 24px;
  color: #fff;
  font-size: 2.4rem;
  font-weight: bold;
  transform: scaleX(0.65);
}
body.photoPage .paging p.prev {
  text-align: left;
}
body.photoPage .paging p.prev a {
  padding-left: 30px;
}
body.photoPage .paging p.prev a::before {
  left: 0;
}
body.photoPage .paging p.prev a::after {
  content: "<";
  left: 0.2em;
}
body.photoPage .paging p.next {
  text-align: right;
}
body.photoPage .paging p.next a {
  padding-right: 30px;
}
body.photoPage .paging p.next a::before {
  right: 0;
}
body.photoPage .paging p.next a::after {
  content: ">";
  right: 0.2em;
}
body.photoPage .backBtn {
  max-width: 660px;
  margin: 0 auto;
  margin-top: 20px;
  text-align: left;
}
body.photoPage .backBtn a {
  display: inline-block;
  position: relative;
  left: 15px;
  height: 30px;
  padding: 0 20px;
  background: #5a82b9;
  line-height: 32px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}
body.photoPage .backBtn a::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  border-color: transparent #5a82b9 transparent transparent;
}
body.photoPage .backBtn a:hover {
  opacity: 0.8;
}
body.photoPage .twentytwenty-overlay {
  display: none;
}
body.photoPage .twentytwenty-handle {
  height: 42px;
  width: 42px;
  margin-left: -24px;
  margin-top: -24px;
  background: #fff;
}
body.photoPage .twentytwenty-left-arrow {
  width: 0;
  height: 0;
  margin-top: -8.5px;
  margin-left: -14px;
  border-style: solid;
  border-width: 8.5px 8px 8.5px 0;
  border-color: transparent #004ea2 transparent transparent;
}
body.photoPage .twentytwenty-right-arrow {
  width: 0;
  height: 0;
  margin-top: -8.5px;
  margin-right: -14px;
  border-style: solid;
  border-width: 8.5px 0 8.5px 8px;
  border-color: transparent transparent transparent #004ea2;
}

/* Media Query
---------------------------------------- */
@media screen and (max-width: 1050px) {
  body.photoPage #diff .panda {
    position: absolute;
    left: -20px;
    bottom: -20px;
    width: 100px;
  }
}
@media screen and (max-width: 950px) {
  #station #map > div::after {
    width: 15vw;
    height: 15vw;
    left: 0;
    bottom: -11%;
  }
}
@media screen and (max-width: 768px) {
  footer::after {
    top: -65px;
    width: 60px;
    height: 60px;
  }

  body.subCtg #mainContents {
    padding-top: 220px;
  }

  #station #slider1 {
    width: calc(75vw - 20px);
  }
  #station #map .cov,
  #station #map > div::after {
    display: none;
  }
  #station #map.pointActive .point img {
    animation: none;
  }
  #station #photos {
    margin-top: 10px;
  }
  #station #photos > div > ul {
    margin-top: 15px;
  }
  #station #photos > div > ul li {
    width: calc((100% - 15px) / 2);
    margin-top: 15px;
  }
  #station #photos > div > ul li a {
    padding: 10px;
  }
  #station #photos > div > ul li a:hover {
    top: 0;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5);
    transform: scale(1) rotate(0deg);
  }

  body.photoPage .year h2 {
    width: calc(70% - 50px);
    letter-spacing: 0.1em;
    font-size: 3.6458333333vw;
  }

  body.photoPage .year .box {
    width: 15%;
    height: 30px;
    padding-top: 2px;
    font-size: 2.0833333333vw;
  }
}
@media screen and (max-width: 480px) {
  body.photoPage .year h2 {
    width: calc(66% - 50px);
    letter-spacing: 0.04em;
    font-size: 5.8333333333vw;
  }

  body.photoPage .year .box {
    width: 17%;
    padding-top: 2px;
    font-size: 2.9166666667vw;
  }

  .episode {
    font-size: 1.4rem;
  }

  body.photoPage #diff .panda {
    position: absolute;
    left: -5px;
    bottom: -20px;
    width: 15vw;
  }

  body.subCtg #mainContents {
    padding-top: 200px;
  }

  #pageTitle h1 br {
    display: block;
  }

  #station #photos {
    margin-top: 30px;
  }
  #station #photos > div > ul li a .doc {
    font-size: 3.3333333333vw;
  }
}