@charset "utf-8";
/* CSS Document */
/* 1x1 GIFを非表示にする */
.onsen-list a img[src*="gifbanner"] {
    display: none !important;
}
html, body {
    overflow-x: hidden;  /* 横スクロールを無効化 */
}

body {
	font: 100%/1.4 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	background-color: #4E5869;
	margin: 0;
	padding: 0;
	color: #000;
}
/* ~~ エレメント / タグセレクター ~~ */
ul, ol, dl { /* ブラウザー間の相違により、リストの余白とマージンをゼロにすることをお勧めします。一貫性を保つために、量をここで指定するか、リストに含まれるリスト項目 (LI、DT、DD) で指定できます。より詳細なセレクターを記述しない限り、ここで指定する内容が .nav リストにも適用されることに注意してください。 */
	padding: 0;
	margin: 0;
}
.clear {
	clear: both;	
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 15px;
	padding-left: 15px; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}
h1 {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
/* ■リストアイコン画像 */
.accommodation-icons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* 項目の間隔 */
}

.accommodation-icons li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
}

/* END */

/* アフィリエイト画像 */
/* 1) まずトラッキング用の透明画像を完全に無効化 */
/* ====================================================== */
/* --- アフィリエイトの透明トラッキング画像を非表示 --- */
/* 1) まずトラッキング用の透明画像を完全に無効化 */
/* 1) まずトラッキング用の透明画像を完全に無効化 */
/* ===============================
   リンク色（全状態）
   =============================== */
.thumbnail-slide a,
.thumbnail-slide a:link,
.thumbnail-slide a:visited,
.thumbnail-slide a:hover,
.thumbnail-slide a:active {
	color: #00FFFF !important;
}

/* ===============================
   非表示用画像（幅0、高さ1、トラッキング用など）
   =============================== */
.thumbnail-slide img[width="0"],
.thumbnail-slide img[width="1"],
.thumbnail-slide img[height="1"],
.thumbnail-slide img[src*="gifbanner"],
.thumbnail-slide img[src*="track"],
.thumbnail-slide img[src*="pixel"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ===============================
   特定ホスト画像の幅指定（jalanなど）
   =============================== */
.thumbnail-slide a > img:last-of-type,
.thumbnail-slide a img[src*="jalan.jp"],
.thumbnail-slide a img[src*="cdn.jalan.jp"] {
  display: block !important;
  width: 360px !important;
  max-width: 100% !important;
  height: auto !important;
  vertical-align: middle !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 15px auto 5px auto !important; /* 上15px、下5px、左右中央 */
}

/* ===============================
   aタグのテキスト中央寄せ
   =============================== */
.thumbnail-slide a {
	display: inline-block;
	width: 360px; /* 画像幅と揃える */
	text-align: center;
	line-height: 1.4;
	vertical-align: top;
	text-decoration: none;
	color: #66FFFF;
	padding: 0;
	box-sizing: border-box;
	margin: 0 auto 0 auto; /* 中央寄せ */
}

/* ===============================
   キャプション（span.captionなど）用
   =============================== */
.thumbnail-slide .caption {
  display: block;
  margin-top: 5px; /* 画像との間隔 */
  font-size: 14px;
  line-height: 1.2;
  word-break: break-word;
}

/* ===============================
   汎用 img 設定リセット
   =============================== */
.thumbnail-slide img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* ===============================
   サムネイルスライド全体
   =============================== */
.thumbnail-slide {
  overflow: hidden;
  padding: 0;
  margin: 0;
  text-align: center;
}

/* ===============================
   slickスライダー内部整列
   =============================== */
.slick-track {
  display: flex !important;
  align-items: center;
}

.slick-slide {
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ===============================
   サムネイル画像の余白調整（右5px＋下5px）
   =============================== */
.thumbnail-slide a img {
  display: block !important;
  width: 240px !important;
  height: auto !important;
  margin: 15px 5px 5px 0 !important; /* 上15px、右5px、下5px、左0 */
  border: 0;
}

/* ===============================
   a内テキストスタイル
   =============================== */
.thumbnail-slide a {
  display: inline-block;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
}


/* 画像の回り込み用クラス
.float-img {*/
	 /*float: right; 右と下に余白を作る（上は0） */
/* 	width: 359px;      必要に応じて固定幅 */
    /*	height: auto;   高さ自動調整
	margin-top: 0;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-left: 15;
}
  */
#ad_topimg {
	margin-top: 0;	 /* 上マージンを削除すると、マージンを含む div からマージンがはみ出す場合があるという問題を回避できます。残った下マージンにより、後続のエレメントからは離されます。 */
	padding-right: 15px;
	padding-left: 15px; /* div 自体ではなく div 内でエレメントの両側に余白を追加すると、ボックスモデル計算が不要になります。代わりに、両側に余白を指定した div をネストして使用することもできます。 */
}
/*  画像 テキスト並列　の回り込み用クラス */
.ad-box300 {
	float: right;           /* ブロックごと右寄せ */
	width: 359px;           /* 画像幅に合わせる */
	margin-left: 15px;      /* 左側に余白を作る */
	margin-bottom: 15px;    /* 下の文章との間隔 */
	text-align: center;     /* タイトルやテキスト中央揃え */
	border: 1px solid #ccc; /* 枠（任意） */
	padding: 5px;           /* 内側余白 */
	border-radius: 5px;
	background-color: #f9f9f9;
	margin-right: 15px;
}

.ad-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}

