/* ============================================
   SIM比較オンライン — Global CSS v2
   sim-hikaku.online
   Base: nambei-oyaji.com ゴールデンステートデザイン
   ============================================ */

/* --- Reset & Base --- */
:root {
  /* Renewal 2026-04-22: Orange → Blue + Green accent (competitive analysis deliverable) */
  --color-primary: #0066CC;
  --color-primary-hover: #0052A3;
  --color-accent: #34C759;
  --color-accent-hover: #2db84d;
  --color-success: #34C759;
  --color-danger: #FF3B30;
  --color-warning: #FF9500;
  --color-text: #1d1d1f;
  --color-text-secondary: #86868b;
  --color-text-tertiary: #6e6e73;
  --color-border: #d2d2d7;
  --color-bg: #f5f5f7;
  --color-card: #ffffff;
  --color-dark: #1d1d1f;
  --font-stack: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-hover: 0 4px 20px rgba(0,0,0,0.12);
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

body {
  font-family: var(--font-stack) !important;
  color: var(--color-text) !important;
  background: var(--color-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.8 !important;
}

/* ============================================
   Header (Frosted Glass — Apple Style)
   ============================================ */
.header,
#header,
.site-header-container,
#header-container,
.header-container,
.header-container-in {
  background: rgba(255,255,255,0.88) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.1) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  box-shadow: none !important;
}

.header-in,
#header .header-in {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  height: 52px !important;
}

/* Logo */
.logo-header,
.site-name-text,
.logo-text {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  letter-spacing: -0.02em !important;
}

.logo-header a,
.site-name-text a,
.logo-text a {
  color: var(--color-text) !important;
  text-decoration: none !important;
}

/* Header logo image hide (text only) */
.logo-header img {
  display: none !important;
}

/* Navigation */
#navi,
.navi-in,
.menu-header {
  margin-left: auto !important;
}

#navi .menu-header li,
.navi-in ul li {
  list-style: none !important;
}

#navi .menu-header li a,
.navi-in a {
  color: var(--color-text) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  border: none !important;
  background: none !important;
}

#navi .menu-header li a:hover,
.navi-in a:hover {
  color: var(--color-primary) !important;
}

