/*
 Theme Name: Cocoon Child Master
 Template: cocoon-master
 Version: 2.00
 Description: 1.85系カスタマイズ＋PCツイッター枠(1.64相当)＋SP Share横並び＋カバー全幅＋three-wide(PC右)の床10px戻し などを統合した withu-music 専用子テーマ
*/

/* =========================================================
 * style.css ver2.00 構成メモ
 * ---------------------------------------------------------
 * 01章: ベース設定（本文幅・見えないサイドバー）
 * 02章: フッター（上余白／メニュー横並び／PPリンク配置／reCAPTCHAバッジ）
 * 03章: アンカー・目次補助（スクロール位置・[back_to_toc]用）
 * 04章: カバー（ヒーロー）を画面幅いっぱいにする＋テキスト見た目
 * 05章: Twitterウィジェット一式（PCサイドバーを1.64相当に）
 * 06章: 投稿下レイアウト・columnカテゴリ対応
 * 07章: トップページカバー高さ調整
 * 08章: SP：3カラム全般を横にする（非YouTube共通）
 * 09章: SP：YouTube入り3カラムを 40%＋横スクロールに
 * 10章: SP：Cocoonの .fz-XXpx クラス縮小
 * 11章: SP：行を守る/戻すユーティリティ
 * 12章: SP：Cocoon装飾（::beforeアイコン）を背面へ
 * 13章: おすすめ動画(three-wide)高さそろえ＋PC右カード床10px
 * 14章: SP：2カラム横並び＋高さ揃え＋アイコン薄くかぶせる
 * 15章: SP：非YouTube3カラム底そろえ＋アイコン後ろ＆減彩
 * 16章: 共通 “ここは折るな” (wu-nowrap)
 * 17章: SPだけ投稿末尾のShareを横一列に
 * 18章: 改行ユーティリティ（wu-softbr／インライン名簿）
 * 19章: SP：ボタンブロックの文字サイズ調整
 * 20章: SP：FAQラベル・本文インデント調整
 * 21章: SP：アイコン付きリスト(ハート等)のインデント調整
 * 22章: この3カラムだけレイアウト制御から除外（wu-3col-escape）
 * 23章: 強調(strong/b)の視認性底上げ（全体）
 * 24章: SP：横並びブロックの横間隔を30%に圧縮
 * 25章: インフォバー（お知らせバー：wum-info-bar）
 * 26章: micro-balloon（three-wide以外）の行占有＋align尊重
 * 27章: iPhone幅だけ three-wide 右バルーン位置微調整
 * =======================================================*/


/* =========================================================
 * 01章. ベース設定（本文幅・見えないサイドバー）[ver2.00]
 * ---------------------------------------------------------
 * - 本文最大幅: 860px
 * - PCで「見えないサイドバー」を使い、1カラム風でも中央寄せを維持
 * - columnカテゴリ・特定postのみ例外制御
 * =======================================================*/
:root {
  --content-max: 860px;
  --cocoon-sidebar-width: 336px;
}

/* 投稿・固定ページの本文を中央に860pxで置く */
body.single main.main .entry-content,
body.page   main.main .entry-content,
body.single .content-in .entry-content,
body.page   .content-in .entry-content,
body.single .entry-content,
body.page   .entry-content {
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 通常ブロックもセンター（全幅・幅広は除外） */
body.single .entry-content > *:not(.alignfull):not(.alignwide),
body.page   .entry-content > *:not(.alignfull):not(.alignwide) {
  margin-left: auto;
  margin-right: auto;
}

/* PCで「wu-no-sidebar」な投稿は見えないサイドバーで幅だけ確保 */
@media (min-width: 835px){
  body.single.wu-no-sidebar .content-in {
    display: flex !important;
    align-items: flex-start;
  }
  body.single.wu-no-sidebar main.main {
    width: auto !important;
    margin: 10px 0 !important;
  }
  body.single.wu-no-sidebar .sidebar,
  body.single.wu-no-sidebar #sidebar {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: var(--cocoon-sidebar-width) !important;
    min-width: var(--cocoon-sidebar-width) !important;
  }

  /* 固定ページは素直に1カラム */
  body.page.wu-no-sidebar .content-in {
    display: block !important;
  }
  body.page.wu-no-sidebar .sidebar,
  body.page.wu-no-sidebar #sidebar {
    display: none !important;
  }
  body.page.wu-no-sidebar main.main {
    width: auto !important;
    margin: 10px 0 !important;
  }
  body.page.wu-no-sidebar main.main .entry-content {
    max-width: var(--content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* column カテゴリの単一記事も 860px にしておく */
@media (min-width: 1201px) {
  body.single.category-column .entry-content {
    max-width: var(--content-max) !important;
  }
}

/* postid-1866 だけはサイドバーを見せる（プロフィール的なページ想定） */
body.postid-1866 .content-in {
  display: flex;
}
body.postid-1866 .sidebar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.postid-1866 main.main {
  width: auto;
}

/* PCで通常の single を出すときも“見えないサイドバー”で幅確保（1866とcolumn除く） */
@media (min-width: 1201px){
  body.single:not(.postid-1866):not(.category-column) .content-in{
    display: flex !important;
    align-items: flex-start;
  }
  body.single:not(.postid-1866):not(.category-column) main.main{
    width: auto !important;
    margin: 10px 0 !important;
  }
  body.single:not(.postid-1866):not(.category-column) .sidebar,
  body.single:not(.postid-1866):not(.category-column) #sidebar{
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: var(--cocoon-sidebar-width) !important;
    min-width: var(--cocoon-sidebar-width) !important;
  }
}


/* =========================================================
 * 02章. フッター（上余白をぐっと詰める／メニュー横並び／PP位置）
 *        ＋ メッシュリボン除去 ＋ さりげない影 [ver2.02]
 * ---------------------------------------------------------
 * - スマホ時フッターメニュー横並び
 * - 青帯直前の「謎の余白」をかなり圧縮
 * - メッシュリボンは消して、ほんのり影だけで区切る
 * - PC/SP の PP リンク位置を別々に制御
 * - reCAPTCHAバッジは説明済み前提で非表示
 * =======================================================*/

/* SPメニューの体裁（従来どおり） */
@media (max-width: 782px){
  #navi-footer .menu-footer{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:10px !important;
    list-style:none !important;
    margin:0 auto !important;
    padding:0 !important;
  }
  #navi-footer .menu-footer > li{
    flex:0 0 auto !important;
    width:auto !important;
    margin:0 !important;
    float:none !important;
    border:0 !important;
  }
  #navi-footer .menu-footer > li > a{
    display:inline-block !important;
    width:auto !important;
    padding:.35em .6em !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
}

/* —— 余白とメッシュリボンまわり —— */

/* フッター全体をコンテンツに近づける */
#footer,
.footer{
  margin-top:8px !important;      /* ←ここでコンテンツとの距離を決める */
  padding-top:4px !important;     /* 上の白い余白をかなり圧縮 */
  border-top:none !important;
  box-shadow:0 -4px 12px rgba(0,0,0,.04); /* 細い線の代わりにごく弱い影 */
}

/* 内側の余白もゼロ基準にしておく */
#footer .footer-in,
.footer .footer-in{
  padding-top:0 !important;
}

/* 青帯（#navi-footer）直前の余白をほぼゼロに */
#navi-footer{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* フッター下部テキストの上だけ、少しスペース */
#footer .footer-bottom,
.footer .footer-bottom{
  padding-top:6px !important;
}

/* Cocoonのメッシュリボンは完全に殺す */
#footer::before,
.footer::before{
  content:none !important;
  display:none !important;
}

/* PCはほんの少しだけ余裕を戻す（細PCも含む） */
@media (min-width:783px){
  #footer,
  .footer{
    margin-top:10px !important;
    padding-top:6px !important;
  }
  #footer .footer-bottom,
  .footer .footer-bottom{
    padding-top:8px !important;
  }
}

/* SPは下側にだけPPリンク用スペースを確保 */
@media (max-width:782px){
  footer{
    position:relative !important;
    padding-bottom:60px !important;
  }
}

