@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Titillium+Web:ital,wght@0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap");
html {
  font-size: 62.5%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media screen and (min-width: 768px) {
  html {
    font-size: 68%;
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6em;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.1em;
  color: #333333;
  background-color: white;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.modal h5 {
  text-align: left;
}

img {
  width: 100%;
}

small {
  display: block;
  font-size: 1.2rem;
  opacity: 0.8;
}

@media screen and (min-width: 768px) {
  small {
    font-size: 1.6rem;
  }
}

.hilight {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(64%, transparent), color-stop(36%, rgba(0, 186, 134, 0.48)));
  background: linear-gradient(transparent 64%, rgba(0, 186, 134, 0.48) 36%);
}

.comment-mark {
  color: #00ba86;
  padding-left: 0.4rem;
}

.has-drop-shadow {
  -webkit-filter: drop-shadow(0 0.24rem 0.4rem rgba(0, 0, 0, 0.2));
          filter: drop-shadow(0 0.24rem 0.4rem rgba(0, 0, 0, 0.2));
}

.has-bg {
  background-color: #fafafa;
  padding: 2rem 0;
}

.has-bg--wh {
  background-color: white;
}

.mb-none {
  display: none;
}

@media screen and (min-width: 768px) {
  .mb-none {
    display: inline-block;
  }
}

@media screen and (min-width: 768px) {
  .pc-none {
    display: none;
  }
}

.global-navi {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0 6%;
  -webkit-backdrop-filter: saturate(120%) blur(1.2rem);
          backdrop-filter: saturate(120%) blur(1.2rem);
  background: linear-gradient(27deg, rgba(0, 0, 0, 0.12), rgba(51, 51, 51, 0.12) 100%), linear-gradient(-0.6turn, rgba(0, 186, 134, 0.4), rgba(4, 233, 214, 0.24), rgba(129, 168, 221, 0.08), rgba(177, 107, 225, 0.2), rgba(237, 61, 172, 0.32), rgba(243, 134, 16, 0.36));
  z-index: 8888;
}

.global-navi .brand-logo:active {
  opacity: 0.5;
}

.global-navi .nav-item {
  font-weight: 300;
  font-size: 1.6rem;
}

.global-navi__logo {
  width: 3.2rem;
  vertical-align: text-bottom;
}

.global-navi #nav-right {
  position: absolute;
  top: 0;
  right: 0;
}

.global-navi #nav-right .mb-dl-btn {
  font-size: 1.2rem;
  color: #008400;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 2rem;
  padding: 0.8rem;
}

@media screen and (min-width: 1000px) {
  .global-navi #nav-right .mb-dl-btn {
    display: none;
  }
}

.global-navi #nav-right .mb-dl-btn:active {
  opacity: .5;
}

.header {
  position: relative;
  overflow: hidden;
  height: 40rem;
  color: white;
  text-align: center;
  padding-top: 2.4rem;
  margin-bottom: 1.2rem;
}

@media screen and (min-width: 1000px) {
  .header {
    height: 68rem;
    padding-top: 4rem;
  }
}

.header__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.4)), to(rgba(0, 0, 0, 0.2))), no-repeat center 36%/cover url("https://static.cld.navitime.jp/passstorage/images/smartpass/lens/release/main_visual.png");
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), no-repeat center 36%/cover url("https://static.cld.navitime.jp/passstorage/images/smartpass/lens/release/main_visual.png");
}

.header__inner {
  width: 100%;
  height: 100%;
  max-width: 100rem;
  margin: 0 auto;
}

.header__heading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 1.2rem;
  opacity: 0;
  -webkit-animation: fadeIn .8s ease forwards;
          animation: fadeIn .8s ease forwards;
}

.header__heading .app-icon {
  width: 3.2rem;
}

.header__heading .app-name {
  letter-spacing: 0.16em;
  padding-left: 0.8rem;
}

@media screen and (min-width: 1000px) {
  .header__heading {
    padding-top: 14rem;
  }
  .header__heading .app-icon {
    width: 6rem;
  }
  .header__heading .app-name {
    font-size: 2.8rem;
    letter-spacing: 0.16em;
    padding-left: 0.8rem;
  }
}

.header__headcopy {
  opacity: 0;
  -webkit-animation: fadeIn 1.2s ease forwards;
          animation: fadeIn 1.2s ease forwards;
}

