@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 1. 基本設定・変数
************************************/
:root {
    /* カラーパレット */
    --primary-color: #0CC0DF;
    --primary-gradient: linear-gradient(135deg, #0CC0DF 0%, #0AA0BF 100%);
    --bg-base: #FFFFFF;
    --bg-soft: #F9FAFB;
    --text-main: #1A202C;
    --text-sub: #718096;
    
    /* レイアウト変数 */
    --radius-l: 20px;
    --radius-m: 12px;
    --shadow-card: 0 4px 20px rgba(0,0,0,0.06);
    --shadow-float: 0 10px 25px rgba(0,0,0,0.1);
}

/* サイト全体の背景（ドットパターン） */
body {
    background-color: var(--bg-soft);
    color: var(--text-main);
    background-image: radial-gradient(#CBD5E0 1px, transparent 1px);
    background-size: 20px 20px;
    background-attachment: fixed;
}

/************************************
** 2. レイアウト共通設定
************************************/
/* サイドバー完全非表示 */
div.sidebar {
    display: none !important;
}

/* メインコンテンツ基本設定（中央寄せ・幅制限） */
main.main {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    float: none !important;
    border: none !important;
    padding: 0 20px;
}

/* 検索結果ページの調整 */
.search-results .main .search-form,
.search-results .content > .search-form {
    display: none !important;
}
h1.archive-title {
    text-align: center;
    font-size: 1.2rem;
    color: var(--text-sub);
    border: none;
    background: none;
    margin: 30px 0;
}
h1.archive-title::before, h1.archive-title span::before {
    display: none !important;
}

/************************************
** 3. ヘッダーエリア（ロゴ・メニュー）
************************************/
/* ヘッダー全体（白背景・フラット化） */
div.header-in, header, #header-container {
    background: #fff !important;
    border-bottom: 1px solid #f0f0f0 !important;
    box-shadow: none !important; /* 影を消去 */
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 20px !important;
    height: 80px !important;
    max-width: 100% !important;
}

/* ロゴ周り */
.logo-header {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    height: 100%;
    display: flex;
    align-items: center;
    background: transparent !important;
}
.logo-header a {
    background: transparent !important;
    display: flex;
    align-items: center;
}
.logo-image,
.logo-header img,
.site-logo-image,
img.site-logo-image {
    max-height: 45px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important; /* ロゴの影削除 */
    border: none !important;
    background: transparent !important;
    vertical-align: middle !important;
}

/* PC用メニュー */
#navi {
    margin: 0 !important;
    width: auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
#navi .navi-in, #navi ul {
    width: auto !important;
    margin: 0 !important;
    display: flex !important;
    gap: 10px;
}
#navi .navi-in a {
    color: #4A5568 !important;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 16px !important;
    border-radius: 50px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    height: 40px;
}
#navi .navi-in a .fa, 
#navi .navi-in a .fas, 
#navi .navi-in a .far {
    color: var(--primary-color) !important;
    margin-right: 6px;
}
#navi .navi-in a:hover {
    background-color: rgba(12, 192, 223, 0.1) !important;
    color: var(--primary-color) !important;
}

/* スマホ用ヘッダー調整 */
@media screen and (max-width: 1023px) {
    #navi { display: none !important; }
    .mobile-header-menu-buttons {
        background: transparent !important;
        box-shadow: none !important;
    }
    .mobile-menu-buttons .menu-button {
        color: var(--primary-color) !important;
    }
}

/************************************
** 4. ヒーローエリア（トップページ専用）
************************************/
.custom-hero {
    padding: 40px 20px 20px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

/* キャッチコピー */
.hero-title {
    font-size: 2.8rem !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    color: var(--text-main);
    margin-bottom: 40px !important;
    border: none;
    background: none;
}
.hero-title .highlight {
    color: var(--primary-color);
    background: linear-gradient(transparent 65%, rgba(12, 192, 223, 0.15) 65%);
}

/* 検索窓 */
.search-wrapper {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.02) !important;
}
.search-input {
    width: 100%;
    padding: 18px 80px 18px 25px !important;
    border-radius: 50px !important;
    border: none !important;
    font-size: 1.1rem;
    background: transparent !important;
    outline: none !important;
    height: auto !important;
    box-shadow: none !important;
}
.search-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    padding: 12px 28px;
    border-radius: 30px;
    border: none;
    background: var(--primary-gradient);
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(12, 192, 223, 0.3);
}
.search-btn:hover {
    opacity: 0.9;
    transform: translateY(-50%) scale(1.02);
}

