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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/* =========================================================
   みんなの質問ひろば
   Cocoon用きれいめQ&Aデザイン
   （レイアウトはCocoon標準の2カラムを使用）
   ========================================================= */

/* ----------------------------------
 * 0. デザイントークン
 * ---------------------------------- */
:root{
  --mh-primary: #1F8EEA;           /* メインの青 */
  --mh-primary-strong: #0D71C9;    /* 濃い青（ホバーなど） */
  --mh-primary-soft: #E6F3FF;      /* 薄い青（背景） */

  --mh-accent: #FF9E3A;            /* サブアクセント */

  --mh-body-bg: #F3F6FB;
  --mh-surface: #FFFFFF;
  --mh-surface-soft: #F9FBFF;
  --mh-border-subtle: rgba(15, 23, 42, .06);

  --mh-text-main: #111827;
  --mh-text-muted: #6B7280;
  --mh-text-soft: #9CA3AF;

  --mh-radius-lg: 14px;
  --mh-radius-md: 10px;
  --mh-radius-sm: 6px;
  --mh-radius-pill: 999px;

  --mh-shadow-xs: 0 1px 3px rgba(15,23,42,.12);
  --mh-shadow-sm: 0 4px 14px rgba(15,23,42,.06);
  --mh-shadow-md: 0 12px 30px rgba(15,23,42,.09);

  --mh-font-jp: "M PLUS Rounded 1c","Noto Sans JP",
    "Hiragino Kaku Gothic ProN","Yu Gothic Medium",
    "Yu Gothic","Meiryo",system-ui,-apple-system,sans-serif;

  --mh-container-width: 100%;
}

/* ----------------------------------
 * 1. ベース
 * ---------------------------------- */
html, body{
  background: var(--mh-body-bg);
  color: var(--mh-text-main);
  font-family: var(--mh-font-jp);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a{
  color: var(--mh-primary);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover{
  color: var(--mh-primary-strong);
}

.wrap,
#header-in,
#navi-in,
#footer-in,
#content{
  max-width: var(--mh-container-width);
  margin-left: auto;
  margin-right: auto;
}

img{
  border-radius: var(--mh-radius-sm);
}

/* ----------------------------------
 * 2. ヘッダー
 * ---------------------------------- */

#header{
  background: linear-gradient(90deg, #020617 0%, #071426 45%, #020617 100%);
  border-bottom: none;
  color: #E5E7EB;
}
#header-in{
  padding: 18px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-name,
.site-name-text,
.logo-site-title a{
  color: #F9FAFB !important;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.logo-site-title a:hover{
  opacity: .9;
}
.site-description{
  color: #9CA3AF;
  font-size: 0.86rem;
  margin-top: 4px;
}

@media (max-width: 768px){
  #header-in{
    flex-direction: column;
    align-items: flex-start;
    padding-inline: 14px;
  }
}

/* ----------------------------------
 * 3. グローバルナビ
 * ---------------------------------- */

#navi{
  background: #020617;
  border-bottom: 1px solid rgba(148,163,184,.4);
}
#navi-in{
  padding: 0 20px;
}

#navi .menu,
#navi .navi-in > ul{
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0;
}
#navi .menu li{
  list-style: none;
}
#navi .menu li a{
  display: block;
  padding: 6px 12px;
  font-size: 0.9rem;
  color: #E5E7EB;
  border-radius: var(--mh-radius-pill);
}
#navi .menu li.current-menu-item > a,
#navi .menu li a:hover{
  background: rgba(148,163,184,.25);
}

/* ----------------------------------
 * 4. メイン領域（余白だけ。レイアウトはCocoonに任せる）
 * ---------------------------------- */

#content{
  padding-top: 24px;
  padding-bottom: 40px;
}

/* アーカイブ・固定ページタイトル */
.archive-title,
.page-title{
  margin: 0 0 14px;
  padding: 0;
  border: none;
  font-size: 1.08rem;
  font-weight: 700;
}

/* ----------------------------------
 * 5. 一覧カード（質問リスト）
 * ---------------------------------- */

.entry-card-wrap{
  margin-bottom: 16px;
}
.entry-card{
  background: var(--mh-surface);
  border-radius: var(--mh-radius-lg);
  box-shadow: var(--mh-shadow-sm);
  border: 1px solid var(--mh-border-subtle);
  overflow: hidden;
  display: flex;
}

/* 左側サムネイル／Qアイコン */
.entry-card-thumb{
  flex: 0 0 96px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 20%, #E0F2FF, #F4F4FF);
}

/* アイキャッチ画像 */
.entry-card-thumb img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 3px 8px rgba(15,23,42,.18);
}

/* NO IMAGE の場合は画像を隠して?アイコン */
.entry-card-thumb img[alt*="NO IMAGE"],
.entry-card-thumb img.no-image{
  display: none;
}
.entry-card-thumb::before{
  content: "?";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--mh-primary-strong);
  font-weight: 800;
  font-size: 1.2rem;
  box-shadow: 0 3px 10px rgba(15,23,42,.15);
}

/* 右側テキスト */
.entry-card-content{
  flex: 1 1 auto;
  padding: 14px 18px 12px;
}

