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

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

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

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ==========================================================================
   溝口伸一総合研究所  デザインC（白書風）  for Cocoon 2.9.x  (skin: なし)
   貼り付け先: Cocoon Child の style.css の末尾（既存の @media の下）。
   外観 → テーマファイルエディター → Cocoon Child → style.css
   ※ カテゴリーIDはCSSに書かない（CSSカウンターと nth-child で第N部門を付ける）。
   ※ 列の並び（1:テーマパーク 2:VR 3:餃子 4:若者言語）を
      Cocoon設定 → インデックス →「カテゴリー順の変更」で固定する前提。
   ========================================================================== */

/* ---------- 0. 変数・フォント ---------- */
:root{
  --mz-navy:#1a2f57;
  --mz-ink:#161c28;
  --mz-gray:#4a5568;
  --mz-mute:#5a6477;
  --mz-rule:#8c96a8;
  --mz-tint:#f3f5f9;
  --mz-serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif CJK JP","MS PMincho",serif;
  --mz-sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans CJK JP","Meiryo",sans-serif;
  --mz-wrap:1024px;
}
/* Cocoonの .ff-hiragino 等(0,1,0)に勝つため html body.body(0,1,2) */
html body.body{
  font-family:var(--mz-serif);
  color:var(--mz-ink);
  background:#fff;
  line-height:1.8;
}
a{color:var(--mz-navy)}

/* ---------- 1. 全体の枠（白地・枠線なし） ---------- */
.content{margin-top:0}
.main,.sidebar{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
/* カラム設定で余白を10pxにしてあるので、見た目の余白は0にそろえる */
.main{padding:0}
.sidebar{padding:0}
.content-in{padding-top:30px}

/* ---------- 2. ヘッダー（上の細い帯 + 大きな社名 + 二重線） ---------- */
.header-container{
  background:#fff;
  color:var(--mz-ink);
  box-shadow:none;
}
/* 上の帯 */
.header-container::before{
  content:"研究・調査レポート　MIZO001.COM　／　現場主義";
  display:block;
  width:min(var(--mz-wrap), 100% - 32px);
  margin:0 auto;
  padding:14px 0;
  font-family:var(--mz-sans);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--mz-gray);
  border-bottom:1px solid var(--mz-ink);
}
.header-container-in{background:transparent}
.header{background:transparent;color:inherit}
.header-in{
  align-items:flex-start;          /* 左寄せ */
  padding:46px 0 26px;
  border-bottom:6px double var(--mz-navy);
}
.header-in .logo,
.header-in .tagline{text-align:left;margin-left:0;margin-right:0}
.logo-text{padding:0}
.logo-header .site-name-text-link,
.logo-header a.site-name{padding:0;color:var(--mz-navy)}
.site-name-text{
  font-family:var(--mz-serif);
  font-size:76px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--mz-navy);
}
/* キャッチフレーズ（設定でヘッダーボトム＝社名の下に出す） */
.tagline{
  margin:16px 0 0;
  font-family:var(--mz-serif);
  font-size:20px;
  font-weight:600;
  color:var(--mz-ink);
}

/* ---------- 3. グローバルナビ（01〜 の番号つき・文字幅メニュー） ---------- */
.navi{
  background:#fff;
  border-bottom:1px solid var(--mz-ink);
  box-shadow:none;
}
.navi-in>ul.menu-pc{
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:0 28px;
  counter-reset:mznav;
}
.navi-in>ul.menu-pc>li{
  counter-increment:mznav;
  width:auto;height:auto;
  background:transparent;
}
.navi-in>ul.menu-pc>li>a{
  padding:12px 0;
  color:var(--mz-navy);
  font-family:var(--mz-sans);
  font-size:13.5px;
  font-weight:600;
  background:transparent;
}
.navi-in>ul.menu-pc>li>a:hover{background:transparent;color:var(--mz-ink)}
.navi-in>ul.menu-pc>li>a .item-label{width:auto}
.navi-in>ul.menu-pc>li>a .item-label::before{
  content:counter(mznav,decimal-leading-zero);
  margin-right:6px;
  font-weight:400;
  color:#9aa3b2;
}
.navi-in>ul.menu-pc>li.menu-item-has-children>a{padding-right:14px}
/* プルダウン */
.navi-in>ul .sub-menu{
  background:#fff;
  border:1px solid var(--mz-ink);
  box-shadow:none;
}
.navi-in>ul .sub-menu li{width:auto;min-width:200px;height:auto}
.navi-in>ul .sub-menu a{
  padding:9px 14px;
  color:var(--mz-navy);
  font-family:var(--mz-sans);
  font-size:13px;
  background:#fff;
}
.navi-in>ul .sub-menu a:hover{background:var(--mz-tint)}

