@charset "utf-8";

/***************************************************************************

  交通アクセス
  /access/

***************************************************************************/
/*--------------------------------------------------------------------------
共通
--------------------------------------------------------------------------*/
main.access section p + p {
  margin-top: 14px;
}

/*-----------------------------------
  タイトル
-----------------------------------*/
.titleBlock.access,
.titleBlock.bus {
  background: url(../img/access/bg_title.jpg) no-repeat center;
  background-size: cover;
  position: relative;
  height: 320px;
  display: flex;
}
.titleBlock.parking,
.titleBlock.carbike {
  background: url(../img/access/bg_title-carbike.jpg) no-repeat center;
  background-size: cover;
  position: relative;
  height: 320px;
  display: flex;
}

.titleBlock::after {
  background: rgba(0, 0, 0, 0.3);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.titleBlock h1,
.titleBlock p {
  position: relative;
  color: #ffffff !important;
  z-index: 1;
  font-weight: bold;
}

.titleBlock h1 {
  font-size: 4.2rem;
  line-height: 1.2;
}
.titleBlock p {
  margin: 16px 0 0 0;
}

main.access h2 {
  margin: 80px 0 32px;
  font-size: 3rem;
  font-weight: bold;
}
main.access h3 {
  margin: 60px 0 32px;
  padding: 0 0 16px;
  font-size: 2.6rem;
  line-height: 1.5;
  font-weight: bold;
  border-bottom: 1px solid #1073E5;
}
main.access h4 {
  margin: 32px 0 0;
  padding: 0 0 16px;
  font-size: 2.4rem;
  line-height: 1.5;
  font-weight: bold;
  color: #1073E5;
}


/*-----------------------------------
  ページ遷移ナビ
-----------------------------------*/
.pageMoveNavi {
  margin: 48px 0 80px;
}
.pageMoveNavi ul {
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  gap: 0 12px;
}
.pageMoveNavi ul li {
  width: calc(100% / 6);
  height: 90px;
}
.pageMoveNavi ul li a {
  width: 100%;
  height: 100%;
  padding: 12px;
  color: #1073E5;
  display: flex;
  justify-content: center;
  align-items: end;
  border: 2px solid #9DD4EF;
  border-radius: 8px;
  transition: 0.3s;
}
.pageMoveNavi ul li.current {
  background: linear-gradient(90deg, rgba(29, 151, 232, 1) 0%, rgba(11, 108, 206, 1) 100%);
  border-radius: 8px;
}
.pageMoveNavi ul li.current span {
  width: 100%;
  height: 100%;
  padding: 12px;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: end;
  border-radius: 8px;
}
.pageMoveNavi ul li.guide a {
  background: url(../img/access/icon_access.svg) no-repeat center 7px;
}
.pageMoveNavi ul li.guide.current span {
  background: url(../img/access/icon_access_white.svg) no-repeat center 7px;
}
.pageMoveNavi ul li.parking a {
  background: url(../img/access/icon_parking.svg) no-repeat center 7px;
}
.pageMoveNavi ul li.parking.current span {
  background: url(../img/access/icon_parking_white.svg) no-repeat center 7px;
}
.pageMoveNavi ul li.car_bike a {
  background: url(../img/access/icon_car-bike.svg) no-repeat center 7px;
}
.pageMoveNavi ul li.car_bike.current span {
  background: url(../img/access/icon_car-bike_white.svg) no-repeat center 7px;
}
.pageMoveNavi ul li.bus a {
  background: url(../img/access/icon_bus.svg) no-repeat center 7px;
}
.pageMoveNavi ul li.bus.current span {
  background: url(../img/access/icon_bus_white.svg) no-repeat center 7px;
}
.pageMoveNavi ul li.taxi a {
  background: url(../img/access/icon_taxi.svg) no-repeat center 7px;
}
.pageMoveNavi ul li.taxi.current span {
  background: url(../img/access/icon_taxi_white.svg) no-repeat center 7px;
}
.pageMoveNavi ul li.rental_car a {
  background: url(../img/access/icon_rentalcar.svg) no-repeat center 7px;
}
.pageMoveNavi ul li.rental_car.current span {
  background: url(../img/access/icon_rentalcar_white.svg) no-repeat center 7px;
}
.pageMoveNavi ul li a:hover {
  border-color: #1073E5;
  transition: 0.3s;
}

/*--------------------------------------------------------------------------
インデックス
--------------------------------------------------------------------------*/
.lwrIndexBtnNavi ul li.guide a span {
  background: url(../img/access/icon_access.svg) no-repeat left center;
}
.lwrIndexBtnNavi ul li.parking a span {
  background: url(../img/access/icon_parking.svg) no-repeat left center;
}
.lwrIndexBtnNavi ul li.car_bike a span {
  background: url(../img/access/icon_car-bike.svg) no-repeat left center;
}
.lwrIndexBtnNavi ul li.bus a span {
  background: url(../img/access/icon_bus.svg) no-repeat left center;
}
.lwrIndexBtnNavi ul li.taxi a span {
  background: url(../img/access/icon_taxi.svg) no-repeat left center;
}
.lwrIndexBtnNavi ul li.rental_car a span {
  background: url(../img/access/icon_rentalcar.svg) no-repeat left center;
}


/*--------------------------------------------------------------------------
駐車場・駐輪場
--------------------------------------------------------------------------*/
nav.lwrCommonNaviInpage.parking ul li {
  width: calc((100% /2) - 9px);
}
.pageMoveNavi + nav.lwrCommonNaviInpage.parking {
  margin-top: -40px;
}
.boxImportant.gray {
  background: #FAFAFA;
  border-color: #DEDEDE;
}
.boxImportant.gray dl {
  color: #333333;
}
.boxImportant.gray dl dt {
  background: url(../img/icon_important-blue.svg) no-repeat 0 0;
  background-size: 24px;
}
.boxImportant.gray dl dd {
  padding-left: 7px;
}

.parkingStatusBlock .statusBox {
  display: flex;
  justify-content: center;
  padding: 32px 0 26px;
  background: #EBF6FF;
  border-radius: 8px;
  text-align: center;
}
.parkingStatusBlock .statusBox div {
  padding: 0 0 14px;
  width: calc(100% / 3);
  border-right: 1px solid #BED8E1;
}
.parkingStatusBlock .statusBox div:last-child {
  border: none;
}
.parkingStatusBlock .statusBox dl dt {
  padding: 0 0 16px;
  font-weight: bold;
  line-height: 1.4;
}
.parkingStatusBlock .statusBox dl dt strong {
  font-size: 4rem;
  font-family: 'Roboto';
  color: #1073E5;
  display: block;
}
.parkingStatusBlock .timeBox {
  margin: 4px 0 0 0;
  font-size: 1.3rem;
  text-align: right;
}

.lwrCommonTable td dl.parkingListBox {
  display: flex;
}
.lwrCommonTable td dl.parkingListBox dt {
  width: 6em;
  font-weight: bold;
}
.lwrCommonTable td dl.parkingListBox dd {
  width: 9em;
}

main.access h3 + table.lwrCommonTable {
  margin-top: -30px;
}

.lwrCommonTable td dl.discountedRateBox {
  display: flex;
  border-top: 1px solid #DEDEDE;
}
.lwrCommonTable td dl.discountedRateBox:first-child {
  border: none;
  margin-top: -22px;
}
.lwrCommonTable td dl.discountedRateBox:last-child {
  margin-bottom: -22px;
}
.lwrCommonTable td dl.discountedRateBox dt {
  padding: 24px 30px 24px 0;
  font-weight: bold;
}
.lwrCommonTable td dl.discountedRateBox dd {
  width: calc(100% - 3em - 40px);
  padding: 24px 0;
}


/*--------------------------------------------------------------------------
バス
--------------------------------------------------------------------------*/
table td.busStopTd {
  width: 480px;
}
table td.busStopTd img {
  vertical-align: middle;
}
table td .busstopCol1 {
  margin: 0 18px 0 0;
  width: 28px;
  display: inline-block;
}
table td .busstopCol2 {
  margin: 0 18px 0 0;
  width: 64px;
  text-align: center;
  display: inline-block;
}

.busInfoBlock {
  display: flex;
  justify-content: space-between;
}
.busInfoBlock h4 {
  margin: 0 0 0 !important;
}
.busInfoBlock .routeBox {
  width: 460px;
}
.busInfoBlock .priceBox {
  width: 680px;
}
.busInfoBlock .priceBox table.lwrColorTable {
  margin: 0 0 5px;
}
.busInfoBlock .priceBox table.lwrColorTable td {
  padding: 19px 20px;
}
.busInfoBlock .priceBox table.lwrColorTable tr td:nth-child(2),
.busInfoBlock .priceBox table.lwrColorTable tr td:nth-child(3) {
  width: 180px;
}
.busInfoBlock .priceBox table.lwrColorTable + p small {
  font-size: 1.3rem;
}
.busInfoBlock .priceBox ul.listDot li {
  margin: 0;
}

/*--------------------------------------------------------------------------
空港までのアクセス
--------------------------------------------------------------------------*/
/*-----------------------------------
公共交通機関でのアクセス
-----------------------------------*/
.publicTransBlock {
  display: flex;
  justify-content: space-between;
}
.publicTransBlock .publicList {
  width: calc(100% - 580px - 32px);
}
.publicTransBlock .publicList table {
  margin-bottom: 12px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}
.publicTransBlock .publicList table tr {
  display: flex;
  justify-content: space-between;
}
.publicTransBlock .publicList table tr.midashi th,
.publicTransBlock .publicList table tr.midashi td {
  font-size: 1.6rem;
  font-weight: bold;
  padding: 0 0 10px;
} 
.publicTransBlock .publicList table th {
  width: 224px;
  padding: 16px 0 16px 42px;
  border-bottom: 1px solid #1073E5;
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  background-size: 32px;
}
.publicTransBlock .publicList table th.matsuyamasta {
  background: url(../img/access/guide/icon_matsuyamasta.svg) no-repeat left center;
}
.publicTransBlock .publicList table th.matsuyamacitysta {
  background: url(../img/access/guide/icon_matsuyamacitysta.svg) no-repeat left center;
}
.publicTransBlock .publicList table th.dougospa {
  background: url(../img/access/guide/icon_dougospa.svg) no-repeat left center;
}
.publicTransBlock .publicList table th.kankoport {
  background: url(../img/access/guide/icon_kankoport.svg) no-repeat left center;
}
.publicTransBlock .publicList table td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 224px - 12px);
  padding: 8px 0 10px;
  border-bottom: 1px solid #DDDDDD;
}
.publicTransBlock .publicList table td i {
  font-family: "Roboto",serif;
  font-size: 3.4rem;
  font-weight: bold;
  display: inline-block;
  padding: 0 4px;
}
.publicTransBlock .publicList ul.listNote {
  font-size: 1.3rem;
  color: #666666;
}

