/* ============================================================
   KAZI ONLINE v2 — Design Overrides
   Loaded AFTER page-specific CSS to apply v2 design improvements
   ============================================================ */

/* === 1. Color Contrast Fixes (WCAG AA) === */

/* Secondary text: #666 → #4a4a4a */
.card-cat,
.card-date,
.breadcrumb a,
.footer-col a,
.article-date,
.article-author,
.form-note,
.sidebar-nav li a,
.page-count,
.confirm-table th,
.benefit-detail-body p {
  color: var(--color-text-secondary) !important;
}

/* Tertiary text: #999 → #6b6b6b */
.page-file,
.card-excerpt,
.related-card-excerpt,
.related-card-date,
.article-cat-date,
.search-tag,
.footer-bottom,
.wf-label,
.page-header p,
.big-cta-note,
.toc-toggle,
.meta-item,
.step-desc {
  color: var(--color-text-tertiary) !important;
}

/* Disabled text: #aaa/#bbb/#ccc → #8a8a8a */
.page-arrow,
.breadcrumb .sep,
.history-item-date {
  color: var(--color-text-disabled) !important;
}

/* === 2. Typography Improvements === */

/* Ensure consistent body font */
body {
  font-family: var(--font-body) !important;
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Section titles — consistent sizing */
.section-title,
.section-header h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
}

/* Card titles */
.card-title {
  font-family: var(--font-heading);
  line-height: var(--line-height-tight);
}

/* Meta text minimum size */
.card-date,
.related-card-date,
.article-cat-date,
.page-file,
.ad-label,
.sidebar-ad-label {
  font-size: var(--font-size-xs);
  font-family: var(--font-ui);
}

/* === 3. Header Gradient Enhancement === */
header {
  border-top: 3px solid !important;
  border-image: linear-gradient(to right, var(--color-primary-dark), var(--color-primary), var(--color-primary-light)) 1 !important;
}

/* === 4. Button Standardization === */

/* Primary buttons */
.btn-login,
.form-submit,
.plan-cta,
.register-cta-btn,
.search-submit-btn {
  border-radius: var(--radius-md) !important;
  transition: all var(--duration-normal) var(--ease-out) !important;
}

/* Outline buttons */
.big-cta-btn,
.sdc-popup-btn,
.sidebar-btn {
  border-radius: var(--radius-md) !important;
  transition: all var(--duration-normal) var(--ease-out) !important;
}

/* Tag/pill buttons */
.search-tag,
.search-cat-btn,
.tag-item a,
.tag-link {
  border-radius: var(--radius-pill) !important;
}

/* Button hover enhancement */
.btn-login:hover,
.form-submit:hover,
.plan-cta:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* === 5. Card Shadow System === */
.card-featured,
.feature-card,
.plan-card,
.benefit-card {
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-normal) var(--ease-out),
              transform var(--duration-normal) var(--ease-out) !important;
}

.card-featured:hover,
.feature-card:hover,
.plan-card:hover,
.benefit-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Related card hover */
.related-card:hover,
.card-list:hover {
  background: var(--color-bg-secondary) !important;
}

/* === 6. Focus States (Accessibility) === */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary) !important;
  outline-offset: 2px !important;
}

/* Remove default outline for mouse clicks */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

/* === 7. Skeleton Loading for Images === */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.card-img,
.card-img-sm,
.related-card-img,
.article-hero-img,
.bookmark-card-img,
.history-item-img {
  background-color: #f0f0f0;
  background-image: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

/* Stop shimmer when image loads */
.card-img[style*="background-image"],
.card-img-sm[style*="background-image"],
.related-card-img[style*="background-image"],
.article-hero-img[style*="background-image"],
.bookmark-card-img[style*="background-image"],
.history-item-img[style*="background-image"] {
  animation: none;
  background-size: cover;
  background-position: center;
}

/* === 8. Ad Differentiation === */
.ad-native,
.ad-banner {
  background: var(--color-bg-secondary) !important;
  border-left: 3px solid var(--color-text-disabled) !important;
}

.ad-label,
.ad-native-label,
.sidebar-ad-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: var(--color-text-disabled) !important;
  text-transform: uppercase;
}

/* === 9. Scroll Reveal Enhancement === */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* === 10. Footer Enhancement === */
/* フッターのカテゴリは 7 件（ヨット/ボート/フィッシング/クルージング/ライフスタイル/
   グッズ＆ギア/トピックス）。PC は 1 行 7 列、タブレットは 4 列、SP は 2 列の偶数並び */
.footer-sitemap {
  grid-template-columns: repeat(7, max-content) !important;
  justify-content: start !important;
  gap: var(--space-4) var(--space-7, 40px) !important;
}
@media (max-width: 1280px) {
  .footer-sitemap {
    grid-template-columns: repeat(7, max-content) !important;
    gap: var(--space-4) 24px !important;
  }
}
@media (max-width: 900px) {
  .footer-sitemap {
    grid-template-columns: repeat(4, max-content) !important;
    gap: 20px 28px !important;
  }
}
@media (max-width: 560px) {
  .footer-sitemap {
    grid-template-columns: repeat(4, max-content) !important;
    gap: 16px 22px !important;
  }
}
/* Tablet/mobile breakpoints は responsive.css で 3col / 1col に切替 */

/* Hamburger Nav — グリッド方式（SP は責任を responsive.css に委譲） */
.hamburger-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-count: auto;
  gap: 16px 28px;
}
.hamburger-nav-group {
  margin-bottom: 0;
  break-inside: auto;
}

.footer-col-title {
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.footer-col a {
  color: rgba(255,255,255,0.65) !important;
  transition: color var(--duration-fast) !important;
}

.footer-col a:hover {
  color: rgba(255,255,255,0.95) !important;
}

/* === Article header: lead/breadcrumb/byline/meta の文字色を濃く（視認性向上） === */
.article-header .breadcrumb,
.article-header .breadcrumb a,
.article-header .breadcrumb span {
  color: #4a4a4a !important;
}
.article-header .breadcrumb a:hover { color: #1a1a1a !important; }

.article-lead {
  color: #333333 !important;
  font-weight: 400 !important;
}

.article-byline,
.article-byline span {
  color: #444444 !important;
  font-weight: 400 !important;
}

.article-meta,
.article-meta span,
.article-meta .meta-updated {
  color: #444444 !important;
}

/* === SDC Popup（濃紺）テキスト視認性 ===
 *  既存の濃紺グラデポップアップ .sdc-popup 内の要素のみに適用。
 *  動的生成の白背景ポップアップ .sdc-popup-card には適用しない。
 */
.sdc-popup .sdc-popup-title    { color: #ffffff !important; }
.sdc-popup .sdc-popup-eyebrow  { color: rgba(255, 255, 255, 0.65) !important; }
.sdc-popup .sdc-popup-sub      { color: #8fc7f5 !important; }
.sdc-popup .sdc-popup-desc     { color: rgba(255, 255, 255, 0.88) !important; }
.sdc-popup .sdc-popup-benefit  { color: rgba(255, 255, 255, 0.92) !important; }
.sdc-popup .sdc-popup-benefit-icon { color: rgba(255, 255, 255, 0.85) !important; }
.sdc-popup .sdc-popup-btn      { color: #ffffff !important; border-color: rgba(255, 255, 255, 0.75) !important; }
.sdc-popup .sdc-popup-login    { color: rgba(255, 255, 255, 0.75) !important; }

/* === 11. Search Overlay Enhancement === */
.search-box {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
}

.search-input-row input {
  border-radius: var(--radius-md) !important;
  font-size: var(--font-size-base) !important;
}

/* === 12. SDC Float Banner Enhancement === */
.sdc-float-banner {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  box-shadow: var(--shadow-lg) !important;
}

/* === 13. Toast Enhancement === */
.toast {
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-body) !important;
}

/* === 14. Breadcrumb Enhancement === */
.breadcrumb {
  font-size: var(--font-size-sm) !important;
  color: var(--color-text-secondary) !important;
}

.breadcrumb a {
  color: var(--color-text-secondary) !important;
  text-decoration: none !important;
  transition: color var(--duration-fast) !important;
}

.breadcrumb a:hover {
  color: var(--color-primary) !important;
}

/* === 15. Form Enhancement === */
.form-group input,
.form-group select,
.form-group textarea {
  border-radius: var(--radius-md) !important;
  border-color: var(--color-border) !important;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast) !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(44, 95, 138, 0.1) !important;
  outline: none !important;
}

/* === 16. Back to Top Button Enhancement === */
.btn-top {
  border-radius: 50% !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--duration-normal) var(--ease-out) !important;
}

.btn-top:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* === 17. More/CTA Button Enhancement === */
.more-bottom,
.btn-more,
.section-more {
  border-radius: var(--radius-md) !important;
  transition: all var(--duration-normal) var(--ease-out) !important;
}

.more-bottom:hover,
.btn-more:hover,
.section-more:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* === 18. Category Badge Enhancement === */
.card-cat,
.article-cat-badge,
.related-card-cat {
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: 0.04em;
}

/* === 19. Sidebar SDC Banner Enhancement === */
.sidebar-sdclub {
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}

/* === 20. Mobile Hamburger Always Visible (UX Fix) === */
@media (max-width: 1024px) {
  .btn-hamburger {
    display: flex !important;
  }
  .global-nav {
    display: none !important;
  }
}

/* === 21. Image Lazy Loading Fade-in === */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

img[loading="lazy"] {
  animation: fadeIn 0.3s ease-in;
}

/* === 22. Cat Hero — Light Style === */
body .cat-hero,
body .cat-hero.cat-hero {
  background: #f5f5f5 !important;
  padding: 28px 0 !important;
}
body .cat-hero h1,
body .cat-hero.cat-hero h1 {
  color: #4a4a4a !important;
  text-shadow: none !important;
}
body .cat-hero h1 .cat-hero-parent {
  color: #888 !important;
}
body .cat-hero p,
body .cat-hero.cat-hero p {
  color: #555 !important;
  text-shadow: none !important;
}

/* === 23. TOP — Service Banners Grid === */
.service-banners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.service-banner {
  display: flex;
  gap: 0;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e8e8e8;
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}
.service-banner:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transform: translateY(-3px);
}
.service-banner-img {
  width: 220px;
  min-height: 160px;
  flex-shrink: 0;
  background: #e4e4e4 center/cover no-repeat;
  position: relative;
}
.service-banner-label {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  padding: 3px 8px;
}
.service-banner-body {
  flex: 1;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  color: #1a1a1a;
}
.service-banner-eyebrow {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1a3a55;
  background: #b3e5fc;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  margin-bottom: 10px;
}
/* タイトルだけブルーグラデの帯 */
.service-banner-body h3 {
  display: inline-block;
  align-self: flex-start;
  font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 10px;
  padding: 3px 9px;
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5f8a 55%, #3d7eb0 100%);
  border-radius: 0;
  letter-spacing: 0.04em;
}
.service-banner-body p {
  font-size: 13px;
  color: #555;
  line-height: 1.7;
}

/* === card-list ベーススタイル（TOP/記事/カテゴリで共通） === */
.card-list {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.card-list-body { flex: 1; min-width: 0; }
.card-list .card-img-sm {
  width: 140px;
  height: 94px;
  flex-shrink: 0;
  background: #e0ddd8;
  overflow: hidden;
}
.card-list .card-img-sm img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.3s;
}
.card-list:hover .card-img-sm img { transform: scale(1.05); }
.card-list .card-cat {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 9px; color: #1a1a1a;
  display: inline-block; margin-bottom: 4px;
  letter-spacing: 0.04em; font-weight: 600;
  background: #b8ecff; padding: 2px 8px;
}
.card-list .card-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 17px; color: #1a1a1a; line-height: 1.5;
  font-weight: 600; margin-bottom: 6px;
}
.card-list:hover .card-title { color: #2c5f8a; }
.card-list .card-excerpt {
  font-size: 12px; color: #444; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-list .card-meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: #666; margin-top: 6px;
  letter-spacing: 0.04em;
}

/* === 24. TOP — New Articles Grid (2-col × 3-row) === */
.new-articles-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0;
}
.new-articles-grid .card-list {
  border-bottom: 1px solid #eee;
  padding: 24px 28px 24px 0;
}
.new-articles-grid .card-list:nth-child(even) {
  padding-left: 28px;
  border-left: 1px solid #eee;
}
/* Remove border-bottom on last row */
.new-articles-grid .card-list:nth-last-child(-n+2) {
  border-bottom: none;
}
/* Larger image for 2-col context */
.new-articles-grid .card-img-sm {
  width: 180px !important;
  height: 120px !important;
}

@media (max-width: 1024px) {
  .service-banners { grid-template-columns: 1fr 1fr; gap: 16px; }
  .new-articles-grid { grid-template-columns: 1fr !important; }
  .new-articles-grid .card-list { padding-left: 0 !important; border-left: none !important; }
  .new-articles-grid .card-list:nth-last-child(-n+2) { border-bottom: 1px solid #eee; }
  .new-articles-grid .card-list:last-child { border-bottom: none; }
}
@media (max-width: 480px) {
  .service-banners { grid-template-columns: 1fr; gap: 12px; }
  .service-banner-img { width: 160px; min-height: 120px; }
  .new-articles-grid .card-img-sm { width: 120px !important; height: 80px !important; }
}

/* === 25. External Link Icon === */
a[target="_blank"]::after {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 4px;
  vertical-align: middle;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E") no-repeat center / contain;
  background-color: currentColor;
  opacity: 0.8;
}
/* Exclude icons/images/buttons from external icon */
a[target="_blank"].card-featured::after,
a[target="_blank"].card-list::after,
a[target="_blank"].service-banner::after,
a[target="_blank"].ad-banner::after,
a[target="_blank"].btn-login::after,
a[target="_blank"].sdc-float-banner-btn::after,
a[target="_blank"].big-cta-btn::after,
a[target="_blank"].marina-item::after,
a[target="_blank"].marinas-index-map-btn::after,
a[target="_blank"].marinas-index-name::after,
a[target="_blank"].marina-address-pin::after,
a[target="_blank"].marina-website-btn::after,
a[target="_blank"].boat-brand-website-btn::after,
a[target="_blank"].ad-image-only::after,
.footer-sns a::after {
  display: none;
}

/* === 26. Footer SNS Links === */
.footer-sns {
  padding: 24px 40px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 24px !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
.footer-sns a,
.footer-sns a:link,
.footer-sns a:visited {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: rgba(255,255,255,.6) !important;
  text-decoration: none !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: color 0.2s !important;
  line-height: 1 !important;
}
.footer-sns a svg {
  flex-shrink: 0;
  vertical-align: middle;
}
.footer-sns a:hover {
  color: #fff !important;
}
.footer-sns a[target="_blank"]::after {
  display: none !important;
}

/* ============================================================
   WP-Members フォーム出力の wireframe レイアウト整合（全会員ページ共通）
   register / login / password / user_edit すべてで使用
   ============================================================ */
[id^="wpmem_"] form,
#wpmem_msg + [id^="wpmem_"] form { width: 100%; }
[id^="wpmem_"] fieldset { border: 0; padding: 0; margin: 0; }
[id^="wpmem_"] legend { display: none; }

.form-section-heading {
  margin-top: 48px; padding-bottom: 12px;
  border-bottom: 2px solid #2c5f8a;
  margin-bottom: 28px;
}
.form-section-heading:first-of-type { margin-top: 0; }
.form-section-heading h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 17px; font-weight: 600; color: #1a1a1a;
  margin: 0;
}
.form-section-heading p {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; color: #555; line-height: 1.7;
  font-weight: 300; margin: 8px 0 0;
}

[id^="wpmem_"] label.text, [id^="wpmem_"] label.radio,
[id^="wpmem_"] label.select, [id^="wpmem_"] label.multicheckbox,
[id^="wpmem_"] label.text,
[id^="wpmem_"] label[for="log"],
[id^="wpmem_"] label[for="pwd"],
[id^="wpmem_"] label[for="user_email"],
[id^="wpmem_"] label[for="username"] {
  display: block;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; font-weight: 600; color: #1a1a1a;
  margin: 28px 0 8px; letter-spacing: 0.02em;
}
/* ログインフォーム: rememberme のチェックボックス行 */
[id^="wpmem_"] label[for="rememberme"] {
  display: inline-block; vertical-align: middle;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; font-weight: 400; color: #555;
  margin: 0; cursor: pointer;
}
[id^="wpmem_"] input[name="rememberme"] {
  margin: 0 8px 0 0 !important; vertical-align: middle;
}
/* ログインフォーム下部の WP-Members 標準「パスワードを忘れた場合 パスワードリセット」リンクは
   テーマ側でカスタムリンクを別途出すため非表示 */
#wpmem_login .link-text,
#wpmem_login .link-text-forgot { display: none !important; }
/* button_div: rememberme(左頭) → label → submit(改行・横幅100%) */
#wpmem_login .button_div {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-start;
  gap: 0; margin-top: 28px;
}
#wpmem_login .button_div input[name="rememberme"] { order: 1; flex: 0 0 auto; }
#wpmem_login .button_div label[for="rememberme"]  { order: 2; flex: 0 0 auto; }
#wpmem_login .button_div .buttons,
#wpmem_login .button_div input[type="submit"] {
  order: 3; flex: 1 1 100%; margin-top: 20px;
}

[id^="wpmem_"] .req {
  display: inline-block; font-size: 10px;
  color: #fff; background: #c55043;
  margin-left: 8px; font-weight: 600;
  padding: 2px 8px; border-radius: 2px;
  letter-spacing: 0.04em;
}
[id^="wpmem_"] .opt {
  display: inline-block; font-size: 10px;
  color: #666; background: #f0f0f0;
  margin-left: 8px; font-weight: 500;
  padding: 2px 8px; border-radius: 2px;
  letter-spacing: 0.04em;
}

[id^="wpmem_"] input.textbox, [id^="wpmem_"] select.dropdown,
[id^="wpmem_"] input[type="text"],
[id^="wpmem_"] input[type="email"],
[id^="wpmem_"] input[type="password"],
[id^="wpmem_"] input[type="url"],
[id^="wpmem_"] input[type="tel"],
[id^="wpmem_"] input[type="number"] {
  width: 100% !important;
  border: 1px solid #ddd !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  color: #1a1a1a !important;
  outline: none;
  background-color: #fff !important;
  border-radius: 0 !important;
  font-family: 'Noto Sans JP', sans-serif !important;
  font-weight: 400;
  box-sizing: border-box !important;
}
[id^="wpmem_"] input.textbox:focus, [id^="wpmem_"] select.dropdown:focus,
[id^="wpmem_"] input[type="text"]:focus,
[id^="wpmem_"] input[type="email"]:focus,
[id^="wpmem_"] input[type="password"]:focus,
[id^="wpmem_"] input[type="url"]:focus,
[id^="wpmem_"] input[type="tel"]:focus,
[id^="wpmem_"] input[type="number"]:focus {
  border-color: #2c5f8a !important;
  box-shadow: 0 0 0 3px rgba(44,95,138,0.08) !important;
}
[id^="wpmem_"] input.textbox::placeholder,
[id^="wpmem_"] input[type="text"]::placeholder,
[id^="wpmem_"] input[type="email"]::placeholder,
[id^="wpmem_"] input[type="password"]::placeholder { color: #ccc; font-weight: 300; }
/* rememberme は対象外 */
[id^="wpmem_"] input[type="checkbox"],
[id^="wpmem_"] input[name="rememberme"] {
  width: auto !important;
  padding: 0 !important;
  border: 1px solid #ccc !important;
}

[id^="wpmem_"] select.dropdown {
  display: block !important;
  min-height: 48px;
  appearance: none !important; -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  padding-right: 40px !important;
}

[id^="wpmem_"] .div_radio {
  display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 6px;
}
[id^="wpmem_"] .div_radio label.radio {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px; font-weight: 400; color: #444;
  cursor: pointer; margin: 0; letter-spacing: 0;
}
[id^="wpmem_"] .div_radio br { display: none; }

[id^="wpmem_"] .div_multicheckbox {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px; margin-top: 6px;
}
[id^="wpmem_"] .div_multicheckbox .check-card {
  display: flex !important;
  align-items: center; gap: 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px; font-weight: 400; color: #444;
  cursor: pointer; margin: 0;
  padding: 12px 16px;
  border: 1px solid #e8e8e8;
  transition: border-color .2s, background .2s, color .2s;
}
[id^="wpmem_"] .div_multicheckbox .check-card:hover {
  border-color: #2c5f8a; background: #f8f9fb; color: #1a1a1a;
}
[id^="wpmem_"] .div_multicheckbox > br,
[id^="wpmem_"] .div_multicheckbox > label.multicheckbox { display: none !important; }

/* tos 行 */
[id^="wpmem_"] .div_text:has(input[name="tos"]) {
  margin-top: 40px; padding: 24px 28px;
  border: 1px solid #e8e8e8; background: #fafafa;
  display: flex; align-items: flex-start; gap: 10px;
  line-height: 1.7; font-size: 14px;
}
[id^="wpmem_"] input[name="tos"] { margin-top: 4px; flex-shrink: 0; }
[id^="wpmem_"] input[name="tos"] + a {
  color: #2c5f8a; text-decoration: underline;
}
[id^="wpmem_"] input[name="tos"] + a:hover { color: #1e3a5f; }

/* 送信ボタン */
[id^="wpmem_"] .button_div { margin-top: 36px; }
[id^="wpmem_"] input.buttons {
  display: block; width: 100%;
  border: none;
  background: #0a0f1a; color: #fff;
  padding: 18px 20px; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .3s;
  text-align: center; letter-spacing: 0.1em;
  font-family: 'Noto Sans JP', sans-serif;
  border-radius: 0;
}
[id^="wpmem_"] input.buttons:hover {
  background: #2c5f8a;
}

/* 「* 必須項目」注釈は非表示（バッジで明示済） */
[id^="wpmem_"] .req-text { display: none; }

/* ヒント文 */
[id^="wpmem_"] .form-hint {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px; color: #666;
  margin-top: 6px; font-weight: 300;
}

/* SP 調整 */
@media (max-width: 768px) {
  [id^="wpmem_"] .div_multicheckbox { grid-template-columns: 1fr; }
  [id^="wpmem_"] .div_radio { flex-direction: column; gap: 12px; }
}

/* ============================================================
   ヘッダー「マイページ」ボタン（ログイン時）
   ============================================================ */
.btn-login.btn-mypage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn-login.btn-mypage .user-icon {
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
@media (max-width: 768px) {
  /* SP は responsive.css 側で btn-login の text を非表示にしている可能性あり、
     アイコンが残るので圧縮表示でちょうど良い */
  .btn-login.btn-mypage span { display: none; }
  .btn-login.btn-mypage .user-icon { width: 18px; height: 18px; }
  /* SP で btn-mypage は responsive.css の ::before 疑似アイコンと、
     ボタン内の SVG (.user-icon) が重複表示される。::before を消して SVG を残す。 */
  header .header-actions .btn-login.btn-mypage::before,
  header .btn-login.btn-mypage::before {
    content: none !important;
    display: none !important;
  }
}

/* ============================================================
   マイページの会員情報セクション (user_edit shortcode) 整形
   外側 div#wpmem_reg と内側 form#wpmem_profile_form の二重ネストを
   リセットして、mypage-main の幅に収める
   ============================================================ */
.mypage-section #wpmem_reg,
.mypage-section #wpmem_login,
.mypage-section #wpmem_msg {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.mypage-section form#wpmem_profile_form {
  display: block;
  width: 100%;
}
.mypage-section form#wpmem_profile_form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}
.mypage-section form#wpmem_profile_form legend {
  display: none;
}
.mypage-section form#wpmem_profile_form > .button_div {
  margin-top: 36px;
}
.mypage-section form#wpmem_profile_form input.buttons {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border: none;
  background: #0a0f1a;
  color: #fff;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.1em;
  font-family: 'Noto Sans JP', sans-serif;
  border-radius: 0;
  transition: background .3s;
}
.mypage-section form#wpmem_profile_form input.buttons:hover {
  background: #2c5f8a;
}

