@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/* ------------------------------------------

  共通

 ------------------------------------------ */

body {
    font-family: 'Noto Sans JP', sans-serif;
}

html {
    scroll-behavior: smooth;
}

.mt10{ margin-top: 10px }
.mt15{ margin-top: 15px }
.mt20{ margin-top: 20px }
.mt25{ margin-top: 25px }
.mt30{ margin-top: 30px }
.mt35{ margin-top: 35px }
.mt40{ margin-top: 40px }

.attention{
    color: #d54100;
}

.pc { display: block !important; }
.sp { display: none !important; }

.flex {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.flex-cnt {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.indent {
    text-indent: -15px;
    padding-left: 15px;
}

/* 枠 */

.wrap1200,
.ticket-2025w section{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
}

/* ボタン */

.wh-btn{
  max-width: 350px;
  width: 90%;
  height: auto;
  margin: 6px auto;
  padding: 10px 20px;
  border-radius: 10px;
  background: linear-gradient(#ffffff 70%, #c9e481);
  box-shadow: 3px 4px 3px rgba(000,000,000,0.05);
  display: block;
  text-decoration: none;
  line-height: 1.5;
  font-size: 14px;
}
.gr-btn{
  max-width: 410px;
  width: 90%;
  height: auto;
  margin: 15px auto;
  padding: 21px 20px 22px;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(#64a41d 70%, #4f8114);
  box-shadow: 3px 4px 3px rgba(000,000,000,0.05);
  display: block;
  text-decoration: none;
  line-height: 1.5;
  font-size: 14px;
  font-weight: bold;
}


/* ------------------------------------------

  ページCSS

 ------------------------------------------ */

/* MV
--------------------------------- */

#reserve-btn a {
    width: 120px;
    height: 120px;
    padding: 20px;
    position: relative;
    border: 2px solid #2b8117;
    color: #45999b;
    border-radius: 50%;
    display: block;
    line-height: 1.3;
    text-decoration: none;
    text-align: center;
    background: #fff;
}
#reserve-btn a img {
    width: 29px;
    display: inline-block;
    margin-bottom: 8px;
}

.info {
    font-family: 'Zen Maru Gothic', sans-serif;
    background: #c4d82d;
    padding: 30px 170px;
    font-weight: bold;
    font-size: 15px;
}
.info .head {
    margin-bottom: 10px;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.info .head li {
    padding: 5px 15px;
    color: #207b0b;
    background: #fff;
}
.info .head li:nth-child(1) {
    width: 30%;
}
.info .head li:nth-child(2) {
    width: 69%;
}
.info dl,
.info dl dt {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.info dl.dotted {
    border-bottom: 2px dotted #707070;
}
.info dl dt .day {
    width: 100%;
}
/* 表示なし
.info dl dt .time {
    width: 40%;
}*/
.info dl dt {
    width: 30%;
}
.info dl dd {
    width: 69%;
}


.info .come{
    width: 100%;
    font-size: 12px;
    display: block;
    margin-top: 15px;
}
.route .come {
    width: 100%;
    font-size: 12px;
    display: block;
    margin-top: 8px;
}
.info .come li,
.route .come li{
    text-indent: -7px;
    padding-left: 13px;
    line-height: 1.42;
    margin-bottom: 3px;
}
.info .come li:before,
.route .come li:before{
    content: "※";
    display: inline-block;
    padding-right: 2px;
}
.info .come li:last-child,
.route .come li:last-child{
    margin-bottom: 0;
}

.route {
    width: 100%;
    min-height: 866px;
    margin: 30px auto 0 !important;
    background-image: url("/ticket-2025w/img/bg_route_01_pc.jpg");
    background-position: left bottom;
    background-repeat: no-repeat;
}
.route h2 {
    margin: 60px 0 20px;
    text-align: center;
}
.route .map {
    max-width: 655px;
    width: 100%;
    display:flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.route .map dl {
    width: 49%;
    margin-top: 15px;
    display:flex;
    flex-wrap: wrap;
}
.route .map .nago {
    width: 49%;
}
.route .map .nago dl{
  width: 100%;
}
.route .map dl dt {
    width: 30%;
    color: #fff;
    position: relative;
}
.route .map dl dt span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.route .map dl dt span mark {
    display: block;
    font-size: 12px;
    background: none;
    color: #fff;
}
.route .map .tokyo dt {
    background: #86ac01;
}
.route .map .nago dt {
    background: #49999a;
}
.route .map .oki dt {
    background: #3e9c10;
}
.route .map dl dd {
    width: 70%;
    padding: 0 0 0 20px;
}
.route .map dl dd ul li.long{
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.3;
}
.route .map dl dd ul li.long span span{
    font-size: 12px;
    display: block;
    text-align: center;
}
.route .map dl dd ul li:last-child{
  margin-bottom: 0;
}
.route .map dl dd ul li::before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 21px;
    background-image: url("/ticket-2025w/img/ico_route_01.png");
    background-size: contain;
    vertical-align: middle;
    margin-right: 5px;
}
.route .timetable-btn {
    max-width: 450px;
    width: 85%;
    margin: 270px auto 0;
    padding: 20px 0;
    text-align: center;
    font-size: 17px;
}
.route .timetable-btn:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    transition: 0.3s;
}

.service{
    background: #c5d82e;
    display:flex;
    flex-wrap: wrap;
    align-items: center;
}
.service .img-wrap {
    width: 60%;
    padding-left: 95px;
}
.service .txt-wrap {
    width: 40%;
    text-align: center;
}
.service .txt-wrap img {
    width: 80px;
    display: inline-block;
    margin: 0 0 20px;
}
.service .txt-wrap h3 {
    margin-bottom: 6px;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    line-height: 1;
}
.service .txt-wrap h3 + span {
    font-size: 14px;
    color: #3e9c10;
    font-weight: bold;
}
.service .txt-wrap p {
    margin: 10px 0;
}
.point {
    text-align: center;
}
.point ol li {
    margin-top: 100px;
}
.point ol li > img {
    width: 207px;
    display: inline-block;
    margin-bottom: 10px;
}
.point .txt h3{
    margin: 5px 0 10px;
    font-size: 28px;
    line-height: 1.3;
}
.point ol li:nth-child(3) .txt h3{
    margin: 15px 0 10px;
}
.point .txt span{
    font-weight: bold;
}
.point-img{
    max-width: 134px;
    min-height: 123px;
    display: flex;
    align-items: center;
    margin: 0 auto;
}
.point .txt h3 b{
    font-size: 32px;
    color: #86ac01;
    font-weight: bold;
    display: inline-block;
    padding: 0 1px;
}
.point .txt h3 b.num{
    font-size: 40px;
}
.point4 .gr-btn{
  padding: 12px 20px;
}

.module-txt{
  margin: 100px auto 0;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.module-wrap{
    max-width: 1100px;
    width: 100%;
    margin: 20px auto;
}
.module-wrap img{
    width: 100%;
}

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

  /* ボタン */

  .wh-btn,
  .gr-btn{
    font-weight: bold;
    padding: 12px 5px !important;
  }

  .pc { display: none !important; }
  .sp { display: block !important; }

  .info .head {
      display:none;
  }
  .info {
      padding: 10px;
      font-size: 15px;
  }
  .info dl {
      padding: 5px 0;
  }
  .info dl.dotted {
      border-bottom: 0;
  }
  .info dl dt::before {
      width: 100%;
      padding: 4px 0;
      margin-bottom: 5px;
      display: inline-block;
      content: "販売開始日時";
      color: #207b0b;
      background: #fff;
      text-align: center;
  }

  /*
  .info dl dt .time {
      width: 20%;
  }*/
  .info dl dt {
      width: 100%;
      padding: 5px 5px 10px 5px;
  }
  .info dl dd {
      width: 100%;
      padding: 5px;
  }
  .info dl dd::before {
      width: 100%;
      padding: 4px 0;
      margin-bottom: 5px;
      display: inline-block;
      content: "対象運賃";
      color: #207b0b;
      background: #fff;
      text-align: center;
  }

  .info .come {
      margin-top: 10px;
  }
  .info .come li,
  .route .come li{
      line-height: 1.34;
  }
  .route {
      margin: 0 auto !important;
      padding-bottom: 20px;
      min-height: auto;
      background-image: url("/ticket-2025w/img/bg_route_01_sp.jpg");
  }
  .route h2 {
      margin: 0;
      text-align: center;
  }
  .route .map {
      padding: 0 15px;
  }
  .route .map dl {
      width: 100%;
  }
  .route .map .nago {
      width: 100%;
  }
  .route .map dl dt {
      width: 40%;
  }
  .route .map dl dd {
      width: 60%;
  }
  .route .map .tokyo { order: 1; }
  .route .map .nago { order: 3; }
  .route .map .oki { order: 2; }

  .route .timetable-btn {
      margin: 20px auto 0;
      box-shadow: 3px 2px 5px #909090;
  }

  .point{
      padding: 0 15px;
  }

  .service .img-wrap {
      width: 100%;
      padding-left: 0;
      order: 2;
  }
  .service .txt-wrap {
      width: 100%;
      padding: 20px;
      order: 1;
  }
  .service .txt-wrap{
      line-height: 1.5;
  }
  .service .txt-wrap h3 {
      font-size: 18px;
  }

  .point ol li {
      margin-top: 30px;
  }
  .point ol li .txt {
      min-height: 152px;
      display:flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
  }
  .point ol li .txt .point-img {
      width: 35%;
  }
  .point ol li .txt h3 {
      width: 65%;
      font-size: 20px;
      text-align: left;
  }
  .point ol li:nth-child(2) .txt h3 {
      padding-left: 10px;
  }
  .point .txt h3 b.num {
      font-size: 26px;
  }
  .point .txt h3 b {
      font-size: 23px;
  }
  .point ol li .txt + p {
      margin: 10px 0 0;
      text-align: left;
      font-size: 15px;
      line-height: 1.6;
  }
  #reserve-btn a{
      width: 100px;
      height: 100px;
      padding: 13px;
  }

  .module-txt{
    width: 100%;
    margin: 65px auto 0;
    font-size: 16px;
    font-weight: bold;
    border-bottom: none;
    text-align: center;
  }
  .module-txt span{
    display: none;
  }
  .module-wrap{
      padding: 0 15px;
      margin: 5px auto;
  }


}


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

  .route .map dl dt {
      width: 30%;
  }
  .route .map dl dd {
      width: 60%;
  }
  .service .txt-wrap p br{
      display: none !important;
  }

}