.busBtnBox {
  margin: 40px 0 0 0;
}
.busBtnBox ul {
  padding: 38px 0;
  display: flex;
  justify-content: center;
  gap: 0 30px;
  background: #F5FBFE;
  border-radius: 4px
}
.busBtnBox.noBg {
  margin: 48px 0 0 0;
}
.busBtnBox.noBg ul {
  padding: 0;
  background: none;
}
.busBtnBox ul li {
  width: 427px;
}
.busBtnBox ul li a {
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  display: block;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(29, 151, 232, 1) 0%, rgba(11, 108, 206, 1) 100%);
  box-shadow: 0 2px 4px rgba(59, 133, 170, 0.3);
  transition: 0.3s;
}
.busBtnBox ul li a[target="_blank"] span {
  background: url(../img/icon_blank_white.svg) no-repeat right 18px center;
  background-size: 24px;
  display: block;
  width: 100%;
}
.busBtnBox ul li a:hover {
  opacity: 0.7;
  transform: 0.3s;
}

.parkingContactBox {
  margin: 80px 0;
  display: flex;
  align-items: center;
  padding: 30px 40px;
  background: #FAFAFA;
  border: 1px solid #DEDEDE;
  border-radius: 8px;
}
.parkingContactBox div:first-child {
  width: 44%;
  padding: 10px 40px 10px;
  border-right: 1px solid #DEDEDE;
}
.parkingContactBox div:first-child dl dt {
  margin: 0 0 10px;
  font-size: 2.2rem;
  font-weight: bold;
}
.parkingContactBox div:last-child {
  padding: 0 0 0 40px;
}
.parkingContactBox div:last-child dl dt {
  font-weight: bold;
}
.parkingContactBox div:last-child dl dd {
  padding: 0 0 0 46px;
  font-size: 3.8rem;
  font-family: 'Roboto';
  font-weight: bold;
  color: #1073E5;
  background: url(../img/icon_tel.png) no-repeat left center;
  background-size: 40px;
}

