/* ---------------------------------------------------- */
/* 1. FONT IMPORT */
/* ---------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap');

/* ---------------------------------------------------- */
/* 2. CSS RESET AND GLOBAL SETTINGS */
/* ---------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    font-feature-settings: "palt"; 
}

a { 
    text-decoration: none; 
    color: inherit; 
}

ul, ol { 
    list-style: none; 
}

img { 
    max-width: 100%; 
    height: auto; 
    vertical-align: bottom; 
}

button { 
    background: none; 
    border: none; 
    cursor: pointer; 
}

/* ---------------------------------------------------- */
/* 3. REM BASE FONT SIZE & FONT FAMILY (更新箇所) */
/* ---------------------------------------------------- */

/* 全サイズ共通の基本設定 */
html {
    font-size: 10px; /* 1rem = 10px の基準 */
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    line-height: 1.7;
    color: #333; 
}

/* 記事内の基本フォントサイズ (1.6rem = 16px) */
body {
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.12em;
}

@media (min-width: 769px) {
    html {
        font-size: 10px; 
    }
}

h1 {
    font-family: 'Ubuntu', sans-serif; 
    font-weight: 500;
}

/* タイトルフォント Ubuntu */
h1, h2, h3, h4 {
    font-weight: 500;
}

/* ---------------------------------------------------- */
/* 4. LAYOUT: HEADER (固定) (更新箇所) */
/* ---------------------------------------------------- */

#header-fixed {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 6rem; 
    z-index: 100; 
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem; 
}

/* H1 (サイトタイトル) のフォントサイズ (1.8rem = 18px) */
.site-title a {
    font-size: 2rem;
    color: #E3805B; 
}

/* ハンバーガーメニューの基本構造 */
.hamburger {
    width: 3rem;
    height: 3rem;
    position: relative;
}
.hamburger span {
    display: block;
    position: absolute;
    width: 100%;
    height: 0.2rem;
    background-color: #333;
    transition: transform 0.3s, opacity 0.3s;
    left: 0;
}
.hamburger span:nth-child(1) { top: 0.8rem; }
.hamburger span:nth-child(2) { top: 1.4rem; }
.hamburger span:nth-child(3) { top: 2.0rem; }

/* Xになる動き */
.hamburger.is-active span:nth-child(1) { transform: translateY(0.6rem) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-0.6rem) rotate(-45deg); }

/* ヘッダー固定によるコンテンツの隠れを防ぐ余白 */
#header-padding {
    height: 6rem; 
}

/* ---------------------------------------------------- */
/* 5. LAYOUT: NAVIGATION (ハンバーガーメニュー) */
/* ---------------------------------------------------- */

/* ---------------------------------------------------- */
/* 5. LAYOUT: NAVIGATION (中央拡大アニメーション) (全面変更) */
/* ---------------------------------------------------- */

/* ナビゲーションメニューの初期位置（画面中央、縮小、透明） */
#category-nav {
    position: fixed;
    top: 50%; /* 中央寄せの基準点 */
    left: 50%; /* 中央寄せの基準点 */
    width: 100vw;
    height: 100vh; 
    z-index: 99; 
    background-color: rgba(248, 248, 248, 0.95); /* 半透明にして奥のコンテンツを少し隠す */
    
    /* 縮小と中央寄せ（初期状態） */
    transform: translate(-50%, -50%) scale(0);
    opacity: 0; 
    pointer-events: none; /* 非表示中はクリック操作を無効化 */
    
    /* 動きの滑らかさ (0.5秒かけてゆっくりと拡大・フェード) */
    transition: 
        opacity 0.5s ease,
        transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* 拡大に少し弾む動きを付与 */
    
    /* メニューコンテンツの装飾 */
    display: flex;
    justify-content: center;
    align-items: center;
}

