/* Sass Document */
.kv {
  min-height: 27rem;
  padding: 5rem 0;
}
@media screen and (max-width: 959.98px) {
  .kv {
    padding: 8rem 0;
  }
}
.kv.no-bg .kv_ttl-wrapper {
  position: static;
}
.kv .icn {
  margin-bottom: 1.4rem;
  width: 5rem;
}
@media screen and (max-width: 959.98px) {
  .kv .icn {
    width: 6.8rem;
    margin-bottom: 0;
  }
}
.kv .content_ttl {
  color: #002952;
  font-size: 5rem;
  letter-spacing: 0.03em;
  line-height: 1.24;
}
@media screen and (max-width: 959.98px) {
  .kv .content_ttl {
    font-size: 6rem;
  }
}
.kv .breadcrumb {
  color: #002952;
  margin-top: 3rem;
}
.kv .breadcrumb_list::after {
  border-color: #002952;
}

.similar-articles .img_wrapper {
  margin: 0;
}
.similar-articles .img_wrapper img {
  border-radius: 1.6rem;
}
.similar-articles .img_wrapper.img_380-215 {
  aspect-ratio: 380/215;
}
@media screen and (max-width: 959.98px) {
  .similar-articles .img_wrapper::before, .similar-articles .img_wrapper::after {
    display: none;
  }
}
.similar-articles .card_body {
  padding-top: 2rem;
}
@media screen and (max-width: 959.98px) {
  .similar-articles .card_body {
    padding-top: 5rem;
  }
}

.toc {
  background-color: #ebf2f7;
  border-radius: 1rem;
  max-width: 120rem;
  margin: 0 auto;
  padding: 5rem 10rem 5rem 25rem;
  position: relative;
}
@media screen and (max-width: 959.98px) {
  .toc {
    max-width: calc(100% - 9.6rem);
    padding: 6rem 7rem 5rem;
    margin-top: 4rem;
  }
}

.toc_content.col--2 {
  display: flex;
  gap: 0 10rem;
}
@media screen and (max-width: 959.98px) {
  .toc_content.col--2 {
    display: block;
  }
}
.toc_content.col--2 .toc_list {
  max-width: 33.4rem;
}
@media screen and (max-width: 959.98px) {
  .toc_content.col--2 .toc_list {
    max-width: inherit;
  }
}

.toc_ttl {
  position: absolute;
  background-color: #0066bf;
  color: #fff;
  width: 16rem;
  min-height: 4rem;
  padding: 0.5rem 1rem;
  display: grid;
  place-content: center;
  font-size: 1.8rem;
  font-weight: 600;
  top: 2rem;
  left: -2rem;
  font-family: "Inter", sans-serif;
  border-radius: 1rem;
}
@media screen and (max-width: 959.98px) {
  .toc_ttl {
    font-size: 3.4rem;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 0;
    transform: translateY(-50%);
    width: fit-content;
    max-width: 90%;
    padding: 0.5rem 3rem;
  }
}

.toc_list {
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  color: #002952;
  font-size: 1.6rem;
  font-weight: 500;
}
@media screen and (max-width: 959.98px) {
  .toc_list {
    font-size: 2.8rem;
    display: block;
  }
  .toc_list + .toc_list {
    margin-top: 1.6rem;
  }
}
.toc_list li {
  line-height: 1.6071428571;
}
.toc_list li + li {
  margin-top: 2rem;
}
@media screen and (max-width: 959.98px) {
  .toc_list li + li {
    margin-top: 1.4rem;
  }
}
.toc_list a {
  text-decoration: none;
  color: currentColor;
  transition: 0.3s color;
  display: block;
}
@media screen and (max-width: 959.98px) {
  .toc_list a {
    padding: 2rem 0;
  }
}
@media (any-hover: hover) {
  .toc_list a:hover, .toc_list a:focus {
    color: #0066bf;
  }
}

