/* =================================
   COMMON
================================= */

picture{
  display:block;
  line-height:0;
}

.access-inner{
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
}

@media screen and (max-width:767px){

  .access-inner{
    width:100%;
  }

}

/* =================================
   access map
================================= */

.access-map{
  position:relative;

  background:
    url("/content/dam/31sumai/mfr/L2402/asset/images/access/bg.png")
    center top
    repeat;
}

/* =================================
   access lead
================================= */

.access-lead{
  position:relative;
  overflow:hidden;

  padding:150px 20px 100px;
}

/* 左上飾り */

.access-deco{
  position:absolute;

  top:62px;
  left:32px;

  width:270px;
  height:auto;

  z-index:0;
}

/* 中央 */

.access-lead-inner{
  position:relative;
  z-index:1;

  width:min(1400px, calc(100% - 20px));
  margin:0 auto;

  text-align:center;
}

/* タイトル */

.access-title{
  margin:0;

  font-size:clamp(32px, 3.3vw, 42px);
  font-weight:400;
  line-height:1.45;
  letter-spacing:.12em;
}

/* コピー */

.access-copy{
  margin-top:43px;
}

.access-copy p{
  margin:0 0 28px;

  font-size:clamp(16px, 1.3vw, 28px);
  line-height:2.2;
  letter-spacing:.008em;
}

.access-copy p:last-child{
  margin-bottom:0;
}

/* =================================
   access mulch
================================= */

.access-mulch{
  text-align:center;
}

.access-mulch img{
  display:block;

  width:min(1058px, 100%);
  height:auto;

  margin:0 auto;
}
.access-mulch  {
	padding-bottom: 100px;
}
/* =================================
   access train pc
================================= */

.access-train{
  position:relative;
  overflow:hidden;
}

/* ブラー背景 */

.access-train-blur{
  position:absolute;
  inset:0;

  background:
    url("/content/dam/31sumai/mfr/L2402/asset/images/access/train_bg.jpg")
    center center / cover no-repeat;

  filter:blur(20px);
  transform:scale(1.08);

  opacity:.45;

  z-index:0;
}

.access-train-blur::after{
  content:"";

  position:absolute;
  inset:0;

  background:rgba(0,0,0,.38);
}

/* 中央 */

.access-train-inner{
  position:relative;
  z-index:1;

  width:min(1200px, 100%);
  margin:0 auto;
}

/* 背景 */

.access-train-bg img{
  display:block;
  width:100%;
  height:auto;
}

/* 上PNG */

.access-train-top{
  position:absolute;

  top:40px;
  left:50%;

  width:1000px;
  max-width:100%;

  transform:translateX(-50%);

  z-index:2;

  transition-delay:.15s;
}

.access-train-top img{
  display:block;
  width:100%;
  height:auto;
}

/* 下PNG */

.access-train-bottom{
  position:absolute;

  left:50%;
  bottom:50px;

  width:1058px;
  max-width:100%;

  transform:translateX(-50%);

  z-index:2;

  transition-delay:.45s;
}

.access-train-bottom img{
  display:block;
  width:100%;
  height:auto;
}

/* =================================
   access train sp
================================= */

.access-train-sp{
  display:none;

  position:relative;
  overflow:hidden;
}

.access-train-sp-inner{
  position:relative;
}

/* 背景 */

.access-train-sp-bg img{
  display:block;
  width:100%;
  height:auto;
}

/* 上 */

.access-train-top-sp{
  position:absolute;

  top:20px;
  left:50%;

  width:calc(100% - 40px);

  transform:translateX(-50%);

  z-index:2;
}

.access-train-top-sp img{
  display:block;
  width:100%;
  height:auto;
}

/* 下 */

.access-train-bottom-sp{
  position:absolute;

  left:50%;
  bottom:0;

  width:92%;

  transform:translateX(-50%);

  z-index:2;
}

.access-train-bottom-sp img{
  display:block;
  width:100%;
  height:auto;
}

/* 黒背景 */

.access-train-footer-sp{
  background:#000;

  padding:20px 0;
}

.access-train-footer-sp img{
  display:block;

  width:92%;
  height:auto;

  margin:0 auto;
}