/* ---------- 4. アピールエリア（フロントページのみ。左の太い線 + 薄い灰地） ---------- */
.appeal{
  background:transparent !important;      /* 設定のエリア背景色を無効化 */
  background-image:none !important;
  min-height:0;
}
.appeal-in{
  min-height:0;
  padding:0;
  display:block;
  width:min(var(--mz-wrap), 100% - 32px);
  margin:34px auto 8px;
}
.appeal-content{
  max-width:none;
  margin:0;
  padding:26px 30px;
  background:var(--mz-tint);
  border-left:8px solid var(--mz-navy);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px 30px;
  text-align:left;
  flex-wrap:wrap;
}
.appeal-content .appeal-title{
  flex:1 1 100%;
  margin:0;
  font-family:var(--mz-serif);
  font-size:22px;
  line-height:1.5;
  font-weight:700;
  color:var(--mz-navy);
}
.appeal-content .appeal-message{
  flex:1 1 60%;
  margin:0;
  font-family:var(--mz-sans);
  font-size:13.5px;
  color:#3a4558;
  line-height:1.8;
}
.appeal-content .appeal-button{
  flex:none;
  margin:0;
  padding:4px 2px;
  background:transparent !important;      /* 設定のボタン色(インライン)を無効化 */
  color:var(--mz-navy) !important;
  border:0;
  border-bottom:2px solid var(--mz-navy);
  border-radius:0;
  font-family:var(--mz-sans);
  font-size:15px;
  font-weight:700;
  box-shadow:none;
}
.appeal-content .appeal-button::after{content:" ›"}
.appeal-content .appeal-button:hover{opacity:.7}

/* ---------- 5. トップページ：見出し（共通） ---------- */
.list-title{
  margin:0 0 6px;
  padding:0;
  text-align:left;
  font-size:19px;
  line-height:1.5;
}
.list-title-in{
  display:flex;
  align-items:baseline;
  gap:14px;
  width:100%;
  padding:8px 0;
  white-space:normal;
  border-top:3px solid var(--mz-navy);
  border-bottom:1px solid var(--mz-ink);
  font-family:var(--mz-serif);
  font-weight:700;
  color:var(--mz-navy);
}
.list-title-in::before,
.list-title-in::after{                     /* Cocoon標準の飾り線(絶対配置・幅55px)を解除 */
  position:static;
  top:auto;left:auto;right:auto;
  margin:0;
  width:auto;height:auto;
  background:none;
  border:0;
  transform:none;
}
.list-title-in::after{display:none}
.list-title-in::before{                    /* 番号ラベル */
  flex:none;
  font-family:var(--mz-sans);
  font-size:12px;
  font-weight:400;
  letter-spacing:.1em;
  color:#7a8497;
}

/* 新着 */
.list-new-entries{margin-bottom:34px}
.list-new-entries-title .list-title-in{font-size:0}   /* 元の文言「新着記事」は隠し、下で差し替え */
.list-new-entries-title .list-title-in::before{content:"新着"}
.list-new-entries-title .list-title-in::after{
  display:block;
  content:"最新の調査レポート・記事";
  font-size:19px;
  letter-spacing:0;
  color:var(--mz-navy);
}

