/* mirai-note.online 子テーマ デザインCSS
   配色は docs/wordpress-setup-playbook.md のモックアップ(4324.png)から抽出したパステル系。
   本番画像への差し替えを前提に、レイアウトの骨格を優先している。 */

/* .mirai-hero の100vwフルブリード手法はスクロールバー幅を含んで計算されるため、
   そのままだとページ全体が右にずれて見える／横スクロールが発生する。
   ここで確実に隠して吸収する。 */
html, body { overflow-x: hidden; }

:root {
  --mirai-navy: #2c4a6e;
  --mirai-navy-dark: #16324f;
  --mirai-pink: #e8a5ab;
  --mirai-blue: #6a93bd;
  --mirai-bg: #faf9f7;
  --mirai-card-bg: #ffffff;
  --mirai-border: #ece7e2;
  --mirai-text: #3c3c3c;
  --mirai-accent: #ffcd44; /* JIN側のカテゴリバッジ(theme_accent_color)と揃える */
}

.mirai-theme #contents,
.mirai-theme.mirai-front #contents {
  max-width: none;
  padding: 0;
  background: var(--mirai-bg);
}

.mirai-contents {
  background: var(--mirai-bg);
}

.mirai-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------- ヘッダーを画面幅いっぱいに */
/* JINは `@media(min-width:1200px){ #header{ width:1200px; margin:0 auto; } }` で
   ヘッダーを1200px幅の中央寄せにするため、広い画面ではロゴが実際の左端から
   かなり離れて見える（＝「中央に寄りすぎ」）。ヘッダーだけ幅制限を外し、
   固定余白でロゴを画面の左端に近づける。 */
@media (min-width: 1200px) {
  body.mirai-theme #header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 32px !important;
  }
}
/* ロゴを大きくした分、ナビ項目がJIN既定の固定margin-top(16px)のままだと
   ロゴより上寄りに見えるため、ヘッダー全体を縦方向中央揃えにする。 */
body.mirai-theme #header {
  align-items: center !important;
}
body.mirai-theme #drawernav3 nav.fixed-content ul.menu-box {
  margin-top: 0 !important;
}

/* ---------------------------------------------- ヘッダー全体（白背景・紺文字に変更） */
/* JIN既定のtheme_color(紺)がヘッダー背景にも使われ、白ロゴ画像と衝突するため、
   ヘッダーだけ白背景・紺文字に上書きする。 */
#header-box {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--mirai-border);
}
#header,
#header #site-info,
#drawernav3 {
  background: transparent !important;
}
body.mirai-theme #drawernav3 nav.fixed-content ul.menu-box li.menu-item a,
#header #site-info .tn-logo-size a,
#header #site-info .sp-logo-size a {
  color: var(--mirai-navy-dark) !important;
}
body.mirai-theme #drawernav3 nav.fixed-content ul.menu-box li.menu-item.current-menu-item a,
body.mirai-theme #drawernav3 nav.fixed-content ul.menu-box li.menu-item a:hover {
  color: var(--mirai-blue) !important;
}
#header .header-search-box svg,
#header .header-search-box path,
#header #drawer-icon span {
  background-color: var(--mirai-navy-dark) !important;
  fill: var(--mirai-navy-dark) !important;
}

/* ロゴ行の上下余白が広すぎる（JIN既定のカスタマイザー設定で padding-top/bottom: 15px!important）ため詰める。
   インラインCSSが !important かつ #site-info 単体IDセレクタで来るので、
   #header #site-info（2IDセレクタ）で詳細度を上げて確実に上書きする。 */
#header #site-info {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* ---------------------------------------------- ヘッダーナビの間隔 */
/* JIN既定の.menu-boxはflex-startで項目が詰まって左に寄るため、間隔を広げる。
   ヘッダー検索ボックスは廃止済み（トップページのサイドバー検索に統一）。 */
#header {
  position: relative;
}
body.mirai-theme #drawernav3 nav.fixed-content {
  width: 100%;
}
body.mirai-theme #drawernav3 nav.fixed-content ul.menu-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
}
body.mirai-theme #drawernav3 nav.fixed-content ul.menu-box li.menu-item {
  margin: 0 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* JIN既定は `a{padding:3px 25px}` で1項目あたり左右25pxと大きく、
   7項目もあると簡単に幅が足りなくなるため縮める。 */
body.mirai-theme #drawernav3 nav.fixed-content ul.menu-box li.menu-item > a {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* ---------------------------------------------- ヘッダーロゴ */
/* JIN標準は #header #site-info img { height:auto; } のみで上限が無く、
   横長のロゴ画像を原寸のまま表示してヘッダーが崩れるため、高さを明示的に制限する。 */