@media screen and (min-width: 1000px) {
  .header__headcopy {
    font-size: 5.6rem;
    padding: 2.4rem 0 4.8rem;
  }
}

.header__device {
  display: block;
  margin: 0 auto;
  width: 20rem;
  padding-top: 2rem;
  opacity: 0;
  -webkit-animation: fadeIn 1.8s ease forwards;
          animation: fadeIn 1.8s ease forwards;
}

@media screen and (min-width: 1000px) {
  .header__device {
    width: 24rem;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    translate: transformY(1.2rem);
  }
  100% {
    opacity: 1;
    translate: transformY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    translate: transformY(1.2rem);
  }
  100% {
    opacity: 1;
    translate: transformY(0);
  }
}

.details-cover-icon {
  display: block;
  margin: 0 auto 2rem;
  font-size: 4rem;
}

@media screen and (min-width: 768px) {
  .details-cover-icon {
    font-size: 6rem;
  }
}

.details-cover-icon.active {
  -webkit-animation: flash .4s 2 forwards;
          animation: flash .4s 2 forwards;
}

@-webkit-keyframes flash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.section {
  padding-top: 4rem;
  margin-bottom: 4rem;
}

@media screen and (min-width: 768px) {
  .section {
    padding-top: 8rem;
    margin-bottom: 8rem;
  }
}

.section .hilight--fw700 {
  font-weight: 700;
}

@media screen and (min-width: 1000px) {
  .section .align-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.section__heading {
  font-size: 2.2rem;
  text-align: center;
  margin: 0 auto 2.4rem;
}

@media screen and (min-width: 768px) {
  .section__heading {
    font-size: 4rem;
    margin-bottom: 4rem;
  }
  .section__heading--overview {
    font-weight: 700;
  }
}

.section__panel {
  padding: 2rem 1.2rem;
}

@media screen and (min-width: 768px) {
  .section__panel {
    padding: 4rem 2.4rem;
  }
}

.section__panel .panel__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-left: 2.4rem;
  margin-bottom: 2rem;
}

@media screen and (min-width: 768px) {
  .section__panel .panel__list {
    padding-left: 6rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}

.section__panel .panel__list .icon__check {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 2.8rem;
  margin-top: 0.8rem;
  margin-right: 0.8rem;
}

@media screen and (min-width: 768px) {
  .section__panel .panel__list .icon__check {
    width: 4rem;
  }
}

.section__panel .panel__list .icon__check .check_material1 {
  stroke: #e1e5ea;
  fill: none;
}

.section__panel .panel__list .icon__check .check_material2 {
  stroke: #00ba86;
  fill: none;
}

.section__panel .panel__list h5 {
  font-weight: 500;
}

.section__img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.section__img .cover-img {
  display: block;
  padding: 1.2rem 0;
  margin: 0 auto;
  width: 20rem;
  opacity: 0;
}

.section__btn {
  text-align: center;
  margin: 0 auto;
}

.section__btn h5 {
  font-size: 1.2rem;
  font-weight: 500;
}

@media screen and (min-width: 768px) {
  .section__btn h5 {
    font-size: 1.6rem;
  }
}

.section__btn a .iconify {
  font-size: 2rem;
  vertical-align: middle;
  margin-bottom: 0.2rem;
}

@media screen and (min-width: 768px) {
  .overview {
    padding-top: 12rem;
  }
}

.overview__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.overview__app-name {
  font-weight: 700;
}

.overview .ar {
  position: relative;
  display: inline-block;
  width: 6rem;
  height: 6rem;
  font-size: 2.4rem;
  text-align: center;
  font-weight: 400;
  line-height: 5.2rem;
  border: solid 0.36rem rgba(101, 78, 163, 0.8);
  background-color: #fff;
  z-index: 2;
  vertical-align: 0.2rem;
}

@media screen and (min-width: 768px) {
  .overview .ar {
    width: 12rem;
    height: 12rem;
    font-size: 6rem;
    text-align: center;
    font-weight: 400;
    line-height: 10rem;
    border: solid 0.6rem rgba(101, 78, 163, 0.8);
    margin: 0 2rem;
    vertical-align: -0.4rem;
  }
}

.overview .ar::before, .overview .ar::after {
  content: "";
  position: absolute;
  display: block;
  background-color: #fff;
  z-index: -1;
}

.overview .ar::before {
  top: -1.2rem;
  bottom: -1.2rem;
  left: 1.2rem;
  right: 1.2rem;
}

@media screen and (min-width: 768px) {
  .overview .ar::before {
    top: -2.8rem;
    bottom: -2.8rem;
    left: 2.8rem;
    right: 2.8rem;
  }
}

.overview .ar::after {
  top: 1.2rem;
  bottom: 1.2rem;
  left: -1.2rem;
  right: -1.2rem;
}

@media screen and (min-width: 768px) {
  .overview .ar::after {
    top: 2.8rem;
    bottom: 2.8rem;
    left: -2.8rem;
    right: -2.8rem;
  }
}

@media screen and (min-width: 768px) {
  .overview .section__content {
    font-size: 2.4rem;
    font-weight: 700;
  }
  .overview .section__content p {
    padding-bottom: 2rem;
  }
}

#features {
  margin-bottom: 0;
}

