html {
  scroll-behavior: smooth;
}
body {
  font-family: "Noto Sans JP", "Titillium Web", Helvetica Neue, Helvetica,
    Segoe UI, Tahoma, Arial, sans-serif;
  color: #333;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  line-height: 1.5;
}
#wrapper {
  max-width: 640px;
  margin: 0 auto;
}
section {
  padding-bottom: 2rem;
}
section h1 {
  font-size: 25px;
  background: #6594e0;
  color: #fff;
  padding: 1rem 15px;
  margin-bottom: 15px;
  letter-spacing: 0.1rem;
}
img {
  width: 100%;
}
ul,
li,
a {
  list-style: none;
  text-decoration: none;
}
.notice {
  padding: 0 15px;
  font-size: 12px;
  opacity: 0.9;
}

/* masthead */
section#masthead .iconify {
  font-size: 5rem;
}
section#masthead {
  padding: 2rem 0;
  text-align: center;
  letter-spacing: 0.1rem;
}

/* intro */
section#intro p {
  padding: 0 15px;
}

/* table-of-contents */
#table-of-contents ul {
  width: 60%;
  margin: 0 auto;
}
.table-of-content {
  display: flex;
  align-items: flex-end;
}
.table-of-content a {
  display: block;
  cursor: pointer;
  color: #555;
}
.table-of-content .iconify {
  color: #778899;
  font-size: 1.5rem;
  margin-right: 10px;
}

/* info-details */
#info-details .content {
  padding: 1rem 15px;
}
#info-details .content h2 {
  font-size: 20px;
  border-left: 5px solid #6594e0;
  padding-left: 5px;
}
#info-details img {
  margin: 20px 0;
}

/* steps */
#steps h2 {
  font-size: 20px;
  border-left: 5px solid #6594e0;
  padding-left: 5px;
  margin-bottom: 15px;
}
#steps .content h3 {
  padding-bottom: 5px;
}
.step-1,
.step-2 {
  padding: 1rem 15px;
}
.step-1 .content p {
  display: flex;
  align-items: center;
}
.step-1 .content .iconify {
  color: #fed136;
  font-size: 2rem;
}

/* icons */
.icon-row {
  display: flex;
  justify-content: center;
  font-size: 4rem;
  align-items: flex-end;
}
.extra-1 .iconify {
  font-size: 3rem;
  color: #c71585;
  padding-right: 10px;
  opacity: 0.5;
}
.extra-2 .iconify {
  color: #c71585;
  padding-right: 5px;
  opacity: 0.8;
}
.extra-3 .iconify {
  font-size: 5rem;
  color: #c71585;
}
.transfer-train1 .iconify {
  color: #1686c7;
}
.transfer-train2 .iconify {
  color: #86c716;
}
.transfer-man .iconify {
  padding: 0 5px;
  color: #778899;
}
.caution {
  margin-top: 15px;
  padding: 10px 5px;
  border: 3px solid #6594e0;
  border-radius: 15px;
  text-align: center;
}
.caution h2 {
  position: relative;
  padding-bottom: 15px;
}
.caution .inner p {
  font-size: 14px;
  text-align: left;
}
.caution .iconify {
  display: block;
  color: #fed136;
  font-size: 3rem;
  margin: 0 auto 15px;
}

/* timeline */
#timeline .inner {
  padding: 0 15px;
}
.timeline {
  padding-left: 4rem;
  padding-top: 4rem;
  padding-bottom: 2rem;
  position: relative;
}
.timeline::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 22px;
  width: 5px;
  content: "";
  background-color: #e9ecef;
  z-index: -1000;
}
#timeline .content {
  padding-bottom: 1rem;
}
#timeline .content-title {
  position: absolute;
  top: 0;
  left: -5px;
  display: inline-flex;
  align-items: center;
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 1rem;
}
.content-title .iconify {
  width: 50px;
  height: 50px;
  background: #fff;
  color: #e9ecef;
  padding: 5px;
}
.content-title h2 {
  padding-left: 0.5rem;
}
.content .inner {
  display: inline-box;
}
.content h2 {
  display: inline-flex;
  margin-bottom: 6px;
  position: relative;
  font-size: 18px;
}
.content small {
  font-size: 12px;
}
/* train-colour */
.jk::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(
    -45deg,
    #00b2e5,
    #00b2e5 2px,
    #fff 2px,
    #fff 4px
  );
  background: repeating-linear-gradient(
    -45deg,
    #00b2e5,
    #00b2e5 2px,
    #fff 2px,
    #fff 4px
  );
  opacity: 0.5;
  z-index: -1000;
}
.jy::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(
    -45deg,
    #7bab4f,
    #7bab4f 2px,
    #fff 2px,
    #fff 4px
  );
  background: repeating-linear-gradient(
    -45deg,
    #7bab4f,
    #7bab4f 2px,
    #fff 2px,
    #fff 4px
  );
  opacity: 0.5;
  z-index: -1000;
}
.ut::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(
    -45deg,
    #91278f,
    #91278f 2px,
    #fff 2px,
    #fff 4px
  );
  background: repeating-linear-gradient(
    -45deg,
    #91278f,
    #91278f 2px,
    #fff 2px,
    #fff 4px
  );
  opacity: 0.5;
  z-index: -1000;
}
.ja::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(
    -45deg,
    #00b48d,
    #00b48d 2px,
    #fff 2px,
    #fff 4px
  );
  background: repeating-linear-gradient(
    -45deg,
    #00b48d,
    #00b48d 2px,
    #fff 2px,
    #fff 4px
  );
  opacity: 0.5;
  z-index: -1000;
}
.twr::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(
    -45deg,
    #00418e,
    #00418e 2px,
    #fff 2px,
    #fff 4px
  );
  background: repeating-linear-gradient(
    -45deg,
    #00418e,
    #00418e 2px,
    #fff 2px,
    #fff 4px
  );
  opacity: 0.5;
  z-index: -1000;
}
/* status */
.suspended {
  font-size: 14px;
  padding: 1px 2px;
  margin-right: 5px;
  color: #fff;
  background: red;
  border-radius: 5px;
}
.temporary {
  font-size: 14px;
  padding: 1px 2px;
  margin-right: 5px;
  color: #fff;
  background: orange;
  border-radius: 5px;
}
.extra {
  font-size: 14px;
  padding: 1px 2px;
  margin-right: 5px;
  color: #fff;
  background: pink;
  border-radius: 5px;
}

