/* =========================================
   サイト全体の文字間調整（レタースペーシング）
   ========================================= */

/* 1. サイト全体のベース設定 */
body {
    letter-spacing: 0.05em !important; /* 全体的にゆとりを持たせて読みやすく */
}

/* 2. すべての見出し（H1〜H6） */
h1, h2, h3, h4, h5, h6,
.heading,
.site_title {
    letter-spacing: 0.05em !important;
}

/* 3. すべてのボタン（ワイドボックス内含む） */
.wp-block-button__link,
.btn__inner {
    letter-spacing: 0.05em !important;
    padding-left: calc(15px + 0.15em) !important; /* センターずれ防止 */
}

/* 4. グローバルナビ・メニュー類 */
.global_navi__item a,
.footer_navi__item a,
.breadcrumb__item {
    letter-spacing: 0.05em !important;
}

/* 5. FAQ（よくある質問）のエリア */
.main_content .faq summary,
.main_content .faq__contents {
    letter-spacing: 0.05em !important;
}



/* 記事下・カテゴリ下リンクのデザイン */
.asami-bottom-link {
    text-align: right;    /* 右寄せ */
    margin-top: 30px;     /* 上の余白 */
    margin-bottom: 10px;  /* 下の余白 */
    font-weight: bold;    /* 太字 */
    font-size: 0.95em;    /* 少し小さめ */
}

.asami-bottom-link a {
    color: #03C;          /* リンク色（サイトのメインカラーに合わせる） */
    text-decoration: underline;
}

.asami-bottom-link a:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* カテゴリページで説明文の下に余白を作る */
.category-back-link {
    margin-top: 40px;
}

/* --------------------------------------------------
   移動したプロフィールのデザイン調整（修正版）
-------------------------------------------------- */

/* ① プロフィール枠全体のデザイン */
.profile.u-all_show {
    margin: 40px 0 50px 0 !important; /* 上下の余白 */
    padding: 25px !important;         /* 枠内の余白 */
    background-color: #f7f7f7 !important; /* 薄いグレーの背景 */
    border: 1px solid #ddd !important;    /* 薄い枠線 */
    border-radius: 8px !important;        /* 角を丸く */
    box-sizing: border-box;
    box-shadow: none !important; /* 新しい見出しCSSの影を消す */
}

/* ② 見出し「この記事を書いた人」の強制リセットと整形 */
/* .main_content などの影響を受けないように詳細度を上げて指定 */
.profile.u-all_show h2.heading,
.profile.u-all_show .heading {
    /* ステッチデザインなどを完全に打ち消す */
    background: none !important;
    border: none !important;
    border-bottom: 1px solid #ccc !important; /* シンプルな下線のみ */
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 10px 0 !important;
    margin: 0 0 20px 0 !important;
    
    /* 文字の見た目を整える */
    color: #333 !important;
    font-size: 18px !important;
    text-align: center !important; /* 中央寄せ */
}

/* 見出しアイコンやステッチ飾りを消す */
.profile.u-all_show h2.heading::before,
.profile.u-all_show h2.heading::after,
.profile.u-all_show .heading::before,
.profile.u-all_show .heading::after {
    display: none !important;
    content: none !important;
}

/* 英語のサブタイトル (Wrote this article) の調整 */
.profile.u-all_show .heading .heading__title {
    display: block;
    font-size: 12px;
    color: #999;
    font-weight: normal;
    margin-top: 5px;
}