/* ---------- 6. トップページ：部門（2カラム）と部門番号 ---------- */
.list-columns{
  counter-reset:mzdept;
  column-gap:38px;
  row-gap:0;
}
.list-columns.fpt-2-columns>*{width:calc((100% - 38px) / 2)}
.list-column{
  counter-increment:mzdept;
  margin-bottom:34px;
}
.list-columns .list-title-in::before{content:"第" counter(mzdept) "部門"}
/* 部門の説明文（並び順は 1:テーマパーク 2:VR 3:餃子 4:若者言語） */
.list-column .list-title::after{
  display:block;
  margin:4px 0 6px;
  font-size:13px;
  font-style:italic;
  font-weight:400;
  color:var(--mz-gray);
}
.list-columns>.list-column:nth-child(1) .list-title::after{content:"東京ディズニーランドなど、現地で見て調べる。"}
.list-columns>.list-column:nth-child(2) .list-title::after{content:"VR機器や360度カメラを実際に使って確かめる。"}
.list-columns>.list-column:nth-child(3) .list-title::after{content:"餃子を食べ歩き、現場で調べる。"}
.list-columns>.list-column:nth-child(4) .list-title::after{content:"ギャル語ニュースの連載を含む。"}

/* 部門内のカード（ウィジェット型マークアップ） */
.list-column .widget-entry-cards{margin:0}
.list-column .new-entry-card-link{
  display:block;
  padding:0;
  background:transparent;
  border:0;
  border-bottom:1px dotted var(--mz-rule);
  border-radius:0;
  box-shadow:none;
  color:var(--mz-ink);
}
.list-column .new-entry-card-link:hover{background:var(--mz-tint)}
.list-column .new-entry-card{display:flex;align-items:baseline;gap:10px;padding:7px 0}
.list-column .new-entry-card-thumb{display:none}
.list-column .card-arrow .a-wrap::after,
.list-column .new-entry-card-link::after{content:none;display:none}
.list-column .card-arrow .card-content{margin-right:0}
.list-column .new-entry-card-content{
  display:flex;
  flex:1;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 10px;
  margin:0;
  padding:0;
}
.list-column .new-entry-card-title{
  flex:1 1 70%;
  display:block;
  max-height:none;
  overflow:visible;
  -webkit-line-clamp:unset;
  font-size:14.5px;
  font-weight:600;
  line-height:1.6;
  color:var(--mz-ink);
}
.list-column .new-entry-card-snippet{display:none}
.list-column .new-entry-card-meta{margin-left:auto;padding:0}
/* 日付は設定で隠れているので出す（display-none を上書き） */
.list-column .new-entry-card-date.display-none{display:block}
.list-column .new-entry-card-date{
  font-family:var(--mz-sans);
  font-size:12px;
  color:var(--mz-mute);
}
.list-column .post-update{display:none}
.list-column .new-entry-card-date .fa{display:none}

/* 記事0件の部門（餃子研究など）の表示 */
.list-column .widget-entry-cards>p{
  margin:0;
  padding:10px 0;
  font-size:0;
  border-bottom:1px dotted var(--mz-rule);
}
.list-column .widget-entry-cards>p::after{
  content:"調査レポートは準備中です。";
  font-family:var(--mz-sans);
  font-size:13px;
  color:var(--mz-mute);
}

/* 「もっと見る」→ 右寄せのテキストリンク */
.list-more-button-wrap{text-align:right}
.list-more-button{
  margin:8px 0 0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  font-family:var(--mz-sans);
  font-size:12px;
  color:var(--mz-gray);
}
.list-more-button::after{content:" ›"}
.list-more-button:hover{background:none;color:var(--mz-navy);text-decoration:underline}

