@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* -------------------------------------
   ヘッダー
-------------------------------------- */
.l-header__barInner,.l-header__inner.l-container,.l-fixHeader__inner.l-container{
	max-width: 100%;
}
/* -------------------------------------
   PC：ヘッダーの一番上の線を消す
-------------------------------------- */
.l-header {
    border-top: none !important;
}
/* -------------------------------------
   PC：グローバルナビ（ヘッダーメニュー）を太字に
-------------------------------------- */
.c-gnav,
.c-gnav a,
.c-gnav span,
[class*="gnav"] a {
    font-size: 17px !important; 
    letter-spacing: 0.05em; 
	font-weight:bold;
}

/* サブメニューの文字の設定（メインで大きくした分をここで元に戻す） */
.c-gnav .sub-menu li a,
.c-gnav .sub-menu li a span {
    font-size: 15px !important;     /* サブメニューは大きくなりすぎないように15pxに縮める */
    color: #544a40 !important;      
}
/* ヘッダーのサブメニュー項目（ドロップダウン）に「＞」の矢印を追加する */
.c-gnav .sub-menu li a {
    position: relative;
    padding-left: 24px !important; /* 矢印を入れるための左側の余白を確保 */
}
.c-gnav .sub-menu li a::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px; /* 矢印の左からの位置 */
    margin: auto; /* 上下中央に配置 */
    width: 6px; /* 矢印のサイズ */
    height: 6px;
    border-top: 2px solid #876d52; /* 矢印の色（こげ茶色） */
    border-right: 2px solid #876d52;
    transform: rotate(45deg); /* 四角形を45度傾けて「＞」の形にする */
}
/* 1. 右側の電話番号エリアが潰れる（改行される）のを防ぐ */
.l-header__widget,
.w-header {
    flex-shrink: 0 !important; /* 縮むのを禁止する */
    min-width: max-content !important; /* 中身の幅をキープ */
}
/* -------------------------------------
   PC：少し狭い画面（ノートPCなど）ではヘッダーの電話番号を非表示に
-------------------------------------- */
@media screen and (min-width: 960px) and (max-width: 1280px) {
    /* 右側の電話番号エリア（ヘッダーウィジェット）を非表示にする */
    .l-header__widget,
    .w-header {
        display: none !important;
    }
    .c-gnav,
    .c-gnav a,
    .c-gnav span,
    [class*="gnav"] a {
        font-size: 13px !important; /* 17pxから13pxに少し小さくする */
        letter-spacing: 0 !important; /* 文字の間隔を標準に戻す */
    }
}
/* -------------------------------------
   スマホ：ドロワーメニュー（三本線の中）を太字に
-------------------------------------- */
.p-spMenu__nav .menu-item a {
    font-size: 16px;              
}

/* -------------------------------------
   スマホ：フッター固定メニューを太字に
-------------------------------------- */
#fix_bottom_menu a,
#fix_bottom_menu span,
.l-fixFooterMenu a,
.l-fixFooterMenu span,
[id^="fix_"] a span {
    font-weight: bold !important;
}
/* -------------------------------------
 * メインビジュアルPC画面のとき（画面幅が960px以上のとき）
-------------------------------------- */
@media screen and (min-width: 960px) {
    /* 1. 外側の透明な箱を「画面いっぱい」に広げて、中身を左下に集める */
    #main_visual .p-mainVisual__textLayer {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important; /* ど真ん中に固定するSWELLの呪縛を解除 */
        display: flex !important;
        align-items: flex-end !important;       /* 一番下に落とす */
        justify-content: flex-start !important; /* 一番左に寄せる */
        padding: 25% 40% 0% 0% !important;          /* 下から5%、左から5%の余白を作る（お好みで調整） */
        width: 100% !important;
        height: 100% !important;
        pointer-events: none !important; /* スライダー操作の邪魔にならないようにする */
    }

    /* 2. ブログパーツの幅が広がりすぎないように制限 */
     #main_visual .p-blogParts {
        width: 100% !important;
        max-width: 700px !important; /* カラムブロックが画面右まで伸びるのを防ぐ */
         pointer-events: auto !important;
    }

/* 3. 小さいノートPC（960px〜1350px）の時は、画像を縮める */
    @media screen and (max-width: 1350px) {
        #main_visual .p-blogParts img {
            max-width: 400px !important;
            height: auto !important;
        }
    }
}