.ad-description {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
}

.info-row-box {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.info-item {
  flex: 1;
  text-align: center;
  font-size: 14px;
}

/* 画像を右端に寄せて回り込み */
.ad-image {
  float: right;
  width: 359px;   /* 画像幅固定 */
  height: auto;
  margin-left: 15px; /* 左側に余白を作る */
  margin-bottom: 10px;
}

/* 横並びテキストを回り込み */
.info-row-float {
  display: flex;
  flex-wrap: wrap;     /* 幅が足りない場合は折り返し */
  gap: 5px;            /* テキスト間の隙間 */
  border: 1px solid #ccc;  /* 枠で囲む */
  padding: 5px;
  border-radius: 5px;
  background-color: #f9f9f9;
}

/* 各テキスト項目 */
.info-item {
  flex: 1;            /* 均等幅 */
  text-align: center;
  font-size: 14px;
}

/* END 画像 テキスト並列　の回り込み用クラス */


/* ■親指リスト */
    ul.thumb-list {
      list-style: none; /* デフォルトの丸マークを消す */
      padding-left: 0;
    }
    ul.thumb-list li::before {
      content: "👍";       /* ここがリストマーカー */
      margin-right: 8px;   /* テキストとの間隔 */
      font-size: 24px;     /* サイズ調整 */
      vertical-align: middle;
    }

/* END 親指リスト */


a img { /* このセレクターは、一部のブラウザーでイメージをリンクで囲んだ場合にイメージの周囲に表示される初期設定の青いボーダーを削除します。 */
	border: none;
}
/* ~~ サイトのリンクのスタイル付けは、ホバー効果を作成するセレクターグループも含め、この順序にする必要があります。~~ */
a:link {
	color: #414958;
	text-decoration: underline; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
	text-decoration: none;
}
/* ~~ このコンテナが他のすべての div を囲み、パーセンテージに基づいた幅を指定します。~~ */
.container {
	width: 80%;
	max-width: 1260px;/* レイアウトが大型モニターで広がりすぎないように、最大幅を指定することをお勧めします。これにより、読みやすい行の長さを保つことができます。IE6 ではこの宣言は無視されます。 */
	min-width: 780px;/* レイアウトが狭くなりすぎないように、最小幅を指定することをお勧めします。これにより、サイドカラムで読みやすい行の長さを保つことができます。IE6 ではこの宣言は無視されます。 */
	background-color: #FFF;
	margin: 0 auto; /* 幅に加え、両側を自動値とすることで、レイアウトが中央に揃います。.container の幅を 100% に設定した場合、これは必要ありません。 */
}
/* ~~ ヘッダーには幅は指定されません。ヘッダーはレイアウトの幅全体まで広がります。ヘッダーには、ユーザー独自のリンクされたロゴに置き換えられるイメージプレースホルダーが含まれます。~~ */
.header {
	background-color: #6F7D94;
}
/* ~~ これはレイアウト情報です。~~ 

1) 余白は、div の上部または下部にのみ配置されます。この div 内のエレメントには、それ自体に余白があるので、ボックスモデル計算を行う必要がありません。ただし、div 自体に両側の余白やボーダーを指定した場合、その値が加算されたものが合計幅になることに注意してください。div 内のエレメントの余白を削除し、さらにその div 内に、全体のデザインに必要な幅や余白を指定していない 2 つ目の div を追加することもできます。

*/
.content {
	padding: 10px 0;
}
/* ~~ このセレクターグループは、.content 内のリストに領域間隔を指定します。~~ */
.content ul, .content ol {
	padding: 0 15px 15px 40px; /* この余白は、上述の見出しと段落ルールの右の余白を表します。下の余白はリスト内の他のエレメントとの間隔用に配置され、左の余白はインデント作成用に配置されています。これは必要に応じて調整できます。 */
}
/* ~~ フッター ~~ */
.footer {
	padding: 10px 0;
	background-color: #D6D6D6;
}

/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}