/* ============================================================
 * 世界のボートブランド (kazi-boat-brands)
 * ============================================================ */
.boat-brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 18px;
  margin: 24px 0;
}
.boat-brand-item {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 20px 14px 14px;
  text-decoration: none;
  color: #1a3a52;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.boat-brand-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(26, 58, 82, .12);
  border-color: #1a3a52;
}
.boat-brand-logo {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.boat-brand-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.boat-brand-logo-placeholder {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.05em;
  color: #666;
  padding: 4px 8px;
  border: 1px dashed #ccc;
  border-radius: 4px;
}
.boat-brand-name-en {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
  color: #0e2233;
}
.boat-brand-name-jp {
  font-size: 12px;
  color: #666;
}
.boat-brand-country {
  font-size: 11px;
  color: #555;
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.boat-brand-item-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}
.boat-brand-item-link:hover { color: inherit; }
/* WEBサイトボタン（marina-website-btnに踏襲） */
.boat-brand-website-btn {
  display: inline-block;
  margin: 10px auto 0;
  padding: 3px 12px;
  background: #f1f3f5;
  color: #555;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #e0e3e6;
  border-radius: 4px;
  align-self: center;
  transition: background .15s, color .15s;
}
.boat-brand-website-btn:hover {
  background: #e8eaed;
  color: #1a3a52;
}
.boat-brand-count {
  font-size: 11px;
  color: #0e2233;
  font-weight: 600;
  margin-top: 6px;
  text-align: center;
  letter-spacing: 0.02em;
}
/* 関連記事0件のカード：クリック不可（ホバー効果のみ無効化、見た目は通常） */
.boat-brand-item.is-disabled {
  cursor: default;
}
.boat-brand-item.is-disabled:hover {
  transform: none;
  box-shadow: none;
  border-color: #e5e5e5;
}
.boat-brand-item.is-disabled .boat-brand-item-link {
  cursor: default;
}
/* ソート UI（タブ風） */
.boat-brands-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 18px 0 8px;
  font-size: 12px;
}
.boat-brands-sort-label {
  color: #666;
  font-weight: 500;
  margin-right: 4px;
}
.boat-brands-sort-btn {
  display: inline-block;
  padding: 5px 14px;
  background: #fff;
  color: #555;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #d8dde2;
  border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s;
}
.boat-brands-sort-btn:hover {
  background: #f1f3f5;
  color: #1a3a52;
  border-color: #1a3a52;
}
.boat-brands-sort-btn.is-active {
  background: #1a3a52;
  color: #fff;
  border-color: #1a3a52;
}
.boat-brands-sort-btn.is-active:hover {
  background: #12283a;
}
/* 国別グループ */
.boat-brands-country-group {
  margin: 18px 0 28px;
}
.boat-brands-country-heading {
  font-size: 16px;
  font-weight: 600;
  color: #1a3a52;
  margin: 0 0 8px;
  padding: 8px 0 8px 12px;
  border-left: 3px solid #1a3a52;
  letter-spacing: 0.02em;
}
.boat-brands-country-heading .count {
  font-size: 12px;
  color: #555;
  font-weight: 400;
  margin-left: 6px;
}
.boat-brands-country-group .boat-brands-grid {
  margin-top: 8px;
}
@media (max-width: 768px) {
  body .boat-brands-grid.boat-brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
  body .boat-brand-item.boat-brand-item { padding: 16px 8px 12px !important; min-width: 0 !important; }
  body .boat-brand-logo.boat-brand-logo { height: 112px !important; margin-bottom: 8px !important; }
  body .boat-brand-name-en { font-size: 13px !important; word-break: break-word; overflow-wrap: anywhere; }
  body .boat-brand-name-jp { font-size: 11px !important; word-break: break-word; overflow-wrap: anywhere; }
}
@media (max-width: 480px) {
  body .boat-brands-grid.boat-brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  body .boat-brand-item.boat-brand-item { padding: 12px 4px 8px !important; min-width: 0 !important; }
  body .boat-brand-logo.boat-brand-logo { height: 88px !important; margin-bottom: 6px !important; }
  body .boat-brand-name-en { font-size: 11px !important; word-break: break-word; overflow-wrap: anywhere; }
  body .boat-brand-name-jp { font-size: 11px !important; }
}
/* ブランド詳細表示（カード: ロゴ左+情報右 / 紹介文カード） */
.boat-brand-detail {
  display: flex;
  gap: 24px;
  align-items: stretch;
  margin: 24px 0;
}
.boat-brand-item--detail {
  flex: 0 0 440px;
  max-width: 440px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.boat-brand-item--detail .boat-brand-logo {
  flex: 0 0 195px;
  width: 195px;
  height: 195px;
  margin: 0;
}
.boat-brand-item--detail .boat-brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.boat-brand-detail-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  text-align: center;
}
.boat-brand-item--detail .boat-brand-name-en {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.boat-brand-item--detail .boat-brand-name-jp {
  font-size: 13px;
  color: #666;
}
.boat-brand-item--detail .boat-brand-country {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}
.boat-brand-item--detail .boat-brand-website-btn {
  align-self: center;
  margin-top: 4px;
}
.boat-brand-item--detail .boat-brand-count {
  font-size: 12px;
  color: #555;
  margin-top: 6px;
}
.boat-brand-description {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 20px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.boat-brand-description p {
  margin: 0 0 1em;
}
.boat-brand-description p:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  body .boat-brand-detail { flex-direction: column; gap: 16px; }
  body .boat-brand-item--detail { flex: 0 0 auto; max-width: 100%; width: 100%; }
  body .boat-brand-item--detail .boat-brand-logo { flex: 0 0 150px; width: 150px; height: 150px; }
  body .boat-brand-description { font-size: 13px; padding: 14px 16px; }
}

/* ============================================================
 * 日本全国マリーナ情報 (kazi-marinas)
 * ============================================================ */
.marinas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin: 24px 0;
}
.marina-item {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 0 0 14px;
  text-decoration: none;
  color: #1a3a52;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.marina-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(26, 58, 82, .12);
  border-color: #1a3a52;
}
.marina-item.active {
  border-color: #1a3a52;
  background: #f0f7fb;
  box-shadow: 0 0 0 2px #1a3a52;
}
/* ロゴエリア: 正方形 + 中央配置 + ゆったり余白 */
.marina-logo {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  margin: 0 0 12px;
  padding: 28%;          /* カード幅の28%を上下左右に */
  box-sizing: border-box;
}
.marina-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 480px) {
  .marina-logo { padding: 30%; }
}
.marina-logo-placeholder {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #666;
  padding: 8px 12px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  line-height: 1.4;
  max-width: 90%;
}
.marina-item .marina-region,
.marina-item .marina-name-jp,
.marina-item .marina-name-en,
.marina-item .marina-address,
.marina-item .marina-website-btn {
  margin-left: 14px;
  margin-right: 14px;
}

/* アライアンス: 住所欄 — レッドピンを中央に配置 → 改行 → 住所 */
.marina-address {
  display: block;
  text-align: center;
}
.marina-address-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px auto 6px;
  text-decoration: none;
  transition: transform .12s;
}
.marina-address-pin:hover { transform: translateY(-1px); }
.marina-address-text {
  display: block;
  text-align: center;
  line-height: 1.5;
}

/* アライアンス: WEBサイトボタン（コンパクト・グレー） */
.marina-website-btn {
  display: inline-block;
  margin: 8px auto 0;
  padding: 3px 12px;
  background: #f1f3f5;
  color: #555;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #e0e3e6;
  border-radius: 4px;
  align-self: center;
  transition: background .15s, color .15s;
}
.marina-website-btn:hover {
  background: #e8eaed;
  color: #1a3a52;
}
.marina-region {
  font-size: 11px;
  color: #fff;
  background: #1a3a52;
  padding: 2px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.marina-name-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.marina-name-en {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #666;
  margin-bottom: 6px;
}
.marina-address {
  font-size: 11px;
  color: #555;
  line-height: 1.5;
  margin-top: 4px;
}
@media (max-width: 768px) {
  body .marinas-grid.marinas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  body .marina-item.marina-item { padding: 12px 10px !important; min-width: 0 !important; }
  body .marina-logo.marina-logo { height: 90px !important; }
  body .marina-name-jp { font-size: 13px !important; }
  body .marina-name-en { font-size: 10px !important; }
  body .marina-address { font-size: 10px !important; line-height: 1.5 !important; }
}
@media (max-width: 390px) {
  body .marinas-grid.marinas-grid { gap: 10px !important; }
  body .marina-logo.marina-logo { height: 72px !important; }
}

/* page-marina.php: ヒーローとパンくずを中央寄せ（コンテンツ部は .content-with-sidebar が制御） */
.page-marina .breadcrumb {
  max-width: 1600px;
  margin: 0 auto;
  padding: 12px 40px;
}
.page-marina .cat-hero-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width: 768px) {
  .page-marina .breadcrumb,
  .page-marina .cat-hero-inner { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 480px) {
  .page-marina .breadcrumb,
  .page-marina .cat-hero-inner { padding-left: 16px; padding-right: 16px; }
}

/* page-marina.php: 地域フィルタ */
.page-marina .region-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 4px;
  padding: 0;
}
.page-marina .region-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border: 1px solid #ccd5dc;
  border-radius: 999px;
  background: #fff;
  color: #1a3a52;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.page-marina .region-btn:hover {
  background: #f0f7fb;
  border-color: #1a3a52;
}
.page-marina .region-btn.active {
  background: #1a3a52;
  color: #fff;
  border-color: #1a3a52;
}
.page-marina .region-btn .region-count {
  font-size: 11px;
  opacity: 0.7;
}
.page-marina .region-btn.active .region-count { opacity: 0.85; }

.page-marina .marinas-empty {
  text-align: center;
  padding: 60px 20px;
  color: #555;
  font-size: 14px;
}

.page-marina .page-extra-content {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid #e5e5e5;
}

@media (max-width: 480px) {
  .page-marina .region-btn { padding: 6px 12px; font-size: 12px; }
}

/* page-marina.php: 2 セクション（アライアンス / INDEX） */
.marinas-section {
  margin: 32px 0;
}
.marinas-section-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #1a3a52;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #1a3a52;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.marinas-section-count {
  font-size: 13px;
  font-weight: 500;
  color: #555;
}
.marinas-section-alliance .marinas-section-title { border-bottom-color: #c89b3c; }
/* セクションヘッド: 見出し左 + ボタン右 */
.marinas-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #1a3a52;
  flex-wrap: wrap;
}
.marinas-section-alliance .marinas-section-head { border-bottom-color: #c89b3c; }
.marinas-section-head > .marinas-section-title {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1;
  min-width: 0;
}
.marinas-section-articles-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: #1a3a52;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s, transform .12s;
}
.marinas-section-articles-btn:hover {
  background: #0f2638;
  color: #fff;
  transform: translateY(-1px);
}
@media (max-width: 480px) {
  .marinas-section-articles-btn { font-size: 11px; padding: 5px 10px; }
}

/* カード内リンクエリア（ロゴ+地域+名前） */
.marina-item-link {
  display: contents;
  text-decoration: none;
  color: inherit;
}

/* INDEX: 地域グループ */
.marinas-index-group { margin-bottom: 24px; }
.marinas-index-region {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #1a3a52;
  padding: 6px 14px;
  border-radius: 4px;
  margin: 0 0 10px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  letter-spacing: 0.05em;
}
.marinas-index-region-count {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}
.marinas-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 4px 12px;
}
.marinas-index-item { margin: 0; }
.marinas-index-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 8px;
  padding: 6px 6px;
  border-bottom: 1px dotted #ddd;
}
.marinas-index-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  text-decoration: none;
  border-radius: 4px;
  transition: background .12s, transform .12s;
  margin-top: 1px;
}
.marinas-index-map-btn:hover {
  background: #fdecea;
  transform: translateY(-1px);
}
.marinas-index-map-btn svg { display: block; }
.marinas-index-map-btn--disabled {
  visibility: hidden;
}
.marinas-index-content {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 8px;
}
a.marinas-index-name {
  color: #1a1a1a;
  text-decoration: none;
}
a.marinas-index-name:hover {
  color: #1a3a52;
  text-decoration: underline;
}

/* ========== Marina Favorite (bookmark) Button ========== */
.marina-fav-btn {
  background: transparent;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  color: #666;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, transform .12s;
  line-height: 0;
}
.marina-fav-btn:hover { color: #1a73e8; transform: scale(1.1); }
.marina-fav-btn.is-faved { color: #1a73e8; }
.marina-fav-btn:disabled { opacity: 0.5; cursor: wait; }
.marina-fav-icon { display: block; }
/* outline ↔ filled の切替 */
.marina-fav-btn .bm-filled  { display: none; }
.marina-fav-btn .bm-outline { display: block; }
.marina-fav-btn.is-faved .bm-filled  { display: block; }
.marina-fav-btn.is-faved .bm-outline { display: none; }

/* アライアンスカード上のハート: 絶対配置（右上） */
.marina-item { position: relative; }
.marina-item > .marina-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  pointer-events: auto;
}
.marina-item > .marina-fav-btn:hover { background: #fff; }

/* INDEX 行のハート: グリッド3列目 */
.marinas-index-item {
  grid-template-columns: 22px 1fr 28px;
}
.marinas-index-item > .marina-fav-btn { margin-top: 1px; }

/* ========== Mypage: お気に入りマリーナ一覧（囲いなし・色分けピン） ========== */
.marina-fav-section { margin: 20px 0; }
.marina-fav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px 48px;
}
.marina-fav-row {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dotted #e5e5e5;
  /* INDEX 行: ピン / 名前 / ボタン */
  grid-template-columns: 22px 1fr 28px;
}
.marina-fav-row.is-alliance {
  /* アライアンス: ピン / 小ロゴ / 名前 / ボタン */
  grid-template-columns: 22px 36px 1fr 28px;
}
.marina-fav-mini-logo {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
}
.marina-fav-mini-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* マイページ: 行末を内側に寄せ、解除ボタンを × 表示に */
.marina-fav-section .marina-fav-row { padding-right: 16px; }
.marina-fav-section .marina-fav-row .marina-fav-remove {
  position: static;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #ddd; border-radius: 50%;
  color: #888;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.marina-fav-section .marina-fav-row .marina-fav-remove:hover {
  color: #c55043; border-color: #c55043;
}
.marina-fav-section .marina-fav-row .marina-fav-remove .marina-fav-icon { display: none; }
.marina-fav-section .marina-fav-row .marina-fav-remove::after {
  content: "\00d7";
  font-size: 20px;
  line-height: 1;
  font-family: 'Inter', sans-serif;
  color: inherit;
}
.marina-fav-row .marinas-index-name {
  font-size: 13px;
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 600;
}
.marina-fav-row .marinas-index-name:hover {
  color: #1a3a52;
  text-decoration: underline;
}
.marina-fav-empty {
  padding: 24px;
  background: #fafafa;
  border-radius: 6px;
  color: #666;
  text-align: center;
  font-size: 13px;
}
.marina-fav-empty a { color: #1a3a52; }
.marinas-index-content > .marinas-index-name {
  font-weight: 600;
  font-size: 13px;
  grid-column: 1 / 2;
}
.marinas-index-content > .marinas-index-tel {
  color: #1a3a52;
  font-size: 11px;
  grid-column: 2 / 3;
  white-space: nowrap;
}
.marinas-index-content > .marinas-index-addr {
  color: #555;
  font-size: 11px;
  grid-column: 1 / -1;
}
.marinas-index-content > .marinas-index-link-icon {
  color: #1a3a52;
  font-size: 11px;
  grid-column: 2 / 3;
  align-self: start;
}
/* スコープなしの基本タイポ（マイページなど .marinas-index-content の外でも使うため） */
.marinas-index-name { font-weight: 600; font-size: 13px; }
.marinas-index-tel  { color: #1a3a52; font-size: 11px; }
.marinas-index-addr { color: #555; font-size: 11px; }
@media (max-width: 480px) {
  .marinas-index-list { grid-template-columns: 1fr; }
  .marinas-section-title { font-size: 17px; }
}

/* page-marina.php: Google マイマップ埋め込み */
.marina-mymap {
  margin: 48px 0 24px;
  padding-top: 32px;
  border-top: 1px solid #e5e5e5;
}
.marina-mymap-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #1a3a52;
  margin: 0 0 8px;
}
.marina-mymap-lead {
  font-size: 13px;
  color: #666;
  margin: 0 0 20px;
}
.marina-mymap-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  overflow: hidden;
  background: #f5f5f5;
}
.marina-mymap-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 768px) {
  .marina-mymap-title { font-size: 18px; }
  .marina-mymap-embed { aspect-ratio: 4 / 5; }
}

/* ============================================================
 * G-nav プルダウン (mega-menu) のサブカテゴリをピル型に
 * ============================================================ */
.mega-menu .mega-menu-body {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px 10px;
  padding: 28px 48px 32px;
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
}
.mega-menu .mega-menu-body a {
  display: inline-flex;
  align-items: center;
  padding: 8px 22px;
  border: 1px solid #d8d8d8;
  background: #fff;
  text-decoration: none;
  color: #1a1a1a;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
  line-height: 1.4;
}
.mega-menu .mega-menu-body a::before,
.mega-menu .mega-col a::before { content: none !important; }

/* ============================================================
 * SP では .reveal をデフォルトで可視化（IntersectionObserver の取りこぼし対策）
 *   - PC では従来通り opacity 0 → visible でフェードイン
 *   - SP は即座に opacity 1 で出す（白いレイヤー覆い回避）
 * ============================================================ */
@media (max-width: 768px) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
 * SP の根本修正: ページ別CSSの !important を確実に上書きする
 *   - top.css / article_member.css / article.css 内の
 *     .content-with-sidebar { grid-template-columns: 1fr 280px !important; } を打ち消し
 *   - 詳細度を chain で上げる（body / .main-wrap）→ ページ別CSSより必ず勝つ
 * ============================================================ */
@media (max-width: 1024px) {
  body .content-with-sidebar,
  .main-wrap .content-with-sidebar,
  .content-with-sidebar.content-with-sidebar {
    grid-template-columns: 1fr !important;
    padding: 0 24px !important;
    gap: 32px !important;
    max-width: 100% !important;
  }
  body .content-sidebar,
  .main-wrap .content-sidebar,
  .content-with-sidebar > .content-sidebar {
    display: none !important;
  }
}

@media (max-width: 768px) {
  body .content-with-sidebar,
  .main-wrap .content-with-sidebar,
  .content-with-sidebar.content-with-sidebar {
    padding: 0 16px !important;
    gap: 24px !important;
  }
}

@media (max-width: 480px) {
  body .content-with-sidebar,
  .main-wrap .content-with-sidebar,
  .content-with-sidebar.content-with-sidebar {
    padding: 0 12px !important;
  }
}

/* ============================================================
 * PC ハンバーガーパネル: 固定幅で右寄せ
 *   - page別CSSの left:240px だと巨大モニターでパネルが広がりすぎるため
 *   - 960px に固定し、右からスライドインする見た目を保つ
 * ============================================================ */
@media (min-width: 1025px) {
  body .hamburger-panel,
  .hamburger-panel.hamburger-panel {
    left: auto !important;
    right: 0 !important;
    width: 960px !important;
    max-width: 90vw !important;
  }
}

/* ============================================================
 * SP ハンバーガーパネル（page別CSSの left:240px を打ち消し）
 *   - すべてのページで SP 表示時はフル幅パネル + カテゴリ縦並び
 * ============================================================ */
@media (max-width: 1024px) {
  body .hamburger-panel,
  .hamburger-panel.hamburger-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  body .hamburger-nav-grid,
  .hamburger-nav-grid.hamburger-nav-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px 12px !important;
  }
  body .hamburger-panel-body,
  .hamburger-panel-body.hamburger-panel-body {
    flex-direction: column !important;
    padding: 20px 16px !important;
    gap: 24px !important;
  }
  body .hamburger-nav,
  body .hamburger-aside,
  .hamburger-panel .hamburger-nav,
  .hamburger-panel .hamburger-aside { width: 100% !important; }
  body .hamburger-nav-group > a {
    display: block !important;
    font-size: 14px !important;
    padding: 6px 0 !important;
    writing-mode: horizontal-tb !important;
  }
  body .hamburger-nav-group .ham-sub a {
    display: block !important;
    font-size: 12px !important;
    padding: 3px 0 !important;
  }
}