/* -------------------------------------
 * メインビジュアルスマホ画面のとき（画面幅が959px以下のとき）
-------------------------------------- */
@media screen and (max-width: 959px) {
    /* スマホは今まで通り、画面のど真ん中に配置 */
    #main_visual .p-mainVisual__textLayer {
        position: absolute !important;
        top: 80% !important;
        left: 45% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        text-align: center !important;
    }
}

/* -------------------------------------
/* トップページのセクション見出し（中央の短い線）の色・太さ・丸みを変更 
-------------------------------------- */
.wp-block-heading.is-style-section_ttl::after {
    background-color: #876d52 !important; /* こげ茶色 */
    height: 3px !important;               /* 線の太さ（デフォルトより少し太め） */
    border-radius: 10px !important;       /* 線の両端をコロンと丸くする */
}

/* 万が一、線がボーダー（枠線）で引かれていた場合の保険 */
.wp-block-heading.is-style-section_ttl {
    border-bottom-color: #876d52 !important;
}

/* 文字サイズを固定ページに統一 */
.front-page .is-style-section_ttl,
.front-page .is-style-section_ttl span,
.home .is-style-section_ttl,
.home .is-style-section_ttl span {
    font-size: 1.6rem !important; /* スマホで見たときのサイズ */
    line-height: 1.5 !important;
}

/* PCなどの大きな画面で見たときの調整 */
@media screen and (min-width: 600px) {
    .front-page .is-style-section_ttl,
    .front-page .is-style-section_ttl span,
    .home .is-style-section_ttl,
    .home .is-style-section_ttl span {
font-size: 31px !important; /* PCで見たときのサイズ（固定ページと同じ） */
    }
}
/* -------------------------------------
   記事・固定ページ内の大見出し（H2）にのみ適用
   （トップページとSWELLのセクション見出しは完全に除外！）
-------------------------------------- */
body:not(.home):not(.front-page) .post_content h2.wp-block-heading:not(.is-style-section_ttl) {
    color: #544a40 !important;
    position: relative;
    padding-left: 20px;
    font-size: 1.6rem !important; /* スマホで見たときのサイズ */
}

/* 左側の縦線デザイン */
body:not(.home):not(.front-page) .post_content h2.wp-block-heading:not(.is-style-section_ttl)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 110%;
    background: #876d52;
    border-radius: 10px;
}

/* PCなどの大きな画面で見たときの調整 */
@media screen and (min-width: 600px) {
    body:not(.home):not(.front-page) .post_content h2.wp-block-heading:not(.is-style-section_ttl) {
        font-size: 28px !important; /* PCではさらにドーンと大きく！ */
    }
}
/* -------------------------------------
   トップページのお知らせ一覧
-------------------------------------- */
/* 日付とカテゴリー並べ替え */
.top-newslist .p-postList__cat {
order: 1;
}
.top-newslist .p-postList__times.c-postTimes.u-thin {
order: 2;
}
/* 日付とカテゴリーのアイコン非表示 */
.top-newslist time.c-postTimes__posted.icon-posted::before,.top-newslist span.p-postList__cat.icon-folder::before{
display: none;
}
/* 日付とカテゴリーの文字サイズ */
.top-newslist .p-postList__cat,.top-newslist time.c-postTimes__posted {
font-size: 15px;
}
.p-postList__item {
margin: 0px;
}
/*お知らせリストの記事タイトル（h2）のサイズ調整*/
.p-postList__title {
    font-size: 16px !important; /* PCで見たときの丁度いいサイズ */
    line-height: 1.2 !important;
}

/* スマホなど画面が小さいときの微調整 */
@media screen and (max-width: 600px) {
    .p-postList__title {
        font-size: 14px !important; /* スマホでは少し小さめに */
    }
}
/* カテゴリーの装飾 */
.top-newslist .p-postList__cat {
color: #7d5f41;
border: solid 1px #7d5f41;
border-radius: 3px;
padding: 4px;
}

