/* Sass Document */
.heading_content {
  padding-top: 10rem;
  padding-bottom: 13rem;
}

.heading_txt {
  font-size: 2rem;
  line-height: 1.7;
}
@media screen and (max-width: 959.98px) {
  .heading_txt {
    font-size: 3rem;
  }
}

.guide_content .note {
  font-size: 2rem;
  line-height: 1.7;
}

#sec01 {
  padding-bottom: 13rem;
}
@media screen and (max-width: 959.98px) {
  #sec01 {
    padding-bottom: 14rem;
  }
}
#sec01 .note {
  margin-top: 1rem;
}
#sec01 .img_ariport {
  margin: 3rem 0;
  max-width: 77rem;
}
#sec01 .img_ariport img {
  border-radius: 1.6rem;
}
#sec01 .guide_block .sbsg_ttl {
  margin-bottom: 2rem;
}
#sec01 .step_by_step {
  background-color: #fff;
  padding-left: 0;
}
#sec01 .step_by_step .ttl {
  margin-left: 0;
}
@media screen and (max-width: 959.98px) {
  #sec01 .step_by_step {
    padding: 0 0 3rem;
  }
  #sec01 .step_by_step .txt_box {
    margin-top: 1rem;
  }
}

#sec02 {
  padding-bottom: 13rem;
}
@media screen and (max-width: 959.98px) {
  #sec02 {
    padding-bottom: 14rem;
  }
}

#sec02 .note {
  margin-top: 6rem;
  font-size: 2rem;
}
@media screen and (max-width: 959.98px) {
  #sec02 .note {
    margin-top: 3.6rem;
    font-size: 3rem;
    line-height: 1.8;
  }
}

.sbsg_ttl {
  font-size: 2.2rem;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  color: #002952;
}
.sbsg_ttl .icn {
  display: inline-block;
  margin-right: 1rem;
  width: 2.1rem;
  position: relative;
  top: -0.2rem;
}
.sbsg_ttl .icn img {
  vertical-align: middle;
  width: 100%;
}

.anc_list {
  margin-top: 10rem;
  display: flex;
  gap: 0 2.2rem;
}
@media screen and (max-width: 959.98px) {
  .anc_list {
    flex-direction: column;
    gap: 2.2rem 0;
  }
}
.anc_list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem 2rem;
  border-radius: 1rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: #002952;
  text-decoration: none;
  transition: 0.3s;
}
@media screen and (max-width: 959.98px) {
  .anc_list li a {
    width: 100%;
    font-size: 3rem;
  }
}
.anc_list li a:hover, .anc_list li a:focus {
  opacity: 0.7;
}
.anc_list li a::after {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: solid 1px #002952;
  border-bottom: solid 1px #002952;
  transform: rotate(45deg);
  margin-left: 1rem;
  margin-top: -0.3rem;
}
@media screen and (max-width: 959.98px) {
  .anc_list li a::after {
    width: 0.8rem;
    height: 0.8rem;
  }
}
.anc_list li.anc_regular a {
  background-color: #F2F2FA;
}
.anc_list li.anc_green a {
  background-color: #EBF5F2;
}
.anc_list li.anc_digital a {
  background-color: #F7F2ED;
}
.anc_list li.icon_machine a::before {
  content: "";
  margin-right: 1rem;
  display: block;
  width: 1.5rem;
  height: 2.1rem;
  background: url(/travel-information/assets/img/train-usage-guide/howto/guide/icon_machine.svg) no-repeat center/contain;
}
@media screen and (max-width: 959.98px) {
  .anc_list li.icon_machine a::before {
    width: 2.5rem;
    height: 3.5rem;
  }
}
.anc_list li.icon_digital a::before {
  content: "";
  margin-right: 1rem;
  display: block;
  width: 1.5rem;
  height: 2.1rem;
  background: url(/travel-information/assets/img/train-usage-guide/howto/guide/icon_digital.svg) no-repeat center/contain;
}
@media screen and (max-width: 959.98px) {
  .anc_list li.icon_digital a::before {
    width: 2.5rem;
    height: 3.5rem;
  }
}

