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

/************************************
** Google Fonts の読み込み
************************************/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

/************************************
** 1. 全体の基本設定（フォント・太字対策・H1）
************************************/
body {
    font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Meiryo", "メイリオ", sans-serif !important;
    font-weight: 400 !important; 
    color: #222 !important; 
    letter-spacing: 0.03em;
}

/* 全てのページタイトル（H1）のサイズとスタイルを強制統一 */
.entry-title,
.entry-title a,
.entry-title span,
.archive-title,
.page-title,
.page-template-page-discography .entry-title,
.page-template-page-discography h1.page-title {
    font-family: 'Playfair Display', 'Noto Serif JP', serif !important;
    font-weight: 400 !important; 
    
    /* ★サイズを「1.6rem」で固定（もし大きければ 1.6rem に下げてください） */
    font-size: 1.6rem !important; 
    
    color: #555 !important; 
    letter-spacing: 0.15em !important; 
    line-height: 1.4 !important;
    
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 40px !important;
    text-align: left !important; /* 左寄せで統一 */
    
    /* 以前のマイナスマージンや幅指定を完全にリセット */
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
}

.entry-title::before, .entry-title::after { display: none !important; 
}

/* モバイル（スマホ）の時だけ、本文内の画像を少し小さくして中央に寄せる */
@media screen and (max-width: 480px) {
  .entry-content img {
    max-width: 80% !important; /* 100%から80%に抑える（お好みで変更可） */
    height: auto !important;
    display: block !important;
    margin: 2em auto !important; /* 上下に余白（2em）を作り、左右は中央寄せ */
  }
}

/************************************
** 2. 見出し（H2〜H6）のデザイン
************************************/
/* H2: セクション区切り（一本化して整理） */
.article h2, #main .entry-content h2,
.page-template-page-discography h2 {
    /* フォント設定：サイズを少し小さく、字間をより広く */
    font-family: 'Shippori Mincho', serif !important;
    font-weight: 300 !important;
    font-size: 1.35rem !important; /* 1.5remから少し小ぶりに */
    letter-spacing: 0.25em !important; /* 0.15emから広げて「幅」を出す */
    color: #444 !important;
    border: none !important;
    text-align: center;
    /* --- 背景のグラデーション：上は白(0.9)、下はほぼ透明(0.1) --- */
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 255, 255, 0.1) 100%
    ) !important;
    /* グラデーションにする場合、影（box-shadow）は薄めの方が綺麗です */
    box-shadow: 0 2px 10px rgba(0,0,0,0.01) !important; 
    /* 角丸や余白の設定 */
    border-radius: 40px 40px 0 0 !important;
}

