/* ==========================================================================
   IoTBiz Theme - main.css
   (Google Fonts は functions.php の wp_enqueue_style で読み込み)
   ========================================================================== */

/* --------------------------------------------------------------------------
   見出しリセット上書き
   Tailwind CSS v3 のリセットが h1〜h6 を font-size:inherit; font-weight:inherit に
   潰すため、WP テーマ用のデフォルトサイズを先頭で定義して上書きする。
   ※ .m-article-details h2/h3 はこの後の元サイト移植 CSS が更に上書きする
   -------------------------------------------------------------------------- */
h1 { font-size: 1.875rem; font-weight: 700; line-height: 1.3; }  /* text-3xl 相当 */
h2 { font-size: 1.5rem;   font-weight: 700; line-height: 1.4; }  /* text-2xl 相当 */
h3 { font-size: 1.25rem;  font-weight: 700; line-height: 1.5; }  /* text-xl  相当 */
h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.5; }  /* text-lg  相当 */
h5 { font-size: 1rem;     font-weight: 600; line-height: 1.5; }
h6 { font-size: 0.875rem; font-weight: 600; line-height: 1.5; }  /* text-sm  相当 */

/* --------------------------------------------------------------------------
   CSS Variables
   -------------------------------------------------------------------------- */
:root {
  --color-primary:       #00b4d8;
  --color-primary-dark:  #0096b8;
  --color-primary-light: #e8f8fb;
  --color-accent:        #00b4d8;
  --color-text:          #333;
  --color-text-sub:      #666;
  --color-text-meta:     #999;
  --color-border:        #e0e0e0;
  --color-bg:            #f7f7f7;
  --color-bg-white:      #ffffff;
  --color-tag-bg:        #e8f8fb;
  --color-tag-text:      #00b4d8;
  --color-footer-bg:     #1a1a2e;
  --color-footer-text:   #c8d4f0;
  --color-download:      #ff6b2b;

  --font-base:   'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
  --font-mono:   'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.13);

  --max-width:   1160px;
  --gutter:      24px;

  --transition:  0.2s ease;
}

/* --------------------------------------------------------------------------
   Reset / Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  color: #333;
  background: #f5f5f5;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-primary-dark);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.content-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.main-content {
  flex: 1;
  min-width: 0;
}

.site-main {
  min-width: 0;
}

/* =============================
   ヘッダー
   ============================= */
.site-header {
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  height: 80px;
  box-sizing: border-box;
}

/* ロゴエリア */
.header-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.header-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-img {
  height: 36px;
  width: auto;
  display: block;
}

.header-tagline {
  font-size: 12px;
  color: #888;
  white-space: nowrap;
  display: none;
}

@media (min-width: 640px) {
  .header-tagline {
    display: inline;
  }
}

/* 右エリア */
.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ナビゲーション */
.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-nav a {
  font-size: 14px;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.header-nav a:hover {
  color: #00b4d8;
}

/* インライン検索フォーム */
.header-search-form-inline {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.header-search-input {
  border: none;
  outline: none;
  padding: 8px 12px;
  font-size: 13px;
  width: 160px;
  color: #333;
  background: transparent;
  font-family: var(--font-base);
}

.header-search-input::placeholder {
  color: #aaa;
}

.header-search-btn {
  background: none;
  border: none;
  border-left: 1px solid #ddd;
  padding: 8px 10px;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}

.header-search-btn:hover {
  color: #00b4d8;
}

/* スマホ */
@media (max-width: 640px) {
  .header-inner {
    padding: 0 16px;
    height: 60px;
  }
  .header-nav {
    gap: 16px;
  }
  .header-nav a {
    font-size: 13px;
  }
  .header-search-input {
    width: 80px;
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section {
  padding: 48px 0;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* セクション見出し */
.section-title-wrap {
  margin-bottom: 28px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: rgb(128, 103, 49);
  margin-bottom: 8px;
  line-height: 1.4;
}

.section-divider {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  margin-top: 8px;
}

.section-desc {
  color: var(--color-text-sub);
  font-size: 14px;
  margin-bottom: 24px;
  margin-top: -16px;
}

.section-more {
  text-align: center;
  margin-top: 36px;
}

.more-btn {
  display: inline-block;
  padding: 10px 32px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 40px;
  font-size: 14px;
  font-weight: 700;
  transition: background var(--transition), color var(--transition);
}

.more-btn:hover {
  background: var(--color-primary);
  color: #fff;
}

.whitepaper-section {
  background: #f0fbfd;
}

/* --------------------------------------------------------------------------
   Card Grid
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.card-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

@media (max-width: 1024px) {
  .articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .content-wrapper {
    flex-direction: column;
    padding: 0;
  }
  .sidebar {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Article Card
   -------------------------------------------------------------------------- */
.card-article,
.card-whitepaper {
  background: var(--color-bg-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition), transform var(--transition);
  display: flex;
  flex-direction: column;
}

.card-article:hover,
.card-whitepaper:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

.card-link:hover {
  color: inherit;
}

/* サムネイル：上部全幅、16:9 */
.card-thumbnail {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-primary-light);
  width: 100%;
}

.card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.card-article:hover .card-thumbnail img,
.card-whitepaper:hover .card-thumbnail img {
  transform: scale(1.03);
}

.no-thumbnail {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1rem;
}

.card-body {
  padding: 14px 16px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* タグバッジ */
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.tag-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  transition: background var(--transition), color var(--transition);
}

.tag-badge:hover {
  background: var(--color-primary);
  color: #fff;
}

/* カードタイトル */
.card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--color-text);
  margin-bottom: 10px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-title a {
  color: inherit;
}

.card-title a:hover {
  color: var(--color-primary);
}

/* 日付・読了時間 */
.card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--color-text-meta);
  margin-top: auto;
}

.card-excerpt {
  font-size: 13px;
  color: var(--color-text-sub);
  line-height: 1.6;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Download Button */
.download-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 18px;
  background: var(--color-download);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Archive Header
   -------------------------------------------------------------------------- */
.archive-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.archive-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.archive-desc {
  color: var(--color-text-sub);
  font-size: 14px;
}

.sub-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.sub-category-badge {
  padding: 5px 14px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 40px;
  font-size: 13px;
  font-weight: 700;
  transition: background var(--transition), color var(--transition);
}

.sub-category-badge:hover {
  background: var(--color-primary);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination {
  margin-top: 40px;
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-text);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.no-posts {
  text-align: center;
  padding: 56px 0;
  color: var(--color-text-sub);
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   Single Post
   -------------------------------------------------------------------------- */

/* Breadcrumb */
.breadcrumb {
  margin-bottom: 20px;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: 12px;
  color: var(--color-text-sub);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  margin-right: 4px;
  color: var(--color-text-sub);
}

.breadcrumb-item.current {
  color: var(--color-text);
}

/* Entry */
.single-article {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.entry-header {
  padding: 28px 32px 20px;
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.entry-title {
  font-size: 26px;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 16px;
  color: #222;
}

.entry-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 13px;
  color: #999;
}

.entry-meta .tag-badge {
  background: #e8f8fb;
  color: #00b4d8;
  border-radius: 4px;
  padding: 2px 10px;
  font-size: 12px;
  text-decoration: none;
}

.entry-thumbnail {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 32px;
  overflow: hidden;
  aspect-ratio: unset;
}

.entry-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: unset;
}

/* TOC */
.toc {
  margin: 28px 32px;
  padding: 18px 22px;
  background: var(--color-bg);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.toc-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--color-primary);
}

.toc-nav ol {
  list-style: decimal;
  padding-left: 18px;
}

.toc-nav li {
  margin: 4px 0;
  font-size: 13px;
}

.toc-nav a {
  color: var(--color-text);
}

.toc-nav a:hover,
.toc-nav a.is-active {
  color: var(--color-primary);
}

.toc-nav .toc-h3 {
  padding-left: 14px;
  font-size: 12px;
}

/* Entry Content */
.entry-content {
  padding: 28px 32px;
  font-size: 15px;
  line-height: 1.85;
}

.entry-content h2 {
  font-size: 20px;
  font-weight: bold;
  color: #222;
  border-left: 4px solid #00b4d8;
  padding: 8px 0 8px 16px;
  margin: 48px 0 20px;
  background: #f0fbfd;
  border-radius: 0 4px 4px 0;
}

.entry-content h3 {
  font-size: 17px;
  font-weight: bold;
  color: #222;
  border-bottom: 2px solid #00b4d8;
  padding-bottom: 6px;
  margin: 36px 0 16px;
}

.entry-content h4 {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  padding-left: 12px;
  border-left: 3px solid #ccc;
  margin: 28px 0 12px;
}

.entry-content p {
  margin-bottom: 20px;
  line-height: 1.9;
}

.entry-content ul,
.entry-content ol {
  list-style: revert;
  padding-left: 24px;
  margin-bottom: 20px;
}

.entry-content li {
  margin-bottom: 8px;
  line-height: 1.8;
}

.entry-content a {
  color: #00b4d8;
  text-decoration: underline;
}

.entry-content a:hover {
  opacity: 0.75;
}

.entry-content strong {
  font-weight: bold;
  background: linear-gradient(transparent 60%, #b3efff 60%);
}

.entry-content blockquote {
  margin: 24px 0;
  padding: 16px 20px;
  background: #f5f5f5;
  border-left: 4px solid #00b4d8;
  border-radius: 0 4px 4px 0;
  font-size: 14px;
  color: #555;
  line-height: 1.8;
}

.entry-content pre {
  background: #1a1a2e;
  color: #e2e8f0;
  padding: 18px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  margin-bottom: 18px;
}

.entry-content code {
  font-family: var(--font-mono);
  background: #f0f4ff;
  padding: 2px 5px;
  border-radius: var(--radius-sm);
  font-size: 0.88em;
}

.entry-content pre code {
  background: none;
  padding: 0;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 14px;
}

.entry-content th,
.entry-content td {
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  text-align: left;
}

.entry-content th {
  background: var(--color-primary-light);
  font-weight: 700;
}

.entry-content tr:nth-child(even) td {
  background: var(--color-bg);
}

/* Entry Footer */
.entry-footer {
  padding: 20px 32px 28px;
  border-top: 1px solid var(--color-border);
}

.entry-tags-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  font-size: 13px;
}

.tags-label {
  color: var(--color-text-sub);
  font-weight: 700;
}

/* Post Navigation */
.post-navigation .nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 14px;
  transition: background var(--transition);
}

.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
  background: var(--color-primary-light);
}

.post-navigation a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--color-text);
}