/* ③ プロフィール内部（画像とテキスト）の調整 */
.profile__wrapper {
    background: transparent !important; /* 背景透明化 */
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* ④ SNSボタン周りの余白調整 */
.profile.u-all_show .sns_list {
    margin-top: 15px !important;
}

/* プロフィール本文の文字サイズ調整 */
.profile.u-all_show .phrase,
.profile.u-all_show p {
    font-size: 14px !important;  
    line-height: 1.8 !important; /* 行間（読みやすさ）の調整 */
}

/* 写真を丸くする（PC・スマホ共通） */
/* 画像の枠と画像自体の両方を丸くします */
.profile.u-all_show .profile__img,
.profile.u-all_show .profile__img img {
    border-radius: 50% !important;
    overflow: hidden !important; /* はみ出し防止 */
}

/* スマホ表示の微調整（Flexboxによる強力センター寄せ） */
@media (max-width: 767px) {
    /* ① 枠全体の余白 */
    .profile.u-all_show {
        padding: 20px 15px !important;
    }

    /* ② ラッパーをFlexbox化して「縦並び・中央揃え」にする */
    .profile.u-all_show .profile__wrapper {
        display: flex !important;
        flex-direction: column !important; /* 縦並び */
        align-items: center !important;    /* 左右中央揃え（これが重要） */
        width: 100% !important;
    }

    /* ③ 各アイテム（画像エリア・テキストエリア）の幅を100%にしてリセット */
    .profile.u-all_show .profile__item {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        float: none !important; /* フロート解除 */
    }

    /* ④ 画像エリアの設定 */
    .profile.u-all_show .profile__item-is-img {
        text-align: center !important;   /* 中身を中央寄せ */
        margin-bottom: 20px !important;
    }

    /* ⑤ 画像の箱（.profile__img）の強制リセット */
    .profile.u-all_show .profile__img {
        display: inline-block !important; /* インラインブロックにしてtext-alignを効かせる */
        float: none !important;           /* 左寄せ解除 */
        margin: 0 auto !important;        /* 念のためマージンオート */
        width: 120px !important;           /* 固定幅 */
    }
    
    /* ⑥ 画像本体 */
    .profile.u-all_show .profile__img img {
        margin: 0 auto !important;
        display: block !important;
    }
}

/* --------------------------------------------------
   SNSアイコンの位置ズレ修正
-------------------------------------------------- */
.profile.u-all_show .sns_list__link {
    display: flex !important;           /* フレックスボックスを使って配置制御 */
    align-items: center !important;     /* 縦方向のど真ん中にする */
    justify-content: center !important; /* 横方向のど真ん中にする */
    padding: 0 !important;              /* ズレの原因になる余白を消す */
    text-decoration: none !important;   /* 下線が出ないようにする */
}

/* アイコン自体（フォント）の微調整 */
.profile.u-all_show .sns_list__link::before {
    margin: 0 !important;               /* アイコン周りの余白をゼロに */
    line-height: 1 !important;          /* 行間によるズレをなくす */
    display: block !important;          /* ブロック要素として扱う */
    width: auto !important;             /* 幅を自動調整 */
    height: auto !important;            /* 高さを自動調整 */
}

/* --------------------------------------------------
   リンク色の変更（範囲指定版）
   -------------------------------------------------- */

.main_content a {
    color: #03c;
}

/* ホバー時の設定 */
.main_content a:hover {
    color: #03c;
    opacity: 0.7;
    text-decoration: underline; /* リンクだとわかりやすく下線をつける（お好みで） */
}

/* もし「ボタン」のデザインまで青くなってしまうのを防ぐ場合 */
.main_content .btn a,
.main_content .btn-is-preset1 a {
    color: inherit; /* ボタンの色設定を優先する */
}

/* =========================================
   【Gold Media】通常720px維持 ＆ ワイド化CSS
   ========================================= */

/* -------------------------------------------
   1. テーマ標準の「枠・影・背景」をリセット
------------------------------------------- */

/* 全体の背景を真っ白にする */
body.gold_theme,
.l-contents,
.l-main {
    background-color: #ffffff !important;
}

/* 記事エリアの「枠線・影・白背景」を透明化 */
/* これで「グレー背景」と「白い箱」が消えます */
.main_content,
.archive,
.archive-is-card,
.page .l-contents .container {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* -------------------------------------------
   2. 基本の幅を「720px」に固定（ここが重要！）
------------------------------------------- */

/* サイト全体の基準幅を720pxにします */
/* これで、普通の投稿やテキストは720px幅で中央に収まります */
.l-contents .container {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
}

/* -------------------------------------------
   3. 「wide-box」だけ画面外へ突き破る設定
------------------------------------------- */

/* 親が720pxでも、計算式(calc)を使って無理やり画面端(100vw)まで広げます */
.wide-box {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding: 60px 20px !important; /* 上下の余白 */
    box-sizing: border-box !important;
}

/* -------------------------------------------
   4. 突き破った中身の幅設定
------------------------------------------- */

/* ワイド背景の中身は、少し広めの1080pxで中央寄せ */
/* ※ここを 720px に変えれば、中身も記事と同じ幅になります */
.wide-box > .wp-block-group__inner-container,
.wide-box > div,
.wide-box > .wp-block-columns {
    max-width: 1080px !important; 
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0;
    padding-right: 0;
}

/* -------------------------------------------
   5. 背景色のバリエーション
------------------------------------------- */
.wide-white { background-color: #ffffff !important; }
.wide-gray  { background-color: #f7f7f7 !important; }
/* メインカラー（ベージュ系） */
.wide-main  { 
    background-color: #fbfaf5 !important;
    border-top: 1px solid #efeid6;
    border-bottom: 1px solid #efeid6;
}

/* -------------------------------------------
   6. 横スクロール防止（必須）
------------------------------------------- */
body {
    overflow-x: hidden !important;
}

/* =========================================
   【Gold Media】LP用パーツ装飾デザイン完全版
   ========================================= */

/* -------------------------------------------
   1. 見出し (H2) のデザイン
   - 上下にラインを引いて高級感を出す
   - 文字サイズを少し大きくして視認性アップ
------------------------------------------- */
.wide-box h2 {
    /* 1. 元のテーマの装飾を消す（ここが重要！） */
    border-left: none !important;       /* 左の線を消す */
    border-right: none !important;      /* 右の線を消す */
    background: none !important;        /* 背景色を消す */
    padding-left: 0 !important;         /* 左の余白を消す */
    
    /* 2. 新しいLP用デザインを適用 */
    font-size: 26px !important;
    color: #333 !important;
    padding: 20px 0 !important;         /* 上下の余白 */
    margin-top: 0 !important;
    margin-bottom: 40px !important;
    
    /* ゴールドのライン（上下） */
    border-top: 2px solid #d4af37 !important;
    border-bottom: 2px solid #d4af37 !important;
    
    text-align: center !important;      /* 中央寄せ */
    line-height: 1.4 !important;
}

/* スマホ用調整 */
@media (max-width: 600px) {
    .wide-box h2 {
        font-size: 20px !important;
        padding: 15px 0 !important;
        margin-bottom: 30px !important;
    }
}

/* -------------------------------------------
   2. テキスト（本文）のデザイン
------------------------------------------- */
.wide-box p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 2em;
}

/* -------------------------------------------
   3. リスト（箇条書き）のデザイン
   - 白い箱に入れてチェックマークをつける
------------------------------------------- */
.wide-box ul.wp-block-list {
    background-color: #ffffff;
    padding: 2em 2em 2em 4em !important;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    margin-bottom: 2.5em;
    list-style: none !important;
}

.wide-box ul.wp-block-list li {
    position: relative;
    margin-bottom: 15px;
    font-weight: bold;
    color: #333;
    line-height: 1.6;
}

/* チェックマーク（ゴールド） */
.wide-box ul.wp-block-list li::before {
    content: '';
    display: block;
    position: absolute;
    left: -2em;
    top: 0.4em;
    width: 6px;
    height: 10px;
    border-right: 2px solid #d4af37;
    border-bottom: 2px solid #d4af37;
    transform: rotate(45deg);
}

/* -------------------------------------------
   4. ボタン (CTA) のデザイン
   - 立体的で押しやすいゴールドボタン
------------------------------------------- */
.wide-box .wp-block-button__link {
    background: linear-gradient(135deg, #d4af37 0%, #c5a028 100%) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 18px !important;
    padding: 18px 50px !important; /* 上下を少し厚くして高級感をアップ */
    border-radius: 8px !important; /* ★ここを50pxから8pxに変更 */
    box-shadow: 0 4px 10px rgba(197, 160, 40, 0.3) !important;
    border: none !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

/* ボタンの中に「＞」を作成 */
.wide-box .wp-block-button__link::after {
    content: "" !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-top: 2.5px solid #ffffff !important;
    border-right: 2.5px solid #ffffff !important;
    transform: rotate(45deg) !important;
    margin-left: 15px !important;
    transition: all 0.3s ease !important;
}

/* ボタンホバー時 */
.wide-box .wp-block-button__link:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 15px rgba(197, 160, 40, 0.5) !important;
    opacity: 1 !important;
    filter: brightness(1.05) !important;
}

/* ホバー時に「＞」だけさらに右にピコッと動く */
.wide-box .wp-block-button__link:hover::after {
    margin-left: 22px !important;
    margin-right: -7px !important;
}

/* スマホ用のボタン調整 */
@media (max-width: 768px) {
    /* 親要素の50%指定を突破 */
    .wide-box .wp-block-button {
        width: 100% !important; 
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .wide-box .wp-block-button__link {
        width: 100% !important; /* 横幅90%で左右にゆとりを */
        font-size: 16px !important;
        padding: 16px 10px !important;
        border-radius: 6px !important; /* スマホでは角丸を少し控えめに */
    }
}

/* -------------------------------------------
   5. メディアとテキスト（画像横並び）の調整
------------------------------------------- */
.wide-box .wp-block-media-text {
    margin-bottom: 40px !important;
}

/* スマホで縦積みになった時の画像下の余白 */
@media (max-width: 600px) {
    .wide-box .wp-block-media-text__media {
        margin-bottom: 20px !important;
    }
}

/* =========================================
   【最新・統一デザイン】通常記事の見出しセット
   （H2：上下ライン中央、H3：左アクセント下線、H4：L字デザイン）
   ========================================= */

/* --- H2：上下ラインの中央寄せ --- */
body .main_content h2:not(.wide-box h2),
body .main_content-is-page h2:not(.wide-box h2) {
    /* リセット */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    /* デザイン適用 */
    border-top: 1px solid #d4af37 !important;
    border-bottom: 1px solid #d4af37 !important;
    padding: 15px 0 !important;
    margin: 60px auto 30px !important;
    text-align: center !important;
    color: #333 !important;
    font-size: 24px !important;
    line-height: 1.5 !important;
}

/* --- H3：左側にアクセントを入れたゴールド下線 --- */
body .main_content h3:not(.wide-box h3),
body .main_content-is-page h3:not(.wide-box h3) {
    /* リセット */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;

    /* デザイン適用 */
    border-bottom: 2px solid #f2f2f2 !important;
    position: relative !important;
    padding: 10px 0 10px 20px !important;
    margin: 45px auto 20px !important;
    color: #333 !important;
    font-size: 20px !important;
}

/* 固定ページH3のテーマデフォルト黒線を消す */
section.main_content.main_content-is-page h3::after {
    background: none !important;
    background-color: transparent !important;
    height: auto !important;
}

/* H3の左側の小さな四角（アクセント） */
body .main_content h3:not(.wide-box h3)::before,
body .main_content-is-page h3:not(.wide-box h3)::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #d4af37 !important;
    border-radius: 2px !important;
}

/* H3のゴールド下線（左側だけ少し太く重ねる） */
body .main_content h3:not(.wide-box h3)::after,
body .main_content-is-page h3:not(.wide-box h3)::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    width: 60px !important;
    border-bottom: 3px solid #d4af37 !important;
}

/* --- H4：L字（左と下）のシンプルライン --- */
body .main_content h4:not(.wide-box h4),
body .main_content-is-page h4:not(.wide-box h4) {
    /* リセット */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;

    /* デザイン適用 */
    border-left: 4px solid #d4af37 !important;
    border-bottom: 1px solid #d4af37 !important;
    padding: 5px 15px !important;
    margin: 30px 0 15px !important;
    color: #333 !important;
    font-size: 18px !important;
    display: block !important;
    width: auto !important;
}

/* --- スマホ表示の微調整 --- */
@media (max-width: 768px) {
    body .main_content h2:not(.wide-box h2),
    body .main_content-is-page h2:not(.wide-box h2) { font-size: 20px !important; }
    body .main_content h3:not(.wide-box h3),
    body .main_content-is-page h3:not(.wide-box h3) { font-size: 18px !important; }
    body .main_content h4:not(.wide-box h4),
    body .main_content-is-page h4:not(.wide-box h4) { font-size: 17px !important; }
}

/* =========================================
   よくある質問（FAQ）アイコン形状・文字修正版
   ========================================= */

/* 1. 全体の枠 */
.main_content .faq {
    margin-bottom: 20px !important;
    border: 1px solid #efe1d6 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
}

/* 2. 質問(Q)部分 */
.main_content .faq summary {
    padding: 18px 50px 18px 20px !important;
    background-color: #fbfaf5 !important;
    display: flex !important;
    align-items: center !important; /* 文頭の高さに合わせる場合は flex-start */
    cursor: pointer !important;
    list-style: none !important;
}

/* Qアイコン：正方形に固定 */
.main_content .faq summary::before {
    content: "Q" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 32px !important;  /* 幅固定 */
    height: 32px !important; /* 高さ固定（正方形） */
    background-color: #d4af37 !important; /* 金背景 */
    color: #ffffff !important;           /* 白文字 */
    font-size: 18px !important;
    font-weight: bold !important;
    font-family: sans-serif !important;
    border-radius: 4px !important;
    margin-right: 15px !important;
    line-height: 1 !important;
}

/* 3. 回答(A)部分 */
.main_content .faq__contents {
    padding: 20px !important;
    background-color: #ffffff !important;
    border-top: 1px solid #efe1d6 !important;
    display: flex !important;
    align-items: flex-start !important;
}

/* Aアイコン：正方形に固定 */
.main_content .faq__contents::before {
    content: "A" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 32px !important;  /* 幅固定 */
    height: 32px !important; /* 高さ固定（正方形） */
    background-color: #b74e4e !important; /* 赤茶背景 */
    color: #ffffff !important;           /* 白文字 */
    font-size: 18px !important;
    font-weight: bold !important;
    font-family: sans-serif !important;
    border-radius: 4px !important;
    margin-right: 15px !important;
    line-height: 1 !important;
    visibility: visible !important;      /* 強制表示 */
    opacity: 1 !important;              /* 強制表示 */
}

/* 4. 中身のテキスト調整 */
.main_content .faq summary p,
.main_content .faq__contents p,
.main_content .faq__inner p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.6 !important;
    flex: 1 !important;
}

/* 矢印を消す */
.main_content .faq summary::-webkit-details-marker { display: none !important; }

/* 右側の開閉アイコン「＋」 */
.main_content .faq summary::after {
    content: "+" !important;
    position: absolute !important;
    right: 20px !important;
    color: #d4af37 !important;
    font-size: 24px !important;
}

/* 開いている時のマイナス */
.main_content .faq[open] summary::after {
    content: "−" !important;
}

/* スマホ表示 */
@media (max-width: 768px) {
    .main_content .faq summary::before,
    .main_content .faq__contents::before {
        width: 28px !important;
        height: 28px !important;
        font-size: 16px !important;
        margin-right: 10px !important;
    }
}

/* =========================================
   テーブル（表）のデザイン：上品ベージュ版
   ========================================= */

/* 1. テーブル全体の基本設定 */
.main_content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 30px !important;
    font-size: 15px !important;
    border: 2px solid #efe1d6 !important; /* 枠線を少し太くして安定感を出す */
}

/* 2. ヘッダー部分（1行目：落ち着いた濃いベージュ） */
.main_content table thead tr:first-child th,
.main_content table thead tr:first-child td,
.main_content table tbody tr:first-child th,
.main_content table > tr:first-child th {
    background-color: #dccab8 !important; /* ★黒から落ち着いたベージュに変更 */
    color: #4a413a !important;           /* 文字も濃い茶系にして馴染ませる */
    padding: 15px 10px !important;
    border: 1px solid #efe1d6 !important;
    text-align: center !important;
}

/* 3. 2行目以降のセル設定 */
.main_content table tbody tr td,
.main_content table tr td {
    padding: 12px 15px !important;
    border: 1px solid #efe1d6 !important;
    color: #444 !important;
    background-color: #ffffff !important;
}

/* 4. 縞々（ストライプ）模様 */
.main_content table tr:nth-child(even) td {
    background-color: #fbfaf5 !important; /* 1行おきに非常に薄いベージュ */
}

/* もし1行目がヘッダー(thead)扱いの時、tbodyの1行目がベージュにならないよう調整 */
.main_content table tbody tr:nth-child(odd) td {
    background-color: #ffffff !important;
}
.main_content table tbody tr:nth-child(even) td {
    background-color: #fbfaf5 !important;
}


/* =========================================
   ページタイトル（H1）のデザインカスタマイズ
   ========================================= */

/* 1. タイトルエリア全体の調整 */
.keyvisual__text_area .heading-is-custom {
    font-size: 32px !important; /* 少し大きくして存在感を出す */
    line-height: 1.4 !important;
    color: #333333 !important;
    font-weight: bold !important;
    letter-spacing: 0.05em !important;
    padding: 20px 0 !important;
    margin: 0 auto 30px !important;
    position: relative !important;
    text-align: center !important; /* 中央寄せ */
}

/* 2. タイトルの上下に飾りライン（ゴールド） */
.keyvisual__text_area .heading-is-custom::before,
.keyvisual__text_area .heading-is-custom::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60px !important; /* 短いラインでお洒落に */
    height: 3px !important;
    background-color: #d4af37 !important; /* ゴールド */
    display: block !important;
}