footer {
	font-size: 0.6rem;		/*文字サイズ。remの単位についてはテンプレート内の解説をお読み下さい。*/
	text-align: center;		/*内容をセンタリング*/
	padding: 20px;			/*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {text-decoration: none;
	color: #FFF;

}

/*著作部分*/
footer .pr {
	display: block;
	font-size: x-small;
}
footer .pr a {
	color: #FFF;
}
/*フッターにあるアイコン類 */
ul.icon {
	display: flex;          /* 横並び */
	flex-wrap: wrap;        /* 幅が狭ければ折り返す */
	justify-content: center;/* 中央寄せ */
	gap: 10px;              /* バナー同士の間隔 */
	list-style: none;       /* ・を消す */
	padding: 0;         /* 親要素内で中央配置 */
	margin-top: 15;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

ul.icon li {
  display: inline-block;
}
/* end フッターにあるアイコン類


/* ~~ その他の float/clear クラス ~~ */
.fltrt {  /* このクラスを使用すると、ページ内でエレメントを右にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: right;
	margin-left: 8px;
}
.fltlft { /* このクラスを使用すると、ページ内でエレメントを左にフローティングさせることができます。フローティングさせるエレメントは、ページ内で横に並べて表示するエレメントの前に指定する必要があります。 */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* このクラスは、#footer が #container から削除されているか取り出されている場合に、<br /> または空の div で、フローティングさせる最後の div に続く最後のエレメントとして (#container 内に) 配置できます。 */
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0px;
}
/* フォーム内のスタイル */

form {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;         /* ← フォーム全体を中央揃え */
    border: 1px solid #ccc;
    box-shadow: none;
    box-sizing: border-box;
    text-align: left;       /* ← 中のテキストは左寄せ */
}

form label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
    text-align: left;       /* ← ラベルは左寄せ */
}

form input[type="text"],
form input[type="email"],
form textarea {
    width: 80%;             /* ← 入力欄を20%小さく */
    display: block;
    margin: 5px 0;          /* ← 左端にそろえる */
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}


form textarea {
	resize: vertical;
	height: 120px;
}

form button {
	margin-top: 20px;
	width: 100%;
	padding: 10px;
	background-color: #4E5869;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
}

form button:hover {
	background-color: #6c7586;
}
/* フォーム専用H1だけに適用 */
.contact-form .form-title {
    max-width: 800px;     
    margin: 0 0 20px 0;   /* 上0 下20px 左寄せ */
    text-align: left;     
}
.footer small  {
    display: block;
    text-align: center;
}

#undertitle  {
	display: block;
	text-align: center;
	font-size: xx-small;
}

/********* 横並びメニュー *********/
/* ナビゲーション基本スタイル */
.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;          /* 横並びにする */
    background-color: #6F7D94;
}