/* ★PCでお知らせタイトルにマウスを乗せると */
.p-postList__item a:hover .p-postList__title {
    color: #7d5f41 !important; 
}
/* -------------------------------------
トップのお知らせ一覧：1列・左右並び替え（線調整版）
-------------------------------------- */
/* PC（画面幅600px以上）のとき、日付とタイトルを横並びにする */
@media screen and (min-width: 600px) {
    /* 日付とタイトルを包んでいる箱を横並びにする */
    .top-newslist .p-postList__body {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 6px 0 !important;
        width: 100% !important;
    }

    /* 左側：日付エリアの幅を固定 */
    .top-newslist .p-postList__meta {
        flex-shrink: 0 !important;
        width: 130px !important;
        margin: 0 !important;
    }

    /* 右側：タイトルエリアの配置と余白調整 */
    .top-newslist .p-postList__title {
        margin: 0 0 0 10px !important;
        text-align: left !important;
        flex-grow: 1 !important;
    }
}
/* -------------------------------------
 1. 固定ページ：タイトルエリア全体を中央揃えに、文字を大きく
-------------------------------------- */
/* アーカイブ（一覧）ページ以外に適用 */
body:not(.archive):not(.category) .c-pageTitle {
    text-align: center !important;
    font-size: 2.0rem !important; /* 🌟 1.8rem から 2.2rem に変更しました！お好みで調整してください */
}

/* -------------------------------------
   2. 固定ページ：サブタイトル（英語）のデザイン
-------------------------------------- */
body:not(.archive):not(.category) .c-pageTitle__sub,
body:not(.archive):not(.category) .p-pageHead__sub,
body:not(.archive):not(.category) .c-pageTitle__title small {
    display: block !important;
    text-align: center !important; /* 中央揃えを強制 */
    color: #E6B422 !important;     /* マスタードイエロー */
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    margin: 8px auto 0 !important; /* 上に隙間を空けて中央配置 */
}

/* -------------------------------------
   3. 固定ページ：タイトルの下の「ちょこん」とした線
-------------------------------------- */
body:not(.archive):not(.category) .c-pageTitle__inner::after {
    content: '';
    display: block;
    width: 40px !important;
    height: 4px !important;
    background-color: #876d52 !important; 
    margin: 15px auto 0 !important; /* 中央配置 */
    border-radius: 2px !important;
}

/* -------------------------------------
   4. アーカイブページ：SWELL標準に戻す（念のためのリセット）
-------------------------------------- */
.archive .c-pageTitle__sub,
.category .c-pageTitle__sub {
    display: inline !important; 
    color: inherit !important;
    font-size: 0.6em !important;
    margin: 0 0 0 10px !important; /* SWELL標準の横並びの隙間 */
}
.archive .c-pageTitle__inner::after,
.category .c-pageTitle__inner::after {
    display: none !important;
}
/* -------------------------------------
   写真・バナー・サムネイルの角を丸くする
-------------------------------------- */

/* 1. 記事や固定ページの中にある画像 */
.post_content img {
    border-radius: 10px;
}

/* 2. 「お知らせ」や「病気のはなし」の一覧サムネイル画像 */
.c-postThumb,
.c-postThumb__img {
    border-radius: 10px;
}

/* 3. 「初めての方へ」などの画像バナーリンク */
.c-bannerLink,
.c-bannerLink__img {
    border-radius: 10px;
}

