@charset "utf-8";
/* CSS Document */
body {
  font-family: "Zen Kaku Gothic New", serif;
  font-weight: 400;
  font-style: normal;
}

.playfair-display {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}
.open-sans-400 {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
a:hover img{
    opacity: 0.7;
  transition: 0.3s ease !important; /* アニメーション追加 */

}
em {
font-style: italic !important;
}
th, td {
font-size: 1.2em !important;
}
.inner-top{
  padding-top: 50px !important;

}
@media screen and (max-width: 750px) { /*Sp*/
.inner-top{
  padding-top: 25px !important;
}
}

/****************************************
class
*****************************************/
.flow-marker {
    background: linear-gradient(transparent 70%, #FDD4B3 70%); display: inline !important;
}


.txt-normal {
  font-weight: normal !important;
}
.flow-bg-blue{
  background: #1A89D3 !important;
}
.flow-bg-orange{
  background: #F39939 !important;
}
.flow-bg-red{
  background: #E16543 !important;
}

.flow-bd-blue{
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #1A89D3 !important;
}
.flow-bd-orange{
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #F39939 !important;
}
.flow-bd-red{
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #E16543 !important;
}
/* Color variations */
.flow-bd-blue2 {
  border-color: #1A89D3 !important;
}

.flow-bd-orange2 {
  border-color: #F39939 !important;
}

.flow-bd-red2 {
  border-color: #E16543 !important;
}
.right-arrow {
  position: absolute;
  right: 15px !important;
  top: 45% !important;
  transform: translateY(-50%);
  width: 15px;
  height: 20px;
}

.right-arrow::before,
.right-arrow::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 13px;
  background-color: #fff;
}

.right-arrow::before {
  transform: rotate(135deg);
  top: 4px;
  left: 0;
}

.right-arrow::after {
  transform: rotate(-135deg);
  bottom: -4px;
  left: 0;
}
/****************************************
flowNav
*****************************************/
#flowNav {
  background: #FFF5E3;
  padding: 0 auto;
}

.navTitle{
  font-size: 3.4em !important;
  line-height: 1em !important;
  color: #EF7A00;
  margin-top: 0 !important;
  margin-bottom: 55px !important;
  text-align: center !important;

}
@media screen and (max-width: 750px) { /*Sp*/
.navTitle{
  font-size: 2em !important;
  line-height: 1.4em !important;
  color: #EF7A00;
  margin-top: 0 !important;
  margin-bottom: 30px !important;
  text-align: center !important;
}
}

#flowNav .flowNav-container {
	display: flex;
	flex-wrap: wrap;
  justify-content: space-between;
	width: 96%;
	margin: 0 auto;

}

@media screen and (max-width: 750px) { /*Sp*/
#flowNav .flowNav-container {
	display: flex;
	flex-wrap: wrap;
  justify-content: space-between;

}
}

#flowNav .flowNav-column {
  display: flex;
  align-items: center;
  width: 48.5%;

}
@media screen and (max-width: 750px) { /*Sp*/
#flowNav .flowNav-column {
  display: flex;
  align-items: center;
  width: 100%;
}
}
/* ボタン */
.step-button {
  display: inline-flex;
  align-items: center;
  background-color: #f07c00;
  border-radius: 50px;
  padding: 10px 60px 10px 20px; /* 右側に余白を確保 */
  color: #fff !important;
  font-family: sans-serif;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  width: 100%; 
  height: 80px;
  text-decoration: none; /* リンク下線なし */
  transition: background-color 0.3s ease !important; /* アニメーション追加 */
}
@media screen and (max-width: 750px) { /*Sp*/
.step-button {
  padding: 10px 60px 10px 10px; /* 右側に余白を確保 */
  height: 50px;
}
}

.step-button:hover {
  background-color: #F09739; /* ←ホバー時の色指定 */
  color: #fff !important;
}

.step-number {
  background-color: #fff;
  color: #f57900;
  border-radius: 50%;
  width: 50px;
  aspect-ratio: 1 / 1; /* 正円を維持 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.4em;
  flex-shrink: 0; /* 親要素が縮んでも潰れにくくする */
}
@media screen and (max-width: 750px) { /*Sp*/
.step-number {
  width: 35px;
  font-size: 1.2em !important;
}
}

.step-text {
  margin-left: 15px;
  font-size: 1.4em;
  line-height: 1em;
  font-weight: bold;
}
@media screen and (max-width: 750px) { /*Sp*/
.step-text {
  font-size: 1em !important;
}
}
@media screen and (max-width: 1024px) { 
.step-text {
  margin-left: 15px;
  font-size: 1.2em;
  line-height: 1em;

}
}