.post-navigation .nav-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.post-navigation .nav-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.post-navigation .nav-next {
  text-align: right;
}

/* --------------------------------------------------------------------------
   Page
   -------------------------------------------------------------------------- */
.page-article {
  background: var(--color-bg-white);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
.sidebar {
  width: 280px;
  flex-shrink: 0;
}

.widget {
  background: var(--color-bg-white);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-card);
}

.widget-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-primary);
}

.widget-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget-category li {
  border-bottom: 1px solid var(--color-border);
}

.widget-category li a {
  display: block;
  padding: 8px 4px;
  font-size: 14px;
  color: var(--color-text);
  transition: color var(--transition), padding-left var(--transition);
}

.widget-category li a:hover {
  color: var(--color-primary);
  padding-left: 6px;
}

/* タグクラウド */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-badge {
  display: inline-block;
  background: #e8f8fb;
  color: var(--color-primary);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}

.tag-badge:hover {
  background: var(--color-primary);
  color: #fff;
}

/* メールマガジンフォーム */
.widget-mailmag {
  background: #f0f8ff;
  border: 1px solid #00b4d8;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: none;
}

.widget-mailmag-title {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 6px;
}

.widget-mailmag-desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
}

.mailmag-form input[type="email"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 8px;
  box-sizing: border-box;
  font-family: var(--font-base);
}

.mailmag-form button {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-family: var(--font-base);
  transition: background var(--transition);
}

.mailmag-form button:hover {
  background: var(--color-primary-dark);
}

.privacy-check {
  display: block;
  font-size: 11px;
  color: #666;
  margin-bottom: 8px;
}

.privacy-check a {
  color: var(--color-primary);
}

/* バナーウィジェット */
.widget-banner {
  padding: 0;
  overflow: hidden;
}

.widget-banner a {
  display: block;
}

.widget-banner img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  transition: opacity var(--transition);
}