.nav > li {
    position: relative;     /* ドロップダウン用の基準位置 */
}

.nav > li > a {
    display: block;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.nav > li > a:hover {
    background-color: #4E5869;
}

/* ドロップダウンメニュー */
.dropdown-menu {
    display: none;           /* 初期状態は非表示 */
    position: absolute;      /* 親 li に対して絶対配置 */
    top: 100%;               /* 親の下に表示 */
    left: 0;
    background-color: #fff;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ドロップダウンの子リンク */
.dropdown-menu li a {
    display: block;
    padding: 10px 15px;
    color: #000;
    text-decoration: none;
}

.dropdown-menu li a:hover {
    background-color: #f1f1f1;
}

/* ホバーで表示 */
.nav > li.dropdown:hover .dropdown-menu {
    display: block;
}

/* ドロップダウン内の li に境界線を追加（任意） */
.dropdown-menu li {
    border-bottom: 1px solid #ddd;
}

.dropdown-menu li:last-child {
    border-bottom: none;
}
#small {
	font-size: small;
	background-color: #FFC;
}
/* 都道府県リスト */
/* エリア全体を横並びに */
/* todohuken全体を中央寄せ */
.heiretsu {
  display: flex;           /* フレックスで配置 */
  justify-content: center; /* 横方向中央寄せ */
  flex-wrap: wrap;         /* 幅が足りなければ折り返す */
  margin: 0 auto;
}
 /* FOOTER中のアコーディオン */
  /* FOOTER中のアコーディオン */

 /*END FOOTER中のアコーディオン */
#onsenlist_heiretsu {
  display: flex;           /* フレックスで配置 */
  justify-content: center; /* 横方向中央寄せ */
  flex-wrap: wrap;         /* 幅が足りなければ折り返す */
  margin: 0 auto;
}
/* エリア全体を横並びに */
/* エリア全体を横並びに */
/* area-list エリア全体を横並びに */
/* area-list エリア全体を横並びに */
.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

/* 各エリアliの見た目調整 */
.area-list > li {
  border: 1px solid #ccc;
  padding: 5px;
  min-width: 150px;
  box-sizing: border-box;
  text-align: center; /* 画像の下のテキストを中央揃え */
}

/* リンク全体を縦方向に並べる */

.area-list li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none;
  color: inherit;
}


/* 画像サイズ調整 */
.area-img {
  width: 174px;  /* 元347pxを半分に */
  height: 120px; /* 元240pxを半分に */
  object-fit: cover; /* 縦横比を維持して切り抜き */
  margin-bottom: 5px; /* テキストとの間隔 */
}

/* 見出しを左揃え */
.area-list > li > h3,
.area-list > li > ul > li > h4 {
  margin: 0;
  padding: 0;
  text-align: left;
  font-weight: bold;
}

/* 内側のリストも左揃え */
.area-list li ul {
  padding-left: 0;
  margin: 5px 0 0 0;
  list-style: none;
  font-size: 12px; /* エリア名と同じ */
}

.area-list li ul li {
  padding: 2px 0;
  margin: 5px 0;
}
/* 以下はOOM1＿LIのみで動作する。oom_li 内のサブリストはデフォルトで非表示 */

/* oom_li 内のサブリストはデフォルトで非表示 */
/* ===== 変更箇所：oom_li 内だけ影響 ===== */
/* 初期は閉じる */
/* アコーディオン全体 */

.accordion-area .area-list > li > h3 {
  display: block;
  position: relative;
  z-index: 2;
  cursor: pointer !important;
}
/* 初期状態：サブリスト非表示 */
.accordion-area .area-list > li > ul {
    max-height: 0;              /* 高さゼロで折りたたむ */
    overflow: hidden;            /* はみ出し隠す */
    margin: 0;
    padding: 0;
    transition: 
        max-height 1.2s cubic-bezier(0.25,0.8,0.25,1),
        margin 1.2s cubic-bezier(0.25,0.8,0.25,1),
        padding 1.2s cubic-bezier(0.25,0.8,0.25,1);
}