/* 上のライン */
.keyvisual__text_area .heading-is-custom::before {
    top: -10px !important;
}

/* 下のライン */
.keyvisual__text_area .heading-is-custom::after {
    bottom: -5px !important;
}

/* 3. 投稿日などの日付リストの装飾（もし表示されている場合） */
.date_list {
    justify-content: center !important; /* 日付も中央に */
    margin-top: 10px !important;
    border-top: 1px solid #efe1d6 !important;
    padding-top: 15px !important;
}

.date_list__item {
    font-size: 13px !important;
    color: #888 !important;
}

/* 4. スマホ表示の調整 */
@media (max-width: 768px) {
    .keyvisual__text_area .heading-is-custom {
        font-size: 24px !important;
        padding: 15px 10px !important;
    }
    
    .keyvisual__text_area .heading-is-custom::before,
    .keyvisual__text_area .heading-is-custom::after {
        width: 40px !important;
    }
}

/* =========================================
   案内ボックス（関連記事リンク）CSS矢印版
   （アイコンフォントを使わず確実に表示）
   ========================================= */

/* 1. ボックス全体の枠組み */
.main_content .box-is-preset6 {
    background-color: #fbfaf5 !important;
    border: 1px solid #efe1d6 !important;
    border-left: 5px solid #d4af37 !important;
    padding: 25px !important;
    margin: 40px auto !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    position: relative !important;
}