/* PPリンク共通スタイル */
footer a.pp-link{
  text-decoration:none !important;
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  color:inherit !important;
  font-size:12px;
  line-height:1;
  opacity:.85;
}
footer a.pp-link:hover{
  opacity:1;
  text-decoration:underline;
}

/* PCのPPリンク位置（右下固定） */
@media (min-width:783px){
  footer{
    position:relative;
  }
  .pp-pc{
    display:block !important;
    position:absolute !important;
    right:clamp(8px,2vw,16px) !important;
    bottom:14px !important;
    z-index:5;
  }
  .pp-sp{
    display:none !important;
  }
}

/* SPのPPリンク位置（SPフッター上に少し浮かせる） */
@media (max-width:782px){
  .pp-sp{
    display:block !important;
    position:absolute !important;
    right:clamp(8px,2vw,16px) !important;
    bottom:50px !important;
    font-size:10.5px !important;
    text-align:right !important;
    z-index:5;
  }
}

/* reCAPTCHAは説明済み前提で隠す（UIノイズを減らす） */
.grecaptcha-badge{
  visibility:hidden;
}


/* =========================================================
 * 03章. アンカー・目次補助 [ver2.00]
 * ---------------------------------------------------------
 * - 管理バー有無で scroll-padding-top を可変
 * - 見出しやTOC用IDへのジャンプ位置を調整
 * - アンカー着地時の一瞬ハイライト（anchor-flash クラス）
 * =======================================================*/
:root{ --anchor-offset:24px; }
body.admin-bar{ --anchor-offset:104px; }
html{ scroll-padding-top:var(--anchor-offset); }

.entry-content :is(h1,h2,h3,h4,h5,h6)[id],
[id^="toc-"]{
  scroll-margin-top:var(--anchor-offset);
}

/* 目次の後に置く「戻る」用ショートコード用 */
.toc-after{
  text-align:right !important;
  margin:.5em 0 0;
}
.toc-after a{ display:inline-block; }

.back-to-toc,
.shortcode-back-to-toc,
.wp-block-shortcode .back-to-toc{
  text-align:right !important;
  font-size:.7em !important;
  line-height:1.6;
  margin-top:1.5em;
  margin-bottom:.5em;
}
.back-to-toc a{
  display:inline-block;
  text-decoration:none;
  color:inherit;
  opacity:.8;
  transition:opacity .2s;
}
.back-to-toc a:hover{ opacity:1; }

/* JS から付与されるフラッシュ用クラス */
.anchor-flash{
  animation: anchorFlash 1.4s ease-out 1;
}
@keyframes anchorFlash{
  0%{ background:rgba(255,255,0,.25); }
  100%{ background:transparent; }
}


/* =========================================================
 * 04章. カバー（ヒーロー）を画面幅いっぱいにする＋中身の見た目 [ver2.00]
 * ---------------------------------------------------------
 * - #content-top-in 直下の cover ブロックだけを「画面幅100vw」に拡張
 * - 文字は中央寄せ・背景暗幕で読みやすく
 * =======================================================*/
/* 中身の見た目はこれまで通り */
.hero .hero-copy{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  padding:0 clamp(16px,3vw,40px);
}
.hero .wp-block-cover__background{
  background:#000 !important;
  opacity:.35 !important;
}
.hero .hero-kicker{
  margin:0 0 .2em;
  font-size:clamp(12px,1.6vw,14px);
  letter-spacing:.08em;
  opacity:.9;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}
.hero .hero-heading{
  margin:.1em 0 .4em;
  font-size:clamp(28px,5vw,48px);
  font-weight:700;
  line-height:1.15;
  color:#fff;
  letter-spacing:.02em;
  text-shadow:0 2px 8px rgba(0,0,0,.45);
}
.hero .hero-sub{
  display:inline-block;
  margin:0;
  padding:.45em .8em;
  border-radius:.5em;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:clamp(14px,2.2vw,18px);
  font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* content-topに置いたカバーだけ画面幅に広げる */
#content-top-in .hero.wp-block-cover {
  width:100vw !important;
  max-width:100vw !important;
  margin-left:50% !important;
  transform:translateX(-50%) !important;
  border-radius:0 !important;
}

/* 背景画像・動画も全体を埋める */
#content-top-in .hero.wp-block-cover > img.wp-block-cover__image-background,
#content-top-in .hero.wp-block-cover > video.wp-block-cover__video-background {
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}


/* =========================================================
 * 05章. Twitterウィジェット一式（PCサイドバーを1.64相当に）[ver2.00]
 * ---------------------------------------------------------
 * - PCサイドバーでは中スクロール＋“箱”デザイン
 * - SPではサイドバー全体を縦スクロールに統一
 * - 記事末やフッターの旧ウィジェットを状況に応じて非表示
 * - 丸いXボタン等の旧UIは全て殺す
 * =======================================================*/
.twitter-embeds{
  position: relative;
  --gap: 0px;
  --rule-color: rgba(100, 255, 100, .32);
  --rule-thick: 24px;
  --rule-offset: 6px;
  --rule-inset: -10px;
  --mask-h: 40px;
  --fade-knee: 10px;
  --solid-band: 10px;
  --radius: 14px;
}

[id^="widget-twitter-sidebar"]{
  display: block;
  min-height: 520px;
  height: auto;
  overflow: visible;
  background: transparent;
}

/* PCサイドバー内の枠まるごと */
@media (min-width: 1201px){
  .sidebar{
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  [id^="widget-twitter-sidebar"]{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    min-height:0;
  }
  [id^="widget-twitter-sidebar"] .tweet-scroll{
    flex:1 1 auto;
    min-height:0;
    height:auto !important;
    max-height:none !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable both-edges;
    box-sizing:border-box;
    margin:0 !important;
    padding:0 6px 0 0 !important;
    border-radius:14px;
    background:#fff;
    box-shadow:inset 0 0 0 1px #e9edf3;
  }
  /* ←1.64の“見やすい箱” */
  .sidebar .widget:has([id^="widget-twitter-sidebar"]) {
    background: #f5f7fb;
    border: 1px solid #d2d8e2;
    border-radius: 18px;
    padding: 10px 10px 14px;
    box-shadow: 0 1px 12px rgba(0,0,0,.03);
    overflow: visible !important;
  }
}

/* SPサイドバーは全体スクロール */
@media (max-width: 1200px){
  #sidebar-menu-content,
  .sidebar-menu-content,
  #slide-in-sidebar,
  #sidebar{
    height:100vh;
    max-height:100vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
  }
  [id^="widget-twitter-sidebar"],
  [id^="widget-twitter-sidebar"] .tweet-scroll{
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    -webkit-overflow-scrolling:auto !important;
  }
}

/* iframeは横いっぱい */
[id^="widget-twitter-sidebar"] iframe[id^="twitter-widget-"]{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  box-sizing:border-box !important;
  background-color:transparent !important;
  pointer-events:auto;
}