.toc_list_sub {
  margin-top: 1.5rem;
  padding-left: 2rem;
  font-size: 1.4rem;
}
@media screen and (max-width: 959.98px) {
  .toc_list_sub {
    font-size: 2.8rem;
    padding-left: 0;
  }
}
.toc_list_sub li {
  position: relative;
  padding-left: 1.6rem;
}
@media screen and (max-width: 959.98px) {
  .toc_list_sub li {
    padding-left: 2.5rem;
  }
}
.toc_list_sub li::before {
  content: "";
  position: absolute;
  width: 0.6rem;
  height: 2px;
  border-radius: 100px;
  left: 0;
  top: 0.8em;
  background-color: #0066bf;
}
@media screen and (max-width: 959.98px) {
  .toc_list_sub li::before {
    width: 1.4rem;
    top: 1.5em;
  }
}
.toc_list_sub li + li {
  margin-top: 1.6rem;
}
.info-jrw {
  text-align: center;
}
.info-jrw p {
  font-size: 2rem;
  color: #002952;
  font-weight: 600;
}
@media screen and (max-width: 959.98px) {
  .info-jrw p {
    font-size: 2.8rem;
  }
}

.logo-jrw {
  width: 15.3rem;
  margin: 0 auto 2.6rem;
}
@media screen and (max-width: 959.98px) {
  .logo-jrw {
    width: 22.1rem;
    margin-bottom: 3.8rem;
  }
}
.logo-jrw img {
  width: 100%;
  height: auto;
}

.htu_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 3rem 0;
}
@media screen and (max-width: 959.98px) {
  .htu_list {
    display: block;
  }
}
.htu_list .num {
  font-size: 1.4rem;
  color: #fff;
  background-color: #002952;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-content: center;
  border-radius: 100%;
  margin-bottom: 1.3rem;
}
@media screen and (max-width: 959.98px) {
  .htu_list .num {
    font-size: 2.6rem;
    width: 4.6rem;
    height: 4.6rem;
    flex-shrink: 0;
    margin-right: 1.6rem;
  }
}
.htu_list .num + .num_sub {
  margin-right: 1.6rem;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 600;
}
@media screen and (max-width: 959.98px) {
  .htu_list .num + .num_sub {
    font-size: 2.6rem;
    margin-right: 2rem;
  }
}
.htu_list .num + .num_sub::before {
  content: "";
  margin: 0 0.6rem;
  width: 0.6rem;
  height: 0.2rem;
  background-color: #002952;
  display: block;
}
@media screen and (max-width: 959.98px) {
  .htu_list .num + .num_sub::before {
    margin: 0 1.6rem 0 0;
    width: 0.8rem;
  }
}
.htu_list .col--2 {
  display: flex;
  justify-content: space-between;
}
.htu_list .col--2 .block:not(:last-of-type) .img_wrapper::after {
  left: calc(100% + 1.2rem);
}
@media screen and (max-width: 959.98px) {
  .htu_list .col--2 .block:not(:last-of-type) .img_wrapper::after {
    left: calc(100% + 3.9rem);
  }
}
.htu_list .col--4 {
  display: flex;
  gap: 0 5.2rem;
}
@media screen and (max-width: 959.98px) {
  .htu_list .col--4 {
    flex-wrap: wrap;
    gap: 5rem 5.2rem;
  }
}
.htu_list .block {
  width: 24.2rem;
}
.htu_list .block:not(:last-of-type) .img_wrapper {
  position: relative;
}
.htu_list .block:not(:last-of-type) .img_wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 1.8rem);
  width: 1.2rem;
  height: 2rem;
  background: url(/travel-information/assets/img/train-usage-guide/icn_list_arrow.svg) no-repeat center center/100% 100%;
  transform: translateY(-50%);
}
@media screen and (max-width: 959.98px) {
  .htu_list .block:not(:last-of-type) .img_wrapper::after {
    width: 1.8rem;
    height: 3.2rem;
  }
}

.htu_item {
  background-color: #fff;
  border-radius: 1.6rem;
  width: 48.3333333333%;
}
@media screen and (max-width: 959.98px) {
  .htu_item {
    width: auto;
  }
  .htu_item + .htu_item {
    margin-top: 4rem;
  }
}
.htu_item.wide {
  width: 100%;
}
.htu_item .ttl {
  font-size: 1.6rem;
  font-family: "Inter", sans-serif;
  color: #002952;
  font-weight: 600;
}
@media screen and (max-width: 959.98px) {
  .htu_item .ttl {
    font-size: 3rem;
    margin-bottom: 2.3rem;
  }
}
.htu_item .ttl + .txt {
  margin-top: 0.4rem;
}
.htu_item .ttl + div {
  margin-top: 1.5rem;
}
.htu_item .ttl.number {
  display: flex;
  align-items: center;
}
.htu_item .ttl .num {
  margin-bottom: 0;
}