/* 2. ボックス内のテキスト構成 */
.main_content .box-is-preset6 .box__inner {
    color: #887c6c !important;
    font-size: 14px !important;
    font-weight: bold !important;
    letter-spacing: 0.05em !important;
    line-height: 1.6 !important;
}

/* 3. リンク（記事タイトル）部分 */
.main_content .box-is-preset6 a {
    display: block !important;
    margin-top: 5px !important;
    color: #333333 !important;
    font-size: 18px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    position: relative !important;
    padding-right: 30px !important; /* 矢印用の余白 */
    transition: all 0.3s ease !important;
}

/* 4. CSSで描く「シャープな矢印」アイコン */
.main_content .box-is-preset6 a::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 5px !important;
    width: 10px !important;
    height: 10px !important;
    border-top: 2.5px solid #d4af37 !important; /* ゴールドの線 */
    border-right: 2.5px solid #d4af37 !important; /* ゴールドの線 */
    transform: translateY(-50%) rotate(45deg) !important; /* 45度回転させて矢印にする */
    transition: all 0.3s ease !important;
}

/* ホバー時の動き（文字色変化 ＋ 矢印がスライド） */
.main_content .box-is-preset6 a:hover {
    color: #d4af37 !important;
}

.main_content .box-is-preset6 a:hover::after {
    right: -2px !important; /* 右にピコッと動く */
}