/* ---------- 7. 新着一覧／カテゴリー一覧／検索結果などのエントリーカード（記事一覧型） ---------- */
.list .entry-card-wrap,
.list .entry-card-wrap.border-element{
  display:block;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  border-bottom:1px dotted var(--mz-rule);
  border-radius:0;
  box-shadow:none;
  color:var(--mz-ink);
}
.list .entry-card-wrap:hover{background:var(--mz-tint)}
.list .entry-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"cat cat" "title date";
  column-gap:10px;
  align-items:baseline;
  padding:7px 0;
  background:transparent;
}
.list .entry-card-thumb{display:none}                     /* サムネイルなし（全体設定でもオフ） */
.list .entry-card-content,
.list .entry-card-meta{display:contents}                  /* 子要素をグリッドに直接並べる */
.list .entry-card-meta .entry-card-categorys{
  display:block;                           /* Cocoon既定の display:none を上書き */
  grid-area:cat;
  justify-self:start;
  text-align:left;
  position:static;
  margin:0;
  font-family:var(--mz-sans);
  font-size:11px;
  font-weight:700;
  color:var(--mz-navy);
}
.list .entry-card-meta .entry-card-categorys>span{margin:0 .8em 0 0;color:var(--mz-navy)}
.list .entry-card-title{
  grid-area:title;
  margin:0;
  font-size:14.5px;
  font-weight:600;
  line-height:1.6;
  color:var(--mz-ink);
}
.list .entry-card-snippet{display:none}
.list .entry-card-info{
  grid-area:date;
  font-family:var(--mz-sans);
  font-size:12px;
  color:var(--mz-mute);
  white-space:nowrap;
}
.list .entry-card-info .fa{display:none}
.list .entry-card-info .post-update{display:none}

/* カテゴリー・アーカイブページの見出し */
.archive-title{
  margin:0 0 14px;
  padding:8px 0;
  font-family:var(--mz-serif);
  font-size:24px;
  font-weight:700;
  color:var(--mz-navy);
  border-top:3px solid var(--mz-navy);
  border-bottom:1px solid var(--mz-ink);
  background:none;
}
/* パンくず */
.breadcrumb{font-family:var(--mz-sans);font-size:12px;color:var(--mz-mute)}
.breadcrumb a{color:var(--mz-gray)}

/* ---------- 8. 記事・固定ページの本文 ---------- */
.article .entry-title,
.entry-title{
  font-family:var(--mz-serif);
  font-size:28px;
  line-height:1.45;
  font-weight:700;
  color:var(--mz-navy);
}
.article h2{
  margin:2.2em 0 .8em;
  padding:8px 0;
  background:none;
  border:0;
  border-top:3px solid var(--mz-navy);
  border-bottom:1px solid var(--mz-ink);
  border-radius:0;
  font-size:21px;
  color:var(--mz-navy);
}
.article h3{
  margin:1.8em 0 .6em;
  padding:2px 0 2px 12px;
  background:none;
  border:0;
  border-left:4px solid var(--mz-navy);
  border-radius:0;
  font-size:18px;
  color:var(--mz-ink);
}
.article h4{
  padding:0;
  background:none;
  border:0;
  border-bottom:1px dotted var(--mz-rule);
  font-size:16px;
  color:var(--mz-navy);
}
.article figcaption,
.wp-element-caption{
  font-family:var(--mz-sans);
  font-size:12px;
  color:var(--mz-mute);
  text-align:left;
}
.article table th{background:var(--mz-tint);color:var(--mz-navy)}
/* 記事下の著者欄（研究員紹介へのリンク） */
.author-box{border:1px solid var(--mz-rule);border-radius:0;background:var(--mz-tint)}

