@charset "UTF-8";
/*
Theme Name: cocoon-child-maguro
Template: cocoon-master
*/

/* --- 全体の幅設定 --- */
.maguro-top-wrapper {
    max-width: 1140px;
    margin: 0 auto !important;
    padding: 0 20px;
}

/* --- スライダーのデザイン --- */
.main-visual {
    margin-top: 20px;
    border-radius: 15px;
    overflow: hidden;
}

/* 大見出し(H2) */
.entry-content h2 {
    position: relative;
    padding: 15px 20px !important;
    background: #f8fbfe !important; /* ごく薄い青 */
    border-left: 6px solid #3498db !important; /* アクセントの青線 */
    font-size: 1.4em !important;
    margin: 45px 0 25px !important;
    border-radius: 0 8px 8px 0;
}

/* 中見出し(H3) */
.entry-content h3 {
    font-size: 1.25em !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid #eef4f9 !important;
    margin: 35px 0 20px !important;
    display: flex;
    align-items: center;
}

.entry-content h3::before {
    content: "●";
    color: #3498db;
    margin-right: 10px;
    font-size: 0.8em;
}

/* --- 1. ヘッダーロゴの調整 --- */
.header-banner {
    padding: 40px 0 30px; /* 上下の余白を広げて画像を強調 */
    text-align: center;
    background-color: #fff;
}

.header-logo-img {
    /* 画像の横幅を大きく設定 */
    width: 90% !important; 
    max-width: 1000px !important; /* 前回の700pxから1000pxに拡大 */
    height: auto;
    transition: transform 0.3s ease;
}

/* --- 2. メニューバーのデザイン（お手本準拠） --- */
.global-nav {
    background-color: #f2f2f2; /* お手本に近い明るいグレー */
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.global-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center;
    max-width: 1140px; /* コンテンツ幅と統一 */
}

.global-nav li {
    flex: 1; /* 各ボタンを均等な幅に広げる */
    border-right: 1px solid #ccc;
    text-align: center;
}

.global-nav li:first-child {
    border-left: 1px solid #ccc;
}

.global-nav li a {
    text-decoration: none !important;
    color: #333 !important;
    font-weight: bold;
    font-size: 16px; /* 文字を少し大きくして視認性アップ */
    padding: 18px 0; /* 上下の厚みを持たせる */
    display: block;
    transition: background-color 0.2s;
}

/* マウスを乗せた時のグレーを少し濃くする */
.global-nav li a:hover {
    background-color: #e0e0e0;
}

.splide__slide {
    background-size: cover;
    background-position: center;
    height: 500px;
}

/* 画像パスの紐付け */
.slide-travel  { background-image: url("./images/slide/slide-travel.png"); }
.slide-food    { background-image: url("./images/slide/slide-food.png"); }
.slide-hobby   { background-image: url("./images/slide/slide-hobby.png"); }
.slide-bicycle { background-image: url("./images/slide/slide-bicycle.jpg"); }

/* --- メインとサイドバーの横並び --- */
.maguro-flex-container {
    display: flex !important;
    justify-content: space-between;
    margin-top: 40px !important;
}

.maguro-main-content {
    width: 72% !important;
}

.maguro-sidebar {
    width: 25% !important;
}

/* --- カテゴリーパネル（2列） --- */
.category-panel-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.category-panel {
    display: block;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    text-decoration: none;
}

.panel-image img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover;
}

.panel-label {
    padding: 12px;
    text-align: center;
    font-weight: bold;
    color: #333;
}

/* --- 1. メインコンテンツとサイドバーの中央揃え設定 --- */
.maguro-flex-container {
    display: flex !important;
    justify-content: center; /* 左右中央に寄せる */
    gap: 40px; /* メインとサイドバーの間の余白 */
    max-width: 1140px;
    margin: 40px auto 0 !important;
}

.maguro-main-content {
    width: 65% !important; /* メインの幅を少し絞って余白を作る */
    display: flex;
    flex-direction: column;
    align-items: center; /* 中の要素（最新記事など）を中央に */
}

.maguro-sidebar {
    width: 300px !important;
    display: flex;
    flex-direction: column;
    align-items: center; /* Instagramウィジェットを中央に */
}