/* JIN標準は `.tn-logo-size img{ width: <topnavi_logotext_size>%!important; }`
   （テキストロゴのフォントサイズ%を画像ロゴの横幅にも誤って適用する仕様）で
   既定値160%が効き、画像ロゴを横に引き伸ばしてしまう。!importantで上書きする。 */
/* ロゴを大きくした分、#site-info自体の確保幅も広げてナビと重ならないようにする */
#header #site-info {
  width: 260px !important;
  min-width: 260px !important;
}
#header #site-info .tn-logo-size img,
#header #site-info .sp-logo-size img {
  max-height: 76px !important;
  width: auto !important;
}
@media (max-width: 767px) {
  #header #site-info .sp-logo-size img {
    max-height: 48px !important;
  }
}

/* ---------------------------------------------- Hero */
.mirai-hero {
  /* JINは `@media (min-width:1200px){ #contents{ width:1200px; } }` で
     コンテンツ幅を1200pxに固定するため、ヒーローだけそれを突破して
     ブラウザ幅いっぱいに広がるフルブリードにする（横幅が伸びない問題の対策）。 */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background: #eef1f4;
}
.mirai-hero__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------- セクション共通 */
.mirai-section {
  padding: 48px 0;
}
.mirai-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}
.mirai-section__head--gap {
  margin-top: 44px;
}
.mirai-section__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--mirai-navy-dark);
  margin: 0;
  padding: 0;
  border: none;
}
.mirai-section__more {
  font-size: 13px;
  color: var(--mirai-blue);
  text-decoration: none;
}
.mirai-section__more:hover { text-decoration: underline; }

/* ---------------------------------------------- カテゴリカード */
.mirai-cats { padding-top: 28px; padding-bottom: 8px; }
.mirai-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mirai-cat-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(44, 74, 110, 0.08);
  background: var(--mirai-card-bg);
}
.mirai-cat-card a { display: block; line-height: 0; }
.mirai-cat-card img {
  width: 100%;
  height: auto;
  display: block;
}
.mirai-cat-card__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  color: var(--mirai-navy);
  font-weight: 700;
}

