/* ----------------------------
共通
------------------------------ */
.note{
  line-height: 1.5;
  margin: 0;
}

.note span{
  color: #FF0000;
}

h2{
  font-size: 2.4rem;
  color: #3D801D;
  font-weight: 700;
  text-align: center;
  margin: 0 auto 24px;
}

p a{
  color: #00AEBA;
  text-decoration: underline;
}

certificate-area,
payment-method-area{
  padding-top: -60px;
  margin-top: 60px;
}

@media screen and (min-width: 1025px) {
  h2{
  font-size: 3.2rem;
  margin: 0 auto 32px;
}
}

/* ----------------------------
hero
------------------------------ */
.hero-area{
  width: 100%;
  padding-top: 84px;
  --icon: url(../images/limited-express-pass/hero-bg.svg);
  background-color: transparent;
  background-image: var(--icon);
  background-position: bottom center;
  background-size: contain;
  background-repeat: no-repeat;
}

.hero-area-wrapper{
 width: calc(100% - 32px);
 margin: 0 auto;
 padding: 0 0 48px 0;
}

.hero-title{
  max-width: 360px;
  margin: 0 auto 24px;
}

.hero-sub-ttl{
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 700;
  color: #45B035;
  text-align: center;
  margin: 0 auto 8px;
}

.hero-description{
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  margin: 0 auto 24px;
}

.hero-img-wrapper{
  position: relative;
  text-align: right;
}

.hero-img{
  display: block;
  margin-left: auto;
  max-width: 100%; 
}

.hero-icon{
  width:32vw;
  height: 32vw;
  max-width: 136px;
  max-height: 136px;
  position: absolute;
  top: 0;
  left:4.5vw;
}

@media screen and (min-width: 630px) {
.hero-icon{
  top: 32px;
  left:10vw;
}
}

@media screen and (min-width: 768px) {
.hero-area{
  padding-top: 113px;
  --icon: url(../images/limited-express-pass/hero-bg-pc.svg);
}

.hero-area-wrapper{
 max-width: 930px;
 padding: 0 ;
 display: grid;
 grid-template-columns: 55% 45%;
 grid-template-rows: auto auto auto auto;
 grid-template-areas:
  "hero-title hero-img"
  "hero-sub-ttl hero-img"
  "hero-description hero-img"
  "sales-btn hero-img";
}

.hero-title{
  grid-area: hero-title;
  margin: 0 auto 20px;
}

.hero-sub-ttl{
  font-size: 1.4rem;
  grid-area: hero-sub-ttl;
  margin: 0 auto 8px;
}

.hero-description{
  font-size: 1.2rem;
  grid-area: hero-description;
  letter-spacing: -0.6px;
  margin: 0 auto 32px;
}

.sales-btn{
  grid-area: sales-btn;
  margin: 0 auto 58px;
}

.hero-img-wrapper{
  grid-area: hero-img;
}

.hero-img{
  position: absolute;
  bottom: 0; 
}

.hero-icon{
  top: -5px;
  left:0;
}
}
@media screen and (min-width: 1025px) {
.hero-area{
  padding-top: 130px;
}

.hero-area-wrapper{
  grid-template-columns: 50% 50%;
}

.hero-sub-ttl{
  font-size: 1.6rem;
}

.hero-description{
  font-size: 1.4rem;
  letter-spacing: 0px;
}

}

/* ----------------------------
運賃計算
------------------------------ */
.expenses-area{
  width: calc(100% - 16px);
  max-width: 1000px;
  margin: 40px auto 0;
}

.expenses-area-wrapper{
  padding: 32px 24px 24px;
  border: 1px solid #C7C7C7;
  position: relative;
}

.expenses-area h2{
  width: 100%;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: #45B035;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translate(-50%, 0%);
}

.expenses-area h2::after{
  content: '';
  width: 70%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: -1;
}

.select-box-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.select-box-wrapper select{
  width: calc(100% - 72px);
  border: 1px solid #C7C7C7;
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  --icon: url(../images/icon-arrow-bottom.svg);
  background-color: transparent;
  background-image: var(--icon);
  background-position: center right 8px;
  background-size: 12px 8px;
  background-repeat: no-repeat;
}