/*-----------------------------------
  各地からのアクセス
-----------------------------------*/
.accessPageLink {
  background: #EBF6FF;
  border-radius: 4px;
  padding: 32px 22px 8px 32px;
}
.accessPageLink .title {
  color: #1073E5;
  font-size: 2rem;
  font-weight: bold;
  margin: 0 0 16px;
}
.accessPageLink ul {
  overflow: hidden;
  margin: 0 0 24px;
}
.accessPageLink ul li {
  width: calc((100% / 5) - 10px);
  float: left;
  margin-right: 10px;
}
.accessPageLink ul li:last-child {
  margin-right: 0;
}
.accessPageLink ul li a {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.2;
  padding: 16px 16px 17px;
  width: 100%;
  display: block;
  border: 1px solid #9DD4EF;
  background: #ffffff url(../img/arrow_blue-circle-down.png) no-repeat right 15px center;
  background-size: 20px;
  border-radius: 6px;
  transition: 0.3s;
}
.accessPageLink ul li a:hover {
  border-color: #1073E5;
  transition: 0.3s;
}


.accessFlowBlock {
  background: #EBF6FF;
  border-radius: 12px;
  padding: 26px 24px 16px;
  margin: 0 0 6px;
}
main.access h3 + .accessFlowBlock {
  margin-top: 32px;
}
.accessAcdBtn {
  display: block;
  font-size: 2.0rem;
  line-height: 1.5;
  font-weight: bold;
  margin: 0 0 12px;
  cursor: pointer;
  position: relative;
  transition: 0.3s;
}
.accessAcdBtn.accessAcdCnt_open {
  margin: 0 0 24px;
}
.accessAcdBtn::after {
  content: '';
  width: 32px;
  height: 32px;
  background: url(../img/arrow_blue_up.svg);
  background-size: contain;
  position: absolute;
  transform: rotate(-180deg);
  right:0;
  top: 0;
  transition: 0.3s;
}
.accessAcdBtn.accessAcdCnt_open::after {
  transform: rotate(0);
}
.accessMeans {
  display: block;
  font-size: 1.8rem;
  line-height: 1.6;
  font-weight: bold;
  padding: 7px 0 7px 52px;
  margin: 0 0 15px;
  background-size: 42px auto !important;
  transition: 0.3s;
}
.accessOverview + .accessMeans {
  margin-top: 24px;
}