/* ---------------------------------------------- 2カラム（メイン＋サイド） */
.mirai-split {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.mirai-split__main { flex: 1; min-width: 0; }
.mirai-split__side {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---------------------------------------------- 記事カード */
.mirai-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mirai-cards--4col { grid-template-columns: repeat(4, 1fr); }

.mirai-card a {
  display: block;
  text-decoration: none;
  color: var(--mirai-text);
  background: var(--mirai-card-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(44, 74, 110, 0.06);
}
.mirai-card__thumb {
  display: block;
  aspect-ratio: 16 / 9; /* small_size(640x360)実寸=16:9に合わせる。4:3だと素材より縦長になり上下が余分に切れる */
  background: #eef1f4;
  overflow: hidden;
}
.mirai-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mirai-thumb-empty { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #eef1f4, #e4ecf3); }

.mirai-card__body { display: block; padding: 14px 16px 18px; }
.mirai-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--mirai-accent);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 8px;
}
.mirai-card__title {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 6px;
  color: var(--mirai-navy-dark);
}
.mirai-card__date {
  display: block;
  font-size: 12px;
  color: #999;
}

/* ---------------------------------------------- サイドバー: イントロボックス */
.mirai-intro-box {
  background: #eef3f8;
  border-radius: 14px;
  padding: 22px;
}
.mirai-intro-box__lead {
  font-size: 18px;
  font-weight: 700;
  color: var(--mirai-navy-dark);
  line-height: 1.5;
  margin: 0 0 12px;
}
.mirai-intro-box__desc {
  font-size: 13px;
  line-height: 1.8;
  color: #55606b;
  margin: 0 0 16px;
}
.mirai-intro-box__btn {
  display: inline-block;
  background: var(--mirai-navy);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
}

/* ---------------------------------------------- サイドバー: 検索ボックス(常時展開) */
/* ヘッダーの.mirai-searchはホバーで展開する仕様だが、トップページのサイドバーでは
   常時展開した状態で「今の悩み...」ボックスとランキングの間に置く。 */
.mirai-sidebar-search {
  display: flex;
  align-items: center;
  background: #f4f5f7;
  border-radius: 999px;
  padding: 4px 4px 4px 20px;
}
.mirai-sidebar-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--mirai-navy-dark);
  padding: 10px 0;
}
.mirai-sidebar-search input[type="search"]::placeholder { color: #9aa4ae; }
.mirai-sidebar-search button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background: var(--mirai-navy-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mirai-sidebar-search svg { width: 16px; height: 16px; }

/* ---------------------------------------------- サイドバー: ランキング */
.mirai-rank-box {
  background: var(--mirai-card-bg);
  border: 1px solid var(--mirai-border);
  border-radius: 14px;
  padding: 20px;
}
.mirai-rank-box__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mirai-navy-dark);
  margin: 0 0 14px;
  padding: 0;
  border: none;
}
.mirai-rank { list-style: none; margin: 0; padding: 0; }
.mirai-rank__item + .mirai-rank__item { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mirai-border); }
.mirai-rank__item a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  color: var(--mirai-text);
}
.mirai-rank__no {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #b9c3cc;
}
.mirai-rank__no--1 { background: #e0b25a; }
.mirai-rank__no--2 { background: #a7b6c4; }
.mirai-rank__no--3 { background: #cf8f5c; }
.mirai-rank__title { font-size: 13px; line-height: 1.6; }

/* ---------------------------------------------- サイドバー: ジャンル */
.mirai-genre-box {
  background: var(--mirai-card-bg);
  border: 1px solid var(--mirai-border);
  border-radius: 14px;
  padding: 20px;
}
.mirai-genre-box__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--mirai-navy-dark);
  margin: 0 0 14px;
  padding: 0;
  border: none;
}
.mirai-genre-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mirai-genre-list a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mirai-navy);
  background: #e7eef6;
  border-radius: 999px;
  padding: 6px 12px;
  text-decoration: none;
  transition: background .15s ease;
}
.mirai-genre-list a:hover { background: #d9e4f0; }
.mirai-genre-list__count { font-size: 11px; color: #7c8a99; font-weight: 700; }

/* ---------------------------------------------- サイドバー: 検索ウィジェット(コアの検索ブロック) */
/* サイドバー幅(約296px)に対しinput/buttonが両方flex-shrinkするため、
   「検索」の2文字がボタンに収まりきらず縦に折り返されて縦長ボタンになる。
   ボタン側は縮ませず、文字を折り返させないようにする。 */
.widget .wp-block-search__inside-wrapper {
  gap: 8px;
}
.widget .wp-block-search__button {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 10px 18px;
}

/* ---------------------------------------------- サイドバー: 最近の投稿(コアの最新の投稿ブロック) */
/* 既定のブロックマークアップは <div class="...featured-image">(画像)</div><a>(タイトル)</a> が
   縦積みになるため、画像が記事幅いっぱいに大きく表示されてダサく見える。
   サムネイルを正方形に固定してタイトルの左に並べ、他のサイドバーボックスと統一感を出す。 */
.widget .wp-block-latest-posts__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.widget .wp-block-latest-posts__list > li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.widget .wp-block-latest-posts__list > li + li {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mirai-border);
}
.widget .wp-block-latest-posts__featured-image {
  flex: 0 0 100px;
  margin: 0 !important;
}
.widget .wp-block-latest-posts__featured-image img {
  width: 100px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.widget .wp-block-latest-posts__post-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--mirai-navy-dark);
  text-decoration: none;
}
.widget .wp-block-latest-posts__post-title:hover {
  color: var(--mirai-blue);
}

/* ---------------------------------------------- フッターリンク拡張 */
/* JIN標準は「プライバシーポリシー」「免責事項」の2本しかフッターに置けない仕様のため、
   footer.php を子テーマで上書きして「お問い合わせ」「ミライノートについて」＋
   アフィリエイト広告表記の一行を追加している。float前提のJIN既定CSSのままだと
   項目が増えて崩れるため、リンク行だけflexに変更しコピーライトは常に次の行へ回す。 */
footer .footer-inner.mirai-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 6px;
}
footer .footer-inner.mirai-footer-inner .mirai-footer-link a {
  display: inline-block;
  color: #ddd;
  padding: 0 15px;
  border-right: 1px solid #ddd;
  font-weight: 300;
  text-decoration: none;
}
footer .footer-inner.mirai-footer-inner .mirai-footer-link:first-child a {
  border-left: 1px solid #ddd;
}
footer .footer-inner.mirai-footer-inner #copyright {
  float: none !important;
  flex-basis: 100%;
  text-align: center;
  margin-top: 4px;
}
/* ---------------------------------------------- 記事一覧ページ */
.mirai-articles-page__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--mirai-navy-dark);
  margin: 0 0 6px;
}
.mirai-articles-page__count {
  font-size: 13px;
  color: #888;
  margin: 0 0 24px;
}
.mirai-articles-grid { margin-bottom: 8px; }

/* ---------------------------------------------- レスポンシブ */
@media (max-width: 900px) {
  .mirai-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .mirai-cards--4col { grid-template-columns: repeat(2, 1fr); }
  .mirai-split { flex-direction: column; }
  .mirai-split__side { width: 100%; }
}
@media (max-width: 560px) {
  .mirai-cat-grid { grid-template-columns: 1fr 1fr; }
  .mirai-cards { grid-template-columns: 1fr 1fr; }
  .mirai-cards--4col { grid-template-columns: 1fr 1fr; }
  .mirai-section { padding: 32px 0; }
}