.price-wrapper{
  display: block;
  width: 100%;
  margin: 16px auto 0;
  padding:16px;
  background: #E0EED3;
  border-radius: 8px;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

.expenses-area-note-wrapper{
  margin: 16px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.expenses-area-note{
  text-align: center;
}

.expenses-area-note2{
  text-align: left;
}

@media screen and (min-width: 768px) {
  .expenses-area{
    margin: 40px auto 40px;
  }

  .expenses-area-wrapper{
    padding: 40px 32px 32px;
  }

  .expenses-area h2::after{
    width: 25%;
  }

  .select-box-wrapper{
    flex-direction: row;
    justify-content: center;
  }

  .select-box-wrapper select{
    width: calc(100% / 3);
    max-width: 240px;
  }

  .price-wrapper{
    margin: 24px auto 0;
    max-width: 752px;
  }
  
  .expenses-area-note-wrapper{
  margin: 24px auto 0;
}

  .expenses-area-note,
  .expenses-area-note2,{
    font-size: 1.4rem;
}
}

@media screen and (min-width: 1025px) {
  .expenses-area {
    margin: 64px auto 0;
  }
}

/* ----------------------------
map
------------------------------ */
.map-area{
width: calc(100% - 32px);
max-width: 920px;
 margin: 64px auto 0;
}

.map-img{
  border-radius: 10px;
  overflow: hidden;
}

.map-area-note{
  margin: 16px auto 0;
  text-align: center;
}

.discrict-area{
  margin: 24px auto 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.district-table-wrapper h3{
  font-size: 1.6rem;
  font-weight: 700;
  color: #45B035;
  margin: 0 0 8px 0;
}

.district-table{
  margin: 8px auto 0;
  width: 100%;
  border: 1px solid #C7C7C7;
}

.district-table tr{
  border-bottom: 1px solid #C7C7C7;
  padding: 8px;
}

.district-table th,
.district-table td{
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 500;
  padding: 8px;
  vertical-align:middle
}

.district-table th{
  text-align: center;
  background: #ECF5E9;
  width:37%;
}

.district-table td{
  width:63%;
}

@media screen and (min-width: 1025px) {
  .map-area{
  margin: 80px auto 0;
  }

  .discrict-area{
    width: 100%;
    flex-direction: row;
    gap: 20px;
  }

  .district-table-wrapper{
    width: 50%;
  }

  .district-table-wrapper h3{
    font-size: 2rem;
    margin: 0 0 5px 0;
  }

  .district-table tr{
    padding: 16px;
  }

  .district-table th{
    width: 30%;
  }

  .district-table td{
    width:70%;
  }
}

/* ----------------------------
特急e-Passのご登録方法 ご利用方法
------------------------------ */
/* --共通-- */
.process-buy-area,
.process-use-area{
width: 100%;
 margin: 64px auto 0;
 padding: 40px 0;
 background-image: url(../images/pattern.png);
 background-repeat: repeat;
 background-size: 106px auto;
}

.process-use-area{
 margin: 0 auto;
 padding: 40px 0 80px;
}

.process-buy-area h3,
.process-use-area h3{
  font-size: 1.6rem;
  line-height: 1.45;
  font-weight: 700;
  text-align: center;
  color:#45B035;
  padding: 8px;
  margin: 0 auto 24px;
  background: #ECF5E9;
  border-radius: 50px;
}

.process-buy-area h4,
.process-use-area h4{
  font-size: 1.4rem;
  line-height: 2;
  font-weight: 700;
  text-align: center;
  color:#45B035;
  margin: 8px auto;
}

.screen-image-wrapper{
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.screen-image{
 width: calc(100% - 32px);
 margin: 0 auto;
 position: relative;
}

.screen-image::after{
  content: '';
  display: block;
  width: 25px;
  height: 16px;
  background: url(../images/bg_arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translate(-50%, 0);
}

.screen-image:last-child:after{
  display: none;
  width: 0;
  height: 0;
  background: none;
}


.screen-image picture{
  max-width: 162px;
  height: auto;
  margin: 0 auto;
}

.double-image picture{
  max-width: 340px;
}

.flow-area,
.step-flow {
width: calc(100% - 16px);
max-width: 1000px;
margin: 0 auto;
}

.step-flow{
margin: 48px auto 0;
}

.screen-image-wrapper{
  margin: 24px auto 0;
}


/* --特急e-Pass新規購入の流れ-- */

.flow-img-wrapper{
  width: calc(100% - 92px);
  max-width: 340px;
  margin: 0 auto;
}

.flow-note{
  margin: 24px auto 0;
  text-align: left;
  padding: 0 0 0 20px;
}

.flow-note li{
  position: relative;
}

.flow-note li::before{
  display: block;
  content: '';
  width: 12px;
  height: 12px;
  background: #E0EED3;
  border-radius: 50px;
  position: absolute;
  top: 3px;
  left: -20px;  
}

/* --購入手順2.特急e-Passの申込（申込内容入力）-- */
.certificate-area{
  margin: 24px auto 0;
  border: 2px solid #00AEBA;
  background: #F4FBFE;
  padding: 24px 16px;
}

.certificate-area h4{
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 500;
  color: #222222;
  margin: 0 auto ;
}

.certificate-area h4 span{
  font-weight: 700;
  color: #00AEBA;
  margin: 0 auto 20px;
}

.certificate-table{
  width: 100%;
  border: 1px solid #C7C7C7;
  background: #fff;
  margin: 16px auto 0;
}

.certificate-table tr{
  display: flex;
  flex-direction: column;
}

.certificate-table th,
.certificate-table td{
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
  padding:8px 16px;
}

.certificate-table th{
  background:#00AEBA;
  color: #fff;
  border-top: 1px solid #C7C7C7;
  border-bottom: 1px solid #C7C7C7;
}

.certificate-table th:first-child{
  border-top: none;
}

.certificate-note{
  text-align: left;
  margin: 16px auto 0;
}

/* --購入手順3.お支払い-- */

.payment-area .single-image picture{
  max-width: 162px;
}

.payment-method-area{
  border: 2px solid #00AEBA;
  background: #fff;
  margin: 24px auto 0;
}

.payment-method-area h4{ 
  color: #fff;
  background: #00AEBA;
  margin: 0 auto;
  padding: 4px 0;
}

.payment-method-wraper{
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding:16px 16px 24px;
}

.payment-method h5{
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: center;
  color: #00AEBA;
  margin: 0 auto 16px;
  padding: 4px;
  background: #F4FBFE;
  border-radius: 50px;
}

.credit-card-note{
  margin: 16px auto 0;
}

.ATM-img{
  display: block;
  max-width: 56px;
  height: auto;
  margin: 0 auto;
}

.payment-method ul{
  width: fit-content;
  margin: 0 auto;
}

.payment-method ul li{
  font-size: 1.4rem;
  line-height: 1.5;
  list-style: disc;
}

/* --利用手順1.指定席を予約する-- */

.process-use-note{
  text-align: left;
  margin: 24px auto 0;
}

/* --利用手順2.乗車する-- */

.boarding-image{
  max-width: 162px;
  height: auto;
  margin: 24px auto 0;
}

@media screen and (min-width: 768px) {

.screen-note{
  text-align: center;
}

/* --特急e-Pass新規購入の流れ-- */
.flow-img-wrapper{
  width: 100%;
  max-width: 1000px;
}

/* --購入手順2.特急e-Passの申込（申込内容入力）-- */
.certificate-area h4{
  text-align: left;
}

.certificate-table tr{
  width: 100%;
  display: block;
}

.certificate-table th,
.certificate-table td{
  vertical-align: middle;
  text-align: left;
}

.certificate-table th{
  width: 13%;
  text-align: center;
}

.certificate-table td{
  width: 900px;
  border-bottom: 1px solid #C7C7C7;
}

.certificate-table tr:last-child th,
.certificate-table tr:last-child td{
  border-bottom: none;
}

/* --購入手順3.お支払い-- */

.payment-method-wraper{
  flex-direction: row;
}
.payment-method{
  width: 20%;
}

.credit-card{
  width: 320px;
}
}

@media screen and (min-width: 1025px) {
/* --共通-- */
.process-buy-area{
 margin: 80px auto 0;
}

.process-buy-area h3,
.process-use-area h3{
  font-size: 2rem;
}

.process-buy-area h3 + p,
.process-use-area h3 + p{
  text-align: center;
}

.screen-image-wrapper{
  flex-direction: row;
}

.screen-image{
 width: 133px;
}

.double-image{
  width: 274px;
}

.screen-image::after{
  width: 16px;
  height: 25px;
  background: url(../images/bg_arrow_vertical.svg);
  top: 25%;
  bottom: unset;
  left:unset;
  right: -35px;
  transform:unset
}

.screen-note{
  text-align: left;
}

.step-flow{
margin: 56px auto 0;
}

/* --購入手順2.特急e-Passの申込（申込内容入力）-- */
.certificate-area{
  margin: 32px auto 0;
  padding: 24px;
}

.pass-application-area  .screen-image-wrapper{
  width: 820px;
}

.certificate-table{
  margin: 12px auto 0;
}

/* --購入手順3.お支払い-- */
.payment-area .single-image picture{
  max-width: 133px;
}

.payment-method-area{
  margin: 32px auto 0;
}

.payment-method-wraper{
  padding:24px;
}

.payment-method h5{
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: center;
  color: #00AEBA;
  margin: 0 auto 16px;
  padding: 4px;
  background: #F4FBFE;
  border-radius: 50px;
}

.credit-card-note{
  margin: 8px auto 0;
} 

/* --利用手順1.指定席を予約する-- */
.process-use-note{
  margin: 40px auto 0;
}

.seat-reservation-area .screen-image-wrapper{
  width: 1000px;
  flex-wrap: wrap;
  margin: 40px auto 0;
}

.seat-reservation-area .screen-image{
  margin: 0;
}

.seat-reservation-area2 .screen-image-wrapper{
  margin: 40px auto 0;
  justify-content: center;
}

.seat-reservation-area2 .screen-image{
  margin: 0;
}

/* --利用手順2.指定席を予約せずに乗車する-- */
.boarding-area .screen-image-wrapper{
  margin: 40px auto 0;
  width: 700px;
}
}

/* ----------------------------
ご注意
------------------------------ */
.pass-validity-info-area{
  background: #ECF5E9;
  padding: 0 0 80px 0;;
}

.pass-validity-info-area h2{
  margin: 40px auto 24px;
}

.pass-validity-info-area p{
  font-size: 1.2rem;
  line-height: 1.5;
}

.pass-validity-info-wrapper{
  width: calc(100% - 16px);
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px;
  border-radius: 10px;
  background: #fff;
}

.valid-zone-description{
  margin: 0 auto 48px;
}

.valid-zone-description + .valid-zone-description{
  margin: 0 auto;
}

.valid-zone-description h3{
  font-size: 1.4rem;
  line-height: 1.25;
  font-weight: 700;
  padding:0 0 0 13px;
  position: relative;
}

.valid-zone-description h3::before{
  display: block;
  content: '';
  width: 5px;
  height: 100%;
  background: #3D801D;
  position: absolute;
  left: 0;
}

.description-wrapper{
  margin: 32px auto 0;
}

.description-wrapper.border{
  border: 1px solid #C7C7C7;
  padding:16px;
}

.description-link{
  font-weight: 700;
  font-size: 1.4rem !important;
  margin: 0 0 16px 0;
}

.description-item-wrapper{
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 24px auto 0;
}

.allowed-item picture,
.ng-item picture{
  max-width: 454px;
}

.allowed-item p,
.ng-item p{
min-height: 40px;
margin: 0 auto;
padding: 20px 0 20px 48px;
--icon: url(../images/green_arrow.svg);
background-color: transparent;
background-image: var(--icon);
background-position: center left;
background-size:40px 40px;
background-repeat: no-repeat;
}

.allowed-item p{
--icon: url(../images/limited-express-pass/circle.svg);
}

.ng-item p{
--icon: url(../images/limited-express-pass/cross.svg);
}

.allowed-item .description-note,
.ng-item .description-note{
  padding: 0;
  min-height: fit-content;
  background: none;
}

.allowed-item p .teiki,
.ng-item p .teiki{
 color: #D10000;
}

.allowed-item p .epass,
.ng-item p .epass{
 color: #00B27D;
}

.allowed-item p .caution,
.ng-item p .caution{
 color: #FF0000;
}

@media screen and (min-width: 768px) {
.description-item-wrapper{
  flex-direction: row;
  flex-wrap: wrap;
}

.allowed-item,
.ng-item {
width: calc(50% - 24px);
max-width: 320px;
}
}

@media screen and (min-width: 1025px) {
.pass-validity-info-area h2{
  margin: 32px auto;
}

.pass-validity-info-wrapper{
  padding: 32px 40px;
}

.description-wrapper{
  margin: 40px auto 0;
}

.allowed-item, .ng-item{
  max-width: 400px;
}

.description-wrapper.border{
  padding:24px;
}

.description-item-wrapper{
  gap: 48px 32px;
  margin: 16px auto 0;
}
}