/* 1ツイートぶんの箱 */
[id^="widget-twitter-sidebar"] .twitter-embeds{
  line-height:0 !important;
  margin:0 !important;
  padding:0 !important;
}
[id^="widget-twitter-sidebar"] .twitter-embeds *{
  line-height:normal;
}
[id^="widget-twitter-sidebar"] .twitter-embeds > div{
  margin: 0 !important;
  display: block;
}
[id^="widget-twitter-sidebar"] .twitter-embeds blockquote.twitter-tweet{
  margin:0 !important;
}
[id^="widget-twitter-sidebar"] .twitter-embeds .tweet-mask{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:#fff;
  margin:0 0 var(--gap) !important;
  border:0 !important;
}
[id^="widget-twitter-sidebar"] .twitter-embeds .tweet-mask + .tweet-mask{
  margin-top:14px !important;
}
[id^="widget-twitter-sidebar"] .twitter-embeds .tweet-mask:last-child{
  margin-bottom:0 !important;
}
/* 緑の仕切り線 */
[id^="widget-twitter-sidebar"] .twitter-embeds .tweet-mask::before{
  content:"";
  position:absolute;
  left:var(--rule-inset);
  right:var(--rule-inset);
  bottom:var(--rule-offset);
  height:var(--rule-thick);
  background:var(--rule-color);
  border-radius:999px;
  z-index:3;
  pointer-events:none;
}
/* 下端の白マスク（最後の方をフェードアウト） */
[id^="widget-twitter-sidebar"] .twitter-embeds .tweet-mask::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:var(--mask-h);
  background:
    linear-gradient(to bottom, rgba(255,255,255,0) 0, rgba(255,255,255,.98) var(--fade-knee), #fff var(--fade-knee), #fff 100%),
    linear-gradient(#fff,#fff);
  background-size:100% 100%,100% var(--solid-band);
  background-position:bottom,bottom;
  background-repeat:no-repeat;
  pointer-events:none;
  z-index:2;
}

/* ピン留めラベル（最上段だけ） */
.pinned-label{
  position:absolute;
  top:6px;
  left:12px;
  display:inline-flex;
  gap:4px;
  font:500 11px/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:#536471;
  background:rgba(255,255,255,.85);
  border-radius:999px;
  padding:2px 6px 2px 5px;
  z-index:10;
  box-shadow:0 0 1px rgba(0,0,0,.1);
  pointer-events:none;
}
.pinned-label::before{
  content:"📌";
  font-size:12px;
  opacity:.8;
}
[id^="widget-twitter-sidebar"] .twitter-embeds .tweet-mask:first-child{
  position:relative;
  padding-top:20px;
}

/* 記事末サイドバーだけ消すやつ（1.65と同じ） */
@media (max-width:1200px){
  body.single .wu-tail-sidebar #widget-twitter-sidebar{
    display:none !important;
  }
}

/* 投稿ページのSPフッターに出るやつも消す */
@media (max-width: 834px){
  body.single footer #widget-twitter-sidebar,
  body.single footer .widget_twitterf,
  body.single footer #custom_html-9,
  body.single footer .twitterWU,
  body.single footer .twitterWU-label {
    display: none !important;
  }
}

/* PCのフッターにある古いやつだけ消す */
@media screen and (min-width: 834px) {
  body.single .footer .widget_twitterf,
  body.single #footer .widget_twitterf {
    display: none !important;
  }
}
@media (min-width: 835px) {
  body.single #sidebar #custom_html-9 {
    display: none !important;
  }
}

/* 投稿ページでもモバイルヘッダーボタンを必ず出す */
@media (max-width: 1023px){
  body.single .mobile-header-menu-buttons{
    display:flex !important;
  }
  body.single .mobile-header-menu-buttons .menu-button,
  body.single .mobile-header-menu-buttons .sidebar-button{
    display:flex !important;
  }
}

/* 不要な昔の丸いXボタン類は全部隠す */
.twitter-fab,
.fab-x-icon,
.wu-twitter-fab,
.twitterWU,
.twitterWU-label{
  display:none !important;
}


/* =========================================================
 * 06章. 投稿下レイアウト・column対応 [ver2.00]
 * ---------------------------------------------------------
 * - .wu-tail-two-col / .wu-tail-2col で本文＋サイドバーを2カラム化
 * - columnカテゴリの単一投稿だけ特殊な並びに
 * =======================================================*/
@media (min-width: 1024px){
  .wu-tail-two-col{
    display:flex;
    gap:24px;
    align-items:flex-start;
  }
  .wu-tail-two-col .wu-tail-main{
    flex:1 1 auto;
    min-width:0;
  }
  .wu-tail-two-col .wu-tail-sidebar{
    flex:0 0 320px;
    max-width:340px;
  }
}

@media (min-width: 1201px){
  body.single.category-column .content-in{
    display:block !important;
  }
  body.single.category-column main.main{
    width:auto !important;
    margin:10px 0 !important;
  }
  body.single.category-column .wu-tail-2col{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:24px;
    align-items:flex-start;
    margin-top:12px;
  }
  body.single.category-column .wu-tail-2col .sidebar,
  body.single.category-column .wu-tail-2col #sidebar{
    display:block !important;
    visibility:visible !important;
    max-width:340px;
  }
}

@media (min-width: 1201px){
  .wu-tail-2col{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:24px;
    align-items:start;
    margin-top:12px;
  }
  .wu-tail-2col .wu-tail-main{ min-width:0; }
  .wu-tail-2col .wu-tail-sidebar{
    min-width:0;
    max-width:340px;
  }
  .wu-tail-sidebar iframe[id^="twitter-widget-"]{
    width:100% !important;
  }
}

@media (max-width: 834px){
  .wu-tail-2col{
    grid-template-columns:1fr;
  }
}

/* 埋め込みiframeは中央寄せ */
.entry-content iframe,
.article iframe{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

/* Gutenbergの embed ラッパーも中央揃え */
.entry-content .wp-block-embed__wrapper{
  text-align:center;
}

/* サイドバー内のTwitterが空でも最低高さを確保（デザイン崩れ防止） */
.wu-tail-sidebar #widget-twitter-sidebar:empty{
  display:block !important;
  min-height:240px;
}


/* =========================================================
 * 07章. トップページカバー高さ [ver2.00]
 * ---------------------------------------------------------
 * - PCとSPでトップのカバー高さを固定的に確保
 * ======================================================= */
@media screen and (min-width: 1024px) {
  #content-top .wp-block-cover {
    min-height: 360px !important;
  }
}
@media screen and (max-width: 767px) {
  #content-top .wp-block-cover {
    min-height: 135px !important;
  }
}


/* =========================================================
 * 08章. SP：3カラムを横にする（Cocoonの縦並びを上書き）[ver2.00]
 * ---------------------------------------------------------
 * - 3カラム系を横スクロール前提のレイアウトに（非YouTube共通）
 * - .wu-has-youtube-3col 以外を対象
 * =======================================================*/
@media (max-width: 834px) {
  .entry-content .wp-block-columns.columns-3,
  .entry-content .wp-block-columns.has-3-columns,
  .entry-content .wp-block-columns.is-layout-flex,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap,
  .entry-content .column-wrap.column-3,
  .container .wp-block-columns.columns-3,
  .container .wp-block-columns.has-3-columns,
  .container .wp-block-cocoon-blocks-column-3.column-wrap,
  .container .column-wrap.column-3 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px;
  }

  /* YouTubeじゃないやつは隠しつつ左右に余白 */
  .entry-content .wp-block-columns.columns-3:not(.wu-has-youtube-3col),
  .entry-content .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col),
  .entry-content .wp-block-columns.is-layout-flex:not(.wu-has-youtube-3col),
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap:not(.wu-has-youtube-3col),
  .entry-content .column-wrap.column-3:not(.wu-has-youtube-3col),
  .container .wp-block-columns.columns-3:not(.wu-has-youtube-3col),
  .container .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col),
  .container .wp-block-columns.is-layout-flex:not(.wu-has-youtube-3col),
  .container .wp-block-cocoon-blocks-column-3.column-wrap:not(.wu-has-youtube-3col),
  .container .column-wrap.column-3:not(.wu-has-youtube-3col) {
    overflow-x: hidden !important;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 非YouTubeは1/3幅 */
  .entry-content .wp-block-columns.columns-3:not(.wu-has-youtube-3col) > .wp-block-column,
  .entry-content .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col) > .wp-block-column,
  .entry-content .wp-block-columns.is-layout-flex:not(.wu-has-youtube-3col) > .wp-block-column,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap:not(.wu-has-youtube-3col) > *,
  .entry-content .column-wrap.column-3:not(.wu-has-youtube-3col) > *,
  .container .wp-block-columns.columns-3:not(.wu-has-youtube-3col) > .wp-block-column,
  .container .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col) > .wp-block-column,
  .container .wp-block-cocoon-blocks-column-3.column-wrap:not(.wu-has-youtube-3col) > *,
  .container .column-wrap.column-3:not(.wu-has-youtube-3col) > * {
    flex: 0 0 calc(33.333% - 6px) !important;
    max-width: calc(33.333% - 6px) !important;
    box-sizing: border-box;
  }
}


/* =========================================================
 * 09章. SP：YouTube入り3カラムを40%＋横スクロールに [ver2.00]
 * ---------------------------------------------------------
 * - .wu-has-youtube-3col を横スクロール＋幅40%に
 * - プレビュー高さを統一（160px）
 * - 遅延読み込み用のサムネShellにも対応
 * =======================================================*/