/* Hide category description under nav items */
#navi .item-description,
#navi .sub-caption,
#navi .sub-name,
.navi-in .item-description,
.navi-in .sub-caption,
.menu-description,
.caption-wrap .item-description,
.caption-wrap .sub-caption,
div.item-description.sub-caption,
.menu-header .item-description,
.menu-header .sub-caption {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Hide Cocoon header sub-elements */
#header .header-in .tagline,
.header .tagline,
.site-name-text-sub {
  display: none !important;
}

/* Cocoon navi bar styling */
#navi,
.navi-in {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#navi .menu-header,
.navi-in ul {
  display: flex !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================
   Front Page — Full Width Override
   ============================================ */
/* フロントページではサイドバーを非表示、メインを全幅に */
.page-template-default.page .content-in,
.page .content-in,
body.page .content-in {
  display: block !important;
}

body.page #sidebar,
body.page .sidebar,
.page-template-default #sidebar,
.page-template-default .sidebar {
  display: none !important;
}

body.page .main,
body.page #main,
body.page main#main,
body.page main.main,
body.page .content,
body.page #content,
body.page .wrap,
body.page #content-in,
body.page .content-in,
body.front-top-page .main,
body.front-top-page #main,
body.front-top-page main,
body.front-top-page .wrap,
body.front-top-page #content-in,
body.front-top-page .content-in {
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* フロントページの記事エリアは背景・影なし */
body.page .article,
body.page .entry-content,
body.page #post-12,
body.front-top-page .article,
body.front-top-page .main {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* ============================================
   Main Content Area (Single/Archive pages)
   ============================================ */
.wrap,
#content,
.content {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* content-in: flex for single/archive, block for pages */
body.single .content-in,
body.archive .content-in,
body.category .content-in,
body.search .content-in {
  display: flex !important;
  gap: 40px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;
  flex-direction: row !important;
}

body.single .content-in > .main,
body.archive .content-in > .main {
  flex: 1 !important;
  min-width: 0 !important;
}

body.page .content-in {
  display: block !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ============================================
   Article Styles (Single Post)
   ============================================ */
body.single .article,
body.single .entry-content,
body.single .body {
  background: var(--color-card) !important;
  border-radius: var(--radius-lg) !important;
  padding: 48px 40px !important;
  box-shadow: var(--shadow-card) !important;
}

/* Article title */
.entry-title,
.article-title,
.post-title,
h1.entry-title {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: var(--color-text) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 16px !important;
}

/* Post meta */
.post-meta,
.entry-date,
.post-date,
.date-tags {
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
}

/* Headings */
.entry-content h2,
.article h2 {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--color-text) !important;
  padding: 0 0 12px 0 !important;
  margin: 56px 0 24px 0 !important;
  border: none !important;
  border-bottom: 2px solid var(--color-primary) !important;
  background: none !important;
  text-align: left !important;
  line-height: 1.4 !important;
}

.entry-content h3,
.article h3 {
  font-size: 19px !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  padding: 0 0 0 16px !important;
  margin: 40px 0 16px 0 !important;
  border: none !important;
  border-left: 4px solid var(--color-primary) !important;
  background: none !important;
  line-height: 1.5 !important;
}

.entry-content h4,
.article h4 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  margin: 32px 0 12px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* Paragraph */
.entry-content p {
  line-height: 2.2 !important;
  margin-bottom: 24px !important;
  font-size: 16px !important;
  color: var(--color-text) !important;
}

/* Links */
.entry-content a {
  color: var(--color-primary) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.entry-content a:hover {
  color: var(--color-primary-hover) !important;
  text-decoration: underline !important;
}

/* CTA links inside entry-content must keep white text */
.entry-content a.sim-cta-btn,
.entry-content a.cta-button,
.entry-content .nao-full a[style*="background: #0066CC"],
.entry-content .nao-full a[style*="background:#0066CC"],
.entry-content a[style*="color: #fff"],
.entry-content a[style*="color:#fff"],
.entry-content a[style*="color: white"],
.nao-full a[style*="background: #0066CC"] {
  color: #ffffff !important;
}

/* Outline button — transparent background, primary text */
.entry-content a[style*="background: transparent"],
.nao-full a[style*="background: transparent"] {
  color: #0066CC !important;
  background: transparent !important;
}

/* Ranking "詳細を見る" buttons */
.entry-content .nao-full a[style*="border-radius: 980px"][style*="background: #0066CC"],
.nao-full a[style*="border-radius: 980px"][style*="background: #0066CC"] {
  color: #ffffff !important;
}

/* ============================================
   Tables (比較表)
   ============================================ */
.entry-content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 28px 0 !important;
  font-size: 14px !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  border: none !important;
}

.entry-content table thead th,
.entry-content table th {
  background: var(--color-text) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 14px 16px !important;
  text-align: center !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  border: none !important;
}

.entry-content table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid #f0f0f2 !important;
  text-align: center !important;
  vertical-align: middle !important;
  border-left: none !important;
  border-right: none !important;
}

.entry-content table tbody tr:hover {
  background: #f8f9ff !important;
}

.entry-content table tbody tr:nth-child(even) {
  background: #fafafa !important;
}

.entry-content table tbody tr:nth-child(even):hover {
  background: #f0f4ff !important;
}

/* ============================================
   CTA Buttons
   ============================================ */
.sim-cta-btn,
.cta-button {
  display: inline-block !important;
  background: var(--color-primary) !important;
  color: #ffffff !important;
  padding: 14px 32px !important;
  border-radius: 980px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  border: none !important;
  letter-spacing: 0.01em !important;
}

.sim-cta-btn:hover,
.cta-button:hover {
  background: var(--color-primary-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,102,204,0.3) !important;
  text-decoration: none !important;
}

.sim-cta-btn--green {
  background: var(--color-success) !important;
}

.sim-cta-btn--green:hover {
  background: #2db84d !important;
  box-shadow: 0 4px 12px rgba(52,199,89,0.3) !important;
}

/* ============================================
   結論ボックス / キャリアカード
   ============================================ */
.conclusion-box,
.sim-conclusion {
  background: #f0f7ff !important;
  border-left: 4px solid var(--color-primary) !important;
  padding: 24px !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: 32px !important;
}

.sim-carrier-card {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  margin: 16px 0 !important;
  box-shadow: var(--shadow-card) !important;
  transition: box-shadow 0.3s ease !important;
}

.sim-carrier-card:hover {
  box-shadow: var(--shadow-hover) !important;
}

.sim-carrier-card__name {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 8px !important;
}

.sim-carrier-card__price {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
}

.sim-carrier-card__price small {
  font-size: 14px !important;
  color: var(--color-text-secondary) !important;
  font-weight: 400 !important;
}

.sim-badge {
  display: inline-block !important;
  background: var(--color-success) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  border-radius: 100px !important;
}

.sim-badge--danger { background: var(--color-danger) !important; }
.sim-badge--warning { background: var(--color-warning) !important; }

/* ============================================
   FAQ (details/summary)
   ============================================ */
.entry-content details {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  margin: 8px 0 !important;
  overflow: hidden !important;
}

.entry-content details summary {
  padding: 16px 20px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--color-text) !important;
  transition: background 0.2s ease !important;
}

.entry-content details summary:hover {
  background: var(--color-bg) !important;
}

.entry-content details[open] summary {
  border-bottom: 1px solid var(--color-border) !important;
}

.entry-content details > *:not(summary) {
  padding: 16px 20px !important;
}

/* ============================================
   Sidebar (Single/Archive only)
   ============================================ */
body.single #sidebar,
body.single .sidebar,
body.archive #sidebar,
body.archive .sidebar {
  width: 336px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.sidebar .widget,
#sidebar aside,
#sidebar .widget {
  background: var(--color-card) !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid #e5e5e7 !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  box-shadow: none !important;
}

.sidebar .widget-title,
#sidebar .widget-title,
.sidebar .wp-block-heading,
#sidebar .wp-block-heading,
.sidebar h2.wp-block-heading,
#sidebar h2.wp-block-heading {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--color-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* ============================================
   Footer
   ============================================ */
#footer,
.footer,
.footer-wrap {
  background: var(--color-dark) !important;
  color: #86868b !important;
  padding: 48px 24px 24px !important;
}

#footer a,
.footer a,
.footer-wrap a,
.footer-bottom a {
  color: #a1a1a6 !important;
  text-decoration: none !important;
  font-size: 13px !important;
}

#footer a:hover,
.footer a:hover,
.footer-wrap a:hover {
  color: #ffffff !important;
}

.footer-bottom,
.copyright,
.footer-bottom-content {
  text-align: center !important;
  font-size: 12px !important;
  color: #86868b !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
}

/* ============================================
   Cocoon Theme Overrides
   ============================================ */

/* Breadcrumb */
.breadcrumb {
  font-size: 12px !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

/* SNS Share Buttons — FORCE HIDE */
.sns-share,
.sns-follow,
.sns-share-buttons,
.sns-follow-buttons,
.sns-share-message,
.sns-follow-message,
div.sns-share,
div.sns-follow,
.share,
.social-buttons,
.post-share,
.article-footer .sns-share,
.article-footer .sns-follow,
footer.article-footer .sns-share,
footer.article-footer .sns-follow,
.entry-header .sns-share,
.article-header .sns-share,
div.sns-share.ss-top,
div.sns-share.ss-bottom,
.ss-top,
.ss-bottom,
div[class*="sns-share"],
div[class*="sns-follow"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Cocoon list style reset */
.entry-content ul {
  list-style: disc !important;
  padding-left: 24px !important;
}

.entry-content ol {
  list-style: decimal !important;
  padding-left: 24px !important;
}

.entry-content li {
  line-height: 2.0 !important;
  margin-bottom: 8px !important;
}

.entry-content ul li::before,
.entry-content ol li::before {
  content: none !important;
  display: none !important;
}

/* TOC — Apple style */
.toc,
#toc,
.table-of-contents {
  background: var(--color-bg) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 24px !important;
  margin: 24px 0 32px !important;
}

.toc-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin-bottom: 12px !important;
  color: var(--color-text-secondary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.toc-content a,
.toc a {
  color: var(--color-text) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 2.0 !important;
}

.toc-content a:hover,
.toc a:hover {
  color: var(--color-primary) !important;
}

/* Cocoon box styles reset */
.blank-box,
.common-icon-box,
.info-box,
.caution-box,
.warning-box {
  border-radius: var(--radius-md) !important;
  border-width: 1px !important;
  padding: 20px !important;
}

/* Hide Cocoon mobile menu button styling override */
.menu-button,
.mobile-menu-buttons,
#navi-menu-input,
.mobile-menu-button {
  z-index: 99999 !important;
}

/* Hide Cocoon edit link, comment link, footer social */
.post-edit-link,
.edit-link,
.fa-edit,
.post-footer,
.article-footer,
.under-entry-content,
.comment-btn,
.comments-area,
.comment-respond {
  display: none !important;
}

/* Post navigation */
.pagination,
.pager-post-navi {
  margin-top: 40px !important;
}

.pager-post-navi a {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 16px !important;
  text-decoration: none !important;
  transition: box-shadow 0.2s ease !important;
}

.pager-post-navi a:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* Author box */
.author-box,
.author-info {
  background: var(--color-card) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px !important;
  margin-top: 40px !important;
}

/* Related posts */
.related-entries {
  margin-top: 40px !important;
}

.related-entry-card {
  border-radius: var(--radius-md) !important;
  overflow: hidden !important;
  border: 1px solid var(--color-border) !important;
  transition: box-shadow 0.2s ease !important;
}

.related-entry-card:hover {
  box-shadow: var(--shadow-hover) !important;
}

/* ============================================
   Visual Emphasis Markers
   ============================================ */
.marker-yellow {
  background: linear-gradient(transparent 60%, #fff3cd 60%);
}

.marker-pink {
  background: linear-gradient(transparent 60%, #ffd6e7 60%);
}

.marker-blue {
  background: linear-gradient(transparent 60%, #d6e4ff 60%);
}

/* ============================================
   Responsive
   ============================================ */
@media screen and (max-width: 1024px) {
  .content-in {
    flex-direction: column !important;
  }

  body.single #sidebar,
  body.single .sidebar,
  body.archive #sidebar,
  body.archive .sidebar {
    width: 100% !important;
  }
}

@media screen and (max-width: 768px) {
  #navi .menu-header {
    display: none !important;
  }

  body.single .article,
  body.single .entry-content,
  body.single .body {
    padding: 28px 20px !important;
  }

  .entry-title,
  h1.entry-title {
    font-size: 22px !important;
  }

  .entry-content h2,
  .article h2 {
    font-size: 20px !important;
    margin: 40px 0 16px 0 !important;
  }

  .entry-content h3,
  .article h3 {
    font-size: 17px !important;
  }

  .entry-content p {
    font-size: 15px !important;
  }

  .entry-content .table-container,
  .entry-content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .sim-cta-btn,
  .cta-button {
    display: block !important;
    width: 100% !important;
    padding: 16px !important;
  }
}

@media screen and (max-width: 600px) {
  .header-in,
  #header .header-in {
    padding: 0 16px !important;
    height: 44px !important;
  }

  .logo-header,
  .site-name-text {
    font-size: 15px !important;
  }

  .entry-content table th,
  .entry-content table td {
    padding: 10px 8px !important;
    font-size: 12px !important;
  }
}

/* ============================================
   Front Page Specific
   ============================================ */
/* Hide page title "ホーム" on front page */
body.page .entry-title,
body.page .article-title,
body.page h1.entry-title,
body.front-top-page .entry-title,
body.front-top-page h1.entry-title,
body.page-id-12 .entry-title,
body.page-id-12 h1.entry-title {
  display: none !important;
}

/* Hide TOC on front page */
body.page .toc,
body.page #toc,
body.page .table-of-contents,
body.front-top-page .toc,
body.page-id-12 .toc {
  display: none !important;
}

/* Hide search widget / sidebar widgets that leak into front page */
body.page .widget_search,
body.front-top-page .widget_search,
body.page-id-12 .widget_search {
  display: none !important;
}

/* Hide breadcrumb on front page */
body.front-top-page .breadcrumb,
body.page-id-12 .breadcrumb {
  display: none !important;
}

/* Hide the white entry-header bar on front page */
body.front-top-page .entry-header,
body.page-id-12 .entry-header,
body.front-top-page .article-header,
body.page-id-12 .article-header {
  display: none !important;
}

/* Hide date/meta on front page */
body.page .date-tags,
body.page .post-date,
body.page .post-meta,
body.front-top-page .date-tags {
  display: none !important;
}

/* Hide author box on front page */
body.page .author-box,
body.front-top-page .author-box {
  display: none !important;
}

/* Hide Cocoon mobile footer buttons on front page (if not needed) */
body.front-top-page .mobile-menu-buttons {
  /* keep visible for mobile nav */
}

/* ============================================
   Cocoon Mobile Footer Bar Override
   ============================================ */
.mobile-menu-buttons {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 0.5px solid rgba(0,0,0,0.1) !important;
  box-shadow: none !important;
}

/* ============================================
   Back to Top Button
   ============================================ */
.back-to-top {
  position: fixed !important;
  bottom: 80px !important;
  right: 20px !important;
  width: 44px !important;
  height: 44px !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border: 0.5px solid rgba(0,0,0,0.12) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
  z-index: 9990 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.back-to-top.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

.back-to-top:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

.back-to-top::before {
  content: "" !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-top: 2px solid var(--color-text) !important;
  border-right: 2px solid var(--color-text) !important;
  transform: rotate(-45deg) translateY(2px) !important;
}

/* ============================================
   Table Scroll Indicators
   ============================================ */
.table-scroll-wrapper {
  position: relative !important;
  overflow: hidden !important;
  margin: 28px 0 !important;
}

.table-scroll-wrapper::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 24px !important;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.9)) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
  z-index: 2 !important;
}

.table-scroll-wrapper.has-scroll::after {
  opacity: 1 !important;
}

.table-scroll-wrapper.scrolled-end::after {
  opacity: 0 !important;
}

.table-scroll-wrapper .table-inner {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}


/* ============================================
   SMALL PHONES — 375px以下
   iPhone SE / 小型Android向け追加調整
   ============================================ */
@media screen and (max-width: 375px) {
  /* フォントサイズ縮小 */
  body { font-size: 14px; }
  h1 { font-size: 1.3rem; }
  h2 { font-size: 1.15rem; }
  h3 { font-size: 1.05rem; }
  
  /* テーブルスクロール強制 */
  table {
    font-size: 12px;
  }
  
  /* CTAボタン */
  .sim-cta-btn, .cta-button {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
  
  /* 比較カード */
  .comparison-card, .carrier-card {
    padding: 12px !important;
  }
  
  /* ナビゲーション */
  .site-title { font-size: 1rem; }
}

/* ============================================
   Print
   ============================================ */
@media print {
  .header, #header, #sidebar, .sidebar, .footer, #footer,
  .sns-share, .sns-follow, .sim-cta-btn, .cta-button {
    display: none !important;
  }
}

/* ===== Japanese Kinsoku Shori (行頭禁則) — Global 2026-04-23 =====
   Prevent 、。 and similar punctuation from starting a line.
   Uses `line-break: strict` to enforce stricter JIS X 4051 rules.
   Removes `overflow-wrap: break-word` from body text where it causes
   aggressive mid-phrase breaks. */
html {
  line-break: strict !important;
}

body,
body.home,
body.home p,
body.home .entry-content p,
body.home .entry-content li,
body.home .entry-content span,
body.home .entry-content div,
body.home h1,
body.home h2,
body.home h3,
body.home h4,
body.home h5,
body.home .sim-type-card__why,
body.home .sim-type-card__plan,
body.home .sim-trust-card__desc,
body.home .sim-step__text,
body.home .sim-step__title,
body.home .sim-glossary__def,
body.home .sim-glossary__term,
body.home .sim-wizard-trigger__headline,
body.home .sim-wizard-trigger__sub,
body.home .sim-footer-tagline,
body.home .sim-footer-copy,
body.home .sim-footer-notice,
.sim-footer-rich p,
.sim-footer-rich div {
  line-break: strict !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* ===== Table Header Contrast Fix (2026-04-22) =====
   Neutralize Cocoon's default th bg when article uses inline tr-style
   to prevent white-on-light-gray (contrast 1.08). Affects ~3 articles. */
.entry-content table thead tr[style*="background"] th,
.entry-content table thead tr[style*="background"] td,
.entry-content table tbody tr[style*="background"] th,
.entry-content table tbody tr[style*="background"] td,
body.single table tr[style*="background"] th,
body.single table tr[style*="background"] td {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
}

/* ============================================
   Header / Navi — v3 Refinement (2026-04-23)
   - Logo: weight 900, tighter spacing for strong brand presence
   - Nav: single-row nowrap, tighter padding, refined hover pill
   - Contact (お問い合わせ): CTA pill (accent green) for emphasis + space saving
   - Medium viewport (769-1280px): extra tightening to prevent wrap
   ============================================ */

/* Emphasize logo as primary brand element */
.logo-header,
.site-name-text,
.logo-text,
.logo-header a,
.site-name-text a,
.logo-text a,
.site-name {
  font-size: 19px !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}

/* Header container: frosted glass, sticky, z-index ensures navi is on top */
.header-container,
#header-container {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 0.5px solid rgba(0,0,0,0.08) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
}

/* Relative container so #navi can be absolute-positioned to the right.
   This bypasses Cocoon's `.navi { width: 100% }` which conflicts with flex. */
#header-container-in.hlt-top-menu,
.header-container-in.hlt-top-menu {
  position: relative !important;
  display: block !important;
  max-width: 1200px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  min-height: 58px !important;
  box-sizing: border-box !important;
}

/* Logo stays on the left as a flow-level block */
#header-container-in.hlt-top-menu > #header,
.header-container-in.hlt-top-menu > #header,
#header-container-in > #header,
.header-container-in > #header {
  background: transparent !important;
  border: none !important;
  position: static !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
}

#header-container-in.hlt-top-menu > #header .header-in,
.header-container-in.hlt-top-menu > #header .header-in,
#header-container-in.hlt-top-menu #header-in,
.header-container-in.hlt-top-menu #header-in {
  padding: 0 !important;
  max-width: none !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  margin: 0 !important;
}

/* Logo alignment — keep on the left, not centered */
#header-container-in.hlt-top-menu .logo,
#header-container-in.hlt-top-menu .logo-header,
#header-container-in.hlt-top-menu .logo-text,
#header-container-in.hlt-top-menu .site-name-text-link {
  text-align: left !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Nav absolute-positioned to right edge, vertically centered.
   This guarantees no overlap with the logo regardless of Cocoon's defaults. */
#header-container-in.hlt-top-menu > #navi,
.header-container-in.hlt-top-menu > #navi,
#header-container-in .navi,
.header-container-in .navi {
  position: absolute !important;
  top: 50% !important;
  right: 24px !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  max-width: calc(100% - 220px) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
}

#header-container-in.hlt-top-menu > #navi > #navi-in,
#header-container-in.hlt-top-menu > #navi > .navi-in,
.header-container-in.hlt-top-menu > #navi > .navi-in,
.header-container-in .navi-in {
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  width: auto !important;
  display: block !important;
}

/* Nav list: classical inline-block layout with text-align:right.
   Avoids flex inconsistencies with Cocoon's hlt-tm-small rules. */
#navi .menu-header,
.navi-in ul.menu-pc,
#header-container-in .menu-header {
  display: block !important;
  text-align: right !important;
  white-space: nowrap !important;
  width: auto !important;
  max-width: 100% !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

#navi .menu-header > li,
.navi-in ul.menu-pc > li,
#header-container-in .menu-header > li {
  display: inline-block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  position: relative !important;
  white-space: nowrap !important;
  height: auto !important;
  line-height: normal !important;
  vertical-align: middle !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
}

/* Nav items: pill-style hover for richness, NO inner padding from caption-wrap */
#navi .menu-header li a,
.navi-in ul.menu-pc a,
#header-container-in .menu-header li a {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 7px 12px !important;
  border-radius: 8px !important;
  color: #1d1d1f !important;
  text-decoration: none !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
  height: auto !important;
  width: auto !important;
}

#navi .menu-header li a:hover,
.navi-in ul.menu-pc a:hover,
#header-container-in .menu-header li a:hover {
  background: rgba(0,102,204,0.08) !important;
  color: #0066CC !important;
}

/* Collapse caption-wrap + item-label to inline so they don't add width */
#navi .menu-header .caption-wrap,
.navi-in .caption-wrap,
.menu-header .caption-wrap {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  height: auto !important;
  line-height: inherit !important;
  width: auto !important;
}

#navi .menu-header .item-label,
.navi-in .item-label,
.menu-header .item-label {
  display: inline !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}

/* Completely remove item-description from layout (display:none + absolute pull-off-screen as safety) */
#navi .menu-header .item-description,
#navi .menu-header .sub-caption,
.navi-in .item-description,
.navi-in .sub-caption,
.menu-header .item-description,
.menu-header .sub-caption {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* Contact (お問い合わせ) — CTA pill */
#navi .menu-header li.menu-item-object-page a,
#navi .menu-header li#menu-item-11518 a,
.navi-in ul.menu-pc li.menu-item-object-page a {
  background: #34C759 !important;
  color: #FFFFFF !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 2px rgba(52,199,89,0.25) !important;
  margin-left: 8px !important;
}

#navi .menu-header li.menu-item-object-page a:hover,
#navi .menu-header li#menu-item-11518 a:hover,
.navi-in ul.menu-pc li.menu-item-object-page a:hover {
  background: #2db84d !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(52,199,89,0.35) !important;
  transform: translateY(-1px) !important;
}

/* Medium viewport — extra compact to prevent wrap */
@media screen and (max-width: 1280px) and (min-width: 769px) {
  #navi .menu-header li a,
  .navi-in ul.menu-pc a {
    font-size: 12.5px !important;
    padding: 6px 9px !important;
  }
  #navi .menu-header li.menu-item-object-page a,
  #navi .menu-header li#menu-item-11518 a {
    padding: 7px 13px !important;
    margin-left: 6px !important;
  }
  .logo-header,
  .site-name-text,
  .logo-text {
    font-size: 17px !important;
  }
}

/* Narrow viewport — even tighter */
@media screen and (max-width: 1100px) and (min-width: 769px) {
  #navi .menu-header li a,
  .navi-in ul.menu-pc a {
    font-size: 12px !important;
    padding: 6px 7px !important;
  }
  #navi .menu-header,
  .navi-in ul.menu-pc {
    gap: 0 !important;
  }
  #navi .menu-header li.menu-item-object-page a,
  #navi .menu-header li#menu-item-11518 a {
    padding: 6px 11px !important;
    margin-left: 4px !important;
  }
  #header-container-in.hlt-top-menu > #navi {
    max-width: calc(100% - 180px) !important;
  }
}