.widget-banner img:hover {
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: #222;
  color: #fff;
  padding: 30px 20px;
  text-align: center;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-nav {
  margin-bottom: 12px;
}

.footer-nav a {
  color: #ccc;
  text-decoration: none;
  margin: 0 12px;
  font-size: 13px;
  transition: color var(--transition);
}

.footer-nav a:hover {
  color: #fff;
}

.footer-copy {
  font-size: 12px;
  color: #999;
  margin: 4px 0;
}

.footer-note {
  font-size: 11px;
  color: #777;
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Responsive — 768px
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  .content-wrapper {
    flex-direction: column;
    padding: 0;
  }

  .sidebar {
    width: 100%;
  }

  /* Card Grid */
  .card-grid,
  .card-grid--3col,
  .articles-grid {
    grid-template-columns: 1fr;
  }

  /* Sections */
  .section {
    padding: 32px 0;
  }

  .section-inner {
    padding: 0 14px;
  }

  /* Single */
  .entry-header {
    padding: 18px 16px 14px;
  }

  .entry-content {
    padding: 18px 16px;
  }

  .toc {
    margin: 16px;
  }

  .entry-footer {
    padding: 14px 16px 20px;
  }

  .post-navigation .nav-links {
    grid-template-columns: 1fr;
  }

  /* Footer */
  .footer-widgets {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Page */
  .page-article {
    padding: 20px 16px;
  }
}


/* ==========================================================================
   元サイト移植CSS（Next.js / Tailwind CSS v3.0.23）
   ソース: https://iot.dxhub.co.jp/
   ※ __className_xxxxx 等 Next.js 固有クラスはそのまま保持
   ========================================================================== */
/*
! tailwindcss v3.0.23 | MIT License | https://tailwindcss.com
*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}html{font-family:Noto Sans,Noto Sans JP,"sans-serif";scroll-behavior:smooth}*,:after,:before{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246/0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:375px){.container{max-width:375px}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.word-keep-all{word-break:keep-all}.lp-container{width:320px}@media (min-width:375px){.lp-container{width:342px}}@media (min-width:768px){.lp-container{width:600px}}@media (min-width:1024px){.lp-container{width:900px}}@media (min-width:1280px){.lp-container{width:1064px}}.quarter-circle{position:relative;height:100px;width:100px}.quarter-circle:after{position:absolute;border-top-left-radius:100px;border-right-width:100px;border-top-width:100px;--tw-border-opacity:1;border-color:rgb(192 231 255/var(--tw-border-opacity));--tw-content:"";content:var(--tw-content)}.lg-quarter-circle{position:relative;height:250px;width:250px}.lg-quarter-circle:after{position:absolute;border-top-left-radius:250px;border-right-width:250px;border-top-width:250px;--tw-border-opacity:1;border-color:rgb(192 231 255/var(--tw-border-opacity));--tw-content:"";content:var(--tw-content)}.card-container{width:320px}@media (min-width:375px){.card-container{width:342px}}@media (min-width:768px){.card-container{width:600px}}@media (min-width:1024px){.card-container{width:1024px}}.card-list{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}@media (min-width:768px){.card-list{justify-content:flex-start}}.whitepaper-card-list{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}@media (min-width:768px){.whitepaper-card-list{justify-content:flex-start;gap:1rem}}.sidebar{display:flex;width:320px;flex-direction:column;align-items:center}@media (min-width:375px){.sidebar{width:100%}}@media (min-width:768px){.sidebar{width:600px}}@media (min-width:1024px){.sidebar{width:900px;align-items:flex-start}}@media (min-width:1280px){.sidebar{width:250px}}.article-container{width:100%}@media (min-width:1024px){.article-container{width:1024px}}.lpcv-container{width:320px}@media (min-width:375px){.lpcv-container{width:100%}}@media (min-width:1024px){.lpcv-container{width:900px}}.lpcv-sidebar{display:flex;flex-direction:column;align-items:center}@media (min-width:375px){.lpcv-sidebar{width:100%}}@media (min-width:1024px){.lpcv-sidebar{align-items:flex-start}}@media (min-width:1280px){.lpcv-sidebar{width:250px}}.m-article-details h2{position:relative;right:.75rem;margin-top:1.5rem;margin-bottom:1.5rem;display:flex;align-items:baseline;gap:.5rem;font-size:1.5rem;line-height:2rem;font-weight:600}.m-article-details h2:before{position:relative;top:3px;display:block;min-height:1.5rem;min-width:1.5rem;border-radius:9999px;content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(49 98 128/var(--tw-bg-opacity))}.m-article-details h3{position:relative;right:2px;margin-top:1.25rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.25rem;line-height:1.75rem}.m-article-details h3:before{display:block;height:1.5rem;width:.25rem;content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(255 205 97/var(--tw-bg-opacity))}.m-article-details p{font-size:1rem;line-height:1.75rem;letter-spacing:.01em}.m-article-details img{margin-top:1.25rem;margin-bottom:1.25rem}.m-article-details a{display:block;word-break:break-all;--tw-text-opacity:1;color:rgb(21 88 214/var(--tw-text-opacity))}@media (min-width:1024px){.m-article-details a{--tw-text-opacity:1;color:rgb(26 13 171/var(--tw-text-opacity))}}.m-article-details span{display:block;word-break:break-all}.m-article-details iframe{aspect-ratio:16/9;height:100%;width:100%}.m-article-details .scroll-table{width:100%;overflow-x:scroll}.m-article-details table{margin-top:1rem;margin-bottom:1rem;width:100%;max-width:100%;table-layout:auto;border-collapse:collapse;border-radius:4px}.m-article-details th{min-width:-moz-fit-content;min-width:fit-content;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.m-article-details td,.m-article-details th{border-bottom-width:1px;--tw-border-opacity:1;border-color:rgb(196 196 196/var(--tw-border-opacity));--tw-bg-opacity:1;padding:.5rem}.m-article-details td{min-width:180px;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.bottom-\[6px\]{bottom:6px}.top-0{top:0}.right-0{right:0}.right-2{right:.5rem}.bottom-1\/3{bottom:33.333333%}.left-\[8\%\]{left:8%}.top-\[30\%\]{top:30%}.right-\[5\%\]{right:5%}.top-\[10\%\]{top:10%}.bottom-5{bottom:1.25rem}.left-0{left:0}.bottom-0{bottom:0}.-top-4{top:-1rem}.left-4{left:1rem}.z-10{z-index:10}.my-4{margin-top:1rem;margin-bottom:1rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}.my-12{margin-top:3rem;margin-bottom:3rem}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}.mt-4{margin-top:1rem}.mt-3{margin-top:.75rem}.mt-2{margin-top:.5rem}.mt-1{margin-top:.25rem}.mt-6{margin-top:1.5rem}.mr-4{margin-right:1rem}.mr-3{margin-right:.75rem}.mb-5{margin-bottom:1.25rem}.mb-2{margin-bottom:.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-9{margin-top:2.25rem}.mb-10{margin-bottom:2.5rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.contents{display:contents}.list-item{display:list-item}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.aspect-video{aspect-ratio:16/9}.aspect-auto{aspect-ratio:auto}.h-24{height:6rem}.h-\[96px\]{height:96px}.h-1{height:.25rem}.h-full{height:100%}.h-14{height:3.5rem}.h-\[26px\]{height:26px}.h-9{height:2.25rem}.h-60{height:15rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-10{height:2.5rem}.h-screen{height:100vh}.h-2{height:.5rem}.h-\[80px\]{height:80px}.h-\[500px\]{height:500px}.h-8{height:2rem}.h-\[200px\]{height:200px}.min-h-min{min-height:-moz-min-content;min-height:min-content}.min-h-screen{min-height:100vh}.w-full{width:100%}.w-24{width:6rem}.w-1{width:.25rem}.w-2\/3{width:66.666667%}.w-4\/5{width:80%}.w-\[320px\]{width:320px}.w-\[300px\]{width:300px}.w-\[90px\]{width:90px}.w-\[160px\]{width:160px}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-\[288px\]{width:288px}.w-1\/2{width:50%}.w-2{width:.5rem}.w-10{width:2.5rem}.w-\[500px\]{width:500px}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.max-w-\[500px\]{max-width:500px}.max-w-\[270px\]{max-width:270px}.flex-1{flex:1 1 0%}.-rotate-90{--tw-rotate:-90deg}.-rotate-90,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate:90deg}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-95,.scale-100{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.list-inside{list-style-position:inside}.list-disc{list-style-type:disc}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-2{gap:.5rem}.gap-1{gap:.25rem}.gap-3{gap:.75rem}.gap-10{gap:2.5rem}.gap-5{gap:1.25rem}.gap-8{gap:2rem}.gap-6{gap:1.5rem}.gap-9{gap:2.25rem}.divide-gray-500>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(107 114 128/var(--tw-divide-opacity))}.place-self-end{place-self:end}.self-start{align-self:flex-start}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.rounded-\[4px\]{border-radius:4px}.rounded-full{border-radius:9999px}.rounded-\[5px\]{border-radius:5px}.rounded-2xl{border-radius:1rem}.rounded-md{border-radius:.375rem}.rounded-b-none{border-bottom-right-radius:0;border-bottom-left-radius:0}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-r{border-right-width:1px}.border-l{border-left-width:1px}.border-none{border-style:none}.border-divided{--tw-border-opacity:1;border-color:rgb(196 196 196/var(--tw-border-opacity))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity))}.border-transparent{border-color:transparent}.border-primary-800{--tw-border-opacity:1;border-color:rgb(24 49 64/var(--tw-border-opacity))}.border-b-divided{--tw-border-opacity:1;border-bottom-color:rgb(196 196 196/var(--tw-border-opacity))}.bg-secondary-50{--tw-bg-opacity:1;background-color:rgb(255 250 240/var(--tw-bg-opacity))}.bg-primary-50{--tw-bg-opacity:1;background-color:rgb(240 249 255/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-primary-800{--tw-bg-opacity:1;background-color:rgb(24 49 64/var(--tw-bg-opacity))}.bg-primary-900{--tw-bg-opacity:1;background-color:rgb(10 20 26/var(--tw-bg-opacity))}.bg-accent-500{--tw-bg-opacity:1;background-color:rgb(255 218 82/var(--tw-bg-opacity))}.bg-secondary-800{--tw-bg-opacity:1;background-color:rgb(64 51 24/var(--tw-bg-opacity))}.bg-gray-500\/50{background-color:rgb(107 114 128/.5)}.bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}.bg-paper{--tw-bg-opacity:1;background-color:rgb(245 245 243/var(--tw-bg-opacity))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.object-contain{-o-object-fit:contain;object-fit:contain}.p-4{padding:1rem}.p-8{padding:2rem}.p-\[18px\]{padding:18px}.p-\[19px\]{padding:19px}.p-9{padding:2.25rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-\[14px\]{padding:14px}.py-4{padding-top:1rem;padding-bottom:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.px-\[14px\]{padding-left:14px;padding-right:14px}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.px-10{padding-left:2.5rem;padding-right:2.5rem}.py-16{padding-top:4rem;padding-bottom:4rem}.px-\[36px\]{padding-left:36px;padding-right:36px}.py-9{padding-top:2.25rem;padding-bottom:2.25rem}.pl-4{padding-left:1rem}.pb-4{padding-bottom:1rem}.pt-8{padding-top:2rem}.pt-4{padding-top:1rem}.pb-8{padding-bottom:2rem}.pt-1{padding-top:.25rem}.pt-14{padding-top:3.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.align-middle{vertical-align:middle}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-xl{font-size:1.25rem}.text-lg,.text-xl{line-height:1.75rem}.text-lg{font-size:1.125rem}.text-xs{font-size:.75rem;line-height:1rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-5xl{font-size:3rem;line-height:1}.text-\[14px\]{font-size:14px}.text-4xl{font-size:2.25rem;line-height:2.5rem}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-medium{font-weight:500}.italic{font-style:italic}.leading-none{line-height:1}.leading-7{line-height:1.75rem}.leading-6{line-height:1.5rem}.leading-tight{line-height:1.25}.tracking-\[0\.01em\]{letter-spacing:.01em}.text-primary-700{--tw-text-opacity:1;color:rgb(49 98 128/var(--tw-text-opacity))}.text-primary-900{--tw-text-opacity:1;color:rgb(10 20 26/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-secondary-800{--tw-text-opacity:1;color:rgb(64 51 24/var(--tw-text-opacity))}.text-secondary-700{--tw-text-opacity:1;color:rgb(128 103 49/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity))}.text-accent-500{--tw-text-opacity:1;color:rgb(255 218 82/var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-blue-900{--tw-text-opacity:1;color:rgb(30 58 138/var(--tw-text-opacity))}.text-primary-800{--tw-text-opacity:1;color:rgb(24 49 64/var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.accent-white{accent-color:#fff}.accent-primary-700{accent-color:#316280}.opacity-5{opacity:.05}.opacity-75{opacity:.75}.opacity-0{opacity:0}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0/0.1),0 8px 10px -6px rgb(0 0 0/0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-0{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-0,.ring-4{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-red-500{--tw-ring-opacity:1;--tw-ring-color:rgb(239 68 68/var(--tw-ring-opacity))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.duration-200{transition-duration:.2s}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.line-clamp-1{-webkit-line-clamp:1}.line-clamp-1,.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}.line-clamp-2{-webkit-line-clamp:2}@font-face{font-weight:400;font-display:swap;src:local("Noto Sans"),local("Noto Sans JP")}.popup-banner{position:fixed;bottom:28px;right:50px;background-color:#fff;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.1);opacity:1;transition:opacity .5s ease,filter .3s ease;z-index:1000}.popup-banner img{width:336px;height:280px;display:block;margin:0 auto}.close-button{position:absolute;top:-5px;right:-4px;width:30px;height:30px;border-radius:50%;background-color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,.1)}.close-button svg{width:20px;height:20px;color:#000}.popup-banner.fade-out{opacity:.5}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:999}.popup-banner.bright{filter:brightness(1);opacity:1!important;transition:filter .3s ease,opacity .3s ease}.popup-banner:hover{filter:brightness(1)}.dimmed-background{background:rgba(224,13,13,.5)!important;transition:background .3s ease-in-out}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:bottom-\[1px\]:before{content:var(--tw-content);bottom:1px}.before\:left-\[-10px\]:before{content:var(--tw-content);left:-10px}.before\:-left-\[16px\]:before{content:var(--tw-content);left:-16px}.before\:inline-block:before{content:var(--tw-content);display:inline-block}.before\:h-5:before{content:var(--tw-content);height:1.25rem}.before\:h-8:before{content:var(--tw-content);height:2rem}.before\:-rotate-\[30deg\]:before{content:var(--tw-content);--tw-rotate:-30deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\:border-r-2:before{content:var(--tw-content);border-right-width:2px}.before\:border-primary-900:before{content:var(--tw-content);--tw-border-opacity:1;border-color:rgb(10 20 26/var(--tw-border-opacity))}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:bottom-\[1px\]:after{content:var(--tw-content);bottom:1px}.after\:right-\[-10px\]:after{content:var(--tw-content);right:-10px}.after\:-right-\[16px\]:after{content:var(--tw-content);right:-16px}.after\:inline-block:after{content:var(--tw-content);display:inline-block}.after\:h-5:after{content:var(--tw-content);height:1.25rem}.after\:h-8:after{content:var(--tw-content);height:2rem}.after\:rotate-\[30deg\]:after{content:var(--tw-content);--tw-rotate:30deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\:border-l-2:after{content:var(--tw-content);border-left-width:2px}.after\:border-primary-900:after{content:var(--tw-content);--tw-border-opacity:1;border-color:rgb(10 20 26/var(--tw-border-opacity))}.hover\:scale-125:hover{--tw-scale-x:1.25;--tw-scale-y:1.25}.hover\:scale-105:hover,.hover\:scale-125:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:border-white:hover{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.hover\:bg-blue-200:hover{--tw-bg-opacity:1;background-color:rgb(191 219 254/var(--tw-bg-opacity))}.hover\:text-primary-500:hover{--tw-text-opacity:1;color:rgb(94 192 255/var(--tw-text-opacity))}.hover\:text-primary-700:hover{--tw-text-opacity:1;color:rgb(49 98 128/var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.hover\:underline-offset-2:hover{text-underline-offset:2px}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px rgb(0 0 0/0.1),0 2px 4px -2px rgb(0 0 0/0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.hover\:shadow-md:hover,.hover\:shadow-xl:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px rgb(0 0 0/0.1),0 8px 10px -6px rgb(0 0 0/0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-0:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-transparent:focus{--tw-ring-color:transparent}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-blue-500:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-gray-500\/50:disabled{background-color:rgb(107 114 128/.5)}@media (min-width:375px){.xs\:mx-0{margin-left:0;margin-right:0}.xs\:h-\[406px\]{height:406px}.xs\:h-\[280px\]{height:280px}.xs\:h-\[200px\]{height:200px}.xs\:w-\[342px\]{width:342px}.xs\:w-full{width:100%}.xs\:w-4\/5{width:80%}}@media (min-width:640px){.sm\:h-\[44px\]{height:44px}.sm\:min-h-\[307px\]{min-height:307px}.sm\:w-\[150px\]{width:150px}.sm\:w-\[378px\]{width:378px}.sm\:min-w-\[400px\]{min-width:400px}.sm\:px-16{padding-left:4rem;padding-right:4rem}.sm\:after\:h-12:after,.sm\:before\:h-12:before{content:var(--tw-content);height:3rem}}@media (min-width:768px){.md\:top-0{top:0}.md\:-left-14{left:-3.5rem}.md\:my-2{margin-top:.5rem;margin-bottom:.5rem}.md\:my-1{margin-top:.25rem;margin-bottom:.25rem}.md\:my-28{margin-top:7rem;margin-bottom:7rem}.md\:mt-4{margin-top:1rem}.md\:mb-0{margin-bottom:0}.md\:mt-0{margin-top:0}.md\:mt-28{margin-top:7rem}.md\:mb-28{margin-bottom:7rem}.md\:flex{display:flex}.md\:h-\[352px\]{height:352px}.md\:h-\[347px\]{height:347px}.md\:h-11{height:2.75rem}.md\:h-56{height:14rem}.md\:w-1\/3{width:33.333333%}.md\:w-4\/5{width:80%}.md\:w-full{width:100%}.md\:w-1\/2{width:50%}.md\:w-\[332px\]{width:332px}.md\:w-\[292px\]{width:292px}.md\:w-\[200px\]{width:200px}.md\:w-auto{width:auto}.md\:w-2\/5{width:40%}.md\:w-\[378px\]{width:378px}.md\:w-2\/3{width:66.666667%}.md\:w-\[700px\]{width:700px}.md\:w-\[600px\]{width:600px}.md\:min-w-max{min-width:-moz-max-content;min-width:max-content}.md\:-rotate-\[15deg\]{--tw-rotate:-15deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:items-end{align-items:flex-end}.md\:items-center{align-items:center}.md\:items-baseline{align-items:baseline}.md\:justify-start{justify-content:flex-start}.md\:justify-end{justify-content:flex-end}.md\:justify-between{justify-content:space-between}.md\:justify-around{justify-content:space-around}.md\:gap-4{gap:1rem}.md\:gap-2{gap:.5rem}.md\:gap-6{gap:1.5rem}.md\:gap-8{gap:2rem}.md\:gap-5{gap:1.25rem}.md\:gap-28{gap:7rem}.md\:gap-20{gap:5rem}.md\:gap-14{gap:3.5rem}.md\:gap-0{gap:0}.md\:p-\[16px\]{padding:16px}.md\:p-\[14px\]{padding:14px}.md\:p-9{padding:2.25rem}.md\:p-10{padding:2.5rem}.md\:p-16{padding:4rem}.md\:p-6{padding:1.5rem}.md\:px-\[50px\]{padding-left:50px;padding-right:50px}.md\:px-12{padding-left:3rem;padding-right:3rem}.md\:py-24{padding-top:6rem;padding-bottom:6rem}.md\:px-\[36px\]{padding-left:36px;padding-right:36px}.md\:px-9{padding-left:2.25rem;padding-right:2.25rem}.md\:py-16{padding-top:4rem;padding-bottom:4rem}.md\:text-left{text-align:left}.md\:text-right{text-align:right}.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:text-xl{font-size:1.25rem;line-height:1.75rem}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-xs{font-size:.75rem;line-height:1rem}.md\:text-5xl{font-size:3rem;line-height:1}.md\:leading-tight{line-height:1.25}}@media (min-width:1024px){.lg\:right-1\/2{right:50%}.lg\:bottom-1\/2{bottom:50%}.lg\:top-\[20\%\]{top:20%}.lg\:right-\[35\%\]{right:35%}.lg\:top-1\/3{top:33.333333%}.lg\:block{display:block}.lg\:hidden{display:none}.lg\:w-1\/2{width:50%}.lg\:w-\[900px\]{width:900px}.lg\:w-auto{width:auto}.lg\:w-\[480px\]{width:480px}.lg\:min-w-min{min-width:-moz-min-content;min-width:min-content}.lg\:flex-row{flex-direction:row}.lg\:flex-row-reverse{flex-direction:row-reverse}.lg\:items-start{align-items:flex-start}.lg\:justify-between{justify-content:space-between}.lg\:gap-9{gap:2.25rem}.lg\:gap-4{gap:1rem}.lg\:border-none{border-style:none}.lg\:p-10{padding:2.5rem}.lg\:p-0{padding:0}.lg\:py-16{padding-top:4rem;padding-bottom:4rem}}@media (min-width:1280px){.xl\:sidebar{display:flex;width:320px;flex-direction:column;align-items:center}@media (min-width:375px){.xl\:sidebar{width:100%}}@media (min-width:768px){.xl\:sidebar{width:600px}}@media (min-width:1024px){.xl\:sidebar{width:900px;align-items:flex-start}}@media (min-width:1280px){.xl\:sidebar{width:250px}}.xl\:sticky{position:sticky}.xl\:top-0{top:0}.xl\:right-\[45\%\]{right:45%}.xl\:my-4{margin-top:1rem;margin-bottom:1rem}.xl\:mt-0{margin-top:0}.xl\:hidden{display:none}.xl\:h-\[298px\]{height:298px}.xl\:h-\[280px\]{height:280px}.xl\:h-\[520px\]{height:520px}.xl\:w-\[250px\]{width:250px}.xl\:w-\[188px\]{width:188px}.xl\:w-full{width:100%}.xl\:w-\[900px\]{width:900px}.xl\:w-\[600px\]{width:600px}.xl\:min-w-max{min-width:-moz-max-content;min-width:max-content}.xl\:flex-row{flex-direction:row}.xl\:flex-col{flex-direction:column}.xl\:items-center{align-items:center}.xl\:justify-center{justify-content:center}.xl\:justify-between{justify-content:space-between}.xl\:justify-around{justify-content:space-around}.xl\:rounded-\[4px\]{border-radius:4px}.xl\:p-\[14px\]{padding:14px}.xl\:p-0{padding:0}.xl\:px-0{padding-left:0;padding-right:0}.xl\:text-center{text-align:center}.xl\:text-right{text-align:right}}

/* --------------------------------------------------------------------------
   keen-slider（スライダーコンポーネント）
   ソース: /_next/static/css/9660cb2b88dab45e.css
   -------------------------------------------------------------------------- */
.keen-slider:not([data-keen-slider-disabled]){-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;align-content:flex-start;display:flex;overflow:hidden;position:relative;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;user-select:none;-khtml-user-select:none;width:100%}.keen-slider:not([data-keen-slider-disabled]) .keen-slider__slide{min-height:100%;overflow:hidden;position:relative;width:100%}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-reverse]{flex-direction:row-reverse}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-v]{flex-wrap:wrap}.keen-slider:not([data-keen-slider-disabled])[data-keen-slider-moves] *{pointer-events:none}