@media (max-width: 834px) {
  .wu-has-youtube-3col {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .wu-has-youtube-3col > * {
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }
  /* テーマ側の再生ボタンは隠す */
  .entry-content .wu-has-youtube-3col .video-play,
  .entry-content .wu-has-youtube-3col .video-play-button,
  .entry-content .wu-has-youtube-3col .cocoon-video-play {
    display: none !important;
  }
  /* プレビューを低くする */
  .entry-content .wu-has-youtube-3col figure.wp-block-embed.is-type-video,
  .entry-content .wu-has-youtube-3col .wp-block-embed__wrapper {
    max-height: 160px;
    overflow: hidden;
    border-radius: 10px;
  }
  .entry-content .wu-has-youtube-3col iframe[src*="youtube.com"],
  .entry-content .wu-has-youtube-3col iframe[src*="youtu.be"] {
    width: 100% !important;
    height: 160px !important;
  }
  /* 遅延サムネ版 */
  .entry-content .wu-youtube-shell {
    position: relative;
    width: 100%;
    max-height: 160px;
    border-radius: 10px;
    overflow: hidden;
    background: #eee;
    cursor: pointer;
  }
  .entry-content .wu-youtube-thumb {
    width: 100%;
    padding-top: 56.25%;
    background-size: cover;
    background-position: center;
  }
  .entry-content .wu-youtube-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 54px;
    height: 38px;
    background: rgba(0,0,0,.45);
    border: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
  }
  .entry-content .wu-youtube-play-icon {
    width: 0;
    height: 0;
    border-left: 14px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
  }
  .entry-content .wu-has-youtube-3col .wu-youtube-playing {
    max-height: none !important;
    overflow: visible !important;
  }
  .entry-content .wu-has-youtube-3col .wu-youtube-playing > iframe.wu-youtube-active {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    display: block;
  }
}


/* =========================================================
 * 10章. SP：Cocoonの .fz-XXpx クラス縮小 [ver2.00]
 * ---------------------------------------------------------
 * - Cocoonの文字サイズユーティリティをSPだけ一段階小さく
 * =======================================================*/
@media (max-width: 834px) {
  .entry-content .fz-12px { font-size: 8px !important; }
  .entry-content .fz-14px { font-size: 9px !important; }
  .entry-content .fz-16px { font-size: 10.5px !important; }
  .entry-content .fz-18px { font-size: 12px !important; }
  .entry-content .fz-20px { font-size: 13.5px !important; }
  .entry-content .fz-22px { font-size: 14.5px !important; }
  .entry-content .fz-24px { font-size: 16px !important; }
  .entry-content .fz-28px { font-size: 18.5px !important; }
  .entry-content .fz-32px { font-size: 21px !important; }
  .entry-content .fz-36px { font-size: 24px !important; }
  .entry-content .fz-40px { font-size: 27px !important; }
  .entry-content .fz-44px { font-size: 29px !important; }
  .entry-content .fz-48px { font-size: 32px !important; }
}


/* =========================================================
 * 11章. SP：行を守る/戻す [ver2.00]
 * ---------------------------------------------------------
 * - .wu-nowrap-sp: 行を保ちつつ、長ければ「…」で省略
 * - .wu-wrap-sp : 強制改行解除
 * =======================================================*/