.step-icon {
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; /* V字全体の幅 */
  height: 15px; /* V字全体の高さ */
}
@media screen and (max-width: 750px) { /*Sp*/
.step-icon {
  right: 20px;
}
}
@media screen and (max-width: 1024px) { 
.step-icon {
  right: 25px;
}
}

.step-icon::before,
.step-icon::after {
  content: "";
  position: absolute;
  width: 13px; /* 線の長さ */
  height: 4px; /* 線の太さ */
  background-color: #fff; /* 線の色 */
}

.step-icon::before {
  transform: rotate(45deg);
  top: 4px;
  left: 0;
}

.step-icon::after {
  transform: rotate(-45deg);
  top: 4px;
  right: 0;
}


/****************************************
日本地図エリア
*****************************************/

.map-section {
  width: 100%;
  padding: 20px 0 0;
  box-sizing: border-box;
  font-family: sans-serif;
  background-color: #fff;
  text-align: center
　}

.text-overlay-map {
  margin-bottom: 30px;
position: absolute;
	top: 22%;
	left: 5%;
}
@media screen and (max-width: 1024px) { 
.text-overlay-map {
  margin-bottom: 30px;
position: static;
}
}
.map-txt {
  padding: auto 20px !important; 
}

.section-number {
  font-size: 7em !important;
  line-height: 1em !important;
  text-align: center;
  color: #EF7A00;
}
@media screen and (max-width: 750px) { 
.section-number {
  font-size: 5em !important;
}

}


.section-title {
  font-size: 3em !important;
  line-height: 1.5em !important;
  font-weight: bold;
  margin: 10px 0 30px !important;
  color: #000 !important;
 text-align: center !important;
}
@media screen and (max-width:1200px) { /* pc wide */
.section-title {
  font-size: 2.2em !important;
  line-height: 1.5em !important;
  font-weight: bold;
  margin: 10px 0 30px !important;
  color: #000 !important;
 text-align: center !important;
}
}
@media screen and (max-width: 750px) { 
.section-title {
  font-size: 2em !important;
  line-height: 1.5em !important;
  font-weight: bold;
  margin: 10px 0 30px !important;
  color: #000 !important;
 text-align: center !important;
}
}

.map-container {
  position: relative;
  width: 100%;
  max-width: 1300px; /* 適度に縮小表示 */
  margin: 0 auto;
}

.japan-map {
  width: 100%;
  height: auto;
  display: block;
}

.route-btn {
  position: absolute;
  padding: 18px 55px 18px 25px;
  font-size: 1.3em;
  line-height: 1.2em;
  color: white;
  font-weight: bold;
  text-decoration: none;
  align-items: center;
  transition: background-color 0.3s ease !important; /* アニメーション追加 */
  text-align: center;
}
@media screen and (max-width:1200px) { /* pc wide */
.route-btn {
  position: absolute;
  padding: 13px 55px 13px 25px;
  font-size: 1.15em;
  line-height: 1em;
  color: white;
  font-weight: bold;
  text-decoration: none;
  align-items: center;
  transition: background-color 0.3s ease !important; /* アニメーション追加 */
  text-align: center;
}
}
@media screen and (max-width: 750px) { 
.route-btn {
  position: absolute;
  padding: 13px 35px 13px 13px;
  font-size: 1.1em;
  line-height: 1.2em;
  color: white;
  font-weight: bold;
  text-decoration: none;
  align-items: center;
  transition: background-color 0.3s ease !important; /* アニメーション追加 */
  text-align: center;
}
}


.btn-osakaBeppu{
  top: 65%; left: 2%;
}
.btn-kobeOita{
  top: 58%; left: 23%;
}
.btn-osakaShibushi{
  top: 82%; left: 33%;
}
.btn-tomakomaiOarai{
  top: 47%; left: 73%;
}
@media screen and (max-width:1024px) { 
.btn-osakaBeppu{
  top: 69%; left: 2%;
}
.btn-kobeOita{
  top: 65%; left: 23%;
}
.btn-osakaShibushi{
  top: 86%; left: 33%;
}
.btn-tomakomaiOarai{
  top: 60%; left: 73%;
}
}
@media screen and (max-width:750px) {
.btn-osakaBeppu{
  top: 72%; left: 2%;
}
.btn-kobeOita{
  top: 63%; left: 17%;
}
.btn-osakaShibushi{
  top: 88%; left: 33%;
}
.btn-tomakomaiOarai{
  top: 60%; left: 58%;
}
}



.btn-orange {
  background-color: #F39939;
}
.btn-orange:hover {
  background-color: #F5AD60; /* ←ホバー時の色指定 */
  color: #fff !important;
}