/* ============================================
   Front Page H2 Section Titles (2026-04-23)
   - Center-align + emphasized typography
   - Adds decorative accent below for "title" feel
   - Scoped to front-top-page / home body to avoid sidebar H2 conflicts
   ============================================ */
body.home .entry-content h2,
body.home .article h2,
body.front-top-page .entry-content h2,
body.front-top-page .article h2,
body.page-id-12 .entry-content h2,
body.page-id-12 .article h2 {
  text-align: center !important;
  font-family: "SF Pro Display", "Hiragino Kaku Gothic ProN", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: clamp(26px, 3.6vw, 40px) !important;
  font-weight: 900 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.025em !important;
  color: #1d1d1f !important;
  margin: 12px auto 12px !important;
  padding: 0 24px !important;
  max-width: 900px !important;
  position: relative !important;
  background: none !important;
  border: none !important;
  border-left: none !important;
  border-bottom: none !important;
}

/* Exclude sidebar H2s — preserve original widget styling */
body.home #sidebar h2,
body.home .sidebar h2,
body.front-top-page #sidebar h2,
body.front-top-page .sidebar h2,
body.page-id-12 #sidebar h2,
body.page-id-12 .sidebar h2 {
  text-align: left !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 12px !important;
  max-width: none !important;
  padding: 8px 12px !important;
}

