:root{
    --brand-blue: #004b9d;
    --brand-blue-deep: #003b7d;
    --brand-yellow: #ffe000;
    --paper: #f7f5f0;
    --ink: #1c1c1c;
    --nav-height: 76px;
  }

  *{ box-sizing: border-box; }
  html{
    overflow-x: hidden;
  }
  body{
    margin:0;
    font-family: "YuGothic", "Yu Gothic", sans-serif;
    background: var(--paper);
    color: var(--ink);
    overflow-x: hidden;
  }

  /* ページ本文がナビの下に隠れないよう余白確保 */
  .page-spacer{ height: var(--nav-height); }

  /* ===== ナビ本体 ===== */
  .site-nav{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-height);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
  }

  /* ロゴ・サイト名 */
  .site-nav__brand{
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    text-decoration: none;
    color: var(--brand-blue);
  }
  .site-nav__eyebrow{
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--brand-blue);
  }
  .site-nav__name{
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .06em;
  }
  .site-nav__tag{
    display:none;
  }

  /* リンク一覧 */
  .site-nav__list{
    list-style: none;
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
  }
  .site-nav__link{
    position: relative;
    display: block;
    padding: 10px 18px;
    color: var(--brand-blue);
    text-decoration: none;
    font-size: 15px;
    letter-spacing: .04em;
    transition: color .25s ease;
    opacity: .75;
  }
  .site-nav__link::after{
    content:"";
    position:absolute;
    left: 18px; right: 18px;
    bottom: 4px;
    height: 2px;
    background: var(--brand-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  .site-nav__link:hover,
  .site-nav__link:focus-visible{
    opacity: 1;
  }
  .site-nav__link:hover::after,
  .site-nav__link:focus-visible::after{
    transform: scaleX(1);
  }
  .site-nav__link.is-active{
    opacity: 1;
  }
  .site-nav__link.is-active::after{
    transform: scaleX(1);
  }

  /* ハンバーガーボタン（モバイル用） */
  .site-nav__toggle{
    display: none;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }
  .site-nav__toggle span{
    display: block;
    width: 100%;
    height: 2px;
    background: var(--brand-blue);
    margin: 6px 0;
    transition: transform .25s ease, opacity .25s ease;
  }
  .site-nav__toggle.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .site-nav__toggle.is-open span:nth-child(2){ opacity: 0; }
  .site-nav__toggle.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

  /* メニュー内フッター（サイト名表示） デスクトップでは非表示 */
  .site-nav__footer{
    display: none;
  }

  /* ===== レスポンシブ（ナビ） ===== */
  @media (max-width: 860px){
    .site-nav{ padding: 0 20px; }
    .site-nav__toggle{ display: block; }

    /* 全画面オーバーレイのラッパー（リスト＋フッターをまとめて開閉） */
    .site-nav__menu{
      position: fixed;
      inset: var(--nav-height) 0 0 0; /* ヘッダー下から画面下端まで全面 */
      display: flex;
      flex-direction: column;
      background: rgba(255,255,255,.92);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
    }
    .site-nav__menu.is-open{
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition: opacity .3s ease, transform .3s ease, visibility 0s linear 0s;
    }

    .site-nav__list{
      flex-direction: column;
      gap: 0;
    }
    .site-nav__link{
      padding: 20px 28px;
      font-size: 18px;
      color: var(--brand-blue);
      opacity: .85;
      border-bottom: 1px solid rgba(0,75,157,.12);
    }
    .site-nav__link::after{ display:none; }
    .site-nav__name{ font-size: 18px; }

    /* 全画面メニュー最下部のフッター（サイト名） */
    .site-nav__footer{
      display: block;
      margin-top: auto;
      padding: 24px;
      text-align: center;
      color: var(--brand-blue);
      opacity: .6;
      font-size: 13px;
      letter-spacing: .08em;
      border-top: 1px solid rgba(0,75,157,.12);
    }
    .site-nav__footer strong{
      color: var(--brand-blue);
      opacity: 1;
      font-weight: 700;
    }
  }

/* ===== メインビジュアル ===== */
  .mainVisual.home{
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 560px;
    height: 100vh;
    max-height: 740px;
    overflow: hidden;
  }

  /* 顔写真：グラデーションなし。写真をそのまま見せる */
  .mainVisual__photo{
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
  }

  /* ---- PC用画像（デフォルト） ---- */
  .mainVisual__photo{
    background-image: url("../img/看板写真PC.jpg");
  }

  /* ---- スマホ用画像（767px以下で切り替え） ---- */
  @media (max-width: 767px){
    .mainVisual__photo{
      background-image: url("../img/icon.jpg");
    }
  }

  /* ※ グラデーションのオーバーレイ（::before / ::after）は廃止。
     可読性は文字側の text-shadow（黒い影）で確保する方式に変更 */

  .mainVisual_text{
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 90px 24px 60px;
    text-align: left;
  }
  .mainVisual_text__inner{
    max-width: 620px;
  }

  /* 役職タグ：白背景なので影は不要（背景色があり文字が独立しているため） */
  .maintext1{
    position: relative;
    display: inline-block;
    margin: 0 0 20px;
    padding: 9px 22px;
    background: #fff;
    color: var(--brand-blue);
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 3px;
    border-radius: 2px;
    box-shadow: 0 4px 14px rgba(0,0,0,.35); /* 背景から少し浮かせて視認性UP */
    animation: fadeUp .8s ease-out forwards;
    opacity: 0;
  }

  /* 名前：黒い影を複数重ねて縁取りのように見せる */
  .maintext2{
    position: relative;
    display: block;
    margin: 0 0 28px;
    color: #fff;
    font-size: 46px;
    font-weight: 900;
    letter-spacing: 3px;
    line-height: 1.3;
    text-shadow:
      0 0 6px rgba(0,0,0,.8),
      0 0 14px rgba(0,0,0,.6),
      0 4px 10px rgba(0,0,0,.5),
      0 2px 2px rgba(0,0,0,.9); /* 近距離の濃い影で縁取り効果を強める */
    animation: fadeRight .8s .15s ease-out forwards;
    opacity: 0;
  }
  .maintext2 .ruby{
    display:block;
    margin-top: 8px;
    color: rgba(255,255,255,.9);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 4px;
    text-shadow: 0 0 4px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.6);
  }

  /* 問いかけ（見出し） */
  .mainQuestion{
    position: relative;
    margin: 0 0 36px;
    padding-left: 18px;
    border-left: 3px solid #fff;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.7;
    text-shadow:
      0 0 6px rgba(0,0,0,.8),
      0 0 14px rgba(0,0,0,.6),
      0 4px 10px rgba(0,0,0,.5),
      0 2px 2px rgba(0,0,0,.9);
    animation: fadeRight .8s .3s ease-out forwards;
    opacity: 0;
  }

  /* 本文 */
  .maincatch{
    margin: 0 0 36px;
    padding-left: 21px;
    color: rgba(255,255,255,.95);
    font-size: 15px;
    font-weight: 500;
    line-height: 2;
    max-width: 560px;
    text-shadow:
      0 0 5px rgba(0,0,0,.8),
      0 0 12px rgba(0,0,0,.55),
      0 2px 6px rgba(0,0,0,.5);
    animation: fadeRight .8s .4s ease-out forwards;
    opacity: 0;
  }

  /* CTAボタン：プライマリはブルー系（白背景+紺文字）、セカンダリは白アウトライン */
  .mainCta{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    animation: fadeUp .8s .6s ease-out forwards;
    opacity: 0;
  }
  .mainCta a{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 2px;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  }
  .mainCta .is-primary{
    background: #fff;
    color: var(--brand-blue);
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
  }
  .mainCta .is-secondary{
    background: rgba(0,0,0,.25); /* 透明だと写真次第で見えにくいので薄暗い背景を敷く */
    color: #fff;
    border: 1px solid rgba(255,255,255,.85);
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
  }
  .mainCta a:hover{
    transform: translateY(-3px);
  }
  .mainCta .is-primary:hover{
    background: var(--brand-yellow);
    box-shadow: 0 12px 26px rgba(0,0,0,.4);
  }
  .mainCta .is-secondary:hover{
    background: rgba(0,0,0,.4);
  }

  @keyframes fadeUp{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
  @keyframes fadeRight{ from{opacity:0; transform:translateX(24px);} to{opacity:1; transform:translateX(0);} }

  /* ===== レスポンシブ（メインビジュアル） ===== */
  @media (max-width: 767px){
    .pc-only{ display:none; }
    .mainVisual.home{ min-height: 640px; height:auto; }
    .mainVisual__photo{ background-position: center 15%; }
    .mainVisual_text{ padding: 100px 20px 44px; align-items: flex-end; min-height: 640px; }
    .mainVisual_text__inner{ max-width: 100%; }
    .maintext1{ font-size: 12px; letter-spacing: 2px; padding: 8px 18px; }
    .maintext2{ font-size: 30px; }
    .mainQuestion{ font-size: 17px; padding-left: 14px; }
    .maincatch{ font-size: 13px; padding-left: 17px; line-height: 1.9; }
    .mainCta a{ padding: 14px 22px; font-size: 14px; width: 100%; justify-content: center; }
    .mainCta{ flex-direction: column; }
  }

  /* ===== メッセージセクション ===== */
  .message{
    width: 100%;
    padding: 90px 24px 100px;
    box-sizing: border-box;
  }
  .message__inner{
    position: relative;
    width: min(100%, 900px);
    margin: 0 auto;
  }

  /* 見出し */
  .message__title{
    text-align: center;
    margin-bottom: 50px;
  }
  .message__eyebrow{
    display: block;
    margin-bottom: 10px;
    color: var(--brand-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3em;
  }
  .message__title .title__main{
    display: block;
    color: #143556;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: .08em;
    position: relative;
    padding-bottom: 18px;
  }
  .message__title .title__main::after{
    content:"";
    position:absolute;
    left:50%; bottom:0;
    transform: translateX(-50%);
    width: 56px;
    height: 4px;
    background: var(--brand-blue);
    border-radius: 2px;
  }

  /* 本文カード */
  .message__card{
    position: relative;
    background: #fff;
    padding: 52px 48px 56px;
    border-left: 8px solid var(--brand-yellow);
    box-shadow: 0 16px 40px rgba(0,71,125,.12);
  }
  .message__card::before{
    content: "”";
    position: absolute;
    top: -10px;
    right: 30px;
    font-size: 140px;
    line-height: 1;
    font-weight: 900;
    color: rgba(0,75,157,.07);
    font-family: Georgia, serif;
  }

  /* メインビジュアルの問いを受けた「答え」の書き出し */
  .message__lead{
    position: relative;
    z-index: 1;
    margin: 0 0 28px;
    color: var(--brand-blue);
    font-size: clamp(18px, 2.4vw, 22px);
    font-weight: 900;
    line-height: 1.7;
  }

  .message__text{
    position: relative;
    z-index: 1;
    color: #234a6e;
    font-size: 16px;
    font-weight: 500;
    line-height: 2.1;
  }
  .message__text p{
    margin: 0;
  }
  .message__text p + p{
    margin-top: 24px;
  }
  .message__text strong{
    color: var(--brand-blue);
    font-weight: 700;
  }

  .message__signoff{
    position: relative;
    z-index: 1;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px dashed rgba(0,75,157,.25);
    color: var(--brand-blue);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
  }

  /* ===== レスポンシブ（メッセージ） ===== */
  @media (max-width: 767px){
    .message{ padding: 60px 16px 70px; }
    .message__title{ margin-bottom: 34px; }
    .message__title .title__main{ font-size: 23px; }
    .message__card{ padding: 34px 24px 38px; border-left-width: 6px; }
    .message__card::before{ font-size: 90px; top: -4px; right: 14px; }
    .message__lead{ font-size: 16px; margin-bottom: 20px; }
    .message__text{ font-size: 14px; line-height: 1.95; }
    .message__text p + p{ margin-top: 18px; }
    .message__signoff{ margin-top: 26px; padding-top: 20px; font-size: 13px; }
  }

  /* ===== 活動ブログセクション ===== */

  /* .blog__wrapper：ページ全体の中央寄せコンテナ（独自クラス、Bootstrap非依存） */
  .blog__wrapper{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .blog{
    padding: 80px 0 70px;
  }

  /* 見出し（活動ブログ／中島清志SNS 共通） */
  .blog__title{
    text-align: center;
    margin-bottom: 44px;
  }
  .blog__title .title__main{
    position: relative;
    display: inline-block;
    padding-bottom: 16px;
    color: #143556;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: .08em;
  }
  .blog__title .title__main::after{
    content:"";
    position:absolute;
    left:50%; bottom:0;
    transform: translateX(-50%);
    width: 52px;
    height: 4px;
    background: var(--brand-blue);
    border-radius: 2px;
  }

  .blog__grid{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -12px 8px;
  }

  /* 記事カード：デフォルト(SP)は縦1列 */
  .post{
    padding: 0 12px;
    margin-bottom: 28px;
    flex: 0 0 100%;
    max-width: 100%;
  }
  .post__permalink{
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 8px 24px rgba(0,71,125,.08);
    border-top: 4px solid var(--brand-blue);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .post__permalink:hover{
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(0,71,125,.16);
    text-decoration: none;
    color: inherit;
  }

  .post__img{
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
  }
  /* 画像がない記事はブルー系のプレースホルダーで統一感を出す */
  .post__permalink:not(:has(.post__img)) .post__meta{
    margin-top: 0;
  }

  .post__meta{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 0;
  }
  .post__date{
    color: var(--brand-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
  }
  .post__category{
    display: inline-block;
    padding: 3px 12px;
    background: var(--brand-blue);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 3px;
    letter-spacing: .02em;
  }

  .post__title{
    margin: 0;
    padding: 14px 18px 8px;
    color: #143556;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
  }
  .post__excerpt{
    margin-top: auto;
    padding: 0 18px 22px;
  }
  .post__excerpt p{
    margin: 0;
    color: #5a6b80;
    font-size: 13px;
    line-height: 1.8;
    /* 3行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* PC（768px以上）は横3列、それ未満（SP）は縦1列 の2パターンのみ */
  @media (min-width: 768px){
    .post{ flex: 0 0 33.333%; max-width: 33.333%; }
  }

  /* ===== もっと見る系ボタン行 ===== */
  .blog__more-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
  }
  .blog__more{
    flex: 0 1 auto;
  }
  .blog__more a{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 260px;
    padding: 17px 28px;
    background: #fff;
    color: var(--brand-blue);
    border: 2px solid var(--brand-blue);
    border-radius: 3px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
  }
  .blog__more a::after{
    content: "";
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .25s ease;
  }
  .blog__more a:hover{
    background: var(--brand-blue);
    color: #fff;
    transform: translateY(-3px);
    text-decoration: none;
  }
  .blog__more a:hover::after{
    transform: rotate(45deg) translate(2px, -2px);
  }

  /* ===== SNSセクション：背景をブルーにして視覚的に区切る ===== */
  .blog.blog--sns{
    padding: 70px 0 90px;
    background: linear-gradient(180deg, #f5fbff 0%, #eaf4fc 100%);
  }

  /* ===== 関連記事セクション：記事本文直後に続くため、上の余白を控えめに ===== */
  .blog.blog--related{
    padding: 50px 0 70px;
    border-top: 1px solid #eef3f8;
  }
  .blog--related .blog__title{
    margin-bottom: 32px;
  }
  .blog--related .blog__title .title__main{
    font-size: 22px;
  }
  .blog--sns .blog__more{
    min-width: 0;
  }
  .blog--sns .blog__more a{
    min-width: 220px;
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
  }
  .blog--sns .blog__more a svg{
    width: 18px;
    height: 18px;
    fill: currentColor;
  }
  .blog--sns .blog__more a:hover{
    background: var(--brand-blue-deep);
    border-color: var(--brand-blue-deep);
  }
  /* Instagramだけ元のブランドカラーのグラデーションをホバーで見せる遊び */
  .blog--sns .blog__more.is-instagram a:hover{
    background: linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);
    border-color: transparent;
  }

  /* ===== レスポンシブ（ブログ・SNS） ===== */
  @media (max-width: 767px){
    .blog{ padding: 56px 0 50px; }
    .blog.blog--sns{ padding: 50px 0 64px; }
    .blog__title{ margin-bottom: 30px; }
    .blog__title .title__main{ font-size: 21px; }
    .blog__more a{ min-width: 0; width: 100%; padding: 15px 20px; font-size: 13px; }
    .blog__more-row{ flex-direction: column; align-items: stretch; gap: 12px; }
  }
  /* ===== フッター ===== */
  footer{
    background-color: var(--brand-blue);
    color: #fff;
    margin-top: 0;
  }
  .footer__inner{
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 24px 30px;
    box-sizing: border-box;
  }

  .logoType{
    display: block;
    color: #fff;
    margin-bottom: 24px;
  }
  .logoType .navbar__title1{
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: bold;
  }
  .logoType .navbar__title2{
    font-size: 22px;
    font-weight: bold;
  }
  .logoType .navbar__title3{
    font-size: 13px;
    font-weight: bold;
  }

  .footer__address{
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.9;
  }
  .footer__address span{
    display: block;
  }
  .address__title{
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: bold;
  }

  .footer__linkList{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 24px 0 20px;
    padding: 0;
    list-style: none;
    font-size: 12px;
  }
  .footer__linkList li{
    padding: 0;
  }
  .footer__linkList li a{
    color: #fff;
    padding: 0 10px;
    text-decoration: none;
    opacity: .85;
  }
  .footer__linkList li a:hover{
    opacity: 1;
    text-decoration: underline;
  }
  .footer__linkList li:not(:first-child){
    border-left: 1px solid rgba(255,255,255,.4);
  }

  .footer__copyright{
    display: block;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.2);
    font-size: 11px;
    opacity: .8;
  }

  @media (min-width: 768px){
    .footer__inner{
      padding: 56px 24px 36px;
    }
    .footer__address{
      font-size: 13px;
    }
    .footer__linkList{
      font-size: 13px;
    }
  }
  /* ===== ページ見出し帯（トップページ以外の各ページ上部） ===== */
  .page-heading{
    background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-blue-deep) 100%);
    padding: 64px 24px;
    text-align: center;
  }
  .page-heading__inner{
    max-width: 1180px;
    margin: 0 auto;
  }
  .page-heading__main{
    display: block;
    margin-bottom: 6px;
    color: rgba(255,255,255,.75);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2em;
  }
  .page-heading__sub{
    display: block;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: .1em;
  }

  @media (max-width: 767px){
    .page-heading{ padding: 44px 20px; }
    .page-heading__sub{ font-size: 22px; }
  }

  /* ===== 記事詳細ページ ===== */
  /* 記事本文の幅：SNS(X/LINEブログ等)の1行30〜40文字程度の可読幅を参考に
     820px → 680px に縮小。行が短くなることで画像の相対サイズも自然と抑えられる */
  .article__wrapper{
    max-width: 680px;
    margin: 0 auto;
    padding: 70px 20px 100px;
  }

  /* .single__post：以前は白背景のカードにしていたが、
     背景・影を廃止しページの地の色にそのまま馴染ませる方針に変更 */

  /* パンくずリスト */
  .single__category{
    margin-bottom: 18px;
    color: #7a8ba0;
    font-size: 12px;
    letter-spacing: .02em;
  }
  .single__category a{
    color: var(--brand-blue);
    text-decoration: none;
  }
  .single__category a:hover{
    text-decoration: underline;
  }

  /* 記事詳細の日付（トップページのカードとは別に単独表示用の余白を調整） */
  .single__post > .post__date{
    display: inline-block;
    margin-bottom: 14px;
    color: var(--brand-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
  }

  /* タイトル */
  .single__post > .post__title{
    margin: 0 0 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid #eef3f8;
    color: #143556;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.5;
  }

  /* 本文：SNS系の読みやすいテキスト設定を参考に
     line-height を 2 → 1.85 に詰め、段落間の余白を圧迫しすぎないバランスに調整 */
  .single__content{
    color: #234a6e;
    font-size: 16px;
    line-height: 1.85;
    letter-spacing: .01em;
  }

  /* 本文中の自動リンク（linkify_urls()が生成する post__link） */
  .single__content .post__link{
    color: var(--brand-blue);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all; /* 長いURLでも横にはみ出さず折り返す */
  }
  .single__content .post__link:hover{
    color: var(--brand-blue-deep);
  }

  /* クリックで拡大できることを示すため、画像を包む要素を用意し
     ホバー時にわずかな拡大＋暗いオーバーレイ＋虫眼鏡アイコンを表示する */
  .single__content .post__image-wrap{
    position: relative;
    display: block;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 4px;
  }
  .single__content .post__image-wrap img{
    display: block;
    transition: transform .3s ease;
  }
  .single__content .post__image-wrap::after{
    /* 虫眼鏡（拡大）アイコンをCSSだけで表現 */
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    background: rgba(0,0,0,.55);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }
  .single__content .post__image-wrap::before{
    /* 虫眼鏡の柄と円をボーダーで表現 */
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -13px 0 0 -13px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 9px 9px 0 -1px #fff; /* 柄の部分 */
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: 1;
  }
  .single__content .post__image-wrap:hover img{
    transform: scale(1.05);
  }
  .single__content .post__image-wrap:hover::after,
  .single__content .post__image-wrap:hover::before{
    opacity: 1;
  }

  .single__content img{
    display: block;
    width: 100%;
    max-width: 320px; /* 480px → 320px にさらに縮小。記事幅が狭くなった分と合わせ、写真が主張しすぎないサイズに */
    height: auto;
    margin: 28px auto; /* 中央寄せ、上下の余白は本文との区切りとして少し広めに */
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0,71,125,.1); /* 軽い影を足して本文の中で浮いて見えるように */
  }
  /* wrapで囲まれている場合はwrap側にmargin等を持たせ、中のimgは素の状態にする */
  .single__content .post__image-wrap{
    max-width: 320px;
    margin: 28px auto;
    box-shadow: 0 6px 16px rgba(0,71,125,.1);
  }
  .single__content .post__image-wrap img{
    max-width: 100%;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
  }

  /* 連続する画像は post__image-group で囲まれ、横並びで表示される
     （render_post_body() の group_consecutive_images() が自動でグループ化する） */
  .single__content .post__image-group{
    display: flex;
    flex-wrap: wrap; /* 3枚以上連続した場合は自動的に2枚ずつ折り返す */
    justify-content: center;
    gap: 12px;
    margin: 28px 0;
  }
  .single__content .post__image-group .post__image-wrap{
    /* グループ内では通常の単独画像用マージンを打ち消し、gapで間隔をとる */
    width: calc(50% - 6px);
    max-width: 260px;
    margin: 0;
  }

  /* ===== 続きを読む（read-more） ===== */
  .read-more-003{
    position: relative;
  }
  .read-more-003 p{
    position: relative;
    max-height: 260px;
    margin: 0 0 10px;
    overflow: hidden;
    transition: max-height .6s ease;
  }
  .read-more-003:has(:checked) p{
    max-height: 4000px;
    overflow: visible;
  }
  .read-more-003 p::after{
    content: "";
    display: block;
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 60%, #fff 100%);
    transition: opacity .3s ease;
  }
  .read-more-003:has(:checked) p::after{
    opacity: 0;
    pointer-events: none;
  }

  .read-more-003 label{
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    padding: 10px 26px;
    background: var(--brand-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0,75,157,.3);
    cursor: pointer;
    z-index: 1;
    transition: background-color .25s ease, transform .25s ease;
  }
  .read-more-003 label:hover{
    background: var(--brand-blue-deep);
    transform: translateX(-50%) translateY(-2px);
  }
  .read-more-003 label::after{
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    margin-top: -3px;
  }
  .read-more-003:has(:checked) label{
    display: none;
  }
  .read-more-003 input{
    display: none;
  }

  /* ハッシュタグ */
  .post__hashtags{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 0;
    padding-top: 24px;
    border-top: 1px dashed rgba(0,75,157,.2);
  }
  .post__hashtag{
    display: inline-block;
    padding: 5px 14px;
    background: #f2f6fa;
    color: var(--brand-blue);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
  }

  /* ===== レスポンシブ（記事詳細） ===== */
  @media (max-width: 767px){
    .article__wrapper{ padding: 40px 14px 60px; }
    .single__post > .post__title{ font-size: 20px; margin-bottom: 24px; padding-bottom: 18px; }
    .single__content{ font-size: 15px; line-height: 1.8; letter-spacing: .01em; }
    /* スマホも画面幅いっぱいではなく上限を設け、文章とのバランスを保つ */
    .single__content img{ max-width: 240px; margin: 24px auto; }
    .single__content .post__image-wrap{ max-width: 240px; margin: 24px auto; }
    /* グループ画像はスマホでも2枚並びのまま、幅だけ画面に収まるよう縮小 */
    .single__content .post__image-group{ gap: 8px; margin: 24px 0; }
    .single__content .post__image-group .post__image-wrap{ width: calc(50% - 4px); max-width: 160px; }
    /* スマホはホバーできないため、常にアイコンをうっすら表示して
       タップできることが伝わるようにする */
    .single__content .post__image-wrap::after,
    .single__content .post__image-wrap::before{
      opacity: .85;
    }
    .single__content .post__image-wrap:hover img{ transform: none; }
    .read-more-003 p{ max-height: 220px; }
  }
/* .post__hashtag が <span> から <a>（クリック可能なリンク）に変わったため、
     下線を消し、ホバー時に色が反転するインタラクションを追加（新規追加分） */
  .post__hashtag{
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
  }
  .post__hashtag:hover{
    background: var(--brand-blue);
    color: #fff;
    text-decoration: none;
  }
  /* ===== 画像ライトボックス（記事本文の画像クリックで拡大表示） ===== */
  .lightbox{
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(10, 20, 35, 0);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, background-color .3s ease, visibility 0s linear .3s;
  }
  .lightbox.is-open{
    background: rgba(10, 20, 35, .92);
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease, background-color .3s ease, visibility 0s linear 0s;
  }
  .lightbox__img{
    display: block;
    max-width: 92vw;
    max-height: 86vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,.5);
    transform: scale(.94);
    transition: transform .3s ease;
  }
  .lightbox.is-open .lightbox__img{
    transform: scale(1);
  }
  .lightbox__close{
    position: absolute;
    top: 20px; right: 24px;
    width: 44px; height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s ease;
  }
  .lightbox__close:hover{
    background: rgba(255,255,255,.24);
  }

  @media (max-width: 767px){
    .lightbox{ padding: 16px; }
    .lightbox__close{ top: 12px; right: 12px; width: 38px; height: 38px; font-size: 18px; }
  }

  /* ===== リンクプレビューカード（{{link:URL}} で挿入される） ===== */
  .single__content .post__link-card{
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 28px 0;
    background: #fff;
    border: 1px solid #e3ecf5;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0,71,125,.08);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .single__content .post__link-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,71,125,.14);
    text-decoration: none;
  }
  .single__content .post__link-card__thumb{
    flex: 0 0 120px;
    background-size: cover;
    background-position: center;
    background-color: #eef3f8;
  }
  .single__content .post__link-card__body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 14px 16px;
    min-width: 0; /* flex子要素でtext-overflowを効かせるために必要 */
  }
  .single__content .post__link-card__title{
    color: #143556;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    /* 2行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .single__content .post__link-card__desc{
    color: #5a6b80;
    font-size: 12px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .single__content .post__link-card__domain{
    color: var(--brand-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
  }

  @media (max-width: 767px){
    .single__content .post__link-card{ margin: 22px 0; }
    .single__content .post__link-card__thumb{ flex-basis: 88px; }
    .single__content .post__link-card__body{ padding: 10px 12px; }
    .single__content .post__link-card__title{ font-size: 13px; }
    .single__content .post__link-card__desc{ display: none; } /* スマホは説明文を省略してコンパクトに */
  }

/* ===== 記事本文中の動画（{{video:N}}） ===== */
  .single__content .post__video-wrap{
    display: block;
    margin: 28px 0;
  }
  .single__content .post__video{
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    background: #000; /* 読み込み中・コントロール周りの余白が黒くなじむように */
    box-shadow: 0 8px 24px rgba(0,71,125,.14);
  }

  @media (max-width: 767px){
    .single__content .post__video-wrap{
      margin: 22px 0;
    }
    .single__content .post__video{
      border-radius: 4px;
    }
  }
/* =====================================
   PROFILE PAGE
   ※ 色は個別指定(#0067b5等)ではなく、サイト共通の
     ブランド変数(--brand-blue / --brand-yellow)に統一。
     box-sizing はグローバル(*{box-sizing:border-box})で
     既に効いているため、ここでの再指定は不要なため削除。
===================================== */

.profile-page {
    width: 100%;
    color: #143556;
    background: #f5fbff;
    overflow: hidden;
}


/* =====================================
   PROFILE HERO
===================================== */

.profile-hero {
    position: relative;
    padding: 100px 24px 80px;
    background: linear-gradient(135deg, #dff4ff 0%, #eefaff 48%, #d7f0ff 100%);
    overflow: hidden;
}

.profile-hero::before,
.profile-hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.profile-hero::before {
    top: -180px;
    right: -120px;
    width: 460px;
    height: 460px;
    background: rgba(255, 224, 0, 0.18);
}

.profile-hero::after {
    bottom: -160px;
    left: -120px;
    width: 420px;
    height: 420px;
    background: rgba(0, 75, 157, 0.08);
}

.profile-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(320px, 430px) 1fr;
    align-items: center;
    gap: 70px;
    width: min(100%, 1180px);
    margin: 0 auto;
}


/* =====================================
   PHOTO
===================================== */

.profile-photo-wrap {
    position: relative;
}

.profile-image {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
}

.profile-image::before {
    content: "";
    position: absolute;
    top: 22px;
    right: -20px;
    bottom: -20px;
    left: 22px;
    z-index: -1;
    background: var(--brand-yellow);
}

.profile-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 7;
    object-fit: cover;
    object-position: center top;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(0, 70, 120, 0.16);
}

.profile-name-block {
    position: relative;
    z-index: 3;
    width: calc(100% - 34px);
    margin: -55px 0 0 34px;
    padding: 22px 26px 24px;
    background: var(--brand-blue);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(0, 71, 125, 0.22);
}

.profile-label {
    margin: 0 0 5px;
    color: var(--brand-yellow);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.2em;
}

.profile-name {
    margin: 0;
    color: #ffffff;
    font-size: clamp(30px, 3vw, 44px);
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.08em;
}

.profile-name-kana {
    margin: 6px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.12em;
}


/* =====================================
   MESSAGE
===================================== */

.profile-message {
    position: relative;
    padding: 46px 48px 48px;
    background: #ffffff;
    border-left: 8px solid var(--brand-yellow);
    box-shadow: 0 16px 40px rgba(0, 71, 125, 0.12);
}

.profile-message::before {
    content: "MESSAGE";
    position: absolute;
    top: 20px;
    right: 28px;
    color: rgba(0, 75, 157, 0.08);
    font-size: clamp(42px, 6vw, 88px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
}

.profile-message-catch {
    position: relative;
    z-index: 1;
    margin: 0 0 28px;
    color: var(--brand-blue);
    font-size: clamp(28px, 3.4vw, 46px);
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 0.03em;
}

.profile-message-text {
    position: relative;
    z-index: 1;
    color: #183c5f;
    font-size: 16px;
    font-weight: 600;
    line-height: 2;
}

.profile-message-text p {
    margin: 0;
}

.profile-message-text p + p {
    margin-top: 18px;
}


/* =====================================
   DETAILS
===================================== */

.profile-details {
    padding: 90px 24px 110px;
    background: #ffffff;
}

.profile-details-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    width: min(100%, 1180px);
    margin: 0 auto;
}


/* =====================================
   SECTION CARD
===================================== */

.profile-section {
    position: relative;
    padding: 34px 34px 38px;
    background: #f7fcff;
    border: 1px solid rgba(0, 75, 157, 0.14);
    box-shadow: 0 12px 30px rgba(0, 71, 125, 0.08);
}

.profile-section-wide {
    grid-column: 1 / -1;
}

.profile-section-heading {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
    padding-bottom: 18px;
    border-bottom: 2px solid rgba(0, 75, 157, 0.16);
}

.profile-section-number {
    flex: 0 0 auto;
    color: var(--brand-yellow);
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    /* 文字の輪郭をブランドブルーで縁取り、白背景でも視認性を確保 */
    text-shadow:
        1px 1px 0 var(--brand-blue),
        -1px -1px 0 var(--brand-blue),
        1px -1px 0 var(--brand-blue),
        -1px 1px 0 var(--brand-blue);
}

.profile-section-en {
    margin: 0 0 2px;
    color: var(--brand-blue);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.18em;
}

.profile-section-title {
    margin: 0;
    color: #143556;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.35;
}


/* =====================================
   TIMELINE
===================================== */

.profile-timeline {
    display: flex;
    flex-direction: column;
}

.profile-timeline-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 26px;
    padding: 20px 0;
    border-bottom: 1px dashed rgba(0, 75, 157, 0.22);
}

.profile-timeline-item:first-child {
    padding-top: 0;
}

.profile-timeline-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.profile-timeline-year {
    position: relative;
    padding-left: 18px;
    color: var(--brand-blue);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.7;
}

.profile-timeline-year::before {
    content: "";
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 9px;
    height: 9px;
    background: var(--brand-yellow);
    border: 2px solid var(--brand-blue);
    border-radius: 50%;
}

.profile-timeline-content {
    color: #183c5f;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.8;
}


/* =====================================
   LIST
===================================== */

.profile-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.profile-list li {
    position: relative;
    margin: 0;
    padding: 14px 0 14px 22px;
    border-bottom: 1px dashed rgba(0, 75, 157, 0.2);
    color: #183c5f;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7;
}

.profile-list li:first-child {
    padding-top: 0;
}

.profile-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.profile-list li::before {
    content: "";
    position: absolute;
    top: 1.05em;
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--brand-blue);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 75, 157, 0.1);
}

