@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* リンク文字関係 */
a { text-decoration: none; }
a:hover { font-weight:bolder; }

/* ロゴ（ヘッダーインナー）を左寄せにする */
.header-in {
  display: block !important;
  text-align: left !important;
}

/* ロゴの文字や画像自体を左端に寄せる */
.logo-header {
  float: left;
  margin-left:  50px !important;
}

/* メニューへの干渉を防ぐためのクリア処理 */
.navi-in {
  clear: both;
}

/* ==========================================================================
   1. 滝の情報テーブル（PC・基本設定）
   ========================================================================== */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.info-table th,
.info-table td {
  padding: 8px;
  vertical-align: top;
  border-bottom: 1px solid #ddd;
}

.info-table th {
  width: 140px;          /* 左側の見出しを固定幅にする */
  background: #f7f7f7;   /* 見出しに薄い背景色 */
  text-align: center;
  font-weight: bold;
}

.info-table td {
  line-height: 1.6;
}

/* ==========================================================================
   2. 写真ギャラリー（PC・基本設定）
   ========================================================================== */
/* ギャラリー全体の枠 */
.photo-gallery-wrap {
    max-width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

/* メイン写真を囲む段落（pタグ） */
.photo-main-container {
    margin: 0 0 15px 0;
    text-align: center;
}

/* メイン写真本体 */
.photo-main-container .photo {
    max-width: 100%;
    max-height: 680px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* サムネイル一覧（横スクロール） */
.thumb-list {
  display: flex;
  overflow-x: auto;
  gap: 12px;
  margin: 0;
  padding: 5px 0 15px 0;
  list-style: none;
	/* Firefox 専用（赤字は仕方ない） */
  -webkit-overflow-scrolling: touch;
	scrollbar-width: auto; /* 記述ミス修正：scroll-bar-width → scrollbar-width */
}

/* サムネイルの各項目 */
.thumb-item {
  flex-shrink: 0;
  width: 150px;
  height: 200px;
  text-align: center;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

/* サムネイル画像 */
.thumb-img {
  width: 150px;
  height: 150px; /* 高さを200pxの枠いっぱいに使うよう最適化（120pxから変更） */
  object-fit: contain;  /* 縦横比を維持したまま枠内に完全に収める */
  object-position: center center; /* 上下左右中央に配置 */
  background-color: #ffffff; /* 隙間の余白を白にする */
  border-radius: 3px;
  cursor: pointer;
  display: block;
  margin-bottom: 3px;	
}

/* ==========================================================================
   3. 外部埋め込み（マップなど）
   ========================================================================== */
/* iframeの暴走を完全に防ぐ */
.iframe-content {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.iframe-content iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: 540px;
  display: block;
}

/* ==========================================================================
   4. 訪問した滝の記録のアコーディオンボックス
   ========================================================================== */
/* 独自アコーディオン */
.my-accordion {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px 0;
}

.my-accordion-title {
  background: #f5f5f5;
  padding: 10px;
  cursor: pointer;
  font-weight: bold;
}

.my-accordion-content {
  display: none;
  padding: 10px;
  border-top: 1px solid #ccc;
}

/* テーブルが崩れないように */
.my-accordion-content table {
  width: 100%;
  table-layout: auto;
  overflow-x: auto;
  display: block;
}

/* ==========================================================================
   5. 重要　　写真のないリストは非表示
   ========================================================================== */
/* 画像のURLが空欄、またはスペースのみのサムネイル枠(li)を丸ごと非表示にする */
.thumb-list .thumb-item:has(img[src=""]),
.thumb-list .thumb-item:has(img[src=" "]),
.thumb-list .thumb-item:has(img:not([src])) {
    display: none !important;
}

/* ==========================================================================
   6. 滝テーブル
   ========================================================================== */

/* 各テーブル最初の表記ボックス */
table.box {
	margin:20px auto;
	width: max-content;
	text-align:left;
	font-size:15px
	}
.box td{
	padding: 3px 10px 3px 10px;
}

/* 全国の滝テーブルリスト */
table.waterfall-table {
	text-align:center;
	font-size:15px
}
.waterfall-table th
.waterfall-table td{
	padding: 1px 5px 1px 5px;
}

/* 日本の滝百選エリアリスト */
table.area {
	margin:auto;
	width:80%;
	text-align:center;
	table-layout: fixed;
	font-size:medium
}
.area th
.area td{
	padding: 1px 10px 1px 10px;
}

table.ranking {
	margin:20px auto;
	width: max-content;
	text-align:center;
	font-size:15px
	}
	
.box td{
	padding: 3px 10px 3px 10px;
}

/* お気に入りの滝テーブル */
table.mfw {
	margin:auto;
	table-layout: fixed;
}
.mfw th
.mfw td

/* 訪問した滝テーブル */
table.history {
	margin:auto;
	table-layout: fixed;
	text-align:center;
}
.history th
.history td

/* 全国の滝テーブル */
table.area {
	margin:auto;
	text-align:center;
	table-layout: fixed;
}
.area th
.area td

/* リンクメニュー */
table.linkmenu {
	margin:auto;
	table-layout: fixed;
	border-collapse: separate;
	border: 0px solid black;
}
.linkmenu th{
	border:0px solid #000000;
	background-color:transparent;
	border-radius: 3px;
	padding-left: 8px;
	width: 240px;
	text-align: center;
}
.linkmenu td{
	border:0px solid #000000;
	background-color:#ffffff;
	border-radius: 3px;
	padding-left: 8px;
	width: 620px;
	text-align: left;
}

/* プロフィール */
table.profile {
	margin:auto;
	border-collapse: separate;
	border: 0px solid black;
}
.profile th{
	border:0px;
	width: 180px;
	text-align:left;
}
.profile td{
	border:0px;
	width: 680px;
	text-align:left;
}

/* 各サイズ */
.a {	width: 160px;}
.b {	width: 140px;}
.c {	width: 210px;}
.d {	width: 70px;}
.e {	width: 80px;}
.f {	width: 200px;}
.g {	width: 50px;}
.h {	width: 240px;}
.i {	width: 110px;}
.j {	width: 110px;}
.k {	width: 150px;}
.l {	width: 420px;}
.m {	width: 180px;}
.n {	width: 50px; font-size: small;}
.o {	width: 120px;}
.p {	width: 360px;}
.q {	width: 80px;}
.r {	width: 60px; font-size: small;}
.s {	width: 120px;}
.t {	width: 80px;}
.u {	width: 140px;}
.v {	width: 160px;}
.w {	width: 260px;}
.x {	width: 110px;}
.y {	width: 70px;}

/* ==========================================================================
   7. アクセスランキング
   ========================================================================== */

/* リスト全体のスタイル設定（Flexboxでレスポンシブ化） */
.wpp-list2 {
  margin: 20px 0 !important;
  padding-left: 0 !important;
  list-style: none;
  counter-reset: no;
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* アイテム同士の隙間 */
}

/* 各リスト項目の横幅（PCは2列、スマホは1列に自動変化） */
.wpp-list2 li {
  position: relative;
  width: calc(50% - 8px); /* PCでは2列 */
  box-sizing: border-box;
}

@media (max-width: 600px) {
  .wpp-list2 li {
    width: 100%; /* スマホでは1列 */
  }
}

/* カード風のレイアウト構造 */
.ranking-card {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 12px 12px 45px; /* 左側に順位バッジ用の余白を確保 */
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* 順位バッジ（数字）の配置と装飾（3桁対応版） */
.wpp-list2 li:before {
  content: counter(no);
  counter-increment: no;
  position: absolute;
  left: 8px;              /* 左側の位置を微調整 */
  top: 12px;
  z-index: 2;
  color: white;
  background-color: #303436;
  text-align: center;
  font-size: 11px;        /* 3桁が入るように文字を少しだけ小さく */
  font-weight: bold;
  line-height: 28px;      /* 縦中央に揃える調整 */
  width: 32px;            /* 横幅を26pxから32pxに広げました */
  height: 28px;           /* 高さを26pxから28pxに広げました */
  border-radius: 4px;
  box-sizing: border-box; /* サイズ計算を安定させます */
}

/* カード側の左余白もバッジに合わせて微調整 */
.ranking-card {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 12px 12px 48px; /* 左側の余白を45pxから48pxに広げました */
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/*ビデオタグ*/
.bg{
position: relative;
	width: 100%;
	padding-bottom: 56.25%;
}
.video{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin-top: 10px;
    margin-bottom: 10px;
}





/* ==========================================================================
   8. メニューのカスタマイズ
   ========================================================================== */
/* グローバルメニューのフォントサイズと隙間の調整 */
.navi-in a {
  font-size: 16px !important;    /* 文字サイズを16pxから15pxに1px縮小 */
  padding: 10px 15px !important; /* ボタン内の左右の隙間を詰める（標準より狭く設定） */
}


/* 2. ドロップダウン共通（2階層目・3階層目）の調整 */
.navi-in ul li li {
  height: auto !important;
  line-height: 1.2 !important;
  position: relative !important;   /* 【重要】右側に開くメニューの基準点にする */
}

.navi-in ul li li a {
  font-size: 16px !important;
  padding: 8px 12px !important;   /* 上下のマージンを極小に */
  line-height: 1.2 !important;
  min-height: auto !important;
}

/* 3. 【最終解決】3階層目（県名一覧）をドロップダウンの枠内に自動で収める */
.navi-in ul li li ul {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  
  /* 【ここを修正】100% から 98%（または95%）に変更して、隙間を完全にゼロにします */
  left: 98% !important; 
  
  margin: 0 !important;
  padding: 0 !important;
}

/* 九州・沖縄など、下方の項目にマウスが乗ったときだけ自動で上向きに開かせる */
.navi-in ul li li:nth-last-child(-n+3) ul {
  top: auto !important;
  bottom: 0 !important;
}

/* 4. マウスホバー時の高さ調整 */
.navi-in ul li li a:hover {
  line-height: 1.2 !important;
}

/* ドロップダウンメニューの文字が長いときに見切れるのを防ぐ */
.navi-in ul li li a {
  white-space: nowrap !important; /* 文字を途中で絶対に改行させない */
}

.navi-in ul li ul {
  width: auto !important;         /* 枠の横幅を固定せず、文字の長さに合わせて自動（オート）にする */
  min-width: 180px !important;    /* あまりに文字が短いときのために最低限の横幅はキープ */
}

/* ==========================================================================
   8. マップボタンはスマホのみ表示
   ========================================================================== */
.map-card {	display:none;}

/* ==========================================================================
   9. その他設定
   ========================================================================== */









/* ==========================================================================
   10. レスポンシブデザイン用のメディアクエリ
   ========================================================================== */
/* 1023px以下 */
@media screen and (max-width: 1023px){
  /* 必要ならばここにコードを書く */
}

/* 834px以下 */
@media screen and (max-width: 834px){
  /* 必要ならばここにコードを書く */
}
/* 📱 スマホ表示（画面幅480px以下） */
@media screen and (max-width: 480px) {
  
  /* --- 滝の情報テーブルのスマホ最適化（画面幅に収めて縦に並べる） --- */
  .info-table {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px;
  }

  .info-table tbody,
  .info-table tr,
  .info-table th,
  .info-table td {
    display: block !important; /* すべて要素をブロック化して縦一列に並べる */
    width: 100% !important;    /* 横幅を画面いっぱいに広げる */
    box-sizing: border-box;
  }

  .info-table tr {
    border-bottom: 1px solid #ddd !important;
    padding: 8px 0;
  }
  
  .info-table th {
    background: #f7f7f7;   /* 見出しに背景色をつける */
    text-align: left;      /* スマホでは左寄せが見やすい */
    font-weight: bold;
    padding: 6px 8px !important;
    border-bottom: none !important;
  }
  
  .info-table td {
    padding: 8px 8px 12px 8px !important; /* 下側の余白を少し広げて次の項目とメリハリをつける */
    border-bottom: none !important;
    border-right: none !important;
    white-space: normal !important;
    
    /* 💡 スマホのフォントサイズと読みやすさの調整 */
    font-size: 15px !important;       /* ★文字を少し大きく（元の約1.2倍） */
    line-height: 1.7 !important;     /* ★行間を少し広げて、長文もすっきり読めるように */
    color: #333333 !important;       /* ★文字色を少し濃くして視認性をアップ */
  }

	
  /* --- スマホ用ギャラリー調整 --- */
  /* メイン写真を囲む段落の余白を詰める */
  .photo-main-container {
    margin: 0 0 10px 0;
  }

  /* スマホでのメイン写真の最大高さを制限（380px） */
  .photo-main-container .photo {
    max-height: 380px;
  }
	
/* 各テーブル最初の表記ボックス */
		
table.waterfall-table {
    display: block !important;
    width: 100% !important;
	padding-top: 15px;
	text-align:center;
	table-layout: fixed;
	font-size:15px
}
.waterfall-table th{
	text-align:center;
	border-radius: 3px;
	}
.waterfall-table td{
	text-align:center;
	border-radius: 3px;
	padding: 1px 10px 1px 10px;
}
	
	/* 日本の滝百選エリアリスト */
table.area {
	margin:auto;
	display: block !important;
    width: 100% !important;
	text-align:center;
	table-layout: fixed;
}
.area th{
}
.area td{
	padding: 1px 10px 1px 10px;
}	
			
	
table.ranking {
	width: max-content;
	text-align:center;
	font-size:15px
	}
.box td{
	padding: 3px 10px 3px 10px;
}


/* お気に入りの滝テーブル */
table.mfw {
    display: block !important; /* すべて要素をブロック化して縦一列に並べる */
    width: 100% !important;    /* 横幅を画面いっぱいに広げる */
}
.mfw th{
	border-radius: 3px;
	padding-left: 8px;
	text-align: left;
}
.mfw td{
	border-radius: 3px;
	padding-left: 8px;
	text-align: left;
}	
	
	
	/* スマホ用各サイズ */
.a {	width: 120px;}
.b {	width: 100px;}
.c {	display:none;}
.d {	width: 70px;}
.e {	width: 60px;}
.f {	display:none;}
.g {	width: 45px; font-size: small;}
.h {	display:none;}
.i {	display:none;}
.j {	width:100px;}
.k {	display:none;}
.n {	display:none;}
.o {	display:none;}
.p {	width: 140px;}
.q {	display:none;}
.r {	width: 45px;}
.s {	width: 100px;}
.t {	width: 80px;}
.u {	width: 120px;}
.v {	display:none;}
.w {	display:none;}
.x {	width: 80px;}
.y {	width: 45px; font-size: small;}
		
.none {	display:none;}
		
		
	/* マップ表示のサイズ */
.iframe-content {
    position: relative;
    width: 100%;
    padding: 70% 0 0 0;
}

.iframe-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	}
	
	
	/* スマホ用マップボタン */
.map-card {
  background: #ffffff;
  border: 2px solid #2b7cff;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  width: 75%;
  max-width: 300px;
  margin: 10px auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  transition: 0.2s;
}
.map-card:hover {
  background: #f0f6ff;
  transform: translateY(-2px);
}
.map-icon {
  font-size: 20px;
}
.map-text {
  font-size: 15px;
  font-weight: bold;
  color: #2b7cff;
}
		
}