/* H2の下の飾り線 */
.article h2::after, .page-template-page-discography h2::after {
    content: ""; 
    display: block; 
    width: 100px;
    height: 1px; 
    background: linear-gradient(to right, transparent, #bbb, transparent);
    margin: 2.5rem auto 0;
}

/* H3: 繊細な左線 ＋ 存在感のある下線 */
.article h3, #main .entry-content h3,
.page-template-page-discography h3 {
    font-family: 'Shippori Mincho', serif !important;
    font-weight: 400 !important;
    font-size: 1.25rem !important;
    color: #444 !important;
    
    background: transparent !important; 
    border: none !important;
    
    /* ラインの強弱：繊細に */
    border-left: 1px solid #724832 !important;   /* 左線は 1px で補足 */
    border-bottom: 1px solid #724832 !important; /* 下線を 1px で */
    
    /* 余白：文字が線に沈まないよう調整 */
    padding: 2px 0 10px 15px !important; 
    margin: 3em 0 1.5em !important; 
    
    border-radius: 0 !important; 
    letter-spacing: 0.08em !important;
    display: block !important; /* 線を横いっぱいに引く */
}

/* H4-H6: 共通設定（太字解除・余白詰め） */
.article h4, .article h5, .article h6,
#main .entry-content h4, #main .entry-content h5, #main .entry-content h6,
.page-template-page-discography h4, 
.page-template-page-discography h5, 
.page-template-page-discography h6 {
    font-weight: 300 !important;
    letter-spacing: 0.1em !important;
    color: #555 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    margin-bottom: 0.2em !important; 
}

.article h4, .page-template-page-discography h4 { font-size: 1.1rem !important; margin-top: 2em !important; }
.article h4::before, .page-template-page-discography h4::before { color: #888; font-size: 0.8em; margin-right: 0.5em; }

.article h5, .page-template-page-discography h5 { font-size: 1rem !important; margin-top: 1.5em !important; }
.article h5::before, .page-template-page-discography h5::before { content: "☘"; color: #555; font-size: 1em; margin-right: 0.2em; }

.article h6, .page-template-page-discography h5 { font-size: 1rem !important; margin-top: 1.5em !important; }

/* 見出し直後の段落（インデントと余白詰め） */
.entry-content h3 + p, .entry-content h4 + p, .entry-content h5 + p, .entry-content h6 + p {
    padding-left: 2em !important;
    margin-top: 0 !important; 
    padding-top: 0 !important;
}

/* スマホ対応の追加調整 は下に移動 */

/************************************
** 3. 本文内のリスト（箇条書き）カスタム
************************************/
/* 元の「・」を消して余白を調整 */
.entry-content ul {
    list-style: none !important;
    padding-left: 1.5em !important;
    margin: 1.5em 0 !important;
}

/* 独自の記号を表示 */
.entry-content ul li {
    position: relative;
    line-height: 1.8; /* 行間を少し広げて読みやすく */
    margin-bottom: 0.5em;
    color: #444;
}

.entry-content ul li::before {
    /* ここで記号を変えられます */
    content: "⬥"; 
    position: absolute;
    left: -1.2em; /* 記号の位置 */
    font-weight: 300;
    opacity: 0.8; /* 少し透かして上品に */
}

/* 番号付きリスト（1. 2. 3.）との干渉を防ぐ */
.entry-content ol {
    padding-left: 1.5em !important;
    margin: 1.5em 0 !important;
}

/* パンくずリストがある場合、その下の余白も詰める */
.breadcrumb { margin-bottom: 10px !important; }


/************************************
** 4. コンテンツ枠の背景透過設定
************************************/
#container, #main-shell, #content, .content, .inner, .article, .post, .entry-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.main {
    background-color: rgba(255, 255, 255, 0.5) !important; 
    padding: 30px 40px 60px !important;
    margin: 40px auto !important;
    
    /* --- ★ここを 900px から 1000px へ --- */
    max-width: 1000px; 
    
    border-radius: 2px;
}

/* =================================================================
   5. Item Grid: Horizontal (1.5列) & YouTube 統合対策
   (is-horizontal / is-large / 通常2列 の3モード対応)
================================================================= */

/* --- A. グリッド全体の設定 --- */
.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 通常は2列 */
    gap: 40px; /* 余白を少し広げて品良く */
    padding: 20px 0;
    max-width: 1000px;
    margin: 0 auto;
}

/* --- B. カード共通のデザイン --- */
.item-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 30px;
    box-sizing: border-box;
    overflow: hidden;
    height: fit-content;
}

/* --- D. タイトルと本文（通常モード） --- */
.item-title {
    font-family: 'Playfair Display', 'Noto Serif JP', serif !important;
    font-weight: 600 !important;
    font-size: 1.3rem !important;
    color: #444 !important;
    margin-bottom: 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    padding-bottom: 10px !important;
}

.item-content {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
}
/* =================================================================
   ★Horizontalモード：動画サイズ抑制・横並び固定版
================================================================= */

@media screen and (min-width: 768px) {
    /* 1. 親：カードを1枚ずつ縦に並べる（2列を解除） */
    .item-grid.is-horizontal {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        max-width: 850px !important; /* 全体の幅を少し絞るとより上品です */
        margin: 0 auto !important;
        gap: 50px !important;
    }

    /* 2. カード：中身を「横並び」に固定 */
    .item-grid.is-horizontal .item-card {
        display: flex !important;
        flex-direction: row !important; /* 常に[動画][文字]の順 */
        align-items: flex-start !important; /* 文字の開始位置を上に揃える */
        gap: 40px !important;
        padding: 35px !important;
        width: 100% !important;
        background: #fff;
    }

 /* --- 修正版：3. 動画のサイズ --- */
    .item-grid.is-horizontal .item-card .wp-block-embed-youtube,
    .item-grid.is-horizontal .item-card figure.wp-block-embed {
        flex: 0 0 50% !important; 
        max-width: 50% !important;
        margin: 0 !important;
       /* アスペクト比を維持して下切れを防ぐ */
      display: block !important;
      width: 100% !important;
     aspect-ratio: 16 / 9 !important; /* 動画の標準比率を強制 */
    }

   /* 内部のiframeも親の高さ（16:9）いっぱいに広げる */
    .item-grid.is-horizontal .item-card figure.wp-block-embed iframe {
          width: 100% !important;
          height: 100% !important;
          display: block !important;
    }

    /* 4. 文字エリア：残りの半分を使う */
    .item-grid.is-horizontal .item-card .item-content,
    .item-grid.is-horizontal .item-card .wp-block-group {
        flex: 1 !important;
        text-align: left !important;
    }

    /* タイトルと文字の微調整 */
    .item-grid.is-horizontal .item-title {
        margin-top: 0 !important;
        font-size: 1.25rem !important;
        border-bottom: 1px solid #eee !important;
        padding-bottom: 10px !important;
    }
}