@media (max-width: 768px) {
  body .hamburger-nav-grid,
  .hamburger-nav-grid.hamburger-nav-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px 16px !important;
  }
  body .hamburger-nav-group > a { font-size: 15px !important; }
  body .hamburger-member-banner {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  body .hamburger-nav-grid,
  .hamburger-nav-grid.hamburger-nav-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  body .hamburger-panel-body { padding: 16px 14px !important; }
}

/* ============================================================
 * マイページ SP 微調整（高詳細度で確実に上書き）
 * ============================================================ */
@media (max-width: 768px) {
  body .mypage-wrap,
  .mypage-wrap.mypage-wrap {
    padding: 20px 16px 48px !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  body .profile-header,
  .profile-header.profile-header {
    padding: 32px 16px 28px !important;
  }
  body .profile-header-inner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 14px !important;
    align-items: center !important;
  }
  body .profile-avatar,
  .profile-avatar.profile-avatar {
    width: 80px !important;
    height: 80px !important;
    font-size: 26px !important;
  }
  body .profile-info h1 { font-size: 19px !important; margin-bottom: 6px !important; }
  body .profile-meta { font-size: 11px !important; gap: 12px !important; justify-content: center !important; flex-wrap: wrap !important; }
  body .section { margin-bottom: 36px !important; }
  body .section-header h2 { font-size: 18px !important; }
  /* SP: 見出しアイコンを h2 の左に配置 */
  body .section-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 10px !important;
  }
  body .section-header .kazi-motif {
    width: 42px !important;
    height: 14px !important;
    margin: 0 !important;
  }
  /* SP: KAZI Movie ブロックは左右フルブリード（余白ゼロ） */
  body .section#sec-youtube {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: calc(-1 * var(--container-px, 16px)) !important;
    margin-right: calc(-1 * var(--container-px, 16px)) !important;
    border-radius: 0 !important;
  }
  body .section#sec-youtube > * {
    padding-left: 16px;
    padding-right: 16px;
  }
  body .section#sec-youtube .youtube-videos {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body .section#sec-youtube .youtube-embed {
    border-radius: 0 !important;
  }

  body .notice-list li,
  .notice-list.notice-list li {
    flex-wrap: wrap;
    gap: 8px !important;
    padding: 14px 0 !important;
  }
  body .notice-title { width: 100%; font-size: 13px !important; line-height: 1.7 !important; }
  body .notice-date { font-size: 10px !important; min-width: auto !important; }

  body .benefit-list,
  .benefit-list.benefit-list { grid-template-columns: 1fr !important; gap: 12px !important; }
  body .benefit-item { padding: 18px !important; }

  body .empty-placeholder { padding: 24px 18px !important; font-size: 13px !important; }
}

@media (max-width: 480px) {
  body .profile-header,
  .profile-header.profile-header { padding: 24px 14px 22px !important; }
  body .profile-avatar,
  .profile-avatar.profile-avatar { width: 70px !important; height: 70px !important; font-size: 22px !important; }
  body .profile-info h1 { font-size: 17px !important; }
  body .breadcrumb { font-size: 11px !important; padding: 10px 14px !important; }
  body .mypage-wrap,
  .mypage-wrap.mypage-wrap { padding: 16px 14px 40px !important; }
}

/* ============================================================
 * Phase1: 全ページ SP 統一レイアウト（高詳細度・page別CSS の !important を打ち消し）
 *   - すべて body / .main-wrap / 二重クラス チェーンで詳細度を確保
 *   - !important 付与で page別CSS の上書きを保証
 *   - wireframe (responsive.css) の SP rules と整合する形で増援
 * ============================================================ */

/* ===== Tablet / SP 1024px以下: サイドバー強制1col + 隠す ===== */
@media (max-width: 1024px) {
  /* container 等の固有wrapper 幅調整 */
  body .container,
  body .main-wrap > .container,
  body .page-content > .container { padding-left: 24px !important; padding-right: 24px !important; }

  /* 各種 *-grid 強制1〜2col */
  body .grid-3.grid-3, body .grid-4.grid-4 { grid-template-columns: 1fr !important; }
  body .pickup-layout.pickup-layout { grid-template-columns: 1fr !important; gap: 32px 0 !important; }
  body .new-articles-grid.new-articles-grid { grid-template-columns: 1fr !important; }
  body .related-grid.related-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  body .pub-grid.pub-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
  body .service-banners.service-banners { grid-template-columns: 1fr !important; gap: 12px !important; }
  body .about-wrap.about-wrap { grid-template-columns: 1fr !important; gap: 32px !important; }
  body .benefit-grid.benefit-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  body .plan-grid.plan-grid { grid-template-columns: 1fr !important; }
  body .article-list.article-list { grid-template-columns: 1fr !important; }
  body .article-pager.article-pager { grid-template-columns: 1fr !important; }
  body .article-nav-prev-next.article-nav-prev-next { grid-template-columns: 1fr !important; gap: 14px !important; }
  body .bookmark-grid.bookmark-grid { grid-template-columns: 1fr !important; }
  body .history-list.history-list { grid-template-columns: 1fr !important; }

  /* Page Hero (catエリア共通) */
  body .cat-hero.cat-hero { padding: 12px 0 !important; }
  body .cat-hero.cat-hero .cat-hero-inner {
    padding: 0 14px !important;
    gap: 6px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  body .cat-hero.cat-hero h1 { font-size: 14px !important; letter-spacing: 0.04em !important; line-height: 1.4 !important; margin: 0 !important; white-space: normal !important; }
  body .cat-hero.cat-hero h1 .cat-hero-parent { font-size: 12px !important; }
  body .cat-hero.cat-hero p { font-size: 11px !important; line-height: 1.6 !important; text-align: left !important; margin: 0 !important; }
  body .cat-hero .kazi-motif { width: 26px !important; height: 9px !important; }
  body .sdc-hero.sdc-hero { padding: 60px 24px !important; }
  body .sdc-hero h1 { font-size: 32px !important; }

  /* Section 統一余白 */
  body .main-wrap .section,
  body .content-main .section { padding: 40px 0 !important; margin-bottom: 0 !important; }

  /* Form 入力（iOS 自動ズーム抑止・タップ44px）*/
  body .form-wrap input,
  body .form-wrap select,
  body .form-wrap textarea,
  body input[type=text],
  body input[type=email],
  body input[type=password],
  body input[type=url],
  body input[type=tel],
  body select,
  body textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }

  /* form-wrap 中央寄せ + 余白（SP は左右に余白を確保） */
  body .form-wrap.form-wrap,
  body .form-input-wrap.form-input-wrap {
    max-width: 100% !important;
    padding: 32px 16px 48px !important;
    margin: 0 auto !important;
  }

  /* wpmem 出力フォームの統一スタイル（label/input/select/textarea） */
  body .form-wrap label,
  body .form-wrap .wpmem_msg {
    display: block;
    margin: 14px 0 6px;
    font-size: 13px !important;
    font-weight: 600;
    color: #1a1a1a;
  }
  body .form-wrap input.textbox,
  body .form-wrap input[type="text"],
  body .form-wrap input[type="email"],
  body .form-wrap input[type="password"],
  body .form-wrap input[type="tel"],
  body .form-wrap input[type="url"],
  body .form-wrap select.dropdown,
  body .form-wrap select,
  body .form-wrap textarea {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    background: #fff !important;
    box-sizing: border-box !important;
  }

  /* wpmem の captcha / checkbox 群 */
  body .form-wrap .captcha,
  body .form-wrap .wpmem_captcha {
    margin: 18px 0;
    padding: 16px;
    background: #f7f7f7;
    border-radius: 6px;
  }
  body .form-wrap .captcha img,
  body .form-wrap .wpmem_captcha img {
    max-width: 100%;
    height: auto;
  }
  body .form-wrap input[type="checkbox"] {
    width: 18px !important;
    min-height: 0 !important;
    height: 18px !important;
    margin-right: 8px;
    vertical-align: middle;
  }
  body .form-wrap input.buttons,
  body .form-wrap .form-submit,
  body .form-wrap button[type="submit"] {
    display: block;
    width: 100% !important;
    margin: 24px 0 0 !important;
    padding: 16px !important;
    font-size: 15px !important;
    font-weight: 700;
  }
}
@media (max-width: 480px) {
  body .form-wrap.form-wrap,
  body .form-input-wrap.form-input-wrap {
    padding: 24px 14px 40px !important;
  }
}

/* ===== Mobile L 768px ===== */
@media (max-width: 768px) {
  body .pub-grid.pub-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
  body .related-grid.related-grid { grid-template-columns: 1fr !important; }
  body .benefit-grid.benefit-grid { grid-template-columns: 1fr !important; }

  /* Cat hero / SDC hero */
  body .cat-hero.cat-hero { padding: 10px 0 !important; }
  body .cat-hero.cat-hero .cat-hero-inner { padding: 0 12px !important; gap: 4px !important; }
  body .cat-hero.cat-hero h1 { font-size: 13px !important; }
  body .cat-hero.cat-hero h1 .cat-hero-parent { font-size: 11px !important; }
  body .cat-hero.cat-hero p { font-size: 10px !important; }
  body .cat-hero .kazi-motif { width: 22px !important; height: 8px !important; }
  body .sdc-hero.sdc-hero { padding: 48px 18px !important; }
  body .sdc-hero h1 { font-size: 28px !important; }
  body .sdc-hero p { font-size: 13px !important; }

  /* Section spacing */
  body .main-wrap .section,
  body .content-main .section { padding: 32px 0 !important; }

  /* breadcrumb */
  body .breadcrumb.breadcrumb { font-size: 11px !important; padding: 10px 16px !important; }

  /* Article header info (single.php restructure ) */
  body .article-header { display: block !important; padding: 0 !important; }
  body .article-header-img { aspect-ratio: 3/2 !important; width: 100% !important; background-size: cover !important; background-position: center !important; }
  body .article-header-info { padding: 20px 16px 8px !important; max-width: 100% !important; }
  body .article-header-info .article-title { font-size: 22px !important; line-height: 1.5 !important; margin: 8px 0 12px !important; }
  body .article-header-info .article-lead { font-size: 14px !important; line-height: 1.9 !important; }
  body .article-header-info .article-eyebrow { font-size: 10px !important; letter-spacing: 0.12em !important; margin: 6px 0 !important; }

  /* Article body padding (content-main で hold) */
  body .content-main.content-main { padding: 0 16px !important; }
  body .article-wrap.article-wrap { padding: 16px 0 32px !important; }

  /* Share-top wrap */
  body .share-top.share-top { flex-wrap: wrap !important; gap: 8px !important; padding: 14px !important; }
  body .share-top span { width: 100% !important; margin-bottom: 4px !important; }

  /* SP: 公開日＋ブックマーク と SHARE を横並び（JS で share-top を meta 内へ移動）
     順序: [日付] [ブックマーク] ... [SHARE icons] */
  body .article-meta.article-meta-with-share {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100%;
  }
  body .article-meta-with-share .article-date {
    order: 1 !important;
    flex: 0 0 auto !important;
    font-size: 11px !important;
  }
  body .article-meta-with-share .article-bookmark {
    order: 2 !important;
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    gap: 4px !important;
    min-height: 0 !important;
  }
  body .article-meta-with-share .article-bookmark .article-bookmark-label {
    display: none !important;
  }
  body .article-meta-with-share .article-bookmark svg {
    width: 18px !important;
    height: 18px !important;
  }
  body .article-meta-with-share .share-top {
    order: 3 !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: auto !important;
  }
  body .article-meta-with-share .share-top span,
  body .article-meta-with-share .share-top .share-label {
    display: none !important;
  }
  body .article-meta-with-share .share-top .share-btn,
  body .article-meta-with-share .share-top a {
    margin: 0 !important;
    padding: 4px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
  }
  body .article-meta-with-share .share-top svg {
    width: 22px !important;
    height: 22px !important;
  }

  /* Paywall */
  body .paywall.paywall { padding: 40px 22px !important; margin: 24px 0 !important; }
  body .paywall h3 { font-size: 22px !important; }
  body .paywall-benefits { gap: 16px !important; }
  body .paywall-register { padding: 14px 32px !important; font-size: 13px !important; }

  /* Article nav prev/next */
  body .prev-next-link.prev-next-link { padding: 14px 16px !important; font-size: 12px !important; }

  /* Big CTA */
  body .big-cta.big-cta { padding: 48px 18px !important; }
  body .big-cta h2 { font-size: 22px !important; }
  body .big-cta p { font-size: 13px !important; }
  body .big-cta-btn { padding: 14px 32px !important; font-size: 13px !important; }
}

/* ===== Mobile 480px ===== */
@media (max-width: 480px) {
  body .pub-grid.pub-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  body .container,
  body .main-wrap > .container,
  body .page-content > .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* cat-hero / SDC hero */
  body .cat-hero.cat-hero { padding: 22px 16px !important; }
  body .cat-hero h1 { font-size: 20px !important; }
  body .sdc-hero.sdc-hero { padding: 40px 16px !important; }
  body .sdc-hero h1 { font-size: 24px !important; }

  /* Article header */
  body .article-header-info { padding: 16px 14px 4px !important; }
  body .article-header-info .article-title { font-size: 20px !important; }
  body .article-header-info .article-lead { font-size: 13px !important; line-height: 1.85 !important; }

  body .content-main.content-main { padding: 0 14px !important; }

  /* Paywall mobile */
  body .paywall.paywall { padding: 32px 16px !important; }
  body .paywall h3 { font-size: 18px !important; }
  body .paywall-benefits { flex-direction: column !important; gap: 10px !important; }
  body .paywall-benefit { flex-direction: row !important; gap: 12px !important; padding: 8px 12px !important; }
  body .paywall-benefit-label { text-align: left !important; }
  body .paywall-register { padding: 12px 24px !important; width: 100% !important; box-sizing: border-box !important; }

  /* Small font tightening */
  body .breadcrumb.breadcrumb { font-size: 10px !important; padding: 8px 14px !important; }
  body .big-cta.big-cta { padding: 40px 16px !important; }
  body .big-cta h2 { font-size: 18px !important; }
}

/* ============================================================
 * Phase2: 細部の追加調整
 * ============================================================ */
@media (max-width: 768px) {
  /* 出版物グリッド: pub-grid を 3列でも崩れないよう pub-cover 縦横比固定 */
  body .pub-grid.pub-grid .pub-cover.pub-placeholder { min-height: 100px !important; }

  /* notice list の overflow */
  body .notice-list.notice-list { padding-left: 0 !important; }

  /* archive page padding */
  body .archive-main.archive-main { padding: 16px 0 !important; }
  body .subcat-tabs.subcat-tabs { padding: 12px 16px !important; gap: 10px 12px !important; }
  body .subcat-tabs .subcat-tab { font-size: 12px !important; padding: 6px 12px !important; }

  /* TOC */
  body .toc-box.toc-box,
  body .article-toc.article-toc { margin: 16px 0 !important; padding: 12px 14px !important; }
  body .toc-box.toc-box .toc-box-title,
  body .toc-box.toc-box .article-toc-toggle {
    font-size: 13px !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
  }
  body .toc-box.toc-box .toc-icon { font-size: 14px !important; }
  body .toc-box.toc-box ol,
  body .toc-box.toc-box .article-toc-list { padding-left: 18px !important; margin: 8px 0 0 !important; }
  body .toc-box.toc-box ol li,
  body .toc-box.toc-box .article-toc-list .toc-item { font-size: 12px !important; line-height: 1.6 !important; margin-bottom: 6px !important; }
  body .toc-box.toc-box ol li ol li,
  body .toc-box.toc-box .article-toc-list .toc-item.toc-h3 { font-size: 11px !important; padding-left: 10px !important; }
  body .toc-box.toc-box a { font-size: inherit !important; }

  /* Article tags */
  body .article-tags.article-tags { padding: 12px 0 !important; gap: 6px !important; }
  body .article-tag.article-tag { font-size: 11px !important; padding: 4px 12px !important; }

  /* SDC related forms */
  body .benefits-summary.benefits-summary { padding: 24px 18px !important; }
  body .benefits-summary-title { font-size: 14px !important; }
  body .benefits-summary-list { font-size: 12px !important; }

  /* マイページ profile-meta 改行 */
  body .profile-meta.profile-meta { font-size: 11px !important; flex-wrap: wrap !important; gap: 8px !important; justify-content: center !important; }

  /* footer sitemap 縮小 */
  body .footer-sitemap.footer-sitemap { padding: 32px 20px !important; gap: 24px 16px !important; }
  body .footer-local-nav.footer-local-nav { padding: 20px 20px !important; gap: 8px !important; }
}

@media (max-width: 480px) {
  body .pub-grid.pub-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  body .article-tags.article-tags .article-tag { font-size: 10px !important; padding: 3px 9px !important; }
  body .subcat-tabs.subcat-tabs { padding: 10px 14px !important; }
  body .footer-sitemap.footer-sitemap { padding: 24px 16px !important; }
  body .toc-box.toc-box,
  body .article-toc.article-toc { padding: 10px 12px !important; font-size: 12px !important; }
  body .toc-box.toc-box .toc-box-title,
  body .toc-box.toc-box .article-toc-toggle { font-size: 12px !important; }
  body .toc-box.toc-box ol li,
  body .toc-box.toc-box .article-toc-list .toc-item { font-size: 11px !important; }
}

/* ============================================================
 * 2026-06-05: 記事詳細ページ調整
 *   - パンくずをヘッダー直下右寄せに
 *   - ブックマークボタン（会員のみ）
 *   - 関連記事カード（wireframe 準拠）
 *   - いいね削除に伴うレイアウト整合
 * ============================================================ */