.htu_inner {
  padding: 1.8rem 3rem;
}
@media screen and (max-width: 959.98px) {
  .htu_inner {
    padding: 4rem;
  }
}
.htu_inner.col--2 {
  gap: 0 3rem;
}
.htu_inner a {
  text-decoration: none;
  display: inline-block;
  color: #0066bf;
  font-family: "Inter", sans-serif;
  font-size: 1.6rem;
  line-height: 1.25;
  margin-top: 1.2rem;
  padding-left: 1.6rem;
  position: relative;
  font-weight: 600;
}
@media (any-hover) {
  .htu_inner a {
    transition: 0.3s;
  }
  .htu_inner a:hover, .htu_inner a:focus {
    opacity: 0.7;
  }
}
@media screen and (max-width: 959.98px) {
  .htu_inner a {
    font-size: 2.8rem;
    padding-left: 2.5rem;
  }
}
.htu_inner a::before {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 1px solid #0066bf;
  border-right: 1px solid #0066bf;
  transform: rotate(45deg);
}
@media screen and (max-width: 959.98px) {
  .htu_inner a::before {
    width: 1rem;
    height: 1rem;
  }
}
.htu_inner .img_wrapper {
  margin: 0;
  width: 24.6rem;
  flex-shrink: 0;
}
.htu_inner .txt {
  font-size: 1.6rem;
  line-height: 1.625;
}
@media screen and (max-width: 959.98px) {
  .htu_inner .txt {
    font-size: 2.8rem;
    line-height: 1.5714285714;
  }
}
.htu_inner .txt + .txt {
  margin-top: 1.2rem;
}
.htu_inner .txt.icn {
  padding-left: 3.5rem;
  position: relative;
  margin-top: 1.8rem;
  max-width: 37.6rem;
}
@media screen and (max-width: 959.98px) {
  .htu_inner .txt.icn {
    max-width: inherit;
    padding-left: 6rem;
  }
}
.htu_inner .txt.icn::before {
  content: "";
  position: absolute;
  height: 2.2rem;
  top: 0.2rem;
  background-position: top left;
  background-repeat: no-repeat;
  left: 0;
  background-size: 100% 100%;
}
@media screen and (max-width: 959.98px) {
  .htu_inner .txt.icn::before {
    height: 5.5rem;
    top: -0.5rem;
  }
}
.htu_inner .txt.icn.cercle::before {
  background-image: url(/travel-information/assets/img/train-usage-guide/icn_cercle.svg);
  width: 2.5rem;
  left: -0.2rem;
}
@media screen and (max-width: 959.98px) {
  .htu_inner .txt.icn.cercle::before {
    width: 4.1rem;
  }
}
.htu_inner .txt.icn.triangle::before {
  background-image: url(/travel-information/assets/img/train-usage-guide/icn_triangle.svg);
  width: 2.5rem;
  left: -0.2rem;
}
@media screen and (max-width: 959.98px) {
  .htu_inner .txt.icn.triangle::before {
    width: 5rem;
    left: -0.8rem;
  }
}
.htu_inner .txt.icn.cross::before {
  background-image: url(/travel-information/assets/img/train-usage-guide/icn_cross.svg);
  width: 2.3rem;
}
@media screen and (max-width: 959.98px) {
  .htu_inner .txt.icn.cross::before {
    width: 3.6rem;
  }
}
.htu_inner .block .img_wrapper {
  margin-bottom: 1.2rem;
}

.pd6 {
  padding: 6rem;
}
@media screen and (max-width: 959.98px) {
  .pd6 {
    padding: 4rem 0;
  }
}

/* ----------------------------------------------------------------------------------------------------
*	close_btn
* --------------------------------------------------------------------------------------------------*/
.view_toggle-btn {
  position: relative;
  border: none;
  background-color: transparent;
  font: inherit;
  font-size: 2rem;
  font-weight: 700;
  padding-left: 4rem;
  cursor: pointer;
  color: #002952;
  transition: 0.3s color;
}
@media screen and (max-width: 959.98px) {
  .view_toggle-btn {
    font-size: 3.2rem;
    padding-left: 5rem;
  }
}
@media (any-hover: hover) {
  .view_toggle-btn:hover {
    color: #0066bf;
  }
}
.view_toggle-btn::before {
  content: "";
  position: absolute;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  background-color: #0066bf;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 959.98px) {
  .view_toggle-btn::before {
    width: 4rem;
    height: 4rem;
  }
}
.view_toggle-btn::after {
  content: "";
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  border-bottom: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  top: 50%;
  left: 1.1rem;
  transform: translateY(-67%) rotate(45deg);
}
@media screen and (max-width: 959.98px) {
  .view_toggle-btn::after {
    width: 0.8rem;
    height: 0.8rem;
    left: 1.5rem;
  }
}
.view_toggle-btn.is-close::after {
  transform: translateY(-28%) rotate(-135deg);
}
.view_toggle-btn.is-hide {
  display: none;
}

