@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap&subset=japanese');

/****SP用の改行を非表示****/
.sp-only {
	display: none;
}

/* ナビゲーション設定 */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 60px;
}

/****セクション間隔****/
.ui-static-container-space-m {
  margin-top: 40px; 
  margin-bottom: 40px; 
}

/****MV****/

.ui-static-main-visual-bg-big {
    background-image: url("../img/main.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 550px; 
    min-height: 550px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ui-static-main-visual {
    position: relative;
    text-align: center;
    width: 100%;
    overflow: hidden;
}

/* テキストを重ねる場合
.ui-static-main-visual-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
}　 */

.ui-static-main-visual-no-image {
    background: transparent;
}

/****ナビ****/

/* ナビゲーション全体の背景（赤） */
.ui-static-navigation {
  background-color: #e72121;
  padding: 6px 0;
  text-align: center;
}

/* リストを横並びにする */
.ui-static-navigation-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  gap: 30px; /* 項目間の余白 */
}

.ui-static-navigation-variant-primary .ui-static-navigation-ul {
	padding: 10px 20px;
	}

/* リンク全体の共通スタイル */
.ui-static-link-black {
  color: #ffffff !important; /* 文字色を白に強制（既存のblack指定を上書き） */
  text-decoration: none;
  font-weight: normal;
  font-size: 14px;
  display: inline-block;
  padding-bottom: 6px;
  position: relative;
}

/* アクティブ（現在地）の下線デザイン 
/* ※一番左の「番組説明」に下線をつけるための記述です
.ui-static-navigation-item:first-child .ui-static-link-black::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px; /* 下線の太さ
  background-color: #ffffff; /* 下線の色（白）
}*/

/* --- 上段：番組詳細＆動画エリア --- */
.tv-contents-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 35px;
  max-width: 1000px;
  margin: 0 auto 0px !important; 
}

.tv-left-block, .tv-right-block {
  flex: 1;
}

/* タイトル画像・見出し・説明文 */


.tv-left-block .ui-static-container div, .ui-static-container h1, .ui-static-container h2, .ui-static-container h3, .ui-static-container h4, .ui-static-container h5, .ui-static-container h6, .ui-static-container p {
    margin-bottom: 10px;
}

.tv-left-block .ui-static-container div, .ui-static-container h2 {
    margin-bottom: 10px;
	font-size: 32px;
}


.tv-img-container,
.img-container {
  padding: 0 !important; /* 周りの余白をゼロに */
  width: 100%;
}

/* タイトル画像調整 */
.tv-left-block .tv-img-container {
  width: 80%;
  padding: 0 !important;
  margin-inline: auto;
}

.tv-left-block .tv-img-container img {
  width: 100%;
  height: auto !important;
  display: block;
}


.ui-static-heading {
  font-size: 28px;
  margin: 15px 0;
  line-height: 1.4;
}
.ui-static-text {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

/* 放送内容 画像エリア（旧動画エリア） */
.movie {
  width: 100%;
}

.movie img {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}


/* YouTube動画エリア（赤枠付き）保存用

.movie .title {
  font-weight: bold;
  font-size: 16px;
  margin: 20px 0 5px;
}
.movie iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 8px solid #e50012;
  box-sizing: border-box;
} */

/* --- 下段：放送予定エリア（薄青背景） --- */

.content-container {
  background-color: #dff1f4; /* 薄青の背景色 */
  /* 水色の背景高さを1.5倍に（上下paddingを45pxに） */
  padding: 45px 0;
  
  /* 親の幅を無視して画面の左右いっぱいに広げる設定 */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.tv-program {
  background: #ffffff; /* 白い看板部分 */
  
  /* === 【ここを調整！】幅の設定を修正 === */
  width: calc(100vw - 40px); /* 画面幅いっぱいにしつつ、スマホ等での左右の最小余白を20pxずつ確保 */
  max-width: 1020px;          /* コンテンツラッパーの幅（上限）にカチッと合わせる */
  margin: 0 auto;
  
  /* 画像エリアパディングやマージンの調整 */
  padding: 40px 20px 45px 20px; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  
  /* 内側の白い背景を角丸にする */
  border-radius: 12px; 
  box-sizing: border-box;
}

/* 白い枠の内側に点線を引く設定 */
.tv-program::after {
  content: "";
  position: absolute;
  left: 20px;  /* 左右の余白に合わせる */
  right: 20px; /* 左右の余白に合わせる */
  bottom: 20px; 
  /* 赤い点線を2倍の太さ（2px → 4px） */
  border-bottom: 4px dotted #e72121; 
}

/* 各ロゴのサイズ調整 */
/* パディングやマージンを減らし、max-heightを上げて画像を少し大きく変更 */
.left-img-box img { 
  max-height: 80px; 
  display: block;
  margin: 0px 0px 0px 60px;
}

.right-img-box img {
	max-height: 95px;
	display: block;
	margin: 0px 60px 0px 0px;
}

/* 中央のテキスト群 */
/* テキストと左右の2つの画像を横並びで中央揃えにするための設定 */
.tv-program-col-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 赤い四角（バッジ）を白い枠線（上辺）の真ん中が通る位置に調整 */
.red-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%); /* バッジのちょうど中心が白枠の上辺に重なる */
  display: inline-block;
  background-color: #e50012;
  color: #ffffff;
  font-size: 21px;
  font-weight: bold;
  padding: 3px 15px;
  margin-bottom: 0; /* 位置固定のため不要なマージンをリセット */
  white-space: nowrap;
  z-index: 10;
}