#category-nav > div {
    /* 中央に配置し、中身が縦並びになるようにする */
    display: flex;
    flex-direction: column; /* 縦並びを明示 */
    justify-content: center;
    align-items: center;
    height: 100%; /* 全体の高さを使う */
}

/* メニューが開いた時の状態 */
#category-nav.is-open {
    opacity: 1; 
    transform: translate(-50%, -50%) scale(1); /* 全画面に拡大 */
    pointer-events: auto; /* 表示されたらクリック操作を有効化 */
}


/* リンクコンテンツのフェードイン設定 */

/* ナビゲーション内のUL (リンクの親要素) */
#category-nav ul {
    opacity: 0;
    transition: opacity 0.6s ease-in 0.5s;
    text-align: center;
    padding: 0;
}

/* 運営情報セクションの調整 */
#category-nav .nav-info {
    margin-top: 5rem; 
}

/* メニューが開いた後、リンクをふわっと表示 */
#category-nav.is-open ul {
    opacity: 1;
}

/* リンク自体の装飾 */
#category-nav li {
    padding: 1rem 0;
}
#category-nav a {
    font-size: 1.6rem; /* 大きめのフォントサイズ */
    font-weight: 500;
    color: #444;
}

/* PC時の設定 */
@media (min-width: 769px) {
    /* PCでもモバイルと同様にフルスクリーンメニューを適用 */
    /* 特に変更は不要ですが、メニューサイズが大きすぎる場合はここで調整可能です */
}

/* ---------------------------------------------------- */
/* 6. LAYOUT: MAIN CONTENT & PAGER (更新箇所) */
/* ---------------------------------------------------- */

article header {
    text-align:center;
}

#main-content {
    max-width: 74rem; 
    margin: 0 auto; 
    padding: 3rem 1rem;
}

#main-content p {
    margin-bottom: 2em; 
}

/* 記事内の見出しサイズ設定 */
h2 {
    font-size: 2.0rem; 
    margin-top: 3em; /* ADDED: 記事上部との余白 */
    margin-bottom: 1em; 
    text-align:left;
}
h3 {
    font-size: 1.8rem; 
    margin-top: 2.5em; 
    margin-bottom: 0.8em; 
}

/* NEW: 順序なしリスト (ul) の装飾 */
#main-content ul {
    margin: 2em 0 2em 2em; /* 段落と同様の縦マージンと左側へのインデント */
    list-style: none; /* 標準の黒丸を削除 */
}
#main-content ul li {
    margin-bottom: 0.8em; /* 項目間の余白 */
    padding-left: 0;
}
/* 独自の点（・）を付与 */
article ul li::before {
    content: "・"; 
    color: #777; /* 控えめな色 */
    font-weight: 500;
    margin-right: 0.5em;
    font-size: 1.4rem; /* サイズ調整 */
}

/* NEW: 順序付きリスト (ol) の装飾 */
#main-content ol {
    margin: 2em 0 2em 2.5em; /* 左側のインデントをやや多めに */
}
#main-content ol li {
    margin-bottom: 0.8em; /* 項目間の余白 */
    padding-left: 0.5em;
}

/* NEW: 引用ブロック (blockquote) の装飾 */
#main-content blockquote {
    margin: 4em auto; /* 上下に大きな余白 */
    padding: 1em 1em 1em 1.5em;
    border-left: 0.3rem solid #ddd; /* 控えめな縦のボーダー */
    font-size: 1.6rem; /* 本文より少し大きな文字 */
    color: #555; /* やや淡い色 */
    line-height: 1.6;
    font-style: italic; /* 斜体 */
    background-color: #fcfcfc; /* わずかな背景色 */
}

/* 引用内の要素のリセット */
#main-content blockquote p {
    margin-bottom: 0; 
}

/* 記事内のパディング */
.post-detail {
    padding: 0 1rem; 
}

/* NEW: 画像ブロックの基本設定 (figure要素) */
/* img要素に設定していたマージンや幅をfigureに移動 */
#main-content figure {
    max-width: 80%;
    height: auto;
    display: block; 
    margin: 4em auto; 
}