/* 5. スマホ用の調整 */
@media (max-width: 768px) {
    .main_content .box-is-preset6 {
        padding: 20px !important;
    }
    .main_content .box-is-preset6 a {
        font-size: 16px !important;
        padding-right: 25px !important;
    }
}

/* =========================================
   通常ページのリスト（箇条書き）カスタマイズ
   ========================================= */

/* 1. リスト全体の箱 */
body .main_content ul.wp-block-list:not(.wide-box ul) {
    background-color: #fbfaf5 !important; /* サイト共通の薄ベージュ */
    border: 1px solid #efe1d6 !important; /* 薄いベージュの枠線 */
    border-radius: 8px !important;
    padding: 25px 25px 25px 50px !important; /* 左側にチェックマーク用の余白 */
    margin: 30px auto !important;
    list-style: none !important; /* デフォルトの黒丸を消す */
}

/* 2. 各リスト項目（li）の設定 */
body .main_content ul.wp-block-list:not(.wide-box ul) li {
    position: relative !important;
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
    color: #444 !important;
    font-size: 16px !important;
}

/* 最後の項目の余白を消す */
body .main_content ul.wp-block-list:not(.wide-box ul) li:last-child {
    margin-bottom: 0 !important;
}

/* 3. ゴールドのチェックマーク（自作） */
body .main_content ul.wp-block-list:not(.wide-box ul) li::before {
    content: "" !important;
    position: absolute !important;
    left: -30px !important; /* 文頭の左側に配置 */
    top: 6px !important;
    width: 7px !important;
    height: 14px !important;
    border-right: 3px solid #d4af37 !important; /* ゴールドの線 */
    border-bottom: 3px solid #d4af37 !important; /* ゴールドの線 */
    transform: rotate(45deg) !important; /* 傾けてL字をチェックマークに */
    display: block !important;
}

