@charset "UTF-8";

/*
intro 
*/
.intro{}
.intro figure{
  position: relative;
  margin-top: 100px;
}
.intro figure figcaption{
  position: absolute;
  bottom: 2px;
  left: 50%;
  display: flex;
  width: calc(100% - 20px);
  color: #fff;
  transform: translate(-50%,0);
}
.intro figure figcaption span{
  display: block;
  width: calc(100% / 4);
  padding: 0 5px 0 0;
  text-align: right;
}

/* for sp*/
@media screen and (max-width: 767px) {
  .intro{}
  .intro figure{
    margin-top: 40px;
  }
  .intro figure figcaption{
    width: 100%;
  }
  .intro figure figcaption span{}
}



/*文中の数字画像*/
.num{
  margin-left: 4px;
  margin-right: 4px;
}


/*時間*/
.time{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.time > div dl{
  text-align: left;
}
.time > div dl dt{
  font-size: clamp(calc(16px * 0.7), calc(16vw / 11.00), 16px);/*16 / 13*/
  line-height: 1.0;
  text-align: left;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
}
.time > div dl dd{
  position: relative;
  font-size: clamp(calc(30px * 0.7), calc(30vw / 11.00), 30px);/*30 / 26*/
  line-height: 1.0;
  text-align: left;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
}
.time .photo{
  width: calc((350 / 840) * 100%);
}

/*-type01*/
.time.-type01 > div{
  width: calc((490 / 840) * 100%);
}
.time.-type01 > div dl{}

.time.-type01 > div dl dd{
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-start;
  margin: 5px 0 0 0;
}
.time.-type01 > div dl dd:has(p){
  padding-bottom: 18px;
}

.time.-type01 > div dl dd p{
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: clamp(calc(13px * 0.7), calc(13vw / 11.00), 13px);/*13 / 11*/
  text-align: right;
  letter-spacing: 0;
}
.time.-type01 > div dl dd + dt{
  margin-top: 30px;
}
.time.-type01 > div dl dd + dd{
  margin-top: 40px;
}
.time.-type01 > div dl + p{
  margin-top: 30px;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
}
.time.-type01 .fig{
  width: 100%;
  margin: 60px 0 0 0;
}


/*-type02*/
.time.-type02 > div{
  width: calc((440 / 840) * 100%);
}
.time.-type02 > div dl dd{
  display: flex;
  align-items: center;
  margin: 20px 0 0 0;
}
.time.-type02 > div dl dd:nth-of-type(1){
  margin-top: 10px;
}
.time.-type02 > div dl dd:has(p){
  padding-bottom: 20px;
}
.time.-type02 > div dl dd::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 70%;
  height: 1px;
  background: #202124;
  transform: translate(-50%,-50%);
}
.time.-type02 > div dl dd span{
  position: relative;
  display: flex;
  align-items: flex-end;
  background: #fbf6f0;
}
.time.-type02 > div dl dd span:nth-of-type(1){
  padding: 0 10px 0 0;
}
.time.-type02 > div dl dd span:nth-of-type(2){
  margin-left: auto;
  padding: 0 0 0 5px;
}
.time.-type02 > div dl dd span strong{
  font-weight: normal;
  font-size: clamp(calc(40px * 0.7), calc(40vw / 11.00), 40px);/*40 / 32*/
  line-height: 1.0;
}
.time.-type02 > div dl dd p{
  position: absolute;
  left: 0;
  bottom: 0;
  letter-spacing: 0;
}

/* for sp*/
@media screen and (max-width: 767px) {
  
  /*文中の数字画像*/
  .num{
    transform: scale(0.8);
  }
  /*時間*/
  .time{
    display: block;
  }
  .time > div dl{}
  .time > div dl dt{
    font-size: clamp(calc(13px * 0.7), calc(13vw / 3.75), 13px);/*16 / 13*/
  }
  .time > div dl dd{
    font-size: clamp(calc(24px * 0.7), calc(24vw / 3.75), 24px);/*30 / 24*/
  }
  .time .photo{
    width: 100%;
    margin-top: 30px;
  }

  /*-type01*/
  .time.-type01 > div{
    width: 100%;
  }
  .time.-type01 > div dl{}

  .time.-type01 > div dl dd{}
  .time.-type01 > div dl dd:has(p){}

  .time.-type01 > div dl dd p{
    font-size: clamp(calc(11px * 0.7), calc(11vw / 3.75), 11px);/*13 / 11*/
  }
  .time.-type01 > div dl dd + dt{
    margin-top: 20px;
  }
  .time.-type01 > div dl dd + dd{
    margin-top: 30px;
  }
  .time.-type01 > div dl + p{
    margin-top: 20px;
    font-size: clamp(calc(17px * 0.7), calc(17vw / 3.75), 17px);/*17*/
    letter-spacing: 0;
  }
  .time.-type01 .fig{
    margin-top: 40px;
  }


  /*-type02*/
  .time.-type02 > div{
    width: 100%;
  }
  .time.-type02 > div dl dd{
    margin-top: 15px;
  }
  .time.-type02 > div dl dd:nth-of-type(1){}
  .time.-type02 > div dl dd:has(p){}
  .time.-type02 > div dl dd::before{}
  .time.-type02 > div dl dd span{}
  .time.-type02 > div dl dd span:nth-of-type(1){
    padding-right: 5px;
  }
  .time.-type02 > div dl dd span:nth-of-type(2){}
  .time.-type02 > div dl dd span strong{
    font-size: clamp(calc(32px * 0.7), calc(32vw / 3.75), 32px);/*40 / 32*/
  }
  .time.-type02 > div dl dd p{}
}