body.home #sidebar h2::after,
body.home .sidebar h2::after,
body.front-top-page #sidebar h2::after {
  display: none !important;
  content: none !important;
}

/* Accent underline — sleek brand-colored bar */
body.home .entry-content h2::after,
body.home .article h2::after,
body.front-top-page .entry-content h2::after,
body.front-top-page .article h2::after,
body.page-id-12 .entry-content h2::after,
body.page-id-12 .article h2::after {
  content: "" !important;
  display: block !important;
  width: 56px !important;
  height: 4px !important;
  background: linear-gradient(90deg, #0066CC 0%, #34C759 100%) !important;
  margin: 18px auto 0 !important;
  border-radius: 2px !important;
}

/* Strip any inherited Cocoon H2 ::before decorations on front page */
body.home .entry-content h2::before,
body.front-top-page .entry-content h2::before,
body.page-id-12 .entry-content h2::before {
  display: none !important;
  content: none !important;
}

/* H2 inner span (WP auto-generates toc anchor spans) — make inline so centering works */
body.home .entry-content h2 > span,
body.front-top-page .entry-content h2 > span,
body.page-id-12 .entry-content h2 > span {
  display: inline !important;
  text-align: inherit !important;
}

/* Mobile: smaller type, less vertical space */
@media screen and (max-width: 640px) {
  body.home .entry-content h2,
  body.front-top-page .entry-content h2,
  body.page-id-12 .entry-content h2 {
    font-size: 22px !important;
    margin: 10px auto 10px !important;
    padding: 0 16px !important;
  }
  body.home .entry-content h2::after,
  body.front-top-page .entry-content h2::after,
  body.page-id-12 .entry-content h2::after {
    width: 42px !important;
    height: 3px !important;
    margin: 14px auto 0 !important;
  }
}

/* ============================================
   Footer — Rich Dark Layout (2026-04-23)
   Transforms Cocoon's minimal footer into a
   multi-column, gradient-backed, editorial-style footer.
   ============================================ */
#footer,
.footer,
.footer-container,
footer#footer {
  background: linear-gradient(180deg, #0A1F44 0%, #071A38 100%) !important;
  color: #D8E4F5 !important;
  border-top: none !important;
  margin-top: 80px !important;
  padding: 0 !important;
}

#footer::before {
  content: "" !important;
  display: block !important;
  height: 4px !important;
  background: linear-gradient(90deg, #0066CC 0%, #34C759 50%, #FFC66D 100%) !important;
}

#footer #footer-in,
#footer .footer-in {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 56px 32px 32px !important;
}