@media (max-width: 834px) {
  .entry-content .wu-nowrap-sp {
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .entry-content .wu-wrap-sp {
    white-space: normal !important;
  }
}


/* =========================================================
 * 12章. SP：Cocoonの装飾を背面に [ver2.00]
 * ---------------------------------------------------------
 * - 装飾スタイル(is-style-*)の ::before を背面へ移動
 * - 文字がアイコンより前面に来るようZ軸調整
 * =======================================================*/
@media (max-width: 834px) {
  .entry-content p[class*="is-style-"],
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3 p[class*="is-style-"],
  .entry-content .wu-has-youtube-3col p[class*="is-style-"] {
    position: relative;
    z-index: 1;
  }
  .entry-content p[class*="is-style-"]::before,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3 p[class*="is-style-"]::before,
  .entry-content .wu-has-youtube-3col p[class*="is-style-"]::before {
    z-index: 0 !important;
  }
  .entry-content p[class*="is-style-"] > *,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3 p[class*="is-style-"] > *,
  .entry-content .wu-has-youtube-3col p[class*="is-style-"] > * {
    position: relative;
    z-index: 2;
  }
}


/* =========================================================
 * 13章. おすすめ動画(three-wide)の高さそろえ
 *       ＋ PC右カードの床を 10px に戻す [ver2.00]
 * ---------------------------------------------------------
 * - SP/PCで three-wide カラム高さを揃えて整形
 * - PC右カラムの micro-balloon を床から10pxに配置
 * =======================================================*/
@media (max-width: 834px) {
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide {
    display: flex !important;
    gap: 12px;
    align-items: stretch;
  }
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide > .wp-block-cocoon-blocks-column-left,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide > .wp-block-cocoon-blocks-column-center,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide > .wp-block-cocoon-blocks-column-right {
    display: flex !important;
    flex-direction: column;
    position: relative;
    padding-bottom: 46px; /* SP側は1.73と同じあたりでキープ */
  }
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide > .wp-block-cocoon-blocks-column-left  > p.has-box-style,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide > .wp-block-cocoon-blocks-column-center > p.has-box-style,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide > .wp-block-cocoon-blocks-column-right > p.has-box-style {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.35 !important;
    padding: 12px 12px 14px !important;
    margin: 0 !important;
    min-height: 96px !important;
    box-sizing: border-box;
  }
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide .micro-balloon,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide .wp-block-cocoon-blocks-micro-balloon-2 {
    position: absolute !important;
    inset: auto 0 2px 0;
    margin: 0 auto !important;
    width: max-content;
    min-width: 140px;
    text-align: center;
  }
}
@media (min-width: 835px) {
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide {
    display: flex;
    align-items: stretch;
  }
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide > .wp-block-cocoon-blocks-column-left,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide > .wp-block-cocoon-blocks-column-center,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide > .wp-block-cocoon-blocks-column-right {
    display: flex;
    flex-direction: column;
  }
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide > .wp-block-cocoon-blocks-column-left  > p.has-box-style,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide > .wp-block-cocoon-blocks-column-center > p.has-box-style,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide > .wp-block-cocoon-blocks-column-right > p.has-box-style {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 108px !important;
    box-sizing: border-box;
  }
  /* ←ここを1.73と同じ10pxに戻した */
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide > .wp-block-cocoon-blocks-column-right {
    position: relative;
    padding-bottom: 10px;
    overflow: visible !important;
  }
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide
    > .wp-block-cocoon-blocks-column-right .micro-balloon,
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide
    > .wp-block-cocoon-blocks-column-right .wp-block-cocoon-blocks-micro-balloon-2 {
    position: absolute !important;
    inset: auto 0 0 0; /* 10pxに合わせて底にくっつける */
    margin: 0 auto !important;
    width: max-content;
    min-width: 140px;
    text-align: center;
    z-index: 20;
  }
  .entry-content .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide
    > .wp-block-cocoon-blocks-column-right > p.has-box-style {
    position: relative;
    z-index: 1;
  }
}
@media (max-width: 834px) {
  .entry-content .three-wide .wp-block-cocoon-blocks-column-right p.wu-right-card {
    display: block !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    text-align: center !important;
  }
  .entry-content .three-wide .wp-block-cocoon-blocks-column-right p.wu-right-card .wu-right-text {
    display: block !important;
    white-space: normal !important;
  }
  .entry-content .three-wide .wp-block-cocoon-blocks-column-right p.wu-right-card .wu-sp-break {
    display: block !important;
    margin-top: 0 !important;
  }
  .entry-content .three-wide .wp-block-cocoon-blocks-column-right p.wu-right-card wbr,
  .entry-content .three-wide .wp-block-cocoon-blocks-column-right p.wu-right-card wbr.wu-sp-break {
    display: none !important;
    content: none !important;
  }
}


/* =========================================================
 * 14章. SP：2カラムを横並び＋上下そろえ
 *       ＋ボックス中央寄せ ＋ アイコンはやや薄くかぶせる [ver2.00]
 * ---------------------------------------------------------
 * - 2カラム系をSPでは横並び＋高さ揃え
 * - has-box-style の中身を中央寄せ
 * - アイコン装飾は左上に薄くオーバーレイ
 * =======================================================*/
@media (max-width: 834px) {

  /* 2カラムを横にする */
  .entry-content .wp-block-columns.columns-2,
  .entry-content .wp-block-columns.has-2-columns,
  .entry-content .wp-block-cocoon-blocks-column-2.column-wrap,
  .entry-content .column-wrap.column-2,
  .container .wp-block-columns.columns-2,
  .container .wp-block-columns.has-2-columns,
  .container .wp-block-cocoon-blocks-column-2.column-wrap,
  .container .column-wrap.column-2 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    padding-inline: 12px;
    overflow-x: hidden !important;
    align-items: stretch !important;
  }

  /* 各カラムを縦に伸ばす */
  .entry-content .column-wrap.column-2 > *,
  .entry-content .wp-block-columns.columns-2 > .wp-block-column,
  .entry-content .wp-block-columns.has-2-columns > .wp-block-column,
  .container .column-wrap.column-2 > *,
  .container .wp-block-columns.columns-2 > .wp-block-column,
  .container .wp-block-columns.has-2-columns > .wp-block-column {
    flex: 0 0 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* 上端をそろえる */
  .entry-content .column-wrap.column-2 > * > :first-child,
  .entry-content .wp-block-columns.columns-2 > .wp-block-column > :first-child,
  .entry-content .wp-block-columns.has-2-columns > .wp-block-column > :first-child,
  .container .column-wrap.column-2 > * > :first-child,
  .container .wp-block-columns.columns-2 > .wp-block-column > :first-child,
  .container .wp-block-columns.has-2-columns > .wp-block-column > :first-child {
    margin-top: 0 !important;
  }

  /* ボックスを中央寄せ＋高さ埋めに */
  .entry-content .column-wrap.column-2 > * > .has-box-style,
  .entry-content .wp-block-columns.columns-2 > .wp-block-column > .has-box-style,
  .entry-content .wp-block-columns.has-2-columns > .wp-block-column > .has-box-style,
  .container .column-wrap.column-2 > * > .has-box-style,
  .container .wp-block-columns.columns-2 > .wp-block-column > .has-box-style,
  .container .wp-block-columns.has-2-columns > .wp-block-column > .has-box-style {
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    box-sizing: border-box;
    padding: 16px 14px !important;
    text-align: center !important;
  }

  /* 中身を前面に */
  .entry-content .column-wrap.column-2 > * > .has-box-style > *,
  .entry-content .wp-block-columns.columns-2 > .wp-block-column > .has-box-style > *,
  .entry-content .wp-block-columns.has-2-columns > .wp-block-column > .has-box-style > *,
  .container .column-wrap.column-2 > * > .has-box-style > *,
  .container .wp-block-columns.columns-2 > .wp-block-column > .has-box-style > *,
  .container .wp-block-columns.has-2-columns > .wp-block-column > .has-box-style > * {
    position: relative !important;
    z-index: 2 !important;
  }

  /* アイコンを左上にかぶせる＋ちょい薄く・彩度落とし */
  .entry-content .column-wrap.column-2 > * > .has-box-style[class*="is-style-"]::before,
  .entry-content .wp-block-columns.columns-2 > .wp-block-column > .has-box-style[class*="is-style-"]::before,
  .entry-content .wp-block-columns.has-2-columns > .wp-block-column > .has-box-style[class*="is-style-"]::before,
  .container .column-wrap.column-2 > * > .has-box-style[class*="is-style-"]::before,
  .container .wp-block-columns.columns-2 > .wp-block-column > .has-box-style[class*="is-style-"]::before,
  .container .wp-block-columns.has-2-columns > .wp-block-column > .has-box-style[class*="is-style-"]::before {
    position: absolute !important;
    left: 10px !important;
    top: 10px !important;
    margin: 0 !important;
    opacity: .48 !important;          /* ←前よりちょい濃い */
    filter: grayscale(30%) !important;
    z-index: 0 !important;
    pointer-events: none;
  }

  /* 子が2つ以上あるときだけ最後を下に押す */
  .entry-content .column-wrap.column-2 > *:has(> :nth-child(2)) > :last-child,
  .entry-content .wp-block-columns.columns-2 > .wp-block-column:has(> :nth-child(2)) > :last-child,
  .entry-content .wp-block-columns.has-2-columns > .wp-block-column:has(> :nth-child(2)) > :last-child,
  .container .column-wrap.column-2 > *:has(> :nth-child(2)) > :last-child,
  .container .wp-block-columns.columns-2 > .wp-block-column:has(> :nth-child(2)) > :last-child,
  .container .wp-block-columns.has-2-columns > .wp-block-column:has(> :nth-child(2)) > :last-child {
    margin-top: auto;
  }

  /* group 保険 */
  .entry-content .wp-block-columns.columns-2 > .wp-block-column > .wp-block-group:first-child,
  .container .wp-block-columns.columns-2 > .wp-block-column > .wp-block-group:first-child {
    margin-top: 0 !important;
  }
}


/* =========================================================
 * 15章. SP：非YouTube3カラムの底そろえ
 *       ＋アイコンを後ろに・やや薄くする [ver2.00]
 * ---------------------------------------------------------
 * - .wu-3col-escape 以外の3カラムをSPで高さそろえ
 * - has-box-style を中央寄せ／アイコンは後ろへ
 * =======================================================*/
@media (max-width: 834px){
  /* 親3カラム（escape は除外） */
  .entry-content .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape),
  .entry-content .wp-block-columns.columns-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape),
  .entry-content .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape),
  .container .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape),
  .container .wp-block-columns.columns-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape),
  .container .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px;
    align-items: stretch !important;
    overflow-x: hidden !important;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* 子（escape は除外） */
  .entry-content .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > *,
  .entry-content .wp-block-columns.columns-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column,
  .entry-content .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column,
  .container .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > *,
  .container .wp-block-columns.columns-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column,
  .container .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column {
    flex: 0 0 calc(33.333% - 6px) !important;
    max-width: calc(33.333% - 6px) !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* .has-box-style の中央寄せ＆高さ埋め（escape は除外） */
  .entry-content .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > * > .has-box-style,
  .entry-content .wp-block-columns.columns-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style,
  .entry-content .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style,
  .container .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > * > .has-box-style,
  .container .wp-block-columns.columns-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style,
  .container .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style {
    position: relative;
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 104px;
    box-sizing: border-box;
    text-align: center !important;
    padding: 14px 12px;
  }

  /* 中の文字を前面に（escape は除外） */
  .entry-content .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > * > .has-box-style > *,
  .entry-content .wp-block-columns.columns-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style > *,
  .entry-content .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style > *,
  .container .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > * > .has-box-style > *,
  .container .wp-block-columns.columns-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style > *,
  .container .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style > * {
    position: relative !important;
    z-index: 2 !important;
  }

  /* クリップ/メモ等の ::before を後ろへ＆減彩（escape は除外） */
  .entry-content .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > * > .has-box-style[class*="is-style-"]::before,
  .entry-content .wp-block-columns.columns-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style[class*="is-style-"]::before,
  .entry-content .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style[class*="is-style-"]::before,
  .container .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > * > .has-box-style[class*="is-style-"]::before,
  .container .wp-block-columns.columns-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style[class*="is-style-"]::before,
  .container .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style[class*="is-style-"]::before {
    position: absolute !important;
    left: 10px !important;
    top: 10px !important;
    margin: 0 !important;
    opacity: .48 !important;
    filter: grayscale(30%) !important;
    z-index: 0 !important;
    pointer-events: none;
  }

  /* 中のリンクを横幅100%（escape は除外） */
  .entry-content .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > * > .has-box-style > a,
  .entry-content .wp-block-columns.columns-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style > a,
  .entry-content .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style > a,
  .container .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > * > .has-box-style > a,
  .container .wp-block-columns.columns-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style > a,
  .container .wp-block-columns.has-3-columns:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-box-style > a {
    display: inline-block;
    width: 100%;
  }

  /* テキスト中央寄せ（escape は除外） */
  .entry-content .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > * > .has-text-align-center,
  .entry-content .wp-block-columns.columns-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > .wp-block-column > .has-text-align-center,
  .container .column-wrap.column-3:not(.wu-has-youtube-3col):not(.three-wide):not(.wu-3col-escape) > * > .has-text-align-center {
    text-align: center !important;
  }
}