/* 記事内の img 要素 (figure内) */
/* imgの最大幅はfigureで制御されるため、個別の幅設定は削除 */
#main-content figure img {
    max-width: 100%;
    height: auto;
    display: block; 
    margin: 0 auto; /* figure内で画像自体を中央寄せ */
}

/* NEW: キャプション (figcaption) の装飾 */
#main-content figcaption {
    text-align: center;
    margin-top: 1rem; /* 画像との間に適度な余白 */
    font-size: 1.3rem; /* 控えめなサイズ (14px) */
    color: #999; /* 控えめな色 */
    line-height: 1.4;
    font-style: italic; /* 静かな雰囲気に合わせて斜体も検討 */
}

.pager-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 5rem;
    padding:2rem 1em 0;
    border-top: 1px solid #eee;
    font-size: 1.6rem; /* 16px */
}
.pager-nav a {
    color: #777;
    transition: color 0.2s;
}
.pager-nav a:hover {
    color: #333;
}

.affiliate-notice {
    text-align: center; /* 右寄せまたは中央寄せ */
    margin-top: 2rem;
    margin-bottom: 2rem;
    font-size: 1.3rem; /* 控えめなサイズ (12px) */
    color: #333; /* 控えめな色 */
}

/* 記事ヘッダーのメタ情報（日付とカテゴリ） */
article time {
    display: block;
    font-size: 1.4rem;
    color: #999;
    margin: 0.5em 0;
    text-align:right;
}

/* NEW: 記事のカテゴリ（日付の下、タイトルの上） */
.post-category {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 500;
    color: #777;
    margin:0 auto 1.5rem;
    background:#ececec;
    padding:.3em 1em .2em;
    border-radius:1em;
}

/* NEW: タグのリスト全体 (本文終了後) */
.post-tags-wrapper {
    margin-top: 1em;
    margin-bottom: 2em;
    border-top: 1px solid #eee; /* 本文との間に軽い区切り */
    padding-top: 0;
}
.post-tags {
    display: flex; /* タグを横並びにする */
    flex-wrap: wrap; /* タグが多すぎるときに折り返す */
    gap: 1rem; /* タグ間のスペース */
    font-size: 1.2rem; /* 控えめなサイズ (12px) */
    margin:2em 0!important;
}
.post-tags li {
    line-height: 1;
}
.post-tags a {
    color: #999;
    transition: color 0.2s;
}
.post-tags a:hover {
    color: #333;
}

@media screen and (max-width:768px){
    #main-content figure {
        max-width: 90%;
    }
}

/* ---------------------------------------------------- */
/* 7. LAYOUT: FOOTER */
/* ---------------------------------------------------- */

#footer {
    text-align: center;
    padding: 3rem 1rem;
    border-top: 1px solid #eee;
    font-size: 1.2rem; 
    color: #777;
}

/* ---------------------------------------------------- */
/* 8. ARCHIVE / CATEGORY PAGE (新規追加) */
/* ---------------------------------------------------- */

/* アーカイブページのヘッダー */
.archive-header {
    text-align: center;
    margin-bottom: 6rem; /* リストとの間に大きな余白 */
    padding-bottom: 2rem;
    border-bottom: 1px solid #eee; /* 薄い区切り線 */
}

.archive-subtitle {
    display: block;
    font-size: 1.2rem;
    color: #999;
    letter-spacing: 0.2em;
    margin-bottom: 1rem;
    text-transform: uppercase; /* 大文字に変換 */
}

.archive-title {
    font-size: 2.4rem;
    font-weight: 500;
    color: #333;
}

/* 記事リストコンテナ */
.post-list {
    margin-bottom: 6rem;
}

/* 個々の記事アイテム */
.post-item {
    margin-bottom: 4rem; /* アイテム間の余白 */
}