/* 4. トップページのメインビジュアル（スライダー画像）※もし丸くしたい場合 */
.p-mainVisual__img {
    border-radius: 10px;
}
/* 5. ボックス角丸*/
.has-border.-border01 {
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* -------------------------------------
  診療時間 表（テーブル）のデザインを見やすくする
-------------------------------------- */
/* 1. 表を囲む外側のブロックを角丸にする */
.post_content .wp-block-table {
    border-radius: 10px; /* ★ここで角を丸く */
    overflow: hidden;
    border: 1px solid #e6d5b8; /* 外枠の線 */
    margin-bottom: 2em;
}

/* 2. 中の表本体の設定（外枠が二重になるのを防ぐ） */
.post_content .wp-block-table table {
    border-collapse: collapse !important;
    border-style: hidden !important; /* テーブル自体の外側の線を隠す */
    margin: 0 !important;
    width: 100%;
}

/*3. テーブルの区切り線（下の線）をベージュに変更 */
.post_content table tr,
.post_content table th,
.post_content table td {
    border-bottom-color: #e6d5b8 !important; /* 下の線を指定の色に変更 */
    border-color: #e6d5b8 !important;        /* 念のため全体の色も統一 */
}

/* 4. 見出し（th：平日・土・日など） */
.post_content .wp-block-table th {
	color: #7d5f41;
    background-color: #e6d5b8 !important;
    font-weight: bold;
    text-align: center !important;
    padding: 10px 8px !important;
/*  border: 1px solid #E0E0E0 !important; /* 中の線を引く */
}

/* 5. データ部分（td：時間や●など） */
.post_content .wp-block-table td {
    background-color: #FDF9F1;
	text-align: center !important;
    padding: 10px 8px !important;
    vertical-align: middle !important;
/*  border: 1px solid #E0E0E0 !important; /* 中の線を引く */
}

/* ※スマホ対応：横スクロール */
.wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 6.   表の見出し（th）の下の二重線を一本線に直す*/
.post_content .wp-block-table thead,
.post_content .wp-block-table tbody {
    border-bottom: none !important; /* 余計な枠線を消す */
}

.post_content .wp-block-table th {
    border-bottom-width: 1px !important; /* 太線を1pxの細線に戻す */
    border-bottom-style: solid !important;
}
/* -------------------------------------
 TOP 病院案内のボタン幅を統一 
※追加CSSクラス：.uniform-btn
-------------------------------------- */
.uniform-btn a.swell-block-button__link {
    width: 250px !important; /* ここの数字で好きな幅に調整できます */
    justify-content: center !important; /* 文字を真ん中に */
}
/* -------------------------------------
   当院について：ボタン幅を統一（スマホ対応）
   ※追加CSSクラス： uniform-btnl 
-------------------------------------- */
/* ① 外側の親ブロック自体を横幅いっぱいに広げる */
.vivid-block-button.uniform-btnl,
.swell-block-button.uniform-btnl,
.wp-block-button.uniform-btnl {
    display: block !important;
    width: 100% !important;
    text-align: center !important; /* 中央に配置 */
}

/* ② 中のリンクボタンの横幅を揃える（既存のコードを最適化） */
.uniform-btnl a.swell-block-button__link,
.uniform-btnl a.wp-block-button__link {
    display: inline-flex !important; /* flexからインラインに変更してmax-widthを効かせる */
    width: 100% !important; /* スマホでは画面幅に合わせて可変 */
    max-width: 340px !important; /* PCでは最大340pxでストップして横幅を揃える */
    justify-content: center !important; /* 文字を真ん中に */
    box-sizing: border-box !important;
}

/* -------------------------------------
   ページ内リンク（リンクリスト）
   （追加CSSクラス： page-anchor-list）
-------------------------------------- */
/* PC表示：全体を中央揃えにして綺麗に並べる */
ul.page-anchor-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* ここで全体を中央揃え！ */
    gap: 15px 40px !important; /* ボタン同士の隙間（縦15px 横40px） */
    margin: 0 auto 40px !important;
    padding: 0 !important;
}

ul.page-anchor-list li {
    margin: 0 !important; /* SWELL標準の余白をリセット */
	border-bottom: 1px solid #e6d5b8 !important; /* ここで1つずつ下線を引く！ */
	padding-bottom: 4px;
}

/* スマホ表示（600px以下）：綺麗な2カラム（2列）にする */
@media screen and (max-width: 600px) {
    ul.page-anchor-list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* スマホで強制2カラム！ */
        gap: 10px !important; /* スマホは少し隙間を狭く */
    }
    
    ul.page-anchor-list li {
        width: 100% !important;
		border-bottom: 1px solid #e6d5b8 !important; /* ここで1つずつ下線を引く！ */
        margin: 0 !important;
    }
    
    /* スマホでのボタン内の文字・アイコンの中央揃え微調整 */
    ul.page-anchor-list li a {
        display: flex !important;
        justify-content: center !important; /* アイコンと文字を真ん中に */
        align-items: center !important;
        font-size: 13px !important; /* 2列でも文字がはみ出ない絶妙なサイズ */
        padding: 12px 5px !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }
}
/*   ページ内リンク：マウスを乗せた時のアンダーラインを消す*/
ul.page-anchor-list li a:hover,
ul.page-anchor-list li a:focus,
ul.page-anchor-list li a:active {
    text-decoration: none !important;
}
/* -------------------------------------
   バスでお越しの方の表（スマホ専用・横スクロール）
-------------------------------------- */
@media screen and (max-width: 600px) {
    /* バスの表だけ、スマホ画面いっぱいに広げてスクロールさせる */
    .post_content .wp-block-table.bus-table {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 0 !important; /* スクロールバーと枠線が被るのを防ぐため角丸解除 */
        border-left: none !important; /* 左右の枠線を消してスワイプしやすくする */
        border-right: none !important;
/*        margin-left: -20px; /* 画面の端から端まで広げる */
/*        margin-right: -20px;*/
    }
    
    .post_content .wp-block-table.bus-table table {
/*        width: 600px !important; /* 文字が潰れないように最低限の横幅を確保 */
    }
    
    .post_content .wp-block-table.bus-table th,
    .post_content .wp-block-table.bus-table td {
        white-space: nowrap !important; /* 変なところで改行させない */
    }
}
/* -------------------------------------
   フッターナビ
-------------------------------------- */
/* 縦線消す */
.l-footer__nav li:first-child a,
.l-footer__nav li a {
    border-left: 0;
    border-right: 0;
}