/* ==========================================================================
   WP テーマ デザイン差分補正
   元サイト（https://iot.dxhub.co.jp/）との差分のみ上書き
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. カラー変数を元サイトのパレットに合わせる
   -------------------------------------------------------------------------- */
:root {
  --color-primary:       #316280;   /* 元: rgb(49 98 128)  ← 旧 #00b4d8 */
  --color-primary-dark:  #183140;   /* 元: rgb(24 49 64) */
  --color-primary-light: #e8f4fb;
  --color-accent:        #ffda52;   /* 元: rgb(255 218 82) ← 旧 #00b4d8 */
  --color-bg:            #f5f5f3;   /* 元: rgb(245 245 243) ← 旧 #f7f7f7 */
  --color-footer-bg:     #0a141a;   /* 元: rgb(10 20 26)   ← 旧 #1a1a2e */
  --color-footer-text:   #c8d4d8;
  --color-tag-bg:        #fffaf0;   /* bg-secondary-50 */
  --color-tag-text:      #806731;   /* text-secondary-700 */
}

/* --------------------------------------------------------------------------
   2. body 背景を元サイトに合わせる
   -------------------------------------------------------------------------- */
body {
  background-color: #f5f5f3;
}

/* --------------------------------------------------------------------------
   3. フッター背景色
   -------------------------------------------------------------------------- */