/* 開いた状態 */
.accordion-area .area-list > li.open > ul {
    max-height: 1000px;          /* 十分な高さ */
    margin: 5px 0 0 0;           /* 上余白 */
    padding: 5px 0 0 0;          /* 内側余白 */
}
.accordion-area .area-list > li {
  position: relative !important;
}

.accordion-area .area-list > li > h3 {
	display: block !important;
	position: relative !important;
	z-index: 1000 !important;
	cursor: pointer !important;
	pointer-events: auto !important; /* ← 一時的に黄色くして位置確認用 */
	background-color: rgba(255,204,0,0.2);
}

.accordion-area .area-list > li > ul {
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important;
}
.area-list > li {
  border: 1px solid #ccc;
  padding: 5px;
  min-width: 150px;   /* ← これが外枠を広げている */
  box-sizing: border-box;
  text-align: center;
}


/* END accordion-area .area-list エリア全体を横並びに */

/* あまぞん＿AD*/
.ad-flex {
  display: flex;          /* 横並び */
  align-items: flex-start;/* 上揃え */
}

.ad-flex ul {
  margin: 0;
  padding-left: 15px;     /* 左側に15px余白をつける */
  list-style: none;       /* 必要なら箇条書きマークを消す */
}

.ad-banner {
  margin-left: 15px;      /* リストとの間に余白 */
  flex-shrink: 0;         /* バナーが縮まないよう固定 */
}

.net_211217 {
	margin-left: 15px;      /* リストとの間に余白 */
	flex-shrink: 0;         /* バナーが縮まないよう固定 */
	margin-bottom: 15px;
}
 
 /* afi広告設定 */
/* 横並び情報リンク（中央揃え） */
/* ad-box全体の枠 */
/* ad-box全体の枠（右寄せ用に修正） */
/* ad-box全体の枠（右寄せ＋左余白） */
/* ad-box全体の枠（右寄せ＋左余白） */
/* ad-box全体の枠 */
.ad-box400 {
    border: 1px solid #ccc;
    padding: 15px;
    margin: 15px 15px 15px 15px; /* 左に15px余白 */
    background-color: #f9f9f9;
    overflow: hidden; /* float解除用 */
    float: right; /* 右寄せ */
    width: 400px; /* 固定幅 */
}

/* タイトル */
.ad-box400 .ad-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}

/* 説明文 */
.ad-box400 .ad-description {
    font-size: 14px;
    line-height: 1.5;
}

/* アフィリエイト画像右寄せ */
.ad-box400 .ad-description a {
    float: right;
    margin-left: 15px; /* テキストとの間隔 */
    margin-bottom: 10px;
}

/* 横並び情報リンク */
.ad-box400 .info-row-box {
    display: flex;
    gap: 5px;              /* ← 余白を10pxから5pxに縮小 */
    margin-top: 8px;       /* ← 上の余白も小さく */
    flex-wrap: wrap;       /* スマホなどで折り返す */
    clear: both;           /* float解除 */
}

/* info-item個別 */
.ad-box400 .info-row-box .info-item a {
    display: inline-block;
    padding: 3px 6px;      /* ← ボタンの余白を小さく */
    background-color: #eee;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 12px;       /* ← 少し小さめに */
    white-space: nowrap;   /* ← 改行防止で横並びを維持 */
}

.ad-box400 .info-row-box .info-item a:hover {
    background-color: #ddd;
}
.info-item {
  display: flex;
  align-items: center;  /* 縦方向センター */
  gap: 6px;             /* アイコンとテキストの間に余白 */
}

.info-item img {
  display: inline-block;
  vertical-align: middle;
}

   /*end afi広告設定 */

  /* top50 大江戸リンク右寄せ */
.oom_name li {
  display: inline-block;
  margin-right: 15px; /* 隙間 */
  vertical-align: top; /* 高さを揃える */
}

 /*温泉　泉質　右回り込み */
.ul-wrapper {
  display: flex;
  gap: 15px;   /* ul 同士の横余白 */
}

.ul-wrapper ul {
  list-style: none; 
  padding: 0;
  	margin-left: 15px;
}