.profile-list li:first-child::before {
    top: 0.45em;
}

.profile-list-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 991px) {

    .profile-hero {
        padding: 80px 20px 70px;
    }

    .profile-hero-inner {
        grid-template-columns: 320px 1fr;
        gap: 42px;
    }

    .profile-message {
        padding: 38px 34px 40px;
    }

    .profile-message-catch {
        font-size: 31px;
    }

    .profile-details {
        padding: 70px 20px 90px;
    }

    .profile-section {
        padding: 30px 28px 34px;
    }

    .profile-list-columns {
        column-gap: 28px;
    }

}


/* =====================================
   SMARTPHONE
===================================== */

@media (max-width: 767px) {

    .profile-hero {
        padding: 55px 15px 50px;
    }

    .profile-hero-inner {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .profile-photo-wrap {
        width: min(100%, 390px);
        margin: 0 auto;
    }

    .profile-image::before {
        top: 14px;
        right: -12px;
        bottom: -12px;
        left: 14px;
    }

    .profile-name-block {
        width: calc(100% - 20px);
        margin: -42px 0 0 20px;
        padding: 18px 20px 20px;
    }

    .profile-name {
        font-size: 30px;
    }

    .profile-message {
        padding: 34px 24px 32px;
        border-left-width: 6px;
    }

    .profile-message::before {
        top: 14px;
        right: 16px;
        font-size: 48px;
    }

    .profile-message-catch {
        margin-bottom: 22px;
        font-size: 25px;
        line-height: 1.5;
    }

    .profile-message-text {
        font-size: 14px;
        line-height: 1.9;
    }

    .profile-details {
        padding: 55px 15px 70px;
    }

    .profile-details-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .profile-section,
    .profile-section-wide {
        grid-column: auto;
    }

    .profile-section {
        padding: 26px 21px 30px;
    }

    .profile-section-heading {
        gap: 13px;
        margin-bottom: 22px;
        padding-bottom: 14px;
    }

    .profile-section-number {
        font-size: 34px;
    }

    .profile-section-title {
        font-size: 22px;
    }

    .profile-timeline-item {
        grid-template-columns: 1fr;
        gap: 5px;
        padding: 16px 0;
    }

    .profile-timeline-year {
        font-size: 14px;
    }

    .profile-timeline-content {
        padding-left: 18px;
        font-size: 13px;
        line-height: 1.75;
    }

    .profile-list li {
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 13px;
    }

    .profile-list-columns {
        grid-template-columns: 1fr;
    }

}


/* =====================================
   SMALL SMARTPHONE
===================================== */

@media (max-width: 374px) {

    .profile-hero,
    .profile-details {
        padding-right: 12px;
        padding-left: 12px;
    }

    .profile-message {
        padding-right: 20px;
        padding-left: 20px;
    }

    .profile-message-catch {
        font-size: 22px;
    }

    .profile-section {
        padding-right: 18px;
        padding-left: 18px;
    }

}
/* =====================================
   活動概要ページ
   ※ 色はプロフィールページと同様、個別指定ではなく
     サイト共通のブランド変数(--brand-blue / --brand-yellow)に統一。
===================================== */

/* 【重要】スマホでボタンが画面右端からはみ出す不具合の再発防止策。
   box-sizingが効いていない、または何らかの要素が横幅を超えて
   広がった場合でも、横スクロールという形で症状が出ないよう
   コンテナ側で確実に隠す（根本対策＋保険の二重構え）。 */
.activitycontainer,
.activitycontainer *{
    box-sizing: border-box;
}
.activitycontainer{
    overflow-x: hidden;
}

/* チラシ画像 */
.activityimg {
    padding: 40px 20px;
    text-align: center;
}
.activityimg img {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    height: auto;
    box-shadow: 0 12px 30px rgba(0, 71, 125, 0.12);
}

@media (max-width: 767px) {
    .activityimg {
        padding: 28px 15px;
    }
    .activityimg img {
        max-width: 320px;
    }
}
@media (max-width: 350px) {
    .activityimg img {
        max-width: 260px;
    }
}


/* =====================================
   ブログ記事カテゴリ
===================================== */

.activitycontainer {
    width: 100%;
    padding: 70px 20px;
    text-align: center;
    background: #fff;
}

.activitycontainer .blog__wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    box-sizing: border-box;
}

