.access-section{
    margin: 0 auto;
    padding-top: 150px;
  }
  
  .access-wrap{
    display:flex;
    justify-content:center;
    align-items:flex-start;
  }

  .access-title img{
    width:633px;
    display:block;
    margin-bottom:25px;
  }
  .top-mv {
    position: relative;
  }
  .top-mv .c-caption {
    bottom: 0;
    color: #fff;
  }
  @media screen and (max-width: 767px) {
    .access-wrap{
        display: block;
    }
    .access-title img {
        width: 100%;
    }
    .access-section {
        padding-top: 50px;
    }
 
  }
  .sub{
    font-size: 32px;
    letter-spacing:2px;
    margin-bottom:10px;
  }
  .c-caption {
    font-size: 12px;
    bottom:-10px;
    right: 0;
    position: absolute;
    color: #333;
  }
  
  .lead{
    color:#d40000;
    font-size:18px;
    line-height:1.6;
    margin-bottom:30px;
  }
  @media screen and (max-width: 767px) { 
    .sub{
        font-size: 18px;
    }
    .lead{
        font-size: 12px;
    }
    .c-caption {
        font-size: 10px;
    }
}
  
  .jp-title{
    font-weight:700;
    font-size:28px;
    line-height:1.7;
  }
  
  .jp-text{
    margin-top: 20px;
    font-size:14px;
    line-height:2;
    color:#333;
    display: flex;
    max-width:500px;
  }
  .flex {
    display: flex;
  }

  .map_a {
    max-width:480px;
    position: relative;
  }
  
  .map_a img{
    width:100%;
    display:block;
  }
  
  .walker{
    width:136px;
    position: relative;
  }
  @media screen and (max-width: 767px) {
    .walker{
        width: 84px;
        position: relative;
        top: -80px;
    }
    .lead {
        display: flex;
        margin-bottom:0;
        gap: 20px;
    }
    .flex {
        margin-top: -60px;
    }
    .map_a { 
        width: 100%;
    }
  }

  .wrap{
    display:grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap:48px;
    align-items:start;
  }

  .grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:10px;
  }
  .c-width2 {
    max-width: 1240px;
    margin: 0 auto;
  }
  @media screen and (max-width: 767px) {
    .wrap {
        display: block;
    }
    .grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .c-width2 {
        width: 100%;
        padding-top: 0;
    }
  }

  .card{
    position:relative;
    height: var(--cardH);
    overflow:hidden;
    border-radius:2px;
    background:#111;
  }

  .card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform: scale(1.02);
  }

  .cap{
    position:absolute;
    left:14px;
    right:14px;
    bottom:10px;
    display:flex;
    align-items:flex-end;
    gap:10px;
    text-transform:uppercase;
    letter-spacing:.02em;
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
    pointer-events:none;
  }
  .city{
    font-weight:800;
    font-size:22px;
    line-height:1;
    white-space:nowrap;
  }
  .mins{
    display:flex;
    align-items:flex-end;
    gap:4px;
    margin-left:auto;
  }
  .num{
    font-weight:900;
    font-size:56px;
    line-height:.85;
  }
  .unit{
    font-weight:700;
    font-size:18px;
    line-height:1.1;
    opacity:.9;
    padding-bottom:6px;
    text-transform:none;
  }

  .credit{
    margin-top:6px;
    text-align:right;
    font-size:12px;
  }

  .textcol{
    padding-top:6px;
  }
  .jp-title{
    font-weight:600;
    font-size:28px;
    line-height:1.9;
    letter-spacing:.02em;
    margin:0 0 14px;
  }
  .jp-title2 {
    font-weight:600;
    font-size: 20px;
    line-height:1.9;
    letter-spacing:.02em;
    margin:0 0 14px;
  }
  .jp-body{
    margin:0;
    font-size:14px;
    line-height:2;
  }
  @media screen and (max-width: 767px) { 
    .jp-title{ 
        font-size: 18px;
        margin: 0 0 10px;
    }
    .jp-title2 {
        font-size: 18px;
        margin: 0 0 10px; 
    }
    .jp-text {
        margin-top: 10px;
        font-size: 12px;
    }
    .jp-body {
        font-size: 12px;
    }
  }
  .access-line {
    margin-top: 30px;
    margin-bottom: 60px;
  }
  .wrap2 {
    display:grid;
    grid-template-columns: 1fr 0.95fr 0.95fr;
    gap:56px;
    align-items:start;
  }

  .left2 .title{
    margin:0 0 18px;
    font-weight:600;
    font-size:20px;
    line-height:1.9;
    letter-spacing:.02em;
  }
  .left2 p{
    margin:0 0 14px;
    font-size:14px;
    line-height:2.05;

  }
    .note{
    margin-top:10px;
    font-size:10px;
    line-height:1.8;
  }

  .rank{
    padding-top:6px;
  }
  .rank-list{
    list-style:none;
    margin:0;
    padding:0;
  }
  .rank-item{
    display:grid;
    grid-template-columns: 90px 1fr;
    align-items:center;
    gap:24px;
    padding:18px 0;
    border-bottom:1px solid #333;
  }
 
  .no{
    font-weight:700;
    letter-spacing:.02em;
    font-size:18px;

  }
  .name{
    font-weight:700;
    letter-spacing:.02em;
    font-size:18px;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .rank-item.is-active .no{
    color:#c7000b;
    font-size:36px;
    line-height:1;
  }
  .rank-item.is-active .name{
    color:#c7000b;
    font-size:34px;
    line-height:1.1;
  }
  @media screen and (max-width: 767px) {  
    .wrap2 {
        grid-template-columns: 1fr 1fr;
        gap:16px;
        align-items:start;
    }
    .left2 {
        grid-column: 1 / -1;
      }
      .left2 .title {
        font-size: 18px;
        margin: 0 0 10px;
      }
      .left2 p {
        font-size: 12px;
      }
     .note {
        font-size: 10px;
        margin-top: 10px;
      }
      .name {
        font-size: 10px;
      }
      .no {
        font-size: 10px;
      }
      .rank-item {
        grid-template-columns: 30px 1fr;
        padding: 9px 0;
      }
      .rank-item.is-active .no,
      .rank-item.is-active .name {
        font-size: 16px;
      }
  }

  .photo{
    justify-self:end;
    width:min(520px, 100%);
  }
  .photo figure{
    margin:0;
    position:relative;
  }
  .photo img{
    width:100%;
    display:block;
    height:auto;
    border-radius:2px;
  }
  .photo .credit{
    position:absolute;
    right:5px;
    bottom:5px;
    font-size:12px;
    color:#fff;
  }

  .wrap3 {
    display:grid;
    grid-template-columns: 0.95fr 2.05fr;
    gap:56px;
    align-items:start;
  }
  @media screen and (max-width: 767px) {  

  .wrap3 {
    display: block;
  }
  .photo .credit {
    font-size: 8px;
  }
  }
  .left3 h3{
    margin:0 0 16px;
    font-weight:600;
    font-size:20px;
    line-height:1.9;
  }
  .left3 p{
    margin:0;
    font-size:14px;
    line-height:2.05;
  }
  @media screen and (max-width: 767px) {   
    .left3 h3 {
        font-size: 18px;
    } 
    .left3 p {
        font-size: 12px;
        margin-bottom: 15px!important;
    }
  }