.sec02_clm {
  margin-top: 10rem;
}
.sec02_clm .clm_bg {
  margin-top: 4rem;
  padding: 8rem 0;
}
.sec02_clm .clm_bg.arrow {
  margin-top: 6.1rem;
  position: relative;
}
.sec02_clm .clm_bg.arrow::before {
  content: "";
  width: 5rem;
  height: 2.7rem;
  position: absolute;
  left: 50%;
  top: -2.1rem;
  transform: translateX(-50%);
}
.sec02_clm .clm_bg.no_color {
  padding: 0;
}
.sec02_clm .step_by_step {
  background-color: #fff;
}

#ticket_regular .clm_bg {
  background-color: #F2F2FA;
}
#ticket_regular .clm_bg.arrow::before {
  background: url(/travel-information/assets/img/train-usage-guide/howto/guide/icon_arrow_01.svg) no-repeat top/contain;
}

#ticket_green .clm_bg {
  background-color: #EBF5F2;
}
#ticket_green .clm_bg.arrow::before {
  background: url(/travel-information/assets/img/train-usage-guide/howto/guide/icon_arrow_02.svg) no-repeat top/contain;
}

#ticket_digital .clm_bg {
  background-color: #F7F2ED;
}
#ticket_digital .clm_bg.arrow::before {
  background: url(/travel-information/assets/img/train-usage-guide/howto/guide/icon_arrow_03.svg) no-repeat top/contain;
}

#ticket_advance .clm_bg {
  background-color: #EBF5F2;
}
#ticket_advance .clm_bg.arrow::before {
  background: url(/travel-information/assets/img/train-usage-guide/howto/guide/icon_arrow_02.svg) no-repeat top/contain;
}

.ttl_ticket_clm {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  font-weight: 600;
  color: #002952;
}
@media screen and (max-width: 959.98px) {
  .ttl_ticket_clm {
    font-size: 4rem;
    line-height: 1.125;
  }
}
.ttl_ticket_clm.icon_machine::before {
  content: "";
  width: 2.5rem;
  height: 3.4rem;
  background: url(/travel-information/assets/img/train-usage-guide/howto/guide/icon_machine.svg) no-repeat center/contain;
  display: block;
  margin-right: 1rem;
  flex: none;
}
@media screen and (max-width: 959.98px) {
  .ttl_ticket_clm.icon_machine::before {
    width: 3.5rem;
    height: 4.8rem;
    margin-right: 2rem;
  }
}
.ttl_ticket_clm.icon_digital::before {
  content: "";
  width: 2.5rem;
  height: 3.4rem;
  background: url(/travel-information/assets/img/train-usage-guide/howto/guide/icon_digital.svg) no-repeat center/contain;
  display: block;
  margin-right: 1rem;
  flex: none;
}
@media screen and (max-width: 959.98px) {
  .ttl_ticket_clm.icon_digital::before {
    width: 3.5rem;
    height: 4.8rem;
    margin-right: 2rem;
  }
}
.ttl_ticket_clm.icon_people::before {
  content: "";
  width: 4.4rem;
  height: 3.1rem;
  background: url(/travel-information/assets/img/train-usage-guide/howto/guide/icon_people.svg) no-repeat center/contain;
  display: block;
  margin-right: 1rem;
  flex: none;
}
@media screen and (max-width: 959.98px) {
  .ttl_ticket_clm.icon_people::before {
    width: 5.5rem;
    height: 3.9rem;
    margin-right: 2rem;
  }
}

.ttl_train {
  padding-top: 10rem;
}
.ttl_train .txt {
  font-size: 2.6rem;
}
@media screen and (max-width: 959.98px) {
  .ttl_train .txt {
    font-size: 4.2rem;
  }
}
.ttl_train + .heading_txt {
  margin-top: 4rem;
}

.flex_block {
  display: flex;
  justify-content: space-between;
  margin-top: 4rem;
}
@media screen and (max-width: 959.98px) {
  .flex_block {
    display: block;
  }
}

