@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
*/

/* Googleフォント（@import は必ずヘッダーコメントの直後・他のルールより前に置く） */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* ===== エウレカ天気表（固定ページ用） ===== */
#eureka-weather{--bg: #DDEFD3; --panel: #F4FBF1; --panel-alt: #DCEFD3; --line: #B5D7A6; --text: #1f2e1c; --text-dim: #4a6544; --text-faint: #7d977a; --ice: #0284c7; --ice-deep: #0369a1; --ember: #c2410c; --violet: #7e22ce; --fog: #4d6a5a; --alert: #dc2626; --alert-deep: #b91c1c; --paper: #F7FCF4; --paper-shadow: #CFE5C4; --ink: #232320; --ink-soft: #5B5A52; --stamp: #B8402E; --stamp-soft: #E7CFC8; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --f-display: "Orbitron", sans-serif; --f-body: "Space Grotesk", "Hiragino Kaku Gothic ProN", sans-serif; --f-mono: "Yu Gothic UI", "IBM Plex Mono", "Courier New", monospace;}
#eureka-weather{font-family: var(--f-body); background: radial-gradient(circle at 18% -10%, #F3FAEE 0%, var(--bg) 45%); color: var(--text); margin: 0; padding: 6px 8px 16px; font-size: 13px; line-height: 1.25; -webkit-font-smoothing: antialiased;}
#eureka-weather .meteor-logo{font-family: var(--f-display); font-weight: 900; font-size: 17px; letter-spacing: 0.5px; background: linear-gradient(180deg, #aee6ff 0%, var(--ice) 45%, var(--ice-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 1px 6px rgba(47, 143, 192, 0.35); flex-shrink: 0; white-space: nowrap;}
#eureka-weather button{padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; font-size: 10px; cursor: pointer; background: var(--panel-alt); color: var(--text-dim); height: 18px; line-height: 16px; flex-shrink: 0; font-weight: 600; font-family: var(--f-body); transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;}
#eureka-weather button:hover{color: var(--text); border-color: var(--ice-deep); background: #C9E5BA;}
#eureka-weather button:active{transform: scale(.96);}
#eureka-weather button:disabled{opacity: 0.4; cursor: default; transform: none;}
#eureka-weather button:focus-visible{outline: 2px solid var(--ice); outline-offset: 1px;}
#eureka-weather .container{width: 100%; max-width: 1100px; margin: 10px auto 0; box-sizing: border-box;}
#eureka-weather .controls{background: var(--panel); padding: 5px 6px; margin-bottom: 6px; border-radius: var(--r-lg); border: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px;}
#eureka-weather .checkbox-group{display: flex; flex-wrap: wrap; gap: 4px 6px;}
#eureka-weather .checkbox-group .zone-toggle-title{display: flex; align-items: center; font-size: 12px; white-space: nowrap; color: var(--text-dim); font-weight: 600;}
#eureka-weather .checkbox-group label{display: flex; align-items: center; gap: 2px; font-size: 12px; cursor: pointer; white-space: nowrap; color: var(--text-dim); font-weight: 600;}
#eureka-weather .checkbox-group input[type="checkbox"]{appearance: none; -webkit-appearance: none; width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--line); background: var(--panel-alt); position: relative; cursor: pointer; margin: 0;}
#eureka-weather .checkbox-group input[type="checkbox"]:checked{background: #2f8f3e; border-color: #1f6f2d;}
#eureka-weather .checkbox-group input[type="checkbox"]:checked::before{content: ""; position: absolute; inset: 2px; background: #fff; border-radius: 1px;}
#eureka-weather .info{font-size: 11px; color: var(--text-dim); text-align: right; font-family: var(--f-mono); background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 0;}
#eureka-weather .weather-tables-wrapper{display: flex; flex-wrap: nowrap; gap: 8px; width: 100%;}
#eureka-weather .weather-table-container{flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;}
#eureka-weather #weather-tip{position: fixed; z-index: 100000; display: none; pointer-events: none; white-space: nowrap; background: var(--panel); border: 2px solid var(--text); border-radius: var(--r-md); padding: 1px 10px; font-size: 15.4px; font-weight: bold; line-height: 1.3; color: var(--text); box-shadow: 0 8px 20px -8px rgba(0,0,0,0.55);}
#eureka-weather #container-hydatos,#eureka-weather #container-anemos{flex: 0.5 1 0%;}
@media screen and (max-width: 1000px){#eureka-weather .weather-tables-wrapper{gap: 3px; flex-wrap: nowrap;}
#eureka-weather .weather-tables-wrapper th{font-size: 8px; letter-spacing: 0; padding: 3px 0;}
#eureka-weather .weather-tables-wrapper .zone-header{font-size: 9px; letter-spacing: 0; padding: 3px 1px;}
#eureka-weather .weather-tables-wrapper td{padding: 4px 0;}
#eureka-weather .weather-tables-wrapper .time-text{font-size: 7.5px; white-space: normal; line-height: 1.15;}
#eureka-weather .weather-tables-wrapper .weather-text{font-size: 9px; white-space: normal;}
#eureka-weather #container-hydatos th,#eureka-weather #container-anemos th{word-break: normal;}
#eureka-weather #weather-tip{font-size: 12.6px;}}
#eureka-weather table{border-collapse: collapse; width: 100%; background: var(--panel); font-size: 12px; table-layout: fixed;}
#eureka-weather th,#eureka-weather td{border: 1px solid var(--line); padding: 4px 2px; text-align: center; word-break: break-all;}
#eureka-weather th{background: var(--panel-alt); font-weight: 600; color: var(--text-dim); font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;}
#eureka-weather .zone-header{background: linear-gradient(135deg, #B9E0A0, #8FCB72); color: var(--text); font-size: 12px; padding: 4px 4px; font-family: var(--f-display); letter-spacing: 1px; font-weight: 700;}
/* 縞模様（1行おきの背景色）を無効化：全セルを同じ色にする */
#eureka-weather .weather-tables-wrapper tbody td{background-color: var(--panel);}
#eureka-weather .cell-blizzard{background-color: #e0f2fe !important;}
#eureka-weather .cell-gales-night{background-color: #a9dd8c !important;}
#eureka-weather .cell-fog{background-color: #d1d5db !important;}
#eureka-weather .cell-heatwaves{background-color: rgba(255, 154, 90, 0.14) !important;}
#eureka-weather .cell-thunder{background-color: rgba(185, 138, 240, 0.14) !important;}
#eureka-weather .current-cell{background-color: rgba(255, 107, 94, 0.18) !important; border: 1px solid var(--alert) !important; box-shadow: inset 0 0 0 1px var(--alert); font-weight: bold;}
#eureka-weather .weather-blizzard{color: var(--ice); font-weight: bold;}
#eureka-weather .weather-heatwaves{color: var(--ember); font-weight: bold;}
#eureka-weather .weather-thunder{color: var(--violet); font-weight: bold;}
#eureka-weather .weather-fog{color: var(--fog); font-weight: bold;}
#eureka-weather .weather-text.weather-hydatos-thunder{color: #0ea5e9; font-weight: bold; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000; transition: transform .1s ease;}
#eureka-weather .weather-tables-wrapper .weather-text{transition: transform .1s ease;}
#eureka-weather .weather-tables-wrapper td:hover .weather-text{transform: scale(1.4); font-weight: bold;}
#eureka-weather .weather-text.weather-hydatos-gloom{color: #a855f7; font-weight: bold; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000;}
#eureka-weather .weather-text.weather-hydatos-snow{color: #fff; font-weight: bold; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000, 1px 0 0 #000;}
#eureka-weather .time-text{display: block; font-size: 9.5px; color: #000000; margin-bottom: 2px; white-space: nowrap; font-family: var(--f-mono); line-height: 1.3; font-weight: 600;}
#eureka-weather .weather-text{display: block; font-size: 11px; line-height: 1.25; white-space: nowrap; color: var(--text-dim);}
#eureka-weather .weather-tables-wrapper tbody td{cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: rgba(125, 211, 252, 0.15); user-select: none; transition: filter .1s ease;}
#eureka-weather .weather-tables-wrapper tbody td:hover{filter: brightness(0.95);}
#eureka-weather .weather-tables-wrapper tbody td:active{filter: brightness(0.88);}
#eureka-weather .popup-overlay{position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(6,9,14,0.72); display: flex; align-items: center; justify-content: center; z-index: 99999;}
#eureka-weather .popup-overlay.hidden{display: none;}
#eureka-weather .popup-box{background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; width: 90%; max-width: 500px; max-height: 80vh; overflow-y: auto; overflow-x: auto; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7); color: var(--text);}
#eureka-weather .popup-header{display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: bold; font-size: 14px; font-family: var(--f-display); letter-spacing: .03em;}
#eureka-weather .popup-header button{height: 24px; min-width: 28px; font-size: 14px; line-height: 22px; padding: 0 6px; touch-action: manipulation; border-radius: var(--r-sm);}
#eureka-weather .popup-table{width: 100%; border-collapse: collapse; font-size: 11px;}
#eureka-weather .popup-table th,#eureka-weather .popup-table td{border: 1px solid var(--line); padding: 4px 6px; text-align: center; white-space: nowrap; color: var(--text-dim);}
#eureka-weather .popup-table th{background: var(--panel-alt); color: var(--text); font-family: var(--f-mono);}
#eureka-weather .hidden{display: none !important;}
#eureka-weather .info-box{display: inline-block; box-sizing: border-box; text-align: center; font-variant-numeric: tabular-nums; flex-shrink: 0; padding: 2px 6px; background: var(--panel); border: 1px solid #2f8f3e; border-radius: var(--r-md); color: var(--text); font-weight: 600; white-space: nowrap;}
#eureka-weather .site-title{margin: 0 0 6px;}
#eureka-weather{box-sizing:border-box;border-radius:8px;max-width:1100px;margin:0 auto;}
/* ===== ここまで エウレカ天気表 ===== */

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* サイトタイトルのみ画面上で非表示（SEO用h1等のHTML構造は保持） */
.header-site-logo-text,
.site-name-text {
  display: none !important;
}
/* ヘッダー画像や背景画像の最大高さを150pxに厳格に制限する */
.header,
.header-in {
  max-height: 150px !important;
  height: 150px !important;
}

/* ヘッダーの背景画像・ロゴ画像のサイズを強制的に150px以内に収める */
.header-bg-image,
.header-container img,
.header-logo img,
.site-header-image img {
  max-height: 150px !important;
  height: auto !important;
  object-fit: contain !important; /* 画像が変形せずに150px内に収まるようにする */
}
/* 固定ページのタイトルを非表示にする */
.page .entry-title {
  display: none !important;
}

/* メインコンテンツ上部の余白・パディングを削って上に詰める */
.page .article {
  padding-top: 0 !important;
}

.page .content {
  margin-top: 0 !important;
}

/* パンくずリストやSNSボタンがタイトル跡に残る場合の余白調整 */
.page .entry-header {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* ==========================================
   固定ページの上部余白を一括で削除して最上部に詰める
   ========================================== */

/* 1. ヘッダー下の余白・コンテンツ領域全体の上のスキマをカット */
.page .content,
.page .main,
.page .site-large-packet {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 2. 本文カード（記事の外枠）の上の余白・背景を詰める */
.page .article {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3. タイトル表示エリア・パンくずリストの余白をカット */
.page .entry-header {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 4. 本文エリアの一番最初の要素（見出しや段落）の上の無駄なスキマをカット */
.page .entry-content > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}