/* パンくずバー（ヘッダー直下フル幅・右寄せ） */
.article-breadcrumb-bar {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
.article-breadcrumb-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: left;
  font-size: 12px;
  color: #555;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  letter-spacing: 0.02em;
}
.article-breadcrumb-inner a { color: #2c5f8a; text-decoration: none; }
.article-breadcrumb-inner a:hover { text-decoration: underline; }
.article-breadcrumb-inner span { color: #1a1a1a; }
@media (max-width: 768px) {
  .article-breadcrumb-inner { padding: 0 14px; font-size: 11px; }
}

/* ブックマークボタン */
.article-bookmark {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid #ccc; border-radius: 999px;
  padding: 6px 14px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px; color: #555;
  cursor: pointer; transition: all 0.2s;
}
.article-bookmark:hover { border-color: #2c5f8a; color: #2c5f8a; }
.article-bookmark .bookmark-icon-filled { display: none; }
.article-bookmark.bookmarked,
.article-bookmark.bookmarked:hover {
  background: #2c5f8a; border-color: #2c5f8a; color: #fff !important;
}
.article-bookmark.bookmarked .article-bookmark-label,
.article-bookmark.bookmarked svg { color: #fff !important; fill: #fff; }
.article-bookmark.bookmarked .bookmark-icon-outline { display: none; }
.article-bookmark.bookmarked .bookmark-icon-filled  { display: inline-block; color: #fff; }

/* 関連記事カード（wireframe 準拠: 左body + 右画像、グリッド2列） */
.article-related .section-title {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 22px; font-weight: 700;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #1a1a1a;
}
/* === 関連記事グリッド（TOP「新着記事」と同じ .card-list 構造をsingle側で再宣言） === */
.article-related .new-articles-grid .card-list {
  display: flex; gap: 16px; align-items: flex-start;
  text-decoration: none; color: inherit; cursor: pointer;
  background: #fff;
}
.article-related .new-articles-grid .card-list-body { flex: 1; min-width: 0; }
.article-related .new-articles-grid .card-list .card-cat {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 9px; color: #1a1a1a;
  display: inline-block; margin-bottom: 6px;
  letter-spacing: 0.04em; font-weight: 600;
  background: #b8ecff; border-radius: 0;
  padding: 2px 8px;
}
.article-related .new-articles-grid .card-list .card-title {
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 17px; color: #1a1a1a; line-height: 1.5;
  font-weight: 600; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-related .new-articles-grid .card-list:hover .card-title { color: #2c5f8a; }
.article-related .new-articles-grid .card-list .card-excerpt {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px; color: #444; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-related .new-articles-grid .card-list .card-meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: #666; margin-top: 6px;
  letter-spacing: 0.04em;
}
.article-related .new-articles-grid .card-img-sm {
  width: 140px !important; height: 94px !important;
  flex-shrink: 0;
  background: #e0ddd8; overflow: hidden;
}
.article-related .new-articles-grid .card-img-sm img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.3s;
}
.article-related .new-articles-grid .card-list:hover .card-img-sm img { transform: scale(1.05); }
/* 広告スロットの SPONSORED ラベル */
.article-related .new-articles-grid .card-list-ad .card-cat-sponsored {
  background: transparent !important;
  color: #666 !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
}
@media (max-width: 768px) {
  .article-related .new-articles-grid .card-img-sm { width: 110px !important; height: 74px !important; }
  .article-related .new-articles-grid .card-list .card-title { font-size: 14px; }
}

/* === サイドバー広告: 正方形（1:1） === */
.content-sidebar .sidebar-ad,
.content-sidebar a.sidebar-ad {
  display: block !important;
  position: relative;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background-color: #e4e4e4;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  margin-top: 20px;
  text-decoration: none;
}
.content-sidebar .sidebar-ad .sidebar-ad-label {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.6); color: #fff;
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
  padding: 3px 10px; letter-spacing: 1.5px;
  z-index: 1;
}
/* 未設定時のプレースホルダ（斜めストライプ + 中央 AD） */
.content-sidebar .sidebar-ad-placeholder {
  background: repeating-linear-gradient(45deg, #f0f0f0 0 12px, #e4e4e4 12px 24px) !important;
}
.content-sidebar .sidebar-ad-placeholder::after {
  content: 'AD SPACE';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  color: #666; letter-spacing: 0.3em;
}

/* ブックマーク一覧（マイページ） */
.bookmark-section { margin: 32px 0; }
.bookmark-section .section-title {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 20px; font-weight: 700;
  color: #1a1a1a; margin: 0 0 16px;
  padding-bottom: 10px; border-bottom: 2px solid #1a1a1a;
}
.bookmark-empty { color: #555; font-size: 13px; padding: 16px 0; }
.bookmark-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.bookmark-card {
  position: relative;
  display: grid; grid-template-columns: 100px 1fr;
  background: #fff; border: 1px solid #eee; border-radius: 4px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow 0.2s;
}
.bookmark-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.bookmark-card-thumb {
  background-size: cover; background-position: center;
  background-color: #f5f5f5; min-height: 80px;
}
.bookmark-card-body { padding: 10px 30px 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.bookmark-card-cat { font-size: 10px; color: #2c5f8a; font-weight: 600; }
.bookmark-card-title { font-size: 13px; font-weight: 600; color: #1a1a1a; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bookmark-card-date { font-size: 10px; color: #666; margin-top: auto; }
.bookmark-card-remove {
  position: absolute; top: 4px; right: 6px;
  width: 22px; height: 22px; line-height: 1;
  background: rgba(255,255,255,0.9); border: 1px solid #ddd; border-radius: 50%;
  color: #555; font-size: 16px; cursor: pointer;
}
.bookmark-card-remove:hover { color: #c55043; border-color: #c55043; }

/* 前後記事ナビ（ワイヤー準拠 .article-pager） */
.article-pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin: 32px 0 56px;
  border-bottom: 1px solid #e8e8e8;
}
.article-pager .pager-btn {
  padding: 24px 0; display: block;
  text-decoration: none; color: #555; transition: color .2s;
  border-top: 1px solid #e8e8e8;
}
.article-pager .pager-btn:hover { color: #2c5f8a; }
.article-pager .pager-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px; font-weight: 400; color: #666; margin-bottom: 8px;
  letter-spacing: 0.03em;
}
.article-pager .pager-title {
  font-family: 'Noto Serif JP', 'Yu Mincho', serif;
  font-size: 15px; color: #1a1a1a; line-height: 1.6; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.article-pager .pager-btn:hover .pager-title { color: #2c5f8a; }
.article-pager .pager-btn.prev { padding-right: 32px; border-right: 1px solid #e8e8e8; }
.article-pager .pager-btn.next { text-align: right; padding-left: 32px; }
.article-pager .pager-btn.disabled { pointer-events: none; }
@media (max-width: 768px) {
  .article-pager .pager-btn.prev { padding-right: 16px; }
  .article-pager .pager-btn.next { padding-left: 16px; }
  .article-pager .pager-title { font-size: 13px; }
}

/* 記事ヘッダーのアイコン余白のみ（色/形はグローバル .lock-icon / .ad-icon に従う） */
.article-cats .lock-icon,
.article-cats .ad-icon {
  vertical-align: middle;
  margin-left: 8px;
}

/* === 鍵アイコン（全ページ共通: 背景なし・濃紺の鍵SVGのみ） === */
.lock-icon,
.post-card-title .lock-icon,
.article-cats .lock-icon,
.related-card-title .lock-icon {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  background: transparent !important;
  color: #2c5f8a !important;
  padding: 0 !important;
  border-radius: 0 !important;
  vertical-align: middle;
  line-height: 1;
  margin-right: 6px;
}
.lock-icon svg,
.post-card-title .lock-icon svg,
.article-cats .lock-icon svg,
.related-card-title .lock-icon svg {
  width: 12px !important; height: 14px !important;
  fill: #2c5f8a !important;
}

/* === 記事メタ: 日付（上）→ ブックマーク（下）の縦並び・左寄せ === */
.article-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px;
  margin-top: 16px;
}
.article-meta .article-date     { order: 1; margin: 0 !important; }
.article-meta .article-bookmark { order: 2; margin: 0 !important; }

/* === ADバッジ全ページ共通（淡いグレーボックス + 白文字） === */
.ad-icon {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif !important;
  font-size: 10px !important; font-weight: 700 !important;
  color: #fff !important; background: #bcbcbc !important;
  padding: 3px 9px !important; border-radius: 4px !important;
  letter-spacing: 0.08em !important; line-height: 1 !important;
}

/* === 記事本文内の画像を自動中央配置 + 本文幅にフィット === */
.article-body img,
.article-body figure,
.article-body .wp-block-image {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  margin: 1.6em auto;
}
.article-body figure img,
.article-body .wp-block-image img,
.article-body p > img,
.article-body > img {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  margin: 0 auto;
}
.article-body figure figcaption,
.article-body .wp-block-image figcaption {
  text-align: center;
  font-size: 12px;
  color: #555;
  margin-top: 6px;
  font-family: 'Noto Sans JP', sans-serif;
}
/* 明示的に小さく表示したい画像は .size-thumbnail / .size-medium 等で縮小可 */
.article-body img.size-thumbnail,
.article-body img.size-medium {
  width: auto !important; max-width: 100%;
}
/* 明示的なフロート指定は維持 */
.article-body .alignleft,
.article-body img.alignleft {
  float: left; margin: 0.4em 1.6em 1em 0;
}
.article-body .alignright,
.article-body img.alignright {
  float: right; margin: 0.4em 0 1em 1.6em;
}
.article-body .aligncenter,
.article-body img.aligncenter {
  float: none; display: block; margin-left: auto; margin-right: auto;
}
.article-body .alignwide,
.article-body .alignfull {
  margin-left: auto; margin-right: auto;
}

/* === 本文 縦長画像はPC時のみ65%中央配置（SPは100%のまま） === */
@media (min-width: 769px) {
  .article-body img.is-portrait {
    width: 65% !important;
    max-width: 65% !important;
    margin: 1.6em auto !important;
  }
  .article-body figure.has-portrait,
  .article-body .wp-block-image.has-portrait {
    width: 65% !important;
    max-width: 65% !important;
    margin: 1.6em auto !important;
  }
  .article-body figure.has-portrait img,
  .article-body .wp-block-image.has-portrait img {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

/* === 本文 iframe (YouTube等) のレスポンシブ === */
.article-body .videoWrapper,
.article-body figure.wp-block-embed,
.article-body figure.wp-block-embed-youtube {
  width: 100% !important;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.6em 0 !important;
  position: relative;
  height: auto !important;
}
.article-body .videoWrapper iframe,
.article-body figure.wp-block-embed iframe,
.article-body iframe[src*="youtube.com"],
.article-body iframe[src*="youtu.be"],
.article-body iframe[src*="vimeo.com"] {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}
/* videoWrapper 内のラッピング要素（span/strong など）を解除 */
.article-body .videoWrapper > span,
.article-body .videoWrapper > strong,
.article-body .videoWrapper > span > strong {
  display: contents !important;
}

/* === シェアボタン: アイコンのみ表示・枠なし === */
.share-top .share-btn.share-icon-only,
.share-bottom .share-btn.share-icon-only {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 36px; height: 36px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: #1a1a1a;
  transition: color 0.2s, opacity 0.2s;
  font-size: 0;
  box-shadow: none !important;
}
.share-top .share-btn.share-icon-only:hover,
.share-bottom .share-btn.share-icon-only:hover {
  color: #2c5f8a !important;
  background: transparent !important;
  opacity: 0.8;
}
.share-top .share-btn.share-icon-only svg,
.share-bottom .share-btn.share-icon-only svg {
  width: 18px; height: 18px; fill: currentColor; display: block;
}
/* SHARE : ラベルのみテキスト */
.share-top .share-label,
.share-bottom .share-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; color: #555;
  margin-right: 4px;
}
/* シェアボタンの外部リンクアイコン（a[target=_blank]::after）抑止 */
.share-top .share-btn[target="_blank"]::after,
.share-bottom .share-btn[target="_blank"]::after { content: none !important; display: none !important; }

/* === 目次: 大見出し(h2) と 小見出し(h3) の階層を表示 === */
.article-toc-list .toc-item.toc-h2 {
  font-size: 14px;
  font-weight: 500;
}
.article-toc-list .toc-item.toc-h3 {
  font-size: 12px;
  padding-left: 18px;
  color: #555;
  position: relative;
}
.article-toc-list .toc-item.toc-h3::before {
  content: '└';
  position: absolute;
  left: 4px;
  color: #888;
  font-size: 11px;
}
.article-toc-list .toc-item.toc-h3 a { color: #555; }

/* === シェアブロック: 上下のラインを除去・上部余白を詰める === */
.article-wrap > .share-top {
  margin-top: -16px !important;
  margin-bottom: 16px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.share-bottom {
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding: 8px 0 !important;
  margin-bottom: 32px !important;
}

/* === 記事ヘッダーのカテゴリーバッジ: 下線なし === */
.article-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.article-cats .article-cat-badge,
.article-cats a.article-cat-badge {
  text-decoration: none !important;
  margin: 0 !important;
}
.article-cats .article-cat-badge:hover { text-decoration: none !important; opacity: 0.8; }
/* サブカテゴリはひと回り小さく + 控えめ配色 */
.article-cats .article-cat-badge-sub {
  background: #e6f4ff !important;
  color: #2c5f8a !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  line-height: 1.4 !important;
}

/* === 記事ヘッダーのフラグ（鍵 / AD）はカテゴリ列の下・左寄せ === */
.article-flags {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  justify-content: flex-start;
}
.article-flags .lock-icon,
.article-flags .ad-icon {
  margin: 0 !important;
}
/* 記事ヘッダーの .article-cats 内のアイコン余白は不要に */
.article-cats .lock-icon,
.article-cats .ad-icon {
  margin-left: 0 !important;
}

/* === カテゴリ多数時のアコーディオン === */
.article-cats.article-cats-collapsible.is-collapsed .article-cat-extra { display: none !important; }
.article-cats.article-cats-collapsible:not(.is-collapsed) .article-cat-extra { display: inline-flex !important; }
.article-cats-toggle {
  appearance: none;
  background: transparent;
  border: 1px dashed #999;
  border-radius: 999px;
  color: #555;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px; font-weight: 500;
  padding: 3px 12px;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.article-cats-toggle:hover { border-color: #2c5f8a; color: #2c5f8a; background: #f5f9fc; }
.article-cats-toggle .article-cats-toggle-less { display: none; }
.article-cats:not(.is-collapsed) .article-cats-toggle .article-cats-toggle-more { display: none; }
.article-cats:not(.is-collapsed) .article-cats-toggle .article-cats-toggle-less { display: inline; }

/* === タイトル上の余白を追加 === */
.article-header-info .article-title {
  margin-top: 18px !important;
}

/* === Yoast プライマリカテゴリ UI を念のため CSS でも非表示 === */
.wpseo-primary-term-screen,
.editor-post-taxonomies__primary-term,
[class*="primary-term"] { display: none !important; }

/* === カバー画像なしの代替: 白背景 + ロゴ中央 === */
.card-img-sm.card-img-sm--placeholder,
.post-card-thumb.post-card-thumb--placeholder,
.bookmark-card-thumb--placeholder {
  background: #fff !important;
  border: 1px solid #eee;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.card-img-sm.card-img-sm--placeholder img,
.post-card-thumb.post-card-thumb--placeholder img,
.post-card-placeholder-logo {
  width: 60% !important;
  height: auto !important;
  max-width: 100px;
  max-height: 60%;
  object-fit: contain !important;
  opacity: 0.55;
  transition: none !important;
  transform: none !important;
}
/* hover時の拡大も抑制 */
.card-list:hover .card-img-sm.card-img-sm--placeholder img,
.post-card:hover .post-card-thumb.post-card-thumb--placeholder img { transform: none !important; }

/* 詳細ページ: カバー無し時に画像枠の余白を詰める */
.article-header.article-header--no-img { grid-template-columns: 1fr !important; }
.article-header.article-header--no-img .article-header-info { padding: 32px 40px; }
@media (max-width: 768px) {
  .article-header.article-header--no-img .article-header-info { padding: 20px 16px; }
}

/* =============================================
 * 記事下「掲載写真」teaser（single.php）
 * ============================================= */
.article-gallery-teaser { margin: 40px 0 28px; }
.gallery-teaser-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 14px; gap: 16px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid #e8e8e8;
}
.gallery-teaser-title {
  font-size: 18px; font-weight: 700; margin: 0; letter-spacing: 0.04em; color: #1a1a1a;
}
.gallery-teaser-more {
  color: #12488d; font-size: 13px; text-decoration: none; font-weight: 500;
}
.gallery-teaser-more:hover { text-decoration: underline; }
.gallery-teaser-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.gallery-teaser-item {
  display: block; aspect-ratio: 3/2;
  background: #e0ddd8 center/cover no-repeat;
  transition: opacity .2s ease;
}
.gallery-teaser-item:hover { opacity: .85; }
@media (max-width: 768px) {
  .article-gallery-teaser { margin: 28px 0 20px; }
  .gallery-teaser-head { margin-bottom: 10px; }
  .gallery-teaser-title { font-size: 16px; }
  .gallery-teaser-more { font-size: 12px; }
  .gallery-teaser-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

/* === 一覧カードの複数カテゴリ表示（card-cats wrapper） === */
.card-list .card-cats {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  margin-bottom: 6px;
}
.card-list .card-cats .card-cat { margin-bottom: 0; }
/* 子カテゴリは薄いブルー */
.card-list .card-cats .card-cat.is-child { background: #e6f3fd; }

/* === 記事ヘッダーが YouTube 動画のとき === */
.article-header-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; height: auto !important;
}
.article-header-video iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

/* === カテゴリ archive の h1: 親カテゴリを子と同サイズで前置（薄めで区別） === */
.cat-hero h1 .cat-hero-parent {
  font-weight: inherit;
  opacity: 0.55;
  margin-right: 18px; letter-spacing: 0.02em;
}

/* === サブカテゴリータブ ベース：すべてのページで pill 形状を共通化
 *   - /category/.../ はテンプレ側で inline style 指定済だが重複しても問題なし
 *   - /calendar/ など inline style 未指定のページにも適用される
 * === */
.subcat-tabs,
body .subcat-tabs.subcat-tabs {
  display: flex !important;
  gap: 12px 16px !important;
  flex-wrap: wrap !important;
  /* pill 化したため底ボーダーは不要（pages/news.css などの base ルールを打ち消す） */
  border-bottom: 0 !important;
}
/* padding は各ページ側（inline style / wrapper クラス）で持つため上書きしない。
   inline-style が無いページ向けの最低限 padding は個別に補う。 */
.movie-index-main .subcat-tabs { padding: 16px 0; }
.subcat-tabs .subcat-tab {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 16px;
  font-size: 13px; font-weight: 600;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}

/* === サブカテゴリータブ：記事数（active時は反転側に合わせて色調整） === */
.subcat-tab .subcat-tab-count {
  color: #555;
  font-size: 11px;
  font-weight: 500;
  margin-left: 2px;
}
body .subcat-tabs .subcat-tab.active .subcat-tab-count,
.subcat-tabs a.subcat-tab.active .subcat-tab-count {
  color: rgba(255,255,255,0.7) !important;
}

/* === サブカテゴリータブ：active 時に黒反転（インラインstyleに勝つよう詳細度上げ + !important） === */
body .subcat-tabs .subcat-tab.active,
.subcat-tabs a.subcat-tab.active {
  background: #1a1a1a !important;
  color: #fff !important;
  border-color: #1a1a1a !important;
}
body .subcat-tabs .subcat-tab:hover,
.subcat-tabs a.subcat-tab:hover {
  background: #f5f5f5;
}
body .subcat-tabs .subcat-tab.active:hover,
.subcat-tabs a.subcat-tab.active:hover {
  background: #000 !important;
}

/* === 年プルダウン（新着一覧の絞り込み） === */
.archive-year-select {
  display: inline-block;
  padding: 7px 30px 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%231a1a1a'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 8px;
}
.archive-year-select:hover {
  border-color: #1a1a1a;
}

/* === アーカイブ並び替えタブ（右寄せ・コンテンツ列に揃える） === */
.archive-sort-row {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  padding: 16px 40px 20px;
  padding-right: calc(40px + 280px + 48px); /* sidebar(280) + gap(48) ぶん内側に */
  max-width: 1600px; margin: 0 auto;
}
@media (max-width: 1024px) {
  .archive-sort-row { padding: 16px 24px 20px; }
}
@media (max-width: 768px) {
  .archive-sort-row { padding: 16px 16px 28px; }
  /* 一覧の最初のカードを sort 行と詰めすぎないよう padding-top を復活 */
  body .article-list .card-list:first-child { padding-top: 20px !important; }
  body main .card-list:first-child { padding-top: 20px !important; }
}
.archive-sort-btn {
  display: inline-flex; align-items: center;
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  border: 1px solid #ddd; border-radius: 0;
  color: #1a1a1a; background: #fff;
  text-decoration: none; transition: border-color .15s, background .15s, color .15s;
}
.archive-sort-btn:hover { border-color: #1a1a1a; text-decoration: none; }
.archive-sort-btn.is-active {
  background: #1a1a1a; color: #fff; border-color: #1a1a1a;
}

/* === 記事本文：テキストを少し濃く・図キャプション斜体・リンク KAZIブルー === */
body .article-body,
body .article-body p,
body .article-body li {
  color: #0e2233;
}
body .article-body figcaption,
body .article-body figure .wp-caption-text,
body .article-body .wp-caption-text {
  font-style: italic; color: #555; font-size: 12px; line-height: 1.6;
  margin-top: 4px;
}
/* 本文・記事内リンクは KAZI ブルーで統一、hover は下線 */
body .article-body a,
body .article-content a,
body .article-toc a {
  color: #12488d; text-decoration: none;
  font-weight: 600;
  transition: opacity .15s;
}
body .article-body a:hover,
body .article-content a:hover,
body .article-toc a:hover {
  text-decoration: underline; opacity: 0.85;
}
/* 目次の番号を非表示 */
body .article-toc-list { list-style: none !important; padding-left: 0 !important; counter-reset: none !important; }
body .article-toc-list li { list-style: none !important; }
body .article-toc-list li::marker { content: none !important; }
body .article-toc-list .toc-item { list-style: none; }

/* === 全リンク共通：マウスオーバー処理 === */
body a:not(.card-list):not(.post-card):not(.share-btn):not(.archive-sort-btn):not(.subcat-tab):not(.card-list-ad):not(.boat-brand-item-link):not(.btn-login):not(.sidebar-sdclub):not(.logo):not(.hamburger-member-banner) {
  transition: opacity .15s;
}
body a:not(.card-list):not(.post-card):not(.share-btn):not(.archive-sort-btn):not(.subcat-tab):not(.card-list-ad):not(.boat-brand-item-link):not(.btn-login):not(.sidebar-sdclub):not(.logo):not(.hamburger-member-banner):hover {
  opacity: 0.7;
}

/* === 一覧ページネーション（wireframe ボックス型 ボタンスタイル）=== */
body .archive-pagination,
body .navigation.pagination {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px; margin: 48px 0 24px;
}
body .archive-pagination a,
body .archive-pagination span,
body .navigation.pagination a,
body .navigation.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border: 1px solid #ddd; background: #fff; color: #1a1a1a;
  font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none; box-sizing: border-box;
  transition: border-color .15s, background .15s, color .15s;
}
body .archive-pagination a:hover,
body .navigation.pagination a:hover {
  border-color: #1a1a1a; text-decoration: none;
}
body .archive-pagination .current,
body .navigation.pagination .current {
  background: #1a1a1a; color: #fff; border-color: #1a1a1a;
}
body .archive-pagination .dots,
body .navigation.pagination .dots {
  background: transparent; border-color: #ddd; color: #666; cursor: default;
}
body .navigation.pagination .screen-reader-text { display: none; }
@media (max-width: 480px) {
  body .archive-pagination,
  body .navigation.pagination { gap: 6px; margin: 32px 0 16px; }
  body .archive-pagination a,
  body .archive-pagination span,
  body .navigation.pagination a,
  body .navigation.pagination .page-numbers {
    min-width: 38px; height: 38px; padding: 0 10px; font-size: 12px;
  }
}

/* === WordPress 管理バー対応 ===
   ログイン中は WP が body に .admin-bar を付与し、html に margin-top:32px(SP:46px) を自動で入れる。
   position: sticky / fixed の要素は html の margin-top に追随しないため、個別に top をオフセットする。
   各 page CSS で `header { position: sticky; top: 0 }` を共通で指定しているので PC でも必要。 */
.admin-bar header {
  top: 32px !important;
}
.admin-bar .sidebar-sticky {
  top: calc(80px + 32px);
}
@media screen and (max-width: 782px) {
  /* SP: 管理バーは46px */
  .admin-bar header {
    top: 46px !important;
  }
  .admin-bar .sidebar-sticky {
    top: calc(80px + 46px);
  }
}

/* === ハンバーガー内 SeaDream Club バナーを正方形に === */
.hamburger-member-banner {
  aspect-ratio: 1 / 1;
  max-width: 280px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px !important;
}
.hamburger-member-banner .ham-member-label,
.hamburger-member-banner .ham-member-title,
.hamburger-member-banner .ham-member-desc {
  margin-bottom: 0 !important;
}

/* === 記事タグの先頭に「#」アイコン === */
.article-tag::before {
  content: '#';
  margin-right: 4px;
  color: #999;
  font-weight: 600;
}

/* === ハンバーガー aside 幅縮小 + 検索をバナー幅に揃える === */
@media screen and (min-width: 783px) {
  .hamburger-aside {
    flex: 0 0 320px !important;
    max-width: 320px;
    /* 元の grid-template-columns: repeat(2, 1fr) を打ち消して縦並びに */
    display: flex !important;
    flex-direction: column !important;
    gap: 24px;
  }
}
.hamburger-search,
.hamburger-search-box {
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
/* SEARCH input が flex の中で正しく縮むように（右切れ対策） */
.hamburger-search-box {
  box-sizing: border-box;
  width: 100%;
}
.hamburger-search-box input {
  min-width: 0;
  width: 100%;
}

/* === OTHER メニューを左ナビの下に配置 === */
/* page CSS 側の `.hamburger-local { padding: 24px 48px }` 左右を打ち消し、左揃えにする */
.hamburger-nav .hamburger-local {
  margin-top: 40px;
  padding: 24px 0 0 0 !important;
  border-top: 1px solid #e8e8e8;
}
/* 「OTHER」見出しは非表示 */
.hamburger-nav .hamburger-local-label {
  display: none !important;
}

/* === FOLLOW US （ハンバーガー内 SNS リンク群） === */
.hamburger-nav .hamburger-sns {
  margin-top: 32px;
  padding: 24px 0 0 0;
  border-top: 1px solid #e8e8e8;
}
.hamburger-nav .hamburger-sns-label {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #999;
  margin-bottom: 12px;
}
.hamburger-nav .hamburger-sns-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.hamburger-nav .hamburger-sns-links a,
.hamburger-nav .hamburger-sns-links a:link,
.hamburger-nav .hamburger-sns-links a:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  color: #333 !important;
  text-decoration: none !important;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  transition: color .15s;
}
.hamburger-nav .hamburger-sns-links a:hover {
  color: #0e2233 !important;
}
.hamburger-nav .hamburger-sns-links a svg {
  flex-shrink: 0;
  color: #555;
}
.hamburger-nav .hamburger-sns-links a:hover svg {
  color: #0e2233;
}
.hamburger-nav .hamburger-sns-links a::after {
  display: none !important;
}

@media (max-width: 768px) {
  .hamburger-nav .hamburger-sns {
    margin-top: 24px;
    padding-top: 20px;
  }
  .hamburger-nav .hamburger-sns-links {
    gap: 6px 16px;
  }
  .hamburger-nav .hamburger-sns-links a {
    padding: 6px 0;
    min-height: 36px;
    font-size: 13px;
  }
}

/* === ハンバーガー メインカテゴリ 2カラム + サブカテゴリ1行表示 ===
   responsive.css 1461 の 3カラム+ham-sub非表示 / 240の2col指定を上書き */
body .hamburger-nav-grid.hamburger-nav-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  column-gap: 28px !important;
  row-gap: 22px !important;
}
body .hamburger-nav .hamburger-nav-group > a {
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 8px 0 6px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #e8e8e8 !important;
  line-height: 1.3 !important;
  color: #111 !important;
}
body .hamburger-nav .hamburger-nav-group .ham-sub {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  gap: 4px 14px !important;
  margin-top: 6px !important;
}
body .hamburger-nav .hamburger-nav-group .ham-sub a {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  padding: 2px 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  border-bottom: none !important;
  color: #555 !important;
}
body .hamburger-nav .hamburger-nav-group .ham-sub a::before {
  content: "›";
  margin-right: 4px;
  color: #999;
}
body .hamburger-nav .hamburger-nav-group .ham-sub a:hover {
  color: #0e2233 !important;
}

@media (max-width: 480px) {
  body .hamburger-nav-grid.hamburger-nav-grid {
    grid-template-columns: 1fr !important;
    row-gap: 16px !important;
  }
  body .hamburger-nav .hamburger-nav-group > a { font-size: 15px !important; }
}

/* === TOP: 新着・ピックアップの上余白を詰める / ピックアップ2 の見出し非表示 === */
body .section#sec-new,
body .section#sec-pickup {
  padding-top: 0 !important;
}
body .section#sec-pickup2 .section-header { display: none !important; }
body .section#sec-pickup2 { padding-top: 0 !important; }

/* ピックアップ小枠リストの最終カードの下線を取る */
body .pickup-list .card-list:last-child { border-bottom: none !important; }

/* Kazi Movie の見出し上を詰める + ブロック背景をカジブルー・グラデーションに */
body .section#sec-youtube {
  background: linear-gradient(135deg, #000 0%, #2c5f8a 50%, #3d7eb0 100%) !important;
  padding-top: 48px !important;
  padding-bottom: 56px !important;
  padding-left: 36px !important;
  padding-right: 36px !important;
}
/* グローバル配置（footer の直上）: 画面幅いっぱいに広げて中央を最大幅で寄せる */
body .section#sec-youtube.sec-youtube--global {
  margin: 56px 0 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body .section#sec-youtube.sec-youtube--global > * {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 36px;
  padding-right: 36px;
  box-sizing: border-box;
}
/* セクション見出しの色（base 不読込ページでも見えるよう最低限を明示） */
body .section#sec-youtube .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 28px;
  border-bottom: none;
  padding-bottom: 0;
}
body .section#sec-youtube .section-header h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}
body .section#sec-youtube .section-header[data-en]::before {
  content: attr(data-en);
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.25em;
  margin-bottom: 14px;
}
body .section#sec-youtube .section-header[data-en]::after {
  content: '';
  display: block;
  width: 32px; height: 1px;
  margin: 14px auto 0;
  background: rgba(255,255,255,.5);
}
/* KAZI ロゴモチーフ SVG: base CSS（pages/top.css）が読み込まれないページ向けに最低限のサイズを保証
   sec-youtube / sec-publication など任意の section-header に適用 */
.section-header .kazi-motif {
  display: block;
  width: 60px;
  height: 18px;
  margin-bottom: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.section-header .kazi-motif svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Publication / その他のセクション見出し（top.css 不読込ページ向け） */
.sec-publication .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 28px;
  border-bottom: none;
  padding-bottom: 0;
}
.sec-publication .section-header h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: #1a1a1a;
}
.sec-publication .section-header[data-en]::before {
  content: attr(data-en);
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.25em;
  color: #666;
  margin-bottom: 14px;
  text-transform: uppercase;
  font-weight: 600;
}
.sec-publication .section-header[data-en]::after {
  content: '';
  display: block;
  width: 32px; height: 1px;
  margin: 14px auto 0;
  background: #1a3a55;
}

/* ============================================================
 * cat-hero（ページ／カテゴリーアーカイブの上部見出し）の
 *   h1 の左に KAZI モチーフ（3 本斜線）アイコンを挿入。全ページ共通。
 * ============================================================ */
.cat-hero .cat-hero-inner h1 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.cat-hero .cat-hero-inner h1::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 56px;
  height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 871.26 235.78' fill='%231a3a55'%3E%3Cpolygon points='728.28 0 689.37 0 354.11 235.78 393.01 235.78 728.28 0'/%3E%3Cpolygon points='599.29 0 335.27 0 0 235.78 264.02 235.78 599.29 0'/%3E%3Cpolygon points='864.07 0 825.16 0 489.9 235.78 528.8 235.78 864.07 0'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (max-width: 640px) {
  .cat-hero .cat-hero-inner h1 { gap: 10px; }
  .cat-hero .cat-hero-inner h1::before { width: 42px; height: 13px; }
}
body .section#sec-youtube .section-header h2,
body .section#sec-youtube.reveal.visible .section-header h2 {
  color: #fff !important;
}
body .section#sec-youtube .section-header::before,
body .section#sec-youtube.reveal.visible .section-header::before {
  color: rgba(255,255,255,.7) !important;
}
body .section#sec-youtube .section-header::after,
body .section#sec-youtube.reveal.visible .section-header::after {
  background: rgba(255,255,255,.5) !important;
}
body .section#sec-youtube .section-header .kazi-motif polygon,
body .section#sec-youtube.reveal.visible .section-header .kazi-motif polygon {
  fill: #fff !important;
}
body .section#sec-youtube .youtube-info-left h3,
body .section#sec-youtube .youtube-info-left h3 a,
body .section#sec-youtube .youtube-info-left p,
body .section#sec-youtube .youtube-stat-value,
body .section#sec-youtube .youtube-stat-label {
  color: #fff !important;
}

/* Kazi Movie
   上段: 動画 2 本横並び（1本だけなら中央 1col）
   下段: 左=チャンネル名+説明、右=統計3つ縦並び */
body .section#sec-youtube .youtube-videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
body .section#sec-youtube .youtube-videos.youtube-videos-1 {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin: 0 auto;
}
body .section#sec-youtube .youtube-videos .youtube-embed {
  position: relative;
  aspect-ratio: 16/9;
  background: #1a1a1a;
}
body .section#sec-youtube .youtube-videos .youtube-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
body .section#sec-youtube .youtube-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  margin-top: 36px;
  align-items: start;
  padding-top: 0;
  border-top: none;
}
body .section#sec-youtube .youtube-info-left h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 16px;
}
body .section#sec-youtube .youtube-info-left p {
  font-size: 13px;
  color: #444;
  line-height: 1.8;
  font-weight: 600;
  margin: 0;
}
body .section#sec-youtube .youtube-info-right .youtube-stats {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 28px;
  border-top: none;
  margin-top: 0;
  padding-top: 0;
  align-items: flex-start;
  justify-content: flex-start;
}
body .section#sec-youtube .youtube-info-right .youtube-stat {
  text-align: left;
}
body .section#sec-youtube .youtube-info-right .youtube-stat-value {
  font-size: 24px;
}
body .section#sec-youtube .youtube-stat-value .unit {
  font-size: 0.55em;
  font-weight: 600;
  margin-left: 2px;
  letter-spacing: 0;
}