/* =========================================================
 * 16章. 共通：“ここは折るな” [ver2.00]
 * ---------------------------------------------------------
 * - PC/タブレットでも共通のノーブレーク指定
 * - SP幅が極端に狭いときのために軽く縮小
 * =======================================================*/
.entry-content .wu-nowrap {
  white-space: nowrap !important;
}
@media (max-width: 480px) {
  .entry-content .wu-nowrap {
    font-size: 0.95em;
  }
}


/* =========================================================
 * 17章. SPだけ投稿末尾のShareを横一列にする（PCは触らない）[ver2.00]
 * ---------------------------------------------------------
 * - SNSボタンを1行に並べて均等割り
 * =======================================================*/
@media (max-width: 834px){
  .sns-share-buttons.sns-buttons{
    display:flex !important;
    gap:10px !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    align-items:stretch !important;
  }
  .sns-share-buttons.sns-buttons .sns-button{
    flex:1 1 0 !important;
    width:auto !important;
    text-align:center !important;
  }
  .sns-share-buttons.sns-buttons .sns-button .button-caption{
    display:block;
  }
}


/* =========================================================
 * 18章. 改行ユーティリティ（PCは無視／SPのみ有効）[ver2.00]
 * ---------------------------------------------------------
 * - .wu-softbr: SP時のみ任意位置で改行
 * - .wu-inline-list: 名簿のインライン表記を崩れにくく
 * =======================================================*/

/* --- 任意改行ポイント（共通）--- */
.entry-content .wu-softbr {
  display: inline;
  line-height: 0;
  font-size: 0;
}
.entry-content .wu-softbr::before {
  content: ""; /* PCでは出さない */
}
@media (max-width: 834px) {
  .entry-content .wu-softbr {
    line-height: inherit;
    font-size: inherit;
  }
  .entry-content .wu-softbr::before {
    content: "\A";
    white-space: pre;
  }
}

/* --- インライン名簿 --- */
/* 日本語を単語単位で折り返す（中黒などを特別扱いしない） */
.entry-content .wu-inline-list {
  word-break: keep-all;
  overflow-wrap: normal;
  white-space: normal;
  line-height: inherit;
  margin: 0;
  padding: 0;
}

/* 名前ブロック間の <span class="wu-sep"> だけで改行を許可 */
.entry-content .wu-inline-list .wu-sep {
  display: inline-block;   /* このブロックごとでのみ折返し */
  white-space: nowrap;     /* 区切り文字自体では折らない */
}


/* =========================================================
 * 19章. SP：ボタンブロック(.wp-block-button__link)の文字サイズ調整 [ver2.00]
 * ---------------------------------------------------------
 * - Gutenberg標準ボタンが大きすぎる問題をSPだけ軽く圧縮
 * =======================================================*/
@media (max-width: 834px) {

  /* Gutenberg標準ボタンのベースを小さく */
  .entry-content .wp-block-button__link,
  .entry-content a.wp-block-button__link {
    font-size: 14px !important;     /* ←20px → 14pxに縮小 */
    line-height: 1.3 !important;
    padding: 8px 18px !important;   /* ←余白も縮小 */
    font-weight: 500 !important;
    border-radius: 100px !important;
  }

  /* 改行用の .wu-softbr もここで抑制 */
  .entry-content .wp-block-button__link .wu-softbr {
    display: inline !important;
  }

  /* 黄色・黒などカラーバリエーション全部対象 */
  .entry-content .wp-block-button__link.has-yellow-background-color,
  .entry-content .wp-block-button__link.has-black-background-color,
  .entry-content .wp-block-button__link.has-blue-background-color {
    font-size: 14px !important;
    line-height: 1.3 !important;
  }
}


/* =========================================================
 * 20章. SP：FAQラベルをほどよく左へ・入れ子感を維持 [ver2.00]
 * ---------------------------------------------------------
 * - Q / A ラベルを少し左へ
 * - 本文も軽く左に寄せて「段差」を残す
 * =======================================================*/
@media (max-width: 834px) {
  /* ラベル(Q/A)をやや左へ、でも極端に出さない */
  .entry-content dl.faq .faq-item-label {
    margin-left: -0.8em !important; /* ←-1.2emより控えめ */
  }

  /* 本文は自然に詰めて、段差を軽く残す */
  .entry-content dl.faq .faq-question-content.faq-item-content,
  .entry-content dl.faq .faq-answer-content.faq-item-content {
    margin-left: -0.4em !important; /* ←入れ子っぽさを維持 */
  }
}


/* =========================================================
 * 21章. SP：Cocoonアイコン付きリストのインデント最適化 [ver2.00]
 * ---------------------------------------------------------
 * - ハート／チェック／鉛筆／スター系のULリストを詰める
 * =======================================================*/
@media (max-width: 834px) {
  /* 対象：ハート／チェック／鉛筆／スター */
  .entry-content ul.is-style-icon-list-heart,
  .entry-content ul.is-style-icon-list-check,
  .entry-content ul.is-style-icon-list-pencil,
  .entry-content ul.is-style-icon-list-star {
    margin-left: 0 !important;
    padding-left: 0 !important; /* UL自体の外側余白はゼロ */
  }

  .entry-content ul.is-style-icon-list-heart li,
  .entry-content ul.is-style-icon-list-check li,
  .entry-content ul.is-style-icon-list-pencil li,
  .entry-content ul.is-style-icon-list-star li {
    position: relative !important;
    list-style: none !important;
    margin-left: 0 !important;
    /* ←文字の開始位置を決める。数値で詰め具合を微調整 */
    padding-left: 1.4em !important;
    text-indent: 0 !important;
  }

  /* アイコン自体の位置も同じだけ詰める */
  .entry-content ul.is-style-icon-list-heart li::before,
  .entry-content ul.is-style-icon-list-check li::before,
  .entry-content ul.is-style-icon-list-pencil li::before,
  .entry-content ul.is-style-icon-list-star li::before {
    left: 0.05em !important;   /* 旧: 0.6em 前後 → グッと左へ */
    width: 1.1em !important;   /* アイコンの当たり判定幅 */
    text-align: center !important;
  }
}


/* =========================================================
 * 22章. この3カラムだけ横並び・高さ揃え等を完全無効化 [ver2.00]
 * ---------------------------------------------------------
 * - .wu-3col-escape を付けた3カラムは「テーマ標準の挙動に戻す」
 * =======================================================*/
@media (max-width: 834px){
  /* 親：flexを殺して通常フローに戻す（既存章より強いセレクタ） */
  .entry-content .wp-block-columns.wu-3col-escape,
  .entry-content .column-wrap.wu-3col-escape,
  .container     .wp-block-columns.wu-3col-escape,
  .container     .column-wrap.wu-3col-escape{
    display: block !important;
    flex-direction: initial !important;
    flex-wrap: initial !important;
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: visible !important;
  }

  /* 子：幅の固定・伸張を解除（33%指定などを打ち消す） */
  .entry-content .wp-block-columns.wu-3col-escape > .wp-block-column,
  .entry-content .column-wrap.wu-3col-escape > *,
  .container     .wp-block-columns.wu-3col-escape > .wp-block-column,
  .container     .column-wrap.wu-3col-escape > *{
    flex: initial !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
    align-items: initial !important;
  }

  /* .has-box-style の中央寄せ/高さ揃えも解除 */
  .entry-content .wu-3col-escape .has-box-style{
    display: block !important;
    min-height: initial !important;
    padding: initial !important;
    text-align: inherit !important;
    justify-content: initial !important;
  }

  /* テキスト中央寄せ・リンク幅100%の上書きも戻す */
  .entry-content .wu-3col-escape .has-text-align-center{ text-align: inherit !important; }
  .entry-content .wu-3col-escape .has-box-style > a{ display: inline !important; width: auto !important; }

  /* 12/14章のアイコン重ね/減彩もこのブロック内は解除 */
  .entry-content .wu-3col-escape p[class*="is-style-"]{ position: static !important; z-index: auto !important; }
  .entry-content .wu-3col-escape p[class*="is-style-"]::before{
    position: static !important; left:auto !important; top:auto !important;
    margin:0 !important; opacity:1 !important; filter:none !important; z-index:auto !important;
  }
}


