@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){
  /*必要ならばここにコードを書く*/
}


/* ==========================================================================
   まるなげ実験室 カスタムCSS(Cocoon Child 追加CSS用)
   ブランド: 深い紺 #1F3B57 / 実験ノートらしい静かなモダンさ・可読性重視
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 変数
   -------------------------------------------------------------------------- */
:root {
  --ml-navy: #1F3B57;          /* ブランド紺 */
  --ml-navy-light: #2c5078;    /* hover用の少し明るい紺 */
  --ml-link: #1a5fa8;          /* リンク青 */
  --ml-link-dark: #14497f;
  --ml-bg: #f5f6f8;            /* ページ背景 */
  --ml-text: #212730;          /* 本文色 */
  --ml-text-sub: #5a6472;      /* 補助テキスト */
  --ml-border: #e6e9ee;        /* カード境界線 */
  --ml-radius: 14px;           /* カード角丸 */
  --ml-shadow: 0 1px 3px rgba(20, 35, 60, .07);
  --ml-shadow-hover: 0 8px 20px rgba(20, 35, 60, .12);
}

/* --------------------------------------------------------------------------
   1. ベース(背景・フォント・リンク)
   -------------------------------------------------------------------------- */
body {
  background: var(--ml-bg);
  color: var(--ml-text);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
}

a {
  color: var(--ml-link);
  text-decoration: none;
  transition: color .2s ease;
}

a:hover {
  color: var(--ml-link-dark);
  text-decoration: underline;
}

::selection {
  background: var(--ml-navy);
  color: #fff;
}

/* --------------------------------------------------------------------------
   2. ヘッダー(白背景+下ボーダー、サイト名は紺)
   -------------------------------------------------------------------------- */
#header-container {
  background: #fff;
  border-bottom: 1px solid var(--ml-border);
}

.header-container-in {
  background: transparent;
}

#site-title,
.site-name-text {
  color: var(--ml-navy);
  font-weight: 700;
  letter-spacing: .04em;
}

#site-title a,
.site-name a {
  color: var(--ml-navy);
}

#site-title a:hover,
.site-name a:hover {
  color: var(--ml-navy-light);
  text-decoration: none;
}

.tagline {
  color: #7b8494;
  font-size: 12px;
  letter-spacing: .06em;
}

/* --------------------------------------------------------------------------
   3. グローバルナビ(白背景+hoverで紺の下線インジケータ)
   -------------------------------------------------------------------------- */
#navi {
  background: #fff;
  border-bottom: 1px solid var(--ml-border);
}

#navi .navi-in > ul li a {
  color: #2b3442;
  font-size: 14px;
  font-weight: 600;
  transition: color .2s ease, background-color .2s ease;
}

#navi .navi-in > ul li a:hover {
  background: transparent;
  color: var(--ml-navy);
  text-decoration: none;
}

/* 下線インジケータ(トップレベルのみ) */
#navi .navi-in > ul > li > a {
  position: relative;
}

#navi .navi-in > ul > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--ml-navy);
  transition: width .25s ease;
}

#navi .navi-in > ul > li > a:hover::after,
#navi .navi-in > ul > li.current-menu-item > a::after {
  width: 60%;
}

/* ドロップダウン */
#navi .navi-in > ul .sub-menu {
  background: #fff;
  border: 1px solid var(--ml-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20, 35, 60, .12);
  overflow: hidden;
}

#navi .navi-in > ul .sub-menu li a:hover {
  background: #f2f5f9;
  color: var(--ml-navy);
}

/* --------------------------------------------------------------------------
   4. メインカラム・サイドバーの白カード化
   -------------------------------------------------------------------------- */
#main,
.main {
  background: #fff;
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
  box-shadow: var(--ml-shadow);
}