.t_block {
  padding: 4rem 2rem;
  background-color: #ebf2f7;
  border-radius: 1.6rem;
  width: 57rem;
}
@media screen and (max-width: 959.98px) {
  .t_block {
    width: auto;
    padding: 5rem 4.6rem;
  }
  .t_block + .t_block {
    margin-top: 3.6rem;
  }
}
.t_block p {
  font-size: 1.6rem;
  max-width: 37.6rem;
  text-align: center;
  line-height: 1.625;
  font-weight: 600;
  margin: 1.6rem auto 0;
}
@media screen and (max-width: 959.98px) {
  .t_block p {
    max-width: inherit;
    font-size: 3rem;
    line-height: 1.4666666667;
    margin-top: 4rem;
  }
}
.t_block.midorinomadoguchi .img_wrapper img {
  width: 13.8rem;
  height: 13.3rem;
  border-radius: 0.6rem;
}
.t_block .img_wrapper {
  width: 37.2rem;
  height: 18.1rem;
  margin: 0 auto;
  display: grid;
  place-content: center;
}
@media screen and (max-width: 959.98px) {
  .t_block .img_wrapper {
    display: block;
    width: fit-content;
    height: auto;
  }
}
.t_block .img_wrapper img {
  max-width: 100%;
  height: 100%;
  display: block;
  border-radius: 1.6rem;
  object-fit: contain;
}
@media screen and (max-width: 959.98px) {
  .t_block .img_wrapper img {
    height: auto;
  }
}

.method_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 9rem 0;
  margin-top: 11rem;
}
@media screen and (max-width: 959.98px) {
  .method_content {
    display: block;
  }
}

.method_block {
  background-color: #ebf2f7;
  border-radius: 1.6rem;
  position: relative;
  padding: 7rem 4.8rem 4rem;
  width: 58.6rem;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 959.98px) {
  .method_block {
    width: auto;
    display: block;
    padding: 8rem 4.8rem 5rem;
  }
  .method_block + .method_block {
    margin-top: 9.6rem;
  }
}
.method_block .icn {
  position: absolute;
  top: 0;
  right: 0;
  left: 50%;
  width: 6rem;
  height: 6rem;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 959.98px) {
  .method_block .icn {
    width: 9.2rem;
    height: 9.2rem;
  }
}
.method_block .ttl {
  text-align: center;
  color: #002952;
  font-family: "Inter", sans-serif;
  font-size: 3rem;
  line-height: 1.4;
  font-weight: 700;
}
@media screen and (max-width: 959.98px) {
  .method_block .ttl {
    font-size: 4rem;
  }
}
.method_block .ttl + .txt {
  margin-top: 2rem;
}
@media screen and (max-width: 959.98px) {
  .method_block .ttl + .txt {
    margin-top: 4rem;
  }
}
.method_block .txt {
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.625;
  margin-bottom: 3rem;
}
@media screen and (max-width: 959.98px) {
  .method_block .txt {
    font-size: 3rem;
    margin-bottom: 5rem;
  }
}
.method_block .img_wrapper {
  margin: auto 0 0;
}
.method_block .img_wrapper img {
  border-radius: 1.6rem;
}

#sec03 {
  padding-bottom: 13rem;
}
@media screen and (max-width: 959.98px) {
  #sec03 {
    padding-bottom: 14rem;
  }
}
#sec03 .note {
  margin-top: 6rem;
  font-size: 2rem;
}
@media screen and (max-width: 959.98px) {
  #sec03 .note {
    margin-top: 3.6rem;
    font-size: 3rem;
    line-height: 1.8;
  }
}

#sec04,
#sec05 {
  padding-bottom: 13rem;
}
@media screen and (max-width: 959.98px) {
  #sec04,
  #sec05 {
    padding-bottom: 14rem;
  }
}