.accessAcdCnt {
  display: none;
}

.accessMeans.accessCar {
  background: url(../img/car_blue_icn.svg) no-repeat left center;
}
.accessMeans.accessBus {
  background: url(../img/bus_blue_icn.svg) no-repeat left center;
}
dl.accessOverview {
  width: 100%;
  min-height: 112px;
  padding: 16px 32px 16px 22px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 40px;
  margin: 0 0 8px;
}
dl.accessOverview dt {
  width: 130px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  font-weight: bold;
  background: #1073E5;
  border-radius: 16px;
  padding: 4px 6px 6px;
  color: #fff;
}
dl.accessOverview dd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: calc(100% - 130px);
  gap: 0 38px;
}
dl.accessOverview dd .accessFlowTime {
  width: 145px;
  font-size: 16px;
  font-weight: bold;
}
dl.accessOverview dd .accessFlowTime i {
  font-size: 34px;
  line-height: 1;
  padding: 0 5px;
  display: inline-block;
}
dl.accessOverview dd .accessFlowline {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}
dl.accessOverview dd .accessFlowline::after {
  content: '';
  width: 99%;
  height: 2px;
  background: #1073E5;
  position: absolute;
  left: 0;
  top: auto;
  z-index: 1;
}
dl.accessOverview dd .accessFlowline .accessPlace {
  background: #fff;
  color: #1073E5;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3;
  z-index: 2;
  border: solid 1px #1073E5;
  border-radius: 6px;
  padding: 6px 9px 8px;
}
dl.accessOverview dd .accessFlowline li.accessPlace:last-child {
  background: #1073E5;
  color: #fff;
}
.accessFlowline:has(> :nth-child(5):last-child) li:nth-child(2) {
  width: 40%;
}
dl.accessOverview dd .accessFlowline .accessWay {
  font-size: 13px;
  font-weight: bold;
  line-height: 1.3;
  margin: -3.8em 0 0;
  height: 3em;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .accessGuide {
    padding: 0 15px;
  }
  .accessFlowBlock {
    background: #EBF6FF;
    border-radius: 12px;
    padding: 16px 15px 4px;
    margin: 0 0 16px;
  }
  .accessAcdBtn {
    font-size: 1.8rem;
    margin: 0 0 12px;
  }
  .accessAcdBtn.accessAcdCnt_open {
    margin: 0 0 24px;
  }
  .accessAcdBtn::after {
    width: 24px;
    height: 24px;
  }
  .accessMeans {
    font-size: 1.7rem;
    margin: 0 0 12px;
  }
  dl.accessOverview {
    width: 100%;
    min-height: initial;
    padding: 0 0;
    border-radius: 8px;
    display: block;
    margin: 0 0 12px;
  }
  dl.accessOverview dt {
    width: 100%;
    display: block;
    text-align: left;
    font-size: 16px;
    border-radius: 8px;
    padding: 16px 16px 16px;
    color: #fff;
    position: relative;
    transition: 0.3s;
  }
  dl.accessOverview dt.accessOverview_open {
    border-radius: 8px 8px 0 0;
  }
  dl.accessOverview dt::after {
    content: '';
    width: 24px;
    height: 24px;
    background: url(../img/arrow_white_up.svg);
    background-size: contain;
    position: absolute;
    transform: rotate(-180deg);
    right: 12px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    transition: 0.3s;
  }
  dl.accessOverview dt.accessOverview_open::after {
    transform: rotate(0);
  }
  dl.accessOverview dd {
    padding: 20px 15px 20px;
    display: block;
    width: 100%;
  }
  dl.accessOverview dd .accessFlowTime {
    width: 100%;
    font-size: 15px;
    display: block;
    padding: 0 0 15px;
  }
  dl.accessOverview dd .accessFlowTime i {
    font-size: 30px;
  }
  dl.accessOverview dd .accessFlowline {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
    flex-direction: column;
    gap: 20px 0;
  }
  dl.accessOverview dd .accessFlowline::after {
    width: 2px;
    height: 99%;
    left: 18px;
    top: 2px;
    z-index: 1;
  }
  dl.accessOverview dd .accessFlowline .accessPlace {
    width: 100%;
    display: block;
    font-size: 14px;
    line-height: 1.3;
    z-index: 2;
    border-radius: 4px;
    padding: 6px 9px 8px ;
  }
  .accessFlowline:has(> :nth-child(5):last-child) li:nth-child(2) {
    width: initial;
  }
  dl.accessOverview dd .accessFlowline .accessWay {
    font-size: 13px;
    margin: 0 0 0;
    padding: 0 0 0 32px;
    height: initial;
    display: block;
  }
  
  dl.accessOverview dd {
    display: none;
  }
  
}

