/*------------------------------------------*/
/* 見出しの装飾
/*------------------------------------------*/
.p-title {
    padding: 10rem 0 8rem;
}

.p-title_text {
    text-align: center;
}
.p-title_textLead {
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 1;
    letter-spacing: -.04em;
    display: block;
}
.p-title_textSub {
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1;
    letter-spacing: .05em;
    display: block;
    margin-top: 0.8rem;
}

/*------------------------------------------*/
/* アクセスボタンの装飾
/*------------------------------------------*/

a.parking,
a.boat,
a.car,
a.bus,
a.airport,
a.news,
a.event,
a.shop{
  display: block;
  border-radius: 50px;
  padding: 10px 10px 10px 80px;
  text-align: center;
  line-height: 2em;
  margin-bottom: 30px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: .3s;
  background: #fff;
}
.lower_access a.parking{
	border:1px solid #4267AC;
	box-shadow: 0 4px 0 #4267AC;
}
.lower_access a.boat,
.info a.news{
	border:1px solid #54A7DC;
	box-shadow: 0 4px 0 #54A7DC;
}
.lower_access a.car{
	border:1px solid #5CAA62;
	box-shadow: 0 4px 0 #5CAA62;
}
.lower_access a.bus,
.info a.event{
	border:1px solid #E3AA11;
	box-shadow: 0 4px 0 #E3AA11;
}
.lower_access a.airport{
	border:1px solid #9171bc;
	box-shadow: 0 4px 0 #9171bc;
}
.info a.shop{
	border:1px solid #DC7375;
	box-shadow: 0 4px 0 #DC7375;
}

.lower_access a:hover,
.info a:hover{
	color:#fff;
  transform: translateY(4px);
  box-shadow: none;
  
}
.lower_access a.parking:hover{
	background: #4267AC;
}
.lower_access a.boat:hover,
.info a.news:hover{
	background: #54A7DC;
}
.lower_access a.car:hover{
	background: #5CAA62;
}
.lower_access a.bus:hover,
.info a.event:hover
{
	background: #E3AA11;
}
.lower_access a.airport:hover{
	background: #9171bc;
}
.info a.shop:hover{
	background: #DC7375;
}

.lower_access .parking img,
.lower_access .boat img,
.lower_access .car img,
.lower_access .bus img,
.lower_access .airport img,
.info .news img,
.info .event img,
.info .shop img{
  display: none;
}

/* アイコン（PNGをマスクとして使用） */
.lower_access .parking::before,
.lower_access .boat::before,
.lower_access .car::before,
.lower_access .bus::before,
.lower_access .airport::before,
.info .news::before,
.info .event::before,
.info .shop::before {
  content: "";
  position: absolute;
  left: 32px;
  width: 28px;
  height: 28px;

  background-color: currentColor;

  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;

  transition: .3s;
}
/* 駐車場 */
.lower_access .parking {
  color: #486bb0;
  border: 2px solid #486bb0;
  max-width: 400px;
  width: 100%;
}
.lower_access .parking::before {
  mask-image: url(../img/top/access_parking.png);
  -webkit-mask-image: url(../img/top/access_parking.png);
}

/* 船・NEWS */
.lower_access .boat,
.info .news {
  color: #4aa3df;
  border: 2px solid #4aa3df;
  max-width: 400px;
  width: 100%;
}
/* 船 */
.lower_access .boat::before {
  mask-image: url(../img/top/access_boat.png);
  -webkit-mask-image: url(../img/top/access_boat.png);
}
/* NEWS */
.info .news::before {
  mask-image: url(../img/category/news.svg);
  -webkit-mask-image: url(../img/category/news.svg);
}

/* 車 */
.lower_access .car {
  color: #58a85a;
  border: 2px solid #58a85a;
  max-width: 400px;
  width: 100%;
}
.lower_access .car::before {
  mask-image: url(../img/top/access_car.png);
  -webkit-mask-image: url(../img/top/access_car.png);
}

