@charset "utf-8";

.access-page{background-attachment:fixed;}
.access-page h2,.access-page h3,.access-page h4,.access-page p{font-weight:500;}
.access-photo{position:relative;}
.no-space{margin-left: -0.5em;}
.bg-part{background: linear-gradient(90deg,rgba(124,110,97,.2),rgba(83,73,63,.2));}
/* Train / car key visuals */
.access-visual{position:relative;display:flex;background:#766958;}
.access-visual-main{width:62.2%;}
.access-visual-sub{width:37.8%;}
.access-visual-main img,.access-visual-sub img{display:block;width:100%;height:100%;object-fit:cover;}

/* .access-visual .access-photo{height:clamp(300px,33.1vw,477px);} */
.access-visual-label{position:absolute;top:50%;left:0;z-index:2;width:100%;padding:10px 20px;transform:translateY(-50%);background:linear-gradient(to right,rgba(124,110,97,.85),rgba(83,73,63,.85));color:#d4c68b;text-align:center;font-family:"Copperplate",serif;font-size:2.2rem;letter-spacing:.1em;line-height:1.2;}
.access-visual .cap{bottom:10px;right:12px;color:#fff;}

/* Introduction and station */
.access-intro{padding:60px 0 ;text-align:center;}
.access-intro h2,.access-section-copy h2{font-size:min(3.2vw,3.2rem);letter-spacing:0;line-height:1.65;font-weight: 500;}
.access-intro p,.access-section-copy p{margin-top:20px;font-size:1.7rem;line-height:2.05;letter-spacing:.03em;}
.station-access{padding:0 0 80px;}
.station-access-inner{display:flex;justify-content:space-between;max-width:850px;}
.station-access-inner>.access-photo{width: 47.4117%;}
.station-access-inner>.access-photo img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
.station-distance{width:48.8%;height: 190px;display: flex;justify-content: center;align-items: center;border-top:1px solid #5e574f;border-bottom:1px solid #5e574f;}
.station-distance p{font-size:2rem;}
.station-distance h2{font-size:min(3.5vw,3.5rem);line-height:1.45;white-space:nowrap;}
.station-distance h2 strong{color:#796a56;font-size:2.5em;font-weight:500;line-height:0;}
.station-distance small{font-size:1.8rem;}

/* Rail network */
.train-network{padding:72px 0 92px;background:rgba(255,255,255,.16);}
.access-section-copy{text-align:center;}
.network-lead{max-width:760px;margin:48px auto 0;}
.network-lead h3,.network-feature h3{margin-top:20px;font-size:2.2rem;letter-spacing:0em;line-height:1.6;}
.network-lead h3{text-align:center;}
.network-lead p,.network-feature p{margin-top:8px;font-size:1.5rem;line-height:1.95;}
.route-map{width: calc(100% + 24px);margin:60px auto 0;}
.route-map figcaption{margin-top:5px;text-align:right;font-size:1.2rem;}
.network-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px;max-width: 910px;margin:60px auto 0;}
.network-feature h3{font-size:2.2rem;}

/* Destinations */
.access-band{margin:65px auto 42px;padding:4px 20px;max-width: 910px;;background:linear-gradient(90deg,rgba(124,110,97,.3),rgba(83,73,63,.3));text-align:center;font-size:2.5rem;letter-spacing:.08em;}
.destination-grid{max-width: 910px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 52px;margin: 0 auto;}
.destination-card-center{grid-column:1/-1;width:calc(50% - 26px);justify-self:center;}
.destination-card h4{margin-top:8px;font-size:min(3.2vw,3.2rem);line-height:1.5;white-space:nowrap;  margin-left: -0.5em;}
.destination-card h4 strong{color:#796a56;font-size:1.35em;font-weight:500;}
.destination-card p{font-size:1.6rem;line-height:1.55;}

/* Bus */
.bus-box{margin-top:72px;padding:58px 55px 62px;background:rgba(255,255,255,.9);}
.bus-detail{display:flex;justify-content:space-between;gap:42px;margin-top:42px;max-width: 820px;
  margin: 40px auto 0;}
.bus-detail>.access-photo{width:49%;}
/* .bus-detail>.access-photo img{width: 100%;height: 100%;object-fit: cover;} */
.bus-distance{width:43%;}
.bus-route{padding:15px 5px;border-top:1px solid #5e574f;font-weight: 500;display: flex;justify-content: center;align-items: center;}
.bus-route .txt-top{font-size: 2rem;}
.bus-route .txt-mid{font-size: min(3.2vw,3.2rem);line-height: 1.2;margin-left: -0.5em;}
.bus-route .txt-mid strong{font-size: 2.5em;line-height: 0;font-weight: 500;color: #796a56;}
.bus-route .txt-bot{font-size: 1.7rem;}

.bus-route-sub,.bus-route-sub > div{display: flex;justify-content: center;align-items: center;gap: 37px;}
.bus-route-sub{padding: 40px 0 15px;border-top: none;}
.bus-route:last-child{border-bottom:1px solid #5e574f;}
.bus-route p{font-size:1.7rem;}
.bus-route .sub-top span{font-size: 2.1rem;}
.bus-route h3{font-size:2.5rem;line-height:1.4;white-space:nowrap;}
.bus-route small{font-size:1.2rem;}
.bus-route>strong{flex:0 0 auto;font-size:2rem;font-weight:500;white-space:nowrap;}
.bus-route>strong span{color:#796a56;font-size:2.25em;font-weight:500;line-height:.7;}

/* Car */
.car-access{padding:62px 0 75px;background:linear-gradient(90deg,rgba(124,110,97,.16),rgba(83,73,63,.16));}
.ic-grid{display:grid;grid-template-columns:repeat(2,1fr);margin:50px auto 0;padding:30px 0;border-top:1px solid #5e574f;border-bottom:1px solid #5e574f;height: 140px;}
.ic-grid p{padding:0 52px;font-size:1.7rem;line-height:1.4;display: flex;
  align-items: center;
  justify-content: center;}
.ic-grid p+p{border-left:1px solid rgba(96,88,80,.28);}
.ic-grid strong{font-size:1.9em;font-weight:500;white-space:nowrap;margin-left: -0.5em;}
.taxi-copy{height: 140px;align-content: center;margin:0 auto;padding:38px 20px;border-bottom:1px solid #5e574f;text-align:center;font-size:min(2.8vw,2.8rem);letter-spacing:.04em;}
.taxi-copy small{font-size:0.6em;}

@media screen and (max-width:768px){
    .title-page .title_jp{letter-spacing: 0;}
    .access-visual{flex-wrap:wrap;}
    .access-visual .access-photo{width:100%;height:auto;}
    .access-visual-label{top:auto;bottom:0;padding:9px;transform:none;font-size:1.2rem;}
    .access-visual-main .cap{bottom:42px;}

    .access-intro{padding:42px 0 30px;}
    .access-intro h2,.access-section-copy h2{font-size:2.4rem;line-height:1.65;}
    .access-intro p,.access-section-copy p{margin-top:16px;font-size:1.4rem;line-height:1.9;}

    .station-access{padding:15px 0 52px;}
    .station-access-inner{gap:40px;flex-wrap: wrap;justify-content: center;max-width: 430px;}
    .station-access-inner>.access-photo{width:100%;}
    .station-distance{width:100%;padding:18px 10px;height: 140px;}
    .station-distance p{font-size:1.7rem;}
    .station-distance h2{font-size:2.7rem;white-space:normal;}
    .station-distance small{font-size:1.2rem;}

    .train-network{padding:45px 0 55px;}
    .network-lead{margin-top:34px;}
    .network-lead h3,.network-feature h3{margin-top:13px;font-size:1.7rem;}
    .network-lead p,.network-feature p{font-size:1.4rem;line-height:1.85;}
    .route-map{margin-top:38px;}
    .route-map figcaption{font-size:1rem;}
    .network-feature-grid{grid-template-columns:1fr;gap:38px;margin-top:38px;max-width: 514px;}
    .network-feature-grid .access-photo img{width: 100%;}
    .access-band{margin:45px 0 28px;padding:6px 10px;font-size:1.9rem;}
    .destination-grid{gap:30px;grid-template-columns: 1fr;}
    .destination-card-center{width:100%;}
    .destination-card h4{font-size:2rem;white-space:normal;text-align: center;}
    .destination-card p{font-size:1.4rem;line-height:1.5;text-align: center;}

    .bus-box{padding: 40px 20px;margin: 40px 0 0;}
    .bus-detail{gap:18px;margin-top:32px;flex-wrap: wrap;}
    .bus-distance,.bus-detail>.access-photo{width:100%;}
    .bus-route{padding:13px 2px;}
    .bus-route .txt-mid{font-size: 2.4rem;line-height: 1.4;}
    .bus-route .txt-mid strong{font-size: 2em;}
    .bus-route h3{font-size:1.7rem;white-space:normal;}
    .bus-route>strong{display:block;margin-top:5px;font-size:1.4rem;text-align:right;}
    .bus-route .txt-bot,.bus-route p{font-size: 1.4rem;}
    .bus-route-sub > div{gap: 20px;}
    .bus-route-sub{padding: 20px 0 15px;}
    .car-access{padding:45px 0 52px;}
    .ic-grid{margin-top:34px;padding: 0; grid-template-columns:1fr;height: auto;}
    .ic-grid p{padding:0 13px;font-size:1.4rem;height: 120px;display: flex;justify-content: center;align-items: center;}
    .ic-grid strong{font-size:2.4rem;white-space:normal;}
    .taxi-copy{padding:0;font-size:2rem;height: 120px;line-height: 1.4;
    align-content: center;}
    .taxi-copy small{font-size:1rem;}
    .ic-grid p + p{border-left: 0;border-top: 1px solid #5e574f;}
}

/* @media screen and (max-width:480px){
    .station-access-inner{align-items:stretch;}
    .station-distance{display:flex;flex-direction:column;justify-content:center;}
    .station-distance h2{font-size:4vw;}
    .network-lead h3,.network-feature h3{font-size:4.2vw;}
    .destination-card h4{font-size:3.7vw;}
    .bus-detail{align-items:stretch;}
    .bus-route h3{font-size:4vw;}
    .ic-grid{grid-template-columns:1fr;gap:18px;}
    .ic-grid p{text-align:center;}
    .ic-grid p+p{padding-top:18px;border-top:1px solid rgba(96,88,80,.28);border-left:0;}
} */
 @media screen and (max-width: 1040px) {
    .route-map{width: 100%;}

 }
@media screen and (max-width: 768px) {
  .scroll-sp img {
    max-width: unset;
    width: 676px;
    padding-bottom: 40px;
  }
}