/* スマホでは動画を大きく、縦並びに見せる */
@media screen and (max-width: 480px) {
    .item-grid.is-horizontal .item-card {
        display: block !important;
    }
}

/* =================================================================
   ★既存モード：is-large (1列・重厚表示)
   【ショートコードで mode="large" を指定】
================================================================= */
.item-grid.is-large {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    max-width: 960px !important; 
}

.item-grid.is-large .item-card {
    width: 100% !important;
    margin-bottom: 60px !important;
    padding: 40px !important;
}

.is-large .item-title {
    font-size: 1.5rem !important;
    text-align: center !important;
}

/************************************
** 6. Event投稿タイプの個別記事設定
*************************************/
/* 記事タイトルは非表示 ******/
.single-event .entry-title {
    display: none !important;
}

/* タイトルを消した後の余白の微調整 */
.single-event .article-header {
    display: none !important; /* ヘッダーエリアごと消す場合 */
}

.single-event .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 「戻る」リンク：上下共通の基本スタイル */
.back-to-list { 
    text-align: center; 
    margin: 40px 0; /* 上下の余白を均等に */
}

/* 本文より「下」の戻るリンクだけ、点線を入れる */
.entry-content .back-to-list:last-child {
    border-top: 1px dotted #ddd; 
    padding-top: 30px;
    margin-top: 80px; 
}

/* 本文より「上」の戻るリンクは、点線なしでシンプルに */
.entry-content .back-to-list:first-child {
    border-bottom: none;
    margin-bottom: 20px; /* H2見出しとの距離 */
}

