/*
 Theme Name: Hello Elementor Child
 Template: hello-elementor
 Version: 0.1.3
 Description: 骨格のみ。装飾最小。後付けプラグイン用プレースホルダを含む。
*/
:root{
  --color-bg:#fff; --color-text:#111; --color-accent:#0a66c2;
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem;
  --radius-1:.5rem; --radius-2:1rem;
  --font-body:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --font-heading:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --max-w:1120px;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#f4f4f4;              /* ページ全体の背景色 */
  color:var(--color-text);
  font-family:var(--font-body);
  line-height:1.6;
}

main.container{
  background:var(--color-bg);  /* = #fff */
}

img{max-width:100%;height:auto;display:block}
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--space-2)}
.site-header,.site-footer{border-top:1px solid #eee;border-bottom:1px solid #eee;background:#fafafa}
.section{padding:var(--space-3) 0}
.layout{display:grid;gap:var(--space-3);grid-template-columns:1fr}
@media(min-width:1024px){.layout{grid-template-columns:3fr 1.2fr}}
a{color:var(--color-accent);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:none;border-top:1px solid #eee;margin:var(--space-3) 0}

.site-header .site-branding{padding:var(--space-2) 0}
.site-footer .container{padding:var(--space-2) 0;color:#666;font-size:.9rem}

/* ---- nav ---- */
.nav{display:flex;gap:var(--space-2);flex-wrap:wrap}
.nav a{padding:.25rem .5rem;border-radius:.375rem}
.nav a:hover{background:#f3f4f6}

/* ---- cards ---- */
.post-row-inner{display:grid;grid-template-columns:120px 1fr;gap:var(--space-2);align-items:start}
.post-row .thumb{width:120px;height:80px;background:#eee;overflow:hidden;border-radius:.5rem}
.post-row .thumb a{display:block;width:100%;height:100%}
.post-row .thumb img{width:100%;height:100%;object-fit:cover}
.post-row .meta{color:#666;font-size:.9rem}

/* 一覧カード内の本文部分 */
.archive-list .post-row .card-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.25rem;
}

/* 記事タイトル：18px */
.archive-list .post-row .title{
  margin:.25rem 0 0;
  font-size:18px;
}

/* タイトルのリンク：下線なし、色変化のみ */
.archive-list .post-row .title a{
  color:var(--color-accent);
  text-decoration:none;
}
.archive-list .post-row .title a:hover{
  text-decoration:none;
  color:#084c93; /* 少しだけ濃くする */
}

/* 「続きを読む」を右下に寄せる */
.archive-list .post-row .read-more-wrap{
  margin-top:auto;
  align-self:flex-end;
}
.archive-list .post-row .read-more{
  font-size:.9rem;
}


.post-card{display:grid;gap:.5rem}
.post-card .thumb{width:100%;aspect-ratio:16/9;background:#eee;border-radius:.5rem;overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .meta{color:#666;font-size:.9rem}

/* ---- sidebar ---- */
.sidebar .widget{background:#fff;border:1px solid #eee;border-radius:.75rem;padding:var(--space-2)}
.sidebar .widget + .widget{margin-top:var(--space-3)}
.sidebar h2{margin:0 0 .5rem;font-size:1rem}

/* ---- search ---- */
.search-form{display:flex;gap:.5rem}
.search-form input[type="search"]{flex:1;padding:.5rem .75rem;border:1px solid #ccc;border-radius:.5rem}
.search-form button{padding:.5rem .75rem;border:1px solid #ccc;border-radius:.5rem;background:#fff}

/* ---- archive ---- */
.archive-list{display:grid;gap:var(--space-3)}
.archive-list .post-row{padding-bottom:var(--space-2);border-bottom:1px solid #eee}

/* ---- antenna ---- */
.antenna{display:block}
.antenna .antenna-list{display:grid;gap:.5rem}
.antenna .antenna-list a{display:block;padding:.25rem .5rem;border:1px solid #e5e7eb;border-radius:.375rem;background:#fff}
.antenna--global{margin:.5rem 0 1rem}
.antenna--above,.antenna--below{margin:1rem 0}
.antenna--above .antenna-list a:hover,
.antenna--below .antenna-list a:hover{
  text-decoration:underline;
}

/* プレースホルダ枠（必要に応じて削除可） */
[class^="slot-"],[class*=" slot-"]{
  border:1px dashed #bbb;border-radius:var(--radius-1);padding:var(--space-2);color:#666;background:#fff
}
.slot-popular::before{content:"[popular posts placeholder]"}
.slot-ad--front-bottom::before{content:"[ad:front-bottom]"}
.slot-ad--archive-bottom::before{content:"[ad:archive-bottom]"}
.slot-ad--inpost::before{content:"[ad:inpost]"}
.slot-comments::before{content:"[comments placeholder]"}
.slot-toc::before{content:"[toc placeholder]"}

.slot-ad--sidebar-top::before{content:"[ad:sidebar-top]"}
.slot-ad--front-top-mobile::before{content:"[ad:front-top-mobile]"}
.slot-ad--single-top-mobile::before{content:"[ad:single-top-mobile]"}
.slot-ad--rail-left::before{content:"[ad:rail-left]"}
.slot-ad--rail-right::before{content:"[ad:rail-right]"}

/* ---- article (single) ---- */
.article-head .article-title{margin:.5rem 0 0;font-size:1.5rem}
.post-hero{margin:var(--space-2) 0 0}
.post-hero img{width:100%;height:auto;object-fit:cover;aspect-ratio:16/9}
.article-body .content > *{max-width:100%}

/* ---- vertical spacing between blocks ---- */

/* グローバルアンテナ・投稿上部広告と下のブロックの間 */
.slot-antenna-global,
.slot-ad--front-top-mobile,
.slot-ad--single-top-mobile{
  margin-bottom: var(--space-3); /* デフォルト 1.5rem */
}

/* メインカラム内（記事ヘッダー／アンテナ／本文／下部アンテナ／コメント） */
.main-area > *:not(:last-child){
  margin-bottom: var(--space-3);
}

/* サイドバー内（広告・プロフィール・人気記事など） */
aside.section > *:not(:last-child){
  margin-bottom: var(--space-3);
}


/* ---- Ad slots ---- */

/* サイドバー上部（PC・モバイル共通 / 高さ300） */
.slot-ad--sidebar-top{
  min-height:300px;
}

/* トップページ上部（モバイルのみ / 高さ300） */
.slot-ad--front-top-mobile,
.slot-ad--single-top-mobile{
  display:none;
}

@media(max-width:960px){
  .slot-ad--front-top-mobile,
  .slot-ad--single-top-mobile{
    display:block;
    min-height:300px;
  }
}

/* PC用サイドレール（左右固定 / 200×500） */
.slot-ad--rail{
  width:200px;
  height:500px;
  box-sizing:border-box;
  display:none;
}

@media(min-width:1560px){
  .slot-ad--rail{
    display:block;
    position:fixed;
    top:160px;
    z-index:1000;
  }
  .slot-ad--rail-left{
    left:calc(50% - (var(--max-w) / 2) - 220px);  /* 本文左側に配置 */
  }
  .slot-ad--rail-right{
    right:calc(50% - (var(--max-w) / 2) - 220px); /* 本文右側に配置 */
  }
}


/* 基本タイポ */
h1,h2,h3{font-family:var(--font-heading);line-height:1.25}

/* ---- fix: prevent sidebar from shrinking on single and other pages ---- */
.layout > section{min-width:0;}
.entry-content,.content{word-break:break-word;overflow-wrap:anywhere;}
.entry-content img,.content img{max-width:100%;height:auto;}
@media(max-width:960px){.layout{display:block;}}

/* Popular posts ranking (sidebar) */
.mmm-popular-posts{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}

.mmm-popular-post{
  display:flex;
  gap:.5rem;
  align-items:flex-start;
}

.mmm-popular-thumb img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:.25rem;
}

.mmm-popular-body{
  font-size:.9rem;
}

.mmm-popular-title{
  display:block;
  text-decoration:none;
}

.mmm-popular-title:hover{
  text-decoration:underline;
}

.mmm-popular-comments{
  display:block;
  font-size:.8rem;
  color:#666;
}

/* メインコンテンツの土台を外側と同じ色にする */
main.container{
  background:#f4f4f4;
}

/* 記事ヘッダーと本文を白いカードとして独立させる */
.article-head,
.article-body{
  background:#fff;
  border-radius:var(--radius-1);
  padding:var(--space-2);
}

/* サイトタイトル＋タグライン */
.site-brand{
  color:var(--color-text);
}

/* キャッチフレーズ（上） */
.site-brand .site-tagline{
  display:block;
  font-size:16px;
  line-height:1.4;
  color:#666;
  margin-bottom:0.5rem;   /* ← タグラインとサイト名の間隔を広げる */
}

/* サイト名（下） */
.site-title-link{
  text-decoration:none;          /* 下線なし */
  color:var(--color-text);
}
.site-title{
  display:block;
  font-size:40px;
  line-height:1.1;
  font-weight:700;
}

/* ホバー時：下線なしで色だけ変更 */
.site-title-link:hover{
  text-decoration:none;
  color:#084c93;                 /* 好みで調整可 */
}

/* 1) global antenna と layout section の間隔を狭める */
.slot-antenna-global{
  padding-bottom:var(--space-1);  /* 下パディングを小さく */
  margin-bottom:var(--space-1);   /* 余白も小さく */
}

.layout.section{
  padding-top:var(--space-1);     /* 下のレイアウトの上パディングも小さく */
}

/* 2) article-head と aside の上端をそろえる（サイドバーの上パディングを削る） */
aside.section{
  padding-top:0;
}

/* 3) ヘッダーとフッターの背景色を外側と同じにする */
.site-header,
.site-footer{
  background:#f4f4f4;
}

/* global antenna と layout の間隔を 24px に固定 */
.slot-antenna-global{
  margin-bottom:24px;
}

.layout.section{
  padding-top:0;
  margin-top:0;
}

/* トップページの記事一覧全体（箱） */
.archive-list{
  background:#ffffff;
  border-radius:var(--radius-1);
  padding:var(--space-2);
}

/* 記事一覧：1件ごとのレイアウト調整 */
.archive-list .post-row{
  padding:0;
  border:none;
}

/* 1件の中身の箱 */
.archive-list .post-row-inner{
  display:grid; /* 念のため指定しておく */
  grid-template-columns:120px 1fr;
  gap:var(--space-2);
  align-items:stretch;
  background:#f4f4f4;            /* 内側の背景 */
  border-radius:var(--radius-1);
  padding:var(--space-2);
  height:176px;                  /* 高さ 176px 固定 */
  box-sizing:border-box;
}

/* テキスト側 */
.archive-list .post-row .card-body{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* 左：日付・カテゴリ ／ 右：コメント数 */
.archive-list .post-row .row-meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.archive-list .post-row .comments-count{
  font-size:.85rem;
  color:#666;
}

/* タイトル：日付・カテゴリより少し下に */
.archive-list .post-row .title{
  margin:16px 0 0;   /* 上だけ 16px 開ける */
  font-size:18px;
}

/* 続きを読むを右下へ */
.archive-list .post-row .read-more-wrap{
  margin-top:auto;
  align-self:flex-end;
}

/* トップページの記事一覧コンテナ */
.archive-list{
  background:#f4f4f4;                /* 背景色 */
  border-radius:var(--radius-1);
  padding:0 var(--space-2);          /* 上下 0・左右だけ余白 */
}

/* 記事1件ぶんのカード */
.archive-list .post-row{
  width:100%;                        /* 横幅いっぱい */
  padding:0;
  border:none;
}

/* 内側の箱を白背景に */
.archive-list .post-row-inner{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:var(--space-2);
  align-items:stretch;
  background:#ffffff;                /* カード本体を白に */
  border-radius:var(--radius-1);
  padding:var(--space-2);
  height:176px;                      /* 高さ 176px のまま */
  box-sizing:border-box;
}
/* 左：日付+カテゴリ ／ 右：コメント数 */
.archive-list .post-row .row-meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-start; /* 右上寄せ */
}

.archive-list .post-row .comments-count{
  font-size:.85rem;
  color:#666;
}

/* サムネイルをカードの上下いっぱいまで伸ばす */
.archive-list .post-row .thumb{
  width:120px;
  height:100%;                  /* 行の高さに合わせる */
  background:#eee;
  overflow:hidden;
  border-radius:.5rem;
}

.archive-list .post-row .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;             /* はみ出しはトリミング */
}

/* タイトルをメタより少し下に */
.archive-list .post-row .title{
  margin:16px 0 0;              /* 上に 16px の余白 */
  font-size:18px;
}

/* 記事1件ぶんのカード本体 */
.archive-list .post-row{
  width:100%;
  padding:0;
  border:none;
}

/* 内側の箱：カード */
.archive-list .post-row-inner{
  display:grid;
  grid-template-columns:240px 1fr;      /* サムネイル 240px + 本文 */
  gap:var(--space-2);
  align-items:stretch;
  background:#ffffff;                   /* カードの背景 */
  border-radius:var(--radius-1);
  padding:var(--space-1);               /* 8px 相当 */
  height:176px;
  box-sizing:border-box;
}

/* サムネイル枠 */
.archive-list .post-row .thumb{
  width:240px;
  height:160px;
  background:#eee;
  overflow:hidden;
  border-radius:.5rem;
}

/* 画像を枠いっぱいに */
.archive-list .post-row .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* テキスト側の基本レイアウト */
.archive-list .post-row .card-body{
  display:flex;
  flex-direction:column;
  height:100%;
}

/* 左：日付+カテゴリ ／ 右：コメント数 */
.archive-list .post-row .row-meta{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin:0;
}

.archive-list .post-row .meta{
  margin:0;
}

/* タイトル：メタから 16px 下げる */
.archive-list .post-row .title{
  margin:16px 0 0;
  font-size:18px;
}