.site-footer,
footer {
  background-color: #0a141a;
}

/* --------------------------------------------------------------------------
   4. .m-article-details — 記事本文スタイル補完
      Tailwind リセットで消えた要素を元サイトに合わせて復元する
   -------------------------------------------------------------------------- */

/* ul / ol */
.m-article-details ul,
.m-article-details ol {
  padding-left: 1.5rem;
  margin: 1rem 0;
}
.m-article-details ul {
  list-style: disc;
}
.m-article-details ol {
  list-style: decimal;
}
.m-article-details li {
  margin: 0.25rem 0;
  line-height: 1.75;
}
.m-article-details li + li {
  margin-top: 0.25rem;
}

/* ネスト ul */
.m-article-details ul ul,
.m-article-details ol ul {
  list-style: circle;
  margin: 0.25rem 0;
}
.m-article-details ul ol,
.m-article-details ol ol {
  list-style: lower-latin;
  margin: 0.25rem 0;
}

/* blockquote */
.m-article-details blockquote {
  background: #fffaf0;            /* bg-secondary-50 */
  border-left: 4px solid #ffda52; /* accent-500 */
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 4px 4px 0;
  color: #403318;                 /* text-secondary-800 */
}
.m-article-details blockquote p {
  margin: 0;
}

/* pre / code */
.m-article-details pre {
  background: #0a141a;            /* primary-900 */
  color: #f5f5f3;
  padding: 1.25rem 1.5rem;
  border-radius: 4px;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.875rem;
  line-height: 1.7;
}
.m-article-details code {
  background: #f0f4f8;
  color: #183140;                 /* primary-800 */
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.875em;
}
.m-article-details pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* h4 — 左ボーダー装飾 */
.m-article-details h4 {
  border-left: 3px solid #ffda52; /* accent-500 */
  padding-left: 0.75rem;
  margin: 1.5rem 0 0.75rem;
}