/* -------------------------------------
   診療案内 カラム内ボックス 高さ揃え
-------------------------------------- */
.swell-block-columns__inner {
    align-items: stretch !important;
}

.swell-block-column {
    display: flex !important;
    flex-direction: column !important;
}

.swell-block-column .wp-block-group,
.swell-block-column .wp-block-group.has-border.-border01 {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
/* カラム内のグループ（黄色い枠）の高さを統一して縦並びにする */
.swell-block-columns .wp-block-group.has-background {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 黄色い枠の中のインナーコンテナも縦いっぱいに広げる */
.swell-block-columns .wp-block-group.has-background > .wp-block-group__inner-container {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}

/* 箇条書き（または最後のテキスト）を広げてボタンを下へ押し出す */
.swell-block-columns .wp-block-group.has-background .wp-block-list,
.swell-block-columns .wp-block-group.has-background p:not(.mininote) {
    flex-grow: 1 !important;
}

/* ボタンを一番下に固定する */
.swell-block-columns .wp-block-group.has-background .swell-block-button {
    margin-top: auto !important;
}

/* リッチカラムブロック 角丸（影切れ防止） */
.swell-block-column {
    border-radius: 10px;
    overflow: hidden;
    padding-bottom: 15px !important; /* 影が入るための隙間 */
}
/* -------------------------------------
求人ページ：ボタン幅を統一 
-------------------------------------- */
.recruit-btn a.swell-block-button__link {
    width: 300px !important; /* ここの数字で好きな幅に調整できます */
    justify-content: center !important; /* 文字を真ん中に */
}
/* -------------------------------------
   求人ページ：募集要項の専用テーブルデザイン
   （追加CSSクラス： recruit-table）
-------------------------------------- */
/* 角丸などの診療時間のベース設定をリセット */
.post_content .recruit-table {
    border-radius: 0 !important;
}

/* 表全体の枠組み */
.post_content .recruit-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid #e6d5b8 !important; 
}

/* 各マスの余白と文字の配置 */
.post_content .recruit-table th,
.post_content .recruit-table td {
    padding: 15px 20px !important;
    border: 1px solid #e6d5b8 !important;
    text-align: left !important;       /* 診療時間の中央揃えを上書きして左寄せ */
    vertical-align: middle !important;
    line-height: 1.8 !important;
}

/* 左側の項目列のデザイン（th や 1列目のtd） */
.post_content .recruit-table tr th,
.post_content .recruit-table tr td:first-child {
    background-color: #FDF9F1 !important; /* ほんのり温かい極薄ベージュ */
    color: #5D4037 !important;            
    font-weight: 700 !important;
    width: 30% !important;                /* 左側の幅を固定 */
}

/* 右側の内容列の背景色を白にする */
.post_content .recruit-table tr td:not(:first-child) {
    background-color: #ffffff !important;
    color: #544a40 !important;
}

/* スマホで見たときの微調整 */
@media screen and (max-width: 850px) {
    .post_content .recruit-table tr th,
    .post_content .recruit-table tr td:first-child {
        padding: 10px !important;
        font-size: 14px !important;
		width: 100% !important;                /* 左側の幅を固定 */
    }
    .post_content .recruit-table tr td:not(:first-child) {
        padding: 10px !important;
        font-size: 14px !important;
    }
}
/* -------------------------------------
   求人ページ：アコーディオンのデザインカスタマイズ
-------------------------------------- */
/* 求人アコーディオンの共通デザイン（シンプル版） */
.job-accordion summary {
    background-color: #FDF9F1 !important; /* 優しい薄い背景色 */
    border: 1px solid #e6d5b8 !important;
    font-size: 17px !important; /* 文字を少し大きく */
    font-weight: bold !important; /* 文字を太くして目立たせる */
    padding: 16px 20px !important; /* 上下左右の余白を少し広げてタップしやすく */
}

/* -------------------------------------
  スタッフ紹介：「縦ライン」リスト
   （追加CSSクラス： staff-list ）
-------------------------------------- */
.staff-list {
    list-style-type: none !important;
    padding-left: 0 !important;
}
.staff-list li {
    position: relative;
    padding-left: 1em; /* ラインとの隙間 */
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.6;
    border-bottom: 1px dashed #e6d5b8; 
    padding-bottom: 8px;
}
/* 左側にブラウンの縦ラインを引く */
.staff-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px; 
    width: 4px;
    height: 16px;
    background-color: #c5a059; /* ブラウン */
    border-radius: 2px;
}
.staff-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
/* -------------------------------------
   検索ボックスとアイコン付きメニュー部分の背景を白にする
-------------------------------------- */
/* 検索ボックス本体と入力欄を白に */
.wp-block-search,
.wp-block-search__input {
    background-color: #ffffff !important;
}