/************************************
** 7. イベントリスト共通スタイル
************************************/
.event-card {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* イベント画像：サイズを少し絞って上品に */
.event-img { 
    width: 110px; 
    flex-shrink: 0; 
}
/* イベント画像の影を無効化 */
.event-img, 
.event-img img, 
.event-img .is-large-shadow,
.event-card .post-thumbnail img {
    box-shadow: none !important;
}

/* 日付・エリア ************************/
.event-meta {
    font-size: 1rem !important; 
    color: #444 !important;
    margin-bottom: 10px;
    letter-spacing: 0.08em;
}

.event-notice { color: #c66; font-weight: bold; margin-left: 10px; }

.event-title {
    font-size: 1.1rem !important; 
    color: #333;
    line-height: 1.5;
    margin-bottom: 8px;
    font-family: 'Shippori Mincho', serif !important;
}
.event-title a { color: inherit; text-decoration: none; }

.event-subtitle {
   font-size: 1rem; 
    color: #333;
    margin-bottom: 8px;
   font-family: 'Shippori Mincho', serif !important;
}

.event-place { font-size: 0.95em; color: #555;  margin-bottom: 8px; }

/* 詳細ボタン：枠線のみの軽やかなスタイル */
.event-link-button { margin-top: 20px; } /* 少し間隔を広げました */
.event-link-button a {
    display: inline-block;
    background: transparent !important; /* 背景色を消す */
    border: 1px solid #7a6e5f !important; /* 枠線を茶色に */
    color: #7a6e5f !important;            /* 文字色を茶色に */
    text-decoration: none;
    padding: 6px 20px;
    font-size: 0.85em;
    border-radius: 2px;
    transition: 0.3s;
    letter-spacing: 0.1em;
}

/* ホバー時の動き（ふんわり色を付ける） */
.event-link-button a:hover {
    background: rgba(122, 110, 95, 0.05) !important; /* 薄い茶色の敷き色 */
    border-color: #5a4e3f !important;            /* 枠線を少し濃く */
    color: #5a4e3f !important;                   /* 文字色を少し濃く */
}

/* PC表示（769px以上）のときだけ適用 */
@media screen and (min-width: 769px) {
  .event-link-button a {
    display: inline-block;   /* 幅を指定できるようにする */
    min-width: 200px;        /* ボタンの最低横幅（お好みで調整してください） */
    padding: 10px 24px;      /* 上下と左右の余白を少し広げる */
    text-align: center;      /* 文字を中央に */
    text-decoration: none;   /* 下線を消す */
    transition: all 0.3s;    /* ホバー時の動きを滑らかに */
  }

  /* ホバー時に少し色を濃くしたり変化させたい場合（任意） */
  .event-link-button a:hover {
    opacity: 0.8;
  }
}

/* スマホ時：情報を上に、画像を下に ***************/
@media screen and (max-width: 480px) {
    /* 1. カード全体の隙間を少し詰める */
    .event-card {
        gap: 15px; /* 30pxから15pxに短縮 */
    }

    .event-info {
        order: 1;
        min-width: 100%;
    }

    /* 2. 日付周りの注釈（赤字）の設定 */
    .event-meta .event-notice {
        display: block;
        margin-top: 5px;
        margin-left: 0;
        padding-left: 0; /* 左余白をリセットしてスッキリ */
        font-size: 0.9em;
        color: #c66;
    }

    /* 3. 詳細ボタン：ボタン自体の上の余白を詰める */
    .event-link-button {
        margin-top: 10px; /* 20pxから10pxに短縮 */
    }

    .event-link-button a {
        display: block;
        text-align: center;
    }
    
    /* 4. 画像表示：ボタンとの間隔をさらに調整 */
    .event-img { 
        order: 2; 
        width: 100px !important;
        margin-top: 0; /* ボタンとの距離を最小限に */
        margin-bottom: 10px;
    }

    /* 画像本体の影を確実に消す */
    .event-img img {
        box-shadow: none !important;
    }
}

/* 年ナビゲーター ********************************/
.year-selector {
    margin-bottom: 40px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.year-selector a {
    text-decoration: none;
    /* 修正：基本は文字幅に合わせ、最小幅を確保する */
    display: inline-block;
    padding: 8px 15px; /* 左右に少し余裕を持たせる */
    text-align: center;
    border-radius: 2px;
    font-size: 0.9em;
    background: rgba(0,0,0,0.05);
    color: #666;
    transition: 0.3s;
    white-space: nowrap; /* 絶対に改行させない */
}

/* PCなどの広い画面では、これまで通り綺麗に並べる（任意） */
@media screen and (min-width: 768px) {
    .year-selector a {
        width: calc(100% / 6 - 10px);
        padding: 8px 0;
    }
}

/* スマホなど狭い画面用の微調整 */
@media screen and (max-width: 767px) {
    .year-selector {
        gap: 8px; /* 隙間を少し詰める */
        justify-content: flex-start; /* 左詰めに配置 */
       margin-bottom: 15px !important; /* 40pxから大幅に短縮 */
        padding-bottom: 10px !important; /* 線とボタンの距離も少し詰める */        
    }
    .year-selector a {
        flex: 0 0 auto; /* 幅を固定せず中身に合わせる */
        font-size: 0.85em; /* 少しだけ文字を小さくして収まりを良くする */
    }
}

.year-selector a.is-active { background: #555; color: #fff; font-weight: bold; 
}

/* その他 *************************/
.event-separator { border: 0; border-top: 1px dotted #ccc; margin: 20px 0; }

/* 「戻る」リンク：視認性を高めた上品なスタイル */
.back-to-list { 
    margin: 80px 0 30px; 
    text-align: center; 
    border-top: 1px dotted #ddd; 
    padding-top: 30px; 
}

.back-to-list a { 
    color: #7a6e5f; 
    text-decoration: none; 
    font-size: 1rem;       /* 0.9emから少し大きく */
    letter-spacing: 0.2em; /* 文字の間隔を広げて「戻る」の存在感を出す */
    font-family: 'Shippori Mincho', serif; 
    font-weight: 600;      /* 少し太めにして「かすれ」を解消 */
    transition: 0.3s;
    display: inline-block;
}

/* ホバー時に少しだけ色が濃くなる演出 */
.back-to-list a:hover {
    color: #5a4e3f;
    opacity: 0.8;
}

.no-event { text-align: center; padding: 50px 0; color: #999; }

/* スマホ対応の追加調整 */
@media screen and (max-width: 480px) {
    /* H3をスマホ向けに少し小ぶりに */
    .article h3, #main .entry-content h3 {
        font-size: 1rem !important; /* 1.25remから少し小さく */
        padding: 10px 15px !important; /* L字の余白も少しスリムに */
        margin: 2.5em 0 1.5em !important; /* 上下の余白も少し詰めて流れを良く */
        letter-spacing: 0.1em !important; /* 字間も微調整 */
    }

    /* L字の装飾（擬似要素）の太さなども微調整 */
    .article h3::before {
        border-left-width: 2px !important; /* 線の太さを少し繊細に */
        border-top-width: 2px !important;
    }    
}

/************************************
** 8. サイドバー・ナビゲーションメニュー（クリア透過版）
************************************/

/* --- 1. グレーの濁りの原因（背景・影）を徹底リセット --- */
#sidebar,
#sidebar .widget,
#sidebar .widget_nav_menu,
#sidebar ul.menu,
#sidebar li,
#sidebar a {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important; /* グレーに見える原因の「影」を消去 */
    outline: none !important;
}

/* --- 2. サイドバー「器」の透過設定（濁り除去） --- */
#container #sidebar {
    /* 白の純度を上げ、透過を少し強める (0.5) */
    background-color: rgba(255, 255, 255, 0.5) !important;
    padding: 35px 25px !important;
    border-radius: 4px;
    
    /* 外枠に「白の光」を細く入れることで、透過の立体感を出す */
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    margin-top: 40px !important;
}

/* --- 3. ナビゲーションメニューの文字（可読性アップ） --- */
/* サイドバーの全ウィジェットタイトルの背景・枠線をリセット */
#sidebar .widget-title,
#sidebar .widget-caption,
.sidebar-scroll .widget-name,
.sidebar-scroll .widget-title {
    background: transparent !important; /* 背景を透明に */
    background-color: transparent !important;
    border: none !important; /* 枠線を一度すべて消す */
    box-shadow: none !important; /* 影も消す */
    padding: 0 0 12px 0 !important; /* 上左右の余白を詰め、下だけ空ける */
    
    /* 下線だけを「細い点線」または「薄い線」で残す（既存デザインに合わせる） */
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    
    /* フォント設定（再徹底） */
    font-family: 'Shippori Mincho', serif !important;
    color: #7a6e5f !important;
    text-align: center;
    font-size: 0.95rem;
    letter-spacing: 0.15em;
}

/* SNSメニューなど、2つ目のウィジェットの上の余白を確保 */
.sidebar-scroll .widget {
    margin-top: 40px !important;
    background: transparent !important;
}

/* スマホ時の「サイドスクロール追従」メニューの調整 */
@media screen and (max-width: 1023px) {
    /* 1. 追従エリア内のメニュー項目に点線と余白を付ける */
    .sidebar-scroll .widget_nav_menu ul li a,
    .sidebar-scroll ul.menu li a {
        display: block !important;
        padding: 18px 15px !important; /* 広がった！と言っていただいた時の行間 */
        color: #444 !important;
        font-size: 0.95rem;
        border-bottom: 1px dotted rgba(0, 0, 0, 0.15) !important; /* 薄い点線 */
        text-decoration: none;
        transition: 0.3s ease;
    }

    /* 2. 箇条書きの「・」を消し、余白をリセット */
    .sidebar-scroll .widget_nav_menu ul,
    .sidebar-scroll ul.menu {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. 各メニューの一番下の線だけ消してスッキリさせる */
    .sidebar-scroll .widget_nav_menu ul li:last-child a,
    .sidebar-scroll ul.menu li:last-child a {
        border-bottom: none !important;
    }

    /* 4. メインメニューとSNSメニューの間の隙間を調整 */
    .sidebar-scroll .widget {
        margin-bottom: 40px !important;
        background: transparent !important; /* 背景色を念のため消去 */
        box-shadow: none !important;
    }

   /* 2階層目（子メニュー）の項目を少し右にずらす */
   .sidebar-scroll .widget_nav_menu ul.sub-menu li a,
   .sidebar-scroll ul.menu li ul li a {
       padding-left: 30px !important; /* 親より 15px ほど右にずらす */
       font-size: 0.88rem;             /* 子メニューを少しだけ小さくするとより上品です */
       opacity: 0.85;                  /* ほんの少しだけ薄くして親子差を出す */
   }

}

/************************************
** 10. その他パーツ・レスポンシブ
************************************/
/************************************
** フッターの余白調整（高さを抑える）
************************************/
#footer, .footer {
    padding-top: 15px !important;    /* 上の余白（標準はもっと広い） */
    padding-bottom: 10px !important; /* 下の余白 */
    min-height: auto !important;     /* 最低高さをリセット */
    color: #fff !important;                /* 文字色を白に */
}

/* コピーライト（SNSアイコン等がある場合も含む）の周り */
.footer-bottom, .source-org {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ヘッダーのキャッチフレーズを強制表示（白文字） */
.tagline {
  display: block !important;
  color: #ffffff !important; /* 文字色を白に指定 */
  text-align: center;        /* 中央寄せ */
  font-size: 14px;           /* 文字サイズ */
  margin-top: 5px;           /* 上の余白 */
  margin-bottom: 10px;       /* 下の余白 */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* 読みやすくするために薄く影を付けています */
}

/* スマホ時 */
@media screen and (max-width: 480px) {
    /* フッター設定 */
    #footer {
        padding-top: 10px !important;
        padding-bottom: 5px !important;
    }
    /* ヘッダーキャッチフレーズ */
  .tagline {
    display: block !important;
    font-size: 12px;
  }
}

/************************************
** SNSシェアボタンのカスタマイズ
************************************/
/* ボタン全体のコンテナ */
.sns-share {
    margin: 4em 0 2em !important;
    border-top: 1px solid #eee; /* 上に細い区切り線 */
    padding-top: 2em;
}

/* 「シェアする」という文字 */
.share-caption {
    font-family: 'Shippori Mincho', serif !important;
    font-weight: 300 !important;
    letter-spacing: 0.1em;
    color: #888 !important;
    font-size: 0.9rem;
    margin-bottom: 1.5em !important;
}

/* ボタン共通のスタイル書き換え */
.sns-share a {
    background-color: transparent !important; /* 背景色を消す */
    border: 1px solid #ddd !important;     /* 細い枠線だけにする */
    color: #777 !important;                /* 文字とアイコンをグレーに */
    border-radius: 30px !important;        /* 丸みを持たせて柔らかく */
    transition: all 0.3s ease;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* ホバーした時（マウスをのせた時）の動き */
.sns-share a:hover {
    background-color: rgba(114, 72, 50, 0.05) !important; /* H3と同じ淡い茶色 */
    border-color: #724832 !important;                  /* 枠線を少し濃く */
    color: #724832 !important;                         /* 文字色をアクセントカラーに */
    transform: translateY(-2px);                       /* 軽く浮き上がらせる */
}

/* 各アイコンのブランドカラーを消して統一感を出す */
.sns-share .share-button span {
    color: inherit !important; 
}

/* ボタン内のフォントサイズ調整 */
.sns-share .button-caption {
    font-size: 11px !important;
}

/* モバイル表示での調整 */
@media screen and (max-width: 480px) {
    .sns-share a {
        margin-bottom: 10px !important;
    }
}

/************************************
** スマホ時の設定：矯正追記
************************************/
@media screen and (max-width: 480px) {
    /* H2のサイズを「点数の高い書き方」でねじ伏せる */
    #main .article .entry-content h2,
    #main .article h2,
    html body .entry-content h2 {
        font-size: 0.85rem !important; /* ← ここでサイズを指定 */
        background-color: #f7f7f7 !important; /* ← 赤テスト終了、本来の薄グレーへ */
        color: #444 !important;
        
        /* スマホ向けの横幅いっぱい設定 */
        margin-left: -4vw !important;
        margin-right: -4vw !important;
        width: calc(100% + 8vw) !important;
        padding: 12px 5vw !important;
        line-height: 1.4 !important;
        border-radius: 0 !important; /* スマホでは角丸をなくすとスッキリします */
        box-shadow: none !important;
    }

    /* ついでにH3もスマホ用に少しスリムに */
    #main .article .entry-content h3,
    #main .article h3 {
        font-size: 1rem !important;
        padding: 8px 12px !important;
        margin: 2em 0 1em !important;
    }
   /* 年選択ボタン（2025, 2026...）の下の隙間を半分にする */
    .year-selector {
        margin-bottom: 15px !important; /* 40pxから大幅に短縮 */
        padding-bottom: 10px !important; /* 線とボタンの距離も少し詰める */
    }

    /* 最初のイベントカードの上の余白をリセットする */
    .event-card {
        margin-top: 0 !important;
        margin-bottom: 25px !important; /* カード同士の間隔も少しタイトに */
    }

    /* 画像自体の上の余白も念のためチェック（もし浮いていれば） */
    .event-img {
        margin-top: 5px !important; /* 画像を少しだけ上に持ち上げる */
    }
}