#footer .footer-bottom {
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  align-items: center !important;
}

/* Footer logo — big, bold, with tagline via ::after */
#footer .footer-bottom-logo {
  text-align: center !important;
}

#footer .footer-bottom-logo .logo-footer,
#footer .footer-bottom-logo .site-name-text {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
}

#footer .footer-bottom-logo .logo-footer a,
#footer .footer-bottom-logo .site-name-text a {
  color: #FFFFFF !important;
}

#footer .footer-bottom-logo::after {
  content: "格安SIM、3分で決まる。" !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #7FB4F0 !important;
  letter-spacing: 0.02em !important;
  margin-top: 8px !important;
}

/* Footer nav — horizontal, right-sized, subtle separators */
#footer .footer-bottom-content {
  width: 100% !important;
  text-align: center !important;
}

#footer #navi-footer,
#footer .navi-footer {
  width: auto !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
}

#footer #navi-footer-in,
#footer .navi-footer-in {
  padding: 0 !important;
  max-width: none !important;
}

#footer .menu-footer {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#footer .menu-footer li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

#footer .menu-footer li + li::before {
  content: "·" !important;
  position: absolute !important;
  left: -14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #3D5A80 !important;
  font-size: 14px !important;
}

#footer .menu-footer li a {
  display: inline-block !important;
  color: #A8C0E0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: color 0.2s ease, background 0.2s ease !important;
  background: none !important;
  border: none !important;
}