.close-btn-wrapper {
  margin: 3rem auto 0;
  text-align: center;
}

.view_toggle-content {
  background-color: #ebf2f7;
  padding: 4rem 0;
  position: relative;
  margin-top: 1.8rem;
  display: none;
}
.view_toggle-content::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 0.7rem);
  background: url(/travel-information/assets/img/train-usage-guide/howto/toggle_arrow.svg) no-repeat bottom center/100% 100%;
  width: 5rem;
  height: 2.7rem;
  left: 50%;
  transform: translateX(-50%);
}

/* ---------------------------------------
  .ttl_train
-----------------------------------------*/
.ttl_train {
  padding-left: 1.6rem;
  padding-bottom: 1.3rem;
  position: relative;
  border-bottom: solid 4px #bebebe;
}
@media screen and (max-width: 959.98px) {
  .ttl_train {
    padding-left: 0;
    padding-bottom: 2.5rem;
    border-width: 0.6rem;
  }
}
.ttl_train::before {
  content: "";
  width: 23rem;
  height: 4px;
  position: absolute;
  left: 0;
  bottom: -4px;
  background-color: #00487e;
}
@media screen and (max-width: 959.98px) {
  .ttl_train::before {
    height: 0.6rem;
    bottom: -0.6rem;
  }
}
.ttl_train .txt {
  font-family: "Inter", sans-serif;
  font-size: 2.6rem;
  font-weight: 600;
  color: #00487e;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 959.98px) {
  .ttl_train .txt {
    font-size: 4.2rem;
    line-height: 1.4761904762;
    align-items: flex-start;
  }
}
.ttl_train .txt::before {
  content: "";
  display: block;
  width: 1.9rem;
  height: 2.5rem;
  flex: none;
  margin-right: 1.3rem;
  background: url(/travel-information/assets/img/train-usage-guide/howto/icon_railway.svg) no-repeat top/contain;
}
@media screen and (max-width: 959.98px) {
  .ttl_train .txt::before {
    width: 3.9rem;
    height: 5.2rem;
    margin-right: 2.4rem;
  }
}
.ttl_train + .flex_clm2 {
  margin-top: 4rem;
}
@media screen and (max-width: 959.98px) {
  .ttl_train + .flex_clm2 {
    margin-top: 6rem;
  }
}