/* --- 2. 各コンテンツの幅と余白の調整 --- */

/* 最新記事カードを中央に配置 */
.ideal-post-card {
    width: 100%;
    max-width: 700px; /* 広がりすぎないよう制限 */
    margin: 0 auto 50px;
}

/* カテゴリーセクション全体を中央に */
.category-nav-section {
    width: 100%;
    max-width: 700px;
}

.category-panel-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    justify-content: center; /* グリッド自体を中央に */
}

/* セクションタイトル（最新記事・カテゴリー）の中央揃え */
.section-title {
    text-align: center;
    width: 100%;
    margin-bottom: 30px;
}

/* --- 3. サイドバー（Instagram）の調整 --- */
.widget {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.insta-container {
    width: 100%;
    max-width: 320px; /* Instagramの標準幅に合わせる */
}

/* --- 1. ヘッダー全体のレイアウト --- */
.site-header {
    background-color: #fff;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.header-banner {
    padding: 20px 0;
    text-align: center; /* ロゴ画像を中央に */
}

.header-logo-img {
    max-width: 800px; /* ロゴのサイズを適切に調整 */
    width: 100%;
    height: auto;
}

/* --- 2. ナビゲーションメニューの横並び化 --- */
.global-nav {
    background-color: #fff;
    margin-top: 10px;
}

.global-nav ul {
    list-style: none !important; /* 箇条書きのポッチを消す */
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center; /* 項目を中央に寄せる */
    gap: 30px; /* 項目間の距離 */
}

.global-nav li a {
    text-decoration: none !important; /* 下線を消す */
    color: #333 !important; /* 文字色を黒に */
    font-weight: bold;
    font-size: 15px;
    padding: 10px 5px;
    display: block;
    transition: color 0.3s ease;
}

/* マウスを乗せた時の演出 */
.global-nav li a:hover {
    color: #d16b32 !important; /* カテゴリーのアクセント色に合わせる */
}

/* --- 1. ヘッダー全体のレイアウト --- */
.site-header {
    background-color: #fff;
    width: 100%;
}

.header-banner {
    padding: 30px 0 20px;
    text-align: center; /* ロゴを中央に */
}

.header-logo-img {
    max-width: 700px; /* お手本のバランスに調整 */
    width: 100%;
    height: auto;
}

/* --- 2. メニューバーのデザイン（お手本風） --- */
.global-nav {
    background-color: #f0f0f0; /* 全体の背景を薄いグレーに */
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    width: 100%;
}

.global-nav ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center; /* 中央揃え */
    max-width: 1140px; /* コンテンツ幅に合わせる */
}

.global-nav li {
    flex: 1; /* 各メニューを均等な幅にする */
    max-width: 200px;
    border-right: 1px solid #ccc; /* 項目間の区切り線 */
}

.global-nav li:first-child {
    border-left: 1px solid #ccc; /* 一番左にも線を入れる */
}

.global-nav li a {
    text-decoration: none !important;
    color: #333 !important;
    font-weight: bold;
    font-size: 14px;
    padding: 15px 0;
    display: block;
    text-align: center;
    transition: background-color 0.3s;
}

/* マウスを乗せた時（またはアクティブ時）の色 */
.global-nav li a:hover {
    background-color: #ddd; /* 少し濃いグレーに */
}

/* --- スマホ表示の崩れ防止 --- */
@media (max-width: 768px) {
    .global-nav ul {
        flex-wrap: wrap;
    }
    .global-nav li {
        flex: none;
        width: 33.33%; /* スマホでは3列にするなど */
        border-bottom: 1px solid #ccc;
    }
}

/* --- 1. ヘッダー画像のさらなる拡大とバランス --- */
.header-banner {
    padding: 30px 0;
    background-color: #fff;
    text-align: center;
}

.header-logo-img {
    /* 横幅いっぱいに広げつつ、左右にわずかな余白 */
    width: 95% !important;
    max-width: 1200px !important; 
    height: auto;
}

/* --- 2. メインコンテンツとサイドバーの黄金比 --- */
.maguro-top-wrapper {
    background-color: #f8f9fa; /* 背景をわずかにグレーにして白背景のコンテンツを浮き立たせる */
    padding-bottom: 60px;
}

