@charset "UTF-8";






/*time-wrap
--------------------------------- */
.time-wrap{}
.time-wrap > div{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 30px;
  text-align: center;
  font-feature-settings: "palt";
}
.time-wrap dl{
  margin: 40px 0 0 0;
}
.time-wrap dl:nth-of-type(1){
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.time-wrap dl:nth-of-type(1) dt{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  letter-spacing: 0.05em;
}
.time-wrap dl:nth-of-type(1) dt span{
  font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-pc)), 14px);/*14 / 12*/
}
.time-wrap dl:nth-of-type(1) dt strong{
  display: block;
  margin: 8px 0 0 0;
  font-weight: 500;
  font-size: clamp(calc(24px * var(--font-markup)), calc(24vw / var(--vw-pc)), 24px);/*24 / 20*/
}
.time-wrap dl:nth-of-type(1) dd{
  position: relative;
  margin: 0 0 0 10px;
  font-size: clamp(calc(40px * var(--font-markup)), calc(40vw / var(--vw-pc)), 40px);/*40 / 30*/
  letter-spacing: 0.05em;
}
.time-wrap dl:nth-of-type(1) dd strong{
  font-weight: 500;
  font-size: calc((54 / 40) *100%);
}
.time-wrap dl:nth-of-type(1) dd span{
  position: absolute;
  right: 0;
  bottom: -15px;
  font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-pc)), 12px);/*12 / 11*/
  letter-spacing: 0;
}

.time-wrap dl:not(:nth-of-type(1)){
  display: inline-flex;
  flex-direction: column;
}
.time-wrap dl:not(:nth-of-type(1)) dt{
  font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-pc)), 14px);/*14 / 12*/
}
.time-wrap dl:not(:nth-of-type(1)) dd{
  margin: 10px 0 0 0;
  font-size: clamp(calc(36px * var(--font-markup)), calc(36vw / var(--vw-pc)), 36px);/*36 / 28*/
}

.intro-wrap .copy03{
  margin: 30px 0 0 0;
}
.intro-wrap .map02{
  position: relative;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}
.intro-wrap .map02 .cap{
  line-height: var(--line-height);
}

@media screen and (max-width: 767px) {
  .time-wrap{}
  .time-wrap > div{
    column-gap: 20px;
  }
  .time-wrap dl{
    margin-top: 30px;
  }
  .time-wrap dl:nth-of-type(1){}
  .time-wrap dl:nth-of-type(1) dt{}
  .time-wrap dl:nth-of-type(1) dt span{
    font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-sp)), 12px);/*14 / 12*/
  }
  .time-wrap dl:nth-of-type(1) dt strong{
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*24 / 20*/
  }
  .time-wrap dl:nth-of-type(1) dd{
    font-size: clamp(calc(30px * var(--font-markup)), calc(30vw / var(--vw-sp)), 30px);/*40 / 30*/
  }
  .time-wrap dl:nth-of-type(1) dd strong{}
  .time-wrap dl:nth-of-type(1) dd span{
    bottom: -10px;
    font-size: clamp(calc(11px * var(--font-markup)), calc(11vw / var(--vw-sp)), 11px);/*12 / 11*/
  }

  .time-wrap dl:not(:nth-of-type(1)){}
  .time-wrap dl:not(:nth-of-type(1)) dt{
    font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-sp)), 12px);/*14 / 12*/
    text-align: left;
  }
  .time-wrap dl:not(:nth-of-type(1)) dd{
    font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-sp)), 28px);/*36 / 28*/
  }
  
  .intro-wrap .copy03{
    margin-top: 20px;
  }
  .intro-wrap .map02{}
  .intro-wrap .map02 .cap{}
}

/*bg-wrap
--------------------------------- */
.bg-wrap{
  background: var(--color-key03);
}
.bg-wrap > figure{
  color: var(--color-white);
}

/*station-wrap
--------------------------------- */
.station-wrap{}
.station-wrap .column{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

.station-wrap .column > div{
  width: calc((450 / var(--cont-width-nv-pc)) * 100%);
  text-align: left;
  /*font-feature-settings: "palt";*/
}
.station-wrap .column > div .t01{
  font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-pc)), 14px);/*14 / 13*/
  letter-spacing: 0.05em;
}
.station-wrap .column > div .t02{
  position: relative;
  display: inline-block;
  margin: 10px auto 0 0;
  padding: 0.4em 0.8em 0.4em 0.5em;
  background: var(--color-def01);
  color: var(--color-white);
  font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-pc)), 20px);/*20 / 16*/
  letter-spacing: 0.05em;
}
.station-wrap .column > div .t02 .cap{
  position: absolute;
  right: 0;
  bottom: -1.5em;
  text-align: right;
  color: var(--color-def01);
}
.station-wrap .column > div .t03{
  margin: 25px 0 15px 0;
  font-size: clamp(calc(36px * var(--font-markup)), calc(36vw / var(--vw-pc)), 36px);/*36 / 28*/
}
.station-wrap .column > div .copy03 .cap{
  display: block;
}
.station-wrap .column > div .copy03 + .copy03{
  margin: 20px 0 0 0;
  padding: 25px 0 0 0;
  border-top: 3px dotted #9fa0a0;
}
.station-wrap .column > div .copy03 + .copy03 + .t03{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 15px;
}
.station-wrap .column > div .copy03 + .copy03 + .t03 span{
  display: inline-block;
  margin: 5px 0 0 0;
}
.station-wrap .column > figure{
  width: calc((500 / var(--cont-width-nv-pc)) * 100%);
}