/* ---------------------------------------
  .flex_clm2
-----------------------------------------*/
.flex_clm2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex_clm2 .txt_box img,
.flex_clm2 .img_box img {
  border-radius: 1.6rem;
}
.flex_clm2 .txt_box:nth-of-type(odd),
.flex_clm2 .img_box:nth-of-type(odd) {
  width: 60rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box:nth-of-type(odd),
  .flex_clm2 .img_box:nth-of-type(odd) {
    width: 100%;
  }
}
.flex_clm2 .txt_box:nth-of-type(even),
.flex_clm2 .img_box:nth-of-type(even) {
  width: 48rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box:nth-of-type(even),
  .flex_clm2 .img_box:nth-of-type(even) {
    width: 100%;
    margin-top: 3.5rem;
  }
}
.flex_clm2 .txt_box:nth-of-type(even).box_large,
.flex_clm2 .img_box:nth-of-type(even).box_large {
  width: 51.1rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box:nth-of-type(even).box_large,
  .flex_clm2 .img_box:nth-of-type(even).box_large {
    width: 100%;
  }
}
.flex_clm2 .txt_box:nth-of-type(n + 3),
.flex_clm2 .img_box:nth-of-type(n + 3) {
  margin-top: 4rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box:nth-of-type(n + 3),
  .flex_clm2 .img_box:nth-of-type(n + 3) {
    margin-top: 3.5rem;
  }
}
.flex_clm2 .txt_box .clm_ttl {
  font-family: "Inter", sans-serif;
  font-size: 3.2rem;
  font-weight: 600;
  color: #002952;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .clm_ttl {
    font-size: 5.2rem;
    line-height: 1.2692307692;
  }
}
.flex_clm2 .txt_box .clm_ttl + .clm_txt {
  margin-top: 2rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .clm_ttl + .clm_txt {
    margin-top: 2.4rem;
  }
}
.flex_clm2 .txt_box .clm_txt {
  font-size: 1.6rem;
  line-height: 1.625;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .clm_txt {
    font-size: 3rem;
    line-height: 1.8;
  }
}
.flex_clm2 .txt_box .clm_txt + .clm_txt {
  margin-top: 1.1em;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .clm_txt + .clm_txt {
    margin-top: 1.5rem;
  }
}
.flex_clm2 .txt_box .clm_txt + .btn_wrapper {
  margin-top: 2rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .clm_txt + .btn_wrapper {
    margin-top: 3.6rem;
  }
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .btn_wrapper {
    width: 100%;
  }
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .btn_wrapper a {
    width: 100%;
    padding: 0;
  }
}
.flex_clm2 .txt_box .clm_btn_box {
  display: flex;
  margin-top: 2rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .clm_btn_box {
    display: block;
    margin-top: 3.6rem;
  }
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .clm_btn_box .btn_wrapper {
    position: static;
  }
}
.flex_clm2 .txt_box .clm_btn_box .btn_wrapper + .btn_wrapper {
  margin-left: 1rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .clm_btn_box .btn_wrapper + .btn_wrapper {
    margin-left: 0;
    margin-top: 3.6rem;
  }
}
.flex_clm2 .txt_box .clm_pdflist {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 6rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .clm_pdflist {
    flex-direction: column;
    gap: 4rem 0;
  }
}
.flex_clm2 .txt_box .clm_pdflist .pdf_link a {
  color: #002952;
  font-size: 1.6rem;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  display: flex;
  align-items: center;
  transition: 0.3s color;
  text-decoration: none;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .clm_pdflist .pdf_link a {
    font-size: 3.2rem;
  }
}
.flex_clm2 .txt_box .clm_pdflist .pdf_link a span {
  margin-top: -0.5rem;
  width: 4rem;
  height: 4rem;
  position: relative;
  flex: none;
  margin-right: 1.2rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .clm_pdflist .pdf_link a span {
    width: 6rem;
    height: 6rem;
    margin-right: 1.6rem;
  }
}
.flex_clm2 .txt_box .clm_pdflist .pdf_link a span::before {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100px;
  border: 1px solid #b0c5d5;
  background-color: #fff;
  transition: 0.3s transform, 0.3s background-color, 0.3s border-color;
  display: block;
}
.flex_clm2 .txt_box .clm_pdflist .pdf_link a span::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-top: 2px solid #002952;
  border-right: 2px solid #002952;
  transform: rotate(45deg);
  position: absolute;
  right: 1.6rem;
  top: 1.6rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .clm_pdflist .pdf_link a span::after {
    width: 1rem;
    height: 1rem;
    border-width: 1px;
    right: 2.4rem;
    top: 2.4rem;
  }
}
.flex_clm2 .txt_box .clm_pdflist .pdf_link a::after {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  background: url(/travel-information/assets/img/common/icn_pdf.svg) no-repeat center/contain;
  margin-left: 1.2rem;
  flex: none;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 .txt_box .clm_pdflist .pdf_link a::after {
    width: 3.8rem;
    height: 3.8rem;
    margin-left: 1.6rem;
  }
}
@media (any-hover: hover) {
  .flex_clm2 .txt_box .clm_pdflist .pdf_link a:hover, .flex_clm2 .txt_box .clm_pdflist .pdf_link a:focus {
    color: #0066bf;
  }
  .flex_clm2 .txt_box .clm_pdflist .pdf_link a:hover span::before, .flex_clm2 .txt_box .clm_pdflist .pdf_link a:focus span::before {
    transform: scale(0.9);
    border-color: transparent;
    background-color: #d6e0ea;
  }
}
.flex_clm2 .txt_box .clm_pdflist .pdf_link.active a {
  font-weight: 700;
}
.flex_clm2 .txt_box.align-self {
  align-self: center;
}
.flex_clm2.noclm div {
  width: 100% !important;
}
.flex_clm2.noclm div + div {
  margin-top: 2rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2.noclm div + div {
    margin-top: 3.5rem;
  }
}
@media screen and (max-width: 959.98px) {
  .flex_clm2.btn_in {
    position: relative;
    padding-bottom: 13rem;
  }
}
@media screen and (max-width: 959.98px) {
  .flex_clm2.btn_in .btn_wrapper,
  .flex_clm2.btn_in .clm_btn_box {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}
@media screen and (max-width: 959.98px) {
  .flex_clm2.btn_in.btn_2 {
    padding-bottom: 26rem;
  }
}
.flex_clm2 + .step_by_step {
  margin-top: 3rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 + .step_by_step {
    margin-top: 4rem;
  }
}
.flex_clm2 + .flex_clm2 {
  margin-top: 10rem;
}
@media screen and (max-width: 959.98px) {
  .flex_clm2 + .flex_clm2 {
    margin-top: 12rem;
  }
}

/* ---------------------------------------
  .step_by_step
-----------------------------------------*/
.step_by_step {
  background-color: #ebf2f7;
  border-radius: 1rem;
  padding: 2.8rem 2.4rem 3.4rem;
}
@media screen and (max-width: 959.98px) {
  .step_by_step {
    padding: 5rem 4.8rem;
  }
}
.step_by_step .ttl {
  font-family: "Inter", sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: #002952;
  display: flex;
  align-items: center;
  margin-left: 1.3rem;
}
@media screen and (max-width: 959.98px) {
  .step_by_step .ttl {
    font-size: 3.8rem;
    margin-left: 0;
  }
}
.step_by_step .ttl::before {
  content: "";
  width: 2.1rem;
  height: 2.6rem;
  background: url(/travel-information/assets/img/train-usage-guide/howto/icon_step_by_step.svg) no-repeat top/contain;
  margin-right: 1rem;
  display: block;
}
@media screen and (max-width: 959.98px) {
  .step_by_step .ttl::before {
    width: 3.4rem;
    height: 4.2rem;
    margin-right: 2.7rem;
  }
}
.step_by_step .txt_box {
  display: flex;
  align-items: center;
  margin-top: 1.6rem;
}
@media screen and (max-width: 959.98px) {
  .step_by_step .txt_box {
    margin-top: 4.3rem;
    display: block;
  }
}
.step_by_step .txt_box .txt {
  font-size: 1.6rem;
}
@media screen and (max-width: 959.98px) {
  .step_by_step .txt_box .txt {
    font-size: 3rem;
    line-height: 1.8;
  }
}
.step_by_step .txt_box .link {
  margin-left: 3rem;
}
@media screen and (max-width: 959.98px) {
  .step_by_step .txt_box .link {
    margin-left: 0;
    margin-top: 4rem;
  }
}
.step_by_step .txt_box .link a {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  color: #002952;
  text-decoration: none;
  transition: 0.3s color;
}
@media screen and (max-width: 959.98px) {
  .step_by_step .txt_box .link a {
    font-size: 3.2rem;
  }
}
.step_by_step .txt_box .link a span {
  position: relative;
  margin-right: 1rem;
}
@media screen and (max-width: 959.98px) {
  .step_by_step .txt_box .link a span {
    margin-right: 1.6rem;
  }
}
.step_by_step .txt_box .link a span::before {
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  background-color: #0066bf;
  display: block;
}
@media screen and (max-width: 959.98px) {
  .step_by_step .txt_box .link a span::before {
    width: 4rem;
    height: 4rem;
    border-radius: 2rem;
  }
}
.step_by_step .txt_box .link a span::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: solid 2px #fff;
  border-bottom: solid 2px #fff;
  transform: rotate(-45deg);
  position: absolute;
  left: 0.7rem;
  top: 0.9rem;
}
@media screen and (max-width: 959.98px) {
  .step_by_step .txt_box .link a span::after {
    width: 0.8rem;
    height: 0.8rem;
    border-width: 1px;
    top: 1.5rem;
    left: 1.2rem;
  }
}
.step_by_step .txt_box .link a:hover, .step_by_step .txt_box .link a:focus {
  color: #0066bf;
}
.step_by_step + .flex_clm2 {
  margin-top: 10rem;
}
@media screen and (max-width: 959.98px) {
  .step_by_step + .flex_clm2 {
    margin-top: 12rem;
  }
}