/* 横スクロールカテゴリナビ */
.scroll-nav-wrap {
    position: relative;
    max-width: 1000px;
    margin: 20px auto 50px;
    padding: 0 20px;
}
.scroll-nav-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 5px;
    width: 100%;
    text-align: center;
}
.scroll-nav-container::-webkit-scrollbar { display: none; }

.scroll-nav {
    display: inline-flex;
    gap: 12px;
    margin: 0 auto;
    padding: 0 10px;
    width: max-content;
    max-width: 100%;
}
@media screen and (max-width: 1000px) {
    .scroll-nav { margin: 0; }
    .scroll-nav-container { text-align: left; }
}

.nav-pill {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-sub);
    background: #fff;
    border: 1px solid #E2E8F0;
    transition: 0.2s;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
.nav-pill.category-label {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}
.nav-pill:not(.category-label):hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* スマホ調整（ヒーローエリア） */
@media screen and (max-width: 768px) {
    .hero-title { font-size: 2rem !important; margin-bottom: 30px !important; }
    .search-input { font-size: 1rem; padding: 15px 70px 15px 20px !important; }
    .search-btn { padding: 10px 20px; font-size: 0.9rem; }
}

/************************************
** 5. ページ出し分け設定
************************************/
/* ホーム画面（トップページ）専用：横幅拡大 */
body.home main.main,
body.home .custom-hero,
body.home .scroll-nav-wrap {
    max-width: 1280px !important;
}
/* ホーム画面専用：カード画像高さ調整 */
body.home figure.entry-card-thumb.card-thumb.e-card-thumb {
    height: 220px !important;
    max-height: 220px !important;
}

/* ホーム画面以外：ヒーロー要素非表示・余白調整 */
body:not(.home) .hero-title { display: none !important; }
body:not(.home) .custom-hero { padding-top: 20px !important; max-width: 800px; }
body:not(.home) .search-wrapper { box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
body:not(.home) .scroll-nav-wrap { margin-bottom: 30px; }

/************************************
** 6. 記事カード（モダンデザイン）
************************************/
a.entry-card-wrap.a-wrap {
    background: #fff;
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(0,0,0,0.02);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    margin-bottom: 30px !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    height: auto !important;
    min-height: 380px;
}
a.entry-card-wrap.a-wrap:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-float);
    background: #fff;
}

/* 2列レイアウト（PC） */
@media screen and (min-width: 601px) {
    .entry-card-wrap { width: 48% !important; margin-right: 2% !important; float: left; }
    .entry-card-wrap:nth-child(2n) { margin-right: 0 !important; }
}
/* 1列レイアウト（スマホ） */
@media screen and (max-width: 600px) {
    .entry-card-wrap { width: 100% !important; margin-right: 0 !important; float: none; }
}

/* サムネイル */
figure.entry-card-thumb {
    width: 100%;
    height: 180px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    position: relative;
    overflow: hidden;
}
figure.entry-card-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* カテゴリラベル */
.cat-label {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 2;
    background: var(--primary-color);
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: none;
}