@media (max-width: 767px){
    .activitycontainer .blog__wrapper{
        padding: 0 4px; /* 画面ギリギリでボタンが切れないよう、わずかに左右の余白を確保 */
    }
}

/* カテゴリボタンの並び（記事カード用の.blog__gridとは別に、
   ボタン専用の並びとして.blogセレクタをここだけ流用） */
.activitycontainer .blog {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
    padding: 0;
}

.activitycontainer .blog__title {
    margin-bottom: 28px;
}


/* =====================================
   カテゴリボタン
===================================== */

.activitycontainer .blog__more {
    flex: 0 1 calc(25% - 12px);
    min-width: 180px;
    margin: 0;
    box-sizing: border-box; /* 枠線・paddingを幅計算に含め、隣のボタンとの重なりを防ぐ */
}

.activitycontainer .blog__more a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 62px;
    padding: 14px 34px 14px 22px;
    box-sizing: border-box; /* 同上：paddingやborderで幅がはみ出さないようにする */
    background: #fff;
    color: var(--brand-blue);
    border: 1px solid var(--brand-blue);
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-decoration: none;
    overflow: hidden;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease,
        color 0.25s ease;
}

.activitycontainer .blog__more a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: right 0.25s ease;
}

.activitycontainer .blog__more a:hover {
    background: var(--brand-blue);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 75, 157, 0.2);
}