/* strong */
.m-article-details strong {
  font-weight: 700;
  color: #0a141a;                 /* primary-900 */
}

/* hr */
.m-article-details hr {
  border: none;
  border-top: 1px solid #c4c4c4; /* border-divided */
  margin: 2rem 0;
}

/* 段落内リンク — microCMS 由来の display:block を inline に戻す */
.m-article-details p a {
  display: inline;
  word-break: normal;
  color: #316280;                 /* primary-700 */
  text-decoration: underline;
}
.m-article-details p a:hover {
  color: #183140;                 /* primary-800 */
}

/* --------------------------------------------------------------------------
   5. サイドバー sticky — WP ヘッダー高さ分オフセット
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .sidebar {
    top: 80px;
    top: 8px;
  }
}

/* --------------------------------------------------------------------------
   6. 2カラム時の article-container 幅補正
      1280px ビューポートで article(1024px) + gap(20px) + sidebar(250px) = 1294px
      が収まらないため xl 以上では flex で伸縮させる
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .article-container {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 1024px;
    width: auto;
  }
}

/* --------------------------------------------------------------------------
   7. 検索パネル（ヘッダー直下スライドダウン）
   -------------------------------------------------------------------------- */
#search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
  z-index: 100;
}

#search-panel.is-open {
  max-height: 900px;
  padding: 20px 0;
}

.search-panel-inner {
  max-width: 800px;
  margin: 0 auto;
}

.search-filter-input-group {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important
}
.sf-row{
  flex-direction: row-reverse !important;
}


/* --------------------------------------------------------------------------
   8. 検索フォームレイアウト（Search & Filter Pro 個別フィールド）
   -------------------------------------------------------------------------- */
.sf-form-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sf-field-keyword {
  flex: 1;
  min-width: 200px;
}