/* =================================
   access tram
================================= */

.access-tram{
  padding:120px 20px;
}

.access-tram-inner{
  width:min(1200px, 100%);
  margin:0 auto;
}

/* MAIN */

.access-tram-main{
  position:relative;

  transition-delay:.2s;
}

.access-tram-main img{
  display:block;
  width:100%;
  height:auto;
}

/* タイトル */

.access-tram-title{
  position:absolute;

  top:45px;
  left:50%;

  transform:translateX(-50%);

  width:100%;

  margin:0;

  text-align:center;
  color:#fff;

  font-size:clamp(30px, 4vw, 58px);
  font-weight:400;
  line-height:1.4;
  letter-spacing:.12em;

  text-shadow:
    0 2px 6px rgba(0,0,0,.45),
    0 6px 18px rgba(0,0,0,.28);

  z-index:2;
}

/* GRID */

.access-tram-grid{
  display:grid;

  grid-template-columns:1.4fr .8fr;
  gap:40px;

  width:min(1100px, 100%);
  margin:40px auto 0;
}

/* 左 */

.access-tram-left{
  grid-column:1;
  grid-row:1 / 3;

  transition-delay:.4s;
}

.access-tram-left img{
  display:block;
  width:100%;
  height:auto;
}

/* 右 */

.access-tram-right{
  grid-column:2;
  grid-row:1;

  transition-delay:.75s;
}

.access-tram-right img{
  display:block;
  width:100%;
  height:auto;
}

/* コピー */

.access-tram-copy{
  grid-column:2;
  grid-row:2;

  transition-delay:.55s;
}

.access-tram-copy p{
  margin:0;

  font-size:clamp(16px, 1.3vw, 24px);
  line-height:2.3;
  letter-spacing:.08em;
}

/* =================================
   scroll motion
================================= */

.js-scroll-fade{
  transform:translateY(20px);
  transition:transform 1s ease-out;
}

.js-scroll-fade.is-show{
  transform:translateY(0);
}

/* 中央維持 */

.access-train-top.js-scroll-fade,
.access-train-bottom.js-scroll-fade{
  transform:translateX(-50%) translateY(45px);
}

.access-train-top.js-scroll-fade.is-show,
.access-train-bottom.js-scroll-fade.is-show{
  transform:translateX(-50%) translateY(0);
}

.access-train-top-sp.js-scroll-fade,
.access-train-bottom-sp.js-scroll-fade{
  transform:translateX(-50%) translateY(45px);
}

.access-train-top-sp.js-scroll-fade.is-show,
.access-train-bottom-sp.js-scroll-fade.is-show{
  transform:translateX(-50%) translateY(0);
}


/* =================================
   SP
================================= */

@media screen and (max-width:767px){

  /* lead */

  .access-lead{
    padding:90px 20px 70px;
  }

  .access-deco{
    top:24px;
    left:15px;

    width:190px;
  }

  .access-title{
    font-size:clamp(26px, 6.5vw, 38px);
    line-height:1.6;
	  text-align: left;
  }

  .access-copy{
    margin-top:40px;
  }

  .access-copy p{
    font-size:14px;
    line-height:2;
    letter-spacing:.06em;

    text-align:left;
  }

  /* mulch */

  .access-mulch{
    padding:0 20px;
  }

  /* train */

  .access-train-pc{
    display:none;
  }

  .access-train-sp{
    display:block;
  }

  /* tram */

  .access-tram{
    padding:90px 20px 20px;
  }

  .access-tram-main{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }

  .access-tram-title{
    top:25px;

    font-size:clamp(24px, 8vw, 40px);
    line-height:1.6;

    background:rgba(0,0,0,.18);
    padding:.25em .6em;
  }

  .access-tram-grid{
    display:flex;
    flex-direction:column;

    gap:30px;
  }

  /* 順番 */

  .access-tram-copy{
    order:1;
  }

  .access-tram-left{
    order:2;
  }

  .access-tram-right{
    order:3;
  }

  .access-tram-copy p{
    font-size:14px;
    line-height:2;
  }

}



/* =================================
   access air
================================= */

.access-air{
  padding:0px 20px 100px;
}

.access-air-inner{
  width:min(1200px, 100%);
  margin:0 auto;
}