/* テキストグループ（6/9〜アベレンまで） */
.text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-size: 20px;
  font-weight: bold;
}

.text-red {
	color: #e50012;
	font-size: 21px;
}
.text-black {
	color: #000000;
	font-size: 16px;
}

.tv-program .ui-static-text-note {
	font-size: 13px;
	font-weight: normal;
}


/* --- アベレンのツアー紹介 --- */
.highlights-section .ui-static-heading {
  display: flex;
  flex-direction: column-reverse; /* サブタイトルを上、メインを下にする */
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}

/* サブタイトル */
section.highlights-section .ui-static-heading-subtitle {
  font-size: 18px;
  font-weight: 900;
  color: #e72121;
  margin-bottom: 10px;
}

/* メインタイトル */
.highlights-section .ui-static-heading-size-huge {
  font-size: 32px;
  font-weight: bold;
  color: #222222;
}

/* 注意書き */
section.highlights-section .ui-static-text-note {
	font-size: 10px;
	color: #666;
}

/* --- カードリスト共通設定 --- */
.card-list {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px; /* カード同士の縦の隙間 */
}

/* カード1行のレイアウト（通常：左が画像、右がテキスト） */
.card-item {
  display: flex;
  align-items: center; /* 縦方向を中央揃えにしてバランスを取る */
  gap: 30px;
}

/* 2番目のカード（左右逆転） */
.card-item.is-reverse {
  flex-direction: row-reverse;
}

/* 写真を約80%のサイズに縮小するための比率調整 (4:6に配分) */
.card-media-container {
  flex: 4; /* 写真側を少し狭く */
}

.card-content-container {
  flex: 6; /* テキスト側を少し広く */
}

/* 画像自体の設定 */
.card-image-container img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- テキストを囲む枠（位置調整・背景色、およびベタ塗り影を追加） --- */
.card-text-inner-container {
  position: relative; /* バッジを絶対配置（左上重ね）にするための基準点 */
  background-color: #ffffff; /* 影の上に重なるため、背景を白に固定 */
  border-width: 3px;
  border-style: solid;
  border-radius: 12px;
  /* 画像のデザインに合わせ、バッジと見出しが被らないよう上部余白を確保 */
  padding: 45px 30px 25px 30px; 
  min-height: auto;   /* 写真に高さを合わせず、文字量に合わせる */
  box-sizing: border-box;
  /* 親要素としてブロックを左寄せベースにする */
  display: block !important; 
  
  /* 周囲の余白調整：バッジの飛び出し(上20px)と、ベタ塗り影の飛び出し(右下6px)を確保 */
  margin: 20px 6px 6px 0; 
}