#details .content-wrapper .content {
  margin-bottom: 1.2rem;
}

#details .content-wrapper .content__icon {
  display: block;
  margin: 0 auto;
  font-size: 12rem;
  color: #00ba86;
}

#details .content-wrapper .content__heading {
  text-align: center;
  font-weight: 700;
}

#details .content-wrapper .content p {
  line-height: 1.4;
  font-size: 1.4rem;
}

#bg {
  background: linear-gradient(217deg, rgba(229, 239, 229, 0.12), rgba(229, 239, 229, 0.48)), no-repeat center bottom/contain url("https://static.cld.navitime.jp/passstorage/images/sugotoku/lens/release/thin-town.png");
  padding-bottom: 6rem;
}

@media screen and (min-width: 1000px) {
  #bg {
    background-size: 140%;
    padding-bottom: 20rem;
  }
}

.availables {
  padding-bottom: 4rem;
  margin-bottom: 0;
}

@media screen and (min-width: 1000px) {
  .availables {
    padding-bottom: 16rem;
  }
}

@media screen and (min-width: 768px) {
  .availables__content {
    text-align: center;
  }
  .availables__content p {
    font-size: 2.4rem;
  }
}

.availables__heading {
  font-weight: 700;
}

@media screen and (min-width: 768px) {
  .availables__heading {
    font-size: 2.8rem;
  }
}

.availables__heading .iconify {
  color: #00ba86;
  font-size: 2.4rem;
  vertical-align: -0.4rem;
}

@media screen and (min-width: 768px) {
  .availables__heading .iconify {
    font-size: 3.6rem;
    vertical-align: -0.6rem;
  }
}

.availables .has-border {
  line-height: 1.6;
  font-weight: 700;
  padding-left: 0.8rem;
  border-left: 0.8rem solid #00ba86;
}

@media screen and (min-width: 768px) {
  .availables .has-border {
    font-size: 2.4rem;
  }
}

.availables .icon-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.availables .icon-area .iconify {
  font-size: 8rem;
  -webkit-filter: drop-shadow(6px 6px 4px rgba(51, 51, 51, 0.12));
          filter: drop-shadow(6px 6px 4px rgba(51, 51, 51, 0.12));
}

.availables .comment-area {
  padding: 1.2rem;
}

.availables .comment-area p {
  font-size: 1.2rem;
}

.availables .comment-area h6 {
  color: #00ba86;
}

.footer__comment {
  text-align: center;
  font-size: 1.4rem;
}

.footer__comment p {
  padding-bottom: 2rem;
  margin: 0;
}

@media screen and (min-width: 768px) {
  .footer__comment {
    font-size: 1.6rem;
  }
}

.footer__copyright {
  background-color: #f8f9fa;
  color: rgba(51, 51, 51, 0.48);
  padding: 2rem;
  text-align: center;
  font-size: 1.2rem;
}

.footer__copyright::before {
  content: "\00a9NAVITIME JAPAN";
}

.modal-text {
  font-size: 1.2rem;
  color: rgba(51, 51, 51, 0.6);
  text-decoration: underline;
}

.modal-content h4 .iconify {
  font-size: 2.8rem;
  vertical-align: -0.44rem;
}

.modal-content p {
  text-align: left;
}

.modal-content p .iconify {
  color: #00ba86;
}

.popUp.active {
  -webkit-animation: fadeIn .6s ease forwards;
          animation: fadeIn .6s ease forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2rem);
            transform: translateY(2rem);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateYY(0);
            transform: translateYY(0);
  }
}
/*# sourceMappingURL=styles.css.map */