.btn-blue {
  background-color: #004084;
}
.btn-blue:hover {
  background-color: #33669C; /* ←ホバー時の色指定 */
  color: #fff !important;
}
.map-section a[target="_blank"]{
  color: #fff !important;
}


.btn-blue-s {
  background-color: #1A89D3;
}
.btn-blue-s:hover {
  background-color: #47A0DB; /* ←ホバー時の色指定 */
  color: #fff !important;
}

.btn-red {
  background-color: #E16543;
}
.btn-red:hover {
  background-color: #E78368; /* ←ホバー時の色指定 */
  color: #fff !important;
}

.route-btn.external::after {
	font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-weight: 900;  margin-left: 6px;
  font-size: 12px;
}


.flow-arrow {
  position: absolute;
  right: 20px;
  top: 52%;
  transform: translateY(-50%);
  width: 20px; /* V字全体の幅 */
  height: 15px; /* V字全体の高さ */
}
.flow-arrow::before,
.flow-arrow::after {
  content: "";
  position: absolute;
  width: 13px; /* 線の長さ */
  height: 4px; /* 線の太さ */
  background-color: #fff; /* 線の色 */
}

@media screen and (max-width:750px) {
.flow-arrow {
  position: absolute;
  right: 10px;
  top: 52%;
  transform: translateY(-50%);
  width: 18px; /* V字全体の幅 */
  height: 10px; /* V字全体の高さ */
}
.flow-arrow::before,
.flow-arrow::after {
  content: "";
  position: absolute;
  width: 12px; /* 線の長さ */
  height: 3px; /* 線の太さ */
  background-color: #fff; /* 線の色 */
}
}


.flow-arrow::before {
  transform: rotate(45deg);
  top: 4px;
  left: 0;
}

.flow-arrow::after {
  transform: rotate(-45deg);
  top: 4px;
  right: 0;
}
.flow-external {
  position: absolute;
  right: 30px;
  top: 48%;
  transform: translateY(-50%);
  width: 20px; 
  height: 15px; 
}
@media screen and (max-width:750px) {
.flow-external {
  position: absolute;
  right: 20px;
  top: 48%;
  transform: translateY(-50%);
  width: 20px; 
  height: 15px; 
}
}

.flow-external::before,
.flow-external::after {
	  position: absolute;

  margin: 0 0 0 3px;
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-weight: 600;

}


/****************************************
Timetables
*****************************************/

.timetables-section h3{
	font-size: 2em !important;
	line-height: 1em;
	font-weight: bold !important;
	border-left: none;
	border-bottom: 1px solid #000 !important;
	padding: 0 0 8px 0 !important;
	margin-top: 0 !important;
  
}
.timetables-section h4{
	font-size: 1.3em !important;
	color: #fff !important;
	border-bottom: none;
	padding: 8px 13px;
  
}

/****************************************
バナーエリア
*****************************************/

.banner-section {
  width: 100%;
  height: auto;
  position: relative;
  background:url("/en/lp/flow/img/bg-banner-area.jpg");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  .banner-section {
    background-image: url("/en/lp/flow/img/bg-banner-area-sp.jpg");
    background-size: cover;
    background-position: center;
  }
}
.banner-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF5E3;
  opacity: 0.8;
  pointer-events: none;
  z-index: 0;
}

.banner-section > * {
  position: relative;
  z-index: 1;
}
.bannerTitle{
  font-size: 3.4em !important;
  line-height: 1.4em !important;
  color: #EF7A00;
  text-align: center;
  margin-bottom: 0 !important;
}
@media screen and (max-width:750px) {
.bannerTitle{
  font-size: 2em !important;
  line-height: 1.4em !important;
  color: #EF7A00;
  text-align: center;
  margin-bottom: 0 !important;
}
}
.chat-set {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 380px;
  margin: 40px 0;
}
@media screen and (max-width:1024px) {
.chat-set {

  max-width: 240px;
  margin: 40px 0;
}
}

.flow-banner img {
    width: auto;
    height: 105px;
    display: block;
  }

.flow-bannerArea {
  max-width: 1000px;
	margin: 0 auto;
display: flex;
	justify-content: space-between;
}
@media screen and (max-width:1024px) {
.flow-banner img {
    width: auto;
    height: 95px;
    display: block;
  }
.flow-bannerArea {
  max-width: 740px;
	margin: 0 auto;
}
}

/* バナー */
.flow-banner {
  max-width: 420px;
  background: #fff;
  border: 1px solid #fff;
}

.balloon {
  width: 150px;
  height: 165px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: 10px;
}