/* =========================
   MAIN
========================= */

.access-air-main{
  position:relative;

  transition-delay:.2s;
}

.access-air-main img{
  display:block;
  width:100%;
  height:auto;
}

/* タイトル */

.access-air-title{
  position:absolute;

  top:40px;
  left:50%;

  transform:translateX(-50%);

  width:100%;

  margin:0;

  text-align:center;
  color:#fff;

  font-size:clamp(30px, 4vw, 58px);
  font-weight:400;
  line-height:1.4;
  letter-spacing:.12em;
  text-shadow:
    0 2px 6px rgba(0,0,0,.45),
    0 6px 18px rgba(0,0,0,.28);

  z-index:2;
}

/* =========================
   GRID
========================= */

.access-air-grid{
  display:grid;

  grid-template-columns:1fr 1fr;
  gap:40px;

   width:min(1100px, 100%);
  margin:40px auto 0;

  align-items:start;
}

/* 左 */

.access-air-left{
  transition-delay:.4s;
}

.access-air-left img{
  display:block;
  width:100%;
  height:auto;
}

/* 右 */

.access-air-copy{
  transition-delay:.6s;
}

.access-air-copy p{
  margin:0;

  font-size:clamp(16px, 1.2vw, 22px);
  line-height:2.2;
  letter-spacing:.08em;
}

/* =========================
   bottom
========================= */

.access-air-bottom{
  display:grid;

  grid-template-columns:1fr 1fr;
  gap:40px;

   width:min(1100px, 100%);
  margin:50px auto 0;
}

/* 左 */

.access-air-bottom-left{
  transition-delay:.75s;
}

/* 右 */

.access-air-bottom-right{
  transition-delay:.9s;
}

.access-air-bottom img{
  display:block;
  width:100%;
  height:auto;
}

/* =================================
   SP
================================= */

@media screen and (max-width:767px){

  .access-air{
    padding:20px 20px;
  }

  /* メイン */

  .access-air-main{
    width:100vw;
    margin-left:calc(50% - 50vw);
  }

  /* タイトル */

  .access-air-title{
    top:22px;

    font-size:clamp(24px, 8vw, 40px);

    background:rgba(0,0,0,.0);

    padding:.25em .6em;
  }

  /* grid */

  .access-air-grid{
    display:flex;
    flex-direction:column;

    gap:25px;
  }

  .access-air-copy{
    order:1;
  }

  .access-air-left{
    order:2;
  }

  .access-air-copy p{
    font-size:14px;
    line-height:2;
  }

  /* bottom */

  .access-air-bottom{
    grid-template-columns:1fr;

    gap:25px;

    margin-top:35px;
  }

}

/* =================================
   access bus
================================= */

.access-bus{
  width:100%;

  padding:120px 20px;

  background:#dfe4ea;
}

.access-bus-inner{
  width:min(1200px, 100%);
  margin:0 auto;
}

/* タイトル */

.access-bus-title{
  margin:0 0 55px;

  text-align:left;

  font-size:clamp(28px, 2.5vw, 52px);
  font-weight:400;
  line-height:1.5;
  letter-spacing:.12em;

  transition-delay:.15s;
}

/* メイン */

.access-bus-main{
  transition-delay:.35s;
}

.access-bus-main img{
  display:block;
  width:100%;
  height:auto;
}

/* =================================
   SP
================================= */

@media screen and (max-width:767px){

  .access-bus{
    padding:90px 20px;
  }

  .access-bus-title{
    margin-bottom:35px;

    font-size:clamp(22px, 6vw, 38px);
    line-height:1.7;
  }

}


@media screen and (max-width: 767px){

  .access-air-grid{
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 30px;
  }

  .access-air-bottom{
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 30px;
  }

}


@media screen and (max-width:767px){

  .access-bus{
    padding:70px 20px;
  }

  .access-bus-title{
    margin-bottom:28px;
    font-size:clamp(17px, 2.2vw, 28px);
    line-height:1.65;
    letter-spacing:.08em;
  }

  .access-bus-main{
    width:100%;
    margin:0 auto;
  }

  .access-bus-main img{
    width:100%;
    height:auto;
  }

}