/*
bus 
*/
.bus{}

.bus .tableWrap{}
.bus .tableWrap > div{
  display: flex;
  flex-wrap: wrap;
}
.bus .tableWrap p.lead01{
  width: 100%;
  margin: 0 0 10px 0;
  text-align: left;
}
.bus .tableWrap .table01{
  width: calc((450 / 840) * 100%);
}
.bus .tableWrap .table02{
  width: calc((325 / 840) * 100%);
  margin: 0 0 0 auto;
}
.bus .tableWrap .table02 dl{
  display: flex;
  flex-wrap: wrap;
}
.bus .tableWrap .table02 dl dt,
.bus .tableWrap .table02 dl dd{
  display: flex;
  align-items: center;
  height: 100px;
  margin: 0 0 20px 0;
  color: #fff;
  font-size: clamp(calc(18px * 0.7), calc(18vw / 11.00), 18px);/*18 / 16*/
  line-height: 1.0;
}
.bus .tableWrap .table02 dl dt{
  justify-content: center;
  width: 100px;
  background: #4c4b4a;
  text-align: center;
}
.bus .tableWrap .table02 dl dd{
  justify-content: flex-start;
  width: calc(100% - 100px);
  padding: 0 0 0 10%;
  background: #bba083;
  text-align: left;
}
.bus .tableWrap .table02 dl dd strong{
  display: inline-flex;
  align-items: flex-end;
  font-weight: normal;
  font-size: clamp(calc(23px * 0.7), calc(23vw / 11.00), 23px);/*23 / 18*/
  line-height: 1.0;
}

/* for sp*/
@media screen and (max-width: 767px) {
  .bus{}
  .bus .tableWrap{}
  .bus .tableWrap > div{
    display: block;
  }
  .bus .tableWrap p.lead01{}
  .bus .tableWrap .table01{
    width: 100%;
  }
  .bus .tableWrap .table02{
    width: 100%;
    margin-left: 0;
  }
  .bus .tableWrap .table02 dl{
    margin-top: 20px;
  }
  .bus .tableWrap .table02 dl dt,
  .bus .tableWrap .table02 dl dd{
    height: 80px;
    margin-bottom: 10px;
    font-size: clamp(calc(16px * 0.7), calc(16vw / 3.75), 16px);/*18 / 16*/
  }
  .bus .tableWrap .table02 dl dt{
    width: 80px;
  }
  .bus .tableWrap .table02 dl dd{
    width: calc(100% - 80px);
  }
  .bus .tableWrap .table02 dl dd strong{
    font-size: clamp(calc(20px * 0.7), calc(20vw / 3.75), 20px);/*23 / 20*/
  }
}



/*
train 
*/
.train{}
.train .accMap{
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.train .station{
  display: flex;
  justify-content: space-between;
}
.train .station li{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc((100% - 30px) / 4);
  aspect-ratio: 312 / 420;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: #fff;
  text-align: center;
}

.train .station li:nth-of-type(1){
  background-image: url("/bunjyo/miyayama/img/access/train_img02.jpg");
}
.train .station li:nth-of-type(2){
  background-image: url("/bunjyo/miyayama/img/access/train_img03.jpg");
}
.train .station li:nth-of-type(3){
  background-image: url("/bunjyo/miyayama/img/access/train_img04.jpg");
}
.train .station li:nth-of-type(4){
  background-image: url("/bunjyo/miyayama/img/access/train_img05.jpg");
}

.train .station li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #777777;
  mix-blend-mode: multiply;
}
  
  
.train .station li dl,
.train .station li p{
  position: relative;
  z-index: 10;
}
.train .station li dl dt,
.train .station li dl dd{
  padding-left: 0.1em;
  letter-spacing: 0.1em;
}
.train .station li dl dt{
  font-size: clamp(calc(13px * 0.7), calc(13vw / 11.00), 13px);/*13 / 12*/
  line-height: 1.0;
}
.train .station li dl dt br{
  display: none;
}
.train .station li dl dd{
  margin: 20px 0 0 0;
  font-size: clamp(calc(30px * 0.7), calc(30vw / 11.00), 30px);/*30 / 20*/
}
.train .station li dl dd .num{
  margin-top: 4px;
}
.train .station li dl strong{
  display: inline-flex;
  align-items: flex-end;
  font-weight: normal;
  line-height: 1.0;
}

.train .station li > img{
  position: absolute;
  left: 50%;
  bottom: 10px;
  text-align: center;
  transform: translate(-50%,0);
}

/* for sp*/
@media screen and (max-width: 767px) {
  .train{}
  .train .accMap{}

  .train .station{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .train .station li{
    width: calc((100% - 5px) / 2);
  }

  .train .station li::before{}


  .train .station li dl,
  .train .station li p{}
  .train .station li dl dt,
  .train .station li dl dd{
    padding-left: 0.05em;
    letter-spacing: 0.05em;
  }
  .train .station li dl dt{
    padding-left: 0.2em;
    font-size: clamp(calc(12px * 0.7), calc(12vw / 3.75), 12px);/*13 / 12*/
    line-height: 1.6;
    letter-spacing: 0.1em;
  }
  .train .station li dl dt br{
    display: block;
  }
  
  .train .station li dl dd{
    margin-top: 10px;
    font-size: clamp(calc(20px * 0.7), calc(20vw / 3.75), 20px);/*30 / 20*/
    line-height: 2.0;
  }  
  .train .station li dl dd .num{
    margin-top: -4px;
  }
  .train .station li dl strong{}

  .train .station li > img{
    bottom: 5px;
  }
}