.page {
   min-height: 100vh;
 }

 .hero {
   background:
     linear-gradient(135deg, rgba(31, 58, 95, 0.96), rgba(31, 58, 95, 0.85)),
     linear-gradient(180deg, #274a75 0%, #1F3A5F 100%);
   color: #fff;
   padding: 44px 27px 44px;
   position: relative;
   overflow: hidden;
   margin-top: 20px;
 }

 .hero::before,
 .hero::after {
   content: "";
   position: absolute;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.06);
   filter: blur(2px);
 }

 .hero::before {
   width: 280px;
   height: 280px;
   top: -80px;
   right: -60px;
 }

 .hero::after {
   width: 220px;
   height: 220px;
   bottom: -90px;
   left: -40px;
 }

 .hero__inner {
   max-width: 1024px;
   margin: 0 auto;
   position: relative;
   z-index: 1;
 }

 .eyebrow {
   display: inline-block;
   margin: 0 0 14px;
   padding: 8px 14px;
   border: 1px solid rgba(255, 255, 255, 0.18);
   border-radius: 999px;
   font-size: 0.82rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   background: rgba(255, 255, 255, 0.08);
 }

 .hero h1 {
   margin: 0;
   font-size: clamp(1.8rem, 3vw, 3.5rem);
   line-height: 1.18;
   letter-spacing: 0.03em;
 }

 .lead {
   margin: 22px 0 0;
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.88);
 }

 .hero-cards {
   margin-top: 34px;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 16px;
 }

 .hero-card {
   background: rgba(255, 255, 255, 0.10);
   border: 1px solid rgba(255, 255, 255, 0.12);
   backdrop-filter: blur(8px);
   border-radius: var(--radius-md);
   padding: 18px 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
 }

 .hero-card__label {
   display: block;
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.72);
   margin-bottom: 6px;
 }

 .hero-card strong {
   font-size: 1.08rem;
   line-height: 1.5;
 }

 .summary-box,
 .content-section,
 .reference {
   background: var(--surface);
   border: 1px solid rgba(215, 224, 234, 0.9);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow);
 }

 .summary-box {
   padding: 34px 34px 30px;
   margin-bottom: 22px;
   background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
 }

 .summary-box h2,
 .content-section h2,
 .reference h2 {
   margin: 0 0 14px;
   color: var(--primary);
   line-height: 1.4;
   font-size: clamp(1.35rem, 2vw, 1.8rem);
   position: relative;
   border-left: 5px solid #1F3A5F;
   color: #1F3A5F;
   margin-top: 20px;
   background: #E8F0F7;
   padding: 10px;
 }

 .summary-box p,
 .content-section p,
 .reference li {
   margin: 0;
   color: var(--text);
 }


 .green {
   background: #2F4F3A;
 }

 .gray {
   background: #2B3A42;
 }

 .orange {
   background: #7A3A1E;
 }



 .content-section {
   padding: 34px;
   margin-bottom: 22px;
 }

 .content-section p {
   margin: 15px 0px;
 }


 .content-section p+p {
   margin-top: 18px;
 }


 .section--closing {
   background:
     linear-gradient(180deg, rgba(31, 58, 95, 0.04), rgba(31, 58, 95, 0.02)),
     #ffffff;
 }

 /* 親要素：横並びの設定 */
 .flex-container {
   display: flex;
   align-items: center;
   /* 上揃え */
   gap: 30px;
   /* テキストと画像の間の余白 */
   margin-bottom: 40px;
 }

 /* テキスト側：残りの幅をすべて使う */
 .flex-text {
   flex: 1;
 }

 /* 画像側：200pxに固定 */
 .flex-image {
   flex: 0 0 200px;
   /* 伸びない、縮まない、200px固定 */
 }

 .flex-image img {
   width: 100%;
   /* 親の200pxに対して100% */
   height: auto;

 }

 /* スマホ対応（1024px以下） */
 @media (max-width: 1024px) {
   .flex-container {
     flex-direction: column;
     /* 縦並びに変更 */
     align-items: center;
     /* 中央寄せ */
   }

   .flex-image {
     flex: 0 0 auto;
     width: 250px;
     /* スマホでは少し大きく見せてもOK */
     margin-top: 20px;
   }
 }

 .stats {
   margin: 24px 0;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 14px;
 }

 .what-stats {
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
 }

 .flex-container-what {
   align-items: start;
 }


 .stat {
   background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 20px 18px;
   text-align: center;
 }

 .stat__value {
   display: block;
   font-size: 1.35rem;
   font-weight: 800;
   color: var(--primary);
   line-height: 1.4;
 }

 .stat__label {
   display: block;
   margin-top: 6px;
   color: var(--muted);
   font-size: 0.92rem;
 }

 .source {
   display: inline-block;
   margin-left: 8px;
   font-size: 0.88rem;
   font-weight: 700;
   color: var(--primary-soft);
   text-decoration: none;
   border-bottom: 1px solid rgba(31, 58, 95, 0.22);
 }

 .source:hover {
   color: var(--primary-dark);
   border-bottom-color: var(--primary-dark);
 }

 .reference {
   padding: 32px 34px;
   margin-bottom: 30px;
 }

 .reference ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
 }

 .reference li {
   padding: 5px 16px;
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   background: var(--surface-alt);
 }

 .reference a {
   text-decoration: none;
   font-weight: 600;
 }

 .reference a:hover {
   text-decoration: underline;
 }

 /* ステップフロー全体のスタイル */
 .flow-list {
   list-style: none;
   padding: 0;
   margin: 40px 0;
   counter-reset: flow-counter;
 }

 .flow-list li {
   position: relative;
   padding-left: 40px;
   /* 縦線のための余白 */
   margin-bottom: 30px;
 }

 /* 縦線の描画 */
 .flow-list li::before {
   content: "";
   position: absolute;
   left: 18px;
   top: 0;
   bottom: -30px;
   /* 次の要素まで線を伸ばす */
   width: 2px;
   background: #ddd;
 }

 .flow-list li:last-child::before {
   display: none;
   /* 最後の項目は線を消す */
 }

 /* 丸いドット部分 */
 .flow-list li::after {
   content: "";
   position: absolute;
   left: 9px;
   top: 5px;
   width: 14px;
   height: 14px;
   background: #1F3A5F;
   /* ベースカラー */
   border-radius: 50%;
   border: 3px solid #fff;
   z-index: 1;
 }

 /* コンテンツボックス */
 .flow-content {
   background: #f9f9f9;
   padding: 20px;
   border-radius: 8px;
   border: 1px solid #eee;
   transition: transform 0.3s ease;
 }

 .flow-content:hover {
   transform: translateX(5px);
   border-color: #1F3A5F;
 }

 /* STEPラベル */
 .flow-step {
   display: inline-block;
   font-size: 11px;
   font-weight: bold;
   color: #1F3A5F;
   border: 1px solid #1F3A5F;
   padding: 2px 8px;
   border-radius: 4px;
   margin-bottom: 8px;
   background: #fff;
 }

 .flow-content strong {
   display: block;
   font-size: 18px;
   color: #333;
   margin-bottom: 8px;
 }

 .flow-content p {
   font-size: 14px;
   margin: 0;
   color: #666;
   line-height: 1.6;
 }

 /* レスポンシブ：スマホでの調整 */
 @media (max-width: 768px) {
   .flow-list li {
     padding-left: 30px;
   }

   .flow-list li::before {
     left: 15px;
   }

   .flow-list li::after {
     left: 4px;
   }

 }





 @media (max-width: 900px) {
   .hero {
     padding: 72px 20px 60px;
   }

   .hero-cards,
   .stats {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }


   .summary-box,
   .reference {
     border-radius: 20px;
   }
 }

 @media (max-width: 640px) {
   body {
     line-height: 1.85;
   }

   .hero-cards,
   .stats {
     grid-template-columns: 1fr;
   }

   .summary-box,
   .content-section,
   .reference {
     padding: 24px 20px;
   }

   .hero h1 {
     font-size: 2rem;
   }

   .lead {
     font-size: 0.98rem;
   }
 }


 .alert-box {
   background-color: #fff4f4;
   border: 1px solid #e74c3c;
   padding: 15px;
   border-radius: 5px;
   margin: 20px 0;
 }

 .alert-box strong {
   color: #e74c3c;
   font-size: 1.2rem;
 }

 .highlight {
   background-color: #f0f4f8;
   padding: 20px;
   border-radius: 8px;
 }

 .grid-item {
   /* 高さを固定しない（重要） */
   height: auto;
   min-height: 0;

   /* 中身がはみ出さないようにパディングを含めた計算にする */
   display: flex;
   flex-direction: column;
   box-sizing: border-box;

   padding: 20px;
 }

 .grid-item img {
   width: 100%;
   height: auto;

   /* 大きくなりすぎないよう制限 */
   object-fit: cover;
   margin-bottom: 15px;
   display: block;
   /* 下の隙間を消す */
 }

 .grid-item ul {
   padding-top: 0;
 }


 .grid-item p {
   padding: 0 15px;
 }



 /* --- 3. 保証制度（info-body）の装飾 --- */
 .info-body {
   background-color: #f0f4f8;
   border: none;
   padding: 20px;
   border-radius: 4px;
   margin-top: 10px;
 }

 .info-body ul {
   list-style: none;
   padding: 0;
 }

 .info-body li {
   position: relative;
   padding-left: 25px;
   margin-bottom: 15px;
   line-height: 1.7;
 }

 .info-body li::before {
   content: "✔";
   position: absolute;
   left: 0;
   color: #E86A33;
   font-weight: bold;
 }

 .info-body li strong {
   color: #1F3A5F;
   display: block;
   font-size: 16px;
 }

 /* --- 4. レスポンシブ調整 --- */
 @media (max-width: 768px) {
   .hero--work {
     padding: 40px 15px;
   }

   .hero--work h1 {
     font-size: 28px;
   }

   .grid-container {
     gap: 15px;
   }
 }




 /* --- チェックリストの装飾 --- */
 .check-list {
   list-style: none;
   padding: 0;
   margin: 20px 0;
 }

 .check-list li {
   position: relative;
   padding-left: 30px;
   margin-bottom: 12px;
   line-height: 1.6;
 }

 .check-list li::before {
   content: "□";
   /* チェックボックス風 */
   position: absolute;
   left: 0;
   color: #E86A33;
   font-weight: bold;
 }

 /* リンクや区切り線 */
 hr {
   border: none;
   border-top: 1px dashed #ddd;
   margin: 40px 0;
 }



 /* info-body内の微調整 */
 .info-body strong {
   display: block;
   margin-bottom: 10px;
   font-size: 1.1em;
 }

 /* --- FAQ専用Hero: 画像を使わない幾何学デザイン --- */
 .hero--faq {
   background-color: #f4f7f9;
   /* 明るいグレーブルー */
   background-image: radial-gradient(#d1d9e0 1px, transparent 1px);
   /* ドットパターン */
   background-size: 20px 20px;
   padding: 50px 0;
   text-align: center;
   border-bottom: 1px solid #e0e6ed;
 }

 .hero--faq .eyebrow {
   color: #1F3A5F;
   letter-spacing: 0.1em;
   font-weight: bold;
 }

 .hero--faq h1 {
   color: #1F3A5F;
   font-size: 40px;
   margin: 10px 0;
 }

 /* タイトルの下の装飾線 */
 .hero-line {
   width: 60px;
   height: 4px;
   background: linear-gradient(90deg, #0B2948, #238FAB);
   margin: 20px auto;
   border-radius: 2px;
 }

 .hero--faq .lead {
   color: #555;
   font-size: 16px;
   max-width: 600px;
   margin: 0 auto;
 }

 /* --- FAQアコーディオンの装飾 --- */
 .faq-category {
   font-size: 22px;
   color: #1F3A5F;
   border-left: 5px solid #1F3A5F;
   padding-left: 15px;
   margin: 40px 0 20px;
 }

 .faq-item {
   background: #fff;
   border: 1px solid #ddd;
   border-radius: 8px;
   margin-bottom: 15px;
   overflow: hidden;
 }

 .faq-item summary {
   padding: 20px;
   font-weight: bold;
   cursor: pointer;
   list-style: none;
   /* デフォルトの矢印を消す */
   position: relative;
   padding-left: 50px;
   transition: background 0.3s;
 }

 .faq-item summary:hover {
   background: #fcfcfc;
 }

 /* 質問の「Q」アイコン */
 .faq-item summary::before {
   content: "Q";
   position: absolute;
   left: 20px;
   top: 16px;
   color: #238FAB;
   font-size: 1.2em;
 }

 /* 答えの「A」セクション */
 .faq-answer {
   padding: 20px 20px 20px 50px;
   background: #f9f9f9;
   border-top: 1px solid #eee;
   position: relative;
 }

 .faq-answer::before {
   content: "A";
   position: absolute;
   left: 20px;
   top: 33px;
   color: #E86A33;
   /* アクセントカラー */
   font-weight: bold;
   font-size: 1.2em;
 }



 /* FAQ内の強調表現を調整 */
 .faq-answer strong {
   color: #d32f2f;
   /* 基本的な強調 */
   font-weight: bold;
 }

 /* 補足・注意書き用のスタイル（必要に応じてpタグ内に追加） */
 .faq-note {
   font-size: 0.85rem;
   color: #666;
   margin-top: 10px;
   padding: 10px;
   border-top: 1px dashed #ccc;
   display: block;
 }

 /* --- About専用Hero: 信頼感のあるネイビーと白の境界デザイン --- */
 .hero--about {
   background: linear-gradient(135deg, #0B2948 0%, #1F3A5F 100%);
   color: #fff;
   padding: 80px 0;
   text-align: center;
   position: relative;
   overflow: hidden;
 }

 .hero--about .eyebrow {
   color: #238FAB;
   font-weight: bold;
 }

 .hero--about h1 {
   font-size: 38px;
   margin: 15px 0;
   font-family: "YuMincho", "serif";
   /* ここだけ明朝体にするのも格式高い */
 }

 /* --- 理念セクション --- */
 .mission-statement {
   background-color: #f9fbfc;
   padding: 40px;
   border-radius: 12px;
   margin-bottom: 60px;
   border: 1px solid #e0e6ed;
 }

 .mission-statement h2 {
   color: #1F3A5F;
   margin-top: 0;
 }

 .mission-statement p {
   max-width: 800px;
   margin: 0 auto 1.5em;
   line-height: 1.8;
 }

 /* --- 法人概要テーブル --- */
 .about-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 60px;
 }

 .about-table th,
 .about-table td {
   padding: 20px;
   border-bottom: 1px solid #ddd;
 }

 .about-table th {
   width: 25%;
   background-color: #f4f7f9;
   color: #1F3A5F;
   text-align: left;
   vertical-align: top;
   font-weight: bold;
 }

 .about-table td {
   line-height: 1.6;
   color: #333;
 }

 /* --- マップエリア --- */
 .map-dummy {
   width: 100%;
   height: 400px;
   background-color: #eee;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 15px;
   border-radius: 8px;
 }

 .map-text {
   font-size: 14px;
   color: #666;
 }

 /* スマホ対応 */
 @media (max-width: 768px) {

   .about-table th,
   .about-table td {
     display: block;
     width: 100%;
   }

   .about-table th {
     padding-bottom: 5px;
     background-color: transparent;
     color: #238FAB;
   }

   .about-table td {
     padding-top: 5px;
   }
 }


 /* --- Partner専用Hero --- */
 .hero--partner {
   background: linear-gradienct(rgba(11, 41, 72, 0.9), rgba(11, 41, 72, 0.9)),
     url('../img/partner-hero.jpg') center/cover;
 }


 /* --- 1. 全体レイアウト・見出し --- */
 .page-header--official {
   margin-bottom: 40px;
   padding-bottom: 20px;
   border-bottom: 3px double #d1d5db;
   /* 公的な印象を与える二重線 */
 }

 .col-h2 {
   font-size: 1.5rem;
   color: #1F3A5F;
   border-left: 6px solid #1F3A5F;
   padding: 5px 0 5px 15px;
   margin: 45px 0 20px;
   background-color: #f4f7f9;
 }

 .partner-info {
   width: 100%;
 }

 /* --- 2. 官公庁風 箇条書きリスト --- */
 .official-list {
   list-style: none;
   padding: 0;
   margin-bottom: 30px;
 }

 .official-list li {
   position: relative;
   padding: 12px 15px 12px 30px;
   border-bottom: 1px solid #e5e7eb;
   line-height: 1.6;
 }

 .official-list li::before {
   content: "■";
   position: absolute;
   left: 8px;
   top: 15px;
   color: #1F3A5F;
   font-size: 10px;
 }

 .partner .official-list li strong {
   color: #1F3A5F;
 }

 /* --- 3. 募集諸条件（テーブル） --- */
 .official-table {
   width: 100%;
   border-collapse: collapse;
   margin-top: 10px;
   border-top: 2px solid #1F3A5F;
   font-size: 15px;
   border: 1px solid #e5e7eb;
 }

 .official-table th {
   width: 25%;
   background-color: #f8f9fa;
   border-bottom: 1px solid #d1d5db;
   padding: 18px 15px;
   text-align: left;
   vertical-align: top;
   font-weight: bold;
 }

 .official-table td {
   border-bottom: 1px solid #d1d5db;
   padding: 18px 15px;
   background: #fff;
   line-height: 1.7;
 }

 /* --- 4. 選定プロセス（フロー表示） --- */
 /* リストを番号付きで少し強調 */
 .process-list li {
   counter-increment: step-counter;
 }

 .process-list li::before {
   content: counter(step-counter);
   background: #1F3A5F;
   color: #fff;
   width: 20px;
   height: 20px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   font-size: 11px;
   margin-right: 12px;
   position: relative;
   top: -1px;
 }

 /* --- 5. アクションエリア --- */
 .action-box {
   background: #ffffff;
   border: 2px solid #1F3A5F;
   padding: 40px;
   text-align: center;
   margin-top: 60px;
   border-radius: 4px;
 }

 .btn-group {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-top: 25px;
 }

 .btn-navy {
   background-color: #1F3A5F;
   color: #fff !important;
   padding: 16px 40px;
   text-decoration: none;
   font-weight: bold;
   border-radius: 4px;
   transition: opacity 0.3s;
 }

 .btn-outline {
   border: 2px solid #1F3A5F;
   color: #1F3A5F !important;
   padding: 16px 40px;
   text-decoration: none;
   font-weight: bold;
   border-radius: 4px;
   transition: background 0.3s;
 }

 .btn-navy:hover,
 .btn-outline:hover {
   opacity: 0.8;
   background-color: #f0f4f8;
 }

 /* --- 6. レスポンシブ対応 --- */
 @media (max-width: 768px) {

   .official-table th,
   .official-table td {
     display: block;
     width: 95%;
   }

   .official-table th {
     background-color: #eef2f6;
     padding: 10px 15px;
     border-bottom: none;
   }

   .btn-group {
     flex-direction: column;
   }
 }

 /* --- お問い合わせ誘導ボックス --- */
 .contact-box {
   background: #1F3A5F;
   color: #fff;
   padding: 40px;
   text-align: center;
   border-radius: 8px;
   margin-top: 60px;
 }

 .contact-box h3 {
   margin-bottom: 15px;
 }

 .contact-box .btn {
   display: inline-block;
   background: #E86A33;
   color: #fff;
   padding: 15px 40px;
   text-decoration: none;
   font-weight: bold;
   border-radius: 4px;
   margin-top: 20px;
   transition: background 0.3s;
 }

 .contact-box .btn:hover {
   background: #ff7e45;
 }

 /* --- カラム全体の基本設定 --- */
 .col-wrap {
   color: #444;
   font-size: 16px;
   background-color: #fff;
   padding-bottom: 80px;
 }

 /* --- Heroの強化 (グラデーションと波紋) --- */
 .col-hero {
   background: linear-gradient(135deg, #FF6B6B 0%, #FFB88C 100%);
   color: white;
   padding: 80px 20px;
   text-align: center;
   border-radius: 0 0 80px 80px;
   margin-bottom: 60px;
   margin-top: 15px;
 }

 .col-badge {
   background: rgba(255, 255, 255, 0.25);
   padding: 5px 20px;
   border-radius: 30px;
   font-weight: bold;
   font-size: 14px;
   letter-spacing: 1px;
 }

 .col-hero h1 {
   font-size: 42px;
   font-weight: 800;
   margin: 25px 0;
   line-height: 1.3;
 }

 .col-intro {
   max-width: 1200px;
   margin: 0 auto 50px;
   font-size: 18px;
   font-weight: 500;
   color: #666;
   border-left: 4px solid #FF6B6B;
   border-right: 4px solid #FF6B6B;
   padding: 0 20px;
 }

 .manual {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
 }

 .manual img {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
 }

 /* --- セクションタイトル --- */
 .col-h2 {
   font-size: 28px;
   color: #333;
   display: flex;
   align-items: center;
   gap: 15px;
   margin: 60px 0 30px;
 }


 /* --- 警告ボックス (NG行動) --- */
 .col-warning-box {
   background: #333;
   color: #fff;
   padding: 40px;
   border-radius: 10px;
   margin: 40px 0;
 }

 .col-warning-box h3 {
   color: #FF6B6B;
   text-align: center;
   font-size: 24px;
   margin-bottom: 30px;
 }

 .warning-grid {
   display: grid;
   gap: 20px;
 }

 .warning-item strong {
   color: #FFB88C;
   display: block;
   font-size: 18px;
   margin-bottom: 10px;
 }

 /* --- ガイドアイテム --- */
 .col-info-guide {
   background: #fdfdfd;
   border: 1px solid #eee;
   padding: 30px;
   border-radius: 15px;
 }

 .guide-item {
   padding: 20px 0;
   border-bottom: 1px solid #eee;
 }

 .guide-item:last-child {
   border: none;
 }

 /* --- レスポンシブ設定 --- */
 @media (max-width: 900px) {

   .col-step-grid,
   .warning-grid {
     grid-template-columns: 1fr;
   }

   .col-flex {
     flex-direction: column;
     gap: 20px;
   }

   .col-flex.reverse {
     flex-direction: column-reverse;
   }

   .col-img img {
     width: 100%;
     height: auto;
   }
 }

 /* --- アラートカード（重要な意識改革） --- */
 .col-alert-card {
   background: #FFF4F4;
   border: 2px solid #FF6B6B;
   padding: 25px;
   border-radius: 10px;
   margin: 30px 0;
   position: relative;
 }

 .col-alert-card strong {
   color: #FF6B6B;
   font-size: 1.2em;
   display: block;
   margin-bottom: 5px;
 }

 /* --- 場所別タブ風デザイン --- */
 .col-tab-content {
   background: #f8f9fa;
   border-radius: 15px;
   padding: 30px;
   margin-bottom: 20px;
 }

 .col-tab-content h3 {
   margin-top: 0;
   color: #1F3A5F;
   border-bottom: 2px solid #dee2e6;
   padding-bottom: 10px;
   margin-bottom: 20px;
 }

 /* --- 収束後のフロー --- */
 .col-action-flow {
   display: flex;
   flex-direction: column;
   gap: 15px;
 }

 .flow-item {
   display: flex;
   align-items: center;
   background: #fff;
   border: 1px solid #dee2e6;
   padding: 15px;
   border-radius: 8px;
 }

 .flow-tag {
   background: #1F3A5F;
   color: #fff;
   font-weight: bold;
   padding: 5px 15px;
   border-radius: 4px;
   margin-right: 20px;
   min-width: 120px;
   text-align: center;
 }

 .flow-item p {
   margin: 0;
   flex: 1;
 }

 /* スマホ対応 */
 @media (max-width: 768px) {
   .flow-item {
     flex-direction: column;
     align-items: flex-start;
   }

   .flow-tag {
     margin-bottom: 10px;
   }
 }

 /* --- ステップグリッド全体の調整 --- */
 .col-step-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 30px;
   margin: 40px 0 80px;
   perspective: 1000px;
   /* 奥行き感の隠し味 */
 }

 /* --- カード単体の装飾 --- */
 .col-step-card {
   background: #fff;
   border: 1px solid #e0e6ed;
   border-top: 5px solid #2c5364;
   /* 津波編のテーマカラー */
   border-radius: 10px;
   padding: 45px 25px 30px;
   text-align: center;
   position: relative;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
 }

 /* ホバー時に少し浮き上がり、色を強調 */
 .col-step-card:hover {
   transform: translateY(-10px);
   border-top-color: #ff4d4d;
   /* 警告の赤へ変化 */
   box-shadow: 0 20px 40px rgba(255, 77, 77, 0.15);
 }

 /* --- ナンバーアイコンのブラッシュアップ --- */
 .col-step-num {
   position: absolute;
   top: -20px;
   left: 50%;
   transform: translateX(-50%);
   background: linear-gradient(135deg, #2c5364 0%, #0f2027 100%);
   color: #fff;
   width: 50px;
   height: 50px;
   line-height: 50px;
   border-radius: 50%;
   font-weight: 900;
   font-size: 18px;
   letter-spacing: 1px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   border: 3px solid #fff;
 }

 /* --- 見出し(h4)の装飾 --- */
 .col-step-card h4 {
   font-size: 20px;
   color: #1F3A5F;
   margin-bottom: 15px;
   font-weight: 800;
   position: relative;
   display: inline-block;
 }

 /* 「」の部分を強調するようなアンダーライン */
 .col-step-card h4::after {
   content: "";
   position: absolute;
   bottom: -5px;
   left: 0;
   width: 100%;
   height: 8px;
   background: rgba(255, 77, 77, 0.15);
   /* 薄い赤のマーカー線 */
   z-index: -1;
 }

 /* --- 説明文(p)の調整 --- */
 .col-step-card p {
   font-size: 15px;
   line-height: 1.7;
   color: #555;
   text-align: left;
   margin: 0;
 }

 /* --- レスポンシブ --- */
 @media (max-width: 900px) {
   .col-step-grid {
     grid-template-columns: 1fr;
     gap: 40px;
   }

   .col-step-card {
     padding: 40px 20px 25px;
   }
 }

 /* --- 津波編専用Hero (ディープブルー) --- */
 .col-hero--tsunami {
   background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
   color: white;
 }

 /* --- 暗い背景のアラートカード (より強い警告) --- */
 .col-alert-card--dark {
   background: #F9F9F9;
   color: #333;

 }

 .col-alert-card--dark strong {
   color: #ff4d4d;
   padding-bottom: 5px;
 }

 /* --- 避難情報ガイドのカラーリング --- */
 .col-info-guide .guide-item:nth-child(1) {
   border-left: 10px solid #800080;
   /* 大津波警報：紫 */
   background: #fdf0ff;
   padding-left: 15px;
   margin-bottom: 10px;
 }

 .col-info-guide .guide-item:nth-child(2) {
   border-left: 10px solid #ff0000;
   /* 津波警報：赤 */
   background: #fff0f0;
   padding-left: 15px;
   margin-bottom: 10px;
 }

 .col-info-guide .guide-item:nth-child(3) {
   border-left: 10px solid #ffff00;
   /* 津波注意報：黄 */
   background: #fffff0;
   padding-left: 15px;
 }

 .col-info-guide strong {
   font-size: 18px;
   display: block;
   margin-bottom: 5px;
 }



 /* --- 徒歩避難セクションのレイアウト調整 --- */
 .col-flex {
   display: flex;
   align-items: center;
   /* 垂直中央揃え */
   gap: 40px;
   margin: 60px 0;
   padding: 30px;
   background: #f0f7ff;
   /* 薄いブルー背景で海関連の注意を促す */
   border-radius: 20px;
 }

 /* テキストエリア */
 .col-text {
   flex: 1;
 }

 /* --- テキストブロックの調整 --- */
 .col-text-block {
   margin-bottom: 40px;
   padding: 0 10px;
 }

 .col-text-block p {
   margin-bottom: 1.8em;
   font-size: 16px;
   line-height: 2;
   /* 行間を広げて可読性をアップ */
 }

 /* --- 強調文字のマーカー装飾 --- */
 .col-text-block strong {
   background: linear-gradient(transparent 70%, #ffdfdf 70%);
   color: #d32f2f;
   padding: 0 3px;
 }

 /* --- 引用・コラム風ボックス --- */
 .col-tab-content {
   border-left: 5px solid #2c5364;
   background: #f8f9fa;
   padding: 30px;
   border-radius: 0 15px 15px 0;
   margin: 40px 0;
 }

 .col-tab-content p:last-child {
   margin-bottom: 0;
 }

 /* --- 警告グリッド内の調整 --- */
 .warning-item p {
   font-size: 14px;
   color: #ccc;
   line-height: 1.6;
   margin-top: 5px;
 }

 .col-h3 {
   font-size: 22px;
   color: #1F3A5F;
   margin-bottom: 15px;
   display: flex;
   align-items: center;
 }

 .col-h3::before {
   content: "🏃";
   /* 逃げるアイコン */
   margin-right: 10px;
 }

 /* 画像エリア：250px固定（以前の指定を継承しつつ装飾） */
 .col-img {
   flex: 0 0 250px;
 }

 .col-img img {
   width: 100%;
   height: auto;
   border-radius: 15px;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
   border: 3px solid #fff;
 }

 /* リストの強調 */
 .col-list {
   margin-top: 20px;
   list-style: none;
 }

 .col-list li {
   background: #fff;
   padding: 12px 15px;
   border-radius: 5px;
   margin-bottom: 10px;

   font-size: 15px;
 }

 .col-list li strong {
   color: #d32f2f;
   /* 警告の赤色 */
   display: block;
   margin-bottom: 3px;
 }

 /* --- レスポンシブ：スマホ表示 --- */
 @media (max-width: 768px) {
   .col-flex {
     flex-direction: column-reverse;
     /* スマホでは画像を下に配置 */
     gap: 20px;
     padding: 20px;
   }

   .col-img {
     flex: 0 0 auto;
     width: 100%;
     /* スマホでは幅いっぱいに表示 */
     max-width: 300px;
   }

   .col-h3 {
     font-size: 20px;
   }
 }

 /* --- カードグリッドのレイアウト --- */
 .item-card-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 25px;
   margin: 40px 0;
 }

 /* --- 個別カードの装飾 --- */
 .item-card {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   /* 画像の角丸対応 */
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
   border: 1px solid #eee;
   transition: transform 0.3s ease;
 }

 .item-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 12px 30px rgba(230, 126, 34, 0.15);
   /* テーマカラーの影 */
 }

 /* カード画像エリア */
 .item-card__img {
   width: 100%;
   height: 180px;
   background-color: #fff;
   /* 画像がない時の下地 */
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .item-card__img img {
   width: auto;
   height: 180px;
   object-fit: cover;
   /* 比率を保って切り抜き */
 }

 /* カードテキストエリア */
 .item-card__body {
   padding: 20px;
 }

 .item-tag {
   display: inline-block;
   background: #e67e22;
   color: #fff;
   font-size: 11px;
   font-weight: bold;
   padding: 2px 10px;
   border-radius: 4px;
   margin-bottom: 10px;
 }

 .item-card h4 {
   font-size: 18px;
   color: #333;
   margin: 0 0 10px 0;
   font-weight: 700;
 }

 .item-card p {
   font-size: 14px;
   color: #666;
   line-height: 1.5;
   margin: 0;
 }

 /* スマホ調整：横幅いっぱいにする */
 @media (max-width: 600px) {
   .item-card-grid {
     grid-template-columns: 1fr;
   }

   .item-card__img {
     height: 200px;
   }
 }



 /* 気象庁 (JMA) - 青系 */
 .dl-card--jma {
   border-top: 4px solid #005aa0;
 }

 .dl-card--jma .dl-file-type {
   background: #005aa0;
 }

 /* 内閣府・消防庁 - 赤・オレンジ系 */
 .dl-card--cabinet,
 .dl-card--fdma {
   border-top: 4px solid #d32f2f;
 }

 .dl-card--cabinet .dl-file-type,
 .dl-card--fdma .dl-file-type {
   background: #d32f2f;
 }

 /* 当法人オリジナル - コーポレートカラー */
 .dl-card--original {
   border-top: 4px solid #E86A33;
   background-color: #fffaf5;
 }

 .dl-card--original .dl-file-type {
   background: #E86A33;
 }

 /* --- カード内装飾の調整 --- */
 .dl-card {
   min-height: 250px;
   background: #fff;
   display: flex;
   flex-direction: column;
   padding: 25px;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   margin-bottom: 20px;
 }

 .dl-card__info h4 {
   font-size: 1.1rem;
   font-weight: bold;
   margin-bottom: 10px;
   line-height: 1.4;
   color: #333;
 }

 .dl-card__info p {
   font-size: 0.9rem;
   color: #666;
   margin-bottom: 20px;
 }

 /* リンクボタンのアイコン */
 .btn-download[target="_blank"]::after {
   content: " ↗";
   /* 外部サイトへのリンクアイコン */
   font-size: 0.8em;
 }

 /* グリッドレイアウト */
 .dl-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 20px;
 }

 /* --- カテゴリタイトル --- */
 .dl-list-title {
   font-size: 1.4rem;
   color: #1F3A5F;
   border-left: 6px solid #1F3A5F;
   padding: 5px 0 5px 15px;
   margin: 50px 0 20px;
   background: #f4f7f9;
 }

 /* --- リストグループ --- */
 .dl-list-group {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 /* --- リストアイテム（1行） --- */
 .dl-list-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 0;
   border-bottom: 1px solid #e0e6ed;
   transition: background 0.2s;
 }

 .dl-list-item:hover {
   background-color: #fafbfc;
 }

 /* --- 資料情報 --- */
 .dl-list-info {
   flex: 1;
   padding-right: 20px;
 }

 .dl-file-name {
   display: block;
   font-size: 1.1rem;
   font-weight: bold;
   color: #333;
   margin-bottom: 5px;
 }

 .dl-file-desc {
   font-size: 0.9rem;
   color: #666;
   margin: 0;
 }

 /* --- タグ（組織別） --- */
 .dl-tag {
   display: inline-block;
   font-size: 11px;
   font-weight: bold;
   padding: 2px 8px;
   border-radius: 3px;
   color: #fff;
   margin-bottom: 8px;
 }

 .dl-tag.jma {
   background: #005aa0;
 }

 /* 気象庁：青 */
 .dl-tag.cabinet {
   background: #d32f2f;
 }

 /* 内閣府：赤 */
 .dl-tag.fdma {
   background: #e67e22;
 }

 /* 消防庁：オレンジ */
 .dl-tag.orign {
   background: #238FAB;
 }

 /* 当法人：水色 */

 /* --- リンクボタン --- */
 .dl-list-link {
   flex: 0 0 160px;
   text-align: center;
   padding: 10px 15px;
   border: 1px solid #1F3A5F;
   color: #1F3A5F;
   text-decoration: none;
   border-radius: 4px;
   font-size: 14px;
   font-weight: bold;
   transition: all 0.3s;
 }

 .dl-list-link:hover {
   background: #1F3A5F;
   color: #fff;
 }

 /* ダウンロードボタン（目立たせる） */
 .dl-btn {
   background: #1F3A5F;
   color: #fff;
 }

 /* スマホ対応 */
 @media (max-width: 768px) {
   .dl-list-item {
     flex-direction: column;
     align-items: flex-start;
   }

   .dl-list-link {
     margin-top: 15px;
     width: 90%;
     flex: none;
   }
 }

 .privacy-policy {
   max-width: 800px;
   margin: 0 auto;
   padding: 60px 20px;
   color: #333;
   line-height: 1.8;
 }

 .page-header {
   text-align: center;
   margin-bottom: 50px;
   border-bottom: 2px solid #eee;
   padding-bottom: 20px;
 }

 .page-header h1 {
   font-size: 28px;
   color: #1F3A5F;
   margin-bottom: 10px;
 }

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

 .privacy-intro {
   background: #f9f9f9;
   padding: 20px;
   border-radius: 8px;
   margin-bottom: 40px;
 }

 .privacy-section {
   margin-bottom: 40px;
 }

 .privacy-section h2 {
   font-size: 20px;
   color: #1F3A5F;
   border-left: 4px solid #1F3A5F;
   padding-left: 15px;
   margin-bottom: 20px;
 }

 .privacy-section ul {
   padding-left: 20px;
 }

 .privacy-section ul li {
   margin-bottom: 8px;
 }

 .privacy-policy .contact-box {
   background: #f4f7f9;
   padding: 30px;
   border-radius: 10px;
   border: 1px solid #e0e6ed;
   color: #333;
 }

 .privacy-policy .contact-box address {
   font-style: normal;
   margin-top: 15px;
   line-height: 2;
 }

 /* 補助金セクション内の補足テキスト */
 .info-body .official-list {
   margin-top: 15px;
   background: #fff;
   border: 1px solid #e0e6ed;
   border-radius: 6px;
   padding: 10px 20px;
 }

 /* 重要部分の強調 */
 strong.red-text {
   color: #d32f2f;
   font-weight: bold;
   font-size: 1.05em;
   letter-spacing: 0.05em;
 }

 .info-body li strong.red-text {
   color: #d32f2f;
   font-weight: bold;
   font-size: 1.05em;
   letter-spacing: 0.05em;
 }


 .red-text {
   color: #d32f2f;
   font-weight: bold;
 }

 /* --- フォーム全体 --- */
 .official-form {
   max-width: 750px;
   margin: 0 auto;
   background: #fff;
   padding: 40px;
   border: 1px solid #d1d5db;
   border-radius: 8px;
 }

 .form-group {
   margin-bottom: 25px;
 }

 .form-label {
   display: block;
   font-weight: bold;
   margin-bottom: 10px;
   color: #1F3A5F;
 }

 /* 必須タグ */
 .tag-required {
   background: #d32f2f;
   color: #fff;
   font-size: 11px;
   padding: 2px 6px;
   border-radius: 3px;
   margin-left: 5px;
   vertical-align: middle;
 }

 /* 入力項目 */
 .form-control {
   width: 100%;
   padding: 12px 0;
   border: 1px solid #ccc;
   border-radius: 4px;
   font-size: 16px;
   transition: border-color 0.3s;
   text-indent: 10px;
 }

 .form-control:focus {
   border-color: #1F3A5F;
   outline: none;
   box-shadow: 0 0 0 3px rgba(31, 58, 95, 0.1);
 }

 /* すべてのブラウザのプレースホルダーの色を調整 */
 .form-control::placeholder {
   color: #aaa;
   opacity: 1;
 }


 select.form-control {
   text-indent: 10px;
   appearance: none;
 }

 /* iOS（Safari）対策：text-indentが効きにくい場合用 */
 select.form-control option {
   text-indent: 10px;
 }

 /* Internet Explorer / Edge（旧）用 */
 .form-control:-ms-input-placeholder {
   color: #aaa;
 }

 /* Edge（新）用 */
 .form-control::-ms-input-placeholder {
   color: #aaa;
 }

 /* テキストエリアの改行を含むプレースホルダーの行間（必要であれば） */
 textarea.form-control::placeholder {
   line-height: 1.5;
   font-size: 0.95em;
   /* ほんの少し小さくすると、より「例」らしく見えます */
 }

 .form-help {
   font-size: 13px;
   color: #666;
   margin-top: 5px;
 }

 /* 電話窓口ボックス */
 .contact-tel-box {
   text-align: center;
   background: #f4f7f9;
   padding: 25px;
   border-radius: 8px;
   margin-bottom: 40px;
 }

 .tel-number {
   font-size: 35px;
   font-weight: bold;
   color: #1F3A5F;
   text-decoration: none;
 }

 /* 送信ボタンエリア */
 .form-action {
   text-align: center;
   margin-top: 40px;
 }

 .form-action button:hover {
   color: #0B2948 !important;
 }

 .privacy-check {
   text-align: center;
   border-top: 1px solid #eee;
   padding-top: 20px;
 }

 /* スマホ対応 */
 @media (max-width: 600px) {
   .official-form {
     padding: 20px;
   }

   .tel-number {
     font-size: 24px;
   }
 }

 /* 確認画面用のテーブル調整 */
 .official-table {
   margin-bottom: 30px;
   border-bottom: 1px solid #d1d5db;
 }

 .official-table th {
   width: 30%;
   background-color: #f8f9fa;
   color: #1F3A5F;
   border-top: 1px solid #d1d5db;
 }

 .official-table td {
   border-top: 1px solid #d1d5db;
   background-color: #fff;
 }

 /* 戻るボタンと送信ボタンの並び */
 .btn-group {
   display: flex;
   justify-content: center;
   gap: 20px;
 }

 @media (max-width: 600px) {
   .btn-group {
     flex-direction: column-reverse;
     /* スマホでは「送信」を上に、「戻る」を下に */
   }
 }

 /* --- フォームのステップ表示 --- */
 .form-steps {
   display: flex;
   justify-content: center;
   margin-bottom: 40px;
   gap: 10px;
 }

 .form-steps .step {
   padding: 10px 30px;
   background: #e5e7eb;
   color: #9ca3af;
   border-radius: 50px;
   font-size: 14px;
   font-weight: bold;
 }

 .form-steps .step.active {
   background: #1F3A5F;
   color: #fff;
 }

 /* --- 確認用テーブルのブラッシュアップ --- */
 .confirm-container {
   max-width: 900px;
   margin: 0 auto;
 }

 .confirm-table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   border: 1px solid #d1d5db;
   border-radius: 8px;
   overflow: hidden;
   margin-bottom: 30px;
 }

 .confirm-table th {
   width: 30%;
   background-color: #f8f9fa;
   color: #1F3A5F;
   padding: 20px;
   text-align: left;
   border-bottom: 1px solid #d1d5db;
   border-right: 1px solid #d1d5db;
   font-size: 15px;
 }

 .confirm-table td {
   padding: 20px;
   background-color: #fff;
   border-bottom: 1px solid #d1d5db;
   font-size: 16px;
   color: #333;
 }

 .confirm-table tr:last-child th,
 .confirm-table tr:last-child td {
   border-bottom: none;
 }

 .confirm-value {
   font-weight: 500;
 }

 .confirm-message {
   white-space: pre-wrap;
   line-height: 1.8;
   background: #fafafa;
   padding: 15px;
   border-radius: 4px;
   border: 1px inset #eee;
 }

 /* --- ボタン周り --- */
 .alert-box.mini {
   background: #fff9e6;
   border: 1px solid #ffeeba;
   padding: 15px;
   font-size: 14px;
   margin-bottom: 30px;
   text-align: center;
 }

 .btn-group {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 30px;
 }

 .btn-submit {
   background-color: #1F3A5F;
   color: #fff;
   padding: 20px 60px;
   font-size: 18px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-weight: bold;
   box-shadow: 0 4px 0 #152945;
   transition: all 0.2s;
 }

 .btn-submit:hover {
   transform: translateY(2px);
   box-shadow: 0 2px 0 #152945;
 }

 .btn-back {
   background-color: #fff;
   color: #666;
   border: 1px solid #ccc;
   padding: 15px 30px;
   border-radius: 4px;
   cursor: pointer;
 }

 /* レスポンシブ */
 @media (max-width: 768px) {

   .confirm-table th,
   .confirm-table td {
     display: block;
     width: 100%;
     border-right: none;
   }

   .confirm-table th {
     padding: 10px 20px;
     background: #eef2f6;
   }

   .btn-group {
     flex-direction: column-reverse;
   }

   .btn-submit {
     width: 100%;
   }
 }

 /* --- サンクスページ専用 --- */
 .thanks-section {
   text-align: center;
   padding: 60px 20px;
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
   max-width: 800px;
   margin: 0 auto 100px;
 }

 .thanks-icon {
   margin-bottom: 30px;
   animation: scaleUp 0.5s ease-out;
 }

 @keyframes scaleUp {
   0% {
     transform: scale(0.8);
     opacity: 0;
   }

   100% {
     transform: scale(1);
     opacity: 1;
   }
 }

 .thanks-message {
   margin: 40px 0;
   line-height: 2;
   color: #333;
 }

 .thanks-action {
   margin-top: 50px;
 }

 /* フォームのステップ表示（confirm.phpで使ったものと共通） */
 .form-steps {
   display: flex;
   justify-content: center;
   margin: 40px 0;
   gap: 10px;
 }

 .form-steps .step {
   padding: 8px 25px;
   background: #e5e7eb;
   color: #9ca3af;
   border-radius: 50px;
   font-size: 13px;
   font-weight: bold;
 }

 .form-steps .step.active {
   background: #1F3A5F;
   color: #fff;
 }

 /* 補足情報のボックス */
 .alert-box.mini {
   background: #f8f9fa;
   border: 1px solid #e0e6ed;
   padding: 20px;
   font-size: 14px;
   color: #666;
   text-align: left;
   display: inline-block;
   max-width: 500px;
 }

 /* お知らせリスト全体のスタイル */
 .news-list {
   list-style: none;
   padding: 0;
   margin: 40px 0;
   border-top: 1px solid #e5e7eb;
 }

 .news-item {
   display: block;
   padding: 20px 0;
   border-bottom: 1px solid #e5e7eb;
   text-decoration: none;
   color: #333;
   transition: background 0.2s;
 }

 .news-item:hover {
   background: #f9fafb;
 }

 /* メタ情報（日付とカテゴリー） */
 .news-meta {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 8px;
 }

 .news-date {
   font-size: 14px;
   color: #666;
 }

 .news-category {
   font-size: 12px;
   padding: 2px 8px;
   border-radius: 4px;
   background: #eee;
   color: #666;
 }

 /* カテゴリーごとの色分け */
 .category-important {
   background: #fee2e2;
   color: #dc2626;
   font-weight: bold;
 }

 .category-column {
   background: #dbeafe;
   color: #2563eb;
 }

 /* タイトル */
 .news-title {
   font-size: 16px;
   font-weight: 500;
 }

 /* ページネーション */
 .pagination {
   display: flex;
   justify-content: center;
   gap: 10px;
   margin-top: 40px;
 }

 .pagination a,
 .pagination span {
   padding: 8px 16px;
   border: 1px solid #ddd;
   border-radius: 4px;
   color: #333;
 }

 .pagination .current {
   background: #1F3A5F;
   color: #fff;
   border-color: #1F3A5F;
 }

 .pagination .disabled {
   color: #ccc;
   cursor: not-allowed;
 }