/* リンク全体をブロック化してクリックしやすく */
.post-link {
    display: block;
    padding: 2rem; /* ホバー時の余白確保 */
    margin: 0 -2rem; /* パディング分をネガティブマージンで相殺 */
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

/* ホバー時にほんのり背景色を変える */
.post-link:hover {
    background-color: #f9f9f9;
}

/* 日付 */
.post-item .post-meta time {
    font-size: 1.3rem;
    color: #999;
    display: block;
    margin-bottom: 0.5rem;
}

/* タイトル */
.post-item .post-title {
    font-size: 2.0rem;
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.4;
    transition: color 0.3s;
}

.post-link:hover .post-title {
    color: #555; /* ホバー時に少し色を薄くする */
}

/* 抜粋文 */
.post-excerpt {
    font-size: 1.4rem;
    color: #777;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    /* 長すぎる場合は省略記号などをつける運用も可 */
}

/* サムネイル画像 (ある場合) */
.post-thumb {
    margin: 1.5rem 0 0 0; /* タイトル下への余白 */
    width: 100%;
    height: 200px; /* 高さを固定 */
    overflow: hidden;
    background-color: #f0f0f0;
    border-radius: 2px;
}

.post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせてトリミング */
    transition: transform 0.5s ease;
}

/* ホバー時に画像をゆっくり拡大 */
.post-link:hover .post-thumb img {
    transform: scale(1.05);
}

/* ページャーの調整 (アーカイブ用) */
.archive-pager {
    justify-content: center; /* 中央寄せ */
    gap: 2rem; /* ボタン間の余白 */
}
.archive-pager .current-page {
    font-size: 1.4rem;
    color: #999;
    display: flex;
    align-items: center;
}

/* ---------------------------------------------------- */
/* 9. ABOUT PAGE (新規追加) */
/* ---------------------------------------------------- */

/* プロフィールヘッダー（中央寄せ） */
.about-header {
    text-align: center;
    margin-bottom: 6rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid #eee;
}

/* プロフィール画像 */
.profile-image {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem auto; /* 中央寄せ */
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* 丸くする */
    border: 1px solid #eee; /* 薄い枠線 */
}

/* 画像がない場合の代替スタイル（円形） */
.profile-image .no-image {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    color: #ccc;
    font-family: 'Ubuntu', sans-serif;
}

/* 名前 */
.profile-name {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    color: #333;
}

/* 肩書き・サブテキスト */
.profile-role {
    font-size: 1.4rem;
    color: #999;
    font-family: 'Ubuntu', sans-serif;
    letter-spacing: 0.05em;
}

/* 本文エリアの調整 */
.about-body {
    max-width: 60rem; /* 読みやすさのため、少し幅を狭める */
    margin: 0 auto;
}

.about-body h3 {
    text-align: center; /* 見出しを中央寄せにすると静かな印象になる */
    margin-top: 4rem;
    margin-bottom: 2rem;
    font-size: 1.8rem;
    color: #E3805B; /* サイトカラー（柿色）を使用 */
}

/* Aboutページ内の段落 */
.about-body p {
    margin-bottom: 2.5em;
}

/* ---------------------------------------------------- */
/* 10. PRIVACY POLICY PAGE (新規追加) */
/* ---------------------------------------------------- */

/* 本文エリア（Aboutページと同じ幅制限を使用） */
.privacy-body {
    max-width: 60rem;
    margin: 0 auto;
}

/* プライバシーポリシー独自の見出しスタイル */
.privacy-body h3 {
    font-size: 1.6rem;
    font-weight: 500;
    color: #E3805B; /* 柿色 */
    margin-top: 4rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee; /* 下線をつけて区切りを明確に */
    text-align: left; /* 文書なので左寄せ */
}

/* 本文 */
.privacy-body p {
    margin-bottom: 2em;
    font-size: 1.4rem; /* 少しだけ小さくして事務的な圧迫感を減らす */
    line-height: 1.8;
}