.maguro-flex-container {
    display: flex !important;
    justify-content: center; /* 中央に寄せる */
    gap: 30px; /* お手本のような適度な隙間 */
    max-width: 1200px; /* ヘッダー幅と合わせる */
    margin: 30px auto 0 !important;
    padding: 0 20px !important;
}

.maguro-main-content {
    /* お手本のバランスに合わせ、メインを約70%に設定 */
    width: 70% !important;
    max-width: 800px;
}

.maguro-sidebar {
    /* サイドバーを約30%（300px〜320px程度）に固定 */
    width: 30% !important;
    max-width: 320px;
}

/* --- 3. 各セクションの余白調整 --- */
.section-title {
    font-size: 20px;
    border-left: 5px solid #d16b32; /* タイトルにアクセントの縦線を追加 */
    padding-left: 15px;
    text-align: left; /* 左揃えにしてお手本の空気感に */
    margin-bottom: 25px;
    font-weight: bold;
}

/* Instagramなどのウィジェットを白背景のボックスにする */
.widget {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

/* --- 1. ヘッダーロゴの余白を完全に除去 --- */
.header-banner {
    padding: 0 !important; /* 上下の余白（40pxなど）をすべて0にする */
    margin: 0 !important;
    background-color: #fff;
    line-height: 0; /* 画像の下にできるわずかな隙間も消す */
    text-align: center;
}

.header-logo-img {
    width: 95% !important; 
    max-width: 1200px !important; 
    height: auto;
    display: inline-block;
    vertical-align: bottom; /* 画像の下の隙間を排除 */
}

/* --- 2. メニューバーとの接続調整 --- */
.global-nav {
    background-color: #f2f2f2; 
    border-top: 1px solid #ccc; /* 画像とメニューの間の境界線 */
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin-top: 0 !important; /* 画像とぴったりくっつける */
}

/* 念のため、Cocoon特有の余白設定をリセット */
#header-container,
.header-container-in {
    padding: 0 !important;
    margin: 0 !important;
}

/* --- ヘッダー最上部の余白と線を完全に消す --- */
#header-container,
.header-container-in,
#header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important; /* もし線があれば消す */
}

/* サイト全体を包む要素の余白もリセット */
#container,
.site-main {
    padding-top: 0 !important;
}

/* WordPress管理バーが表示されていない時のためのマージンリセット */
html {
    margin-top: 0 !important;
}

/* ヘッダーバナー自体の余白を再度ゼロに固定 */
.header-banner {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}

/* --- 1. タイトルの左側にオレンジの縦線を入れる --- */
.section-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    padding: 5px 0 5px 15px; /* 左側に余白を作る */
    margin: 40px 0 20px 0;
    border-left: 6px solid #d16b32; /* オレンジ色の太い縦線 */
    line-height: 1.2;
    text-align: left; /* 左揃えにする */
}

/* --- 2. 「おすすめ記事」をボタン風のデザインにする --- */
/* HTML側で <h2 class="recommend-title">おすすめ記事</h2> とした場合 */
.recommend-title {
    display: block;
    width: fit-content; /* 文字の幅に合わせる */
    margin: 30px auto; /* 中央に配置 */
    padding: 10px 60px; /* 横に長いボタンにする */
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px; /* わずかに角を丸く */
    box-shadow: 0 4px 0 #ddd; /* 下側の立体的な影 */
    font-size: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
}

/* マウスを乗せた時の動き */
.recommend-title:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #ddd;
}

/* 最新記事タイトルの装飾 */
.section-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    padding: 2px 0 2px 15px;
    margin: 40px 0 25px 0;
    border-left: 6px solid #d16b32; /* オレンジの縦線 */
    line-height: 1.4;
    text-align: left;
}

/* 記事タイトルのリンク色などを調整 */
.ideal-post-title {
    font-size: 18px;
    margin: 10px 0;
    color: #d16b32; /* お手本のオレンジ系に合わせる場合 */
    text-decoration: underline;
}

.ideal-post-date {
    font-size: 14px;
    color: #888;
}

/* タイトル（最新記事・カテゴリーから探す）を非表示にする */
.section-title {
    display: none !important;
}