/* カードコンテンツ */
.entry-card-content {
    padding: 20px !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
h2.entry-card-title {
    font-size: 1.1rem !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
    color: var(--text-main) !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    display: block !important;
    -webkit-line-clamp: unset !important;
}
.entry-card-snippet {
    font-size: 0.85rem !important;
    color: var(--text-sub) !important;
    margin-bottom: auto !important;
    border: none !important;
    line-height: 1.6 !important;
    padding: 0 !important;
    text-align: left !important;
}
.entry-card-meta {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #A0AEC0;
    text-align: left !important;
}

/************************************
** 7. 記事本文エリアのデザイン
************************************/
/* 見出しデザイン */
.article h2 {
    background: #f6f6f6;
    border-left: solid 5px var(--primary-color);
    padding: 15px;
    border-radius: 4px;
    color: #333;
}
.article h3 {
    border-bottom: 2px solid var(--primary-color);
    padding: 10px 0;
    color: #333;
}
/* 目次 */
.toc {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 20px;
    background: #fff;
}
.toc-title, .toc-list > li a {
    font-weight: bold; color: #333;
}
.toc-list > li li a {
    font-weight: normal; font-size: 0.9em;
}

/************************************
** 8. 記事ヘッダーレイアウト（縦並び修正）
************************************/
/* ヘッダー全体を縦積みに */
header.article-header.entry-header {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 30px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
    float: none !important;
    overflow: visible !important;
}

/* タイトル */
h1.entry-title {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 20px 0 !important;
    text-align: left !important;
    line-height: 1.4 !important;
}

/* 日付エリア */
.date-tags {
    position: static !important;
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 15px !important;
}

/* アイキャッチ画像 */
.eye-catch,
.article-header .eye-catch,
div.eye-catch {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    margin: 0 auto 50px !important; /* 本文との余白 */
    padding: 0 !important;
    float: none !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 1 !important;
}
.eye-catch img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    margin: 0 auto !important;
    box-shadow: none !important;
    display: block !important;
    position: static !important;
    max-height: none !important;
}

/* 本文エリアの回り込み解除 */
.entry-content, .speech-wrap {
    margin-top: 0 !important;
    padding-top: 0 !important;
    clear: both !important;
    display: block !important;
    color: #333 !important;
}

/************************************
** 9. スマホ用ボトムナビ
************************************/
.bottom-nav {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
    z-index: 9999;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(255,255,255,0.5);
}
.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #A0AEC0;
    font-size: 1.2rem;
}
.nav-item.active, .nav-item:hover {
    color: var(--primary-color);
    background: rgba(12, 192, 223, 0.1);
}
@media screen and (min-width: 769px) { .bottom-nav { display: none; } }
@media screen and (max-width: 768px) { body { padding-bottom: 80px; } }

/************************************
** ▼▼▼ 修正：吹き出しを横並び＆アイコンサイズ維持 ▼▼▼
************************************/

/* 1. 吹き出し全体を横並び（Flexbox）にする */
.speech-wrap {
    display: flex !important;
    align-items: flex-start !important; /* 上揃え */
    gap: 25px !important;               /* アイコンと吹き出しの間隔を少し広げる */
    margin-bottom: 30px !important;
    padding: 0 !important;
}

/* 2. アイコンエリア（人物）のサイズを大きく確保 */
.speech-person {
    float: none !important;
    margin: 0 !important;
    flex-shrink: 0 !important;    /* 絶対に縮ませない設定 */
    text-align: center;
    width: 100px !important;      /* ★ここを60pxから100pxに戻しました */
    min-width: 100px !important;  /* スマホでも小さくならないように固定 */
}

/* アイコン画像自体も大きく */
.speech-person figure {
    margin: 0 auto 5px !important;
    width: 100px !important;      /* ★画像サイズも100pxに */
    height: 100px !important;     /* 正方形を維持 */
}

.speech-person img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important; /* 丸くする */
    object-fit: cover !important;  /* 画像が歪まないように */
    border: 1px solid #eee !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; /* うっすら影をつけてリッチに */
}

/* アイコン下の名前 */
.speech-person-name {
    font-size: 0.8rem !important;
    color: #777 !important;
    line-height: 1.3 !important;
    margin-top: 5px !important;
    display: block !important;
}