/* ---------- 9. サイドバー ---------- */
.sidebar{font-family:var(--mz-sans)}
.sidebar .widget{margin-bottom:28px;background:transparent;border:0;padding:0}
.widget-sidebar-title,
.sidebar h3{
  margin:0 0 8px;
  padding:0 0 4px;
  background:none;
  border:0;
  border-bottom:2px solid var(--mz-navy);
  border-radius:0;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--mz-navy);
}
.sidebar ul li,
.sidebar .widget_categories .cat-item,
.sidebar .menu-item{
  padding:6px 0;
  border:0;
  border-bottom:1px dotted var(--mz-rule);
  font-size:13.5px;
}
.sidebar a{color:var(--mz-ink);text-decoration:none}
.sidebar a:hover{color:var(--mz-navy);text-decoration:underline}
.sidebar .search-edit,
.sidebar input[type="search"]{
  border:1px solid var(--mz-ink);
  border-radius:0;
  padding:8px;
  font-size:13px;
}
.sidebar .search-submit{border-radius:0;background:var(--mz-navy);color:#fff}

/* ---------- 10. フッター ---------- */
.footer{
  background:#fff;
  color:var(--mz-gray);
  border-top:6px double var(--mz-navy);
  margin-top:10px;
}
.footer-in{padding-top:22px;padding-bottom:34px}
.footer a{color:var(--mz-gray)}
.footer .logo-text{padding:0}
.footer .site-name-text{font-size:16px;font-weight:700;color:var(--mz-navy);letter-spacing:0}
.footer-bottom{font-family:var(--mz-sans);font-size:12px;align-items:flex-start}
.footer-bottom-content{text-align:right}
.navi-footer-in>.menu-footer li{width:auto}
.navi-footer-in>.menu-footer a{font-size:12px;color:var(--mz-gray)}
.source-org{font-size:12px;color:var(--mz-gray)}
.go-to-top-button{border-radius:0;background:var(--mz-navy)}

/* ---------- 11. モバイルボタン（ヘッダー・フッター） ---------- */
.mobile-menu-buttons{background:#fff;border-top:1px solid var(--mz-ink);font-family:var(--mz-sans)}
.mobile-menu-buttons .menu-button a,
.mobile-menu-buttons .menu-button label{color:var(--mz-navy)}
.mobile-menu-buttons .menu-caption{font-size:10px;font-weight:600}

/* ---------- 12. 幅ごとの調整 ---------- */
@media (max-width:1060px){
  .header-in,.navi-in,.content-in,.footer-in{padding-left:16px;padding-right:16px}
}
@media (max-width:1023px){
  .list-columns.fpt-columns{column-gap:24px}
  .list-columns.fpt-2-columns>*{width:calc((100% - 24px) / 2)}
  .site-name-text{font-size:56px}
}
/* Cocoonの1カラム化(834px)に合わせて部門も1列に */
@media (max-width:834px){
  .list-columns{flex-direction:column}
  .list-columns.fpt-2-columns>*{width:100%}
  .site-name-text{font-size:48px}
}
@media (max-width:700px){
  .header-container::before{font-size:9.5px;letter-spacing:.06em;padding:10px 0}
  .header-in{padding:26px 0 18px}
  .site-name-text{font-size:38px}
  .tagline{font-size:15px;margin-top:10px}
  .appeal-in{margin-top:22px}
  .appeal-content{padding:18px;border-left-width:6px;gap:12px}
  .appeal-content .appeal-title{font-size:18px}
  .appeal-content .appeal-message{flex-basis:100%}
  .content-in{padding-top:22px}
  .entry-title{font-size:22px}
  .article h2{font-size:18px}
  .footer-bottom-content{text-align:left}
}
@media (max-width:480px){
  .site-name-text{font-size:34px}
  .list .entry-card{grid-template-columns:minmax(0,1fr)}
  .list .entry-card{grid-template-areas:"cat" "title" "date"}
  .list-column .new-entry-card-content{flex-direction:column;align-items:flex-start}
  .list-column .new-entry-card-meta{margin-left:0}
}

/* ---------- 13. 追記（ナビ幅の調整：項目7つが1行に収まるように） ---------- */.navi-in>ul.menu-pc>li{width:auto !important;flex:0 0 auto}.navi-in>ul.menu-pc{gap:0 20px}
.navi-in>ul.menu-pc{gap:0 6px !important}