/* タイトルを消した分、おすすめ記事ボタンの下の余白を調整 */
.recommend-btn-container {
    margin-bottom: 20px !important;
}

/* ボタンのコンテナ設定（共通のデザインを適用） */
.recommend-btn-container,
.category-btn-container {
    text-align: center;
    margin: 40px 0 30px; /* 上下に適切な余白を確保 */
}

/* ボタン自体のデザイン */
.recommend-title {
    display: inline-block;
    padding: 10px 60px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    box-shadow: 0 4px 0 #eee; /* 立体感のある影 */
    font-weight: bold;
    color: #333;
    font-size: 16px;
    text-decoration: none;
}

/* 既存のオレンジ縦線を完全に消す */
.section-title {
    display: none !important;
}

/* カテゴリーパネルとボタンの間の距離を微調整 */
.category-panel-grid {
    margin-top: 10px !important;
}

/* --- タイトルを四角で囲むデザイン --- */
.section-title {
    display: inline-block; /* 文字の長さに合わせて四角を作る */
    font-size: 18px;
    font-weight: bold;
    color: #333;
    padding: 8px 20px;     /* 四角の中の余白 */
    margin: 40px 0 20px 0; /* 見出しの外側の余白 */
    border: 1px solid #ccc; /* グレーの細い四角枠 */
    background-color: #fff; /* 中を白くしてスッキリさせる */
    text-align: left;
    line-height: 1;
}

/* 以前設定した「非表示」や「縦線」の設定があれば上書き・削除してください */
.recommend-btn-container,
.category-btn-container {
    display: none; /* ボタン用の箱はもう使いません */
}

/* --- 見出しを四角で囲むデザインに統一 --- */
.section-title {
    display: inline-block; /* 文字幅に合わせる */
    font-size: 17px;       /* お手本のサイズ感に調整 */
    font-weight: bold;
    color: #333;
    padding: 6px 15px;     /* 四角の中の余白 */
    margin: 40px 0 15px 0; /* 外側の余白 */
    border: 1px solid #ccc; /* グレーの四角い枠線 */
    background-color: #fff; /* 背景を白にしてスッキリさせる */
    line-height: 1.2;
    text-align: left;
    border-left: none !important; /* 以前のオレンジの縦線が残っていれば消す */
}

/* --- 見出しを四角で囲むデザインを強制適用 --- */
.section-title {
    display: inline-block !important; /* 非表示設定を上書き */
    font-size: 17px !important;
    font-weight: bold !important;
    color: #333 !important;
    padding: 8px 20px !important;     /* 枠内の余白 */
    margin: 40px 0 20px 0 !important; /* 枠の外の余白 */
    border: 1px solid #ccc !important; /* 四角い枠線 */
    background-color: #fff !important; /* 枠内の背景色 */
    line-height: 1.2 !important;
    text-align: left !important;
    border-left: 1px solid #ccc !important; /* オレンジの縦線を消して枠線にする */
}

/* 不要なボタンコンテナを非表示にする */
.recommend-btn-container,
.category-btn-container {
    display: none !important;
}

/* --- セクションタイトルを中央に配置し、おしゃれにする --- */
.section-title {
    display: block !important;       /* 幅いっぱいに広げて中央揃えを有効にする */
    text-align: center !important;   /* 文字を中央へ */
    font-size: 16px !important;      /* 少し控えめなサイズが上品です */
    font-weight: bold !important;
    letter-spacing: 0.1em !important; /* 文字の間隔を少し広げてモダンに */
    color: #444 !important;
    
    /* 枠のデザイン調整 */
    padding: 10px 0 !important;      /* 上下の厚み */
    margin: 50px auto 25px !important; /* 上の余白を広めにとって区切りを明確に */
    border: 1px solid #eee !important; /* 線の色は薄いグレーで主張しすぎない */
    background-color: #fafafa !important; /* ほんのりグレーの背景で「面」を意識 */
    
    /* 以前のオレンジ縦線を完全に排除 */
    border-left: 1px solid #eee !important; 
}

/* カテゴリーセクション全体の幅を調整（メインコンテンツに合わせる） */
.category-nav-section {
    width: 100% !important;
    max-width: 100% !important;
}