.entry-card-title{
  margin-bottom: 4px;
}
.entry-card-title a{
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--mh-text-main);
}
.entry-card-title a:hover{
  color: var(--mh-primary-strong);
}

.entry-card-snippet{
  font-size: 0.88rem;
  color: var(--mh-text-muted);
  margin-bottom: 8px;
}

/* メタ情報 */
.entry-card-meta{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--mh-text-soft);
}

/* カテゴリラベル */
.entry-card-meta .cat-label,
.entry-card-meta .entry-categories a{
  background: var(--mh-primary-soft);
  color: var(--mh-primary-strong);
  border-radius: var(--mh-radius-pill);
  padding: 3px 8px;
  font-size: 0.76rem;
  border: none;
}
.entry-card-meta .entry-categories a:hover{
  background: var(--mh-primary-strong);
  color: #FFFFFF;
}

/* ホバー */
.entry-card-wrap:hover .entry-card{
  transform: translateY(-1px);
  box-shadow: var(--mh-shadow-md);
  transition: all .18s ease-out;
}

/* スマホで縦並び */
@media (max-width: 640px){
  .entry-card{
    flex-direction: column;
  }
  .entry-card-thumb{
    flex-basis: auto;
    border-bottom: 1px solid rgba(148,163,184,.25);
  }
}

/* ----------------------------------
 * 6. 単一記事（質問ページ）
 * ---------------------------------- */

.article,
.post,
.single .entry-content{
  background: var(--mh-surface);
  border-radius: var(--mh-radius-lg);
  border: 1px solid var(--mh-border-subtle);
  box-shadow: var(--mh-shadow-md);
  padding: 22px 22px 26px;
}

.entry-title{
  font-size: 1.32rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.post-meta,
.date-tags{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--mh-text-soft);
  margin-bottom: 12px;
}

.entry-content p{
  margin-bottom: 0.75em;
}

/* Q / A ボックス */
.qa-question,
.qa-answer{
  position: relative;
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: var(--mh-radius-md);
}
.qa-question{
  background: var(--mh-primary-soft);
  border: 1px solid rgba(37, 99, 235, .45);
}
.qa-question::before{
  content: "Q";
  position: absolute;
  left: 10px;
  top: -12px;
  padding: 3px 9px;
  border-radius: var(--mh-radius-pill);
  background: var(--mh-primary-strong);
  color: #FFFFFF;
  font-size: 0.74rem;
  font-weight: 800;
}
.qa-answer{
  background: #FFFDF5;
  border: 1px solid rgba(245, 158, 11, .55);
}
.qa-answer::before{
  content: "A";
  position: absolute;
  left: 10px;
  top: -12px;
  padding: 3px 9px;
  border-radius: var(--mh-radius-pill);
  background: var(--mh-accent);
  color: #78350F;
  font-size: 0.74rem;
  font-weight: 800;
}

/* blockquote */
.entry-content blockquote{
  margin: 16px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--mh-primary);
  background: #EFF3FF;
  border-radius: 0 var(--mh-radius-md) var(--mh-radius-md) 0;
  color: var(--mh-text-muted);
}

/* ----------------------------------
 * 7. サイドバー（横並びレイアウトはCocoon標準に任せる）
 * ---------------------------------- */

.sidebar,
#sidebar{
  /* 幅やfloatは触らない：Cocoonの2カラム設定をそのまま使う */
}

.sidebar .widget{
  background: var(--mh-surface);
  border-radius: var(--mh-radius-lg);
  border: 1px solid var(--mh-border-subtle);
  padding: 12px 12px 10px;
  margin-bottom: 14px;
  box-shadow: var(--mh-shadow-sm);
}
.sidebar .widget-title{
  margin: 0 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(148,163,184,.35);
  font-size: 0.92rem;
  font-weight: 700;
}

/* サイドバー検索 */
.widget_search .search-form{
  display: flex;
  gap: 6px;
}
.widget_search .search-field{
  flex: 1;
  border-radius: var(--mh-radius-pill);
  border: 1px solid rgba(148,163,184,.9);
  padding: 6px 10px;
  font-size: 0.84rem;
}
.widget_search .search-submit{
  border-radius: var(--mh-radius-pill);
  border: none;
  background: var(--mh-primary);
  color: #FFFFFF;
  padding: 6px 10px;
  font-size: 0.8rem;
}

/* リスト系 */
.sidebar .widget ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.sidebar .widget li{
  border-bottom: 1px solid rgba(148,163,184,.23);
  padding: 6px 0;
  font-size: 0.82rem;
}
.sidebar .widget li:last-child{
  border-bottom: none;
}

/* ----------------------------------
 * 8. ボタン・フォーム
 * ---------------------------------- */