/* 「ヨット＆ボート紹介動画 INDEX」白枠線 CTA ボタン（stats の下） */
body .section#sec-youtube .youtube-cta-btn {
  display: inline-block;
  margin-top: 24px;
  padding: 12px 28px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff !important;
  text-decoration: none !important;
  background: transparent;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-pill, 9999px);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body .section#sec-youtube .youtube-cta-btn:hover {
  background: #fff;
  color: #1a3a55 !important;
  border-color: #fff;
}

/* フッター下段の規約系リンク（会社案内 / お問い合わせ / プライバシー / 会員規約 / FAQ）
   元の rgba(255,255,255,.4) では薄すぎたので濃く */
body .footer-corporate a {
  color: rgba(255,255,255,.82) !important;
  font-weight: 600 !important;
}
body .footer-corporate a:hover {
  color: #fff !important;
}

/* TOP 広告バナー：画像のみで 2 カラム配置（PR ラベル / 本文 / 余白 / 枠を全部排除）
   main 列内で素直に2カラム、画面貫通はしない */
body .section#sec-ad-top1,
body .section#sec-ad-top2 {
  padding-top: 8px !important;
  padding-bottom: 20px !important;
}
/* バナー上は前セクションとの間隔を詰める / KAZI MOVIE との間は広めに空ける */
body .section#sec-ad-top1 {
  margin-top: -16px !important;
  margin-bottom: 56px !important;
}
body #sec-ad-top1 .ad-row-2col,
body #sec-ad-top2 .ad-row-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
body #sec-ad-top1 .ad-banner,
body #sec-ad-top2 .ad-banner {
  display: block;
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
body #sec-ad-top1 .ad-banner .ad-label,
body #sec-ad-top1 .ad-banner-body,
body #sec-ad-top2 .ad-banner .ad-label,
body #sec-ad-top2 .ad-banner-body { display: none !important; }
body #sec-ad-top1 .ad-banner-img,
body #sec-ad-top2 .ad-banner-img {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  display: block !important;
  flex-shrink: 1 !important;
  flex: 1 1 auto !important;
}

/* TOP 右サイドの正方形広告（SDC バナー下）— 画像のみ表示、aspect 1:1 */
body .sidebar-square-ad {
  margin-top: 16px;
}
body .sidebar-square-ad .ad-square {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-decoration: none;
}
body .sidebar-square-ad .ad-square .ad-label,
body .sidebar-square-ad .ad-square-body { display: none !important; }
body .sidebar-square-ad .ad-square-img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}
body .sidebar-square-ad .ad-square-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body #sec-ad-top1 .ad-banner-img img,
body #sec-ad-top2 .ad-banner-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}
@media (max-width: 768px) {
  body #sec-ad-top1 .ad-row-2col,
  body #sec-ad-top2 .ad-row-2col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* 動画アイコン（記事カードのタイトル横）— TOP以外でも適用するため共通化 */
.video-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  background: #c00;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0;
  padding: 0;
}
.video-icon svg {
  width: 10px !important;
  height: 10px !important;
  fill: #fff !important;
  margin: 0 !important;
  display: block;
}
@media (max-width: 768px) {
  body .section#sec-youtube .youtube-videos {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  body .section#sec-youtube .youtube-info {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* 舵社出版物の見出し上＆雑誌画像下を詰める */
body .section#sec-publication { padding-top: 32px !important; padding-bottom: 40px !important; }

/* PUBLICATION セクション base スタイル（top.css の base ルールが読まれないページ向け） */
.sec-publication { padding: 56px 0; }
.sec-publication .pub-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.sec-publication .pub-item {
  text-align: center; text-decoration: none; color: inherit;
  cursor: pointer; display: block;
}
.sec-publication .pub-item:hover { opacity: 0.8; }
.sec-publication .pub-cover {
  aspect-ratio: 3/4; width: 100%; overflow: hidden;
  margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.sec-publication .pub-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sec-publication .pub-placeholder {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7); font-family: 'Noto Serif JP', serif;
  font-size: 14px; font-weight: 400; letter-spacing: 1px;
}
.sec-publication .pub-name {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px; color: #1a1a1a; font-weight: 600;
}

/* ====== TOP ヒーロースライドの高さを抑える ====== */
.hero-slider { height: 720px !important; }
.hero-spacer { height: 720px !important; }

/* ====== paywall「3つの柱」用の副ラベル ====== */
.paywall-benefit-label { line-height: 1.4; }
.paywall-benefit-sub {
  display: block; margin-top: 4px;
  font-size: 10px; color: rgba(255,255,255,.6);
  letter-spacing: 0.3px; font-weight: 400;
}

/* ====== サイドバー KAZI SeaDream Club バナー & 記事末 big-cta
   ・ベース: 暗→ブルー→暗 のグラデを左→右にループ（控えめなブルー）
============================================================ */
@keyframes kazi-sdc-gradient {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
body .sidebar-sdclub,
body .big-cta {
  background-color: #0c1d3a;
  background-image: linear-gradient(100deg,
    #0c1d3a 0%,
    #1e3a5f 12.5%,
    #2c6aa0 25%,
    #1e3a5f 37.5%,
    #0c1d3a 50%,
    #1e3a5f 62.5%,
    #2c6aa0 75%,
    #1e3a5f 87.5%,
    #0c1d3a 100%) !important;
  background-size: 200% 100% !important;
  background-repeat: no-repeat !important;
  animation: kazi-sdc-gradient 16s linear infinite !important;
  position: relative; overflow: hidden;
}
body .sidebar-sdclub::before,
body .sidebar-sdclub::after,
body .big-cta::before,
body .big-cta::after { content: none !important; }
body .sidebar-sdclub > * { position: relative; z-index: 2; }
body .sidebar-sdclub:hover { filter: brightness(1.08); }
/* 文字コントラスト強化（明るいグラデ背景でも読めるように） */
body .big-cta h2 {
  color: #fff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  position: relative; z-index: 2;
}
body .big-cta p {
  color: rgba(255,255,255,0.95) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  font-weight: 400 !important;
  position: relative; z-index: 2;
}
body .big-cta-btn {
  position: relative; z-index: 2;
  border-color: #fff !important;
  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(2px);
}
body .big-cta-note {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  position: relative; z-index: 2;
}
body .big-cta-note a {
  color: #fff !important;
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  body .sidebar-sdclub, body .big-cta { animation: none !important; }
}

/* ====== paywall 文字コントラスト強化（読みやすく） ====== */
body .paywall .paywall-eyebrow { color: rgba(255,255,255,.7) !important; }
body .paywall p { color: rgba(255,255,255,.85) !important; }
body .paywall .paywall-benefit-label { color: rgba(255,255,255,.95) !important; font-weight: 500; }
body .paywall .paywall-benefit-icon { border-color: rgba(58,122,181,.7) !important; color: #5fa2db !important; }
body .paywall .paywall-login { color: rgba(255,255,255,.7) !important; }
body .paywall .paywall-login a { color: #fff !important; text-decoration: underline; }
body .paywall .paywall-note { color: rgba(255,255,255,.6) !important; }
body .paywall .paywall-note a { color: rgba(255,255,255,.85) !important; }

/* ====== 会員案内ポップアップ（paywall と同デザインのモーダル版） ====== */
.member-popup {
  position: fixed; inset: 0;
  background: rgba(5, 10, 18, 0.6);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
.member-popup[hidden] { display: none !important; }
.member-popup.is-open { opacity: 1; pointer-events: auto; }
.member-popup-card {
  position: relative;
  background: linear-gradient(165deg, #0a0f1a 0%, #0d1525 40%, #1e3a5f 100%);
  max-width: 520px; width: 100%;
  padding: 64px 48px 56px;
  border-radius: 0;
  text-align: center;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.member-popup.is-open .member-popup-card { transform: translateY(0); }
.member-popup-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #3a7ab5, transparent);
}
.member-popup-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(58,122,181,.3), transparent);
}
.member-popup-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; cursor: pointer;
  font-size: 26px; line-height: 1;
  color: rgba(255,255,255,.4);
  width: 36px; height: 36px;
  transition: color .3s;
}
.member-popup-close:hover { color: #fff; }
.member-popup-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 16px;
}
.member-popup-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 24px; font-weight: 400; color: #fff;
  letter-spacing: 1px;
  margin: 0 0 8px;
  line-height: 1.4;
}
.member-popup-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: #3a7ab5;
  margin-bottom: 24px;
}
.member-popup-divider {
  width: 40px; height: 1px; background: #3a7ab5;
  margin: 0 auto 28px;
}
.member-popup-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; color: rgba(255,255,255,.6);
  line-height: 2; margin: 0 0 28px;
  max-width: 380px; margin-left: auto; margin-right: auto;
}
.member-popup-benefits {
  display: flex; justify-content: center; gap: 28px;
  margin: 0 0 32px; flex-wrap: wrap;
}
.member-popup-benefit {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 84px;
}
.member-popup-benefit-icon {
  width: 36px; height: 36px;
  border: 1px solid rgba(58,122,181,.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #3a7ab5;
}
.member-popup-benefit-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 10px; color: rgba(255,255,255,.55);
  line-height: 1.5; letter-spacing: 0.3px;
  text-align: center;
}
.member-popup-register {
  display: inline-block;
  background: transparent; color: #fff;
  padding: 16px 48px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: 2px;
  text-decoration: none; border-radius: 0;
  border: 1px solid rgba(255,255,255,.3);
  transition: all 0.4s;
}
.member-popup-register:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.6);
}
.member-popup-login {
  display: block; margin-top: 20px;
  font-size: 12px; color: rgba(255,255,255,.4);
}
.member-popup-login a {
  color: rgba(255,255,255,.6); text-decoration: none;
  transition: color .3s;
}
.member-popup-login a:hover { color: #fff; }
.member-popup-other {
  display: inline-block; margin-top: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.3); text-decoration: none;
  transition: color .3s;
}
.member-popup-other:hover { color: rgba(255,255,255,.6); }
@media (max-width: 600px) {
  .member-popup-card { padding: 48px 28px 40px; }
  .member-popup-title { font-size: 20px; }
  .member-popup-text { font-size: 12px; line-height: 1.9; }
  .member-popup-register { padding: 14px 36px; font-size: 12px; }
}