/* --- セクションタイトルを影付きのおしゃれなデザインに変更 --- */
.section-title {
    display: block !important;
    text-align: center !important;   /* 文字を中央に */
    max-width: 400px;                /* 枠が広がりすぎないよう調整 */
    margin: 50px auto 30px !important; /* 上下にゆとりを持たせ中央配置 */
    padding: 12px 20px !important;
    
    font-size: 17px !important;
    font-weight: bold !important;
    letter-spacing: 0.15em !important; /* 文字間隔を広げておしゃれに */
    color: #333 !important;
    
    /* 枠と影のデザイン */
    background-color: #ffffff !important;
    border: 1px solid #f0f0f0 !important; /* 境界線はあえて薄く */
    border-radius: 6px !important;        /* 角を少し丸くして柔らかい印象に */
    
    /* おしゃれな影（box-shadow）の設定 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important; /* ふんわりとした影 */
    
    /* 以前のオレンジ縦線を完全に消去 */
    border-left: 1px solid #f0f0f0 !important;
}

/* マウスを乗せた時に少し浮き上がる演出（お好みで） */
.section-title:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    transition: all 0.3s ease;
}

/* --- 1. 背景色を少し濃いめの爽やかな青に設定 --- */
body, 
.maguro-top-wrapper {
    background-color: #e6f0fa !important; /* 少しだけ彩度を上げた落ち着いた青 */
}

/* --- 2. タイトルのデザイン（背景に合わせて調整） --- */
.section-title {
    display: block !important;
    text-align: center !important;
    max-width: 420px;
    margin: 60px auto 30px !important;
    padding: 12px 20px !important;
    
    font-size: 18px !important; /* 視認性を上げるため少し拡大 */
    font-weight: bold !important;
    letter-spacing: 0.2em !important; /* 間隔を広げてよりおしゃれに */
    color: #2c3e50 !important;       /* 文字色を深い紺色にして高級感を出す */
    
    background-color: #ffffff !important; 
    border: none !important;           /* 影を際立たせるために枠線はあえて消す */
    border-radius: 8px !important;
    
    /* 影を少し深くして、背景色とのコントラストを強調 */
    box-shadow: 0 8px 20px rgba(0, 40, 80, 0.12) !important; 
}

/* --- 3. 白背景のコンテンツに境界線を追加して整理 --- */
.ideal-post-card,
.widget,
.category-panel {
    background-color: #ffffff !important;
    border: 1px solid #d0dee9 !important; /* 背景に馴染む薄い青の線 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important; /* 全体的に角を少し丸めて統一感を出す */
}

/* --- フッター全体のレイアウト調整 --- */
.maguro-footer {
    background-color: transparent !important; /* 全体の青背景を活かす */
    padding: 60px 20px 40px !important;
    margin-top: 80px !important;
}

/* 白い浮き出しボックスのデザイン */
.footer-inner {
    max-width: 1000px;
    margin: 0 auto !important;
    background-color: #ffffff !important;
    padding: 50px 40px 30px !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 40, 80, 0.15) !important; /* 深めの影 */
}

/* 3カラムの並び */
.footer-3columns {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    text-align: left;
    margin-bottom: 40px;
}

.footer-col {
    flex: 1;
}

/* フッター内の見出しデザイン（セクションタイトルと合わせる） */
.footer-col h4 {
    font-size: 16px;
    font-weight: bold;
    color: #2c3e50 !important;
    margin-bottom: 20px;
    letter-spacing: 0.1em;
    border-bottom: 2px solid #e6f0fa; /* 背景の青と同じ色で下線 */
    display: inline-block;
}

.footer-col p, .footer-col li {
    font-size: 14px;
    color: #666 !important;
    line-height: 1.8;
}

.footer-col ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-col a {
    text-decoration: none;
    color: #666 !important;
    transition: color 0.3s;
}

.footer-col a:hover {
    color: #3498db !important; /* ホバーで青く */
}

/* コピーライト */
.footer-copy {
    border-top: 1px solid #eee;
    padding-top: 20px;
    font-size: 12px;
    color: #bdc3c7 !important;
    text-align: center;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .footer-3columns {
        flex-direction: column;
        text-align: center;
    }
    .footer-col h4 {
        margin-top: 20px;
    }
}