.ul-wrapper ul li {
	margin-bottom: 30px;  /* li の下余白を15pxにする */

}
 /*温泉　アフィリエイトAD　右回り込み */
    .affiliate-links {
      display: flex;       /* 横並びにする */
      gap: 10px;           /* 画像間の隙間 */
      flex-wrap: wrap;     /* 画面幅が狭いと折り返す */
    }
    .affiliate-links img {
      width: 150px;        /* 画像のサイズ調整 */
      height: auto;
      border: 0;
      display: block;
    }
	
	 /*END 温泉　アフィリエイトAD　右回り込み */#municipality_name {
	margin-bottom: 80px;
}
#section_tourist_spot {
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 30px;
}
.container .content #top50 .tourist_spot47 {
	clear: both;
}
/* oom-list エリア全体を横並びに */
/* oom-list エリア全体を横並びに */
/* -----------------------------
   TAOYA／温泉リスト 共通デザイン
----------------------------- */
/* ================================================
   ▼ 元のtravel-site（標準カテゴリ）
   ================================================ */
.travel-site-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.travel-site-list li {
  width: 156px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  text-align: center;
  transition: transform 0.2s ease;
  box-sizing: border-box;
}

.travel-site-list li:hover {
  transform: translateY(-4px);
}

.travel-site-list a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 8px;
  box-sizing: border-box;
}

/* 画像（100×45） */
.travel-site-list img {
  width: 100px;
  height: 45px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
}

/* テキスト */
.travel-site-list span {
  display: block;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.5px;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .travel-site-list li {
    width: calc(50% - 6px);
  }
}
/* ================================================
   ▲ 元のtravel-site（標準カテゴリ）
   ================================================ */

/* ================================================
   ▼ 元の oom-list（標準カテゴリ）
   ================================================ */
.oom-list {
  display: flex;              /* 横並び */
  flex-wrap: wrap;            /* 折り返し */
  gap: 10px;                  /* 間隔 */
  list-style: none;           /* ドット非表示 */
  padding: 0;
  margin: 0;
  justify-content: flex-start;
}

/* 元の oom-list 内の li */
.oom-list li {
  width: 175px;
  text-align: center;
  font-family: sans-serif;
  border: 1px solid #ccc;      /* 枠線 */
  border-radius: 8px;
  padding: 7px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;       /* 画像とテキストを縦並び */
  align-items: center;
  overflow: hidden;
  transition: transform 0.2s;
}

/* 元の画像ルール */
.oom-list li img {
  width: 150px;
  height: 100px;               /* 固定高さ */
  object-fit: cover;           /* 中央切り取り */
  display: block;
  margin-bottom: 5px;
}

/* 広告画像を非表示 */
.oom-list li img[src*="ad.jp.ap.valuecommerce.com"] {
  display: none;
}

/* テキスト処理 */
.oom-list li span {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}

/* ホバー時揺れ */
.oom-list li:hover {
  animation: shake 0.5s ease-in-out infinite;
}



/* ================================================
   ▼ 新規追加カテゴリ（Taoya / Premium / Standard）
   ================================================ */

/* 共通レイアウト（元の oom-list と同じ） */
.oom-list-taoya,
.oom-list-premium,
.oom-list-standard {
  display: flex;              
  flex-wrap: wrap;            
  gap: 10px;                  
  list-style: none;          
  padding: 0;
  margin: 0;
  justify-content: flex-start;
}

/* 各カテゴリの li 共通デザイン */
.oom-list-taoya li,
.oom-list-premium li,
.oom-list-standard li {
  width: 175px;
  text-align: center;
  font-family: sans-serif;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 7px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  transition: transform 0.2s;
}

/* 画像共通 */
.oom-list-taoya li img,
.oom-list-premium li img,
.oom-list-standard li img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  display: block;
  margin-bottom: 5px;
}

/* 広告非表示（3カテゴリ共通） */
.oom-list-taoya li img[src*="ad.jp.ap.valuecommerce.com"],
.oom-list-premium li img[src*="ad.jp.ap.valuecommerce.com"],
.oom-list-standard li img[src*="ad.jp.ap.valuecommerce.com"] {
  display: none;
}