/* update-point */
#update-point p {
  padding: 0 15px 10px;
}

#upcoming-info .content {
  padding: 1rem 15px;
}
#upcoming-info .content h2 {
  font-size: 20px;
  border-left: 5px solid #6594e0;
  padding-left: 5px;
  margin-bottom: 15px;
}
#upcoming-info .content h3 {
  font-size: 22px;
  text-align: center;
}
#upcoming-info .content p {
  padding-bottom: 15px;
}
.upcoming-img {
  background: url("https://static.cld.navitime.jp/passstorage/images/common/totalnavi/accessinfo_20191116/shiny-bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  justify-content: center;
  padding: 6rem 0;
  margin-bottom: 15px;
}
.upcoming-img h3 {
  font-family: "Noto Serif JP";
  font-size: 28px !important;
  color: #555;
  filter: drop-shadow(0 10px 4px #778899);
}

/* trainphiles */
.offset {
  padding-top: 1rem;
  margin-top: -1rem;
}
.ex-edition {
  margin: 0 20px;
}
.ex-edition h4 {
  display: inline-block;
  padding: 0 15px;
  transform: rotate(-10deg);
  background: linear-gradient(transparent 50%, yellow 50%);
}
.ex-edition h5 {
  font-size: 35px;
  font-weight: 600;
  margin-bottom: 10px;
  transform: rotate(-10deg);
  text-align: right;
}
section#for-trainphiles .section-title {
  position: relative;
}
section#for-trainphiles .section-title .iconify {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 3rem;
}
section#for-trainphiles .section-title h1 {
  padding: 1rem 0 1rem 55px;
  letter-spacing: 0.1rem;
}
section#for-trainphiles .inner {
  position: relative;
  padding: 1rem 15px;
}
section#for-trainphiles .inner span {
  position: absolute;
  top: 5px;
  left: 3px;
  display: inline-block;
  font-family: "Noto Sans JP";
  padding: 0 5px;
  transform: rotate(-10deg);
  background: linear-gradient(transparent 60%, yellow 40%);
}
section#for-trainphiles .inner h2 {
  margin-bottom: 10px;
}
section#for-trainphiles .inner p {
  margin-bottom: 10px;
}
section#for-trainphiles .inner small {
  font-size: 14px;
  margin-bottom: 10px;
}
section#for-trainphiles .orikaeshi {
  border-left: 5px solid #6594e0;
  padding-left: 5px;
  margin-top: 20px;
}
section#for-trainphiles .hilight {
  background: linear-gradient(transparent 60%, yellow 40%);
}
.balloon {
  display: flex;
  align-items: bottom;
  padding-top: 20px;
}
.balloon .iconify {
  font-size: 2.5rem;
  padding-right: 10px;
}
.balloon p {
  font-size: 18px;
  position: relative;
  padding: 5px;
  background: #d7d7d7;
  border-radius: 5px;
}
.balloon p::before {
  content: "";
  position: absolute;
  top: 25px;
  left: -15px;
  margin-top: -15px;
  border: 5px solid transparent;
  border-right: 15px solid #d7d7d7;
  z-index: 0;
  -webkit-transform: rotate(35deg);
  -ms-transform: rotate(35deg);
  transform: rotate(35deg);
}

/* closing */
.closing {
  width: 80%;
  margin: 0 auto 1rem;
  padding: 20px;
  text-align: center;
  border: 2px solid #e9ecef;
  border-radius: 10px;
}

/* btn */
.btn-area {
  position: fixed;
  bottom: 20px;
  right: 5px;
  z-index: 2000;
  display: none;
}
.btn-area a {
  display: inline-flex;
  align-items: center;
  color: #fff;
  background: #778899;
  padding: 3px;
  border-radius: 3px;
  opacity: 0.9;
}

footer {
  background-color: #f8f9fa;
  font-size: 10px;
  color: #555;
  text-align: center;
  padding: 0.7rem 0;
}