/* サイドバーは器を透明にし、ウィジェット単位でカード化 */
.sidebar {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.sidebar .widget {
  background: #fff;
  border: 1px solid var(--ml-border);
  border-radius: var(--ml-radius);
  box-shadow: var(--ml-shadow);
  padding: 1.2em 1.3em;
  margin-bottom: 1.4em;
}

/* サイドバーウィジェットタイトル(紺の左アクセントバー) */
.sidebar h3 {
  background: transparent;
  border: none;
  border-left: 4px solid var(--ml-navy);
  border-radius: 0;
  color: var(--ml-navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  padding: .2em .2em .2em .7em;
  margin: 0 0 1em;
}

/* --------------------------------------------------------------------------
   5. 記事一覧カード(hoverでふわっと浮く)
   -------------------------------------------------------------------------- */
.a-wrap {
  background: #fff;
  border: 1px solid var(--ml-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20, 35, 60, .05);
  color: inherit;
  margin-bottom: 1.2em;
  padding: 1em;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.a-wrap:hover {
  background: #fff;
  border-color: #d6dce4;
  box-shadow: var(--ml-shadow-hover);
  text-decoration: none;
  transform: translateY(-2px);
}

.entry-card-title {
  color: var(--ml-text);
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.5;
  transition: color .2s ease;
}

.a-wrap:hover .entry-card-title {
  color: var(--ml-navy);
}

.entry-card-snippet {
  color: var(--ml-text-sub);
  font-size: .85em;
  line-height: 1.7;
}

.entry-card-thumb,
.entry-card-thumb img {
  border-radius: 8px;
}

.entry-card-thumb {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   6. 記事内見出し
   -------------------------------------------------------------------------- */
/* h2: Cocoonデフォルトの灰色背景ボックスを打ち消し、紺太字+グラデ下線 */
.article h2 {
  background: transparent !important;
  border: none;
  border-radius: 0;
  color: var(--ml-navy);
  font-weight: 700;
  line-height: 1.5;
  padding: 0 0 .45em !important;
  position: relative;
}

.article h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ml-navy) 0%, rgba(31, 59, 87, 0) 100%);
}

/* h3: 紺の左ボーダー */
.article h3 {
  background: transparent;
  border: none;
  border-left: 4px solid var(--ml-navy);
  border-bottom: 1px solid var(--ml-border);
  border-radius: 0;
  color: var(--ml-text);
  font-weight: 700;
  line-height: 1.5;
  padding: .3em .2em .3em .7em;
}

/* h4: シンプル太字 */
.article h4 {
  background: transparent;
  border: none;
  color: var(--ml-text);
  font-weight: 700;
  line-height: 1.5;
  padding: 0;
}

/* --------------------------------------------------------------------------
   7. 目次(白カード+紺見出し)
   -------------------------------------------------------------------------- */
.toc {
  background: #fff;
  border: 1px solid var(--ml-border);
  border-radius: 12px;
  box-shadow: var(--ml-shadow);
  padding: 1.2em 1.5em;
}

.toc-title {
  color: var(--ml-navy);
  font-weight: 700;
}

.toc a {
  color: #2b3442;
}

.toc a:hover {
  color: var(--ml-link);
}

/* --------------------------------------------------------------------------
   8. ボタン・検索
   -------------------------------------------------------------------------- */
input[type="submit"],
button[type="submit"],
.search-submit,
#submit {
  background: var(--ml-navy);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.search-submit:hover,
#submit:hover {
  background: var(--ml-navy-light);
  color: #fff;
  text-decoration: none;
}

.search-edit,
input[type="text"].search-edit {
  background: #fff;
  border: 1px solid var(--ml-border);
  border-radius: 8px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.search-edit:focus {
  border-color: var(--ml-navy);
  box-shadow: 0 0 0 3px rgba(31, 59, 87, .12);
  outline: none;
}

/* --------------------------------------------------------------------------
   9. ページネーション・トップへ戻るボタン
   -------------------------------------------------------------------------- */
.pagination .page-numbers {
  background: #fff;
  border: 1px solid var(--ml-border);
  border-radius: 8px;
  color: #2b3442;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.pagination .page-numbers:hover {
  background: #eef2f7;
  color: var(--ml-navy);
  text-decoration: none;
}

.pagination .page-numbers.current {
  background: var(--ml-navy);
  border-color: var(--ml-navy);
  color: #fff;
}

.pagination-next-link {
  background: #fff;
  border: 1px solid var(--ml-navy);
  border-radius: 8px;
  color: var(--ml-navy);
  transition: background-color .2s ease, color .2s ease;
}

.pagination-next-link:hover {
  background: var(--ml-navy);
  color: #fff;
  text-decoration: none;
}

.go-to-top-button {
  background: var(--ml-navy);
  border-radius: 10px;
  color: #fff;
  opacity: .9;
  transition: background-color .2s ease, opacity .2s ease;
}

.go-to-top-button:hover {
  background: var(--ml-navy-light);
  color: #fff;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   10. フッター(紺背景+白文字)
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ml-navy);
  border-top: none;
  color: #fff;
}

.footer a {
  color: rgba(255, 255, 255, .8);
  transition: color .2s ease;
}

.footer a:hover {
  color: #fff;
  text-decoration: none;
}

.footer .navi-footer-in a {
  color: rgba(255, 255, 255, .8);
}

.footer .navi-footer-in a:hover {
  background: transparent;
  color: #fff;
}

.footer-bottom,
.footer .source-org.copyright,
.footer .powered-by {
  color: rgba(255, 255, 255, .65);
}

/* --------------------------------------------------------------------------
   11. blockquote・table・code の控えめなモダン化
   -------------------------------------------------------------------------- */
.article blockquote {
  background: #f2f5f9;
  border: none;
  border-left: 4px solid var(--ml-navy);
  border-radius: 0 10px 10px 0;
  color: #45505e;
  padding: 1em 1.2em;
}