/* =========================================================
 * 23章. 強調（strong/b）の視認性底上げ（全体）[ver2.00]
 * ---------------------------------------------------------
 * - 本文中の太字を「ほんの少しだけ」太く見せる
 * - 見出しやコード内はにじみ防止のため text-shadow を無効
 * =======================================================*/

/* 基本：全域で強調をわずかに太く見せる */
:where(body) :is(strong, b){
  font-weight: 600;  /* 既存のテーマ側を崩さず底上げ */
  text-shadow:
    -0.025em 0 currentColor,
     0.025em 0 currentColor;  /* 疑似太字（横にごく薄く膨らませる） */
}

/* さらに差が必要なときは下を有効化（にじみやすいので要確認）
:where(body) :is(strong, b){
  font-weight: 700;
  text-shadow:
    -0.04em 0 currentColor, 0.04em 0 currentColor,
     0 -0.015em currentColor, 0 0.015em currentColor;
}
*/

/* にじみ防止：見出し・コード・アイコン周りでは影を消す（太字自体は維持） */
:where(h1,h2,h3,h4,h5,h6) :is(strong, b),
:where(code, pre, kbd, samp) :is(strong, b),
:where(.wp-block-code, .wp-block-preformatted) :is(strong, b),
:where([class*="icon"], .dashicons, .fa, .material-icons, svg *) :is(strong, b){
  text-shadow: none !important;
}


/* =========================================================
 * 24章. SP：横並びブロックの“横方向の間隔”を 30% に圧縮 [ver2.00]
 * ---------------------------------------------------------
 * - Buttons / Row / Social / Nav 等の横gapを軽く圧縮
 * =======================================================*/
@media (max-width: 834px){
  /* Gutenberg横並びブロック（Row/Buttons/Social/Navなど） */
  .entry-content :where(.is-layout-flex,
                        .wp-block-buttons,
                        .wp-block-social-links,
                        .wp-block-navigation__container){
    column-gap: calc(var(--wp--style--block-gap, 1rem) * .2) !important;
    /* row-gap はそのまま */
  }
}


/* =========================================================
 * 25章. インフォバー（お知らせバー：wum-info-bar）[ver2.00]
 * ---------------------------------------------------------
 * - 画面上部 or 下部に固定表示する細い情報バー
 * - PCは上、SPは下に出し、bodyにパディングを付与
 * =======================================================*/

/* インフォバー共通デザイン */
.wum-info-bar {
  position: fixed;
  left: 0;
  width: 100%;
  padding: 6px 10px;
  text-align: center;
  font-size: 10px; /* 小さめ文字 */
  background: #fffae6;
  color: #333;
  border-bottom: 1px solid #ddd;
  z-index: 100; /* ヘッダーより手前に出さないように控えめに */
}

/* PC：上部固定＋上に少し余白 */
@media (min-width: 835px) {
  .wum-info-bar {
    top: 0;
    bottom: auto;
  }
  body {
    padding-top: 32px; /* バーの高さぶんだけ */
    padding-bottom: 0;
  }
}

/* SP：下部固定（ヘッダーと衝突させない） */
@media (max-width: 834px) {
  .wum-info-bar {
    top: auto;
    bottom: 0;
    border-top: 1px solid #ddd;
    border-bottom: none;
  }
  body {
    padding-top: 0;
    padding-bottom: 32px; /* 下のバー分だけ余白 */
  }
}


/* =========================================================
 * 26章. micro-balloon（three-wide以外）
 *  - 1行占有（shrink-to-fit）
 *  - Gutenbergの左右中央alignを尊重
 *  - 見出し・本文への“めり込み/侵食”を防止
 * [ver2.00]
 * =======================================================*/

/* デフォルト：中央・行占有・浮動回り込みを殺す */
.entry-content :is(.micro-balloon, .wp-block-cocoon-blocks-micro-balloon-2){
  display: block !important;              /* 1行占有 */
  width: max-content !important;          /* shrink-to-fit */
  max-width: 100% !important;
  margin: .35em auto .65em auto !important; /* 既定は中央配置＋上下余白で沈み防止 */
  float: none !important;
  clear: both !important;                 /* 直前floatからの食い込み防止 */
  position: relative !important;          /* レイヤ保険 */
  box-sizing: border-box !important;

  /* 旧“補遺”統合：わずかに前面＆下余白を確保 */
  z-index: 3 !important;
}