.activitycontainer .blog__more a:hover::after {
    right: 14px;
}

.activitycontainer .blog__more a:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 4px;
}


/* =====================================
   タブレット
===================================== */

@media (max-width: 991px) {

    .activitycontainer {
        padding: 60px 20px;
    }

    .activitycontainer .blog {
        gap: 14px;
    }

    .activitycontainer .blog__more {
        flex: 0 1 calc(33.333% - 10px);
        min-width: 170px;
    }

    .activitycontainer .blog__more a {
        min-height: 58px;
        font-size: 15px;
    }

}


/* =====================================
   スマートフォン
===================================== */

@media (max-width: 767px) {

    .activitycontainer {
        padding: 45px 15px;
    }

    .activitycontainer .blog__title {
        margin-bottom: 22px;
    }

    .activitycontainer .blog {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .activitycontainer .blog__more {
        width: 100% !important;
        min-width: 0 !important;
        flex: unset !important;
    }

    /* カテゴリの総数が奇数の場合、2列並びだと最後の1つだけ
       余って中途半端な見た目になる（今回の「コロナウイルス」など）。
       :last-child:nth-child(odd) で「奇数番目かつ最後の要素」＝
       総数が奇数のときの最後の1個だけを検出し、2列分（グリッド全幅）に広げる。
       Gridなので grid-column: 1 / -1 と書くだけで、余白計算のズレが起きない。 */
    .activitycontainer .blog__more:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .activitycontainer .blog__more a {
        min-height: 54px;
        padding: 12px 28px 12px 14px;
        font-size: 14px;
        letter-spacing: 0.02em;
    }

    .activitycontainer .blog__more a::after {
        right: 14px;
        width: 7px;
        height: 7px;
    }

    .activitycontainer .blog__more a:hover::after {
        right: 11px;
    }

}


/* =====================================
   小型スマートフォン
===================================== */

@media (max-width: 374px) {

    .activitycontainer {
        padding-right: 12px;
        padding-left: 12px;
    }

    .activitycontainer .blog__more {
        flex-basis: 100%;
    }

    .activitycontainer .blog__more a {
        min-height: 52px;
        font-size: 14px;
    }

}


/* =====================================
   まちづくり 3項目デザイン
===================================== */

.activitytext {
    width: 100%;
    padding: 80px 24px;
    background: linear-gradient(135deg, #dff4ff 0%, #eefaff 48%, #d8f1ff 100%);
    color: #143556;
    overflow: hidden;
}


/* =====================================
   導入部分
===================================== */

.activity-intro {
    position: relative;
    width: min(100%, 1200px);
    margin: 0 auto 48px;
    padding: 32px 42px 34px;
    background: var(--brand-yellow);
    border-left: 10px solid var(--brand-blue);
    box-shadow: 8px 10px 0 rgba(0, 75, 157, 0.16);
    overflow: hidden;
}

.activity-intro::after {
    content: "";
    position: absolute;
    top: 0;
    right: -55px;
    width: 130px;
    height: 100%;
    background: #edfaff;
    transform: skewX(-18deg);
}

.activity-intro-sub {
    position: relative;
    z-index: 1;
    margin: 0 0 5px;
    color: var(--brand-blue);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.activity-intro-title {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--brand-blue);
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: 0.04em;
}

.activity-intro-description {
    position: relative;
    z-index: 1;
    max-width: 750px;
    margin: 15px 0 0;
    color: #143556;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.8;
}


/* =====================================
   3カラム
===================================== */

.activity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
    width: min(100%, 1200px);
    margin: 0 auto;
}


/* =====================================
   カード
===================================== */

.activity-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #ffffff;
    border: 2px solid rgba(0, 75, 157, 0.16);
    box-shadow: 0 12px 30px rgba(0, 71, 125, 0.13);
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.activity-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 71, 125, 0.2);
}