.train_content {
  margin-top: 6rem;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  grid-template-columns: 1fr 48rem;
  grid-template-rows: auto 1fr;
  gap: 2rem 10rem;
  justify-content: space-between;
  grid-template-areas: "txt_block img" "btn_wrapper img";
}
@media screen and (max-width: 959.98px) {
  .train_content {
    display: block;
  }
  .train_content + .train_content {
    margin-top: 12rem;
  }
}
.train_content .txt_block {
  grid-area: txt_block;
}
.train_content .img_wrapper {
  grid-area: img;
}
.train_content .img_wrapper img {
  border-radius: 1.6rem;
}
@media screen and (max-width: 959.98px) {
  .train_content .img_wrapper {
    margin: 3.6rem 0;
  }
}
.train_content .btn_wrapper {
  grid-area: btn_wrapper;
}
.train_content .btn_wrapper .btn {
  padding-left: 1rem;
  padding-right: 1rem;
}
.train_content .btn_wrapper .txt {
  margin-top: 0;
  margin-bottom: 2rem;
}
@media screen and (max-width: 959.98px) {
  .train_content .btn_wrapper .txt {
    margin-bottom: 3.6rem;
  }
}
.train_content .ttl {
  font-family: "Inter", sans-serif;
  font-size: 3.2rem;
  font-weight: 600;
  color: #002952;
}
@media screen and (max-width: 959.98px) {
  .train_content .ttl {
    font-size: 5.2rem;
  }
}
.train_content .ttl_train {
  padding-top: 2rem;
}
.train_content .ttl_train .txt {
  font-size: 2.6rem;
}
@media screen and (max-width: 959.98px) {
  .train_content .ttl_train .txt {
    font-size: 4.2rem;
    line-height: 1.4761904762;
  }
}
@media screen and (max-width: 959.98px) {
  .train_content .ttl_train + .txt {
    margin-top: 6rem;
  }
}
.train_content .txt {
  font-size: 1.6rem;
  line-height: 1.625;
  margin-top: 2rem;
}
@media screen and (max-width: 959.98px) {
  .train_content .txt {
    font-size: 3rem;
    margin-top: 3.6rem;
  }
}
.train_content .icn_arrow {
  padding-left: 5.4rem;
  padding-right: 0;
  margin-top: 2rem;
}
@media screen and (max-width: 959.98px) {
  .train_content .icn_arrow {
    padding-left: 8.4rem;
    margin-top: 3.6rem;
  }
}
.train_content .icn_arrow::before {
  left: 0;
}
@media screen and (max-width: 959.98px) {
  .train_content .icn_arrow::before {
    width: 6rem;
    height: 6rem;
  }
}
.train_content .icn_arrow::after {
  left: 1.4rem;
}
@media screen and (max-width: 959.98px) {
  .train_content .icn_arrow::after {
    width: 1.4rem;
    height: 1.4rem;
    left: 1.9rem;
  }
}
.train_content .icn_pdf {
  position: relative;
  padding-right: 2.3rem;
}
@media screen and (max-width: 959.98px) {
  .train_content .icn_pdf {
    display: inline-block;
    padding-right: 6rem;
    width: fit-content;
  }
}
.train_content .icn_pdf::after {
  content: "";
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  right: 0;
  bottom: 0.2rem;
  background: url(/travel-information/assets/img/common/icn_pdf.svg) no-repeat center center/100% 100%;
}
@media screen and (max-width: 959.98px) {
  .train_content .icn_pdf::after {
    width: 3.8rem;
    height: 3.8rem;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
  }
}
.train_content .notice {
  margin-top: 2rem;
}
@media screen and (max-width: 959.98px) {
  .train_content .notice {
    margin-top: 6rem;
  }
}
.train_content .notice .notice-ttl {
  font-size: 1.8rem;
  font-weight: 700;
}
@media screen and (max-width: 959.98px) {
  .train_content .notice .notice-ttl {
    font-size: 3rem;
  }
}
.train_content .notice .txt {
  margin-top: 0.5rem;
}
@media screen and (max-width: 959.98px) {
  .train_content .notice .txt {
    margin-top: 1rem;
  }
}
.train_content .notice .notice-img {
  margin: 2rem 0 0;
}
@media screen and (max-width: 959.98px) {
  .train_content .notice .notice-img {
    margin-top: 3rem;
  }
}
@media screen and (max-width: 959.98px) {
  .train_content .btn_wrapper {
    width: auto;
    margin-top: 3.6rem;
  }
}
@media screen and (max-width: 959.98px) {
  .train_content .btn {
    width: 100%;
  }
}

.similar-articles {
  margin-top: 12rem;
}
@media screen and (max-width: 959.98px) {
  .similar-articles {
    margin-top: 14rem;
  }
}