.station-wrap .sta-list{
  display: flex;
  justify-content: space-between;
}
.station-wrap .sta-list > li{
  width: calc((300 / var(--cont-width-nv-pc)) * 100%);
  text-align: left;
}
.station-wrap .sta-list > li dl{
  margin: 15px 0 0 0;
}
.station-wrap .sta-list > li dl dt{
  font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*16 / 15*/
}
.station-wrap .sta-list > li dl dd{
  margin: 10px 0 0 0;
  font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-pc)), 12px);/*12 / 12*/
}

.station-wrap .sta-list > li div{
  display: flex;
  margin: 20px 0 0 0;
  padding: 20px 0 0 0;
  border-top: 1px solid var(--color-def01);
}
.station-wrap .sta-list > li ul{
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  width: calc(100% / 2);
}
.station-wrap .sta-list > li ul li{
  font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-pc)), 14px);/*14 / 13*/
  line-height: var(--line-height-narrow);
}
.station-wrap .sta-list > li ul li::before{
  content: "○";
}
.station-wrap .sta-list > li ul:last-of-type::after{
  content: "etc.";
  font-size: clamp(calc(14px * var(--font-markup)), calc(14vw / var(--vw-pc)), 14px);/*14 / 13*/
}

/*枚方モール*/
.station-wrap .sta-list > li:nth-of-type(1) ul:nth-of-type(1){
  width: 40%;
}
.station-wrap .sta-list > li:nth-of-type(1) ul:nth-of-type(2){
  width: 60%;
}

@media screen and (max-width: 767px) {
  .station-wrap{}
  .station-wrap .column{
    flex-direction: column;
    justify-content: unset;
  }

  .station-wrap .column > div{
    width: 100%;
  }
  .station-wrap .column > div .t01{
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*14 / 13*/
  }
  .station-wrap .column > div .t02{
    font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-sp)), 16px);/*20 / 16*/
  }
  .station-wrap .column > div .t03{
    font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-sp)), 28px);/*36 / 28*/
  }
  .station-wrap .column > div .copy03 + .copy03{
    margin-top: 15px;
    padding-top: 20px;
  }
  .station-wrap .column > div .copy03 + .copy03 + .t03{
    margin-top: 10px;
  }
  .station-wrap .column > div .copy03 + .copy03 + .t03 span{}
  .station-wrap .column > figure{
    width: 100%;
  }
  
  .station-wrap .sta-list{
    flex-direction: column;
    justify-content: unset;
    gap: 30px;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
  .station-wrap .sta-list > li{
    width: 100%;
  }
  .station-wrap .sta-list > li dl{}
  .station-wrap .sta-list > li dl dt{
    font-size: clamp(calc(15px * var(--font-markup)), calc(15vw / var(--vw-sp)), 15px);/*16 / 15*/
  }
  .station-wrap .sta-list > li dl dd{
    font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-sp)), 12px);/*12 / 12*/
  }

  .station-wrap .sta-list > li div{
    margin-top: 15px;
    padding-top: 15px;
  }
  .station-wrap .sta-list > li ul{}
  .station-wrap .sta-list > li ul li{
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*14 / 13*/
  }
  .station-wrap .sta-list > li ul li::before{}
  .station-wrap .sta-list > li ul:last-of-type::after{
    font-size: clamp(calc(13px * var(--font-markup)), calc(13vw / var(--vw-sp)), 13px);/*14 / 13*/
  }

  /*枚方モール*/
  .station-wrap .sta-list > li:nth-of-type(1) ul:nth-of-type(1){
    width: 40%;
  }
  .station-wrap .sta-list > li:nth-of-type(1) ul:nth-of-type(2){
    width: 60%;
  }
}

/*train-wrap
--------------------------------- */
.train-wrap{}
.train-wrap .ttl-dir{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  background-image: linear-gradient(90deg, #90ad66, #d6e2c0 10%, #fef7fa 50%, #d6e2c0 90%, #90ad66);
  font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-pc)), 28px);/*28 / 20*/
  text-align: center;
}
.train-wrap .dir-list{
  display: flex;
  justify-content: space-between;
}
.train-wrap .dir-list li{
  width: calc((460 / var(--cont-width-nv-pc)) * 100%);
  text-align: center;
}
.train-wrap .dir-list li figure{
  position: relative;
}
.train-wrap .dir-list li figure .cap{
  position: absolute;
  right: 10px;
  bottom: 2px;
  color: var(--color-white);
}
.train-wrap .dir-list li .t01{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  margin: 25px 0;
  font-size: clamp(calc(28px * var(--font-markup)), calc(28vw / var(--vw-pc)), 28px);/*28 / 20*/
}
.train-wrap .dir-list li .t01 span{
  display: inline-block;
  margin: 5px 0 0 0;
}
.train-wrap .dir-list li .t02{
  font-size: clamp(calc(16px * var(--font-markup)), calc(16vw / var(--vw-pc)), 16px);/*16 / 12*/
  letter-spacing: 0;
}

@media screen and (max-width: 767px) {
  .train-wrap{}
  .train-wrap .ttl-dir{
    height: 40px;
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*28 / 20*/
  }
  .train-wrap .dir-list{
    flex-direction: column;
    gap: 30px;
  }
  .train-wrap .dir-list li{
    width: 100%;
  }
  .train-wrap .dir-list li figure{}
  .train-wrap .dir-list li figure .cap{
    right: 5px;
  }
  .train-wrap .dir-list li .t01{
    margin: 20px 0;
    font-size: clamp(calc(20px * var(--font-markup)), calc(20vw / var(--vw-sp)), 20px);/*28 / 20*/
  }
  .train-wrap .dir-list li .t01 span{}
  .train-wrap .dir-list li .t02{
    font-size: clamp(calc(12px * var(--font-markup)), calc(12vw / var(--vw-sp)), 12px);/*16 / 12*/
  }
}