/* 3. 吹き出し本体の調整 */
.speech-balloon {
    float: none !important;
    width: auto !important;
    flex-grow: 1 !important;      /* 横幅いっぱいまで広げる */
    margin: 0 !important;
    position: relative !important;
    background: #fff !important;
    border: 1px solid #ccc !important;
    border-radius: 12px !important; /* 角丸を少し柔らかく */
    padding: 20px !important;       /* 中の余白も少しゆったりと */
    box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

/* --- 吹き出しの「矢印」の位置調整 --- */
/* アイコンが大きくなったので、矢印の位置も合わせる */

/* 矢印の外枠 */
.speech-balloon::before {
    content: "" !important;
    position: absolute !important;
    top: 30px !important;         /* ★アイコンの中心付近に来るように高さを調整 */
    left: -10px !important;
    right: auto !important;
    bottom: auto !important;
    border: 5px solid transparent !important;
    border-right-color: #ccc !important;
    border-left: none !important;
}

/* 矢印の内側（白） */
.speech-balloon::after {
    content: "" !important;
    position: absolute !important;
    top: 30px !important;         /* ★高さ合わせ */
    left: -9px !important;
    right: auto !important;
    bottom: auto !important;
    border: 5px solid transparent !important;
    border-right-color: #fff !important;
    border-left: none !important;
}

/* （補足）右側の人物用（反転設定） */
.speech-wrap-right {
    flex-direction: row-reverse !important;
}
.speech-wrap-right .speech-balloon::before {
    left: auto !important;
    right: -10px !important;
    border-right-color: transparent !important;
    border-left-color: #ccc !important;
}
.speech-wrap-right .speech-balloon::after {
    left: auto !important;
    right: -9px !important;
    border-right-color: transparent !important;
    border-left-color: #fff !important;
}

/************************************
** ▼▼▼ 修正：ヘッダー内の「垂直方向」中央揃え ▼▼▼
************************************/

/* 1. ヘッダーの箱自体を「上下中央揃え」モードにする */
div.header-in, 
header, 
#header-container {
    display: flex !important;
    align-items: center !important; /* これが垂直中央揃えの命令 */
    height: 70px !important;        /* 高さを70pxで固定（安定させるため） */
    padding-top: 0 !important;      /* 余計な余白を消す */
    padding-bottom: 0 !important;
}

/* 2. ロゴが入っているエリアの調整 */
.logo-header {
    display: flex !important;
    align-items: center !important; /* ロゴ画像も枠の中で上下中央に */
    height: 100% !important;        /* ヘッダーの高さいっぱいに広げる */
    margin: 0 !important;           /* 余計なズレを消す */
    padding: 0 !important;
    float: none !important;         /* 念のためフロート解除 */
}

.logo-header a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* 3. ロゴ画像自体の調整 */
.logo-image,
.logo-header img,
.site-logo-image {
    margin: 0 !important;           /* 上下の隙間をゼロに */
    padding: 0 !important;
    max-height: 45px !important;    /* 70pxの中に収まるサイズ */
    height: auto !important;
    vertical-align: middle !important;
    position: static !important;    /* 浮遊させない */
    transform: none !important;     /* 位置ずらしを解除 */
}

/* 4. メニュー（右側）の調整 */
#navi {
    display: flex !important;
    align-items: center !important; /* メニュー全体を上下中央に */
    height: 100% !important;
    margin: 0 !important;
}

#navi .navi-in,
#navi ul {
    display: flex !important;
    align-items: center !important; /* メニュー項目を上下中央に */
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#navi .navi-in a {
    display: flex !important;
    align-items: center !important; /* 文字とアイコンを上下中央に */
    height: 100% !important;        /* ボタンの高さをヘッダーに合わせる */
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/************************************
** ▼▼▼ 追加修正：ロゴの位置を少し下げる ▼▼▼
************************************/
.logo-image,
.logo-header img,
.site-logo-image,
img.site-logo-image {
    /* 上部に余白を追加してロゴを下に押し下げる */
    /* ※この「10px」という数字を大きくすると、さらに下がります */
    margin-top: 10px !important; 
}

/************************************
** ▼▼▼ 修正：スマホでのヘッダー表示崩れを解消 ▼▼▼
************************************/

/* 1. スマホ画面（幅1023px以下）では、PC用のメニュー（#navi）を絶対に消す */
@media screen and (max-width: 1023px) {
    #navi, 
    #navi-in,
    .navi-in {
        display: none !important;
    }
}

