/* ==========================================================================
   01. 外部ファイルの読み込み / 外部インポート
   ========================================================================== */
/* WordPressのブロックエディター等とスタイルを同期させるための外部CSSをインポート */
@import url(editor-style.css);

/* ==========================================================================
   02. モダンCSSリセット & ノーマライズ (新規格リセット CSS)
       ※ `:where()` を使うことで詳細度が上がらない（0になる）ため、
          後から記述する通常のクラスで上書きしやすくなるメリットがあります。
   ========================================================================== */
/* すべての要素と擬似要素のマージン・パディングをゼロにし、サイズ計算をボーダー基準に統一 */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 画面上で非表示(hidden)にする要素を完全に非表示化（until-found対応版） */
:where([hidden]:not([hidden='until-found'])) {
  display: none !important;
}

/* デバイス設定（ダークモード/ライトモード）に対応し、iOSなどの自動文字サイズ調整を無効化 */
:where(html) {
  -webkit-text-size-adjust: none;
  color-scheme: dark light;
}

/* ユーザーが視覚的アニメーションの削減を希望していない場合のみ、フォーカス移動時のスクロールを滑らかにする */
@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth;
  }
}

/* 基本の行間、標準システムフォント、文字のアンチエイリアス（滑らかさ）を設定 */
:where(body) {
  line-height: 1.5;
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* フォーム部品のフォント種類と文字色を親要素から継承させる */
:where(input, button, textarea, select) {
  font: inherit;
  color: inherit;
}

/* テキストエリアのリサイズ方向を「縦方向のみ」または「テキストの並び方向」に制限 */
:where(textarea) {
  resize: vertical;
  resize: block;
}

/* クリック可能な要素のマウスポインターを「指マーク(pointer)」にする */
:where(button, label, select, summary, [role='button'], [role='option']) {
  cursor: pointer;
}

/* 無効化（disabled）されている要素のマウスポインターを「禁止マーク」にする */
:where(:disabled) {
  cursor: not-allowed;
}

/* 子要素や隣のインプットがdisabled状態のラベルも、マウスポインターを「禁止マーク」にする */
:where(label:has(>input:disabled), label:has(+input:disabled)) {
  cursor: not-allowed;
}

/* ボタンの枠線（境界線）のスタイルを初期状態の実線(solid)にする */
:where(button) {
  border-style: solid;
}

/* リンクの文字色を継承し、下線とテキストの隙間（オフセット）を微調整 */
:where(a) {
  color: inherit;
  text-underline-offset: 0.2ex;
}

/* リスト（箇条書き）の標準の黒丸や数字などのマーカーを消去 */
:where(ul, ol) {
  list-style: none;
}

/* 画像や動画、埋め込みコンテンツなどのインライン要素をブロック要素化して余白を制御しやすくする */
:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}

/* 画像、ピクチャー、SVGの最大横幅を100%にし、高さは自動比率にして親要素からはみ出さないようにする */
:where(img, picture, svg) {
  max-inline-size: 100%;
  block-size: auto;
}

/* 段落や見出しテキストが長すぎて枠をはみ出る場合、自動で単語の途中で改行させる */
:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

/* 大きめの見出し（H1〜H3）の行間を、文字サイズに合わせた計算値で適切に狭める */
:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem);
}

/* 区切り線（hr）の標準ボーダーを消し、上部だけに1pxの実線を引いて文字色を継承 */
:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible;
}

/* キーボード操作等でフォーカスが当たった際の、見やすい外枠（アウトライン）の表示設定 */
:where(:focus-visible) {
  outline: 3px solid Highlight;
  outline-offset: 2px;
  scroll-margin-block: 10vh;
}