/* ─ 要素自身に align ─ */
.entry-content :is(
  .micro-balloon.alignleft,
  .wp-block-cocoon-blocks-micro-balloon-2.alignleft,
  .micro-balloon.has-text-align-left,
  .wp-block-cocoon-blocks-micro-balloon-2.has-text-align-left
){
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
.entry-content :is(
  .micro-balloon.alignright,
  .wp-block-cocoon-blocks-micro-balloon-2.alignright,
  .micro-balloon.has-text-align-right,
  .wp-block-cocoon-blocks-micro-balloon-2.has-text-align-right
){
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
}
.entry-content :is(
  .micro-balloon.aligncenter,
  .wp-block-cocoon-blocks-micro-balloon-2.aligncenter,
  .micro-balloon.has-text-align-center,
  .wp-block-cocoon-blocks-micro-balloon-2.has-text-align-center
){
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* ─ 親に align ─ */
.entry-content :is(.alignleft, .has-text-align-left)
  :is(.micro-balloon, .wp-block-cocoon-blocks-micro-balloon-2){
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
.entry-content :is(.alignright, .has-text-align-right)
  :is(.micro-balloon, .wp-block-cocoon-blocks-micro-balloon-2){
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: right !important;
}
.entry-content :is(.aligncenter, .has-text-align-center)
  :is(.micro-balloon, .wp-block-cocoon-blocks-micro-balloon-2){
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* 直後の見出し/本文が避けて段差になるのを防ぐ */
.entry-content :is(.micro-balloon, .wp-block-cocoon-blocks-micro-balloon-2)
  + :is(h2,h3,h4,h5,h6,p,ul,ol,dl,figure){
  clear: both !important;
  margin-top: .4em !important;
}

/* ── three-wide 配下では“伸び”を禁止して文字幅に合わせる ───────── */
/* ※ 親のalign-items:stretch を打ち消し、中央寄せの小バッジ化 */
.entry-content .three-wide :is(.micro-balloon, .wp-block-cocoon-blocks-micro-balloon-2){
  display: inline-block !important;       /* 行内ブロック＝shrink-to-fit */
  width: max-content !important;          /* 念押し */
  max-width: 100% !important;
  margin: 0 auto !important;              /* three-wide内は常に0 autoで中央 */
  clear: none !important;
  align-self: center !important;          /* ← stretch を無効化 */
  flex: 0 0 auto !important;              /* ← 横に伸長しない */
}

/* 内側の span が block 指定されているスキン対策（幅100%化の予防） */
.entry-content .three-wide
  :is(.micro-balloon, .wp-block-cocoon-blocks-micro-balloon-2)
  .micro-balloon-content{
  display: inline !important;
}


/* =========================================================
 * 27章. iPhone幅だけ three-wide 右バルーンを少し上に持ち上げる [ver2.00]
 * ---------------------------------------------------------
 * - 360〜430px 幅（iPhone想定）だけ右バルーンの inset を微調整
 * =======================================================*/
@media screen and (min-width: 360px) and (max-width: 430px) {
  .entry-content
    .wp-block-cocoon-blocks-column-3.column-wrap.column-3.three-wide
    > .wp-block-cocoon-blocks-column-right
    > .wp-block-cocoon-blocks-micro-balloon-2.aligncenter.micro-balloon.micro-bottom.micro-copy {
    /* 元は inset: auto 0 2px 0; → 下から 10px にして少し上へ */
    inset: auto 0 10px 0 !important;
  }
}


/* =========================================================
 * 28章. ノンラップ文字＆付箋・アイコンボックスのインデント調整 [ver2.00]
 * ---------------------------------------------------------
 * - .nowrap     : 改行させたくない短い語句に付与
 * - .indent-box : 付箋・アイコンボックス本体を少し右に寄せて、
 *                 箇条書き本文との位置をそろえる
 * =======================================================*/

/* インライン要素を改行させない */
.nowrap {
  white-space: nowrap;
}

/* 付箋・アイコンボックス本体を少し右に寄せる共通クラス */
.indent-box {
  margin-left: 2.0em !important;
}

/* スマホは少し控えめに */
@media (max-width: 599px) {
  .indent-box {
    margin-left: 1.4em !important;
  }
}




/* XX) Column一覧（page-id-1410） */

/* 1) 超狭い端末（〜359px）は1カラム */
@media (max-width: 359px) {
  .page-id-1410 .wp-block-post-template.is-layout-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    row-gap: 24px;
    column-gap: 10px;
  }

  .page-id-1410 .wp-block-post-template.is-layout-grid > li {
    margin: 0 !important;
  }
}

/* 2) それ以外のスマホ幅（360〜600px）は2カラム */
@media (min-width: 360px) and (max-width: 600px) {
  .page-id-1410 .wp-block-post-template.is-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 24px;
    column-gap: 10px;
  }

  .page-id-1410 .wp-block-post-template.is-layout-grid > li {
    margin: 0 !important;
  }
}

/* 3) 2カラム以上のとき、
      - タイトル：縦中央
      - 抜粋　　：縦中央 ＋ ちょっと上に寄せる
   （行ごとの高さは JS がそろえてくれている前提） */
@media (min-width: 360px) {
  /* タイトルをブロック内で縦中央 */
  .page-id-1410 .wp-block-post-template.is-layout-grid .wp-block-post-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* 抜粋テキストも縦中央だが、少し上に持ち上げる */
  .page-id-1410 .wp-block-post-template.is-layout-grid .wp-block-post-excerpt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: -0.9em;  /* ←「0.8行分くらい上」の調整用。多ければ -0.8em とかに */
  }
}


/* 4) Columnタイトルの改行を「それなりに賢く」する */
.page-id-1410 .wp-block-post-template.is-layout-grid .wp-block-post-title,
.page-id-1410 .wp-block-post-template.is-layout-grid .wp-block-post-title a {
  line-height: 1.4;
  /* Cocoon 側の break-all を打ち消して、英単語途中の分割を防ぐ */
  word-break: normal;
  overflow-wrap: anywhere;   /* それでも長すぎたら適当に折り返す */

  /* 2〜3行のバランスを整える（対応ブラウザでだけ効く） */
  text-wrap: balance;
}

/* さらに対応しているブラウザでは、孤立1文字行などを避ける */
@supports (text-wrap: pretty) {
  .page-id-1410 .wp-block-post-template.is-layout-grid .wp-block-post-title,
  .page-id-1410 .wp-block-post-template.is-layout-grid .wp-block-post-title a {
    text-wrap: pretty;
  }
}


/* =========================================================
 * 29章. ヘッダーのメッシュリボン全消し＋控えめボーダー [ver2.02]
 * ---------------------------------------------------------
 * - Cocoon標準の“ギザギザ／メッシュ”帯をヘッダー側から完全除去
 * - 代わりに1pxの薄いボーダーだけ残す
 * - 余白量はテーマ標準のまま
 * =======================================================*/

/* リボンっぽい ::before / ::after を片っ端から殺す */
#header::before,
#header::after,
.header::before,
.header::after,
#header-container::before,
#header-container::after,
.header-container::before,
.header-container::after,
#navi-header::before,
#navi-header::after,
#header .navi::before,
#header .navi::after,
#header .navi-in::before,
#header .navi-in::after{
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
}

/* 代わりに、ごく控えめなボーダーだけ */
#header,
.header,
#header-container,
.header-container{
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: none !important;  /* 影がついているスキン対策 */
}




/* =========================================================
 * 30章. 記事フッター直上・直下の余白を本気で詰める [ver2.10]
 * ---------------------------------------------------------
 * - .article-footer.entry-footer 周りの margin/padding を削る
 * - 記事本体 (.entry) の margin-bottom も圧縮
 * - 対象：single / page（スマホ＆細PCメイン）
 * =======================================================*/

/* 記事コンテナ自体の「記事の下の余白」を圧縮 */
@media (max-width: 1200px){
  body.single .entry,
  body.page   .entry {
    margin-bottom: 8px !important;  /* テーマ標準よりかなり少なめ */
  }
}

/* 記事フッター（著者情報など）の上下余白を削る */
@media (max-width: 1200px){
  body.single .article-footer.entry-footer,
  body.page   .article-footer.entry-footer {
    margin-top: 6px !important;     /* 本文とのスキマをかなり詰める */
    margin-bottom: 4px !important;  /* 青フッターとの間も縮める */
    padding-top: 4px !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important; /* 余計な境界線があれば殺す */
  }

  /* 中の footer-meta 自体も余白ゼロ基準に */
  body.single .article-footer.entry-footer .footer-meta,
  body.page   .article-footer.entry-footer .footer-meta {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* 念のため、記事直下の main / content コンテナ下端も軽く締める */
@media (max-width: 1200px){
  main.main,
  #content,
  .content,
  .content-in {
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
  }
}


/* =========================================================
 * 29) SP：ドロワーメニューのデザイン調整（最終版）
 * ---------------------------------------------------------
 * - 親メニュー：少し大きめ・太字
 * - 子メニュー：インデント＋フォント小さめ
 * - 左にガイドラインを入れて階層感を出す
 * - 通常のヘッダーメニューには影響させない
 * =======================================================*/
@media (max-width: 834px) {

  /* 全体のパネル */
  #navi-menu-content.menu-content {
    padding: 20px 20px 32px;
    background: #ffffff;
  }

  /* ×ボタンを右上に配置 */
  #navi-menu-content .menu-close-button {
    position: absolute;
    top: 14px;
    right: 16px;
  }

  /* UL 全体 */
  #navi-menu-content .menu {
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
  }

  /* 各トップレベル LI 共通 */
  #navi-menu-content .menu > li {
    margin: 0 0 8px;
  }

  #navi-menu-content .menu > li > a {
    display: block;
    padding: 2px 0;
    font-size: 1.6rem;
    line-height: 1.6;
  }

  /* 親メニュー（Home / Profile / 業務内容 / Archives / Column / Contact） */
  #navi-menu-content .menu > .menu-item-has-children > a {
    margin-top: 14px;
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
  }

  /* 親メニューごとの区切り線 */
  #navi-menu-content .menu > .menu-item-has-children {
    padding-bottom: 4px;
    border-bottom: 1px solid #f0f0f0;
  }
  #navi-menu-content .menu > .menu-item-has-children:last-child {
    border-bottom: none;
  }

  /* 子メニュー全体 */
  #navi-menu-content .sub-menu {
    margin: 6px 0 4px;
    padding: 0 0 4px 0;
    list-style: none;
  }

  /* 子メニュー LI */
  #navi-menu-content .sub-menu > li {
    margin: 0 0 2px;
  }

  /* 子メニュー A：少し小さく＋インデント */
  #navi-menu-content .sub-menu > li > a {
    display: block;
    padding: 2px 0 2px 1.4em; /* インデント量 */
    font-size: 1.5rem;
    line-height: 1.6;
  }

  /* 子メニュー左のガイドライン（階層感用） */
  #navi-menu-content .menu > .menu-item-has-children > .sub-menu {
    position: relative;
  }
  #navi-menu-content .menu > .menu-item-has-children > .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e5e5e5;
  }
}