/* ゲストブックマークボタン（未ログイン時のみ表示） */
.article-bookmark-guest {
  background: none; border: 1px solid #d0d4d8;
  cursor: pointer; padding: 6px 14px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
  color: #555; font-size: 12px;
  transition: all .2s;
}
.article-bookmark-guest:hover { color: #1a3a55; border-color: #1a3a55; }

/* ============================================================
 * SP ブラッシュアップ (2026-06-22 v2.0.74)
 * 4エージェント並列監査 (TOP+記事 / カテゴリ / 特殊ページ / リスティング)
 * の結果を統合した SP (≤768px / ≤480px / ≤390px) 全面調整
 * ============================================================ */

/* --- (1) Hero / カテゴリーヒーローの SP 改善 --- */
@media (max-width: 768px) {
  /* cat-hero 共通: nowrap 解除 / padding 圧縮 / SEO description SP対応 */
  body .cat-hero { padding: 18px 0 !important; }
  body .cat-hero h1 {
    white-space: normal !important;
    word-break: break-word;
    font-size: 18px !important;
    line-height: 1.4 !important;
    gap: 10px !important;
  }
  body .cat-hero .cat-hero-inner h1::before {
    width: 32px !important; height: 10px !important;
  }
  body .cat-hero p {
    text-align: left !important;
    font-size: 12px !important;
    line-height: 1.7 !important;
    padding: 0 16px !important;
    color: rgba(255,255,255,.75) !important;
  }
  /* SDC sdc-hero の nowrap 解除 */
  body .sdc-hero h1 {
    white-space: normal !important;
    word-break: break-word;
    font-size: 24px !important;
    line-height: 1.4 !important;
    padding: 0 16px;
  }
  body .sdc-hero p { font-size: 13px !important; padding: 0 16px; }
  body .sdc-hero-cta { padding: 14px 32px !important; font-size: 13px !important; }
  /* statement-hero / opening-message: justify は SP でひどい */
  body .opening-message-body,
  body .opening-message-body p,
  body .statement-hero p {
    text-align: left !important;
    word-break: auto-phrase;
  }
}

/* --- (2) subcat-tabs (pill) SP 最適化 --- */
@media (max-width: 768px) {
  body .subcat-tabs {
    padding: 12px 16px !important;
    gap: 8px !important;
    border-bottom: 0 !important;
  }
  body .subcat-tabs .subcat-tab {
    padding: 6px 12px !important;
    font-size: 12px !important;
    min-height: 32px;
    display: inline-flex; align-items: center;
    white-space: nowrap;
  }
  body .subcat-tabs .subcat-tab-count { font-size: 10px !important; }
}
@media (max-width: 480px) {
  body .subcat-tabs { padding: 10px 12px !important; gap: 6px !important; }
  body .subcat-tabs .subcat-tab {
    padding: 5px 10px !important;
    font-size: 11px !important;
    min-height: 30px;
  }
  body .subcat-tabs .subcat-tab-count { font-size: 9px !important; }
}

/* --- (3) Article-list / Card SP polish --- */
@media (max-width: 480px) {
  body .card-list { padding: 14px 0; gap: 12px; }
  body .card-list .card-img-sm {
    width: 100px !important; height: 68px !important;
    aspect-ratio: 3/2; object-fit: cover;
    flex-shrink: 0;
  }
  body .card-list .card-title,
  body .article-list .card-title,
  body .card .card-title {
    font-size: 16px !important;
    line-height: 1.55 !important;
    font-weight: 700;
  }
  body .article-list .card-list:last-child { padding-bottom: 18px; border-bottom: 0; }
  /* カテゴリーバッジを一回り小さく */
  body .card-cat,
  body .card-list .card-cat,
  body .card-cats .card-cat {
    font-size: 9px !important;
    padding: 2px 7px !important;
    letter-spacing: 0.04em !important;
    line-height: 1.5 !important;
    margin-bottom: 6px !important;
  }
}

/* --- (4) Archive ソート行 / ページネーション SP --- */
@media (max-width: 480px) {
  body .archive-sort-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 10px 16px 14px !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  body .archive-sort-row .archive-sort-btn {
    width: auto !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    display: inline-flex; align-items: center;
  }
  body .archive-sort-row .archive-year-select {
    width: auto !important;
    padding: 6px 28px 6px 12px !important; font-size: 12px !important;
  }
  body .archive-pagination a,
  body .archive-pagination span {
    min-width: 36px !important; height: 36px !important;
    padding: 0 8px !important; font-size: 12px !important;
    line-height: 36px;
  }
  body .archive-pagination,
  body .navigation.pagination {
    margin: 16px 0 20px !important;
  }
}

/* --- (5) Paywall SP コントラスト＆配置 --- */
@media (max-width: 768px) {
  body .paywall { padding: 48px 24px 40px !important; margin: 0 -16px 32px !important; }
  body .paywall h3 { font-size: 22px !important; }
  body .paywall p { font-size: 12px !important; padding: 0 4px; }
  body .paywall-benefits { gap: 16px !important; }
  body .paywall-benefit { min-width: auto; flex: 1 1 28%; }
  body .paywall-benefit-icon { width: 32px !important; height: 32px !important; font-size: 13px !important; }
  body .paywall-benefit-label { font-size: 10px !important; line-height: 1.4; min-height: 0; }
  body .paywall-benefit-sub { font-size: 9px !important; }
  body .paywall-register { padding: 14px 36px !important; font-size: 12px; letter-spacing: 1.5px; }
  body .paywall-note { font-size: 10px !important; line-height: 1.6; }
}
@media (max-width: 390px) {
  body .paywall { padding: 36px 18px 32px !important; }
  body .paywall h3 { font-size: 19px !important; }
  body .paywall-benefits { gap: 10px !important; }
}

/* --- (6) Member popup SP refinement --- */
@media (max-width: 480px) {
  body .member-popup-card { padding: 40px 20px 32px; max-width: calc(100% - 24px); }
  body .member-popup-title { font-size: 18px; }
  body .member-popup-text { font-size: 12px; line-height: 1.85; margin-bottom: 22px; }
  body .member-popup-benefits { gap: 16px; margin-bottom: 24px; }
  body .member-popup-benefit { min-width: 72px; }
  body .member-popup-benefit-icon { width: 32px; height: 32px; font-size: 13px; }
  body .member-popup-benefit-label { font-size: 9px; }
  body .member-popup-register { padding: 13px 32px; font-size: 12px; letter-spacing: 1.5px; }
  body .member-popup-close { color: rgba(255,255,255,.7); }
}
@media (max-width: 390px) {
  body .member-popup-card { padding: 32px 16px 24px; }
  body .member-popup-benefits { gap: 10px; }
}

/* --- (7) SDC 3つの柱 / 機能カード / Step SP --- */
@media (max-width: 768px) {
  body .benefit-grid,
  body .feature-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  body .benefit-card { padding: 28px 22px !important; }
  body .feature-card { padding: 24px 20px !important; }
  body .step-wrap { flex-direction: column !important; gap: 24px !important; }
  body .step-item { width: 100% !important; max-width: none !important; }
  body .step-item::after { display: none !important; }
}
@media (max-width: 480px) {
  body .benefit-card { padding: 22px 18px !important; }
  body .benefit-card h4 { font-size: 16px !important; line-height: 1.5 !important; }
  body .benefit-card p { font-size: 12px !important; line-height: 1.8 !important; }
}

/* --- (8) Stats bar (media-guide) 5col → 2col 縦罫線対応 --- */
@media (max-width: 768px) {
  body .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
  }
  body .stats-grid .stat-item {
    border-right: 1px solid #ddd !important;
    border-bottom: 1px solid #ddd !important;
    padding: 20px 12px !important;
  }
  body .stats-grid .stat-item:nth-child(2n) { border-right: none !important; }
  body .stats-grid .stat-item:nth-last-child(-n+2) { border-bottom: none !important; }
  body .stats-grid .stat-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body .stats-grid .stat-number { font-size: 26px !important; line-height: 1.2 !important; }
  body .stats-grid .stat-label { font-size: 11px !important; }
}

/* --- (9) Policy / FAQ SP --- */
@media (max-width: 768px) {
  body .policy-contact-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body .policy-contact-table th {
    width: auto !important; min-width: 100px;
    padding: 8px 10px !important; font-size: 12px;
  }
  body .policy-contact-table td { padding: 8px 10px !important; font-size: 12px; }
  body .policy-section p { margin-bottom: 12px; line-height: 1.9; font-size: 13px; }
  body .policy-intro p { font-size: 13px; line-height: 1.9; }
  body .policy-section h3 { font-size: 16px !important; }
  body .faq-cat-nav-list { gap: 6px 8px; padding: 0 16px; }
  body .faq-cat-nav-list .faq-cat-nav-item {
    padding: 6px 12px !important; font-size: 11px !important;
  }
  body .faq-q { padding: 14px 0 !important; font-size: 14px !important; align-items: flex-start; }
  body .faq-q-mark { margin-top: 0; flex-shrink: 0; }
  body .faq-a { padding: 0 0 16px 28px !important; font-size: 13px !important; }
}

/* --- (10) Forms (search / login / register / contact) SP --- */
@media (max-width: 480px) {
  body .search-input-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  body .search-input-row input,
  body .search-input-row button { width: 100% !important; }
  body .search-input-row button { padding: 12px 24px !important; }

  body .form-wrap input.textbox,
  body .form-wrap select.dropdown,
  body .form-wrap textarea {
    padding: 12px 14px !important;
    font-size: 14px;
    width: 100% !important;
    box-sizing: border-box;
  }
  body .form-submit,
  body .login-submit,
  body .register-cta-btn {
    width: 100% !important; min-width: 120px;
    padding: 14px 24px !important; font-size: 14px;
  }
  body .step-indicator { max-width: none !important; padding: 24px 16px 0 !important; }
}

/* --- (11) Movie INDEX / Calendar SP --- */
@media (max-width: 480px) {
  body .movie-card-grid {
    grid-template-columns: 1fr !important;
    gap: 8px 0 !important;
  }
  body .movie-card { padding: 10px 12px !important; gap: 12px; }
  body .movie-card-thumb { width: 80px !important; height: 56px !important; flex-shrink: 0; }
  body .movie-card-title {
    font-size: 12px !important; line-height: 1.5 !important;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; display: -webkit-box;
  }
  body .movie-card-date { font-size: 10px !important; }
}