/* 2. スマホのヘッダーレイアウトを整える */
@media screen and (max-width: 1023px) {
    div.header-in, 
    header, 
    #header-container {
        display: flex !important;
        justify-content: space-between !important; /* ロゴやアイコンをバランスよく配置 */
        align-items: center !important;
        height: 60px !important;    /* PCより高さを少し抑える */
        padding: 0 10px !important;
        flex-wrap: nowrap !important; /* 折り返しを禁止 */
    }

    /* ロゴの位置とサイズをスマホ用にリセット */
    .logo-header {
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        float: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* ロゴを中央に */
        flex: 1 !important; /* 空きスペースを使って中央配置を安定させる */
    }

    /* ロゴ画像のサイズ調整 */
    .logo-image,
    .logo-header img,
    .site-logo-image,
    img.site-logo-image {
        max-height: 35px !important; /* スマホではロゴを少し小さく */
        margin-top: 0 !important;    /* PCで設定した「下げる」余白をリセット */
        height: auto !important;
        width: auto !important;
    }

    /* ハンバーガーメニューや検索ボタン（スマホ用ボタン）の調整 */
    .mobile-header-menu-buttons {
        margin: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
}

/************************************
** ▼▼▼ 修正：スマホでヘッダーが二重になるのを防ぐ ▼▼▼
************************************/

/* スマホ表示（幅1023px以下）の時 */
@media screen and (max-width: 1023px) {
    
    /* 1. ベースのヘッダー（PC用ヘッダー）を完全に非表示にする */
    /* これで「奥側」にある動かないヘッダーが消えます */
    #header, 
    #header-container {
        display: none !important;
    }

    /* 2. 追随するヘッダー（モバイルヘッダー）だけを表示する */
    /* CocoonのモバイルヘッダーIDを表示状態にします */
    .mobile-header,
    #mobile-header {
        display: block !important;
        position: fixed !important; /* 画面上部に固定 */
        top: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: #fff !important; /* 背景を白に */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; /* 影をつけて見やすく */
    }

    /* 3. モバイルヘッダー内のロゴ調整（前回の調整を引き継ぐ） */
    .mobile-header .logo-header,
    .mobile-header .site-logo-image,
    .mobile-header img {
        display: block !important;
        margin: 0 auto !important; /* 中央寄せ */
        max-height: 40px !important; /* スマホに適したサイズ */
        width: auto !important;
    }
    
    /* 4. コンテンツがヘッダーに隠れないように余白を作る */
    body {
        padding-top: 60px !important; /* ヘッダーの高さ分だけ中身を下げる */
    }
}

/************************************
** ▼▼▼ 修正：スマホでヘッダーと文字を「強制的に」近づける ▼▼▼
************************************/

@media screen and (max-width: 768px) {
    
    /* 1. 「就活をハックしよう」のエリア全体を、上に30px引き上げる */
    .custom-hero {
        margin-top: -30px !important; /* ★この数字を調整します */
        padding-top: 0 !important;
    }

    /* 2. 文字自体の上の隙間も完全に削除 */
    h2.hero-title {
        margin-top: 0 !important;
        padding-top: 0 !important;
        line-height: 1.2 !important; /* 行間を少し詰める */
    }

    /* 3. ヘッダーの下にある見えない余白を念入りに削除 */
    #content, .content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/************************************
** ▼▼▼ 修正：スマホでアイキャッチ画像を画面いっぱい（全幅）に広げる ▼▼▼
************************************/

@media screen and (max-width: 768px) {
    /* アイキャッチ画像の箱を、左右の余白を無視して広げる */
    .eye-catch {
        margin-left: -40px !important;        /* 左の余白(20px)を打ち消す */
        margin-right: -40px !important;       /* 右の余白(20px)を打ち消す */
        width: calc(100% + 40px) !important;  /* 幅を「100% + 左右の余白分」にする */
        max-width: none !important;           /* 幅の制限を解除 */
        border-radius: 0 !important;          /* 画面端まで行くので角丸をなくす */
    }

    /* 画像自体の調整 */
    .eye-catch img {
        width: 100% !important;
        border-radius: 0 !important;          /* 画像の角丸もなくす */
        object-fit: cover !important;
    }
}