/* スクリーンリーダー（音声読み上げ）専用。画面上は見えなくなるが読み上げにはカウントされる設定 */
:where(.visually-hidden:not(:focus-within, :active)) {
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   03. ベーススタイル設定 (HTML & BODY)
   ========================================================================== */
/* 画面幅（--vw）に応じてフォントサイズを14px〜16pxの間で動的に滑らかに変動させる（レスポンシブフォント） */
html {
  font-size: clamp(14px, calc( 14px + 2 * ( ( var(--vw) * 100 ) - 320px ) / 1600 ), 16px);
}

/* サイト全体のフォント環境（欧文・日本語の優先順位）、文字色、背景色、改行ルール等の指定 */
body {
  font-family: europa, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Verdana, noto-sans-cjk-jp, "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size: 1.0em;
  color: #505050;
  line-height: 1;
  background: #FFF;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   04. 見出し・タイポグラフィの設定
   ========================================================================== */
/* h2だけリセットから除外し、ホームページ全体で完全に非表示にする */
h1,h2,h4,h5,h6{font-size:100%;font-weight:normal}

/* 主な文章構成要素の下側に「1.5em」の一定の間隔（余白）を確保 */
h2, h3, h4, h5, h6, p {
  margin-bottom: 1.5em;
}

/* 強調表現用の太字設定 */
.bold, strong {
  font-weight: bold;
}

/* 斜体（イタリック）表現用の設定 */
.italic, em {
  font-style: italic;
}

/* 下線（アンダーライン）表現用の設定 */
.underline {
  text-decoration: underline;
}

/* ==========================================================================
   05. ユーティリティ：フォントサイズ (1.2rem 〜 4.0rem)
   ========================================================================== */
.font-12 { font-size: 1.2rem; }
.font-14 { font-size: 1.4rem; }
.font-16 { font-size: 1.6rem; }
.font-18 { font-size: 1.8rem; }
.font-20 { font-size: 2.0rem; }
.font-22 { font-size: 2.2rem; }
.font-24 { font-size: 2.4rem; }
.font-26 { font-size: 2.6rem; }
.font-28 { font-size: 2.8rem; }
.font-30 { font-size: 3.0rem; }
.font-32 { font-size: 3.2rem; }
.font-34 { font-size: 3.4rem; }
.font-36 { font-size: 3.6rem; }
.font-38 { font-size: 3.8rem; }
.font-40 { font-size: 4.0rem; }

/* ==========================================================================
   06. ユーティリティ：カラーバリエーション
   ========================================================================== */
.navy { color: #001F3F; }      /* 濃紺 */
.blue { color: #0074D9; }      /* 青 */
.aqua { color: #7FDBFF; }      /* 水色 */
.teal { color: #39CCCC; }      /* 鴨の羽色・青緑 */
.olive { color: #3D9970; }     /* オリーブ・深緑 */
.green { color: #2ECC40; }     /* 緑 */
.lime { color: #01FF70; }      /* ライム・明緑 */
.yellow { color: #FFDC00; }    /* 黄 */
.orange { color: #FF851B; }    /* 橙 */
.red { color: #FF4136; }       /* 赤 */
.maroon { color: #85144B; }    /* くり色・えんじ */
.fuchsia { color: #F012BE; }   /* フクシャ・鮮やかな紫 */
.purple { color: #B10DC9; }    /* 紫 */
.sitver, .silver { color: #DDD; } /* タイポ救済併記 */
.gray { color: #AAA; }         /* グレー */
.black { color: #111; }        /* 黒 */

/* ==========================================================================
   07. ハイパーリンク (a要素) ＆ アニメーション効果
   ========================================================================== */
a {
  color: #7FBF65;
  vertical-align: baseline;
  text-decoration: underline;
  outline: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -ms-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}

a img {
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -ms-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}

a:hover, a:active {
  text-decoration: none;
  outline: none;
}

a:hover img, a:active img {
  opacity: 0.6;
}

/* ==========================================================================
   08. WordPress標準クラス (画像の配置設定)
   ========================================================================== */
img.aligncenter {
  display: block;
  margin: 1.0em auto;
}

img.alignright, img.alignleft {
  display: inline;
  margin-bottom: 1.0em;
}

img.alignright {
  margin-left: 1.25em;
  float: right;
}

img.alignleft {
  margin-right: 1.25em;
  float: left;
}

/* ==========================================================================
   09. ユーティリティ：テキスト配置 (文字揃え)
   ========================================================================== */
.text-center { text-align: center; } /* 中央揃え */
.text-right { text-align: right; }   /* 右揃え */
.text-left { text-align: left; }     /* 左揃え */

/* ==========================================================================
   10. ユーティリティ：マージン（下方向の余白を制御するクラス）
   ========================================================================== */
.mb00 { margin-bottom: 0; }
.mb05 { margin-bottom: 0.5rem; }
.mb10 { margin-bottom: 1.0rem; }
.mb20 { margin-bottom: 2.0rem; }
.mb30 { margin-bottom: 3.0rem; }
.mb40 { margin-bottom: 4.0rem; }
.mb50 { margin-bottom: 5.0rem; }
.mb60 { margin-bottom: 6.0rem; }
.mb70 { margin-bottom: 7.0rem; }
.mb80 { margin-bottom: 8.0rem; }
.mb90 { margin-bottom: 9.0rem; }
.mb100 { margin-bottom: 10rem; }

/* ==========================================================================
   11. フロート解除 (クリアフィックス)
   ========================================================================== */
.cf {
  zoom: 1;
}

.cf::before, .cf::after {
  content: "";
  display: table;
}

.cf::after {
  clear: both;
}

/* ==========================================================================
   12. フォーム要素：入力フィールド
   ========================================================================== */
input[type="text"],
input[type="tel"],
input[type="number"],
input[type="email"],
textarea,
select {
  font-family: inherit;
  font-size: 16px;
  color: inherit;
  line-height: 24px;
  vertical-align: middle;
  width: 100%;
  height: 44px;
  padding: 6px 1.0em;
  background-color: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 0.375em;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

input[type="text"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder,
select::placeholder {
  color: #999;
}

input[type="text"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder {
  color: #999;
}

input[type="text"]::-ms-input-placeholder,
input[type="tel"]::-ms-input-placeholder,
input[type="number"]::-ms-input-placeholder,
input[type="email"]::-ms-input-placeholder,
textarea::-ms-input-placeholder,
select::-ms-input-placeholder {
  color: #999;
}

input[type="text"][readonly],
input[type="tel"][readonly],
input[type="number"][readonly],
input[type="email"][readonly],
textarea[readonly],
select[readonly] {
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
}

textarea {
  line-height: 1.5;
  height: 12.5em;
}

select {
  padding-right: 2.25em;
  background-image: url("../img/icon_select.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 1.0em);
  background-size: 0.875em auto;
  cursor: pointer;
}

/* ==========================================================================
   13. フォーム要素：ラジオボタン・チェックボックス
   ========================================================================== */
input[type="radio"],
input[type="checkbox"] {
  display: none;
}

input[type="radio"]+span,
input[type="checkbox"]+span {
  position: relative;
  display: inline-block;
  line-height: 1.4;
  margin-right: 1.25em;
  padding-left: 2.5em;
  cursor: pointer;
}

input[type="radio"]+span::before,
input[type="radio"]+span::after,
input[type="checkbox"]+span::before,
input[type="checkbox"]+span::after {
  position: absolute;
  top: 0;
  bottom: 0;
  content: "";
  display: block;
  margin: auto;
}

input[type="radio"]+span::before,
input[type="checkbox"]+span::before {
  left: 0;
  width: 2.0em;
  height: 2.0em;
}

input[type="radio"]+span::after,
input[type="checkbox"]+span::after {
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -ms-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}

input[type="radio"]:checked+span::after,
input[type="checkbox"]:checked+span::after {
  opacity: 1.0;
  visibility: visible;
}

input[type="radio"]+span::before,
input[type="radio"]+span::after {
  border-radius: 50%;
}

input[type="radio"]+span::before {
  background-color: #fff;
  border: 1px solid #d4d4d4;
}

input[type="radio"]+span::after {
  left: 0.5em;
  width: 1.0em;
  height: 1.0em;
  background-color: #019742;
}

input[type="checkbox"]+span::before {
  background-color: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 0.375em;
}

input[type="checkbox"]+span::after {
  left: 0.625em;
  width: 0.75em;
  height: 0.5em;
  border-width: 0 0 2px 2px;
  border-style: solid;
  border-color: #019742;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* ==========================================================================
   14. フォーム要素：送信ボタン
   ========================================================================== */
[type="submit"] {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5em 1.0em;
  font-family: inherit;
  font-weight: 500;
  color: #fff;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
  width: 100%;
  max-width: 240px;
  height: 60px;
  padding: 1.0em 4.0em;
  background-image: linear-gradient(45deg, #187042 0%, #7FBF65 100%);
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -webkit-transition: 0.4s ease-out;
  -moz-transition: 0.4s ease-out;
  -ms-transition: 0.4s ease-out;
  -o-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
}

[type="submit"][disabled] {
  opacity: 0.2;
}

[type="submit"][value="back"] {
  background-color: #202020;
  background-image: none;
}

[type="submit"]:hover {
  -webkit-transform: translateY(10%);
  -moz-transform: translateY(10%);
  -ms-transform: translateY(10%);
  -o-transform: translateY(10%);
  transform: translateY(10%);
}

/* ==========================================================================
   15. その他 (Google reCAPTCHA 非表示設定)
   ========================================================================== */
.grecaptcha-badge {
  visibility: hidden;
}

@media (min-width: 768px) {
  .area_rows {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
  }
  .area_rows__col {
    flex: 1;
    min-width: 0;
  }
  .area_rows__col img {
    width: 100%;
    height: auto;
  }
}

/* ==========================================================================
   ギャラリー画像ブロックのはみ出し防止と余白設定
   ========================================================================== */
.area {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  margin-bottom: 60px;
}

.area_rows {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  width: 100%;
}

/* ==========================================================================
   追加：事務所概要テーブルの区切り線
   ========================================================================== */
.outline_table > div {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  padding: 15px 0;
}

.outline_table > div:last-child {
  border-bottom: none;
}

.outline_table dt {
  width: 200px;
  flex-shrink: 0;
  font-weight: bold;
}

.outline_table dd {
  flex-grow: 1;
}

/* ==========================================================================
   全ページ共通：パンくずリストを強制左寄せ ＆ フォント色統一の決定版
   ========================================================================== */
[typeof="BreadcrumbList"],
#page_title .page_title__inner ol {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    align-self: flex-start !important; 
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    gap: 0 8px !important;
    margin-bottom: 25px !important;
    font-size: 16px !important;
    color: #666666 !important;
}

[typeof="BreadcrumbList"] a,
#page_title .page_title__inner ol li a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

[typeof="BreadcrumbList"] a:hover,
#page_title .page_title__inner ol li a:hover {
    color: #7FBF65 !important;
    text-decoration: underline !important;
}

[typeof="BreadcrumbList"] li,
[typeof="BreadcrumbList"] a::after {
    color: inherit !important;
}

[typeof="BreadcrumbList"] a::after {
  content: "＞" !important;
  margin-left: 10px !important;
  color: #ccc !important;
  display: inline-block !important;
}

/* ==========================================================================
   追加：ページタイトルのグラデーションテキスト強制適用（下層・固定ページ用）
   ========================================================================== */
#page_title .page_title__inner h2 {
  font-size: clamp(18px, calc(18px + 14 * ((var(--vw) * 100) - 320px) / 880), 32px) !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: 0.04em !important;
  width: fit-content !important;
  margin-top: 2.0rem !important;
  margin-bottom: 1.0em !important; 
  background-image: linear-gradient(45deg, #0B4A27 0%, #1F8249 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* ==========================================================================
   16. 事務所概要・アクセス ページ専用フォントサイズ調整
   ========================================================================== */
.outline_table dt p { font-size: 18px; }
.outline_table dd p { font-size: 18px; }
.outline_table dd a { font-size: 18px; }

.access_rows__info > p { font-size: 18px; }
.access_rows__info dl dt { font-size: 18px; }
.access_rows__info dl dd ul li p { font-size: 18px; }


/* ==========================================================================
   ✨ 投稿詳細ページ専用スタイル（PHPからお引っ越し分）
   ========================================================================== */
.single #page_title {
    padding: 15px 0 !important; 
    background-color: #f9f9f9;
}
.single #page_title h2,
.single #page_title .page_title__inner h2 { 
    font-size: 24px !important; 
    font-weight: 600 !important;
    color: #666666 !important;
    -webkit-text-fill-color: #666666 !important;
    background-image: none !important;
    margin: 0 !important; 
}

.back-to-list-wrap {
    max-width: 800px;
    margin: 20px auto 0 !important;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: right;
}
.back-to-list-wrap a {
    color: #002255 !important;
    text-decoration: underline !important;
    font-size: 14px;
    font-weight: bold;
    transition: opacity 0.3s;
}
.back-to-list-wrap a:hover {
    opacity: 0.7 !important;
    text-decoration: underline !important;
}

.breadcrumbs-wrap {
    width: 100% !important;
    max-width: none !important;
    margin: 20px 0 0 !important; 
    padding: 0 0 0 40px !important;
    box-sizing: border-box;
    font-size: 1px;
    color: #888888;
    text-align: left;
}
.breadcrumbs span[property="itemListElement"] {
    margin-right: 2px;
}
.breadcrumbs a {
    color: #666666 !important;
    text-decoration: none !important;
}
.breadcrumbs a:hover {
    color: #333333 !important;
    text-decoration: underline !important;
}

.page_detail { 
    max-width: 800px; 
    margin: 20px auto 300px !important; 
    padding: 0 20px;
    box-sizing: border-box;
}

.page_content,
.page_content p,
.page_content span,
.page_content div,
.page_content li,
.page_content strong, 
.page_content a {
    color: #000000 !important; 
    opacity: 1 !important;      
    -webkit-text-fill-color: #000000 !important;
    text-shadow: none !important;
}

.page_content {
    line-height: 2.0;
    font-size: 16px;
    word-wrap: break-word;
}

.post-date-wrap {
    text-align: right;
    margin-top: 20px;
    font-size: 14px;
    color: #666666;
}

.pdf-inline-container {
    display: inline-block;
    margin: 0 0 0 12px;    
    vertical-align: middle;
    line-height: 1;        
}
     
.page_content .pdf-link-btn {
    display: inline-block;
    padding: 5px 12px !important; 
    background-color: #002255 !important; 
    color: #ffffff !important;          
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-weight: normal; 
    font-size: 13px; 
    box-shadow: none;    
    transition: background-color 0.3s, opacity 0.3s;
}
     
.page_content .pdf-link-btn:hover {
    background-color: #004499 !important; 
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 0.9 !important;
    text-decoration: none !important;
}

.custom-hover-parent {
    position: relative;
}
.custom-hover-parent .custom-hover-text {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    line-height: 1.2 !important;
    font-size: 16px !important; 
}
.custom-hover-parent:hover .custom-hover-text {
    display: block;
}

/* ==========================================================================
   フッターエリア専用スタイル (footer.php から移設分)
   ========================================================================== */
#footer .foot_access {
    background-color: #019742 !important;
    padding-bottom: 5px !important;
}
.news_item { 
    transition: background-color 0.3s ease; 
}
.news_item:hover { 
    background-color: #f9f9f9; 
}
.news_item__link:hover .news_item__title { 
    color: #00821a !important; 
    text-decoration: underline !important; 
}

/* 追記：基本は非表示（PCなど） */
.sp-fixed-tel-wrap { 
    display: none; 
} 
.tel-button {
    display: none; /* 👈 PC環境では安全に非表示化 */
}

/* アクセスマップ・ポップアップ関係 */
area:hover { 
    cursor: pointer; 
}
.foot_access__map { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
}
.foot_access__map img { 
    width: 100% !important; 
    height: auto !important; 
    display: block; 
}
#custom-map-popup {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.8); 
    z-index: 999999; 
    display: none; 
    align-items: center; 
    justify-content: center;
}
.popup-inner { 
    position: relative; 
    width: 350px; 
    max-width: 85%; 
}
.popup-inner img { 
    width: 100%; 
    height: auto; 
    border: 5px solid #fff; 
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); 
}
.popup-close {
    position: absolute; 
    top: -45px; 
    right: 0; 
    color: #fff; 
    font-size: 40px; 
    cursor: pointer; 
    line-height: 1;
}

/* 営業時間の表示スタイル */
.foot_access__hours {
    margin-top: 30px;
    margin-bottom: 25px;
    padding-left: 0;
    width: 100%;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: left;
    display: flex;
}
.foot_access__hours .hours-label {
    font-weight: normal; /* 👈 none から normal に安全修正 */
    flex-shrink: 0;
}

/* モバイル（スマホ）用の調整（767px以下） */
@media screen and (max-width: 767px) {
    #footer .foot_access { 
        padding-bottom: 5px !important; 
    }
    .tel-button {
        position: fixed;
        bottom: -100px;
        left: 5%;
        width: 90%;
        height: 60px;
        background: #001f4d;
        display: flex; /* 👈 スマホ環境下でのみflexを適用 */
        align-items: center;
        justify-content: center;
        transition: bottom 0.4s ease-in-out;
        z-index: 99999;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        border-radius: 20px;
    }
    .tel-button.is-visible {
        bottom: 0;
    }
    .tel-button a {
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        font-size: 1.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   ✨ ここから追加：お知らせ一覧（アーカイブ）ページ専用スタイル
   ========================================================================== */


/* --- 全体レイアウト --- */
.news_archive_page { 
    margin-top: 30px !important; 
    margin-bottom: 60px; 
}

/* --- パンくずリスト --- */
.breadcrumb_area ol {
    list-style: none; 
    padding: 0; 
    margin: 20px 0 0 0 !important; /* 👈 構文エラーを修正し「40px」から「20px」に縮小（上余白） */
    font-size: 13px; 
    display: flex; 
    flex-wrap: wrap;
    margin-bottom: 5px !important; /* 👈 追加：全ページ共通の25pxを下書きして「5px」に（下余白） */
}

.breadcrumb_area ol li { 
    margin-right: 10px; 
    color: #666; 
}
.breadcrumb_area ol li a { 
    color: #001f4d; 
    text-decoration: none; 
}

/* --- 見出し（縦棒）のデザイン --- */
.home_news .headline {
    position: relative !important;
    padding-left: 22px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    background: none !important;
    color: #001f4d !important;
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}

.home_news .headline::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 8px !important;
    height: 3.8em !important;
    background-image: linear-gradient(to bottom, #001f4d 0%, #0061c2 100%) !important;
    display: block !important;
}

/* --- カテゴリー選択ボタン --- */
.category_filter { 
    margin-top: 40px !important;
    margin-bottom: 25px !important; 
}
.category_list {
    display: flex; 
    flex-wrap: wrap; 
    list-style: none;
    padding: 0; 
    margin: 0; 
    gap: 8px;
}
.cat_btn {
    display: block; 
    padding: 6px 16px;
    background-color: #fff; 
    border: 1px solid #001f4d;
    color: #001f4d; 
    text-decoration: none;
    border-radius: 20px; 
    font-size: 13px; 
    transition: all 0.3s;
}
.cat_btn:hover, 
.cat_btn.is-active {
    background-color: #001f4d; 
    color: #fff;
}

/* --- お知らせリスト --- */
.news_list { 
    border-top: 2px solid #001f4d; 
}
.news_item { 
    border-bottom: 1px solid #DDDDDD; 
}
.news_item__inner { 
    display: flex; 
    align-items: center; 
    padding: 1.2em 0; 
}
.news_item__date { 
    font-size: 0.95em; 
    color: #787878; 
    margin-right: 1.5em; 
    flex-shrink: 0; 
}
.news_item__category {
    font-size: 12px; 
    background-color: #001f4d; 
    color: #fff;
    padding: 6px 14px; 
    margin-right: 1.2em; 
    border-radius: 3px; 
    flex-shrink: 0;
}
.news_item__title { 
    font-size: 1.05em; 
    font-weight: 500; 
    margin: 0; 
    flex-grow: 1; 
}
.news_item__title a { 
    color: #333; 
    text-decoration: none; 
}
.news_item__title a:hover { 
    color: #001f4d; 
    text-decoration: underline; 
}

/* --- ページネーション --- */
.pagination { 
    margin-top: 30px; 
    text-align: center; 
}
.pagination ul { 
    display: inline-flex; 
    list-style: none; 
    padding: 0; 
}
.pagination li { 
    margin: 0 4px; 
}
.pagination a, 
.pagination span { 
    display: block; 
    padding: 6px 12px; 
    border: 1px solid #EDEDED; 
    text-decoration: none; 
    color: #001f4d; 
    font-size: 14px;
}
.pagination .current { 
    background: #001f4d; 
    color: #fff; 
    border-color: #001f4d; 
}

/* --- モバイル対応（レスポンシブ設定） --- */
@media screen and (max-width: 767px) {
    .home_news .headline { 
        font-size: 1.2rem !important; 
        padding-left: 20px !important; 
    }
    .news_item__inner { 
        flex-wrap: wrap; 
        padding: 1.0em 0; 
    }
    .news_item__date { 
        width: 100%; 
        margin-bottom: 3px; 
        font-size: 0.85em; 
    }
    .news_item__title { 
        width: 100%; 
        margin-top: 0.4em; 
        font-size: 1.0em; 
    }
    .cat_btn { 
        padding: 5px 12px; 
        font-size: 12px; 
    }
}