/* =========================================
   求人応募フォーム（Contact Form 7）デザイン
========================================= */

/* 1. 入力欄（テキスト、メール、電話、テキストエリア）のベースデザイン */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px; /* 角を少し丸くして優しい印象に */
    background-color: #f8fafc;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin-bottom: 20px;
    margin-top: 10px;
}
.wpcf7-form input[type="date"]{
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px; /* 角を少し丸くして優しい印象に */
    background-color: #f8fafc;
    font-size: 16px;
    transition: all 0.3s ease;
    box-sizing: border-box;
    margin-bottom: 20px;
    margin-top: 10px;
}

/* 2. 入力欄をタップ（選択）した時のエフェクト */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    border-color: #876d52; /* 選択中のみテーマカラーの枠線にする */
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 0 8px rgba(135, 109, 82, 0.2); /* ふんわり光る */
}

/* 3. ラジオボタン（希望職種）の間隔調整（スマホでタップしやすく） */
.wpcf7-form .wpcf7-radio .wpcf7-list-item {
    margin-right: 25px;
    margin-bottom: 20px;
    display: inline-block;
    font-size: 16px;
}

/* 4. 履歴書添付（ファイル）ボタンのデザインと余白 */
.wpcf7-form input[type="file"] {
    margin-top: 10px;
    margin-bottom: 40px !important; /* ★ここで下のプライバシーポリシーとの間隔をしっかり開けます */
    font-size: 15px;
    cursor: pointer;
    width: 100%;
}

