/*
 * スマホ表示の仕上げ v2（段階2 R11 / 2026-10-13）
 * 対象：幅767px以下のみ（PC・タブレットは不変）。CSSだけで、本文・DBは触らない。
 * 読み込み：inc/mobile-v2.php（現在は ?design=preview / ?design=preview-feed 付きURLだけ）。
 * 方針：町工場の工場長・IT担当者が短時間で見る「落ち着いた業界誌」。絵文字なし・青リンクなし・装飾は最小。
 * 各ブロックは独立。気に入らないブロックだけ削除しても他に影響しない。
 */

@media (max-width: 767px) {

/* ============================================================
   [A] ヘッダー（トップ）：ヒーローの見出しに被っていた絶対配置をやめ、下層ページと同じ「ロゴ＋≡」に揃える
   ============================================================ */
body.mobile-v2 .i-header_top {
  position: relative !important;
  background: #fff;
  border-bottom: 1px solid var(--r2-line, #d8e2df);
}
body.mobile-v2 .l-top_header { height: auto !important; min-height: 0 !important; }
body.mobile-v2 .l-top_header .c-top_header {
  min-height: 56px; align-items: center !important; justify-content: space-between;
  flex-wrap: nowrap !important;
}
body.mobile-v2 .global_navi-is-top { display: none !important; }
body.mobile-v2 .l-top_header .panel_link-is-secondary {
  display: block !important; margin-left: auto; position: static !important;
}
body.mobile-v2 .l-top_header .panel_link-is-secondary .panel_link__link {
  position: static !important; width: 44px; height: 44px; display: flex !important;
  align-items: center; justify-content: center; font-size: 26px; color: var(--r2-green-900, #003d33) !important;
  background: transparent !important; border: 0 !important;
}
/* 新着ティッカー行：ヘッダーの続きとして白地に */
body.mobile-v2 .l-info_search { background: #fff; padding-bottom: 8px; }
body.mobile-v2 .l-info_search .info_bar { border-radius: 4px !important; height: 40px !important; border-color: var(--r2-line, #d8e2df) !important; }
body.mobile-v2 .l-info_search .info_bar__title-is-circle { border-radius: 3px !important; font-size: 12px !important; }
body.mobile-v2 .l-info_search .info_bar__item a { color: var(--r2-ink, #16201d) !important; }

/* ============================================================
   [B] ヒーロー：金のマーカー線をやめ、注釈文は文字の下だけ濃い面を敷く（写真全体への被せは行わない）
   ============================================================ */
body.mobile-v2 .hero-kv--sp .hero-kv__media { padding-top: 28px; }
body.mobile-v2 .hero-kv--sp .hero-kv__flag { border-radius: 3px; background: rgba(0, 40, 34, .72); border-color: rgba(255,255,255,.28); }
body.mobile-v2 .hero-kv--sp .hero-kv__title { font-size: 1.55rem; line-height: 1.45; letter-spacing: .01em; text-wrap: balance; }
body.mobile-v2 .hero-kv--sp .hero-kv__sub b,
body.mobile-v2 .hero-kv--sp .hero-kv__concept strong {
  background: none !important; box-shadow: none !important; text-decoration: none !important;
  color: #fff !important; font-weight: 800;
}
body.mobile-v2 .hero-kv--sp .hero-kv__concept {
  background: rgba(0, 40, 34, .78); padding: 12px 14px; border-radius: 4px;
  font-size: .8rem; line-height: 1.75; text-shadow: none;
}
body.mobile-v2 .hero-kv--sp .hero-kv__cta-bar { padding-top: 16px; padding-bottom: 20px; gap: 6px; }
body.mobile-v2 .hero-kv--sp .hero-cta__btn--primary { border-radius: 6px !important; min-height: 52px; font-size: 1rem; }

/* ============================================================
   [C] 実績ストリップ・検索：蛍光マーカーをやめ、文字を少し大きく
   ============================================================ */
body.mobile-v2 .proof-strip__num { background: none !important; box-shadow: none !important; color: var(--r2-green-800, #004d40); }
body.mobile-v2 .proof-strip__label { font-size: 11.5px; }
body.mobile-v2 .sp-search .search__input { border-radius: 4px !important; }
body.mobile-v2 .sp-search .search__submit { border-radius: 4px !important; }

/* ============================================================
   [D] 今日のヘッドライン：青リンク→墨色、先頭5件まで（残りは「ニュース一覧へ」から）
   ============================================================ */
body.mobile-v2 .portal-box__link,
body.mobile-v2 .portal-box__link:visited { color: var(--r2-ink, #16201d) !important; font-weight: 600; line-height: 1.55; text-decoration: none; }
body.mobile-v2 .portal-box__list > .portal-box__item:nth-child(n+6) { display: none; }
body.mobile-v2 .portal-box__new { font-size: 10.5px; }

/* ============================================================
   [E] 特集ハブ：1枚140px級のカードを、64px程度の行にして5本を一覧できるように
   ============================================================ */
body.mobile-v2 .pillar-hub { padding: 18px 14px 14px; border-radius: 6px; }
body.mobile-v2 .pillar-hub__title { font-size: 1.05rem; line-height: 1.5; }
body.mobile-v2 .pillar-hub__lead { font-size: .82rem; margin-top: 4px; }
body.mobile-v2 .pillar-hub__grid { display: grid; grid-template-columns: 1fr !important; gap: 8px; margin-top: 12px; }
body.mobile-v2 .pillar-hub__card {
  display: grid !important; grid-template-columns: 40px 1fr; grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 0; align-items: center; padding: 10px 12px !important;
  border-radius: 4px !important; min-height: 0 !important; text-align: left !important;
  grid-column: auto !important;
}
body.mobile-v2 .pillar-hub__icon { grid-row: 1 / span 2; margin: 0 !important; width: 40px; height: 40px; }
body.mobile-v2 .pillar-hub__icon .ss-ico { width: 40px; height: 40px; }
body.mobile-v2 .pillar-hub__icon svg { width: 22px; height: 22px; }
body.mobile-v2 .pillar-hub__label { font-size: .95rem; line-height: 1.35; }
body.mobile-v2 .pillar-hub__desc { font-size: .78rem; line-height: 1.4; }

/* ============================================================
   [F] 参加の呼びかけ（アイデア・レシピ）：同じ内容のまま縦を詰める
   ============================================================ */
body.mobile-v2 .idea-spotlight { padding: 0; border-radius: 6px; }
body.mobile-v2 .idea-spotlight__inner { padding: 18px 16px 16px; }
body.mobile-v2 .idea-spotlight__title { font-size: 1.1rem; line-height: 1.5; }
body.mobile-v2 .idea-spotlight__lead { font-size: .85rem; line-height: 1.7; }
body.mobile-v2 .idea-spotlight__chips { display: none; }
body.mobile-v2 .idea-spotlight .sns-share { display: none; }
body.mobile-v2 .idea-spotlight__cta { border-radius: 6px !important; min-height: 48px; }
body.mobile-v2 .recipe-feed { padding: 16px 14px; border-radius: 6px; }
body.mobile-v2 .recipe-feed__head { font-size: 1.02rem; line-height: 1.5; }
body.mobile-v2 .recipe-feed__preview {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding: 0 10px; border-top: 8px solid #eef2f0; border-bottom: 8px solid #eef2f0;
}
body.mobile-v2 .recipe-feed__card { padding: 12px 14px; border-radius: 4px !important; }

/* ============================================================
   [G] 記事カード：チップと写真クレジットの重なりを解消、タイトルは墨色
   ============================================================ */
body.mobile-v2 .bento-post-card { border-radius: 6px !important; }
body.mobile-v2 .seiseiai-fb__label {
  max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.mobile-v2 .seiseiai-fb__credit {
  max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px !important; text-align: right;
}
body.mobile-v2 .bento-post-card__title { color: var(--r2-ink, #16201d) !important; line-height: 1.55; }
body.mobile-v2 .bento-post-card__excerpt { font-size: .86rem; line-height: 1.65; }
body.mobile-v2 .bento-post-card__date { font-size: .78rem; }

/* ============================================================
   [H] 参加コーナー（コミュニティ帯）：絵文字アイコンを外し、4項目を詰める
   ============================================================ */
body.mobile-v2 .community-strip__icon,
body.mobile-v2 .community-strip__head-emoji { display: none !important; }
body.mobile-v2 .community-strip__head { gap: 0 !important; padding-bottom: 6px; }
body.mobile-v2 .community-strip__title { font-size: 1.12rem !important; line-height: 1.45; }
body.mobile-v2 .community-strip__sub,
body.mobile-v2 .community-strip__seed { font-size: .82rem; line-height: 1.7; }
body.mobile-v2 .community-strip__grid { gap: 8px !important; }
body.mobile-v2 .community-strip__item { padding: 12px 14px !important; min-height: 0 !important; border-radius: 4px !important; }
body.mobile-v2 .community-strip__item--primary { animation: none !important; }
body.mobile-v2 .community-strip__label { font-size: 1rem; }
body.mobile-v2 .community-strip__desc { font-size: .82rem; line-height: 1.6; }
body.mobile-v2 .community-strip__pin {
  position: static !important; display: inline-block; align-self: flex-start; margin: 0 0 6px; font-size: 10.5px;
}

/* ============================================================
   [I] 掲示板のスレッド一覧：返信・投稿者・更新を1行に並べる（縦に4段積みをやめる）
   ============================================================ */
body.mobile-v2 .board-index-table tbody tr {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 14px !important;
}
body.mobile-v2 .board-index-table td { width: auto !important; padding: 0 !important; }
body.mobile-v2 .board-index-table__col-q { flex: 0 0 100%; margin-bottom: 2px; }
body.mobile-v2 .board-index-table__link,
body.mobile-v2 .board-index-table__link:visited { color: var(--r2-ink, #16201d) !important; line-height: 1.55; }
body.mobile-v2 .board-buzz-list__row { padding-top: 10px; padding-bottom: 10px; }
body.mobile-v2 .seiseiai-buzz__bar { font-size: 1rem; }

/* ============================================================
   [J] サイドバー（スマホでは本文の下に積まれる）：空の箱を隠し、ランキングは上位5件、リンクは墨色
   ============================================================ */
body.mobile-v2 #custom_html-9 { display: none !important; }
body.mobile-v2 aside.right-sidebar .widget { padding: 16px 14px !important; border-radius: 6px !important; margin-bottom: 14px !important; }
/* 中に独自の枠を持つウィジェットは外枠を外し、二重の箱をやめる。メルマガは箱の中に見出しがあるので外の見出しを省く */
body.mobile-v2 #custom_html-5,
body.mobile-v2 #custom_html-6,
body.mobile-v2 #custom_html-8,
body.mobile-v2 #custom_html-10,
body.mobile-v2 #custom_html-11,
body.mobile-v2 #custom_html-12 {
  padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important;
}
body.mobile-v2 #custom_html-12 > .widget-title { display: none; }
body.mobile-v2 #custom_html-10 a,
body.mobile-v2 #custom_html-11 a { color: var(--r2-ink, #16201d); }
body.mobile-v2 #custom_html-10 li:nth-child(n+6),
body.mobile-v2 #custom_html-11 li:nth-child(n+6) { display: none; }
body.mobile-v2 .seiseiai-newsletter-box__lead { font-size: .88rem; line-height: 1.7; }
body.mobile-v2 .seiseiai-newsletter-box .mailpoet_submit,
body.mobile-v2 .seiseiai-newsletter-box input[type="submit"] {
  background: var(--r2-green-800, #004d40) !important; color: #fff !important; border: 0 !important;
  border-radius: 6px !important; height: auto !important; min-height: 48px; width: 100%; padding: 12px 14px !important;
  font-weight: 800; font-size: .92rem; line-height: 1.4; letter-spacing: 0; cursor: pointer; white-space: normal; text-wrap: balance;
}
body.mobile-v2 .seiseiai-newsletter-box input[type="email"],
body.mobile-v2 .seiseiai-newsletter-box input[type="text"] {
  width: 100%; min-height: 46px; border: 1px solid var(--r2-line, #d8e2df); border-radius: 6px; padding: 0 12px; font-size: 16px;
}

/* ============================================================
   [J2] 下層ページの緑バナー（カテゴリ・掲示板など）：360px級の高さを100px前後に
   ============================================================ */
body.mobile-v2 .l-keyvisual_common { min-height: 0 !important; height: auto !important; }
body.mobile-v2 .l-keyvisual_common .c-keyvisual { min-height: 0 !important; padding-top: 26px !important; padding-bottom: 26px !important; }
body.mobile-v2 .l-keyvisual_common .heading.heading-is-custom { font-size: 1.35rem !important; }

/* ============================================================
   [K] カテゴリ一覧・フッター：青い▶と青リンクを深緑に、フッター帯を詰める
   ============================================================ */
body.mobile-v2 .portal-row--tail a,
body.mobile-v2 .portal-row--tail a:visited { color: var(--r2-green-800, #004d40) !important; }
body.mobile-v2 .footer-mission-band { padding: 20px 16px; }
body.mobile-v2 .footer-mission-band__text { font-size: .88rem; margin-bottom: 8px; }
body.mobile-v2 .l-footer_navi.sep::before,
body.mobile-v2 .l-footer_navi.sep::after { display: none !important; }
body.mobile-v2 .l-footer_navi .global_navi__list {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 20px !important;
  justify-content: stretch !important; padding: 8px 16px 12px !important;
}
body.mobile-v2 .l-footer_navi .footer-group-sep { display: none !important; }
body.mobile-v2 .l-footer_navi .global_navi__item { margin: 0 !important; }
body.mobile-v2 .l-footer_navi .global_navi__item > a {
  display: block !important; background: transparent !important; border: 0 !important; border-radius: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.2) !important; box-shadow: none !important;
  color: #fff !important; padding: 13px 2px !important; text-align: left !important;
  font-size: .9rem !important; font-weight: 600 !important; min-height: 0 !important;
}
body.mobile-v2 .l-copyright { background: var(--r2-green-900, #003d33) !important; padding: 14px 16px 18px; }
body.mobile-v2 .l-copyright .phrase { font-size: .78rem !important; }

}

/* ============================================================
   [L] 任意：記事カードを先に出す（?design=preview-feed のときだけ body.mobile-v2-feed-first が付く）
   特集ハブ・アイデア・レシピは記事の後ろに回る。不要ならこのブロックごと削除。
   ============================================================ */
@media (max-width: 767px) {
  body.mobile-v2.mobile-v2-feed-first .bento-posts-feed { display: flex; flex-direction: column; }
  body.mobile-v2.mobile-v2-feed-first .bento-posts-feed > * { order: 0; }
  body.mobile-v2.mobile-v2-feed-first .bento-posts-feed > .pillar-hub { order: 20; margin-top: 18px; }
  body.mobile-v2.mobile-v2-feed-first .bento-posts-feed > .idea-spotlight { order: 21; }
  body.mobile-v2.mobile-v2-feed-first .bento-posts-feed > .seiseiai-buzz--recipes { order: 22; }
}