/* 各交通機関のお問い合わせ先 */
table.inqTable {
  width: 100%;
  border-bottom: 1px solid #DEDEDE;
}
table.inqTable tr {
  border-top: 1px solid #DEDEDE;
}
table.inqTable th {
  width: 700px;
  font-weight: bold;
}
table.inqTable th a {
  text-decoration: underline;
}
table.inqTable th a:hover {
  text-decoration: none;
}
table.inqTable th a[target="_blank"] {
  background: url(../img/icon_blank.png) no-repeat right center;
  background-size: 20px;
  padding-right: 28px;
}
table.inqTable td {
  padding: 24px 0;
  font-size: 2.4rem;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #1073E5;
  line-height: 1.4;
}
table.inqTable td small {
  font-size: 1.4rem;
  font-weight: 400;
  display: block;
  color: #333333;
}
table.inqTable td.tel {
  padding-left: 54px;
  background: url(../img/icon_tel.png) no-repeat left center;
  background-size: 40px;
}
table.inqTable td.mail {
  padding-left: 54px;
  background: url(../img/icon_mail.png) no-repeat left center;
  background-size: 40px;
}


.columnLimg,
.column2img {
  display: flex;
  justify-content: space-between;
  margin: 0 0 24px;
}
.columnLimg .img {
  width: 460px;
}
.columnLimg .txt {
  width: calc(100% - 460px - 24px);
}