/* テキスト共通 */
.oom-list-taoya li span,
.oom-list-premium li span,
.oom-list-standard li span {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}

/* ホバー揺れ共通 */
.oom-list-taoya li:hover,
.oom-list-premium li:hover,
.oom-list-standard li:hover {
  animation: shake 0.5s ease-in-out infinite;
}



/* ================================================
   ▼ 温泉一覧（onsen-list）も元のまま維持
   ================================================ */
.onsen-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: flex-start;
}

.onsen-list li {
  width: 175px;
  text-align: center;
  font-family: sans-serif;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 7px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  transition: transform 0.2s;
}

.onsen-list li img {
  width: 150px;
  height: 100px;
  object-fit: cover;
  display: block;
  margin-bottom: 5px;
}

.onsen-list li img[src*="ad.jp.ap.valuecommerce.com"] {
  display: none;
}

.onsen-list li span {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
}

.onsen-list li:hover {
  animation: shake 0.5s ease-in-out infinite;
}



/* ================================================
   ▼ アニメーション（揺れ）
   ================================================ */
@keyframes shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-3px); }
  50%  { transform: translateX(3px); }
  75%  { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}


/*END oom-list エリア全体を横並びに */
/*END oom-list エリア全体を横並びに */

a {
  display: inline-block; /* transform を効かせるために必要 */
  transition: transform 0.3s ease;
}

a:hover {
  transform: rotate(-2deg) translateY(-3px) rotate(2deg);
}
/* ＃jyaran_wakeariエリア全体を横並びに */
#jyaran_wakeari,
#jyaran   {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
}

#jyaran_wakeari li,
#jyaran li  {
  text-align: center;
  width: 120px; /* 画像サイズに合わせ調整可 */
}

#jyaran_wakeari li a,
#jyarani li a  {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  font-size: 14px;
}

#jyaran_wakeari li img ,
#jyaran li img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

#jyaran_wakeari li span,
#jyaran li span {
  margin-top: 4px;
  font-weight: bold;
}
/*END ＃jyaran_wakeariエリア全体を横並びに */

/* ================================
   #category_cwtv 全体設定
================================ */
/* ================================
   #category_cwtv 全体
================================ */
#category_cwtv {
  padding: 0 20px;
}

#category_cwtv .area-list {
  display: block;
}

/* ================================
   各都道府県ブロック（li）
   ★ 外枠が広がらない決定版
================================ */



#category_cwtv .area-list > li {
  display: inline-flex;          /* ← ここが決定打 */
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  width: fit-content;            /* 念押し */
  max-width: 100%;
  margin-bottom: 12px;
}

/* ================================
   見出し（h3）
================================ */
/* ================================
/* ================================
   li を中身サイズに固定（最重要）
================================ */
#category_cwtv .area-list > li {
  display: inline-flex;      /* flex-item から逃がす */
  align-self: flex-start;    /* 親flexのストレッチを解除 */
  gap: 10px;
  width: fit-content;        /* 中身サイズに固定 */
  max-width: 100%;
}

/* ================================
   見出し（h3）
================================ */
#category_cwtv .area-list > li > h3 {
  display: inline-block;
  width: max-content;        /* ← 文字幅にする決定打 */
  margin: 0;
  padding: 5px 10px;
  background-color: rgba(255,204,0,0.2);
  border-radius: 8px;
  white-space: nowrap;
}

/* ================================
   閉じている時：liごと文字幅にする
================================ */
#category_cwtv .area-list > li:not(.open) {
  width: fit-content;
}

/* ================================
   市町村リスト
================================ */
#category_cwtv .area-list > li > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ================================
   リンク
================================ */
#category_cwtv .area-list > li > ul > li > a {
  display: inline-block;
  padding: 3px 8px;
  text-decoration: none;
  border-radius: 4px;
}

/* END #category_cwtv */

/* 広告入りoffice-box/ */
/* 役所情報ブロック全体 */
#g_office {
	float: right;
	width: 370px;               /* ← 指定通り調整 */
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 15px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #f9f9f9;
	text-align: left;
	box-sizing: border-box;
	margin-top: 30px;
}