/* --- フッター全体の余白 --- */
.maguro-footer {
    background-color: transparent !important;
    padding: 60px 20px 80px !important; /* 下側の余白を広げて安定感を出す */
    margin-top: 100px !important;
}

/* --- フッター内の白いボックス：ここがサイズ合わせの肝 --- */
.footer-inner {
    /* メインコンテンツ（maguro-flex-container）の幅と合わせる */
    max-width: 1140px; 
    width: 100%;
    margin: 0 auto !important;
    
    background-color: #ffffff !important;
    padding: 60px 50px 40px !important; /* 内側の余白を少しゆったりめに */
    border-radius: 20px !important;     /* 角の丸みをパネルと統一 */
    box-shadow: 0 15px 35px rgba(0, 40, 80, 0.1) !important; /* image_511a67.jpgに近い柔らかな影 */
    box-sizing: border-box;
}

/* 3カラムのレイアウト調整 */
.footer-3columns {
    display: flex;
    justify-content: space-between;
    gap: 60px; /* カラム間の距離を広げて視認性アップ */
    text-align: left;
    margin-bottom: 50px;
}

.footer-col {
    flex: 1;
}

/* 見出しのデザイン */
.footer-col h4 {
    font-size: 15px;
    font-weight: bold;
    color: #334e68 !important; /* 背景の青に合う濃紺 */
    margin-bottom: 25px;
    letter-spacing: 0.15em;
    position: relative;
    padding-bottom: 10px;
}

/* 見出しの下に薄い線を引く（おしゃれなアクセント） */
.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background-color: #e6f0fa; /* 背景色と同じ青 */
}

.footer-col p, .footer-col li {
    font-size: 13px;
    color: #627d98 !important; /* 少し柔らかいグレー紺 */
    line-height: 2;
}

/* コピーライト */
.footer-copy {
    border-top: 1px solid #f0f4f8;
    padding-top: 30px;
    font-size: 11px;
    color: #9fb3c8 !important;
    text-align: center;
}

/* 投稿本文エリアのデザイン */
.single .entry-content, 
.single .post {
    background-color: #fff !important;
    padding: 40px 50px !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 40, 80, 0.08) !important;
    line-height: 1.8 !important; /* 行間を広げて読みやすく */
    color: #333 !important;
}

/* スマホでは余白を調整 */
@media (max-width: 768px) {
    .single .entry-content {
        padding: 25px 20px !important;
    }
}

/* 記事内の画像に影をつけて浮かせる */
.entry-content img {
    border-radius: 10px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    margin: 20px 0 !important;
}

/* 段落（Pタグ）の余白を多めに */
.entry-content p {
    margin-bottom: 1.8em !important;
    letter-spacing: 0.05em; /* 文字間をわずかに広げる */
}

/* 強調文字（太字）の色を変える */
.entry-content strong {
    color: #d16b32; /* お手本のオレンジ系をアクセントに */
    background: linear-gradient(transparent 70%, #fff3e0 70%); /* 薄いアンダーライン */
}

/* --- 記事詳細ページのアイキャッチ画像を中央寄せにする --- */
.single .entry-eye-catch {
    text-align: center !important; /* コンテナ内で中央に寄せる */
    margin-bottom: 40px !important; /* 画像下の余白 */
}

.single .entry-eye-catch img {
    display: block !important;
    margin: 0 auto !important;     /* 画像自体を中央に */
    max-width: 90% !important;      /* 画面いっぱいにせず少し余白を作るのがおしゃれ */
    height: auto !important;
    border-radius: 15px !important; /* 角を丸くする */
    box-shadow: 0 10px 30px rgba(0, 40, 80, 0.12) !important; /* タイトルと同じ浮遊感のある影 */
}

/* --- 記事タイトルと投稿日も中央に寄せる --- */
.single .entry-title {
    text-align: center !important;
    font-size: 28px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin: 20px 0 10px !important;
}

.single .post-date, 
.single .post-update {
    text-align: center !important;
    display: block !important;
    margin-bottom: 30px !important;
    color: #9fb3c8 !important; /* 背景の青に合わせた薄いグレー紺 */
}

/* --- 記事タイトルを中央寄せにする --- */
.single .entry-title,
.single .article-header h1 {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin: 40px auto 20px !important;
    font-size: 1.8em !important;
    font-weight: bold !important;
}

/* --- 公開日・更新日を中央寄せにする --- */
.single .date-tags,
.single .post-date,
.single .post-update {
    text-align: center !important;
    display: block !important;
    margin-bottom: 30px !important;
}

/* --- アイキャッチ画像（サムネイル）を中央寄せにする --- */
.single .entry-eye-catch,
.single .eye-catch {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 40px !important;
    width: 100% !important;
}

.single .entry-eye-catch img,
.single .eye-catch img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important; /* 画像の元のサイズに合わせる */
    height: auto !important;
    border-radius: 12px !important; /* 角を少し丸める */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important; /* 軽い影をつける */
}