.circle {
  width: 150px;
  height: 150px;
  background-color: #FFCC00; /* 吹き出し色をお好みで変更可 */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.circle span {
  color: #FFF;
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
  font-size: 1.6em;
}

.triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #FFCC00; /* 吹き出し色に合わせる */
  position: absolute;
  top: 149px; /* circleの下に配置 */
}

@media screen and (max-width: 750px) {
  .flow-bannerArea {
    flex-direction: column;
    align-items: center;
  }

  .chat-set {
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin-bottom: 0; /* バナー全体に下余白 */
  }

  .balloon {
    display: none; /* 吹き出しを非表示に */
  }

  .flow-banner {
    width: auto;
    max-width: 300px;
    background: #fff;
    border: 1px solid #fff;
  }

  .flow-banner img {
	width: auto;
    height: 90px;
    display: block;
  }
  .h110 {
	width: auto !important;
    height: 110px !important;
    display: block;
  }

  /* 最後のバナーの余白をなくす（任意） */
  .chat-set:last-child {
    margin-bottom: 0;
  }
}
/****************************************
COST
*****************************************/
.text-overlay {
  margin-bottom: 30px;
}

.plan-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #fff;
 width: 100%;
  margin-bottom: 65px;
}

.plan-box {
  flex: 1;
  max-width: 31.5%;
  text-align: center;
  color: #fff;
  border-radius: 8px;
  overflow: hidden;
}
.plan-inner {
  padding: 25px 15px ;
}

.plan-box img {
  width: 100%;
  height: auto;
  display: block;
}

.plan-box .plan-route {
  font-size: 1.6em !important;
  line-height: 1em !important;
  font-weight: bold;
  margin-bottom: 20px;
}
.plan-box .plan-room {
  padding: 5px 10px;
  border-top: 1px #fff solid;
  border-bottom: 1px #fff solid;
  font-size: 1.3em;
  display: inline;
}

.plan-box .price {
  font-size: 2.6em !important;
  font-weight: bold;
  margin: 10px 0 0;
}

.plan-box .price span {
  font-size: 0.4em !important;
  font-weight: normal !important;
}

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


  .plan-container {
    flex-direction: column;
    align-items: center;
  }

  .plan-box {
    max-width: 100%;
    width: 100%;
    margin-bottom: 25px;
  }

  .plan-box:last-child {
    margin-bottom: 0;
  }



}
/****************************************
ROOM
*****************************************/

.room-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 65px;
}

.room-column {
  display: flex;
  flex-direction: column;
  border: 2px solid;
  padding: 1px;
  box-sizing: border-box;
  border-radius: 6px;
  flex: 1;
  max-width: 31.5%;
}

.room-card {
  text-align: center;
}
.room-route {
  font-size: 1.3em;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
  color: #FFF;
  border-radius: 4px 4px 0 0;
  width: 100%;
}
@media screen and (max-width: 750px) {
.room-route {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
  color: #FFF;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 30px;
  }
  }
.room-card img {
  width: 100%;
  height: auto;
  display: block;
	margin-bottom: 13px !important;
}

.room-card p {
  font-size: 1.3em;
  margin-bottom: 13px !important;
}
.room-card .mar0b {
  margin-bottom: 0 !important;
}

.room-card .ast {
  font-size: 0.8em !important;
  font-weight: normal;
	margin-bottom: 13px !important;
}

/* 750px以下：レスポンシブ対応 */
@media screen and (max-width: 750px) {
  .room-container {
    flex-direction: column;
	margin-bottom: 0 !important;
  }

  .room-column {
    width: 100% !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4%;
    justify-content: center;
    margin-bottom: 30px;
	  max-width: 100%;
	  padding: 20px 20px 0;
  }

  .room-card {
    width: 48%;
    margin-bottom: 20px;
	align-items: center;
  }
  .room-card p {
    line-height: 1em !important;
  }

  .room-card img {
    margin-bottom: 10px;
  }

  .room-card p {
    font-size: 1.2em !important;
  }

  .room-card .ast {
    font-size: 0.75em;
    margin-bottom: 10px;
	margin-top: 5px !important;
  }
}
.flow-bd-blue2 a{
  color: #1A89D3 !important;
  text-decoration: none !important;
}
.flow-bd-blue2 a:hover{
  color: #1A89D3 !important;
  text-decoration: underline!important;
}
.flow-bd-orange2 a{
  color: #F39939 !important;
  text-decoration: none !important;
}
.flow-bd-orange2 a:hover{
  color: #F39939 !important;
  text-decoration: underline!important;
}
.flow-bd-red2 a{
  color: #E16543 !important;
  text-decoration: none !important;
}
.flow-bd-red2 a:hover{
  color: #E16543 !important;
  text-decoration: underline!important;
}