/* 「ファイルを選択」ボタン部分をオシャレにする */
.wpcf7-form input[type="file"]::file-selector-button {
    background-color: #ffffff;
    color: #7d5f41; /* 文字色：ブラウン */
    border: 2px solid #e6d5b8; /* 枠線：ベージュ */
    border-radius: 8px; /* 角を少し丸く */
    padding: 10px 20px;
    margin-right: 15px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* ボタンにマウスを乗せた時（ホバー時）の動き */
.wpcf7-form input[type="file"]::file-selector-button:hover {
    background-color: #fefaf2;
    border-color: #c5a059; /* 枠線：マスタードに変化 */
    color: #c5a059;
}

/* 5. 送信ボタンをアプリ風の目立つボタンに！ */
.wpcf7-form input[type="submit"] {
    width: 100%;
    max-width: 400px;
    margin: 30px auto 0;
    display: block;
    padding: 16px 20px;
    background-color: #c5a059;
    color: #ffffff;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 50px; /* カプセル型で押しやすく */
    box-shadow: 0 4px 10px rgba(135, 109, 82, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 6. 送信ボタンにマウスを乗せた時（ホバー時）の動き */
.wpcf7-form input[type="submit"]:hover {
    background-color: #6b553e; /* 少し濃いブラウンに */
    transform: translateY(-2px); /* 少し浮き上がる */
    box-shadow: 0 6px 15px rgba(135, 109, 82, 0.3);
}

/* 7.必須・任意バッジのデザイン */
.badge-required,
.badge-optional {
    display: inline-block;
    padding: 3px 8px 4px;
    margin-left: 10px;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 2px; /* 角の丸み */
    vertical-align: middle;
    line-height: 1;
}

/* 必須バッジ（目立つ黄色） */
.badge-required {
    background-color: #c5a059;
    color: #ffffff;
}

/* 任意バッジ（控えめなグレー） */
.badge-optional {
    background-color: #a0aec0;
    color: #ffffff;
}
/* メールフォーム内のプライバシーポリシーのリンク色を変更 */
.wpcf7-form .wpcf7-list-item-label a {
    color: #4a90e2 !important;
    text-decoration: underline; /* リンクと分かりやすいように下線をつける */
    font-weight: bold; /* 少し太字にして目立たせる */
}

/* マウスを乗せた（ホバーした）ときの明るさ調整 */
.wpcf7-form .wpcf7-list-item-label a:hover {
    color: #357abd !important; /* 少し濃い青にして反応を出す */
    text-decoration: none; /* ホバー時に下線を消す */
}
/* -------------------------------------
   カテゴリー・タグページのタイトル設定
-------------------------------------- */
/* 1. タイトル全体を中央揃えにする */
.category .c-pageTitle,
.tag .c-pageTitle {
    text-align: center !important;
}

/* 2. サブタイトルを完全に消す */
.category .c-pageTitle__subTitle,
.tag .c-pageTitle__subTitle {
    display: none !important;
}

/* 3. タイトルの下に茶色の線を出す */
.category .c-pageTitle__inner::after,
.tag .c-pageTitle__inner::after {
    content: '';
    display: block !important;
    width: 40px !important;
    height: 4px !important;
    background-color: #876d52 !important; 
    margin: 15px auto 0 !important; /* 中央配置 */
    border-radius: 2px !important;
}
/* -------------------------------------
   タグクラウド（タグボタン）のデザイン（サイドバー対応版）
-------------------------------------- */
.wp-block-tag-cloud a,
.tagcloud a {
    display: inline-block !important;
    background-color: #ffffff !important; /* 背景（白） */
    color: #7d5f41 !important; /* 文字色（テーマカラーのブラウン） */
    border: 1px solid #7d5f41 !important; /* 枠線（ブラウン） */
    border-radius: 50px !important; /* 丸っこいカプセル型に */
    padding: 5px 10px !important; /* ボタンの大きさを整える */
    margin: 0 2px 3px 0 !important; /* ボタン同士の隙間 */
    font-size: 14px !important; /* 文字サイズ */
    text-decoration: none !important; /* 下線を消す */
    transition: all 0.3s ease !important; /* ふわっと変化させる */
}

/* マウスを乗せた時（ホバー時）の動き */
.wp-block-tag-cloud a:hover,
.tagcloud a:hover {
    background-color: #7d5f41 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(125, 95, 65, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* -------------------------------------
/* フッター全体のバランス調整
-------------------------------------- */
/* メニューのタイトル（当院について等）の文字サイズと余白調整 */
.l-footer .widget_nav_menu .widget-title {
    font-size: 1.1em; /* 少し大きくして見出しらしく */
    font-weight: bold;
    margin-bottom: 15px; /* 下のメニュー項目との隙間 */
    color: #333; /* 文字色（必要に応じて変更） */
}

/* メニュー項目（アクセス等）の文字サイズと行間調整 */
.l-footer .widget_nav_menu ul li a {
    font-size: 0.95em; /* 表の文字サイズに近づける */
    padding: 8px 0; /* 行間を少し広げて押しやすく */
}

/* 左側のロゴや表が入っているエリアの上部余白を調整 */
/* これにより、右側のメニューと高さのスタート位置が揃いやすくなります */
.l-footer .l-footer__widgetArea1 {
    padding-top: 10px; 
}

.swell-block-column .wp-block-group__inner-container {
    height: 100% !important;
}

/* 1. フッターメニューの左側にある矢印アイコンを消す */
.l-footer .widget_nav_menu ul li a::before {
    display: none !important;
}
.l-footer .widget_nav_menu ul li a {
    padding-left: 0 !important; /* アイコンが消えた分の左側の隙間を詰める */
}

/* 2. 【PC表示のみ】3つの枠の横幅の比率を変更する */
@media (min-width: 960px) {
    /* SWELLの均等割り付けを解除 */
    .l-footer__widgetArea .w-footer.-col3 {
        display: flex !important;
        justify-content: space-between !important;
    }

    /* 1つめの枠（ロゴ・住所・診療時間の表）を「50%」に広げる */
    .l-footer__widgetArea .w-footer.-col3 > .w-footer__box:nth-child(1) {
        width: 40% !important;
        max-width: 40% !important;
    }

    /* 2つめの枠（当院について）と3つめの枠（診療・各種ご案内）を「25%」に狭くする */
    .l-footer__widgetArea .w-footer.-col3 > .w-footer__box:nth-child(2),
    .l-footer__widgetArea .w-footer.-col3 > .w-footer__box:nth-child(3) {
        width: 25% !important;
        max-width: 25% !important;
    }
}
/* フッターの診療時間表のマス目の余白を狭くしてコンパクトにする */
.l-footer__widgetArea .w-footer__box:nth-child(1) table th,
.l-footer__widgetArea .w-footer__box:nth-child(1) table td {
    padding: 5px 10px !important; /* 上下の余白を5px、左右を10pxに縮小 */
    line-height: 1.4 !important; /* 行間も少し詰める */
}
/* フッターの診療時間表の「全体の横幅」を制限する */
.l-footer__widgetArea .w-footer__box:nth-child(1) figure.wp-block-table {
    max-width: 480px !important; /* ここで表の最大幅を制限（お好みで調整） */
    margin-right: auto !important; /* 右側に余白を作って隣のメニューと離す */
}

/* 獣医師勤務表　PDFの下のダウンロードリンク文字を大きくする */
.wp-block-file a:not(.wp-block-file__button) {
    font-size: 18px !important; /* 文字サイズ（お好みで調整してください） */
    font-weight: bold;         /* 文字を太字にしてさらに見やすく */
}

/* ダウンロードボタンを丸く・ご指定のマスタード色にする */
.wp-block-file .wp-block-file__button {
    background-color: #C5A059 !important; /* ご指定のマスタードカラー */
    color: #ffffff !important;            /* 文字色は白 */
    border-radius: 50px !important;       /* 完全に丸く（カプセル型）する */
    padding: 10px 25px !important;        /* ボタンのぷっくり感を調整 */
    font-size: 15px !important;           /* ボタン内の文字サイズ */
    transition: background-color 0.3s ease;
}

/* ボタンにマウスを乗せたとき（ホバー時）の色 */
.wp-block-file .wp-block-file__button:hover {
    background-color: #A98443 !important; /* なじむように少し濃くしたマスタード */
}
/* -------------------------------------
   病気のはなし：特定の表（custom-disease-table）専用デザイン
-------------------------------------- */
/* 表全体のレイアウト */
.custom-disease-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    table-layout: fixed !important; /* 幅を固定化 */
}
.post_content .custom-disease-table {
    border-radius: 0 !important;
}

/* ★最優先設定：一番上のヘッダー（th要素）を強制的に左寄せにする */
.post_content .custom-disease-table table th,
.post_content .custom-disease-table table tr th,
.custom-disease-table table th {
    background-color: #e6d5b8 !important; /* 温かみのあるトーン */
    color: #4a3c31 !important; /* 濃いブラウン */
    font-weight: bold !important;
    text-align: left !important; /* ★ここで一番上もすべて左寄せを最優先で強制 */
    padding: 12px 10px !important;
    border: 1px solid #d1bfa7 !important;
}

/* ★最優先設定：すべてのtd要素（クラスの有無、列数に関わらず）を強制的に左寄せにする */
.post_content .custom-disease-table table td,
.post_content .custom-disease-table table tr td,
.custom-disease-table table td,
.custom-disease-table table td.has-text-align-left,
.custom-disease-table table td.has-text-align-center,
.custom-disease-table table td.has-text-align-right {
    padding: 14px 12px !important;
    border: 1px solid #e2d7c7 !important; /* 優しい線 */
    vertical-align: middle !important; /* 上下中央揃え */
    text-align: left !important; /* ★ここですべて左寄せを最優先で強制 */
}
/* -------------------------------------
   フッターの最上部にグレーの境界線を引く
-------------------------------------- */
footer.l-footer,
.l-footer,
.w-footerWidget {
	border-top: 1px solid #e3e3e3 !important; /* お知らせとお揃いのベージュの線 */
}

/* 線と文字がくっつかないように内側の余白を調整 */
.l-footer__widget,
.w-footerWidget {
    padding-top: 40px !important;
}
/* -------------------------------------
   reCAPTCHA非表示
-------------------------------------- */
.grecaptcha-badge {
    visibility: hidden;
}