.column1img {
  margin: 32px 0;
}

.column2img {
  gap: 24px;
  margin: 24px 0;
}
.column2img div {
  width: 50%;
}

.blueBigBtnBox {
  margin: 48px 0;
}
.blueBigBtnBox ul {
  display: flex;
  justify-content: center;
}
.blueBigBtnBox ul li {
  width: 427px;
}
.blueBigBtnBox ul li a {
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  display: block;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(29, 151, 232, 1) 0%, rgba(11, 108, 206, 1) 100%);
  box-shadow: 0 2px 4px rgba(59, 133, 170, 0.3);
  transition: 0.3s;
}
.blueBigBtnBox ul li a span {
  background: url(../img/arrow_white-circle-right.png) no-repeat right 20px center;
  background-size: 24px;
  display: block;
  width: 100%;
}
.blueBigBtnBox ul li a:hover {
  opacity: 0.7;
  transform: 0.3s;
}

.skyblueLineBtnBox ul {
  display: flex;
  justify-content: space-between;
  gap: 0 12px;
}
.skyblueLineBtnBox ul li {
  width: calc(100% / 3);
  border: 2px solid #9DD4EF;
  border-radius: 6px;
  transition: 0.3s;
}

.skyblueLineBtnBox ul li a {
  padding: 18px 55px 18px  24px;
  display: block;
  font-weight: bold;
}

.skyblueLineBtnBox ul li a[target="_blank"] {
  background: url(../img/icon_blank.png) no-repeat right 16px center;
  background-size: 24px;
  display: block;
  width: 100%;
}

.skyblueLineBtnBox ul li:hover {
  border-color: #1073E5;
  transition: 0.3s;
}