.buttons {
  display: flex;
  justify-content: center; /* ← これが中央寄せ */
  flex-wrap: wrap;         /* ボタンが折り返せるように */
}

.buttons button {
  max-width: 250px;
  padding: 10px 40px 5px;
  margin: 10px 20px 20px 0;
  text-align: center;
  background-color: #FFF;
  border: solid 1px #f07c00;
  color: #f07c00;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1.1em;
  line-height: 1em;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s;
}
@media screen and (max-width: 750px) {
	
.buttons {
  display: flex;
  justify-content: center; /* ← これが中央寄せ */
  flex-wrap: wrap;         /* ボタンが折り返せるように */
  width: 90%;
  margin: 0 auto 15px;
}

.buttons button {
  padding: 13px 40px 13px;
  margin: 10px 20px 10px 0;
}
}

.btnAst{
  font-size: 0.65em !important;
  line-height: 0.65em !important;
  margin: 0 !important;
  padding:  0!important;
}

/* アクティブ時のスタイル */
.buttons button:hover {
  background-color: #f07c00;
  color: #FFF;
}
.buttons button.active {
  background-color: #f07c00;
  color: #FFF;
}


.lb-data .lb-number {
  display: none !important;
}

.room-info{
  font-size: 2em !important;
  font-weight: bold !important;
  text-align: center !important;
}
@media screen and (max-width: 750px) {
.room-info{
  font-size: 1.3em !important;
}
}

.room-btn-area{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.room-nav{
  max-width: 31.5%;
  display: flex;
  flex: 1;
  position: relative;
}
@media screen and (max-width: 750px) {
  .room-btn-area {
    display: block;
  }

  .room-nav {
    max-width: 100%;
    width: 100%;
    margin-bottom: 20px;
  }

  /* 最後のボタンの下マージンをなくす */
  .room-nav:last-child {
    margin-bottom: 0;
  }
}
.room-btn-blue, .room-btn-orange, .room-btn-red, .flow-btn-orange, .port-btn-blue, .port-btn-orange, .port-btn-red,
a.room-btn-blue, a.room-btn-orange, a.room-btn-red, a.flow-btn-orange, a.port-btn-blue, a.port-btn-orange, a.port-btn-red,
button.room-btn-blue, button.room-btn-orange, button.room-btn-red, button.flow-btn-orange, button.port-btn-blue, button.port-btn-orange, button.port-btn-red {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  border-radius: 0.5rem;
}
a.btn-flat-blue:hover:before,
a.btn-flat-orange:hover:before,
a.btn-flat-red:hover:before,
a.btn-flat-flow-orange:hover:before,
a.port-btn-flat-blue:hover:before,
a.port-btn-flat-orange:hover:before,
a.port-btn-flat-red:hover:before
{	
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
a.btn-flat-blue span, a.btn-flat-orange span, a.btn-flat-red span, a.btn-flat-flow-orange span,
a.port-btn-flat-blue span, a.port-btn-flat-orange span, a.port-btn-flat-red span {
  position: absolute;
}


a.btn-flat-blue, a.port-btn-flat-blue {
  display: flex;              /* ← Flexboxを有効に */
  justify-content: center;    /* ← 横方向中央揃え */
  align-items: center;        /* ← 縦方向中央揃え */
  overflow: hidden;
  padding: 35px 25px !important;
  color: #fff !important;
  border-radius: 0;
  background: #1A89D3;
  width: 100%;
  text-align: center;
  position: relative;  
}


a.btn-flat-blue:before, a.port-btn-flat-blue:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background: #47A0DB;
}



a.btn-flat-orange, a.port-btn-flat-orange {
  display: flex;              /* ← Flexboxを有効に */
  justify-content: center;    /* ← 横方向中央揃え */
  align-items: center;        /* ← 縦方向中央揃え */
  overflow: hidden;
  padding: 35px 25px !important;
  color: #fff !important;
  border-radius: 0;
  background: #F39939;
  width: 100%;
  text-align: center;
  position: relative;  
}


a.btn-flat-orange:before, a.port-btn-flat-orange:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background: #F5AD60;
}

a.btn-flat-red, a.port-btn-flat-red {
  display: flex;              /* ← Flexboxを有効に */
  justify-content: center;    /* ← 横方向中央揃え */
  align-items: center;        /* ← 縦方向中央揃え */
  overflow: hidden;
  padding: 35px 25px !important;
  color: #fff !important;
  border-radius: 0;
  background: #E16543;
  width: 100%;
  text-align: center;
  position: relative;  
}

a.btn-flat-red:before, a.port-btn-flat-red:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background: #E78368;
}