.sf-field-keyword input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.sf-field-submit button,
.sf-field-reset button,
.sf-field-reset a {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

.sf-field-submit button {
  background: var(--color-primary, #316280);
  color: #fff;
  border: none;
}

.sf-field-reset button,
.sf-field-reset a {
  background: transparent;
  color: #666;
  border: 1px solid #ddd;
  text-decoration: none;
}

/* カテゴリ行を横並びに強制 */
.sf-row-categories {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  width: 100%;
}

.sf-row-categories .search-filter-field {
  width: 100%;
}
.search-filter-input-checkbox {
  padding: 0 !important;
}

/* S&F v3 の出力するラッパーを横並びに */
.sf-row-categories .search-filter-field,
.sf-row-categories > div,
.sf-row-categories > ul,
.sf-row-categories > ol {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sf-row-categories li {
  margin: 0 !important;
  padding: 0 !important;
}

/* チェックボックスを非表示 */
.sf-row-categories .search-filter-input-checkbox__input {
  display: none !important;
}

/* SVGコントロールを非表示 */
.sf-row-categories .search-filter-input-checkbox__control {
  display: none !important;
}
.search-filter-input-checkbox__label {
  padding-left: 0 !important;
}

/* ラベルをボタン化 */
.sf-row-categories .search-filter-input-checkbox__container {
  display: inline-block !important;
  padding: 5px 14px !important;
  border: 1.5px solid #c0c8cc !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  color: #444 !important;
  background: #fff !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
  user-select: none !important;
  font-weight: 500 !important;
}

/* ホバー */
.sf-row-categories .search-filter-input-checkbox__container:hover {
  border-color: #316280 !important;
  color: #316280 !important;
}

/* 選択済み */
.sf-row-categories .search-filter-input-checkbox--is-active .search-filter-input-checkbox__container {
  background: #316280 !important;
  color: #fff !important;
  border-color: #316280 !important;
  font-weight: 500 !important;
}
.sf-row-categories .search-filter-input-checkbox--is-active .search-filter-input-checkbox__container .search-filter-input-checkbox__label {
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   9. SPメニュー（ハンバーガー + ドロワー）
   -------------------------------------------------------------------------- */

/* ハンバーガーボタン */
.sp-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 48px;
  height: 48px;
  position: absolute;
  top: 0;
  right: 0;
}

@media (max-width: 767px) {
  .sp-menu-toggle { display: flex; }
}

.sp-menu-toggle__bar {
  display: block;
  width: 32px;
  height: 2px;
  background: #333;
  transition: transform 0.2s, opacity 0.2s;
}

.sp-menu-toggle.is-active .sp-menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.sp-menu-toggle.is-active .sp-menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.sp-menu-toggle.is-active .sp-menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ドロワー */
.sp-menu-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(320px, 85vw);
  height: 100vh;
  background: #fff;
  z-index: 9999;
  overflow-y: auto;
  transition: right 0.3s ease;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
}

.sp-menu-drawer.is-open {
  right: 0;
}

.sp-menu-drawer__inner {
  padding: 20px 16px;
}

/* 閉じるボタン */
.sp-menu-close {
  display: block;
  margin-left: auto;
  margin-bottom: 16px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
  padding: 4px 8px;
}

/* SPナビ */
.sp-menu-nav ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.sp-menu-nav li {
  border-bottom: 1px solid #eee;
}

.sp-menu-nav a {
  display: block;
  padding: 12px 4px;
  color: #333;
  text-decoration: none;
  font-size: 15px;
}

/* SP検索フォーム */
.sp-menu-search {
  border-top: 1px solid #eee;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-menu-search__keyword input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

.sp-menu-search__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sp-menu-search__submit button {
  width: 100%;
  padding: 10px;
  background: #316280;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

/* オーバーレイ */
.sp-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 9998;
}

.sp-menu-overlay.is-active {
  display: block;
}

/* PCナビ：SPで非表示 */
.pc-nav {
  display: flex;
}

@media (max-width: 767px) {
  .pc-nav {
    display: none !important;
  }
}

/* PCではドロワー・オーバーレイを非表示 */
@media (min-width: 768px) {
  .sp-menu-drawer,
  .sp-menu-overlay {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   10. トップページ ヒーロースライダー（#top-slider）
   -------------------------------------------------------------------------- */
/* ========== トップスライダー ========== */
.top-slider {
  margin-top: 20px;
  overflow: hidden;
}

.top-slider__inner {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* カード */
.ts-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s, opacity 0.2s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ts-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
  opacity: 0.92;
}

/* サムネイル */
.ts-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: block;
}

.ts-card__thumb-link {
  display: block;
  width: 100%;
  height: 100%;
}

.ts-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.3s ease;
}

.ts-card:hover .ts-card__img {
  transform: scale(1.05);
}

/* タイトル */
.ts-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  color: #222;
  text-decoration: none;
  padding: 10px 10px 4px;
  flex: 1;
}

.ts-card__title:hover {
  color: var(--color-primary, #316280);
}

/* フッター */
.ts-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px 10px;
  gap: 8px;
}

.ts-card__tags {
  display: flex;
  gap: 4px;
  overflow: hidden;
  flex-wrap: nowrap;
  min-width: 0;
}

.ts-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  color: rgb(128, 103, 49);
  white-space: nowrap;
}

.ts-card__meta {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.ts-card__date,
.ts-card__read {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 16px;
  white-space: nowrap;
}

/* ドット */
.top-slider__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 14px 0 0;
}

.top-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

.top-slider__dot.is-active {
  background: var(--color-primary, #316280);
}

/* SP */
@media (max-width: 767px) {
  .ts-card__title { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   11. おすすめ記事セクション（.top-recommend）
   -------------------------------------------------------------------------- */
.top-recommend {
  background: #f5f5f3;
}

.top-recommend__outer {
  width: 100%;
}

/* セクション見出し */
.top-recommend__heading-wrap {
  width: 100%;
  margin: 20px 0;
}

.top-recommend__heading {
  font-size: 22px;
  font-weight: 600;
  color: rgb(128, 103, 49); /* secondary-700 相当 */
}

@media (min-width: 768px) {
  .top-recommend__heading { font-size: 24px; }
}

.top-recommend__inner {
  width: 100%;
}

/* ラベル＋横線 */
.top-recommend__label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  margin-top: -6px;
}

.top-recommend__label-text {
  font-size: 13px;
  color: #555;
  white-space: nowrap;
  flex-shrink: 0;
}

.top-recommend__label-line {
  flex: 1;
  border-bottom: 1px solid #ddd;
}

/* グリッド */
.top-recommend__grid {
  display: grid;
  gap: 20px;
  margin-bottom: 32px;
}

.top-recommend__grid--6 {
  grid-template-columns: repeat(3, 1fr);
}

.top-recommend__grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
  .top-recommend__grid--6,
  .top-recommend__grid--3 {
    grid-template-columns: repeat(1, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .top-recommend__grid--6,
  .top-recommend__grid--3 {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   12. 記事カード 共通モジュール（.ca-card）
   -------------------------------------------------------------------------- */
.ca-card {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, opacity 0.2s;
  max-width: 100%;
}

.ca-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  opacity: 0.92;
}

/* サムネイル */
.ca-card__thumb-link {
  display: block;
}

.ca-card__thumb {
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  width: 100%;
  cursor: pointer;
}

.ca-card__thumb-inner {
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
}

.ca-card:hover .ca-card__thumb-inner {
  transform: scale(1.05);
}

.ca-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タイトル */
.ca-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: #222;
  text-decoration: none;
  margin-top: 12px;
}

.ca-card__title:hover {
  color: var(--color-primary, #316280);
}

/* タグ */
.ca-card__tags {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-top: 10px;
}

.ca-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  color: rgb(128 103 49);
  white-space: nowrap;
  flex-shrink: 0;
}

.ca-card__tag svg {
  color: #888;
  flex-shrink: 0;
}

/* 抜粋 */
.ca-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  color: #555;
  line-height: 1.7;
  margin-top: 8px;
}

/* メタ（更新日・読了時間） */
.ca-card__meta {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.ca-card__date,
.ca-card__read {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #888;
  white-space: nowrap;
}

/* SP */
@media (max-width: 767px) {
  .ca-card             { padding: 14px; }
  .ca-card__title      { font-size: 14px; }
  .ca-card__excerpt    { font-size: 11px; }
}

/* --------------------------------------------------------------------------
   13. 資料請求 単一ページ（.wp-single-*）
   -------------------------------------------------------------------------- */
.wp-single-wrap {
  background: #f5f5f3;
  padding: 20px 0 64px;
}

.wp-single__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

/* パンくず */
.wp-single__breadcrumb {
  margin-bottom: 24px;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
}

.breadcrumb__list .breadcrumb__item a {
  color: rgb(128 103 49);
  text-decoration: none;
}

.breadcrumb__list .breadcrumb__item a:hover {
  color: var(--color-primary, #316280);
}

.breadcrumb__sep {
  color: #ccc;
}

.breadcrumb__current {
  color: #555;
}

/* 2カラムレイアウト */
.wp-single__layout {
  display: flex;
  gap: 40px;
}

@media (max-width: 900px) {
  .wp-single__layout {
    grid-template-columns: 1fr;
  }
}

/* 左：資料情報 */
.wp-single__main {
  width: calc(50% - 20px);
}
.wp-single__thumb {
  // border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.wp-single__thumb-img {
  width: 100%;
  height: auto;
  display: block;
}

.wp-single__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
  color: rgb(10 20 26);
  margin-bottom: 16px;
}

.wp-single__excerpt {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.wp-single__body {
  font-size: 15px;
  line-height: 1.9;
  color: #444;
}

/* 右：フォームカード */
.wp-single__aside {
  width: calc(50% - 20px);
}

.wp-single__form-card {
}

.wp-single__form-title {
  font-size: 20px;
  font-weight: 700;
  color: #222;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-primary, #316280);
}

/* CF7 フォームスタイル（資料請求） */
.wp-single__form-card .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wp-single__form-card .wpcf7-text,
.wp-single__form-card .wpcf7-email,
.wp-single__form-card .wpcf7-tel {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  box-sizing: border-box;
}

.wp-single__form-card .wpcf7-submit {
  display: block;
  width: 100%;
  background: var(--color-accent, #ffda52);
  color: #222;
  font-size: 16px;
  font-weight: 700;
  padding: 14px 0;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s, opacity 0.2s;
  margin-top: 8px;
}

.wp-single__form-card .wpcf7-submit:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  opacity: 0.9;
}

.wp-single__form-card .wpcf7-submit:disabled {
  background: rgba(0, 0, 0, 0.15);
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   15. トップページレイアウト（top-main-wrap / top-cta / top-section-head 等）
   -------------------------------------------------------------------------- */

/* コンテンツ幅コンテナ */
.top-main-wrap {
  width: 100%;
  padding: 0 20px;
}

.top-main-inner {
  width: 1298px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0 24px;
}

.top-main__content {
  flex: 1;
  min-width: 0;
}

/* セクション見出し（新規記事・お役立ち資料） */
.top-section-head {
  margin: 16px 0;
}

.top-section-head__title {
  font-size: 24px;
  font-weight: 700;
  color: rgb(128 103 49);
}

.top-section-head__line {
  margin-top: 8px;
  border-bottom: 1px solid #d1d5db;
}

/* 新規記事・お役立ち資料 共通ラッパー */
.top-articles-wrap {
  width: 1024px;
  max-width: 100%;
}

/* 新規記事グリッド */
.top-new-articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

/* もっとみるボタン */
.top-more {
  display: flex;
  justify-content: center;
  margin-bottom: 48px;
}

.top-more-btn {
  display: inline-block;
  background: rgb(24 49 64);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 4px;
  line-height: 1;
  transition: opacity 0.2s;
}

.top-more-btn:hover {
  opacity: 0.85;
}

/* お役立ち資料グリッド */
.top-whitepaper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.top-whitepaper__thumb {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16/9;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  margin-bottom: 10px;
}

.top-whitepaper__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.top-whitepaper__thumb-link:hover .top-whitepaper__img {
  transform: scale(1.04);
}

.top-whitepaper__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text, #1f2937);
}

.top-whitepaper__title:hover {
  color: var(--color-primary, #2563eb);
}

/* ========== CTAセクション（元サイト忠実再現） ========== */
.top-cta {
  background: rgb(10 20 26);
  width: 100%;
  margin: 32px 0;
  padding: 32px 20px;
}

.top-cta__container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* 左：画像＋テキスト */
.top-cta__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.top-cta__image-wrap img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
}

.top-cta__text {
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  font-size: 18px;
}

.top-cta__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

.top-cta__desc p {
  line-height: 1.8;
  font-size: 20px;
  font-weight: 500;
}

.top-cta__list {
  list-style: disc;
  list-style-position: inside;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 18px;
  text-align: left;
}

/* 右：お問い合わせカード */
.top-cta__sidebar {
  width: 100%;
  flex-shrink: 0;
}

.top-cta__card {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
  width: 100%;
  min-height: 220px;
  box-sizing: border-box;
}

.top-cta__card-text {
  text-align: center;
  max-width: 188px;
}

.top-cta__card-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f2234;
  line-height: 1.4;
}

.top-cta__card-body {
  font-size: 16px;
  margin-top: 12px;
  line-height: 1.6;
}

.top-cta__card-btn {
  display: inline-block;
  background: var(--color-accent, #ffda52);
  color: #0f2234;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  padding: 20px 24px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.top-cta__card-btn:hover {
  opacity: 0.85;
}

/* PC（1280px以上）で横並び・高さ520px */
@media (min-width: 1280px) {
  .top-cta {
    padding: 0;
  }
  .top-cta__container {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 520px;
    max-width: 100%;
    padding: 0 40px;
    gap: 40px;
  }
  .top-cta__main {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 900px;
  }
  .top-cta__image-wrap img {
    max-width: 500px;
    width: 500px;
    height: 500px;
  }
  .top-cta__text {
    text-align: right;
  }
  .top-cta__list {
    text-align: right;
    list-style: none;
    padding-right: 0;
    font-weight: 500;
    font-size: 20px;
  }
  .top-cta__list li::after {
    content: " •";
    color: #fff;
  }
  .top-cta__title {
    font-size: 30px;
  }
  .top-cta__sidebar {
    width: 250px;
  }
  .top-cta__card {
    width: 250px;
    min-height: 280px;
    flex-direction: column;
    align-items: center;
  }
  .top-cta__card-text {
    text-align: center;
    max-width: 188px;
  }
}

/* タブレット */
@media (min-width: 768px) and (max-width: 1279px) {
  .top-cta__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    min-height: 200px;
  }
  .top-cta__card-text {
    text-align: left;
    max-width: 33%;
  }
}

/* レスポンシブ（1298px以下） */
@media (max-width: 1298px) {
  .top-main-inner {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    flex-direction: column;
  }
  .top-main__content {
    width: 100%;
  }
  .sidebar {
    width: 100% !important;
  }
  .top-recommend__grid--6 {
    grid-template-columns: repeat(1, 1fr);
  }
  .top-articles-wrap {
    width: 100%;
  }
  .top-cta__container {
    max-width: 100%;
    padding: 32px 20px;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  .top-new-articles {
    grid-template-columns: 1fr;
  }
  .top-whitepaper {
    grid-template-columns: 1fr;
  }
  .top-articles-wrap {
    width: 100%;
  }
  .top-cta__card {
    width: 100%;
  }
  .top-main-wrap {
    padding: 24px 0px;
  }
}

/* --------------------------------------------------------------------------
   14. ポップアップバナー（元サイト準拠：右下固定）
   -------------------------------------------------------------------------- */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.overlay.is-active {
  display: block;
}

.popup-banner {
  display: none;
  position: fixed;
  bottom: 28px;
  right: 50px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  opacity: 1;
  transition: opacity 0.5s ease, filter 0.3s ease;
}

.popup-banner.is-active {
  display: block;
}

.popup-banner img {
  width: 336px;
  height: 280px;
  display: block;
  margin: 0 auto;
}

.popup-banner.fade-out {
  opacity: 0.5;
}

.popup-banner:hover {
  filter: brightness(1);
}

.close-button {
  position: absolute;
  top: -5px;
  right: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  padding: 0;
}

.close-button svg {
  width: 20px;
  height: 20px;
  color: #000;
}

@media (max-width: 767px) {
  .popup-banner {
    bottom: 16px;
    right: 16px;
  }
  .popup-banner img {
    width: 240px;
    height: 200px;
  }
}

/* --------------------------------------------------------------------------
   16. アーカイブ共通（資料一覧・記事一覧）
   -------------------------------------------------------------------------- */
.archive-wrap {
  background: #f5f5f3;
  padding: 32px 0 64px;
}

.archive-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ページ見出し */
.archive-heading-wrap {
  margin-bottom: 24px;
}

.archive-heading {
  font-size: 24px;
  font-weight: 700;
  color: rgb(128, 103, 49);
}

@media (min-width: 768px) {
  .archive-heading { font-size: 28px; }
}

/* カードグリッド：3カラム */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .archive-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 480px) {
  .archive-grid { grid-template-columns: 1fr; }
}

/* 空の場合 */
.archive-empty {
  text-align: center;
  color: #888;
  padding: 40px 0;
  font-size: 15px;
}

/* ページネーション */
.archive-pagination {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

.archive-pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.archive-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  color: #555;
  text-decoration: none;
  background: #fff;
  transition: background 0.15s, color 0.15s;
}

.archive-pagination .page-numbers.current {
  background: var(--color-primary, #316280);
  color: #fff;
  border-color: var(--color-primary, #316280);
  font-weight: 700;
}

.archive-pagination .page-numbers:hover:not(.current) {
  background: #f0f0f0;
}

/* ==========================================================================
   Section 17: サイドバー メルマガフォーム (CF7)
   ========================================================================== */
.sidebar-mail-form .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar-mail-form input[type="email"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}
.sidebar-mail-form .wpcf7-acceptance {
  font-size: 12px;
  color: #ccc;
}
.sidebar-mail-form .wpcf7-acceptance a {
  color:#ccc;
}
.sidebar-mail-form input[type="submit"] {
  width: 100%;
  padding: 10px;
  background: var(--color-accent, #ffda52);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.sidebar-mail-form input[type="submit"]:hover {
  opacity: 0.85;
}

/* 検索トグルボタン：ボーダー非表示 */
#search-toggle {
  border: none !important;
  background: transparent;
}
#search-toggle:hover {
  border: none !important;
}

/* サイドバー おすすめ記事：抜粋 */
.sidebar-recommend__excerpt {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* サイドバー おすすめ記事：カテゴリラベル */
.sidebar-recommend__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.sidebar-recommend__cat-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary, #316280);
  background: rgba(49, 98, 128, 0.08);
  border-radius: 3px;
  padding: 2px 6px;
  text-decoration: none;
  white-space: nowrap;
}
.sidebar-recommend__cat-label:hover {
  background: rgba(49, 98, 128, 0.18);
}

/* 記事本文内テーブル：SP横スクロール対応 */
.m-article-details table,
#entry-content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.m-article-details table th,
.m-article-details table td,
#entry-content table th,
#entry-content table td {
  white-space: nowrap;
}