/* タイトル */
#g_office h3 {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

/* テキスト項目（画像行以外） */
#g_office ul li:not(.map-row) {
  margin-bottom: 5px;
  font-size: 14px;
  color: #555;
}

/* 内側の ul の余白リセット */
#g_office ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* 画像群の行（中央寄せ） */
#g_office ul li.map-row {
  text-align: center;
  margin-top: 8px;
  margin-bottom: 4px;
  padding: 0;
  list-style: none;
}

/* 画像群を横並びで整列 */
#g_office .map-links > * {
  display: inline-block;
  vertical-align: top;
  margin-right: 6px;
}

/* 画像サイズを84×42に固定 */
#g_office .map-links img {
  display: block;
  width: 72px !important;
  height: 36px !important;
  object-fit: contain;
  margin: 2px auto;
  border: 0;
}

/* 最後の余白除去 */
#g_office .map-links > *:last-child {
  margin-right: 0;
}

/* スマホ時自動調整（任意） */
@media (max-width: 400px) {
  #g_office {
    width: auto;
  }
}

/* ボックス全体の内側余白・枠などはそのまま */

/* END　広告入りoffice-box/ */
#municipality_name {
	margin-left: 15px;
}
.select {
	margin-bottom: 100px;
}.container .content #section #section1 {
	margin-bottom: 50px;
}

.newicon-list {
  list-style: none; /* デフォルトの丸印を消す */
  padding-left: 0;  /* 左の余白を消す */
}

.newicon-list li {
  position: relative;
  padding-left: 40px; /* 画像分のスペースを確保（31px + 余白） */
  margin-bottom: 8px;  /* 各リスト間の余白 */
}
/* ◆oom index◆ */
.newicon-list {
  list-style: none;   /* 丸印を消す */
  padding-left: 0;    /* UL の左余白をゼロに */
  margin-left: 0;     /* UL の外側マージンもゼロに */
}

.newicon-list li {
  margin-bottom: 8px; /* 各リスト間の余白 */
  padding-left: 0;    /* li の余白もゼロに */
}

.newicon-list li a {
  text-decoration: none; 
  display: inline-flex; 
  align-items: center; 
}

.newicon-list li a::after {
  content: "";
  display: inline-block;
  width: 31px;
  height: 23px;
  margin-left: 5px; /* 文字との間隔 */
  background-image: url('../img/jyalan_icon/infobox_icon_new.png'); /* 正しいパス */
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle; /* 文字と縦中央に揃える */
}

/* END◆oom index◆ */
#jyaran_wakeari {
	margin-bottom: 50px;
	margin-top: 20px;
}

.m_top_bottom60 {
	margin-top: 30px;
	margin-right: 0;
	margin-bottom: 30px;
	margin-left: 120;
}
#grouphotel_text {
	margin-left:15
	}
	
/* ◆grouphotel内◆ */	
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* チェックボックスで開閉 */
input.accordion-toggle {
  display: none; /* 非表示 */
}

input.accordion-toggle:checked + .accordion-header + .accordion-content {
  max-height: 1000px; /* 大きめにして全部表示 */
}

.accordion-header {
  cursor: pointer;
  padding: 5px 10px;
  background: #eee;
  border: 1px solid #ccc;
}/* END◆grouphotel内◆ */	


/*◆travel-site内◆ */	
#travel-site .travel-flex {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-left: 20px; /* ← ここに移動が正解 */
  	margin-bottom: 50px;

}

#travel-site img {
  width: 200px;
  height: auto;
}

.text-box {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.text-box p {
  margin: 0;
}

#travel-site p {
  margin: 0;
}

#travel-site h3 {
  margin-top: 15px;
  margin-bottom: 0;
  margin-left: 15px;
}
/* END◆travel-site内◆ */

.area-list h3,
.area-list li,
.area-list a {
	width: 180px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
	margin-left: 10px;
}

.area-list a {
  display: block;
}
.footer #footer_ad {
	margin-left: 15px;
}