a.btn-flat-flow-orange, a.port-btn-flat-flow-orange{
  display: flex;              /* ← Flexboxを有効に */
  justify-content: center;    /* ← 横方向中央揃え */
  align-items: center;        /* ← 縦方向中央揃え */
  overflow: hidden;
  padding: 35px 25px !important;
  color: #fff !important;
  border-radius: 0;
  background: #EF7A00;
  width: 100%;
  text-align: center;
  position: relative;  
}


a.btn-flat-flow-orange:before, a.port-btn-flat-flow-orange:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  -webkit-transform: translateX(-96%);
  transform: translateX(-96%);
  background: #F29433;
}


/****************************************
Enjoyment on Sunflower
*****************************************/
.bgCream {
  background:#FFF5E3; 
}
.enjoy-section {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 45px;
}

.enjoy-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  max-width: 48.5%;
  padding: 0 0 20px;
  box-sizing: border-box;
}

.enjoy-box img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}

.enjoy-box .enjoy-title, .restaurant-content .restaurant-title {
  font-size: 2em !important;
  font-weight: bold;
  text-align: center !important;
  margin-bottom: 0 !important;
}

.info-nav {
  margin-top: auto;
}


.restaurant-section {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
}

.restaurant-img {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  max-width: 48.5%;
  padding: 0 0 20px;
  box-sizing: border-box;
}

.restaurant-img img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

.restaurant-btn-wrap {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

.restaurant-section {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* ← 高さをそろえる */
  flex-wrap: wrap;
  width: 100%;
  gap: 20px;
}

.restaurant-img {
  flex: 1 1 48.5%;
  max-width: 48.5%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.restaurant-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* --- YouTube動画埋め込み --- */
.youtube-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9比率 */
  height: 0;
  overflow: hidden;
  border-radius: 4px;
}

.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media screen and (max-width: 750px) {
  .enjoy-section,
  .restaurant-section {
    flex-direction: column;
	margin-bottom:  0 !important;
  }

  .enjoy-box {
    max-width: 100%;
    width: 100%;
	margin-bottom: 30px;
  }
  .restaurant-img {
    max-width: 100%;
    width: 100%;
	margin-bottom: 0 !important;
  }

  .restaurant-btn-wrap {
    width: 100%;
    padding: 0 !important;
  }

  .restaurant-content {
    padding: 0 !important;
  }
}
/****************************************
Reservation & Payment
*****************************************/

.reservation-title{
  background: #9FCDED;
  padding: 60px 0;
  text-align: center !important;
}
.reservation-title p{
  color: #fff !important;
  font-size: 4em !important;
  font-weight: bold !important;
  line-height: 1em !important;
  padding: 0 !important;
  margin:  0!important;
}
@media screen and (max-width: 750px) {
.reservation-title{
  padding: 35px 0;
}
.reservation-title p{
  font-size: 2em !important;
  line-height: 1.4em !important;
}
  }

.bgBlue-s {
  background:#EAF4FB; 
}
.reservation-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin: 20px auto 0 !important;
}

.reservation-box {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 30px;
  box-sizing: border-box;
  position: relative;
  background: #fff;
  width: 48%;
  border-radius: 4px;
  margin-bottom: 65px;}

.reservation-number {
  position: absolute;
  top: -25px;
  left: -25px;
  background-color: #1A89D3;
  color: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2em;

}

.reservation-box p {
  font-size: 1.3em !important;
  font-weight: bold;
  min-height: 4em; /* 行数に合わせて調整 */
}


.reservation-box img {
  width: 100%;
  border: 1px solid #eee;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.image-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 10px;
}

.image-row a  {
  width: 48%;
  display: flex;
  flex-direction: column;

}
.swip-step {
  font-size: 1.5em !important;
  font-weight: bold !important;
  color: #EF7A00 !important;
  line-height: 1em !important;
  margin-top: 15px !important;

}
.swip-step .num{
  font-size: 2em !important;
}

.w250px{
  width: 250px !important;
}
    .video-section {
      margin: 0 auto;
      text-align: center;
max-width:600px;
		height: auto;
    }

    .video-wrapper {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%; /* 16:9 アスペクト比 */
      height: 0;
      overflow: hidden;
      border-radius: 8px;
    }

    .video-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    .video-caption {
      margin-top: 12px;
      font-size: 1.8em !important;
	  font-weight: bold;
    }
.video-subTxt{
      font-size: 1.6em !important;
	font-weight: bold;
	color: #1A89D3 !important;
	text-align: center;
	margin-bottom: 5px !important;
    }