#footer .menu-footer li a:hover {
  color: #FFFFFF !important;
  background: rgba(255,255,255,0.06) !important;
}

/* Copyright */
#footer .source-org,
#footer .copyright {
  margin-top: 24px !important;
  padding-top: 24px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  color: #6A89B5 !important;
  font-size: 12px !important;
  text-align: center !important;
  letter-spacing: 0.02em !important;
  width: 100% !important;
}

#footer .source-org a,
#footer .copyright a {
  color: #A8C0E0 !important;
}

/* Rich footer section — injected by mu-plugin BEFORE #footer via get_footer hook.
   We style .sim-footer-rich-wrap as a seamless dark extension to merge with #footer below. */
.sim-footer-rich-wrap {
  background: linear-gradient(180deg, #0A1F44 0%, #0A1F44 100%) !important;
  color: #D8E4F5 !important;
  margin-top: 80px !important;
  padding: 0 !important;
  border-top: 4px solid transparent !important;
  border-image: linear-gradient(90deg, #0066CC 0%, #34C759 50%, #FFC66D 100%) 1 !important;
}

/* Hide the original Cocoon #footer entirely — rich footer has everything we need */
.sim-footer-rich-wrap ~ #footer,
.sim-footer-rich-wrap + #footer,
.sim-footer-rich-wrap ~ footer#footer,
body #footer.footer-container {
  display: none !important;
}

.sim-footer-rich {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 56px 32px 40px !important;
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
  gap: 48px !important;
  text-align: left !important;
}

.sim-footer-col h4 {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #FFC66D !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
}

.sim-footer-col--brand .sim-footer-logo {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 12px !important;
}

.sim-footer-col--brand .sim-footer-tagline {
  font-size: 13px !important;
  color: #A8C0E0 !important;
  line-height: 1.7 !important;
  margin: 0 0 20px !important;
}

.sim-footer-col--brand .sim-footer-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  background: rgba(52,199,89,0.12) !important;
  border: 1px solid rgba(52,199,89,0.35) !important;
  border-radius: 999px !important;
  color: #34C759 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.sim-footer-col ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sim-footer-col li {
  margin: 0 0 10px !important;
}

.sim-footer-col li a {
  color: #D8E4F5 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.sim-footer-col li a:hover {
  color: #FFC66D !important;
}

.sim-footer-col li a::before {
  content: "→" !important;
  color: #3D5A80 !important;
  font-size: 11px !important;
  transition: color 0.18s ease, transform 0.18s ease !important;
}