/* =====================================
   青い見出し帯
===================================== */

.activitymaintop {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 180px;
    margin: 0;
    padding: 26px 40px 26px 26px;
    background: linear-gradient(135deg, #1a7fd4 0%, var(--brand-blue) 52%, var(--brand-blue-deep) 100%);
    color: #ffffff;
    overflow: hidden;
}

.activitymaintop::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -22px;
    width: 46px;
    height: 46px;
    background: #eefaff;
    transform: translateY(-50%) rotate(45deg);
}

.activity-heading {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.activity-heading-top {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.activity-number {
    flex: 0 0 auto;
    margin: 0;
    color: var(--brand-yellow);
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
}

.activity-title {
    min-width: 0;
    margin: 0;
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.activity-subtitle {
    margin: 14px 0 0 64px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}


/* =====================================
   本文
===================================== */

.activitymain {
    flex: 1;
    padding: 28px 26px 30px;
    background: linear-gradient(180deg, #ffffff 0%, #f4fbff 100%);
}

/* activitymaintext は <ul> のため、直下は必ず <li> のみとする。
   各項目の見出し(activity-list-title)と説明文(activity-list-description)は
   両方とも同じ<li>の中に入れる（以前はliとpが兄弟で並ぶ無効なHTMLだった） */
.activitymaintext {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.activitymaintext li {
    position: relative;
    margin: 0;
    padding: 0 0 17px 22px;
    border-bottom: 1px dashed rgba(0, 75, 157, 0.25);
}

.activitymaintext li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.activitymaintext li::before {
    content: "";
    position: absolute;
    top: 0.55em;
    left: 0;
    width: 10px;
    height: 10px;
    background: var(--brand-blue);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(0, 75, 157, 0.12);
}

.activity-list-title {
    margin: 0 0 6px;
    color: var(--brand-blue);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.5;
}

.activity-list-description {
    margin: 0;
    color: #183c5f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.75;
}

@media (max-width: 767px) {

    .activity-list-title {
        margin-bottom: 5px;
        font-size: 15px;
        line-height: 1.5;
    }

    .activity-list-description {
        font-size: 13px;
        line-height: 1.7;
    }

}

/* =====================================
   タブレット
===================================== */

@media (max-width: 991px) {

    .activitytext {
        padding: 64px 20px;
    }

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

    .activity-card:nth-child(3) {
        grid-column: 1 / -1;
        width: calc(50% - 12px);
        justify-self: center;
    }

    .activity-intro {
        margin-bottom: 38px;
        padding: 28px 34px 30px;
    }

    .activitymaintop {
        min-height: 165px;
        padding: 24px 36px 24px 22px;
    }

    .activity-heading-top {
        gap: 14px;
    }

    .activity-number {
        font-size: 42px;
    }

    .activity-title {
        font-size: 24px;
    }

    .activity-subtitle {
        margin-top: 12px;
        margin-left: 58px;
        font-size: 13px;
    }

    .activitymain {
        padding: 26px 24px 28px;
    }

}


/* =====================================
   スマートフォン
===================================== */

@media (max-width: 767px) {

    .activitytext {
        padding: 48px 15px;
    }

    .activity-intro {
        margin-bottom: 28px;
        padding: 24px 22px 26px;
        border-left-width: 7px;
        box-shadow: 5px 7px 0 rgba(0, 75, 157, 0.14);
    }

    .activity-intro::after {
        right: -90px;
    }

    .activity-intro-sub {
        font-size: 14px;
    }

    .activity-intro-title {
        font-size: clamp(28px, 9vw, 40px);
    }

    .activity-intro-description {
        margin-top: 12px;
        font-size: 14px;
        line-height: 1.7;
    }

    .activity-intro-description br {
        display: none;
    }

    .activity-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .activity-card:nth-child(3) {
        grid-column: auto;
        width: 100%;
    }

    .activitymaintop {
        min-height: auto;
        padding: 22px 34px 22px 18px;
    }

    .activity-heading-top {
        align-items: flex-start;
        gap: 12px;
    }

    .activity-number {
        font-size: 36px;
    }

    .activity-title {
        font-size: 21px;
        line-height: 1.4;
    }

    .activity-subtitle {
        margin: 12px 0 0 48px;
        font-size: 12px;
        line-height: 1.5;
    }

    .activitymain {
        padding: 23px 20px 25px;
    }

    .activitymaintext {
        gap: 15px;
    }

    .activitymaintext li {
        padding-left: 19px;
        padding-bottom: 14px;
    }

    .activitymaintext li::before {
        width: 8px;
        height: 8px;
    }

}


/* =====================================
   小型スマートフォン
===================================== */

@media (max-width: 374px) {

    .activitytext {
        padding-right: 12px;
        padding-left: 12px;
    }

    .activity-intro {
        padding-right: 18px;
        padding-left: 18px;
    }

    .activitymaintop {
        padding-right: 28px;
        padding-left: 15px;
    }

    .activity-heading-top {
        gap: 10px;
    }

    .activity-number {
        font-size: 32px;
    }

    .activity-title {
        font-size: 19px;
    }

    .activity-subtitle {
        margin-left: 42px;
        font-size: 11px;
    }

    .activitymain {
        padding-right: 17px;
        padding-left: 17px;
    }

}
/* ===== ページ見出し帯（トップページ以外の各ページ上部） ===== */
  .page-heading{
    background: linear-gradient(120deg, var(--brand-blue) 0%, var(--brand-blue-deep) 100%);
    padding: 64px 24px;
    text-align: center;
  }
  .page-heading__inner{
    max-width: 1180px;
    margin: 0 auto;
  }
  .page-heading__main{
    display: block;
    margin-bottom: 6px;
    color: rgba(255,255,255,.75);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2em;
  }
  .page-heading__sub{
    display: block;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    letter-spacing: .1em;
  }

  @media (max-width: 767px){
    .page-heading{ padding: 44px 20px; }
    .page-heading__sub{ font-size: 22px; }
  }
  /* ===== 記事詳細ページ ===== */
  .article__wrapper{
    max-width: 680px;
    margin: 0 auto;
    padding: 70px 20px 100px;
  }

  .single__post{
    /* 背景・影は使わず、ページの地の色にそのまま馴染ませる */
  }

  .single__category{
    margin-bottom: 18px;
    color: #7a8ba0;
    font-size: 12px;
    letter-spacing: .02em;
  }
  .single__category a{
    color: var(--brand-blue);
    text-decoration: none;
  }
  .single__category a:hover{
    text-decoration: underline;
  }

  .single__post > .post__date{
    display: inline-block;
    margin-bottom: 14px;
    color: var(--brand-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
  }

  .single__post > .post__title{
    margin: 0 0 32px;
    padding-bottom: 24px;
    border-bottom: 2px solid #eef3f8;
    color: #143556;
    font-size: 26px;
    font-weight: 900;
    line-height: 1.5;
  }

  .single__content{
    color: #234a6e;
    font-size: 16px;
    line-height: 1.85;
    letter-spacing: .01em;
  }

  .single__content .post__link{
    color: var(--brand-blue);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
  }
  .single__content .post__link:hover{
    color: var(--brand-blue-deep);
  }

  .single__content .post__image-wrap{
    position: relative;
    display: block;
    cursor: zoom-in;
    overflow: hidden;
    border-radius: 4px;
  }
  .single__content .post__image-wrap img{
    display: block;
    transition: transform .3s ease;
  }
  .single__content .post__image-wrap::after{
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    background: rgba(0,0,0,.55);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
  }
  .single__content .post__image-wrap::before{
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -13px 0 0 -13px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 9px 9px 0 -1px #fff;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: 1;
  }
  .single__content .post__image-wrap:hover img{
    transform: scale(1.05);
  }
  .single__content .post__image-wrap:hover::after,
  .single__content .post__image-wrap:hover::before{
    opacity: 1;
  }

  .single__content img{
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 28px auto;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0,71,125,.1);
  }
  .single__content .post__image-wrap{
    max-width: 320px;
    margin: 28px auto;
    box-shadow: 0 6px 16px rgba(0,71,125,.1);
  }
  .single__content .post__image-wrap img{
    max-width: 100%;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
  }

  .single__content .post__image-group{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 28px 0;
  }
  .single__content .post__image-group .post__image-wrap{
    width: calc(50% - 6px);
    max-width: 260px;
    margin: 0;
  }

  .single__content .post__video-wrap{
    display: block;
    margin: 28px 0;
  }
  .single__content .post__video{
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    background: #000;
    box-shadow: 0 8px 24px rgba(0,71,125,.14);
  }

  /* ===== 続きを読む（read-more） ===== */
  .read-more-003{
    position: relative;
  }
  .read-more-003 p{
    position: relative;
    max-height: 420px;
    margin: 0 0 10px;
    overflow: hidden;
    transition: max-height .6s ease;
  }
  .read-more-003:has(:checked) p{
    max-height: none;
    overflow: visible;
  }
  .read-more-003 p::after{
    content: "";
    display: block;
    position: absolute;
    left: 0; bottom: 0;
    width: 100%;
    height: 90px;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.95) 60%, #fff 100%);
    transition: opacity .3s ease;
  }
  .read-more-003:has(:checked) p::after{
    opacity: 0;
    pointer-events: none;
  }
  .read-more-003 label{
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    padding: 10px 26px;
    background: var(--brand-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0,75,157,.3);
    cursor: pointer;
    z-index: 1;
    transition: background-color .25s ease, transform .25s ease;
  }
  .read-more-003 label:hover{
    background: var(--brand-blue-deep);
  }
  .read-more-003 label::after{
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    margin-top: -3px;
  }
  .read-more-003:has(:checked) label{
    display: none;
  }
  .read-more-003 input{
    display: none;
  }

  .post__hashtags{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 0;
    padding-top: 24px;
    border-top: 1px dashed rgba(0,75,157,.2);
  }
  .post__hashtag{
    display: inline-block;
    padding: 5px 14px;
    background: #f2f6fa;
    color: var(--brand-blue);
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
  }
  .post__hashtag:hover{
    background: var(--brand-blue);
    color: #fff;
  }

  .blog.blog--related{
    padding: 50px 0 70px;
    border-top: 1px solid #eef3f8;
  }
  .blog--related .blog__title{
    margin-bottom: 32px;
  }
  .blog--related .blog__title .title__main{
    font-size: 22px;
  }

  /* ===== ブログ一覧の検索・絞り込みフォーム ===== */
  .blog__filter{
    max-width: 720px;
    margin: 40px auto 0;
  }
  .blog__search{
    position: relative;
    display: flex;
    align-items: center;
    max-width: 560px;
    margin: 0 auto;
  }
  .blog__search-icon{
    position: absolute;
    top: 50%; left: 16px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #9fb0c2;
    pointer-events: none;
  }
  .blog__search-input{
    flex: 1;
    padding: 13px 44px;
    background: #fff;
    border: 1px solid #d7e2ec;
    border-radius: 999px 0 0 999px;
    font-size: 15px;
    color: #143556;
    transition: border-color .2s ease;
  }
  .blog__search-input:focus{
    outline: none;
    border-color: var(--brand-blue);
  }
  .blog__search-clear{
    position: absolute;
    top: 50%; right: 96px;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef3f8;
    color: #7a8ba0;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
  }
  .blog__search-clear:hover{
    background: #dee9f2;
  }
  .blog__search-submit{
    padding: 13px 26px;
    background: var(--brand-blue);
    color: #fff;
    border: 1px solid var(--brand-blue);
    border-radius: 0 999px 999px 0;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease;
  }
  .blog__search-submit:hover{
    background: var(--brand-blue-deep);
  }

  .blog__search-result-count{
    margin: 16px 0 0;
    text-align: center;
    color: #5a6b80;
    font-size: 13px;
  }

  .blog__filter-selects{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
  }
  .blog__filter-field{
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .blog__filter-label{
    color: #5a6b80;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
  }
  .blog__filter-select{
    padding: 9px 32px 9px 14px;
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0l5 6 5-6z" fill="%237a8ba0"/></svg>') no-repeat right 12px center;
    border: 1px solid #d7e2ec;
    border-radius: 999px;
    font-size: 13.5px;
    color: #143556;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .2s ease;
  }
  .blog__filter-select:focus{
    outline: none;
    border-color: var(--brand-blue);
  }

  .blog__active-filters{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 20px 0 0;
  }
  .blog__active-filters-label{
    color: #5a6b80;
    font-size: 13px;
    font-weight: 700;
  }
  .blog__filter-chip{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 14px;
    background: #eef5fb;
    color: var(--brand-blue);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
  }
  .blog__filter-chip a{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    background: rgba(0,75,157,.14);
    color: var(--brand-blue);
    border-radius: 50%;
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
  }
  .blog__filter-chip a:hover{
    background: rgba(0,75,157,.24);
  }

  /* ===== ページネーション（ブログ一覧） ===== */
  .pagination{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 48px 0 16px;
  }
  .pagination__list{
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pagination__link{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    background: #fff;
    color: var(--brand-blue);
    border: 1px solid #dbe6f0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .pagination__link:hover{
    background: #eef5fb;
    border-color: var(--brand-blue);
  }
  .pagination__link--current{
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
    cursor: default;
  }
  .pagination__ellipsis{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 40px;
    color: #9fb0c2;
    font-weight: 700;
  }
  .pagination__arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #fff;
    color: var(--brand-blue);
    border: 1px solid #dbe6f0;
    border-radius: 4px;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease;
  }
  .pagination__arrow:hover{
    background: #eef5fb;
    border-color: var(--brand-blue);
  }
  .pagination__arrow--disabled{
    color: #cbd7e2;
    background: #f7fafc;
    cursor: default;
    pointer-events: none;
  }

  /* ===== 記事本文中のリンクカード（{{link:URL}}） ===== */
  .single__content .post__link-card{
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 28px 0;
    background: #fff;
    border: 1px solid #e3ecf5;
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(0,71,125,.08);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .single__content .post__link-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,71,125,.14);
    text-decoration: none;
  }
  .single__content .post__link-card__thumb{
    flex: 0 0 120px;
    background-size: cover;
    background-position: center;
    background-color: #eef3f8;
  }
  .single__content .post__link-card__body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 14px 16px;
    min-width: 0;
  }
  .single__content .post__link-card__title{
    color: #143556;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .single__content .post__link-card__desc{
    color: #5a6b80;
    font-size: 12px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .single__content .post__link-card__domain{
    color: var(--brand-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
  }

  /* ===== レスポンシブ（記事詳細・検索・ページネーション） ===== */
  @media (max-width: 767px){
    .article__wrapper{ padding: 40px 14px 60px; }
    .single__post > .post__title{ font-size: 20px; margin-bottom: 24px; padding-bottom: 18px; }
    .single__content{ font-size: 15px; line-height: 1.8; letter-spacing: .01em; }
    .single__content img{ max-width: 240px; margin: 24px auto; }
    .single__content .post__image-wrap{ max-width: 240px; margin: 24px auto; }
    .single__content .post__image-group{ gap: 8px; margin: 24px 0; }
    .single__content .post__image-group .post__image-wrap{ width: calc(50% - 4px); max-width: 160px; }
    .single__content .post__image-wrap::after,
    .single__content .post__image-wrap::before{ opacity: .85; }
    .single__content .post__image-wrap:hover img{ transform: none; }
    .read-more-003 p{ max-height: 340px; }

    .blog__filter{ margin-top: 28px; }
    .blog__search{ margin-top: 0; }
    .blog__search-input{ font-size: 14px; padding: 12px 40px; }
    .blog__search-clear{ right: 82px; }
    .blog__search-submit{ padding: 12px 18px; font-size: 13px; }
    .blog__filter-selects{ flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; }
    .blog__filter-field{ justify-content: space-between; }
    .blog__filter-select{ flex: 1; }
    .blog__active-filters{ margin-top: 16px; }

    .pagination{ gap: 6px; margin: 36px 0 12px; flex-wrap: wrap; }
    .pagination__link,
    .pagination__arrow{ min-width: 36px; height: 36px; font-size: 13px; }
    .pagination__ellipsis{ min-width: 24px; height: 36px; }

    .single__content .post__link-card__title{ font-size: 13px; }
    .single__content .post__link-card__desc{ display: none; }
  }

  /* =====================================
     定例会ページ
  ===================================== */

  .rm__wrapper{
    max-width: 1100px;
    margin: 0 auto;
    padding: 56px 20px 100px;
  }

  /* ===== 検索・年度フィルター ===== */
  .rm__controls{
    position: sticky;
    top: var(--nav-height);
    z-index: 50;
    background: var(--paper);
    padding: 20px 0 18px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e3ecf5;
  }

  .rm__search{
    position: relative;
    max-width: 560px;
    margin: 0 auto 16px;
  }
  .rm__search-icon{
    position: absolute;
    top: 50%; left: 16px;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: #9fb0c2;
    pointer-events: none;
  }
  .rm__search-input{
    width: 100%;
    padding: 13px 44px;
    background: #fff;
    border: 1px solid #d7e2ec;
    border-radius: 999px;
    font-size: 15px;
    color: #143556;
    box-shadow: 0 4px 14px rgba(0,71,125,.06);
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .rm__search-input:focus{
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 4px 16px rgba(0,75,157,.14);
  }
  .rm__search-clear{
    position: absolute;
    top: 50%; right: 12px;
    transform: translateY(-50%);
    width: 26px; height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eef3f8;
    color: #7a8ba0;
    border: none;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
  }
  .rm__search-clear:hover{
    background: #dee9f2;
  }

  .rm__eras{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .rm__era-btn{
    padding: 8px 18px;
    background: #fff;
    color: var(--brand-blue);
    border: 1px solid #d7e2ec;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .rm__era-btn:hover{
    border-color: var(--brand-blue);
  }
  .rm__era-btn.is-active{
    background: var(--brand-blue);
    color: #fff;
    border-color: var(--brand-blue);
  }

  .rm__result-count{
    margin: 18px 0 0;
    text-align: center;
    color: #5a6b80;
    font-size: 13px;
  }

  .rm__empty,
  .rm__no-results{
    margin: 60px 0;
    text-align: center;
    color: #5a6b80;
    font-size: 14px;
    line-height: 1.8;
  }

  /* ===== 年度グループ ===== */
  .rm-era-group{
    margin-top: 48px;
  }
  .rm-era-group:first-child{
    margin-top: 0;
  }

  .rm-era-heading{
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--brand-blue);
  }
  .rm-era-heading__label{
    color: var(--brand-blue);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .04em;
  }
  .rm-era-heading__count{
    color: #9fb0c2;
    font-size: 12.5px;
    font-weight: 700;
  }

  /* ===== カード一覧 ===== */
  .rm__grid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
  }

  .rm-card{
    background: #fff;
    border: 1px solid #e3ecf5;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,71,125,.06);
    transition: box-shadow .25s ease;
  }
  .rm-card:hover{
    box-shadow: 0 10px 26px rgba(0,71,125,.12);
  }

  .rm-card__head{
    position: relative;
    padding: 20px 46px 18px 20px;
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-deep) 100%);
    color: #fff;
  }
  .rm-card__head::after{
    content: "";
    position: absolute;
    top: 50%; right: 20px;
    width: 9px; height: 9px;
    border-right: 2px solid rgba(255,255,255,.85);
    border-bottom: 2px solid rgba(255,255,255,.85);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .25s ease;
  }
  .rm-card.is-expanded .rm-card__head::after{
    transform: translateY(-30%) rotate(-135deg);
  }

  .rm-card__period{
    margin: 0;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: .02em;
  }
  .rm-card__date{
    margin: 6px 0 0;
    color: rgba(255,255,255,.85);
    font-size: 12.5px;
    font-weight: 600;
  }

  .rm-card__body{
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: max-height .35s ease, padding .35s ease;
  }
  .rm-card.is-expanded .rm-card__body{
    max-height: 2000px;
    padding: 18px 20px 4px;
  }
  .rm-card__body--empty p{
    margin: 0;
    color: #9fb0c2;
    font-size: 13px;
    font-style: italic;
  }

  .rm-card__topic-title{
    margin: 18px 0 8px;
    color: var(--brand-blue);
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.6;
  }
  .rm-card__topic-title:first-child{
    margin-top: 0;
  }

  .rm-card__items{
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
  }
  .rm-card__item{
    position: relative;
    padding: 5px 0 5px 20px;
    color: #234a6e;
    font-size: 13.5px;
    line-height: 1.7;
  }
  .rm-card__item--level1::before{
    content: "";
    position: absolute;
    top: 13px; left: 2px;
    width: 6px; height: 6px;
    background: var(--brand-blue);
    border-radius: 50%;
  }
  .rm-card__item--level2{
    padding-left: 34px;
    color: #4a6178;
    font-size: 13px;
  }
  .rm-card__item--level2::before{
    content: "";
    position: absolute;
    top: 14px; left: 20px;
    width: 5px; height: 1.5px;
    background: #9fb0c2;
  }

  .rm-card__foot{
    padding: 14px 20px 20px;
  }
  .rm-card__video-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--brand-yellow);
    color: #1c1c1c;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
  }
  .rm-card__video-link:hover{
    background: #ffd400;
    transform: translateY(-2px);
  }
  .rm-card__video-icon{
    width: 16px; height: 16px;
    flex-shrink: 0;
  }

  /* ===== レスポンシブ ===== */
  @media (max-width: 767px){
    .rm__wrapper{ padding: 40px 16px 70px; }
    .rm__controls{ padding: 16px 0 14px; }
    .rm__search-input{ font-size: 14px; padding: 12px 40px; }
    .rm__eras{ gap: 6px; }
    .rm__era-btn{ font-size: 12px; padding: 7px 14px; }
    .rm-era-group{ margin-top: 36px; }
    .rm-era-heading{ margin-bottom: 14px; padding-bottom: 10px; }
    .rm-era-heading__label{ font-size: 17px; }
    .rm__grid{ grid-template-columns: 1fr; gap: 16px; }
    .rm-card__head{ padding: 17px 40px 15px 16px; }
    .rm-card__period{ font-size: 17px; }
    .rm-card.is-expanded .rm-card__body{ padding: 15px 16px 4px; }
    .rm-card__foot{ padding: 12px 16px 16px; }
  }