@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;
}

/* サムネイルの各項目 */
.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;
  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;
}

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

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

/* リンクメニュー */
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. アクセスランキング
   ========================================================================== */

/* カード風のレイアウト構造（3桁対応版のベース） */
.ranking-card {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 12px 12px 48px; /* 左側の余白を広げました */
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* ビデオタグ */
.bg{
    text-align:center;
    margin:10px 0 30px;
}

.bg video{
    width:100%;
    max-height:500px;
    display:block;
    position:relative;
}

/* ==========================================================================
   8. メニューのカスタマイズ
   ========================================================================== */
/* グローバルメニューのフォントサイズと隙間の調整 */
.navi-in a {
  font-size: 16px !important;
  padding: 10px 15px !important;
}

/* ドロップダウン共通（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階層目（県名一覧）をドロップダウンの枠内に自動で収める */
.navi-in ul li li ul {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  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;
}

/* マウスホバー時の高さ調整 */
.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. その他設定 (人気記事ランキング 2列表示)
   ========================================================================== */
.wpp-list2{
    margin-top:0 !important;
    margin-bottom: 20px !important;
    padding-left:0 !important;
    list-style:none;
    counter-reset:no;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:space-between;
}

.wpp-list2 li{
    position:relative;
    width:48% !important;
    margin-bottom:20px;
    box-sizing:border-box;
    display:flex;
    align-items:flex-start;
    gap:10px;
}

/* 順位バッジ */
.wpp-list2 li:before{
    content:counter(no);
    counter-increment:no;
    position:absolute;
    top:-6px;
    left:-6px;
    z-index:10;
    width:30px;
    height:30px;
    line-height:30px;
    background:#303436;
    color:#fff;
    text-align:center;
    font-size:12px;
    font-weight:bold;
    border-radius:3px;
}

/* サムネイル */
.wpp-list2 li .thumb-wrap{
    flex-shrink:0;
}

.wpp-list2 li .thumb-wrap img{
    width:100px;
    height:100px;
    display:block;
    object-fit:cover;
}

/* タイトルエリア */
.wpp-list2 li .text-wrap{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.wpp-list2 li .text-wrap span{
    font-size:14px;
    line-height:1.4;
}

.wpp-list2 li .views-text{
    margin-top:5px;
    font-size:12px;
    font-weight:bold;
}

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

/* ==========================================================================
   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;
line-height: 1.7 !important;
color: #333333 !important;
}
/* --- スマホ用ギャラリー調整 --- */
.photo-main-container {
margin: 0 0 10px 0;
}
.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 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;
}
.bg{
margin:10px 0 20px;
}
.bg video{
width:100%;
height:auto;
max-height:70vh;
object-fit:contain;
}
}