/* バス・イベント */
.lower_access .bus,
.info .event {
  color: #e6a400;
  border: 2px solid #e6a400;
  max-width: 400px;
  width: 100%;
}
/* バス */
.lower_access .bus::before {
  mask-image: url(../img/top/access_bus.png);
  -webkit-mask-image: url(../img/top/access_bus.png);
}
/* イベント */
.info .event::before {
  mask-image: url(../img/category/event.svg);
  -webkit-mask-image: url(../img/category/event.svg);
}

/* 飛行機 */
.lower_access .airport {
  color: #9171bc;
  border: 2px solid #9171bc;
  max-width: 400px;
  width: 100%;
}
.lower_access .airport::before {
  mask-image: url(../img/top/access_airport.png);
  -webkit-mask-image: url(../img/top/access_airport.png);
}

/* ショップ */
.info .shop {
  color: #DC7375;
  border: 2px solid #DC7375;
  max-width: 400px;
  width: 100%;
}
.info .shop::before {
  mask-image: url(../img/category/shop.svg);
  -webkit-mask-image: url(../img/category/shop.svg);
}


/*------------------------------------------*/
/* アクセス情報
/*------------------------------------------*/
.list_item {
  border-top: 1px solid var(--color-dggreen);
  padding-top: 2.3rem;
  padding-bottom: 4rem;
  display: flex;
  flex-wrap: wrap;
}

.list_itemLabel {
  width: 30%;
  margin-right: 2rem;
  box-sizing: border-box;
}

.list_itemLabelText {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.6;
}

.list_itemDetail {
  flex: 1;
}

.list_itemDetailText {
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.8;
}

/* サブ項目（PCでは横並び） */
.list_subItem {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin-top: 2.5rem;
}

.list_subItemLabel {
  width: 30%;
  margin-right: 2rem;
  box-sizing: border-box;
}

.list_subItemDetail {
  flex: 1;
  box-sizing: border-box;
}



.access-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;  /* 中央寄せ */
  list-style: none;
  margin: 0 auto;
  padding: 0;
  gap: 100px;                /* li間の余白 */
}

.access-item{
  width:100%;
  max-width: 400px;
}



.trafficbox2 {
  padding: 20px;
  border: 1px solid #17a2a4;  /* 枠線の色と太さを追加 */
  border-radius: 15px;
  padding-bottom: 0;
}

.more2_1 {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 1px solid #17a2a4;
    color: #fff!important;
    background: #17a2a4 ;
    border-radius: 30px;
    line-height: 40px;
    margin: 10px auto 20px;
    font-size: 12px;
    box-sizing: border-box;
    font-weight: bold;
    width: 100%;
    width: 158px;
    padding: 0px 0;
    display: block;
    text-align: center;
}