.line1-blue {
  position: relative;
  text-align: center;
  font-weight: bold;
  line-height: 1.3;
}
 
.line1-blue:before, 
.line1-blue:after {
  position: relative;
  display: inline-block;
  content: "";
  background: #1A89D3;
  width: 3px;
  height: 2em;
  margin: 0 ;
  margin-top: -.2em;
  vertical-align: middle;
  border-radius: 5px; /* 線の両端を丸く */}


 
.line1-blue:before {
  transform: rotate(-35deg);
}
 
.line1-blue:after {
  transform: rotate(35deg);
}
.line2-blue {
  position: relative;
  text-align: center;
  font-weight: bold;
  line-height: 1.3;

}
 
.line2-blue:before,
.line2-blue:after {
  position: relative;
  display: inline-block;
  content: "";
  background: #1A89D3;
  width: 3px;
  height: 1.2em;
  margin: 0 1em 0;
  margin-top: -.2em;
  vertical-align: middle;
  border-radius: 5px; /* 線の両端を丸く */}

 
.line2-blue:before {
  transform: rotate(-20deg);
}
 
.line2-blue:after {
  transform: rotate(20deg);
}
@media screen and (max-width: 750px) {
  .reservation-box {
    width: 100%;
  padding: 35px 15px 15px;
  }

  .reservation-number {
    left: 15px;
  }
.reservation-box p {
  min-height: 1em; /* 行数に合わせて調整 */
}
	  .reservation-box:last-child {
    margin-bottom: 30px !important;
  }
    .video-caption {
      font-size: 1.4em !important;
    }

}

/****************************************
Access to the Port
*****************************************/
.route-tab {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  width: 100%;
}
.route-tab-list {
  display: flex;
  align-items: stretch; 
}
.route-tab-menu {
  align-items: center;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex-grow: 1;
  width: 33.3%;
   height: 100%; 
  justify-content: center;
  box-sizing: border-box !important; 

}
.route-tab-menu.current {
  position: relative;
  
}

.route-tab-menu.current.tab1::after {
  content: "";
  position: absolute;
  bottom: -10px;  
  left: 50%;
  transform: translateX(-50%);
  border-left: 20px solid transparent; 
  border-right: 20px solid transparent;
  border-top: 15px solid #1A89D3;
  width: 0;
  height: 0;
  pointer-events: none;
}
.route-tab-menu.current.tab2::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 15px solid #F39939;
  width: 0;
  height: 0;
  pointer-events: none;
}
.route-tab-menu.current.tab3::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 15px solid #E16543;
  width: 0;
  height: 0;
  pointer-events: none;
}
.route-tab-menu.current.tab1 img {
  border-color: #1A89D3; /* ← アクティブ時だけ色変更 */
  border-radius: 4px;
}
.route-tab-menu.current.tab2 img {
  border-color: #F39939; /* ← アクティブ時だけ色変更 */
  border-radius: 4px;
}
.route-tab-menu.current.tab3 img {
  border-color: #E16543; /* ← アクティブ時だけ色変更 */
  border-radius: 4px;
}
.route-tab-menu img {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 5px solid transparent;
  border-radius: 4px;
}
.route-tab-menu.current.tab1::after {
  border-left: 20px solid transparent;  /* 三角形の左右の角 */
  border-right: 20px solid transparent;
  border-top: 15px solid #1A89D3;  /* 三角形の色と向き（上向きの三角形） */
  width: 0;
  height: 0;
  pointer-events: none;
}
.route-tab-menu.current.tab2::after {
  border-left: 20px solid transparent;  /* 三角形の左右の角 */
  border-right: 20px solid transparent;
  border-top: 15px solid #F39939;  /* 三角形の色と向き（上向きの三角形） */
  width: 0;
  height: 0;
  pointer-events: none;
}

.route-tab-menu.current.tab3::after {
  border-left: 20px solid transparent;  /* 三角形の左右の角 */
  border-right: 20px solid transparent;
  border-top: 15px solid #E16543;  /* 三角形の色と向き（上向きの三角形） */
  width: 0;
  height: 0;
  pointer-events: none;
}

.content-box {
  display: none;
  width: 100%;
}
.content-box img {
  display: block;
  height: auto;
  width: 100%;
}

.access-tab {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
 padding-bottom: 0 !important;
  width: 100%;
  background-color: transparent !important;
}
.access-tab-list {
  display: flex;
  align-items: stretch; /* ← 高さを揃えるために追加 */
    margin-bottom: 0 !important;
  overflow: hidden;
  background-color: transparent; /* 必要に応じて */
}
.access-tab-list .access-js-tab:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;}