.sim-footer-col li a:hover::before {
  color: #FFC66D !important;
  transform: translateX(2px) !important;
}

/* Rich footer bottom strip (copyright + notice) */
.sim-footer-bottom {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 24px 32px 32px !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  margin-top: 8px !important;
}

.sim-footer-bottom-inner {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  font-size: 12px !important;
  color: #6A89B5 !important;
  letter-spacing: 0.02em !important;
}

.sim-footer-copy {
  color: #A8C0E0 !important;
  font-weight: 500 !important;
}

.sim-footer-notice {
  color: #6A89B5 !important;
}

/* Mobile footer: stack columns */
@media screen and (max-width: 768px) {
  .sim-footer-rich {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
    padding: 40px 20px 32px !important;
  }
  .sim-footer-col--brand {
    grid-column: 1 / -1 !important;
  }
  .sim-footer-bottom {
    padding: 20px !important;
  }
  .sim-footer-bottom-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
}

@media screen and (max-width: 480px) {
  .sim-footer-rich {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

/* ================================================================
   MOBILE RESPONSIVE OVERHAUL — 2026-04-23
   Breakpoints: 768 (tablet) / 480 (mobile) / 375 (small mobile)
   Strategy: hide desktop nav, fluid typography, proper wrapping,
             horizontal scroll hints, touch-friendly targets.
   ================================================================ */

@media screen and (max-width: 768px) {

  /* ===== HEADER (mobile) ===== */
  /* Compact height, tight padding, logo prominent */
  #header-container-in.hlt-top-menu,
  .header-container-in.hlt-top-menu {
    min-height: 52px !important;
    padding: 0 16px !important;
  }

  #header-container-in.hlt-top-menu > #header,
  .header-container-in.hlt-top-menu > #header {
    height: 52px !important;
  }

  #header-container-in.hlt-top-menu .logo-header,
  #header-container-in.hlt-top-menu .site-name-text,
  #header-container-in.hlt-top-menu .logo-text {
    font-size: 16px !important;
    letter-spacing: -0.03em !important;
  }

  /* Hide desktop nav completely on mobile — Cocoon's bottom fixed nav handles mobile navigation */
  #header-container-in.hlt-top-menu > #navi,
  .header-container-in.hlt-top-menu > #navi,
  #navi.navi {
    display: none !important;
  }

  /* ===== FRONT-PAGE H2 section titles ===== */
  /* Fluid font to always fit within viewport width. 15 chars max (e.g. "SIM比較オンラインが選ばれる理由") */
  body.home .entry-content h2,
  body.front-top-page .entry-content h2,
  body.page-id-12 .entry-content h2 {
    font-size: clamp(18px, 5.3vw, 22px) !important;
    line-height: 1.35 !important;
    padding: 0 8px !important;
    margin: 8px auto 12px !important;
    max-width: 100% !important;
    width: 100% !important;
    word-break: auto-phrase !important;
    line-break: strict !important;
    overflow-wrap: normal !important;
    letter-spacing: -0.025em !important;
    box-sizing: border-box !important;
  }

  body.home .entry-content h2::after,
  body.front-top-page .entry-content h2::after,
  body.page-id-12 .entry-content h2::after {
    width: 44px !important;
    height: 3px !important;
    margin: 14px auto 0 !important;
  }

  /* ===== HERO section ===== */
  body.home .sim-hero,
  body.home .hero,
  body.home [class*="hero"] {
    padding: 28px 16px 24px !important;
  }

  body.home h1,
  body.home .hero h1,
  body.home [class*="hero"] h1 {
    font-size: 28px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
  }

  /* Carrier chip strip — force wrap (was horizontal overflow) */
  body.home .sim-carrier-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
    padding: 0 8px !important;
    overflow: visible !important;
  }

  body.home .sim-carrier-strip__label {
    flex: 0 0 100% !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }

  body.home .sim-carrier-chip {
    font-size: 11px !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* Type card grid — stack on mobile */
  body.home .sim-type-grid,
  body.home .sim-type-grid--5 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 0 16px !important;
  }

  body.home .sim-type-card {
    padding: 22px 18px !important;
  }

  body.home .sim-type-card__name {
    font-size: 18px !important;
  }

  body.home .sim-type-card__plan--big {
    font-size: 15px !important;
  }

  /* Trust badges (if present) */
  body.home .sim-trust-badges {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  body.home .sim-trust-badge {
    font-size: 12px !important;
  }

  /* ===== TYPE-BASED CARDS (instant-pick) — already stack, just refine padding ===== */
  body.home .sim-type-card,
  body.home .sim-instant-pick,
  body.home [class*="instant-pick"] {
    padding: 20px 18px !important;
    margin-bottom: 12px !important;
  }

  body.home .sim-type-card h3,
  body.home .sim-instant-pick h3 {
    font-size: 18px !important;
  }

  /* ===== TRUST CARDS (20社 / 3軸 / 週次) ===== */
  .sim-trust-section {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 16px !important;
  }

  .sim-trust-card {
    padding: 22px 18px !important;
  }

  /* ===== WIZARD CTA ===== */
  body.home .sim-wizard-cta,
  body.home .sim-wizard-trigger {
    margin: 0 16px !important;
    padding: 24px 18px !important;
  }

  body.home .sim-wizard-trigger__headline {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  body.home .sim-wizard-trigger__sub {
    font-size: 12px !important;
  }

  body.home .sim-wizard-trigger__cta {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 15px !important;
  }

  /* ===== COMPARISON TABLE (.sim-simple-table) ===== */
  body.home .sim-simple-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -4px !important;
    padding: 0 4px !important;
    position: relative !important;
  }

  body.home .sim-simple-table {
    min-width: 560px !important;
    font-size: 12px !important;
  }

  body.home .sim-simple-table th,
  body.home .sim-simple-table td,
  body.home .entry-content table th,
  body.home .entry-content table td {
    padding: 10px 8px !important;
    white-space: nowrap !important;
  }

  body.home .sim-simple-table__price,
  body.home .sim-simple-table__name {
    white-space: nowrap !important;
  }

  /* No right-edge fade — it obstructs content when scrolled. Rely on native scroll affordance. */
  body.home .sim-simple-table-wrap::after {
    display: none !important;
    content: none !important;
  }

  /* ===== SELECTION GUIDE (1-2-3 steps) =====
     Number badge as absolute top-left corner (doesn't push body right).
     Body text uses EQUAL horizontal padding so content is centered in the card. */
  body.home .sim-steps {
    padding: 0 16px !important;
  }

  body.home .sim-step {
    display: block !important;
    padding: 60px 18px 24px !important; /* 60px top — badge(30px)+gap(18px)+breathing(12px) */
    margin-bottom: 14px !important;
    position: relative !important;
    gap: 0 !important;
  }

  body.home .sim-step__num {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    width: 30px !important;
    height: 30px !important;
    font-size: 13px !important;
    flex-shrink: 0 !important;
  }

  body.home .sim-step__body {
    flex: 1 1 auto !important;
    width: 100% !important;
    text-align: left !important;
  }

  body.home .sim-step__title {
    font-size: 16px !important;
    margin: 0 0 8px !important;
    padding-left: 12px !important;
    border-left: 3px solid #0066CC !important;
    line-height: 1.4 !important;
  }

  body.home .sim-step__text {
    font-size: 13px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ===== GLOSSARY CARDS (.sim-glossary grid) =====
     Match step-card format: remove border-left on card (was pushing content right),
     move the blue accent to the term/title with border-left, body text centered
     with equal padding both sides. */
  body.home .sim-glossary {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 16px !important;
  }

  body.home .sim-glossary__item {
    padding: 18px 18px !important;
    border-left: none !important; /* remove left border — was shifting content right */
  }

  body.home .sim-glossary__term {
    font-size: 14px !important;
    margin: 0 0 8px !important;
    padding-left: 12px !important;
    border-left: 3px solid #0066CC !important;
    line-height: 1.4 !important;
  }

  body.home .sim-glossary__def {
    font-size: 13px !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* ===== "もっと詳しく知りたい方へ" inline-styled 4-column grid ===== */
  /* Target the inline `grid-template-columns: repeat(4, 1fr)` */
  body.home div[style*="grid-template-columns: repeat(4"],
  body.home div[style*="repeat(4, 1fr)"],
  body.home div[style*="repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 0 8px !important;
  }

  /* ===== BUTTONS / CTAs ===== */
  body.home .sim-cta-btn,
  body.home .cta-button,
  body.home [class*="btn-primary"],
  body.home [class*="cta"] a {
    display: inline-flex !important;
    min-height: 48px !important; /* touch-friendly */
    padding: 12px 20px !important;
    font-size: 15px !important;
  }

  /* ===== BODY TEXT ===== */
  body.home .entry-content p {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

  /* ===== SECTION PADDING ===== */
  body.home .nao-full,
  body.home [style*="padding: 72px"],
  body.home [style*="padding: 64px"],
  body.home [style*="padding: 56px"] {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ===== FOOTER MOBILE (rich) — already defined, ensure padding ===== */
  .sim-footer-rich-wrap {
    margin-top: 48px !important;
  }

  .sim-footer-rich {
    padding: 40px 20px 28px !important;
  }

  .sim-footer-col--brand .sim-footer-logo {
    font-size: 19px !important;
  }

  .sim-footer-col h4 {
    font-size: 11px !important;
    margin-bottom: 12px !important;
  }

  .sim-footer-col li {
    margin-bottom: 8px !important;
  }

  .sim-footer-col li a {
    font-size: 13px !important;
  }

  /* Footer bottom strip — allow text to wrap, no overflow */
  .sim-footer-bottom {
    padding: 20px 20px 24px !important;
  }

  .sim-footer-bottom-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    text-align: left !important;
  }

  .sim-footer-copy,
  .sim-footer-notice {
    font-size: 11px !important;
    word-break: auto-phrase !important;
    overflow-wrap: break-word !important;
    line-height: 1.6 !important;
  }
}

/* ===== SMALL MOBILE (iPhone SE / narrow) ===== */
@media screen and (max-width: 480px) {

  body.home .entry-content h2,
  body.front-top-page .entry-content h2,
  body.page-id-12 .entry-content h2 {
    font-size: clamp(17px, 5.2vw, 19px) !important;
    padding: 0 6px !important;
  }

  /* Hero text shrink */
  body.home h1,
  body.home .hero h1,
  body.home [class*="hero"] h1 {
    font-size: 24px !important;
  }

  /* Section padding further reduce */
  body.home .nao-full,
  body.home [style*="padding: 72px"],
  body.home [style*="padding: 64px"] {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Card padding further reduce */
  body.home .sim-trust-card,
  body.home .sim-type-card,
  body.home .sim-step {
    padding: 56px 14px 20px !important;
  }

  /* Type card price can shrink */
  body.home .sim-type-card__plan,
  body.home .sim-type-card__plan--big {
    font-size: 14px !important;
  }

  /* Tags can shrink */
  body.home .sim-type-card__tag {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }

  /* "もっと詳しく" grid — single col at really narrow */
  body.home div[style*="grid-template-columns: repeat(4"],
  body.home div[style*="repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
}

/* ===== TINY MOBILE (iPhone SE 1st gen 320px) ===== */
@media screen and (max-width: 375px) {
  body.home .entry-content h2,
  body.front-top-page .entry-content h2,
  body.page-id-12 .entry-content h2 {
    font-size: 18px !important;
    padding: 0 10px !important;
  }

  body.home h1 {
    font-size: 22px !important;
  }

  body.home .entry-content p {
    font-size: 14px !important;
  }

  body.home .sim-type-card h3,
  body.home .sim-instant-pick h3 {
    font-size: 16px !important;
  }
}