/* 矢印 */
.more_1:after,
.more2_1:after,
.more3_1:after{
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    margin: auto 0;
    content: '';
    right: 20px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


.more_1:hover,
.more2_1:hover,
.more3_1:hover
 {
  background: #fff;
  color: #17a2a4 !important;
  text-decoration: none;
}


.more3_1 {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 1px solid #17a2a4;
    color: #fff!important;
    background: #17a2a4 ;
    border-radius: 30px;
    line-height: 60px;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 15px;
    box-sizing: border-box;
    font-weight: bold;
    width: 350px;
    padding: 0px 0;
    display: block;
    text-align: center;
}

ul.list{
  border-bottom: 1px solid #ccc;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

li.list_item2{
  border-top: 1px solid var(--color-dggreen);
  padding-top: 2.3rem;
  padding-bottom: 2.3rem;
  display: flex;
  flex-wrap: wrap;
border-bottom: 1px solid #ccc;
}


.list_itemLabelText2 {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
}

.f-blue{    color: #17a2a4;}

/*  タブレット版（縦並び） */
@media (max-width: 1060px) {


}

/*  スマホ版（縦並び） */
@media (max-width: 768px) {
  .list_item,
  .list_subItem {
    flex-direction: column; /* 横並び → 縦並びに */
  }

  .list_itemLabel,
  .list_subItemLabel {
    width: 100%;
    margin-right: 0;
    margin-bottom: 1rem; /* ラベル下に少し余白 */
  }

  .access-links {
    gap: 12px;
  }
  .access-item {
    flex: 1 1 100%; /* スマホで縦並び */
  }
}



/*------------------------------------------*/
/* 航路ガイド
/*------------------------------------------*/
.route-img {
  width: 100%;          /* 各カラムの幅に合わせて伸縮 */
  height: 240px;        /* 高さを固定 */
  object-fit: cover;    /* トリミングしてバランスを保つ */
}

.more_1 {
    position: relative;
    z-index: 2;
    overflow: hidden;
    border: 1px solid #17a2a4;
    color: #fff!important;
    background: #17a2a4 ;
    border-radius: 30px;
    line-height: 60px;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 15px;
    box-sizing: border-box;
    font-weight: bold;
    width: 100%;
    width: 363px;
    padding: 0px 0;
    display: block;
    text-align: center;
    margin-bottom: 20px;
}




/*------------------------------------------*/
/* ページネーションの装飾
/*------------------------------------------*/
.pagination1 {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.pagination1 ul {
  display: flex;
  gap: 20px;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.pagination1 li a,
.pagination1 li span {
  text-decoration: none;
  color: #000;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding-bottom: 4px;
  display: inline-block;
  width: 120%; /* ← 線の長さ（文字より少し長め） */
}

.pagination1 li.active span {
  border-bottom: 1px solid #000;
}

.pagination1 .next a {
  background-color: #17a2a4;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 0; /* 元テキストを非表示に */
  position: relative; /* 擬似要素の中央配置のため */
}

/* 擬似要素で矢印を追加 */
.pagination1 .next a::before {
  content: "→";
  font-size: 16px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 完全中央寄せ */
}


.pagination1 .prev a {
  background-color: #17a2a4;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 0; /* ← 元の「«」などを非表示にする */
  position: relative;
}

/* 擬似要素で矢印を中央に配置 */
.pagination1 .prev a::before {
  content: "←";
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/*------------------------------------------*/
/* 会社概要
/*------------------------------------------*/
.company{
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #17a2a4;
  border-radius: 10px;
  padding-block: 5rem;
  background: #fff;
}

.company .row{
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}

.company .item{
  display: flex;
  width: 100%;
  align-items: center;
  border-top: 1px solid #d8e7e4;
}

.company .item:last-child{
  border-bottom: 1px solid #d8e7e4;
}

.company .label {
  position: relative;
  padding: 0.8rem 1rem;
  min-width: 120px;
  width: 30%;
  flex: 0 0 30%;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
}

.company .label::after {
  content: "";
  position: absolute;
  right: 0;
  top: 8px;
  height: calc(100% - 16px);
  width: 1px;
  background-color: #d8e7e4;
}

.company .value{
  padding: 0.8rem 1rem;
  flex: 1 1 auto;
  background: #fff;
  line-height: 1.6;
}

.company .stores{
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.company a{
  text-decoration: none;
}

/* ======================================= */
/* スマホ対応（横並びキープ＆余白調整） */
/* ======================================= */
@media (max-width: 720px){
  .company .row{
    width: 95%; /* 少し広げるだけでOK */
  }

  .company .label{
    width: 35%; /* スマホでは少し広めに */
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
  }

  .company .value{
    width: 65%;
    font-size: 0.9rem;
    padding: 0.6rem 0.8rem;
  }
}

h4{
  font-size:24px;
  margin-bottom:16px;
  font-weight: bold;
}

.infdtl .more2_1 {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 10px;
}

.opening_hours_wrap .time_wrap {
    border-radius: 12px;
    padding: 20px;
    max-width: 450px;
    display: inline-block; /* コンテンツの幅に合わせて中央寄せできる */
    text-align: left;      /* 中身の文字は左寄せ */
}