/* スマホ用の微調整 */
@media (max-width: 768px) {
    body .main_content ul.wp-block-list:not(.wide-box ul) {
        padding: 20px 20px 20px 45px !important;
    }
    body .main_content ul.wp-block-list:not(.wide-box ul) li {
        font-size: 15px !important;
    }
}

/* 固定ページのキービジュアルを縦積みにする */
.l-keyvisual_page .keyvisual__contents,
.l-keyvisual_page .c-keyvisual {
    flex-direction: column !important;
}

.l-keyvisual_page .keyvisual__img_area,
.l-keyvisual_page .keyvisual__text_area {
    width: 100% !important;
    max-width: 100% !important;
}

/* タイトルをアイキャッチより先に表示 */
.l-keyvisual_page .keyvisual__text_area {
    order: -1 !important;
}

/* 投稿ページの監修者ボックス内SNSアイコンのはみ出し防止 */
.type-single .supervisor-profile .sns_list {
    margin-bottom: 0 !important;
    padding-bottom: 10px !important;
}

/* ============================================================
   41クリニックナビ — 追加CSS（オールインワン版）
   
   既存の追加CSSの一番下に貼り付けてください
   wide-box は使いません。mc41-wrap 自身が幅広になります
============================================================ */

/* --- mc41-wrap を720px枠から幅広に突き破る --- */
.wp-block-group.mc41-wrap{
  width:100vw!important;
  position:relative;
  left:50%;
  margin-left:-50vw!important;
  margin-right:-50vw!important;
  padding:30px 20px!important;
  background:#fff;
  box-sizing:border-box;
}
.wp-block-group.mc41-wrap > .wp-block-group__inner-container{
  max-width:1080px!important;
  margin:0 auto!important;
  padding:0!important;
}
@media(min-width:900px){
  .wp-block-group.mc41-wrap{padding:40px 20px!important}
}