.access-tab-list .access-js-tab:last-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.access-tab-list .access-js-tab {
  border-radius: 0; /* 全体リセット */
}
.access-content-group {
  margin-top: 0 !important;
}
.access-tab-menu {
  align-items: center;
  background-color: #ccc;
  color: #fff;
  cursor: pointer;
  display: flex;
  flex: 1; /* 幅を均等にする */
  justify-content: center;
  width: 50%;
  padding: 20px;
  height: auto;
  font-weight: bold;
  text-align: center;
  margin: 0 !important;
}
.access-tab-menu.accesee-blue.access-current {
  background-color: #1A89D3;
}
.access-tab-menu.accesee-orange.access-current {
  background-color: #F39939;
}
.access-tab-menu.accesee-red.access-current {
  background-color: #E16543;
}

.access-content-box {
  display: none;
  width: 100%;
  padding: 35px;
  background-color: #fff;
	
}
.access-content-box img {
  display: block;
  height: auto;
  width: 100%;
}

.w50 {
  width: 50% !important;
}

.port-box {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.port-map {
  position: relative;
  width: 50%;           /* ← 横幅50% */
  padding-top: 28.125%; /* ← 16:9の高さ。50% × 56.25% */
  overflow: hidden;
  margin-right: 30px;
}

.port-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.port-info {
  flex: 1;
  width: 45%;
}

.port-name {
  font-size: 1.8em !important;
  line-height: 1.2em !important;
  margin-bottom: 25px !important;
  font-weight: bold;
}

.port-nav{
  max-width: 380px;
  position: relative;
}

.access-bd-blue{
  border: solid 3px #1A89D3;
}
.access-bd-orange{
  border: solid 3px #F39939;
}
.access-bd-red{
  border: solid 3px #E16543;
}

@media screen and (max-width: 750px) {
  /* ① route-tab-list：3カラム→2カラム */
  .route-tab-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .route-tab-menu {
    width: 48% !important;
    box-sizing: border-box;
    margin-bottom: 15px !important;
  }

  /* 3つ目が落ちるとき用の対策：無駄な余白を防ぐ */
  .route-tab-menu:nth-child(3n) {
	width: 50% !important;
	margin: 0 auto 15px !important;
	max-width: 50% !important;
  }

  .route-tab-menu img {
    width: 100%;
    height: auto;
    display: block;
  }


  /* ② port-box：横並び→縦並び */
  .port-box {
    flex-direction: column;
  }

  .port-map {
    width: 100% !important;
    margin-right: 0;
    padding-top: 56.25%; /* 16:9 */
  }

  .port-info {
    width: 100% !important;
    margin-top: 20px;
  }

  /* ③ access-content-box の下余白削除 */
  .access-content-box {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
.access-tab-menu {
  padding: 10px 10px !important;
}
.access-content-box {
  padding: 20px !important;
	
}

}
/****************************************
To Enjoy Your Voyage Even More
*****************************************/

.sns-reserve-section {
  text-align: center;
  margin: 20px 0 0;
}

.sns-icons {
  display: flex;
  justify-content: center;
  gap: 55px;
  margin-bottom: 30px;
}

.sns-icons img {
  width: auto;
  height: 40px;
}

.reservations-btn,
.reservations-btn a,
button.reservations-btn {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 20px 35px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 20px !important;
  max-width: 700px;
  width: 100%;
}

.btn-gradient a {
  color: #fff !important;
  border: 2px solid #fff;
  border-radius: 0;
background: #FFA515;
background: linear-gradient(180deg,rgba(255, 165, 21, 1) 0%, rgba(255, 128, 3, 1) 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
}

.btn-gradient a:hover {
  -webkit-transform: translate(0, -2px);
  transform: translate(0, -2px);
  color: #fff;
  -webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
  box-shadow: 0 8px 15px rgba(0, 0, 0, .2);
}

.reservations-external {
  position: absolute;
  right: 50px !important; /* ←ここを固定位置に調整 */
  top: 32% !important;
  transform: translateY(-50%);
  width: 20px; 
  height: 15px;
}
.reservations-external::before,
.reservations-external::after {
	  position: absolute;

  margin: 0 0 0 3px;
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-weight: 600;

}
.banner-sakura{
  width:80%;
  margin: 10px auto 0;
}
@media screen and (max-width: 750px) {
.banner-sakura img{
  max-width: 300px;
}
.reservations-btn,
.reservations-btn a,
button.reservations-btn {
  font-size: 1.3em !important;
  padding: 20px 20px !important;
}
.reservations-external {

  right: 30px !important; /* ←ここを固定位置に調整 */
  top: 40% !important;
  }
.sns-icons img {
  width: auto;
  height: 30px;
}

  }