/* 【微調整箇所】青枠・赤枠のカラー指定と、ベタ塗り影（box-shadow）の距離を縮小 */
.border-blue { 
  border-color: #395db5; 
  /* 右に5px、下に5px、ぼかし0pxで、枠線により近づけたベタ塗り影を配置 */
  box-shadow: 5px 5px 0 0 #395db5; 
}
.border-red  { 
  border-color: #e72121; 
  /* 右に5px、下に5px、ぼかし0pxで、枠線により近づけたベタ塗り影を配置 */
  box-shadow: 5px 5px 0 0 #e72121; 
}

/* --- バッジ（枠の左上に半分重なる斜めカットのデザイン） --- */
.card-text-inner-container .badge {
  position: absolute;
  top: -3px;   /* 枠線（3px）の真上にぴったり重ねる */
  left: -3px;  /* 枠線（3px）の真上にぴったり重ねる */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: bold;
  font-size: 15px;
  height: 38px;           /* バッジの高さを固定 */
  padding: 0 45px 0 35px;  /* 右側の余白を少し広めにして斜めカットに備える */
  margin-bottom: 0;       /* absoluteにするためmarginは不要 */
  
  /* 左上は外枠の丸みにフィットさせ、右下を少し丸める */
  border-top-left-radius: 9px;
  border-bottom-right-radius: 12px;
  
  /* 右側を斜めにスパッとカットする形状を再現 */
  clip-path: polygon(0 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
}

/* バッジの背景色 */
.bg-blue { background-color: #395db5; }
.bg-red  { background-color: #e72121; }

/* --- カード内の見出し・文字・隙間調整 --- */
.card-text-inner-container h3 {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  
  /* 既存のレイアウト（flex等）を完全に無効化して左寄せにする */
  display: block !important;
  text-align: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  
  /* 上下の無駄な広すぎる隙間を強制リセット */
  margin-top: 0 !important;
  margin-bottom: 10px !important; /* 本文との隙間だけ程よく空ける */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.card-text-inner-container p {
  font-size: 13px;
  line-height: 1.6;
  color: #444444;
  text-align: left !important; /* 本文も強制左寄せ */
  margin: 0 !important;       /* 余計なマージンを排除 */
  padding: 0 !important;
}

/* --- セクション全体を中央揃えにする --- */
.highlights-section {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* 子要素（見出しやカードリスト）を中央寄せ */
  justify-content: center !important;
  margin-top: 40px;
}

/* セクション直下のコンテナも幅いっぱいに広げて中央寄せ */
.highlights-section .ui-static-container {
  width: 100% !important;
  max-width: 1000px; /* カードリストの最大幅と合わせる */
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- ステッカーエリア（幅を制限し、枠との間に余白を作る） --- */
.sticker {
  width: 100% !important;
  max-width: 1000px;              /* カードリストの最大幅（1000px）と同期 */
  margin: 20px auto 0 !important;  /* 上に50pxの隙間を空け、左右は中央寄せ */
  margin-bottom: 40px;
  padding: 0 !important;      /* 画面を縮めたとき、全体のラッパー（画面端）との間にできる左右の余白 */
  box-sizing: border-box !important;
}

.sticker__inner {
  width: 100% !important;
  padding: 0 !important;
}

/* 画像をステッカー枠内に綺麗に収める */
.sticker__inner img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* PC用・SP用画像の正しい表示切り替え（干渉対策） */
.sticker .pc-only { display: block !important; }
.sticker .sp-only { display: none !important; }


/* --- ツアーポイント1 --- */

/* セクションの上に40pxの余白を追加 */
.point-section {
  margin-top: 70px;
}

.point-section .ui-static-heading {
  display: flex;
  flex-direction: column-reverse; /* サブタイトルを上、メインを下にする */
  align-items: center;
  text-align: center;
  margin-bottom: 30px;
}

/* サブタイトル（tour point 1） */
section.point-section .ui-static-heading-subtitle {
  font-size: 18px;
  font-weight: 900;
  color: #2b62c1; /* 特徴的な青色 */
  margin-bottom: 10px;
}

/* メインタイトル（最旬のスポット巡り！） */
section.point-section .ui-static-heading-size-huge {
  font-size: 32px;
  font-weight: bold;
  color: #000000;
}

/* --- コンテナと背景色（薄青） --- */
.point-section .ui-static-container {
  background-color: #e6f2f5; /* 薄い水色背景 */
  box-sizing: border-box;
  
  /* 【修正】崩れの原因だった margin ではなく、ブレイクアウトの手法で安全に左右いっぱいに広げる */
  width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  
  /* 上下の余白を40pxに設定 */
  padding: 40px 0; 
}

/* --- 2カラム・グリッド配置 --- */
.point-card-grid-container {
  max-width: 1000px;
  /* 確実に中央配置を維持 */
  margin: 0 auto !important; 
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* きれいな2分割 */
  gap: 25px; /* カード同士の間隔 */
  width: 100%;
  
  /* 【修正】画面が狭いとき（スマホ等）にカードが画面端に張り付かないよう左右余白をここで確保 */
  padding: 0 20px;
  box-sizing: border-box;
}

/* --- カード1枚ずつのスタイル（白背景） --- */
.point-card-item {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  padding: 15px; /* カード内側の適度な余白 */
  box-sizing: border-box;
}

/* 画像コンテナ */
.point-image-container {
  width: 100%;
  margin: 0 auto 15px auto; /* 下の文字エリアとの隙間は15pxを維持 */
}

.point-image-container img {
  width: 100%;
  height: auto !important;
  display: block;
}

/* テキストコンテナ */
.point-text-container {
  width: 100%;
  display: block !important;
}

/* --- カード内の見出し・本文調整 --- */
.point-text-container h3 {
  font-size: 18px;
  font-weight: bold;
  /* 小見出しのカラーをサブタイトルと同じブルー（#2b62c1）に変更 */
  color: #2b62c1;
  line-height: 1.4;
  
  /* 既存スタイルを無効化して完全に左寄せ */
  display: block !important;
  text-align: left !important;
  justify-content: flex-start !important;
  
  /* 小見出しと写真の間に10pxの余白を設定（margin-top: 10px） */
  margin: 10px 0 8px 0 !important;
  padding: 0 !important;
}

.point-text-container p {
  font-size: 13px;
  line-height: 1.6;
  color: #333333;
  
  /* 本文の左寄せとマージン排除 */
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* --- 特典 --- */

/* 【修正】セクションの上に70pxの余白を追加 */
.special-section {
  margin-top: 70px;
}

.special-section .ui-static-heading {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
  margin-bottom: 35px;
}

/* サブタイトル（tour point 2） */
section.special-section .ui-static-heading-subtitle {
  font-size: 18px;
  font-weight: 900;
  color: #e50012; /* 特徴的な赤色 */
  margin-bottom: 10px;
}

/* メインタイトル */
.special-section .ui-static-heading-size-huge {
  font-size: 32px;
  font-weight: bold;
  color: #222222;
}

/* --- コンテナと背景色（薄いオレンジ） --- */
.special-section .ui-static-container {
  background-color: #ffe6d5; /* 薄いオレンジの背景色 */
  box-sizing: border-box;
  
  /* 【修正】オレンジの背景をセクションラッパーの幅を超えて画面の左右限界まで広げる */
  width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  
  /* 左右のpaddingは内側のカードコンテナに任せるため、上下のみ40pxを設定 */
  padding: 40px 0;
}

/* --- カードリストの囲み（中央寄せ） --- */
.special-card-list-container {
  max-width: 1000px;
  margin: 0 auto !important;
  display: flex;
  flex-direction: column;
  gap: 25px; /* カード同士の縦の隙間 */
  width: 100%;
  
  /* 【修正】画面が狭いとき（スマホ等）にカードが画面端に張り付かないよう左右余白をここで確保 */
  padding: 0 20px;
  box-sizing: border-box;
}

/* --- 特典カード1枚ずつのスタイル --- */
.special-card-item {
  background-color: #ffffff;
  border: 2px solid #e50012; /* 外枠の赤い線 */
  display: flex;
  padding: 25px 30px;
  position: relative; /* リボンの絶対配置の基準にする */
  box-sizing: border-box;
  min-height: 140px; /* カードの最小高さを確保 */
}

/* --- 特典リボンバッジ（最上部配置・高さ短縮の修正） --- */
.special-ribbon {
  background-color: #e50012;
  color: #ffffff;
  width: 60px;          /* ほんの少しスリムに */
  height: 75px;         /* 高さを少し短く調整 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  /* カードの左上にぴったり配置 */
  position: absolute;
  top: 0;
  left: 30px;           /* カードの左内余白と位置を合わせる */
  z-index: 2;
}

/* リボンの下部をV字にくり抜く設定（リボン幅に合わせて調整） */
.special-ribbon::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 12px solid #ffffff; /* 親要素の白背景と同じ色で切り抜く */
}

.special-ribbon-text {
  font-size: 12px;
  font-weight: bold;
  margin-top: -8px; /* 位置の微調整 */
}

.special-ribbon-num {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}

/* --- テキストエリア（リボンとの間に余白を作る修正） --- */
.special-text-container {
  flex: 1;
  display: block !important;
  /* リボンの横幅(60px)＋十分な余白(35px)＝95px のスペースを開ける */
  padding-left: 95px; 
  box-sizing: border-box;
}

/* 特典名見出し (T-moneyカード等) */
.special-text-container h3.text-red {
  font-size: 22px;
  font-weight: bold;
  color: #e50012 !important;
  display: block !important;
  text-align: left !important;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
}

/* キャッチコピー (観光の移動で使える！等) */
.special-text-container .text-sub-title {
  font-size: 16px;
  font-weight: bold;
  color: #222222 !important;
  text-align: left !important;
  margin: 0 0 12px 0 !important;
}

/* 説明文本文 */
.special-text-container p:not(.text-sub-title) {
  font-size: 13px;
  line-height: 1.6;
  color: #444444 !important;
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
}

.tour-section .ui-static-container.ui-static-container-space-m {
	background-color: #dff1f4;
}


/* --- ツアーセクション全体設定 --- */
.tour-section {
  /* 【要件】セクションの一番上に70pxのマージントップ */
  margin-top: 70px; 
}

/* --- H2見出し・サブタイトルの配置（上下反転） --- */
.tour-section .ui-static-heading {
  display: flex;
  flex-direction: column-reverse; /* サブタイトルを上、メインを下にする */
  align-items: center;
  text-align: center;
  margin-bottom: 35px;
}

/* 【要件】H2メインタイトル（新・決定版！ソウル３日間の旅） */
.tour-section .ui-static-heading-size-huge {
  font-size: 32px;  /* フォントサイズ32px */
  font-weight: bold; /* ボールド */
  color: #222222;
  line-height: 1.4;
}

/* 【要件】H2サブタイトル（行きたい！食べたい！をぜんぶ叶える！） */
.tour-section .ui-static-heading-subtitle {
  font-size: 18px;   /* フォントサイズ18px */
  font-weight: 900;  /* 太さ900 */
  color: #2b62c1;    /* 他で使っているブルー */
  margin-bottom: 10px;
  display: block;
}

/* --- 【要件】コンテナと水色背景（画面幅いっぱいに広げる） --- */
.tour-section .ui-static-container.ui-static-container-space-m {
  background-color: #dff1f4; /* 水色の背景色 */
  box-sizing: border-box;
  
  /* セクションラッパーの幅を無視して限界まで左右に広げる */
  width: 100vw !important;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  
  /* 上下の余白（カード上の余白40px、もっと見るボタンの下の余白50px） */
  padding: 40px 0 50px 0; 
}

/* --- 内側コンテンツの幅制限（商品枠を崩さないためのガード） --- */
.tour-section .product-list-wrapper {
  max-width: 1000px; /* 特典やカードリストの最大幅（1000px）と同期 */
  margin: 0 auto !important;
  width: 100%;
  
  /* 画面が狭いとき（スマホ等）にカードが画面端に張り付かないよう左右余白をここで確保 */
  padding: 0 20px;
  box-sizing: border-box;
}

/* 商品カード下のボタン用ラッパー制限（幅の広がり防止） */
.tour-section .ui-static-button.tour {
  max-width: 1000px;
  margin-top: 40px !important; /* 商品カードとの間に程よい隙間を確保 */
}

/*商品*/

.is-tour {
	padding:10px;
}

.is-tour li {
	background-color:#fff;"
}
.ui-static-grid-lg-space-article-card {
        margin-top:20px;
    }

.card__imgTag {
          padding: 2px 8px;
          font-size: 12px;
          font-weight: bold;
          color: #fff;
          background-color: #697180;
        position: absolute;
          top: 0;
          right: 0;
          }

       &:empty {
            display: none;
}

  .ui-static-product-card[data-product-card-type=secondary] .ui-static-product-card-label {
        bottom:-22px;
	   max-width:100%;
	  text-align:left;
    }

 .ui-static-product-card[data-product-card-type=secondary] .ui-static-product-card-departure-arival-info {
        padding:0 14px;
    }

.product__list--point {
	background-color:#e90000;
	text-align:center;
	color:#fff;
	padding:3px;
	font-weight:bold;
	margin:10px 0 !important;
}

 .card__price--compact {
        display: block;
        font-size: 20px;
        color: #e90000;;
        font-weight: bold;
        word-break: auto-phrase;
      }

.card__calender,
      .product__list--notes {
        font-size: 12px;
        color: #697180;
      }


.ui-static-grid-item {
   height:100%;
	display:flex;
}

.ui-static-product-card .ui-static-product-card-inner {
    height:initial;
}

.card__imgTag {
	display:none;
}


@media (max-width: 480px) {
  .point-text {
    font-size: 14px;
  }
}

/* 商品カード下のボタン */

.ui-static-button.ui-static-button-secondary.ui-static-button-large.tour {
 margin: 0 auto;
 display: flex;
 justify-content: center;	
}

/* ２つめのツアー */

.tour-section02 {
    background-color: #f4ffef;
    padding: 40px 10px 40px 10px;
}

.point-item.color-green {
  display: flex;
  align-items: center;
  padding: 5px 5px 5px 5px;
  margin: 20px 5px 30px 5px;
  border-bottom: 2px dashed #50d528;
  border-bottom-weight:bold;
}

/* 画像コンテナ */
.point-icon.color-green {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
　margin-right: 10px;
}

/* 画像 */
.point-icon.color-green img {
  width: 100%;
  height: auto;
  display: block;
}

.tour-tag.size-small.color-green {
	display: block;
	width: fit-content;
	border: 1px solid #2e7d32;
	color:#2e7d32;
	background-color:#FFFFFF;
	font-size: 16px;
    font-weight: bold;
    padding: 2px 12px;
    border-radius: 50px;
	margin: 0 auto;
}

/****おすすめ特集****/
.tokusyuWrap {
 margin-top:80px;
}

.tokusyuWrap .title-section-category {
 text-align:center;
 font-size:40px;
 font-weight: bold;
}

.tokusyu, .reco-banner__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.reco-banner__list {
  padding: min((39vw / 7.5), 30px);
  gap: min((38vw / 7.5), 40px);

}
.reco-banner__item {
  width: min((296vw / 7.5), 192px);
}
.tokusyu li a, .reco-banner__link {
  display: block;
  box-shadow: 0px 0px 0px 1px #000;
  transition: opacity .4s;
}
.tokusyu li a:hover, .reco-banner__link:hover {
  box-shadow: 0px 0px 0px 2px #000;
  opacity: 0.6;
}
.tokusyu li img, .reco-banner__image {
  width: 100%;
}

	
/* タブレット版（768px〜1024px）の調整 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	
	.ui-static-tab-button .main {
		font-size: 28px;
		}

	.ui-static-tab-button.is-active::after {
		bottom: -26px;
		border-width: 20px 19px 0 20px;
	}
	
	.ui-static-tab-button .sub {
		font-size: 15px;
	}
	
	.ui-static-section-wrapper {
        padding: 40px 20px 96px;
    }
	
  .tokusyuWrap .title-section-category {
    font-size: 40px;
  }

  .tokusyu, .reco-banner__list {
	display: flex !important;
    flex-wrap: nowrap !important;
    gap: 15px;
    padding: 15px;
    box-sizing: border-box;
	justify-content: center;
  }

  .reco-banner__item {
    width: calc(25% - 12px); 
    box-sizing: border-box;
  }}