/* --- 記事本文全体の幅と中央寄せ --- */
.single .entry-content {
    margin: 0 auto !important;
    max-width: 800px !important; /* 読みやすい幅に絞る */
}

/* --- SNSシェアボタン全体の調整 --- */
.sns-share, 
.sns-buttons {
    display: flex !important;
    justify-content: center !important; /* 中央に寄せる */
    flex-wrap: wrap !important;
    gap: 10px !important;              /* ボタン同士の間隔 */
    margin: 30px auto !important;
    border: none !important;
}

/* --- ボタン自体のサイズを小さくする --- */
.sns-share a, 
.sns-buttons a {
    flex: none !important;             /* 横いっぱいに広がるのを防ぐ */
    width: auto !important;
    min-width: 80px !important;        /* 最低限の幅 */
    padding: 8px 15px !important;      /* 内側の余白を小さく */
    font-size: 12px !important;        /* 文字を小さく */
    border-radius: 20px !important;    /* 角を丸くしておしゃれに */
    height: auto !important;
    line-height: 1 !important;
}

/* --- 不要なボタンをCSSで消す場合 (例: LINEとコピー以外) --- */
/* 消したいボタンがある場合は、個別のクラスを指定して display:none にします */

/* =================================================
   Cocoon：全体の横幅を完全に一致させる修正
   ================================================= */

/* =================================================
   Cocoon：全要素の横幅を「800px」に完全強制統一
   ================================================= */

/* 1. サイトの土台から幅を固定し、外側の余白を消す */
#content,
.l-mainContent,
.site-main {
    max-width: 800px !important; /* ここで全体の幅を決定 */
    margin: 0 auto !important;
    width: 100% !important;
    padding: 0 !important; /* 外側の余白を強制排除 */
}

/* 2. 記事エリア、関連記事、コメント欄をすべて幅100%にする */
#main,
.related-entry-read,
.comment-area,
.article-footer,
.p-articleHeader,
.p-articleMainArea {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
    padding: 30px !important; /* 内側の余白だけ残す */
    box-sizing: border-box !important;
}

/* 3. 順番の並び替え（タイトル→日付→SNS→画像） */
#main {
    display: flex !important;
    flex-direction: column !important;
}

.entry-title { order: 1 !important; } /* タイトル */
.post-date, .date-tags { order: 2 !important; text-align: right !important; } /* 日付 */
.sns-share.ss-top { order: 3 !important; margin: 20px 0 !important; } /* SNS */
.entry-eye-catch { order: 4 !important; width: 100% !important; } /* 画像 */
.entry-content { order: 5 !important; } /* 本文 */

/* 4. 下部の「関連記事」カードも横に広がらないよう調整 */
.related-entry-card {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
}

/* 1. サイト全体の「外枠」を800pxに固定して、関連記事のはみ出しを防ぐ */
#content,
.l-mainContent,
.site-main {
    max-width: 800px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* 2. 記事（白い箱）も関連記事も、すべてこの800pxの中に収める */
#main,
.related-entry-read,
.comment-area,
.article-footer,
.p-articleHeader {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* 3. 記事エリア（白い部分）の内側の余白 */
#main {
    padding: 30px !important;
    background-color: #fff !important;
}

/* 4. 関連記事のカードを横いっぱいに広げて揃える */
.related-entry-card {
    width: 100% !important;
}