.article blockquote cite {
  color: var(--ml-text-sub);
  font-size: .85em;
}

.article table {
  border: 1px solid var(--ml-border);
  border-radius: 8px;
  overflow: hidden;
}

.article table th {
  background: #edf1f6;
  border: 1px solid var(--ml-border);
  color: var(--ml-navy);
  font-weight: 700;
}

.article table td {
  border: 1px solid var(--ml-border);
}

.article table tr:nth-of-type(even) td {
  background: #fafbfc;
}

.article code {
  background: #eef1f5;
  border-radius: 4px;
  color: #1f3b57;
  font-family: Consolas, Monaco, "Courier New", monospace;
  font-size: .9em;
  padding: .15em .45em;
}

.article pre {
  background: #f0f3f7;
  border: 1px solid var(--ml-border);
  border-radius: 10px;
}

.article pre > code {
  background: transparent;
  color: var(--ml-text);
}

/* --------------------------------------------------------------------------
   12. モバイル(834px以下)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 834px) {

  /* カード角丸を10pxに */
  #main,
  .main,
  .sidebar .widget,
  .toc,
  .a-wrap {
    border-radius: 10px;
  }

  /* 左右余白を確保(カードが画面端に張り付かないように) */
  #main,
  .main {
    margin-left: 8px;
    margin-right: 8px;
    padding: 1.2em 1em;
  }

  .sidebar {
    margin-left: 8px;
    margin-right: 8px;
  }

  /* モバイルメニューボタンを紺系に */
  .mobile-menu-buttons {
    background: #fff;
    border-top: 1px solid var(--ml-border);
    box-shadow: 0 -1px 3px rgba(20, 35, 60, .07);
  }

  .mobile-menu-buttons .menu-button a,
  .mobile-menu-buttons .menu-icon,
  .mobile-menu-buttons .menu-caption {
    color: var(--ml-navy);
  }

  .mobile-menu-buttons .menu-button a:hover {
    background: #f2f5f9;
    color: var(--ml-navy);
    text-decoration: none;
  }
}
/* --------------------------------------------------------------------------
   13. パッチ: ブロックウィジェット(h2)のサイドバータイトルもアクセントバー化
   -------------------------------------------------------------------------- */
.sidebar h2 {
  background: transparent;
  border: none;
  border-left: 4px solid var(--ml-navy);
  border-radius: 0;
  color: var(--ml-navy);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  padding: .2em .2em .2em .7em;
  margin: 0 0 1em;
}


/* ==========================================================================
   デザイン強化 v2(2026-08-11)
   単調さの解消: ブランドヘッダーのグラデーション化・Noto Sans JP・
   プロフィールカード・タイトル強調・フォーカスリング
   ========================================================================== */

/* 1. フォント: Noto Sans JP(functions.phpで読み込み)を第一候補に */
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* 2. ヘッダーを紺のグラデーションバンドに(ブランドの顔をつくる) */
#header-container {
  background: linear-gradient(135deg, #16293d 0%, #1F3B57 55%, #2b5178 100%);
  border-bottom: none;
}

#site-title,
.site-name-text {
  color: #fff;
  letter-spacing: .06em;
}

#site-title a,
.site-name a {
  color: #fff;
}

#site-title a:hover,
.site-name a:hover {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}

.tagline {
  color: rgba(255, 255, 255, .72);
}

/* 3. 記事・固定ページタイトルの存在感 */
.article h1,
.entry-title {
  font-size: 1.5em;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .01em;
}

/* 4. サイドバーのプロフィールカード・ボタン */
.sidebar .wp-block-image.is-style-rounded img {
  box-shadow: 0 0 0 4px #eef2f7;
}

.sidebar .wp-block-buttons .wp-block-button__link {
  background: var(--ml-navy);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: .55em 1.5em;
  transition: background-color .2s ease, transform .2s ease;
}

.sidebar .wp-block-buttons .wp-block-button__link:hover {
  background: var(--ml-navy-light);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

/* 5. 最近の投稿(ブロック)の読みやすさ */
.sidebar .wp-block-latest-posts li {
  margin-bottom: .8em;
  line-height: 1.5;
}

.sidebar .wp-block-latest-posts__post-date {
  color: var(--ml-text-sub);
  font-size: .78em;
}

/* 6. アクセシビリティ: キーボード操作時のフォーカスリング */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ml-link);
  outline-offset: 2px;
}

/* 7. ページ内リンクのスムーズスクロール */
html {
  scroll-behavior: smooth;
}

/* --------------------------------------------------------------------------
   14. キャッチフレーズは文節(句読点)単位で折り返す
   -------------------------------------------------------------------------- */
.tagline .tagline-phrase {
  display: inline-block;
  max-width: 100%;
}