/* 制定日 */
.privacy-body .policy-date {
    margin-top: 6rem;
    text-align: right;
    color: #999;
    font-size: 1.2rem;
}

/* ---------------------------------------------------- */
/* 11. UTILITY & SHORTCODE STYLES (ブログカード) */
/* ---------------------------------------------------- */

.blogcard {
    margin: 4em auto; /* 上下に大きな余白 */
    border: 1px solid #eee; /* 薄い枠線 */
    border-radius: 6px;
    overflow: hidden;
    max-width: 60rem; /* 記事本文より少し狭く、中央配置 */
}

.blogcard a {
    display: block;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease;
}

.blogcard a:hover {
    background-color: #fcfcfc; /* ホバーでわずかに色を変化 */
}

.blogcard-wrapper {
    display: flex;
    min-height: 100px;
}

/* サムネイル画像エリア */
.blogcard-thumbnail {
    flex-shrink: 0;
    width: 30%; /* 幅を固定 */
    overflow: hidden;
    background-color: #f8f8f8;
}

.blogcard-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* テキストエリア */
.blogcard-texts {
    flex-grow: 1;
    width: 70%;
    padding: 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* タイトル (柿色をアクセントに) */
.blogcard-title {
    font-size: 1.6rem;
    line-height: 1.5;
    margin: 0 0 0.5rem 0;
    color: #E3805B; /* 柿色 */
    font-weight: 500;
}

/* URL表示 (控えめな色) */
.blogcard-url {
    font-size: 1.2rem;
    color: #999;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /* URLが長い場合は省略 */
}

/* レスポンシブ対応 (モバイルでは縦並びにする) */
@media (max-width: 768px) {
    .blogcard-wrapper {
        flex-direction: column;
    }
    .blogcard-thumbnail,
    .blogcard-texts {
        width: 100%;
        padding: 1rem 1.5rem;
    }
    .blogcard-thumbnail {
        height: 120px;
    }
}

/* ---------------------------------------------------- */
/* 12. UTILITY & SHORTCODE STYLES (AdSense) */
/* ---------------------------------------------------- */

/* [adsense] ショートコードによって出力される <p> 要素 */
.entry-content p:has(.adsbygoogle) {
    /* 記事本文の左右マージンを超えて幅を取る */
    max-width: 100%;
    
    /* 上下の余白を大きく取り、広告と本文を区切る */
    margin: 6em auto; 
    
    /* 記事本文の幅より少し広くすることで、広告の存在感を示す */
    width: calc(100% + 4rem); 
    margin-left: -2rem; 
    margin-right: -2rem; 
    
    /* 薄い線で囲み、広告ブロックであることを明確にする */
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    padding: 3rem 0; /* 内部にも余白 */
    
    /* 記事本文内のテキストと広告ブロックの背景を分ける */
    background-color: #fafafa; 
    text-align: center; /* 広告要素を中央寄せ */
}

/* 広告ブロック内のインライン要素の装飾（任意） */
.adsbygoogle-label {
    display: block;
    font-size: 1.2rem;
    color: #bbb;
    margin-bottom: 1rem;
}


/* レスポンシブ対応 (モバイルでは幅の調整を解除) */
@media (max-width: 768px) {
    .entry-content p:has(.adsbygoogle) {
        width: 100%; /* 幅の拡張を解除 */
        margin-left: auto;
        margin-right: auto;
        padding: 2rem 0;
    }
}

/* ---------------------------------------------------- */
/* 99. PAGER FIX (TOPページ用) */
/* ---------------------------------------------------- */

/* TOPページなどで不要な「次の記事」側の要素を完全に非表示にする */
.pager-nav .next-post.empty-placeholder {
    visibility: hidden; /* 要素の領域は確保しつつ、見えなくする */
    pointer-events: none;
}