button,
.button,
.wp-block-button__link,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  border-radius: var(--mh-radius-pill);
  border: none;
  background: var(--mh-primary);
  color: #FFFFFF;
  padding: 7px 16px;
  font-size: 0.88rem;
  font-weight: 700;
}
button:hover,
.button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover{
  filter: brightness(.96);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea,
select{
  border-radius: var(--mh-radius-md);
  border: 1px solid rgba(148,163,184,.85);
  padding: 6px 9px;
  font-size: 0.9rem;
  background: #FFFFFF;
}
textarea{
  min-height: 120px;
}

/* ----------------------------------
 * 9. パンくず
 * ---------------------------------- */

.breadcrumb{
  font-size: 0.8rem;
  color: var(--mh-text-soft);
  margin-bottom: 12px;
}
.breadcrumb a{
  color: var(--mh-primary-strong);
}

/* ----------------------------------
 * 10. ページネーション（丸ボタン＋青の現在ページ）
 * ---------------------------------- */

.pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 22px 0 24px;
}

/* 共通 */
.pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.86rem;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid rgba(148,163,184,.8);
  color: var(--mh-text-main);
  box-shadow: var(--mh-shadow-xs);
}

/* 数字 */
.pagination .page-numbers:not(.prev):not(.next){
  width: 40px;
  height: 40px;
}

/* 現在ページ */
.pagination .page-numbers.current{
  background: var(--mh-primary);
  border-color: var(--mh-primary);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(255,255,255,.8),
              0 7px 18px rgba(31,142,234,.45);
}

/* ... */
.pagination .page-numbers.dots{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--mh-text-soft);
}

/* 前へ・次へ */
.pagination .page-numbers.prev,
.pagination .page-numbers.next{
  width: auto;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
}

.pagination .page-numbers:hover{
  border-color: var(--mh-primary);
  color: var(--mh-primary-strong);
}
.pagination .page-numbers.prev:hover,
.pagination .page-numbers.next:hover{
  background: var(--mh-primary-soft);
}

/* ----------------------------------
 * 11. テーブル・コード
 * ---------------------------------- */

.entry-content table{
  border-collapse: collapse;
  width: 100%;
  border-radius: var(--mh-radius-md);
  overflow: hidden;
  box-shadow: var(--mh-shadow-sm);
  font-size: 0.88rem;
}
.entry-content table th,
.entry-content table td{
  border: 1px solid rgba(148,163,184,.55);
  padding: 6px 8px;
}
.entry-content table th{
  background: #EEF2FF;
}

.entry-content code{
  background: #F3F4F6;
  padding: 1px 4px;
  border-radius: 4px;
}
.entry-content pre{
  background: #111827;
  color: #E5E7EB;
  border-radius: var(--mh-radius-md);
  padding: 10px 12px;
  font-size: 0.82rem;
  overflow-x: auto;
}

/* ----------------------------------
 * 12. フッター
 * ---------------------------------- */

#footer{
  background: #020617;
  color: #9CA3AF;
  border-top: none;
}
#footer-in{
  padding: 14px 20px 18px;
}
#footer a{
  color: #E5E7EB;
}
#footer a:hover{
  opacity: .9;
}

/* ----------------------------------
 * 13. ダークモード（おまけ）
 * ---------------------------------- */

@media (prefers-color-scheme: dark){
  :root{
    --mh-body-bg: #020617;
    --mh-surface: #020617;
    --mh-surface-soft: #020617;
    --mh-border-subtle: rgba(15,23,42,.85);
    --mh-text-main: #E5E7EB;
    --mh-text-muted: #9CA3AF;
    --mh-text-soft: #6B7280;
  }
}

#block-4{
	display: none;
}

.fa-folder-open{
	display: none;
}
.pagination-next{
	display: none;
}

/* ==========================================
 * メインビジュアル（ヘッダー）をリデザイン
 * ========================================== */

#header{
  background: #1F8EEA;
  border-bottom: none;
  color: #E5E7EB;
  position: relative;
  overflow: hidden;
}

/* 背景に大きな「？」の薄いアイコンを重ねる */
#header::before{
  content: "?";
  position: absolute;
  right: -40px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
    background: rgb(255 255 255 / 40%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 120px;
    font-weight: 800;
    color: rgb(255 255 255 / 70%);
  pointer-events: none;
}

/* 中央寄せのヒーローっぽいレイアウトに */
#header-in{
  max-width: 960px;                /* ヘッダー内だけ少し細くする */
  margin: 0 auto;
  padding: 36px 20px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

/* 余計なマージンを消してスッキリ */
#header-in .logo,
#header-in .logo-image,
#header-in .site-name,
#header-in .site-description{
  margin: 0;
  padding: 0;
}

/* サイトタイトル */
.site-name,
.site-name-text,
.logo-site-title a{
  color: #FFFFFF !important;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* キャッチコピー */
.site-description{
  color: #E5E7EB;
  font-size: 0.9rem;
  letter-spacing: .05em;
  opacity: .92;
}

/* PCでヘッダーをちょっと低めにしたいならここで調整 */
@media (min-width: 1024px){
  #header-in{
    padding-top: 32px;
    padding-bottom: 36px;
  }
}

/* スマホでは少しコンパクトに */
@media (max-width: 768px){
  #header-in{
    padding: 26px 16px 30px;
  }
  .site-name,
  .site-name-text,
  .logo-site-title a{
    font-size: 1.4rem;
  }
  .site-description{
    font-size: 0.82rem;
  }
}

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

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

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