/* mc41-wrap 内の子要素の幅制限を解除 */
.wp-block-group.mc41-wrap > .wp-block-group__inner-container > *{
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* --- リード文（グループブロック用）--- */
.wp-block-group.mc41-lead{
  background:#fff;border-radius:12px;padding:20px 18px;
  margin:0 0 24px;box-shadow:0 2px 10px rgba(0,0,0,.05);
  border-left:4px solid #1F4E79;
}
.wp-block-group.mc41-lead p{
  margin:0 0 14px!important;font-size:15px!important;
  line-height:2!important;color:#34495e!important;
}
.wp-block-group.mc41-lead p:last-child{margin-bottom:0!important}
@media(min-width:600px){
  .wp-block-group.mc41-lead{padding:24px 22px}
  .wp-block-group.mc41-lead p{font-size:16px!important}
}
@media(min-width:900px){
  .wp-block-group.mc41-lead{padding:28px}
}

/* --- セクション（グループブロック用）--- */
.wp-block-group.mc41-section{
  background:#fff!important;border-radius:12px!important;padding:20px 16px!important;
  margin-bottom:20px!important;box-shadow:0 2px 10px rgba(0,0,0,.05)!important;
  scroll-margin-top:70px;
}
.wp-block-group.mc41-section > .wp-block-group__inner-container{
  padding:0!important;
}
@media(min-width:600px){
  .wp-block-group.mc41-section{padding:24px!important}
}

/* --- セクション説明文（段落ブロック用）--- */
p.mc41-section-lead{
  font-size:14px!important;line-height:1.95!important;color:#5a6878!important;
  margin-bottom:18px!important;margin-top:0!important;
  padding:14px 16px!important;background:#f8fafc!important;border-radius:8px!important;
}
@media(min-width:600px){
  p.mc41-section-lead{font-size:15px!important;padding:16px 18px!important}
}

.mc41-grid{
  margin-bottom:18px!important;
}

/* --- メタ情報 --- */
.mc41-meta{display:flex;flex-wrap:wrap;gap:8px 16px;padding:14px 16px;background:#f0f4f8;border-radius:10px;margin-bottom:20px;font-size:13px;color:#5a6878;line-height:1.7}
.mc41-meta span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}

/* --- 検索ボックス（sticky）--- */
.mc41-search-wrap{position:sticky;top:0;z-index:90;padding:12px 0 14px;background:linear-gradient(to bottom,#fff 0%,#fff 80%,rgba(255,255,255,0) 100%);margin-bottom:18px}
.mc41-search-wrap input{width:100%;padding:14px 18px;font-size:16px;border:2px solid #d0d7de;border-radius:10px;background:#fff;font-family:inherit;outline:none;transition:border-color .2s;-webkit-appearance:none;appearance:none}
.mc41-search-wrap input:focus{border-color:#1F4E79;box-shadow:0 0 0 3px rgba(31,78,121,.12)}

/* --- カテゴリーナビ --- */
.mc41-catnav{background:#fff;border-radius:12px;padding:16px 14px;margin-bottom:24px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.mc41-catnav-title{font-size:13px;color:#5a6878;margin-bottom:10px;font-weight:600;padding:0 4px}
.mc41-catnav-list{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 4px 8px;scrollbar-width:thin}
.mc41-catnav-list::-webkit-scrollbar{height:4px}
.mc41-catnav-list::-webkit-scrollbar-thumb{background:#c0cad6;border-radius:2px}
.mc41-catnav-list a.mc41-catnav-btn{display:inline-block;padding:11px 16px;background:#f0f4f8!important;color:#1F4E79!important;text-decoration:none!important;border-radius:8px;font-size:13px;font-weight:600;transition:all .2s;white-space:nowrap;flex-shrink:0;min-height:42px;line-height:1.5}
.mc41-catnav-list a.mc41-catnav-btn:hover,.mc41-catnav-list a.mc41-catnav-btn:active{background:#1F4E79!important;color:#fff!important}

/* --- セクションヘッダー --- */
.mc41-section-head{display:flex;align-items:center;margin-bottom:14px;padding-bottom:14px;border-bottom:3px solid #1F4E79;flex-wrap:wrap;gap:10px}
.mc41-num{background:#1F4E79;color:#fff;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0}
.mc41-cat-title{color:#1F4E79!important;font-size:18px!important;font-weight:700!important;flex:1;margin:0!important;padding:0!important;border:none!important;line-height:1.4!important;min-width:0;background:none!important;border-top:none!important;border-bottom:none!important;text-align:left!important}
.mc41-count{background:#e8eef5;color:#1F4E79;padding:5px 12px;border-radius:12px;font-size:12px;font-weight:600;flex-shrink:0;white-space:nowrap}
@media(min-width:600px){
  .mc41-cat-title{font-size:20px!important}
  .mc41-num{width:38px;height:38px;font-size:16px}
}

/* --- カードグリッド --- */
.mc41-grid{display:grid;grid-template-columns:1fr;gap:10px}
.mc41-card{display:block;padding:16px 18px;background:#fafbfc;border:1px solid #e1e4e8;border-radius:10px;text-decoration:none!important;color:inherit!important;transition:all .2s;min-height:64px}
.mc41-card:hover,.mc41-card:active{background:#fff;border-color:#1F4E79;box-shadow:0 4px 12px rgba(31,78,121,.12);text-decoration:none!important}
.mc41-name{color:#1F4E79!important;font-weight:700;font-size:15px;margin-bottom:5px;line-height:1.45}
.mc41-tag{color:#586069!important;font-size:13px;line-height:1.6}
.mc41-card.mc41-hidden{display:none}
.mc41-section.mc41-hidden,.wp-block-group.mc41-section.mc41-hidden{display:none!important}
@media(min-width:600px){
  .mc41-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media(min-width:900px){
  .mc41-grid{grid-template-columns:repeat(3,1fr)}
}

/* --- 検索結果なし --- */
.mc41-noresult{text-align:center;padding:40px 20px;color:#586069;background:#fff;border-radius:12px;display:none}
.mc41-noresult.mc41-show{display:block}

/* --- フッター --- */
.mc41-footer{text-align:center;padding:24px 16px;color:#888;font-size:12px;line-height:1.7;margin-top:16px;border-top:1px solid #e8ecf1}
.mc41-footer p{margin:0 0 6px!important;font-size:12px!important;color:#888!important}
.mc41-footer p:last-child{margin-bottom:0!important}

/* 41クリニックページ：目次・著者プロフィールを非表示 */
.page-id-3737 .outline.u-all_show,
.page-id-3737 .profile.u-all_show{
  display:none!important;
}

/* スマホだけ：追従ヘッダー分を下げる */
@media(max-width:768px){
  .mc41-search-wrap{
    top:50px!important;
  }
  .wp-block-group.mc41-section{
    scroll-margin-top:120px!important;
  }
}