/* --- (12) Marina map iframe / Marina list grid SP --- */
@media (max-width: 768px) {
  body .marina-mymap-embed iframe,
  body .marina-map-iframe {
    width: 100% !important; min-height: 360px;
    aspect-ratio: 16/10; height: auto !important;
  }
  body .region-filter { padding: 0 16px !important; gap: 6px !important; }
  body .region-btn { padding: 6px 12px !important; font-size: 11px !important; }
  body .subcat-wrap { padding: 0 16px !important; }
}
@media (max-width: 480px) {
  body .marina-list-grid,
  body .grid-3,
  body .grid-4 { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* --- (13) Gallery SP gap 圧縮 --- */
@media (max-width: 480px) {
  body .gallery-grid { gap: 4px !important; }
}
@media (max-width: 390px) {
  body .gallery-grid { gap: 3px !important; grid-template-columns: repeat(2, 1fr) !important; }
}

/* --- (13-b) Footer brand: ロゴ白＋住所＋SNSを左に配置 / sitemap が右 --- */
.footer-sitemap-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: flex-start;
  padding: 32px 40px 24px;
  max-width: 1600px;
  margin: 0 auto;
}
.footer-sitemap-row .footer-sitemap {
  padding: 0 !important;
  margin: 0 !important;
}
.footer-menus {
  display: flex; flex-direction: column;
  gap: 16px;
}
.footer-menus .footer-local-nav,
.footer-menus .footer-corporate {
  padding: 0 !important;
  margin: 0 !important;
}
.footer-brand {
  display: flex; flex-direction: column; gap: 14px;
  align-items: flex-start; min-width: 220px;
}
.footer-brand-logo {
  display: inline-block; line-height: 0;
  text-decoration: none;
}
.footer-brand-logo img {
  height: 22px; width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.85;
  transition: opacity .2s;
}
.footer-brand-logo:hover img { opacity: 1; }
.footer-brand-address {
  font-style: normal;
  font-size: 11px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
  margin: 0;
}
.footer-brand .footer-sns {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-top: 4px !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  border-top: 0 !important;
  width: 100%;
}
.footer-brand .footer-sns a {
  display: inline-flex !important; align-items: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 11px !important; text-decoration: none !important;
  padding: 2px 0 !important;
  margin: 0 !important;
  transition: color .2s !important;
}
.footer-brand .footer-sns a:hover { color: #fff !important; }
.footer-brand .footer-sns a svg {
  flex-shrink: 0; width: 14px; height: 14px;
  fill: currentColor;
}
.footer-brand-copy {
  margin-top: 18px;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.04em;
  line-height: 1.4;
}
/* PC: コピーライトはブランド下に配置。最下部の footer-bottom は隠す */
body .footer-bottom {
  display: none;
}
@media (max-width: 768px) {
  /* SP: コピーライトをフッター最下部へ移動 */
  body .footer-brand-copy { display: none !important; }
  body .footer-bottom {
    display: block !important;
    text-align: center;
    padding: 16px 16px 20px;
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.04em;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
}
@media (max-width: 768px) {
  body .footer-sitemap-row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 16px 8px;
  }
  /* SP: ブランド（ロゴ+住所+SNS）をメニューの下に */
  body .footer-sitemap-row .footer-menus { order: 1; }
  body .footer-sitemap-row .footer-brand { order: 2; margin-top: 8px; }
  body .footer-brand { min-width: 0; align-items: flex-start; gap: 10px; }
  body .footer-brand-logo img { height: 18px; }
  body .footer-brand-address { font-size: 10px; line-height: 1.6; }
  body .footer-brand .footer-sns {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  body .footer-brand .footer-sns a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 12px !important;
  }
  body .footer-brand .footer-sns a span { display: inline !important; }
  body .footer-brand .footer-sns a svg { width: 16px; height: 16px; }
}

/* --- (14) Footer sitemap SP (7件を 2列×4行 縦並び＝4+3 配置) --- */
@media (max-width: 768px) {
  body .footer-sitemap.footer-sitemap {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(4, auto) !important;
    grid-auto-flow: column !important;
    gap: 8px 16px !important;
    padding: 24px 0 18px !important;
    justify-content: stretch !important;
  }
  body .footer-col { min-width: 0; margin: 0; padding: 0; }
  body .footer-col-title { font-size: 15px !important; margin: 0 !important; padding: 6px 0 !important; line-height: 1.5; font-weight: 600 !important; }
}
@media (max-width: 480px) {
  body .footer-sitemap.footer-sitemap { gap: 8px 14px !important; padding: 20px 0 14px !important; }
  body .footer-col-title { font-size: 14px !important; padding: 5px 0 !important; }
}

/* --- (14-b) Footer local nav (OTHER): 下のライン直上の余白を確保 --- */
body .footer-menus .footer-local-nav {
  padding-bottom: 20px !important;
}
body .footer-menus .footer-local-nav + .footer-corporate {
  padding-top: 10px !important;
}
@media (max-width: 768px) {
  body .footer-local-nav.footer-local-nav {
    gap: 10px 18px !important;
    padding: 18px 0 24px !important;
    line-height: 1.6;
  }
  body .footer-local-nav.footer-local-nav a {
    padding: 4px 0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
}
@media (max-width: 480px) {
  body .footer-local-nav.footer-local-nav {
    gap: 8px 14px !important;
    padding: 16px 0 22px !important;
  }
}

/* --- (14-e) マイページ SP 全面調整 --- */
@media (max-width: 768px) {
  /* レイアウト：2カラム → 1カラム化 */
  body .mypage-wrap {
    display: block !important;
    padding: 24px 16px 60px !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  body .mypage-main { min-width: 0 !important; }
  body .mypage-wrap > aside {
    margin-top: 32px;
  }
  body .mypage-wrap > aside > div {
    position: static !important;
    top: auto !important;
  }
  body .sidebar-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  body .sidebar-nav li { border-bottom: 1px solid #f0f0f0; }
  body .sidebar-nav li:nth-child(odd) { border-right: 1px solid #f0f0f0; }
  body .sidebar-nav li a { padding: 12px 14px !important; font-size: 13px !important; }

  /* プロフィールヘッダー：横並び→縦並びにして中央寄せ */
  body .profile-header { padding: 36px 18px 28px !important; }
  body .profile-header-inner {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 18px !important;
  }
  body .profile-avatar {
    width: 84px !important; height: 84px !important;
    font-size: 28px !important;
  }
  body .profile-info { text-align: center !important; }
  body .profile-info h1 { font-size: 18px !important; flex-wrap: wrap; justify-content: center; gap: 8px; }
  body .profile-badge { font-size: 10px !important; padding: 3px 8px !important; }
  body .profile-meta {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 16px !important;
    font-size: 11px !important;
  }

  /* セクション間の余白を圧縮 */
  body .mypage-main .section { margin-bottom: 36px !important; }
  body .mypage-main .section-header h2 { font-size: 16px !important; }
  body .mypage-main .section-header .more { font-size: 11px !important; }

  /* 会員情報テーブル：左セル幅を縮める＋th/td 縦並び化 */
  body .account-table th {
    width: 110px !important;
    padding: 12px 8px 12px 0 !important;
    font-size: 11px !important;
    vertical-align: top !important;
  }
  body .account-table td {
    padding: 12px 0 !important;
    font-size: 13px !important;
    word-break: break-word;
  }

  /* お知らせリスト：日付/タグ/タイトル の縦並び */
  body .notice-list li {
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    padding: 12px 0 !important;
    align-items: flex-start;
  }
  body .notice-date { font-size: 11px !important; min-width: auto !important; flex: 0 0 auto; }
  body .notice-tag { font-size: 10px !important; padding: 2px 6px !important; }
  body .notice-title { width: 100% !important; font-size: 13px !important; line-height: 1.6 !important; }

  /* 興味カテゴリーバッジ */
  body .cat-badges { gap: 6px !important; flex-wrap: wrap !important; }
  body .cat-badge { font-size: 11px !important; padding: 3px 8px !important; }

  /* メールマガジン設定ブロック */
  body .mailmag-wrap {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding: 18px !important;
  }
  body .mailmag-status,
  body .mailmag-categories { width: 100% !important; }
  body .mailmag-save {
    width: 100% !important;
    padding: 14px !important;
    font-size: 14px !important;
  }

  /* パスワード変更ブロック */
  body .password-change-wrap { padding: 18px !important; }
  body .password-change-wrap input[type="password"] {
    font-size: 16px !important; /* iOS ズーム抑止 */
  }

  /* empty-placeholder */
  body .empty-placeholder {
    padding: 24px 16px !important;
    font-size: 13px !important;
    line-height: 1.7;
  }

  /* ブックマーク/マリーナの card-list を SP 圧縮 */
  body .mypage-main .card-list { padding: 14px 0 !important; }

  /* 編集モード時の wpmem フォーム余白 */
  body #wpmem_user_edit input.textbox,
  body #wpmem_user_edit select.dropdown,
  body #wpmem_user_edit input[type="text"],
  body #wpmem_user_edit input[type="email"] {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px !important;
    font-size: 16px !important;
  }
}
@media (max-width: 480px) {
  body .mypage-wrap { padding: 20px 14px 48px !important; }
  body .profile-header { padding: 28px 14px 22px !important; }
  body .profile-avatar { width: 72px !important; height: 72px !important; }
  body .profile-info h1 { font-size: 16px !important; }
  body .account-table th { width: 96px !important; font-size: 10px !important; }
  body .sidebar-nav { grid-template-columns: 1fr !important; }
  body .sidebar-nav li:nth-child(odd) { border-right: 0 !important; }
}

/* --- (14-d) /company/ テーブル SP 列幅調整 --- */
@media (max-width: 768px) {
  body .company-table { table-layout: fixed !important; }
  body .company-table th {
    width: 90px !important;
    padding: 12px 10px !important;
    font-size: 12px !important;
    word-break: keep-all;
  }
  body .company-table td {
    padding: 12px 10px !important;
    font-size: 13px !important;
    word-break: break-word;
  }
}
@media (max-width: 480px) {
  body .company-table th {
    width: 76px !important;
    padding: 10px 8px !important;
    font-size: 11px !important;
  }
  body .company-table td {
    padding: 10px 8px !important;
    font-size: 12px !important;
    line-height: 1.7;
  }
}

/* --- (14-c) Footer corporate links SP: 1行に並べる（左端揃え） --- */
@media (max-width: 768px) {
  body .footer-corporate {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 0 !important;
    overflow-x: visible;
  }
  body .footer-corporate a {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 4px 0 !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    min-height: 0 !important;
  }
}
@media (max-width: 380px) {
  body .footer-corporate { gap: 10px !important; }
  body .footer-corporate a { font-size: 9px !important; letter-spacing: -0.02em; }
}

/* --- (14-f) ハンバーガーメニュー OTHER リンクの行間を詰める --- */
@media (max-width: 768px) {
  body .hamburger-aside .hamburger-local .hamburger-local-links,
  body .hamburger-panel .hamburger-local-links,
  body div.hamburger-local-links {
    gap: 0 1em !important;
    row-gap: 2px !important;
  }
  body .hamburger-aside .hamburger-local .hamburger-local-links > a,
  body .hamburger-panel .hamburger-local-links > a,
  body div.hamburger-local-links > a {
    padding: 2px 0 !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
  }
  /* トピックス（最終 nav）と OTHER ブロックの間の余白を圧縮 */
  body .hamburger-aside {
    padding-top: 12px !important;
    margin-top: 12px !important;
  }
}

/* --- (14-g) 検索オーバーレイ SP 調整 --- */
@media (max-width: 768px) {
  body .search-overlay .search-box {
    padding-top: max(20px, env(safe-area-inset-top, 16px)) !important;
  }
  body .search-overlay .search-box-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    padding: 8px 0 12px;
    margin: 0 0 12px;
    border-bottom: 1px solid #eee;
  }
  body .search-overlay .search-box-header h3 {
    font-size: 16px !important;
    margin: 0;
  }
  body .search-overlay .search-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
  }
  /* カテゴリ 4列 → 3列でテキスト折返し防止 */
  body .search-overlay .search-cats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
  body .search-overlay .search-cat-btn {
    min-width: 0 !important;
    padding: 14px 8px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }
  body .search-overlay .search-cat-symbol {
    font-size: 10px !important;
    margin-bottom: 2px !important;
    display: block;
  }
  /* 入力欄: iOS 自動ズーム抑止 + パディング統一 */
  body .search-overlay .search-input-row input[type="text"] {
    font-size: 16px !important;
    padding: 14px 14px !important;
  }
  body .search-overlay .search-input-row button {
    padding: 14px !important;
    font-size: 14px !important;
    font-weight: 700;
  }
  /* SDC バナー：横幅とパディングを整える */
  body .search-overlay .search-sdc-banner {
    padding: 20px 18px !important;
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center;
  }
  body .search-overlay .search-sdc-btn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 13px !important;
  }
}
@media (max-width: 480px) {
  body .search-overlay .search-cats { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  body .search-overlay .search-cat-btn { padding: 12px 6px !important; font-size: 11px !important; }
}

/* --- (15) Hero slider SP 微調整 --- */
@media (max-width: 480px) {
  body .slide-caption { padding: 10px 12px !important; }
  body .slide-caption .area-title { font-size: 14px !important; line-height: 1.4 !important; }
  body .slide-caption .area-label { font-size: 9px !important; padding: 2px 8px; }
}

/* --- (16) Service banner SP (TOPの service-banner) --- */
@media (max-width: 480px) {
  body .service-banner-eyebrow {
    font-size: 9px !important;
    word-break: break-word; max-width: 100%;
  }
  body .service-banner-body h3 { font-size: 15px !important; }
  body .service-banner-body p { font-size: 12px !important; line-height: 1.7; }
}

/* --- (17) Article header SP padding 統一 + セクション間スペース圧縮 --- */
@media (max-width: 480px) {
  body .article-header-info { padding: 16px 14px 12px !important; }
  body .article-title { font-size: 20px !important; line-height: 1.4 !important; margin: 6px 0 10px !important; }
  body .article-header-info .article-lead { margin-bottom: 12px !important; }
  body .article-meta {
    flex-wrap: wrap; gap: 8px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
  }
  body .article-bookmark,
  body .article-bookmark-guest { font-size: 11px; padding: 5px 12px; }
  body .article-body h2 { padding: 12px 14px !important; font-size: 18px; margin: 28px 0 14px; }
  body .article-body h3 { font-size: 16px; margin: 22px 0 12px; }
  body .article-flags { gap: 6px; }
  /* セクション間の余白を一段圧縮 */
  body .article-wrap { padding-top: 8px !important; }
  body .article-wrap > .share-top.share-top,
  body .share-top.share-top {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    padding: 4px 0 !important;
    gap: 6px !important;
    border: 0 !important;
  }
  body .share-top.share-top span,
  body .share-top.share-top .share-label {
    margin-bottom: 2px !important;
  }
  body .article-tags.article-tags { margin: 4px 0 10px !important; gap: 6px !important; }
  body .article-tags.article-tags-bottom { margin: 12px 0 10px !important; }
  body .article-toc,
  body .toc-box { margin: 6px 0 14px !important; }
}

/* --- (18) Big CTA SP --- */
@media (max-width: 480px) {
  body .big-cta-btn {
    padding: 16px 32px !important;
    min-width: 140px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  body .article-big-cta { padding: 36px 20px !important; }
  body .article-big-cta h2 { font-size: 20px !important; line-height: 1.4 !important; }
  body .article-big-cta p { font-size: 13px !important; }
}

/* --- (19) 共通 container / .content-with-sidebar SP padding --- */
@media (max-width: 768px) {
  body .container { padding: 0 16px; }
}

/* --- (20) Breadcrumb SP --- */
@media (max-width: 480px) {
  body .breadcrumb {
    padding: 8px 14px !important;
    line-height: 1.6;
    align-items: center;
    flex-wrap: wrap;
    font-size: 11px;
  }
  body .breadcrumb a { display: inline-flex; align-items: center; }
}

/* --- (21) Em ハイライト (media-guide) — SP では border 単語別繰り返し回避 --- */
@media (max-width: 768px) {
  body .statement-headline em {
    border-bottom: 0 !important;
    background: linear-gradient(transparent 70%, rgba(58,122,181,.25) 70%);
    padding-bottom: 0 !important;
  }
}

/* --- (22) サイドバー: SP では非表示 (記事本文に追従させない) --- */
@media (max-width: 1024px) {
  body .content-sidebar { display: none !important; }
  body .content-with-sidebar { grid-template-columns: 1fr !important; }
}

/* --- (22-b) ロゴ SP 一回り小さく --- */
@media (max-width: 768px) {
  body .logo img,
  body .logo-full,
  body .logo-small {
    height: 18px !important;
    width: auto !important;
  }
  body .header-top { gap: 10px !important; }
}
@media (max-width: 480px) {
  body .logo img,
  body .logo-full,
  body .logo-small { height: 16px !important; }
}

/* --- (23) Hamburger panel: 内部アイテム圧縮 --- */
@media (max-width: 480px) {
  body .hamburger-panel { padding-top: 12px; }
  /* グループ間の余白を詰める */
  body .hamburger-nav-grid.hamburger-nav-grid {
    row-gap: 8px !important;
    column-gap: 0 !important;
    gap: 8px 0 !important;
  }
  body .hamburger-nav .hamburger-nav-group { margin-bottom: 0 !important; }
  body .hamburger-nav .hamburger-nav-group > a {
    font-size: 14px !important;
    padding: 6px 0 4px !important;
    border-bottom: 1px solid #e8e8e8 !important;
    line-height: 1.3 !important;
  }
  body .hamburger-nav .hamburger-nav-group .ham-sub {
    margin-top: 4px !important;
    gap: 2px 12px !important;
  }
  body .hamburger-nav .hamburger-nav-group .ham-sub a {
    padding: 1px 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  /* OTHER リンク群 */
  body .hamburger-local { padding-top: 16px !important; }
  body .hamburger-local-label { font-size: 10px; margin-bottom: 8px; }
  body .hamburger-aside .hamburger-local .hamburger-local-links,
  body .hamburger-panel .hamburger-local-links,
  body div.hamburger-local-links {
    gap: 4px 14px !important;
    line-height: 1.5 !important;
  }
  body .hamburger-aside .hamburger-local .hamburger-local-links > a,
  body .hamburger-panel .hamburger-local-links > a,
  body div.hamburger-local-links > a {
    padding: 3px 0 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
}

/* --- (24) Publication grid: SP でも3カラム維持 --- */
@media (max-width: 768px) {
  body .pub-grid,
  body .sec-publication .pub-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 480px) {
  body .pub-grid,
  body .sec-publication .pub-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
}

/* --- (24-a) Media-guide / Company B2B SP対応 --- */
@media (max-width: 768px) {
  /* statement-hero */
  body .statement-hero { padding: 32px 20px !important; }
  body .statement-headline { font-size: 22px !important; line-height: 1.5 !important; }
  body .statement-body { font-size: 13px !important; line-height: 1.8 !important; }
  body .statement-eyebrow { font-size: 10px !important; letter-spacing: 2px !important; margin-bottom: 14px !important; }
  body .statement-cta-row {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  body .btn-statement-primary,
  body .btn-statement-outline {
    width: 100%; text-align: center;
    padding: 14px 20px !important;
    font-size: 13px !important;
    white-space: normal;
  }
  /* stats-bar inner padding 縮小 */
  body .stats-bar { padding: 28px 16px !important; }
  body .stats-bar-label { font-size: 11px !important; margin-bottom: 16px !important; }
  /* services-grid 1col */
  body .services-grid { grid-template-columns: 1fr !important; gap: 14px !important; margin-bottom: 36px !important; }
  body .service-card { flex-direction: row; }
  body .service-card-icon { width: 64px !important; font-size: 18px !important; }
  body .service-card-body { padding: 16px 18px !important; }
  body .service-card-name { font-size: 15px !important; }
  body .service-card-desc { font-size: 12px !important; line-height: 1.75 !important; }
  /* b2b-banner 縦積み */
  body .b2b-banner {
    flex-direction: column !important;
    padding: 32px 22px !important;
    gap: 20px !important;
    align-items: stretch !important;
  }
  body .b2b-banner-headline { font-size: 20px !important; line-height: 1.5 !important; }
  body .b2b-banner-body { font-size: 12px !important; line-height: 1.8 !important; }
  body .b2b-banner-cta { align-items: stretch !important; flex-direction: column; }
  body .btn-b2b-primary,
  body .btn-b2b-outline {
    width: 100%; text-align: center;
    padding: 14px 20px !important;
    font-size: 13px !important;
    white-space: normal;
  }
  /* b2b-grid 3col -> 1col */
  body .b2b-grid { grid-template-columns: 1fr !important; gap: 14px !important; margin-bottom: 36px !important; }
  body .b2b-card { padding: 20px 18px !important; }
  body .b2b-card-icon { font-size: 20px !important; margin-bottom: 10px !important; }
  body .b2b-card-name { font-size: 14px !important; }
  body .b2b-card-desc { font-size: 12px !important; line-height: 1.75 !important; }
  /* b2b-contact-wrap + form */
  body .b2b-contact-wrap { padding: 24px 18px !important; }
  body .b2b-contact-head h2 { font-size: 18px !important; }
  body .b2b-form-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  body .form-group { width: 100% !important; }
  body .form-submit-row { flex-direction: column !important; align-items: stretch !important; }
  body .form-submit { width: 100% !important; padding: 14px !important; }
  body .form-checkbox-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  /* sec-head */
  body .sec-head h2 { font-size: 20px !important; }
  body .sec-head-en { font-size: 10px !important; letter-spacing: 2px !important; }
}
@media (max-width: 480px) {
  body .statement-hero { padding: 28px 16px !important; }
  body .statement-headline { font-size: 20px !important; }
  body .form-checkbox-grid { grid-template-columns: 1fr !important; }
}

/* --- (24-b) Article tags: SP で min-height による肥大化を抑制 / 角丸なし(PC踏襲) --- */
@media (max-width: 768px) {
  body .article-tag.article-tag,
  body .article-tags .article-tag {
    min-height: 0 !important;
    height: auto !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 0 !important;
  }
  body .article-tags.article-tags {
    gap: 6px !important;
  }
}
@media (max-width: 480px) {
  body .article-tag.article-tag,
  body .article-tags .article-tag {
    padding: 3px 9px !important;
    font-size: 10px !important;
    border-radius: 0 !important;
  }
}

/* --- (25) Hero slider: SP で .slide を 100% 確実に / 高さ半減 --- */
@media (max-width: 768px) {
  body .hero-slider .slides-track .slide,
  body .slides-track > .slide {
    width: 100% !important;
    flex-shrink: 0 !important;
  }
  body .hero-slider { overflow: hidden !important; height: 660px !important; touch-action: pan-y; }
  body .hero-spacer { height: 660px !important; }
}
@media (max-width: 480px) {
  body .hero-slider { height: 600px !important; }
  body .hero-spacer { height: 600px !important; }
}

/* ============================================================
   (15) Inline Article Card ─ 本文中サイト内リンク自動カード化
   PHP側: inc/inline-card.php
   記事一覧の .card-list と同じスタイル（上下ボーダー区切り）
   ============================================================ */
.article-body .card-list-inline,
.entry-content .card-list-inline,
.kazi-article .card-list-inline {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 24px 0;
  margin: 28px 0;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  background: transparent;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.article-body .card-list-inline:hover,
.entry-content .card-list-inline:hover,
.kazi-article .card-list-inline:hover {
  text-decoration: none;
}
.article-body .card-list-inline .card-list-body,
.entry-content .card-list-inline .card-list-body,
.kazi-article .card-list-inline .card-list-body {
  flex: 1; min-width: 0;
}
.article-body .card-list-inline .card-cats,
.entry-content .card-list-inline .card-cats,
.kazi-article .card-list-inline .card-cats {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  margin-bottom: 6px;
}
.article-body .card-list-inline .card-cat,
.entry-content .card-list-inline .card-cat,
.kazi-article .card-list-inline .card-cat {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 9px; color: #1a1a1a;
  display: inline-block;
  letter-spacing: 0.04em; font-weight: 600;
  background: #b8ecff; border-radius: 0;
  padding: 2px 8px;
}
.article-body .card-list-inline .card-cat.is-child,
.entry-content .card-list-inline .card-cat.is-child,
.kazi-article .card-list-inline .card-cat.is-child {
  background: #fff; border: 1px solid #b8ecff;
}
.article-body .card-list-inline .card-title,
.entry-content .card-list-inline .card-title,
.kazi-article .card-list-inline .card-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 19px; color: #1a1a1a; line-height: 1.5;
  font-weight: 600; margin-bottom: 6px;
}
.article-body .card-list-inline:hover .card-title,
.entry-content .card-list-inline:hover .card-title,
.kazi-article .card-list-inline:hover .card-title {
  color: #2c5f8a;
}
.article-body .card-list-inline .card-excerpt,
.entry-content .card-list-inline .card-excerpt,
.kazi-article .card-list-inline .card-excerpt {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px; color: #444; line-height: 1.6;
  font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-body .card-list-inline .card-meta,
.entry-content .card-list-inline .card-meta,
.kazi-article .card-list-inline .card-meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: #666; margin-top: 8px;
  letter-spacing: 0.04em;
}
.article-body .card-list-inline .card-img-sm,
.entry-content .card-list-inline .card-img-sm,
.kazi-article .card-list-inline .card-img-sm {
  width: 160px; height: 107px; flex-shrink: 0;
  background: #e0ddd8; overflow: hidden;
  background-size: cover; background-position: center;
}
.article-body .card-list-inline .card-img-sm img,
.entry-content .card-list-inline .card-img-sm img,
.kazi-article .card-list-inline .card-img-sm img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.3s;
}
.article-body .card-list-inline:hover .card-img-sm img,
.entry-content .card-list-inline:hover .card-img-sm img,
.kazi-article .card-list-inline:hover .card-img-sm img {
  transform: scale(1.05);
}
.article-body .card-list-inline .card-img-sm--placeholder img,
.entry-content .card-list-inline .card-img-sm--placeholder img,
.kazi-article .card-list-inline .card-img-sm--placeholder img {
  object-fit: contain; padding: 18px; opacity: 0.4;
}
/* SP: 画像を小さく、テキストとの比率を保持 */
@media (max-width: 600px) {
  .article-body .card-list-inline,
  .entry-content .card-list-inline,
  .kazi-article .card-list-inline {
    gap: 12px;
    padding: 18px 0;
    margin: 22px 0;
  }
  .article-body .card-list-inline .card-img-sm,
  .entry-content .card-list-inline .card-img-sm,
  .kazi-article .card-list-inline .card-img-sm {
    width: 110px; height: 74px;
  }
  .article-body .card-list-inline .card-title,
  .entry-content .card-list-inline .card-title,
  .kazi-article .card-list-inline .card-title {
    font-size: 15px;
  }
  .article-body .card-list-inline .card-excerpt,
  .entry-content .card-list-inline .card-excerpt,
  .kazi-article .card-list-inline .card-excerpt {
    display: none;
  }
}

/* ============================================================
   (16) Mypage Bookmark / View-History List
   PHP: inc/bookmarks.php, inc/view-history.php
   記事一覧 .article-list と同一スタイル（2カラムグリッド）
   ============================================================ */
body .mypage-card-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
body .mypage-card-list .card-list,
body .mypage-card-list .mypage-card-row > .card-list {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px 0;
  border-bottom: 1px solid #e8e8e8;
  background: transparent;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
body .mypage-card-list .mypage-card-row {
  position: relative;
}
/* ブックマーク行は X ボタン分の右余白 */
body .mypage-card-list .mypage-card-row > .card-list {
  padding-right: 44px;
}
body .mypage-card-list .bookmark-card-remove {
  position: absolute;
  top: 22px; right: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  color: #888;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  transition: color .15s ease, border-color .15s ease;
}
body .mypage-card-list .bookmark-card-remove:hover {
  color: #c55043; border-color: #c55043;
}
/* SP: 1カラム＋削除ボタン位置調整 */
@media (max-width: 768px) {
  body .mypage-card-list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  body .mypage-card-list .mypage-card-row > .card-list {
    padding-right: 36px;
  }
  body .mypage-card-list .bookmark-card-remove {
    top: 14px;
    width: 24px; height: 24px;
    font-size: 16px;
  }
}
/* 閲覧履歴: 画像非表示モード */
body .mypage-card-list.is-no-image .card-img-sm { display: none; }
body .mypage-card-list.is-no-image .card-list { padding-right: 0; }

/* ブックマーク: 画像を一回り小さく */
body .mypage-card-list.bookmark-list .card-img-sm {
  width: 110px; height: 74px;
}
@media (max-width: 768px) {
  body .mypage-card-list.bookmark-list .card-img-sm {
    width: 90px; height: 60px;
  }
}

/* 閲覧履歴: 3カラム */
body .mypage-card-list.is-3col {
  grid-template-columns: repeat(3, 1fr);
  gap: 0 28px;
}
@media (max-width: 1024px) {
  body .mypage-card-list.is-3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  body .mypage-card-list.is-3col { grid-template-columns: 1fr; }
}
/* 閲覧履歴: タイトルをゴシック・小級数化（記事一覧の明朝より控えめ） */
body .mypage-card-list.history-list .card-list { padding: 16px 0; }
body .mypage-card-list.history-list .card-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; font-weight: 500;
  line-height: 1.55; color: #1a1a1a;
  margin-bottom: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
body .mypage-card-list.history-list .card-cats { display: none; }
body .mypage-card-list.history-list .card-meta {
  font-size: 10px; margin-top: 4px;
}

/* ============================================================
   メディアガイド v2（4誌カード + 資料請求フォーム）
   ============================================================ */
/* --- Statement Hero / Stats Bar 視認性アップ（media_guide.css の薄グレー値を上書き） --- */
body .statement-eyebrow { color: #b8b8b8; }
body .statement-headline em { border-bottom-color: #ccc; }
body .statement-body { color: #d4d4d4; }
body .btn-statement-outline { border-color: #aaa; }
body .btn-statement-outline:hover { border-color: #ddd; }

body .stats-bar-label { color: #1a1a1a; font-weight: 600; }
body .stat-unit { color: #444; }
body .stat-label { color: #333; }

.page-media-guide-v2 { max-width: 1180px; margin: 0 auto; padding: 0 24px 96px; box-sizing: border-box; }
.page-media-guide-v2 *, .page-media-guide-v2 *::before, .page-media-guide-v2 *::after { box-sizing: border-box; }
.page-media-guide-v2 .mg-section { padding: 80px 0; }
.page-media-guide-v2 .mg-section--alt {
  background: #fafafa;
  padding: 72px 48px;
  margin: 0;
}
.page-media-guide-v2 .mg-section-head { text-align: center; margin-bottom: 56px; }
.page-media-guide-v2 .mg-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px; letter-spacing: 0.2em; color: #4a4a4a;
  text-transform: uppercase; font-weight: 600;
  margin-bottom: 12px;
}
.page-media-guide-v2 .mg-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 28px; font-weight: 700; color: #1a1a1a;
  line-height: 1.5; margin: 0 0 16px;
}
.page-media-guide-v2 .mg-lead {
  font-size: 14px; color: #2a2a2a; line-height: 1.9;
  max-width: 720px; margin: 0 auto;
}

/* 4誌カード */
.page-media-guide-v2 .mg-media-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
}
.page-media-guide-v2 .mg-media-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #ececec;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.page-media-guide-v2 .mg-media-card:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}
.page-media-guide-v2 .mg-media-cover {
  padding: 32px 32px 28px;
  background: #fafafa;
  border-bottom: 1px solid #ececec;
}
.page-media-guide-v2 .mg-media-cover-meta {
  display: flex; flex-direction: column; gap: 10px;
}
.page-media-guide-v2 .mg-media-badge {
  align-self: flex-start;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.15em;
  background: #1a3a52;
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
}
.page-media-guide-v2 .mg-media-cover-name {
  font-family: 'Noto Serif JP', serif;
  font-size: 26px; font-weight: 700;
  line-height: 1.25;
  color: #1a1a1a;
}
.page-media-guide-v2 .mg-media-cover-name small {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.1em;
  color: #5a5a5a;
  margin-top: 4px;
}
.page-media-guide-v2 .mg-media-body {
  padding: 28px 32px 32px;
  display: flex; flex-direction: column; flex: 1;
}
.page-media-guide-v2 .mg-media-tagline {
  font-family: 'Noto Serif JP', serif;
  font-size: 18px; font-weight: 700; line-height: 1.55;
  color: #1a1a1a; margin-bottom: 14px;
}
.page-media-guide-v2 .mg-media-desc {
  font-size: 13px; color: #2a2a2a; line-height: 1.85;
  margin: 0 0 16px;
}
.page-media-guide-v2 .mg-media-desc strong { color: #1a1a1a; font-weight: 700; }
.page-media-guide-v2 .mg-media-points {
  list-style: none; padding: 0; margin: 0 0 22px;
  border-top: 1px solid #f0f0f0;
}
.page-media-guide-v2 .mg-media-points li {
  font-size: 12px; color: #1a1a1a;
  padding: 10px 0; border-bottom: 1px dotted #eee;
  display: flex; align-items: baseline; gap: 8px;
}
.page-media-guide-v2 .mg-media-points li::before {
  content: ""; flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: #2c5f8a; margin-top: 6px;
}
.page-media-guide-v2 .mg-media-points strong {
  font-family: 'Inter', sans-serif; font-weight: 700;
  color: #1a3a52; font-size: 13px;
}
.page-media-guide-v2 .mg-media-foot {
  margin-top: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.page-media-guide-v2 .mg-media-price {
  font-size: 11px; color: #4a4a4a;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}
.page-media-guide-v2 .mg-media-req {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; font-size: 12px; font-weight: 700;
  color: #1a1a1a; background: #fff;
  border: 1px solid #1a1a1a;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.page-media-guide-v2 .mg-media-req:hover {
  background: #1a1a1a; color: #fff;
}

/* WHY KAZI */
.page-media-guide-v2 .mg-why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  max-width: 1080px; margin: 0 auto;
}
.page-media-guide-v2 .mg-why-item {
  padding: 8px 4px 0;
}
.page-media-guide-v2 .mg-why-num {
  font-family: 'Inter', sans-serif;
  font-size: 28px; font-weight: 700; color: #2c5f8a;
  line-height: 1; margin-bottom: 16px;
  letter-spacing: 0.04em;
}
.page-media-guide-v2 .mg-why-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 17px; font-weight: 700; color: #1a1a1a;
  line-height: 1.55; margin-bottom: 14px;
}
.page-media-guide-v2 .mg-why-item p {
  font-size: 13px; color: #2a2a2a; line-height: 1.9; margin: 0;
}

/* 資料請求フォーム */
.page-media-guide-v2 .mg-form {
  max-width: 760px; margin: 0 auto;
  background: #fff; border: 1px solid #ececec;
  padding: 40px 40px 32px;
}
.page-media-guide-v2 .mg-form-pdfs {
  border: none; padding: 0; margin: 0 0 32px;
}
.page-media-guide-v2 .mg-form-pdfs legend {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; font-weight: 700; color: #1a1a1a;
  margin-bottom: 14px; padding: 0;
}
.page-media-guide-v2 .mg-form-pdfs-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.page-media-guide-v2 .mg-pdf-check {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border: 1px solid #ececec;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.page-media-guide-v2 .mg-pdf-check:has(input:checked) {
  border-color: #1a3a52; background: #f5f8fb;
}
.page-media-guide-v2 .mg-pdf-check input { accent-color: #1a3a52; }
.page-media-guide-v2 .mg-pdf-check-label {
  font-size: 13px; font-weight: 600; color: #1a1a1a;
}
.page-media-guide-v2 .mg-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 16px;
}
.page-media-guide-v2 .mg-form-row--full { grid-template-columns: 1fr; }
.page-media-guide-v2 .mg-form label {
  display: block; font-size: 12px; font-weight: 600;
  color: #1a1a1a;
}
.page-media-guide-v2 .mg-form .req { color: #c55043; margin-left: 4px; }
.page-media-guide-v2 .mg-form input[type="text"],
.page-media-guide-v2 .mg-form input[type="email"],
.page-media-guide-v2 .mg-form input[type="tel"],
.page-media-guide-v2 .mg-form textarea {
  display: block; width: 100%; box-sizing: border-box;
  margin-top: 6px; padding: 10px 12px;
  font-family: inherit; font-size: 13px; font-weight: 400;
  color: #1a1a1a; background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 0;
}
.page-media-guide-v2 .mg-form input:focus,
.page-media-guide-v2 .mg-form textarea:focus {
  outline: none; border-color: #1a3a52;
}
.page-media-guide-v2 .mg-form-agree {
  margin: 24px 0 24px;
  font-size: 12px; color: #444;
}
.page-media-guide-v2 .mg-form-agree input { margin-right: 8px; accent-color: #1a3a52; }
.page-media-guide-v2 .mg-form-agree a { color: #2c5f8a; text-decoration: underline; }
.page-media-guide-v2 .mg-form-actions { text-align: center; }
.page-media-guide-v2 .mg-form-submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 56px; font-size: 14px; font-weight: 700;
  color: #fff; background: #1a1a1a;
  border: none; border-radius: 0;
  cursor: pointer;
  transition: background .2s ease;
}
.page-media-guide-v2 .mg-form-submit:hover { background: #2c5f8a; }
.page-media-guide-v2 .mg-form-errors {
  background: #fdf6f5; border: 1px solid #f0d6d2;
  padding: 16px 20px; margin: 0 auto 24px;
  max-width: 760px; color: #c55043;
  font-size: 13px;
}
.page-media-guide-v2 .mg-form-errors ul { margin: 8px 0 0 18px; }

/* サンクスメッセージ */
.page-media-guide-v2 .mg-form-ok {
  max-width: 760px; margin: 0 auto;
  background: #f0f6f3; border: 1px solid #c8dccf;
  padding: 48px 40px;
  text-align: center;
}
.page-media-guide-v2 .mg-form-ok-icon {
  width: 56px; height: 56px; line-height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #2c8a6a; color: #fff;
  font-size: 26px; font-weight: 700;
}
.page-media-guide-v2 .mg-form-ok h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px; color: #2c8a6a; margin: 0 0 12px;
}
.page-media-guide-v2 .mg-form-ok p { font-size: 13px; line-height: 1.8; color: #444; margin: 0 0 24px; }
.page-media-guide-v2 .mg-form-ok-back { margin-top: 28px; }
.page-media-guide-v2 .mg-form-ok-back a {
  font-size: 12px; color: #2c5f8a; text-decoration: underline;
  letter-spacing: 0.04em;
}

/* 確認画面 */
.page-media-guide-v2 .mg-form-confirm {
  max-width: 760px; margin: 0 auto;
  background: #fff; border: 1px solid #ececec;
  padding: 40px;
}
.page-media-guide-v2 .mg-form-confirm-head {
  text-align: center; margin-bottom: 28px;
  padding-bottom: 20px; border-bottom: 1px solid #ececec;
}
.page-media-guide-v2 .mg-form-confirm-head strong {
  display: block; font-family: 'Noto Serif JP', serif;
  font-size: 20px; color: #1a1a1a; margin-bottom: 8px;
}
.page-media-guide-v2 .mg-form-confirm-head span {
  font-size: 12px; color: #666;
}
.page-media-guide-v2 .mg-form-confirm-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  margin-bottom: 28px;
}
.page-media-guide-v2 .mg-form-confirm-table th,
.page-media-guide-v2 .mg-form-confirm-table td {
  padding: 14px 16px; vertical-align: top;
  border-bottom: 1px solid #f0f0f0; text-align: left;
}
.page-media-guide-v2 .mg-form-confirm-table th {
  width: 130px; font-weight: 600; color: #555;
  background: #fafafa;
}
.page-media-guide-v2 .mg-form-confirm-table td { color: #1a1a1a; }
.page-media-guide-v2 .mg-form-confirm-pdfs { margin: 0; padding-left: 18px; }
.page-media-guide-v2 .mg-form-confirm-pdfs li { margin: 2px 0; }
.page-media-guide-v2 .mg-form-confirm-empty { color: #aaa; }
.page-media-guide-v2 .mg-form-confirm-msg { white-space: pre-wrap; line-height: 1.8; }
.page-media-guide-v2 .mg-form-actions--confirm {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
}
.page-media-guide-v2 .mg-form-back {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 40px; font-size: 13px; font-weight: 600;
  color: #555; background: #fff;
  border: 1px solid #ccc; border-radius: 0;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.page-media-guide-v2 .mg-form-back:hover { background: #f5f5f5; color: #1a1a1a; }
.page-media-guide-v2 .mg-form-ok-list {
  background: #fff; padding: 24px; text-align: left;
  margin-top: 16px;
}
.page-media-guide-v2 .mg-form-ok-list-label {
  font-size: 12px; color: #666; margin-bottom: 12px;
}
.page-media-guide-v2 .mg-dl-link {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; margin-bottom: 8px;
  border: 1px solid #ececec;
  text-decoration: none; color: #1a1a1a;
  transition: border-color .15s ease, background .15s ease;
}
.page-media-guide-v2 .mg-dl-link:hover { background: #f8f8f8; border-color: #2c5f8a; }
.page-media-guide-v2 .mg-dl-link:last-child { margin-bottom: 0; }
.page-media-guide-v2 .mg-dl-icon {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700; color: #fff;
  background: #c55043; padding: 4px 8px;
  letter-spacing: 0.08em;
}
.page-media-guide-v2 .mg-dl-name { flex: 1; font-size: 13px; font-weight: 600; }
.page-media-guide-v2 .mg-dl-arrow { font-size: 12px; color: #2c5f8a; }

/* フォーム下の補助連絡先 */
.page-media-guide-v2 .mg-form-aside {
  max-width: 760px; margin: 32px auto 0;
  padding: 24px 8px 0;
  text-align: center;
  border-top: 1px solid #ececec;
}
.page-media-guide-v2 .mg-form-aside-label {
  font-size: 12px; color: #777; margin-bottom: 14px;
}
.page-media-guide-v2 .mg-form-aside-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px;
  font-size: 13px; color: #333;
}
.page-media-guide-v2 .mg-form-aside-grid > div { display: inline-flex; align-items: baseline; gap: 8px; }
.page-media-guide-v2 .mg-aside-key {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.1em;
  color: #888; font-weight: 700;
}
.page-media-guide-v2 .mg-aside-sub { font-size: 11px; color: #555; }
.page-media-guide-v2 .mg-form-aside a { color: #2c5f8a; text-decoration: none; }
.page-media-guide-v2 .mg-form-aside a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .page-media-guide-v2 .mg-form-aside-grid { flex-direction: column; gap: 10px; }
}

/* SP */
@media (max-width: 768px) {
  .page-media-guide-v2 { padding: 0 16px 60px; }
  .page-media-guide-v2 .mg-section { padding: 56px 0; }
  .page-media-guide-v2 .mg-section--alt { padding: 48px 24px; }
  .page-media-guide-v2 .mg-title { font-size: 22px; }
  .page-media-guide-v2 .mg-media-grid { grid-template-columns: 1fr; gap: 20px; }
  .page-media-guide-v2 .mg-why-grid { grid-template-columns: 1fr; gap: 28px; }
  .page-media-guide-v2 .mg-form { padding: 24px 20px; }
  .page-media-guide-v2 .mg-form-pdfs-grid,
  .page-media-guide-v2 .mg-form-row { grid-template-columns: 1fr; }
  .page-media-guide-v2 .mg-media-cover { padding: 24px 24px 20px; }
  .page-media-guide-v2 .mg-media-cover-name { font-size: 22px; }
  .page-media-guide-v2 .mg-media-body { padding: 22px 24px; }
}

/* ============================================================
   検索ポップアップ（カテゴリ記号削除・人気タグ・会員限定2件・SDCバナー）
   ============================================================ */
/* カテゴリ: 円形・記号なし・名前のみ */
body .search-overlay .search-cat-btn {
  flex: 1; min-width: 90px; max-width: 140px;
  border: 1px solid #e8e8e8; border-radius: 999px;
  padding: 14px 12px; text-align: center;
  text-decoration: none; cursor: pointer;
  font-size: 12px; color: #1a1a1a;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 600;
  background: #fff;
  transition: all 0.25s;
}
body .search-overlay .search-cat-btn:hover {
  background: #1a1a1a; color: #fff; border-color: #1a1a1a;
}
body .search-overlay .search-cat-symbol { display: none; }

/* 人気のキーワード タグ */
body .search-overlay .search-tags {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 28px;
}
body .search-overlay .search-tag {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 12px; font-weight: 600;
  color: #555; background: #f5f5f5;
  border: 1px solid #ececec; border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
body .search-overlay .search-tag:hover {
  background: #1a1a1a; color: #fff; border-color: #1a1a1a;
}

/* SDC バナー: TOPサイドバーと統一（縦中央寄せ・#0a0a0a） */
body .search-overlay .search-sdc-banner {
  display: block;
  background: #0a0a0a !important;
  color: #fff !important;
  padding: 40px 28px 44px;
  margin: 32px 0;
  text-align: center;
  text-decoration: none;
  transition: background 0.3s;
}
body .search-overlay .search-sdc-banner:hover { background: #1a1a1a !important; }
body .search-overlay .search-sdc-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px; letter-spacing: 0.2em;
  color: rgba(255,255,255,.5);
  margin: 0 0 16px;
  text-transform: uppercase;
}
body .search-overlay .search-sdc-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px; font-weight: 600; line-height: 1.5;
  color: #fff;
  margin: 0 0 16px;
}
body .search-overlay .search-sdc-desc {
  font-size: 12px; color: rgba(255,255,255,.6);
  line-height: 1.8; font-weight: 600;
  margin: 0 0 22px;
  max-width: 560px; margin-left: auto; margin-right: auto;
}
body .search-overlay .search-sdc-btn {
  display: inline-block;
  border: 1px solid rgba(255,255,255,.35); background: transparent;
  padding: 12px 28px; font-size: 11px; color: #fff;
  letter-spacing: 0.1em;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 600;
  transition: all 0.3s;
}
body .search-overlay .search-sdc-banner:hover .search-sdc-btn {
  border-color: #fff;
}

/* 会員限定 2件 2カラム */
body .search-overlay .search-member-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 8px;
}
body .search-overlay .search-member-card {
  display: block;
  text-decoration: none; color: inherit;
}
body .search-overlay .search-member-thumb {
  position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  background-color: #e0ddd8;
  background-size: cover; background-position: center;
  margin-bottom: 8px;
  overflow: hidden;
}
body .search-overlay .search-member-thumb .lock-icon {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.6); color: #fff;
  padding: 4px 6px; border-radius: 3px;
  display: inline-flex; align-items: center;
}
body .search-overlay .search-member-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 14px; font-weight: 600; line-height: 1.5;
  color: #1a1a1a;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
body .search-overlay .search-member-card:hover .search-member-title { color: #2c5f8a; }
@media (max-width: 600px) {
  body .search-overlay .search-sdc-title { font-size: 19px; }
  body .search-overlay .search-sdc-desc { font-size: 11px; }
  body .search-overlay .search-member-grid { gap: 12px; }
  body .search-overlay .search-member-title { font-size: 13px; }
}

/* セクション見出し横の注記（例: 「最新15件まで」） */
body .section-header h2 .section-note {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 11px; font-weight: 500;
  color: #888; margin-left: 6px;
  letter-spacing: 0;
}

/* 会員情報編集ページ */
body .mypage-edit-actions { margin-top: 32px; }
body a.kazi-btn-secondary,
body .kazi-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 24px;
  font-family: 'Noto Sans JP', sans-serif; font-size: 13px; font-weight: 600;
  color: #1a1a1a !important;
  background: #fff;
  text-decoration: none !important;
  border: 1px solid #1a1a1a;
  border-radius: 0;
  transition: background .15s ease, color .15s ease;
}
body a.kazi-btn-secondary:hover,
body .kazi-btn-secondary:hover {
  background: #1a1a1a;
  color: #fff !important;
}
body .mypage-edit-withdraw {
  margin-top: 56px;
  padding: 28px 24px;
  border: 1px solid #f0d6d2;
  background: #fdf6f5;
}
body .mypage-edit-withdraw h3 {
  margin: 0 0 12px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px; font-weight: 700; color: #c55043;
}
body .mypage-edit-withdraw .withdraw-desc {
  font-size: 12px; line-height: 1.7; color: #555;
  margin: 0 0 18px;
}
body button.kazi-btn-danger,
body .kazi-btn-danger {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 22px;
  font-family: 'Noto Sans JP', sans-serif; font-size: 12px; font-weight: 700;
  color: #c55043 !important;
  background: #fff !important;
  border: 1px solid #c55043 !important;
  border-radius: 0 !important;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: background .15s ease, color .15s ease;
}
body button.kazi-btn-danger:hover,
body .kazi-btn-danger:hover {
  background: #c55043 !important;
  color: #fff !important;
}

/* WP-Members user_edit / password フォーム内の送信ボタンを抑制 */
body .mypage-listpage form input[type="submit"],
body .mypage-listpage form button[type="submit"]:not(.kazi-btn-danger) {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto;
  min-width: 200px;
  height: 44px;
  padding: 0 28px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; font-weight: 600;
  color: #fff;
  background: #1a1a1a;
  border: 1px solid #1a1a1a;
  border-radius: 0;
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: background .15s ease;
}
body .mypage-listpage form input[type="submit"]:hover,
body .mypage-listpage form button[type="submit"]:not(.kazi-btn-danger):hover {
  background: #2c5f8a; border-color: #2c5f8a;
}

/* マイページ系一覧ページ本体 */
body .mypage-listpage {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}
body .mypage-listpage .mypage-listpage-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
  border-bottom: 2px solid #1a1a1a; padding-bottom: 14px;
}
body .mypage-listpage .mypage-listpage-head h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: 24px; font-weight: 700; color: #1a1a1a; margin: 0;
}
body .mypage-listpage .mypage-back {
  font-size: 12px; color: #2c5f8a; text-decoration: none;
}
body .mypage-listpage .mypage-back:hover { text-decoration: underline; }

/* ページャー */
body .mypage-pager {
  margin: 32px 0 0;
  display: flex; justify-content: center;
}
body .mypage-pager ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px;
}
body .mypage-pager .pager-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 12px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 13px; font-weight: 600;
  color: #1a1a1a; text-decoration: none;
  background: #fff; border: 1px solid #e8e8e8;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
body .mypage-pager a.pager-link:hover {
  border-color: #2c5f8a; color: #2c5f8a;
}
body .mypage-pager .pager-link.is-current {
  background: #1a1a1a; color: #fff; border-color: #1a1a1a;
  cursor: default;
}
@media (max-width: 768px) {
  body .mypage-listpage { padding: 24px 16px 60px; }
  body .mypage-listpage .mypage-listpage-head h1 { font-size: 20px; }
  body .mypage-pager .pager-link { min-width: 34px; height: 34px; padding: 0 10px; font-size: 12px; }
}

/* ===== TOP パートナーAD / 上部AD 画像のみ表示 2026-06-30 ===== */
body .section#sec-ad-partners {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
#sec-ad-partners .ad-row-4col {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  align-items: stretch;
}
#sec-ad-partners .ad-row-4col .ad-image-only {
  display: block; line-height: 0;
  border: 1px solid #e5e5e5;
}
#sec-ad-partners .ad-row-4col .ad-image-only img {
  width: 100%; height: auto; display: block;
}
@media (max-width: 768px) {
  #sec-ad-partners .ad-row-4col { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 480px) {
  #sec-ad-partners .ad-row-4col { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* 上部AD 1/2 + 中部AD 3/4 も画像のみ + 薄い枠 */
#sec-ad-top1 .ad-row-2col,
#sec-ad-top2 .ad-row-2col {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  align-items: stretch;
}
#sec-ad-top1 .ad-image-only,
#sec-ad-top2 .ad-image-only {
  display: block; line-height: 0;
  border: 1px solid #e5e5e5;
}
#sec-ad-top1 .ad-image-only img,
#sec-ad-top2 .ad-image-only img { width: 100%; height: auto; display: block; }
@media (max-width: 768px) {
  #sec-ad-top1 .ad-row-2col,
  #sec-ad-top2 .ad-row-2col { grid-template-columns: 1fr; gap: 12px; }
}

/* メディアガイド資料請求フォーム CAPTCHA 2026-06-30 */
.mg-form-captcha { margin: 8px 0 16px; }
.mg-form-captcha-label { display: block; font-weight: 600; margin-bottom: 6px; }
.mg-form-captcha-wrap p { margin: 4px 0; }
.mg-form-captcha-wrap img { max-width: 200px; height: auto; border: 1px solid #ddd; }
.mg-form-captcha-wrap input[type=text] { padding: 6px 10px; font-size: 14px; width: 140px; }

/* ===== 共通: SiteGuard CAPTCHA カード (login / media-guide 等) 2026-06-30 ===== */
.kazi-captcha-card {
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 24px 24px 28px;
  margin: 20px 0;
}
.kazi-captcha-title {
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 18px;
  color: #1a1a1a;
}
.kazi-captcha-card p { margin: 0 0 12px; text-align: center; }
.kazi-captcha-card p:last-child { margin-bottom: 0; }
.kazi-captcha-card p img {
  display: inline-block;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding: 8px 16px;
  height: auto;
}
.kazi-captcha-card label[for="siteguard_captcha"] {
  display: block;
  font-size: 13px;
  color: #555;
  margin: 4px 0 10px;
}
.kazi-captcha-card input#siteguard_captcha {
  display: block;
  margin: 0 auto;
  padding: 12px 16px;
  font-size: 16px;
  width: 240px;
  max-width: 100%;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  background: #fff;
}
.kazi-captcha-card input#siteguard_captcha:focus {
  outline: none;
  border-color: #1a3a52;
  box-shadow: 0 0 0 2px rgba(26,58,82,.12);
}